/** * SABO HUB — Shared pricing & industry picker (marketing) * Used by: flagship/index.html, biz-*.html * Pages may set --pricing-accent for vertical theming * Optional: html[data-vertical="service|distribution|manufacturing"] for per-vertical tints */ :root { --pricing-accent: var(--accent, #4f46e5); --pricing-accent-mix: color-mix(in srgb, var(--pricing-accent) 12%, transparent); --pricing-accent-border: color-mix(in srgb, var(--pricing-accent) 35%, var(--line, rgba(16, 24, 48, 0.1))); /* Section atmosphere — flagship defaults (indigo / cyan mesh) */ --picker-bg-photo: url('/landing/flagship/img/atmos-v2.png'); --picker-bg-photo-opacity: 0.42; --picker-tint-a: rgba(79, 70, 229, 0.14); --picker-tint-b: rgba(6, 182, 212, 0.1); --picker-tint-c: rgba(124, 58, 237, 0.08); --pricing-bg-photo: url('/landing/flagship/img/hero-v2.png'); --pricing-bg-photo-opacity: 0.38; --pricing-tint-a: rgba(79, 70, 229, 0.12); --pricing-tint-b: rgba(6, 182, 212, 0.09); --enterprise-bg-photo: url('/landing/flagship/img/enterprise-pioneer-v1.png'); --enterprise-bg-photo-opacity: 0.48; --enterprise-tint-a: rgba(79, 70, 229, 0.06); --enterprise-tint-b: rgba(6, 182, 212, 0.05); /* Flagship #industries bento — lower photo opacity (cards carry their own art) */ --industries-bg-photo: url('/landing/flagship/img/hero-v2.png'); --industries-bg-photo-opacity: 0.3; --industries-tint-a: rgba(79, 70, 229, 0.11); --industries-tint-b: rgba(6, 182, 212, 0.08); --industries-tint-c: rgba(124, 58, 237, 0.06); --section-glass-frost: var(--glass-frost, blur(40px) saturate(180%)); --section-glass-bg: rgba(255, 255, 255, 0.72); --section-glass-border: rgba(255, 255, 255, 0.68); --section-glass-shadow: 0 8px 32px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.78); } /* Per-vertical tints (biz-*.html set data-vertical on ) */ html[data-vertical='service'] { --picker-bg-photo: url('/landing/vertical/service/img/hero.png'); --pricing-bg-photo: url('/landing/vertical/service/img/hero.png'); --picker-tint-a: rgba(219, 39, 119, 0.14); --picker-tint-b: rgba(217, 119, 6, 0.1); --picker-tint-c: rgba(124, 58, 237, 0.07); --pricing-tint-a: rgba(219, 39, 119, 0.12); --pricing-tint-b: rgba(217, 119, 6, 0.08); --enterprise-tint-a: rgba(219, 39, 119, 0.06); --enterprise-tint-b: rgba(217, 119, 6, 0.05); } html[data-vertical='distribution'] { --picker-bg-photo: url('/landing/vertical/distribution/img/hero.png'); --pricing-bg-photo: url('/landing/vertical/distribution/img/hero.png'); --picker-tint-a: rgba(20, 184, 166, 0.14); --picker-tint-b: rgba(14, 165, 233, 0.1); --picker-tint-c: rgba(132, 204, 22, 0.07); --pricing-tint-a: rgba(20, 184, 166, 0.12); --pricing-tint-b: rgba(14, 165, 233, 0.09); --enterprise-tint-a: rgba(20, 184, 166, 0.06); --enterprise-tint-b: rgba(14, 165, 233, 0.05); } html[data-vertical='manufacturing'] { --picker-bg-photo: url('/landing/vertical/manufacturing/img/hero.png'); --pricing-bg-photo: url('/landing/vertical/manufacturing/img/hero.png'); --picker-tint-a: rgba(234, 88, 12, 0.12); --picker-tint-b: rgba(2, 132, 199, 0.1); --picker-tint-c: rgba(5, 150, 105, 0.07); --pricing-tint-a: rgba(234, 88, 12, 0.1); --pricing-tint-b: rgba(2, 132, 199, 0.08); --enterprise-tint-a: rgba(234, 88, 12, 0.05); --enterprise-tint-b: rgba(2, 132, 199, 0.05); } /* Subtle grain overlay reserved — CSS gradients only (no extra asset) */ .industry-picker, .pricing-section, .enterprise-note, #industries { position: relative; isolation: isolate; overflow: hidden; } .industry-picker > .wrap, .pricing-section > .wrap, .enterprise-note > .wrap, #industries > .wrap { position: relative; z-index: 2; } /* Photo + wash layer */ .industry-picker::before, .pricing-section::before, .enterprise-note::before, #industries::before { content: ''; position: absolute; inset: -8% 0; z-index: 0; pointer-events: none; background-image: var(--section-bg-photo, var(--picker-bg-photo)); background-size: cover; background-position: center; opacity: var(--section-bg-photo-opacity, var(--picker-bg-photo-opacity)); will-change: transform; } .pricing-section::before { background-image: var(--pricing-bg-photo); opacity: var(--pricing-bg-photo-opacity); } .enterprise-note::before { background-image: var(--enterprise-bg-photo); opacity: var(--enterprise-bg-photo-opacity); background-position: center 40%; } #industries::before { background-image: var(--industries-bg-photo); opacity: var(--industries-bg-photo-opacity); } /* Mesh gradient + soft vignette */ .industry-picker::after, .pricing-section::after, .enterprise-note::after, #industries::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; } .industry-picker::after { background: radial-gradient(70% 55% at 12% 18%, var(--picker-tint-a), transparent 58%), radial-gradient(65% 50% at 88% 22%, var(--picker-tint-b), transparent 55%), radial-gradient(80% 45% at 50% 100%, var(--picker-tint-c), transparent 62%), linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.62) 48%, rgba(255, 255, 255, 0.76) 100%); } .pricing-section::after { background: radial-gradient(75% 60% at 8% 30%, var(--pricing-tint-a), transparent 58%), radial-gradient(70% 55% at 92% 70%, var(--pricing-tint-b), transparent 55%), linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.58) 50%, rgba(255, 255, 255, 0.82) 100%); } .enterprise-note::after { background: radial-gradient(60% 50% at 20% 50%, var(--enterprise-tint-a), transparent 55%), radial-gradient(55% 45% at 80% 50%, var(--enterprise-tint-b), transparent 52%), linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.72) 100%); } #industries::after { background: radial-gradient(72% 58% at 10% 20%, var(--industries-tint-a), transparent 58%), radial-gradient(68% 52% at 90% 78%, var(--industries-tint-b), transparent 55%), radial-gradient(75% 48% at 50% 100%, var(--industries-tint-c), transparent 62%), linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0%, rgba(255, 255, 255, 0.7) 48%, rgba(255, 255, 255, 0.82) 100%); } /* Desktop: gentle fixed-bg parallax feel (no JS, no extra LCP) */ @media (min-width: 961px) and (prefers-reduced-motion: no-preference) { .industry-picker::before, .pricing-section::before, .enterprise-note::before, #industries::before { background-attachment: fixed; } } /* Mobile: gradients only — lighter wash, no fixed attachment */ @media (max-width: 960px) { .industry-picker::before, .pricing-section::before, .enterprise-note::before, #industries::before { inset: 0; opacity: calc(var(--picker-bg-photo-opacity) * 0.55); background-attachment: scroll; } .pricing-section::before { opacity: calc(var(--pricing-bg-photo-opacity) * 0.5); } .enterprise-note::before { opacity: calc(var(--enterprise-bg-photo-opacity) * 0.42); } #industries::before { opacity: calc(var(--industries-bg-photo-opacity) * 0.45); } .industry-picker::after { background: radial-gradient(80% 60% at 50% 0%, var(--picker-tint-a), transparent 65%), linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.72) 100%); } .pricing-section::after { background: radial-gradient(80% 60% at 50% 20%, var(--pricing-tint-a), transparent 65%), linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.74) 100%); } .enterprise-note::after { background: radial-gradient(80% 55% at 50% 30%, var(--enterprise-tint-a), transparent 65%), linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.78) 100%); } #industries::after { background: radial-gradient(80% 60% at 50% 10%, var(--industries-tint-a), transparent 65%), linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.76) 100%); } } @media (prefers-reduced-motion: reduce) { .industry-picker::before, .pricing-section::before, .enterprise-note::before, #industries::before { background-attachment: scroll; } } /* ---- Industry picker ---- */ .industry-picker { padding: 120px 0; border-top: 1px solid var(--line, rgba(16, 24, 48, 0.1)); } .picker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 860px) { .picker-grid { grid-template-columns: 1fr; } } .picker-card { display: flex; flex-direction: column; border: 1px solid var(--section-glass-border); border-radius: 22px; padding: 0; overflow: hidden; background: var(--section-glass-bg); -webkit-backdrop-filter: var(--section-glass-frost); backdrop-filter: var(--section-glass-frost); box-shadow: var(--section-glass-shadow); transition: border-color 0.3s var(--ease, ease), transform 0.35s var(--ease, ease), box-shadow 0.35s var(--ease, ease); height: 100%; color: inherit; text-decoration: none; isolation: isolate; } .picker-card:hover { border-color: var(--pricing-accent-border); transform: translateY(-4px); box-shadow: 0 16px 48px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.85); } .picker-card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; flex: none; border-bottom: 1px solid color-mix(in srgb, var(--line, rgba(16, 24, 48, 0.1)) 70%, transparent); } .picker-card-media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 35%), linear-gradient(180deg, transparent 45%, rgba(255, 255, 255, 0.22) 100%); } .picker-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.55s var(--ease, ease); } .picker-card:hover .picker-card-media img { transform: scale(1.04); } @media (prefers-reduced-motion: reduce) { .picker-card-media img, .picker-card:hover .picker-card-media img { transform: none; transition: none; } } .picker-card-body { display: flex; flex-direction: column; flex: 1; padding: 22px 26px 28px; } .picker-card .num { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.1em; color: var(--pricing-accent); margin-bottom: 10px; } .picker-card h3 { font-size: 22px; font-weight: 700; margin-bottom: 10px; letter-spacing: -0.01em; } .picker-card .desc { font-size: 14px; color: var(--muted, #334155); line-height: 1.55; margin-bottom: 16px; flex: 1; } .picker-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; } .picker-chips i { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 11px; padding: 5px 10px; border: 1px solid var(--line, rgba(16, 24, 48, 0.1)); border-radius: 20px; color: var(--muted, #334155); background: color-mix(in srgb, var(--surface, #fff) 90%, transparent); } .picker-card .more { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--pricing-accent); font-weight: 600; letter-spacing: 0.02em; margin-top: auto; } .picker-soft-cta { margin-top: 36px; text-align: center; font-size: 14px; color: var(--muted, #334155); line-height: 1.6; } .picker-soft-cta a { color: var(--pricing-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* ---- Example chips row (vertical pages) ---- */ .chips-row { padding: 80px 0 0; } .chips-row .chip-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .chips-row .chip-list i { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 12px; padding: 10px 16px; border: 1px solid var(--line, rgba(16, 24, 48, 0.1)); border-radius: 40px; color: var(--muted, #334155); transition: border-color 0.25s, color 0.25s; } .chips-row .chip-list i:hover { border-color: var(--pricing-accent-border); color: var(--ink, #050810); } /* ---- Pricing section ---- */ .pricing-section { padding: 120px 0; border-top: 1px solid var(--line, rgba(16, 24, 48, 0.1)); } .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; } @media (max-width: 960px) { .pricing-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; } } .price-card { display: flex; flex-direction: column; border: 1px solid var(--section-glass-border); border-radius: 22px; padding: 32px 28px; background: var(--section-glass-bg); -webkit-backdrop-filter: var(--section-glass-frost); backdrop-filter: var(--section-glass-frost); box-shadow: var(--section-glass-shadow); position: relative; isolation: isolate; } .price-card.featured { border-color: var(--pricing-accent-border); box-shadow: 0 16px 48px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.72); background: color-mix(in srgb, var(--pricing-accent-mix) 35%, var(--section-glass-bg)); } .price-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em; font-weight: 700; padding: 6px 14px; border-radius: 20px; background: var(--pricing-accent); color: #fff; white-space: nowrap; } .price-tier { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.14em; color: var(--pricing-accent); text-transform: uppercase; margin-bottom: 8px; } .price-card h3 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 4px; } .price-tagline { font-size: 14px; color: var(--muted, #334155); margin-bottom: 18px; } .price-amount { font-size: clamp(28px, 3.5vw, 36px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 4px; } .price-amount .period { font-size: 14px; font-weight: 600; color: var(--muted, #334155); } .price-amount.contact { font-size: clamp(24px, 3vw, 32px); } .price-features { list-style: none; margin: 22px 0; padding: 0; flex: 1; } .price-features li { font-size: 13.5px; color: var(--muted, #334155); line-height: 1.55; padding: 7px 0 7px 22px; position: relative; border-bottom: 1px solid color-mix(in srgb, var(--line, rgba(16, 24, 48, 0.1)) 60%, transparent); } .price-features li:last-child { border-bottom: 0; } .price-features li::before { content: '✓'; position: absolute; left: 0; color: var(--pricing-accent); font-weight: 700; font-size: 12px; } .price-features li.neg::before { content: '—'; color: var(--muted, #334155); opacity: 0.6; } .price-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: 999px; font-weight: 600; font-size: 14px; text-align: center; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; border: 1px solid transparent; margin-top: auto; width: 100%; } .price-cta-primary { background: color-mix(in srgb, var(--pricing-accent) 22%, transparent); color: color-mix(in srgb, var(--pricing-accent) 85%, #000); border-color: color-mix(in srgb, var(--pricing-accent) 25%, rgba(255, 255, 255, 0.45)); -webkit-backdrop-filter: var(--glass-frost, blur(40px)); backdrop-filter: var(--glass-frost, blur(40px)); box-shadow: 0 8px 32px rgba(15, 23, 42, 0.1); } .price-cta-primary:hover { background: color-mix(in srgb, var(--pricing-accent) 32%, transparent); } .price-card.featured .price-cta-primary { background: var(--pricing-accent); color: #fff; border-color: transparent; } .price-card.featured .price-cta-primary:hover { filter: brightness(1.08); } .price-cta-ghost { background: color-mix(in srgb, var(--surface, #fff) 70%, transparent); color: var(--ink, #050810); border-color: var(--line, rgba(16, 24, 48, 0.1)); } .price-cta-ghost:hover { border-color: var(--pricing-accent-border); } .price-detail-link { display: block; margin-top: 12px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--pricing-accent); text-align: center; font-weight: 600; } .price-footnote { margin-top: 14px; font-size: 11.5px; color: var(--muted, #334155); line-height: 1.5; font-style: italic; } .pricing-shared-note { margin-top: 28px; text-align: center; font-size: 13px; color: var(--muted, #334155); line-height: 1.55; } .pricing-shared-note a { color: var(--pricing-accent); font-weight: 600; } /* ---- M&T enterprise footnote ---- */ .enterprise-note { padding: 60px 0 100px; } .enterprise-box { border: 1px solid var(--section-glass-border); border-radius: 22px; padding: 36px 32px; background: color-mix(in srgb, var(--section-glass-bg) 88%, transparent); -webkit-backdrop-filter: var(--section-glass-frost); backdrop-filter: var(--section-glass-frost); box-shadow: var(--section-glass-shadow); max-width: 820px; margin: 0 auto; position: relative; z-index: 2; } .enterprise-box h3 { font-size: 20px; font-weight: 700; margin-bottom: 14px; letter-spacing: -0.01em; } .enterprise-box p { font-size: 14px; color: var(--muted, #334155); line-height: 1.65; margin-bottom: 16px; } .enterprise-links { display: flex; flex-wrap: wrap; gap: 16px; font-family: 'JetBrains Mono', monospace; font-size: 12px; } .enterprise-links a { color: var(--pricing-accent); font-weight: 600; }