/* ApexQuant — SHELL layer (reusable page chrome, shared by ALL pages). Load order on every page: colors_and_type.css -> components.css -> shell.css -> .css Contains: reset + container, ambient background, announcement bar, top nav + sticky floatbar + mobile drawer, brand toggle, section rhythm, light band, footer + language picker, and the global overlay widgets (social-proof toast, cookie bar, WhatsApp). Page-specific sections (hero, features, etc.) live in the page's own stylesheet. */ /* ApexQuant landing UI kit — layout & section styles. Depends on ../../colors_and_type.css + ../../components.css */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *{ animation: none !important; } } body { background: var(--apex-night); color: var(--bone); font-family: var(--font); font-feature-settings: var(--font-features); -webkit-font-smoothing: antialiased; overflow-x: hidden; } .wrap { max-width: calc(var(--container) + 112px); margin: 0 auto; padding: 0 56px; position: relative; z-index: 2; } @media (max-width: 900px){ .wrap{ padding: 0 24px; } } @media (max-width: 560px){ /* phones: ONE consistent side gutter (24px) for ALL content — same value as the top nav, so headline, body, sections, footer and the intro all line up to the same left/right edge. */ .wrap{ padding: 0 24px; } /* ALL CTAs full-width to the gutter on mobile (intro stays centered; buttons fill the column), and 4px taller. align-self: stretch lets a row inside a centered column reach both gutters. */ .ctarow { flex-direction: column; align-items: stretch; align-self: stretch; } .ctarow .aq-btn { width: 100%; padding-top: 18px; padding-bottom: 18px; } } /* ===== Ambient background ===== */ /* NB: do NOT set position:relative on — on iOS Safari a positioned root element combined with overflow-x:hidden reroutes the scrolling/gesture container and kills finger scrolling of nested overflow scrollers. The ambient .bg is anchored to #root (its offsetParent), so #root alone provides the positioning context. */ #root { position: relative; } .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: hidden; } .bg .halo { position: absolute; width: 760px; height: 760px; background: radial-gradient(circle, var(--accent-halo, rgba(30,91,255,0.16)), transparent 62%); filter: blur(8px); transition: background .5s var(--ease); } .bg .halo--hero { top: -4%; right: -5%; left: auto; } .bg .halo2.halo--hero { width: 620px; height: 620px; top: auto; bottom: auto; background: radial-gradient(circle, rgba(30,91,255,0.06), transparent 60%); } .bg .halo2.halo--hero { top: 5%; left: -10%; right: auto; } .bg .halo--mid1 { width: 640px; height: 640px; top: 33%; left: -14%; right: auto; background: radial-gradient(circle, rgba(30,91,255,0.10), transparent 62%); } .bg .halo--mid2 { width: 560px; height: 560px; top: 56%; right: -12%; left: auto; background: radial-gradient(circle, rgba(30,91,255,0.085), transparent 62%); } .bg .halo--mid3 { width: 600px; height: 600px; top: 78%; left: -10%; right: auto; background: radial-gradient(circle, rgba(30,91,255,0.07), transparent 62%); } .star { position: absolute; border-radius: 50%; background: var(--accent-dot, #5C82FF); width: calc(var(--ssz,2px)); height: calc(var(--ssz,2px)); opacity: .5; box-shadow: 0 0 var(--sg,6px) var(--accent-dot,#5C82FF), 0 0 1.6px var(--accent-dot,#5C82FF); animation: twinkle var(--tw,4s) ease-in-out infinite, starfloat var(--fdur,18s) ease-in-out infinite alternate; will-change: transform, opacity; } @keyframes twinkle { 0%,100%{ opacity:.15; } 50%{ opacity:.8; } } @keyframes starfloat { 0%{ translate:0 0; } 25%{ translate:14px -10px; } 50%{ translate:-8px -16px; } 75%{ translate:-16px 6px; } 100%{ translate:10px 12px; } } @media (prefers-reduced-motion: reduce){ .star{ animation: twinkle var(--tw,4s) ease-in-out infinite; } } /* light-band star layer — blue dots that read on the cream surface */ .bg-light { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .section--testimonials > *:not(.bg-light), .section--cta > *:not(.bg-light) { position: relative; z-index: 1; } .bg-light .star--blue { background: var(--apex-blue, #1E5BFF); box-shadow: 0 0 5px rgba(30,91,255,0.35); opacity: .42; } @keyframes twinkleBlue { 0%,100%{ opacity:.16; } 50%{ opacity:.55; } } .bg-light .star--blue { animation: twinkleBlue var(--tw,4s) ease-in-out infinite, starfloat var(--fdur,18s) ease-in-out infinite alternate; } @media (prefers-reduced-motion: reduce){ .bg-light .star--blue{ animation: twinkleBlue var(--tw,4s) ease-in-out infinite; } } /* ===== Announcement bar (top of page, in flow above nav) ===== */ .announcement-bar { position: relative; z-index: 60; width: 100%; } /* ===== Static top nav (always present in the hero; scrolls away) ===== */ .hnav { position: absolute; top: 0; left: 0; right: 0; z-index: 50; background: transparent; } .hnav-inner { max-width: calc(var(--container) + 112px); margin: 0 auto; padding: 22px 56px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .hnav-links { display: flex; align-items: center; gap: 30px; } .hnav-links .lnk { font-family: var(--font); font-size: 14px; font-weight: 500; color: var(--soft-grey); text-decoration: none; letter-spacing: -0.005em; transition: color .2s var(--ease); } .hnav-links .lnk:hover { color: var(--bone); } .hnav-right { display: flex; align-items: center; gap: 30px; } .nav-ctas { display: flex; align-items: center; gap: 14px; } .hnav .nav-burger span { background: var(--bone); } @media (max-width: 900px){ .hnav-inner{ padding: 18px 24px; } } @media (max-width: 768px){ .hnav-links { display: none; } .hnav-right .aq-btn-nav { display: none; } } /* ===== Floating bar (Apple-style: scroll-reveal, background-adaptive) ===== Desktop → floats at top · Mobile → floats at bottom. Hidden until the hero is scrolled past, then springs in with the same premium motion as the social-proof toast. Solid fill that re-tints to match the band it floats over (deep blue over dark, bone over light). */ .floatbar { position: fixed; z-index: 70; left: 0; right: 0; margin-inline: auto; top: 16px; bottom: auto; width: min(1020px, calc(100vw - 40px)); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 10px 12px 10px 22px; border-radius: 20px; --fb-bg: rgba(13,27,61,0.90); --fb-fg: var(--bone); --fb-border: rgba(255,255,255,0.10); --fb-link: var(--soft-grey); background: var(--fb-bg); color: var(--fb-fg); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); box-shadow: inset 0 0 0 1px var(--fb-border), 0 18px 50px -16px rgba(2,4,12,0.6); transition: background .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease); transform-origin: 50% 0%; will-change: transform, opacity, filter; opacity: 0; transform: translateY(-20px) scale(0.97); filter: blur(6px); pointer-events: none; } .floatbar.is-in { opacity: 1; filter: blur(0); pointer-events: auto; animation: floatbarInTop .9s cubic-bezier(0.22,1,0.36,1) both; } @keyframes floatbarInTop { 0% { opacity: 0; transform: translateY(-28px) scale(0.93); filter: blur(11px); } 45% { opacity: 1; filter: blur(0); } 72% { transform: translateY(3px) scale(1.006); } 88% { transform: translateY(-1px) scale(0.999); } 100% { transform: translateY(0) scale(1); filter: blur(0); } } /* light-band theme — solid bone surface, dark ink */ .floatbar--light { --fb-bg: rgba(250,248,243,0.90); --fb-fg: #0A1736; --fb-border: rgba(10,23,54,0.10); --fb-link: #5A6178; box-shadow: inset 0 0 0 1px var(--fb-border), 0 18px 50px -18px rgba(20,40,90,0.22); } .floatbar .wordmark { color: var(--fb-fg); transition: color .45s var(--ease); } .floatbar-right { display: flex; align-items: center; gap: 14px; } /* sticky-bar CTAs — fuller size so they read at parity with the hero, not the compact nav size */ .floatbar .floatbar-cta { height: 44px; padding: 0 22px; font-size: 15px; } /* phone icon (Lucide) on the secondary "Talk to us" CTA — outline at rest, fills in on hover */ .aq-btn .tel { width: 16px; height: 16px; display: inline-block; flex: 0 0 auto; fill: transparent; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: fill .25s var(--ease), transform .25s var(--ease); } .aq-btn:hover .tel { fill: currentColor; stroke: currentColor; transform: scale(1.06); } /* secondary CTA — adapts to the floatbar's dark/light state via --fb tokens */ .floatbar .aq-btn-fbsecondary { background: transparent; color: var(--fb-fg, var(--bone)); box-shadow: inset 0 0 0 1px var(--fb-border, rgba(255,255,255,0.18)); } .floatbar .aq-btn-fbsecondary:hover { box-shadow: inset 0 0 0 1px var(--fb-fg, rgba(255,255,255,0.4)); } .floatbar-links { display: flex; align-items: center; gap: 24px; } .floatbar-links .lnk { font-family: var(--font); font-size: 14px; font-weight: 500; color: var(--fb-link); text-decoration: none; letter-spacing: -0.005em; transition: color .2s var(--ease); } .floatbar-links .lnk:hover { color: var(--fb-fg); } @media (prefers-reduced-motion: reduce){ .floatbar { transition: opacity .3s linear, background .3s linear, color .3s linear; transform: none; filter: none; } .floatbar.is-in { transform: none; filter: none; animation: none; } } /* hamburger — hidden on desktop, shown ≤768px */ .nav-burger { display: none; appearance: none; border: 0; background: transparent; cursor: pointer; width: 44px; height: 44px; border-radius: 10px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; } .nav-burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--fb-fg); transition: background .45s var(--ease); } .mobile-drawer, .mobile-scrim { display: none; } /* marketing pages (squeeze, sales): on mobile drop the fixed top nav — only the sticky bar remains */ @media (max-width: 768px){ .hnav--mk { display: none; } } @media (max-width: 768px){ /* sticky bar stays at the TOP on mobile too: logo (left, -20%) + a single blue CTA (right, -20% text). No secondary "Talk to us"; the WhatsApp FAB stays bottom-right. */ .floatbar { top: 12px; bottom: auto; width: calc(100vw - 24px); padding: 7px 8px 7px 16px; gap: 10px; transform-origin: 50% 0%; transform: translateY(-20px) scale(0.97); } .floatbar.is-in { animation: floatbarInTop .9s cubic-bezier(0.22,1,0.36,1) both; } .floatbar-links { display: none; } /* logo shown, 20% smaller (icon + wordmark) */ .floatbar .lockup { display: flex; transform: scale(0.8); transform-origin: left center; } /* only the blue CTA; hide the secondary "Talk to us" */ .floatbar .aq-btn-fbsecondary { display: none; } /* blue CTA: text 20% smaller, compact, anchored right (not centered) */ .floatbar .floatbar-cta { position: static; transform: none; margin: 0; height: 38px; font-size: 12px; padding: 0 14px; } /* no arrow in the sticky-bar CTA on mobile */ .floatbar .floatbar-cta .arr { display: none; } /* sticky bar = logo + single blue CTA only (no burger here; the static top nav keeps it) */ .floatbar .nav-burger { display: none; } .nav-burger { display: flex; } /* full-screen scrim behind the drawer */ .mobile-scrim { display: block; position: fixed; inset: 0; z-index: 90; background: rgba(6,11,24,0.6); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .26s var(--ease); } .mobile-scrim.is-open { opacity: 1; pointer-events: auto; } /* drawer slides in from the right, edge-to-edge */ .mobile-drawer { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; z-index: 100; width: min(86vw, 360px); height: 100%; padding: 18px 22px calc(24px + env(safe-area-inset-bottom)); background: #0B1326; box-shadow: -24px 0 60px -20px rgba(0,0,0,0.6); border-left: 1px solid var(--hair); transform: translateX(100%); transition: transform .3s var(--ease); } .mobile-drawer.is-open { transform: translateX(0); } .mobile-drawer__top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; } .mobile-drawer__close { appearance: none; border: 0; background: rgba(255,255,255,0.05); color: var(--bone); width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; } .mobile-drawer__links { display: flex; flex-direction: column; gap: 2px; margin-top: 22px; } .mobile-drawer__links a { font-family: var(--font); font-size: 19px; font-weight: 500; letter-spacing: -0.02em; color: var(--bone); text-decoration: none; padding: 15px 4px; border-bottom: 1px solid var(--hair); } .mobile-drawer__cta { margin-top: auto; width: 100%; justify-content: center; } } @keyframes floatbarInBottom { 0% { opacity: 0; transform: translateY(28px) scale(0.93); filter: blur(11px); } 45% { opacity: 1; filter: blur(0); } 72% { transform: translateY(-3px) scale(1.006); } 88% { transform: translateY(1px) scale(0.999); } 100% { transform: translateY(0) scale(1); filter: blur(0); } } /* brand toggle */ .brand-toggle { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: rgba(255,255,255,0.04); box-shadow: inset 0 0 0 1px var(--hair); } .brand-toggle button { appearance: none; border: 0; cursor: pointer; background: transparent; color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; transition: background-color .2s var(--ease), color .2s var(--ease); } .brand-toggle button.on { color: #fff; background-color: var(--apex-blue); } /* ===== Page hero (reusable hero-band layout — content comes from each page) ===== */ .hero { padding: 137px 0 96px; position: relative; z-index: 2; } @media (max-width: 900px){ .hero{ padding: 96px 0 72px; } } .hero .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; } .hero .t-hero { margin-top: 24px; } .hero .lede-wrap { margin-top: 28px; max-width: 640px; } .hero .ctarow { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } .hero .trust-wrap { margin-top: 24px; } /* ===== Section ===== */ .section { padding: 96px 0; position: relative; z-index: 2; } @media (max-width: 900px){ .section{ padding: 72px 0; } } .section .head { max-width: 760px; } .section .head .t-h2 { margin-top: 20px; } .section .head .t-lede { margin-top: 20px; } /* ===== Light band ===== */ .band-light { background: var(--light-bone); border-top: 0; } .band-light .t-eyebrow { color: #5a6178; } .band-light .t-h2, .band-light .t-h3 { color: #0A1736; } .band-light .t-lede, .band-light .t-body { color: #404a63; } .band-light .stat-row { display: flex; gap: 56px; margin-top: 40px; flex-wrap: wrap; } .band-light .stat .t-kpi { color: #0A1736; } .band-light .stat .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #707892; } /* ===== Social-proof toast (bottom-left live notification) ===== */ .sp-toast { position: fixed; left: 24px; bottom: 24px; z-index: 80; width: max-content; max-width: calc(100vw - 32px); display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 11px; background: rgba(22,52,122,0.90); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border: 1px solid rgba(92,130,255,0.28); border-radius: 16px; box-shadow: 0 24px 60px -18px rgba(8,20,60,0.72); transform-origin: 0% 100%; will-change: transform, opacity, filter; /* Exit state (when .is-in is removed): gentle, soft dissolve — long opacity fade, minimal drift, just a whisper of blur (no hard snap). */ opacity: 0; transform: translateY(10px) scale(0.985); filter: blur(2px); pointer-events: none; transition: opacity 1.8s cubic-bezier(0.4,0,0.3,1), transform 1.8s cubic-bezier(0.4,0,0.3,1), filter 1.8s cubic-bezier(0.4,0,0.3,1); } /* Entrance: Apple-style spring with a touch of overshoot + focus-in blur */ .sp-toast.is-in { opacity: 1; filter: blur(0); pointer-events: auto; animation: spToastIn .92s cubic-bezier(0.22,1,0.36,1) both; } @keyframes spToastIn { 0% { opacity: 0; transform: translateY(34px) scale(0.86); filter: blur(14px); } 45% { opacity: 1; filter: blur(0); } 72% { transform: translateY(-5px) scale(1.014); } 88% { transform: translateY(1px) scale(0.998); } 100% { transform: translateY(0) scale(1); filter: blur(0); } } /* Inner stagger — avatar eases up after the card lands, checkmark stamps in */ .sp-toast.is-in .sp-avatar { animation: spAvatarPop .68s .1s cubic-bezier(0.22,1,0.36,1) both; } .sp-toast.is-in .sp-avatar-badge { animation: spBadgeStamp .5s .44s cubic-bezier(0.34,1.56,0.64,1) both; } .sp-toast.is-in .sp-body > * { animation: spBodyRise .6s cubic-bezier(0.22,1,0.36,1) both; } .sp-toast.is-in .sp-line1 { animation-delay: .12s; } .sp-toast.is-in .sp-line2 { animation-delay: .18s; } .sp-toast.is-in .sp-meta { animation-delay: .24s; } @keyframes spAvatarPop { 0% { opacity: 0; transform: scale(0.55); } 60% { transform: scale(1.07); } 100% { opacity: 1; transform: scale(1); } } @keyframes spBadgeStamp { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } } @keyframes spBodyRise { 0% { opacity: 0; transform: translateY(7px); } 100% { opacity: 1; transform: translateY(0); } } .sp-avatar { position: relative; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 999px; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); } .sp-avatar--ini { display: grid; place-items: center; } .sp-ini { font-family: var(--font); font-weight: 600; font-size: 15px; letter-spacing: .01em; color: #fff; } .sp-avatar-badge { position: absolute; right: -2px; bottom: -2px; width: 15px; height: 15px; border-radius: 999px; background: var(--plasma, #23E5C4); color: #06231c; display: grid; place-items: center; box-shadow: 0 0 0 2px rgba(22,52,122,0.95); } .sp-avatar-badge svg { width: 8px; height: 8px; } .sp-body { min-width: 0; flex: 1; } .sp-line1 { font-family: var(--font); font-size: 13px; color: #F4F6FC; letter-spacing: -0.005em; display: flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; gap: 7px; } .sp-line1 strong { font-weight: 600; } .sp-line1 .sp-dim { color: rgba(214,224,248,0.78); font-weight: 400; } .sp-strat { flex: 0 0 auto; margin-left: 2px; display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-family: var(--mono); font-size: 8px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--aurex-gold, #C9A227); background: rgba(201,162,39,0.13); box-shadow: inset 0 0 0 1px rgba(201,162,39,0.4); } .sp-line2 { font-family: var(--font); font-size: 12.5px; color: rgba(206,217,244,0.82); margin-top: 3px; letter-spacing: -0.005em; white-space: nowrap; } .sp-line2 .sp-inst { font-family: var(--mono); font-size: 11px; color: #F4F6FC; } .sp-line2 .sp-tp { font-family: var(--mono); font-size: 11px; color: var(--bone); } .sp-line2 .sp-pos { color: var(--plasma, #23E5C4); font-weight: 600; } .sp-line2 .sp-profit { color: var(--plasma, #23E5C4); font-weight: 600; } .sp-line2 .sp-amt { color: rgba(206,217,244,0.82); } .sp-meta { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: var(--muted); } .sp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--plasma, #23E5C4); box-shadow: 0 0 0 0 rgba(35,229,196,0.5); animation: ctaMeterPulse 1.8s ease-out infinite; } .sp-close { position: static; flex: 0 0 auto; width: 22px; height: 22px; border: 0; background: transparent; color: var(--muted); border-radius: 999px; cursor: pointer; display: grid; place-items: center; transition: background .15s var(--ease), color .15s var(--ease); } .sp-close:hover { background: rgba(255,255,255,0.08); color: var(--bone); } @media (max-width: 560px){ .sp-toast { left: 12px; right: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: max-content; max-width: calc(100vw - 24px); transform-origin: 0% 100%; } } @media (prefers-reduced-motion: reduce){ .sp-toast { transition: opacity .3s linear; transform: none; filter: none; } .sp-toast.is-in { transform: none; filter: none; animation: none; } .sp-toast.is-in .sp-avatar, .sp-toast.is-in .sp-avatar-badge, .sp-toast.is-in .sp-body > * { animation: none; } .sp-dot { animation: none; } } /* ===== Footer (5 columns + language picker) ===== */ .footer { border-top: 1px solid var(--hair); padding: 96px 0 56px; position: relative; z-index: 2; background: var(--apex-night); } .fd-main { display: grid; grid-template-columns: minmax(260px, 2fr) repeat(4, minmax(140px, 1fr)); gap: 40px; } /* marketing variant: brand-only footer (no menu columns) */ .fd-main--marketing { grid-template-columns: 1fr; } .fd-brand .fd-tagline { margin-top: 24px; font-size: 16px; line-height: 1.5; color: var(--bone); font-weight: 500; letter-spacing: -0.01em; max-width: 30ch; } .fd-brand .fd-desc { margin-top: 18px; font-size: 13px; line-height: 1.55; color: var(--soft-grey); max-width: 38ch; } .fd-col-title { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; } .fd-col-links { display: flex; flex-direction: column; gap: 10px; } .fd-link-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .fd-link-row a { font-size: 14px; color: var(--soft-grey); text-decoration: none; transition: color .18s var(--ease); } .fd-link-row a:hover { color: var(--bone); } .fd-badge { display: inline-flex; align-items: center; justify-content: center; padding: 3px 7px; border-radius: 999px; border: 1px solid rgba(92,130,255,0.32); background: rgba(30,91,255,0.13); color: #C8D4FF; box-shadow: 0 0 18px rgba(30,91,255,0.12); font-family: var(--mono); font-size: 9.5px; font-weight: 600; line-height: 1.1; letter-spacing: .02em; white-space: nowrap; } /* risk block */ .fd-risk-block { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--hair); } .fd-risk { font-family: var(--mono); font-size: 10px; color: var(--muted); line-height: 1.75; } .fd-risk--disclaimer { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--hair); } /* bottom row */ .fd-bottom { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--hair); display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 24px; } .fd-bottom-lang { justify-self: start; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .fd-lang-label { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); } .fd-bottom-rights { justify-self: center; text-align: center; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } .fd-bottom-socials { justify-self: end; display: flex; align-items: center; gap: 10px; } .fd-bottom-socials a { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--hair); color: var(--soft-grey); transition: color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease); } .fd-bottom-socials a:hover { color: var(--bone); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); } .fd-bottom-socials svg { width: 14px; height: 14px; display: block; } /* language picker (opens upward) */ .fd-lang { position: relative; display: inline-block; } .fd-lang-btn { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: 999px; color: var(--bone); font-family: var(--font); font-size: 14px; cursor: pointer; outline: none; transition: background .15s var(--ease); } .fd-lang-btn:hover { background: rgba(255,255,255,0.07); } .fd-lang-caret { transition: transform .2s var(--ease); } .fd-lang-menu { position: absolute; bottom: calc(100% + 8px); left: 0; min-width: 220px; background: rgba(14,18,28,0.96); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; padding: 8px; box-shadow: 0 24px 64px rgba(0,0,0,0.6); z-index: 50; } .fd-lang-opt { padding: 12px 18px; font-family: var(--font); font-size: 15px; color: var(--soft-grey); font-weight: 400; border-radius: 10px; cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); } .fd-lang-opt:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,0.04); } .fd-lang-opt:hover { background: rgba(255,255,255,0.03); } .fd-lang-opt.is-selected { color: var(--bone); font-weight: 500; background: rgba(255,255,255,0.06); } @media (max-width: 760px){ .footer { padding: 64px 0 44px; } .fd-main { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 36px 24px; } .fd-brand { grid-column: 1 / -1; } .fd-bottom { grid-template-columns: 1fr; justify-items: center; gap: 20px; } .fd-bottom-lang, .fd-bottom-rights, .fd-bottom-socials { justify-self: center; } } @media (max-width: 440px){ .fd-main { grid-template-columns: 1fr; } } /* ===== Brand theming lives in colors_and_type.css (foundation layer). :root = Apex blue · [data-brand="protocol"] = Flip Red · [data-brand="aurex"] = gold. Each swaps the --accent set (accent / hover / hi / halo / dot / ink / ring). ===== */ /* re-map button + accents to active brand inside the kit */ .aq-btn-primary { background: var(--accent); color: var(--accent-ink); } .aq-btn-primary:hover { background: var(--accent-hover); } .t-key { color: var(--accent-hi); } .t-eyebrow--brand { color: var(--accent); } /* ===== Cookie consent bar (bottom-center) ===== */ .cookie-bar { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); z-index: 90; display: flex; align-items: center; gap: 18px; width: min(560px, calc(100vw - 32px)); padding: 14px 16px; background: rgba(19,29,63,0.94); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); border: 1px solid rgba(92,130,255,0.20); border-radius: 18px; box-shadow: 0 24px 60px -22px rgba(6,16,46,0.7), 0 6px 18px -10px rgba(6,16,46,0.5); opacity: 0; pointer-events: none; transition: opacity .4s var(--ease), transform .4s cubic-bezier(.22,1.1,.36,1); } .cookie-bar.is-in { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } /* iOS Safari fix: a fixed element kept at opacity:0 but still carrying a backdrop-filter leaves a "ghost" frosted layer that tints the strip behind Safari's bottom address bar (e.g. right after dismissing the cookie bar, or as the social-proof toasts come and go). Drop the filter while the element is HIDDEN; it is re-applied automatically via .is-in. */ .cookie-bar:not(.is-in), .sp-toast:not(.is-in), .wa-pop:not(.is-in), .floatbar:not(.is-in) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .cookie-icon { flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; } .cookie-icon svg { width: 100%; height: 100%; display: block; } .cookie-copy { flex: 0 1 auto; min-width: 0; max-width: 285px; font-family: var(--font); font-size: 13px; line-height: 1.5; letter-spacing: -0.005em; color: var(--soft-grey); text-wrap: pretty; } .cookie-copy strong { color: var(--bone); font-weight: 500; } .cookie-copy a { color: var(--accent-hi); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; text-decoration-color: rgba(92,130,255,0.5); transition: color .18s var(--ease), text-decoration-color .18s var(--ease); } .cookie-copy a:hover { color: #8AA6FF; text-decoration-color: #8AA6FF; } .cookie-actions { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 14px; } .cookie-actions .aq-btn { padding: 0 18px; height: 40px; font-size: 13px; } .cookie-decline { appearance: none; border: 0; background: transparent; cursor: pointer; font-family: var(--font); font-size: 13px; font-weight: 500; letter-spacing: -0.005em; color: var(--soft-grey); padding: 0 4px; transition: color .18s var(--ease); } .cookie-decline:hover { color: var(--bone); } @media (max-width: 640px) { .cookie-bar { flex-wrap: wrap; gap: 14px; bottom: 16px; padding: 16px; } .cookie-icon { width: 44px; height: 44px; } .cookie-copy { flex: 1 1 180px; max-width: none; font-size: 13px; } /* Requested mobile setup: icon + text on top, then two full-width stacked buttons (primary above, outlined below). */ .cookie-actions { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; margin-left: 0; } .cookie-actions .aq-btn { width: 100%; height: 46px; order: -1; font-size: 14px; } .cookie-decline { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 46px; padding: 0 18px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--accent-ring); color: var(--bone); font-size: 14px; } .cookie-decline:hover { box-shadow: inset 0 0 0 1px rgba(92,130,255,0.55); color: var(--bone); } } @media (prefers-reduced-motion: reduce) { .cookie-bar { transition: opacity .25s ease; transform: translateX(-50%); } .cookie-bar.is-in { transform: translateX(-50%); } } /* ===== Floating WhatsApp widget (bottom-right) ===== */ .wa-widget { position: fixed; right: 26px; bottom: 26px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; pointer-events: none; } .wa-widget.is-open { pointer-events: auto; } /* FAB */ .wa-fab { position: relative; appearance: none; border: 0; cursor: pointer; width: 60px; height: 60px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: #fff; pointer-events: auto; background: radial-gradient(120% 120% at 30% 25%, #3fe07a 0%, #25D366 48%, #1FB855 100%); box-shadow: 0 2px 6px -1px rgba(7,46,24,0.40), 0 12px 26px -6px rgba(20,120,60,0.50), 0 22px 48px -14px rgba(8,40,22,0.55); transition: transform .28s var(--ease), box-shadow .28s var(--ease); } .wa-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 3px 8px -1px rgba(7,46,24,0.42), 0 16px 32px -6px rgba(20,120,60,0.55), 0 30px 60px -14px rgba(8,40,22,0.6); } .wa-fab:active { transform: translateY(0) scale(0.98); } .wa-fab svg { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18)); } /* idle pulse ring */ .wa-fab::after { content: ""; position: absolute; inset: 0; border-radius: 999px; box-shadow: 0 0 0 0 rgba(37,211,102,0.45); animation: waPulse 2.8s var(--ease) infinite; } @keyframes waPulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.45); } 70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } } /* red unread badge */ .wa-badge { position: absolute; top: -3px; right: -3px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #FF3B30; color: #fff; font-family: var(--font); font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; box-shadow: 0 2px 6px rgba(180,20,12,0.5); animation: waBadgePop .4s var(--ease) both; } @keyframes waBadgePop { from { transform: scale(0); } 60% { transform: scale(1.18); } to { transform: scale(1); } } /* popup card */ .wa-pop { width: 312px; transform-origin: bottom right; background: rgba(17,32,68,0.97); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); border: 1px solid rgba(92,130,255,0.22); border-radius: 18px; overflow: hidden; box-shadow: 0 28px 64px -18px rgba(6,16,46,0.7), 0 8px 22px -10px rgba(6,16,46,0.55); opacity: 0; transform: translateY(14px) scale(0.92); pointer-events: none; transition: opacity .32s var(--ease), transform .32s cubic-bezier(.22,1.2,.36,1); } .wa-pop.is-in { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .wa-pop-head { display: flex; align-items: center; gap: 11px; padding: 13px 14px; background: linear-gradient(180deg, rgba(37,211,102,0.16), rgba(37,211,102,0.04)); border-bottom: 1px solid rgba(255,255,255,0.07); } .wa-pop-ava { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: none; } .wa-pop-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; } .wa-pop-name { font-family: var(--font); font-size: 14.5px; font-weight: 600; color: #F4F6FC; letter-spacing: -0.005em; } .wa-pop-status { font-family: var(--font); font-size: 12px; color: rgba(210,220,244,0.78); display: flex; align-items: center; gap: 6px; } .wa-pop-dot { width: 7px; height: 7px; border-radius: 999px; background: #2BD566; box-shadow: 0 0 0 0 rgba(43,213,102,0.6); animation: waDot 2s var(--ease) infinite; } @keyframes waDot { 0% { box-shadow: 0 0 0 0 rgba(43,213,102,0.55); } 70% { box-shadow: 0 0 0 6px rgba(43,213,102,0); } 100% { box-shadow: 0 0 0 0 rgba(43,213,102,0); } } .wa-pop-close { appearance: none; border: 0; background: transparent; cursor: pointer; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: rgba(214,224,248,0.6); transition: background .2s, color .2s; } .wa-pop-close:hover { background: rgba(255,255,255,0.08); color: #F4F6FC; } .wa-pop-body { padding: 16px 14px 6px; } .wa-bubble { position: relative; background: #F4F6FC; border-radius: 4px 14px 14px 14px; padding: 11px 13px 18px; max-width: 100%; } .wa-bubble::before { content: ""; position: absolute; top: 0; left: -7px; width: 0; height: 0; border-top: 8px solid #F4F6FC; border-left: 8px solid transparent; } .wa-bubble-t { font-family: var(--font); font-size: 13.5px; line-height: 1.5; color: #142036; margin: 0 0 7px; letter-spacing: -0.005em; text-wrap: pretty; } .wa-bubble-t:last-of-type { margin-bottom: 0; } .wa-bubble-t strong { font-weight: 700; } .wa-bubble-time { position: absolute; right: 11px; bottom: 6px; font-family: var(--font); font-size: 10.5px; color: #8A93A8; } .wa-pop-cta { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 12px 14px 14px; height: 44px; border-radius: 999px; text-decoration: none; background: #25D366; color: #06351B; font-family: var(--font); font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; box-shadow: 0 6px 16px -6px rgba(20,120,60,0.6); transition: background .2s var(--ease), transform .2s var(--ease); } .wa-pop-cta:hover { background: #2BE070; transform: translateY(-1px); } @media (prefers-reduced-motion: reduce) { .wa-fab::after, .wa-pop-dot, .wa-badge { animation: none; } .wa-pop { transition: opacity .2s ease; transform: none; } .wa-pop.is-in { transform: none; } } @media (max-width: 768px) { /* compact toast sits bottom-left, FAB bottom-right — they share the bottom row without overlapping */ .wa-widget { right: 16px; bottom: 16px; } .wa-pop { width: min(76vw, 300px); } } /* ===== Testimonials (shared component — used by landing + product pages) ===== */ /* ===== Testimonials band (light region) ===== */ .section--testimonials { overflow: hidden; } .section--testimonials .tt-head { text-align: center; max-width: 760px; margin: 0 auto 56px; display: flex; flex-direction: column; align-items: center; } .section--testimonials .tt-head .t-h2 { margin-top: 18px; max-width: 20ch; } .section--testimonials .tt-head .t-lede { margin-top: 18px; max-width: 54ch; } /* colored press-logo strip */ .section--testimonials .tt-logos { display: flex; align-items: center; justify-content: center; gap: 28px 60px; flex-wrap: wrap; padding: 8px 0; margin: 0 auto 44px; } .section--testimonials .tt-logo { flex: 0 0 auto; display: flex; align-items: center; opacity: 0.92; filter: brightness(0.36) saturate(1.1); } .section--testimonials .tt-logo img { width: auto; object-fit: contain; display: block; } /* full-bleed scroller */ .section--testimonials .tt-scroller { width: 100vw; margin-left: calc(50% - 50vw); display: flex; flex-direction: column; gap: 16px; user-select: none; overflow: hidden; padding: 64px 0; cursor: grab; -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.2) 3%, #000 10%, #000 90%, rgba(0,0,0,.2) 97%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.2) 3%, #000 10%, #000 90%, rgba(0,0,0,.2) 97%, transparent 100%); } .section--testimonials .ttrow { position: relative; width: 100%; overflow: visible; padding: 0; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .section--testimonials .ttrow.grabbing { cursor: grabbing; } .section--testimonials .tttrack { display: flex; gap: 24px; width: max-content; will-change: transform; backface-visibility: hidden; } .section--testimonials .ttrow.videos .tttrack { gap: 24px; } /* quote cards */ .section--testimonials .ttcard { flex: 0 0 auto; width: 380px; min-height: 224px; background: #fff; border: 1px solid rgba(10,23,54,0.08); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; box-shadow: 0 2px 4px -2px rgba(10,23,54,0.08), 0 8px 16px -10px rgba(10,23,54,0.12), 0 20px 36px -26px rgba(13,29,63,0.22); transition: transform .4s var(--ease), box-shadow .4s var(--ease); } /* hover lift removed: quote cards stay static for smoother scrolling */ .section--testimonials .ttquote { font-size: 16px; line-height: 1.55; color: #4E5670; margin: 0; } .section--testimonials .ttquote .hl { color: inherit; font-weight: 700; } .section--testimonials .ttauthor { display: flex; align-items: center; gap: 14px; } .section--testimonials .ttavatar { width: 35px; height: 35px; border-radius: 999px; flex: 0 0 35px; background: #2a2a2a; background-size: cover; background-position: center; } .section--testimonials .ttauthor-info { display: flex; flex-direction: column; gap: 2px; } .section--testimonials .ttname-row { display: flex; align-items: center; gap: 8px; } .section--testimonials .ttname { font-size: 16px; font-weight: 500; color: #0A1736; } .section--testimonials .ttcard-stars { color: #FBBF24; font-size: 13px; letter-spacing: 1px; line-height: 1; } .section--testimonials .ttrole { font-size: 13px; color: #6E748A; } /* Trustpilot rating squares (TOP quote row) — green square + white star, per design system */ .section--testimonials .ttcard-tp { display: inline-flex; gap: 3px; } .section--testimonials .ttcard-tp-sq { width: 16px; height: 16px; background: var(--tp-fill, var(--trustpilot, #00B67A)); display: grid; place-items: center; color: #fff; font-size: 11px; line-height: 1; } /* video cards (9:16) */ .section--testimonials .ttvcard { flex: 0 0 auto; width: 380px; height: 224px; position: relative; background: #0e1830; border: 1px solid rgba(10,23,54,0.08); border-radius: 20px; padding: 0; overflow: hidden; box-shadow: 0 2px 4px -2px rgba(10,23,54,0.08), 0 8px 16px -10px rgba(10,23,54,0.12), 0 20px 36px -26px rgba(13,29,63,0.22); transition: transform .4s var(--ease), box-shadow .4s var(--ease); } /* hover lift removed: video cards stay static for smoother scrolling */ .section--testimonials .ttvcard-head { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 34px 14px 13px; background: linear-gradient(to top, rgba(6,11,24,0.92) 8%, rgba(6,11,24,0.55) 55%, transparent); } .section--testimonials .ttvcard-avatar { width: 34px; height: 34px; border-radius: 999px; flex: 0 0 34px; background-size: cover; background-position: center; } .section--testimonials .ttvcard-name { font-size: 15px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .section--testimonials .ttvcard-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .section--testimonials .ttvcard-nrow { display: flex; align-items: center; gap: 8px; min-width: 0; } .section--testimonials .ttvcard-role { font-size: 13px; color: rgba(255,255,255,0.78); } /* gold rating overlaid at the TOP of the video card */ .section--testimonials .ttvcard-rating { position: absolute; top: 12px; left: 14px; z-index: 2; color: #FBBF24; font-size: 15px; letter-spacing: 1px; line-height: 1; text-shadow: 0 1px 4px rgba(0,0,0,0.55); } .section--testimonials .ttvcard-media { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; overflow: hidden; background: #0e1830; cursor: grab; } .section--testimonials .ttrow.grabbing .ttvcard-media { cursor: grabbing; } .section--testimonials .ttvcard-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; display: block; pointer-events: none; } .section--testimonials .ttvcard-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 48px; height: 48px; border-radius: 999px; background: rgba(255,255,255,0.92); color: #0A1736; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,0.35); pointer-events: none; } .section--testimonials .ttvcard-play svg { margin-left: 2px; } .section--testimonials .ttvcard-expand { position: absolute; bottom: 9px; right: 9px; width: 26px; height: 26px; border-radius: 8px; background: rgba(10,20,40,0.5); color: rgba(255,255,255,0.9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; pointer-events: none; } /* trust row */ .section--testimonials .tt-trust { margin-top: 34px; display: flex; justify-content: center; align-items: center; gap: 12px; } .section--testimonials .tt-avatars { display: inline-flex; } .section--testimonials .tt-av { width: 26px; height: 26px; border-radius: 999px; background-size: cover; background-position: center; box-shadow: 0 0 0 2px var(--light-bone); margin-left: -7px; } .section--testimonials .tt-av:first-child { margin-left: 0; } .section--testimonials .tt-rating { display: inline-flex; align-items: center; gap: 6px; } .section--testimonials .tt-stars { color: #FBBF24; font-size: 16px; letter-spacing: 1px; } .section--testimonials .tt-score { font-weight: 600; font-size: 14px; color: #0A1736; } @media (max-width: 640px){ .section--testimonials .ttcard { width: 320px; min-height: 218px; } .section--testimonials .ttvcard { width: 320px; height: 218px; } } /* ---- DARK variant (testimonials on the night surface, e.g. squeeze pages) ---- Same scrolling marquee, but cards become elevated dark panels with light ink. Toggle by rendering . Accent (star colour, etc.) follows the active brand via tokens. */ .section--testimonials--dark { background: transparent; } .section--testimonials--dark .ttcard, .section--testimonials--dark .ttvcard { background: linear-gradient(168deg, #16213C 0%, #121B33 60%, #0F1830 100%); border: 1px solid rgba(255,255,255,0.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02), 0 24px 50px -28px rgba(2,4,12,0.6); } /* hover lift removed on dark cards too: static for smoother scrolling */ .section--testimonials--dark .ttquote { color: var(--soft-grey, #C3CCDD); } .section--testimonials--dark .ttquote .hl { color: var(--bone, #EAF0FA); font-weight: 700; } .section--testimonials--dark .ttname { color: var(--bone, #EAF0FA); } .section--testimonials--dark .ttrole { color: var(--muted, #8A93A8); } .section--testimonials--dark .ttvcard-name { color: var(--bone, #EAF0FA); } .section--testimonials--dark .ttavatar, .section--testimonials--dark .ttvcard-avatar { box-shadow: 0 0 0 2px rgba(255,255,255,0.08); } .section--testimonials--dark .tt-score { color: var(--bone, #EAF0FA); } .section--testimonials--dark .tt-av { box-shadow: 0 0 0 2px var(--card, #131D3F); } /* ---- TOP row: real Trustpilot review cards (fixed height, clamp + click-to-expand) ---- */ /* Trustpilot-card layout: stars (top) · title · body (clamps with …) · name + date (bottom). */ .section--testimonials .ttreview { height: 224px; min-height: 0; overflow: hidden; gap: 9px; justify-content: flex-start; cursor: default; } .section--testimonials .ttreview .ttcard-tp { margin-bottom: 2px; } .section--testimonials .ttreview-title { font-size: 16px; font-weight: 700; color: #0A1736; line-height: 1.35; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .section--testimonials .ttreview-body { font-size: 16px; line-height: 1.5; color: #4E5670; margin: 0; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .section--testimonials .ttreview-body.has-title { -webkit-line-clamp: 3; } .section--testimonials .ttreview-foot { margin-top: auto; padding-top: 2px; font-size: 14px; line-height: 1.3; } .section--testimonials .ttreview-author { font-weight: 600; color: #0A1736; } .section--testimonials .ttreview-date { color: #6E748A; } .section--testimonials .ttreview.is-clamped { cursor: pointer; } .section--testimonials .ttcard-tp-sq.is-off { background: #DCDCE1; } /* full-review popup — opens EXACTLY like the video lightbox: dark full-screen backdrop, centred content, round close button top-right. */ /* selector carries `.section--testimonials` so it beats the band's `.section--testimonials > *:not(.bg-light){position:relative;z-index:1}` rule — otherwise the overlay would be relative (in-flow) instead of a fixed full-screen backdrop. */ .section--testimonials .ttreview-modal-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(4,6,12,0.94); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 16px; animation: ttrevFade .2s ease both; } @keyframes ttrevFade { from { opacity: 0; } to { opacity: 1; } } .ttreview-modal { position: relative; width: min(560px, 100%); max-height: 82vh; overflow-y: auto; background: #fff; border-radius: 22px; padding: 32px 32px 34px; box-shadow: 0 40px 90px -30px rgba(2,4,12,0.6); animation: ttrevPop .28s cubic-bezier(0.22,1,0.36,1) both; } @keyframes ttrevPop { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } .ttreview-modal .ttcard-tp { margin-bottom: 16px; } .ttreview-modal-foot { margin-top: 20px; font-size: 14px; line-height: 1.3; } .ttreview-modal-name { font-weight: 600; color: #0A1736; } .ttreview-modal-date { color: #6E748A; } .ttreview-modal-title { font-size: 18px; font-weight: 700; color: #0A1736; line-height: 1.35; margin: 0 0 10px; max-width: 44ch; } .ttreview-modal-body { font-size: 16px; line-height: 1.62; color: #3A4257; margin: 0; white-space: pre-line; } .ttreview-modal .ttcard-tp-sq.is-off { background: #DCDCE1; } .ttreview-modal-x { position: absolute; top: 16px; right: 16px; z-index: 2; width: 50px; height: 50px; border-radius: 999px; border: 0; cursor: pointer; background: rgba(255,255,255,0.16); color: #fff; display: flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .2s var(--ease); } .ttreview-modal-x:hover { background: rgba(255,255,255,0.26); } /* dark band (squeeze): review card text reads light; the popup itself stays light */ .section--testimonials--dark .ttreview-title { color: var(--bone, #EAF0FA); } .section--testimonials--dark .ttreview-body { color: var(--soft-grey, #C3CCDD); } .section--testimonials--dark .ttreview-author { color: var(--bone, #EAF0FA); } .section--testimonials--dark .ttreview-date { color: var(--muted, #8A93A8); } .section--testimonials--dark .ttcard-tp-sq.is-off { background: rgba(255,255,255,0.20); } @media (max-width: 640px){ .section--testimonials .ttreview { height: 218px; } } /* ===== FAQ accordion (shared component — open rows, hairline dividers, chevron) ==== No boxes: each Q is a full-width row split by a thin rule; a chevron on the right rotates 180° when its answer expands. Brand-agnostic (accent via tokens). Used by every page — render from FAQ.jsx. */ .faq-sec { padding: var(--apx-section-y, 96px) 0; position: relative; z-index: 2; } .faq-head { width: min(760px, calc(100% - 48px)); margin: 0 auto 22px; } .faq-head .kicker { display: inline-block; margin: 0 0 14px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--accent, var(--apex-blue)); } .faq-title { margin: 0; color: var(--bone); font-family: var(--font); font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; } .faq-title .hl { color: var(--accent-hi, var(--apex-blue-hi)); } .faq-list { width: min(760px, calc(100% - 48px)); margin: 0 auto; } .faq-item { border-top: 1px solid var(--hair); } .faq-item:last-child { border-bottom: 1px solid var(--hair); } .faq-q { width: 100%; text-align: left; appearance: none; -webkit-appearance: none; border: 0; background: transparent; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; padding: 27px 2px; font-family: var(--font); font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.35; color: var(--bone); transition: color .16s var(--ease); } .faq-q:hover { color: var(--accent-hi, var(--apex-blue-hi)); } .faq-q-text { flex: 1 1 auto; } .faq-chevron { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 3px; color: var(--muted); transition: transform .32s var(--ease), color .2s var(--ease); } .faq-item.open .faq-q { color: var(--bone); } .faq-item.open .faq-chevron { transform: rotate(180deg); color: var(--accent, var(--apex-blue)); } .faq-a { max-height: 0; overflow: hidden; transition: max-height .34s var(--ease); } .faq-a-inner { padding: 0 56px 28px 2px; color: var(--soft-grey); font-size: 16px; line-height: 1.62; text-wrap: pretty; } .faq-a-inner a { color: var(--accent-hi, var(--apex-blue-hi)); text-decoration: none; border-bottom: 1px solid currentColor; } @media (max-width: 600px){ .faq-q { font-size: 17px; gap: 20px; padding: 22px 2px; } .faq-a-inner { padding-right: 24px; font-size: 15px; } } /* ===== Institutional — locked nav/footer items + access modal ===== */ /* Gated nav item ("Istituzionali") — a normal menu link with a small lock */ .lnk--gated { display: inline-flex; align-items: center; gap: 7px; appearance: none; background: transparent; border: 0; cursor: pointer; font: inherit; color: var(--soft-grey); transition: color .2s var(--ease); } .lnk--gated .gated-lock { display: inline-flex; flex: 0 0 auto; opacity: .8; } .lnk--gated:hover { color: var(--bone); } .drawer-gated { display: flex; align-items: center; gap: 10px; width: 100%; appearance: none; background: transparent; border: 0; cursor: pointer; font: inherit; text-align: left; color: inherit; padding: 0; } .drawer-gated .gated-lock { display: inline-flex; width: 18px; height: 18px; flex: 0 0 auto; opacity: .85; } .fd-link-locked { display: inline-flex; align-items: center; gap: 6px; } .fd-lock { opacity: .7; flex: 0 0 auto; } /* ---- Language picker in the top nav (globe, opens DOWNWARD) ---- Icon-only round trigger; quiet monochrome glyph that lifts to bone on hover. The menu mirrors the footer picker's look. Hidden ≤768px — the footer picker + burger carry the language switch on mobile. */ .nav-lang { position: relative; display: inline-flex; } .nav-lang-btn { width: 40px; height: 40px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); background: transparent; border: 1px solid var(--hair); color: var(--soft-grey); cursor: pointer; outline: none; transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); } .nav-lang-btn:hover { color: var(--bone); border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.04); } .nav-lang-btn.is-open { color: var(--bone); border-color: var(--accent-ring); background: rgba(255,255,255,0.04); } .nav-lang-btn svg { width: 18px; height: 18px; display: block; } .nav-lang-menu { position: absolute; top: calc(100% + 12px); right: 0; min-width: 208px; background: rgba(14,18,28,0.96); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; padding: 8px; box-shadow: 0 24px 64px rgba(0,0,0,0.6); z-index: 80; } .nav-lang-opt { padding: 12px 16px; font-family: var(--font); font-size: 15px; color: var(--soft-grey); font-weight: 400; border-radius: 10px; cursor: pointer; outline: none; transition: background .15s var(--ease), color .15s var(--ease); } .nav-lang-opt:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,0.04); } .nav-lang-opt:hover, .nav-lang-opt:focus-visible { background: rgba(255,255,255,0.03); color: var(--bone); } .nav-lang-opt.is-selected { color: var(--bone); font-weight: 500; background: rgba(255,255,255,0.06); } @media (max-width: 768px){ .nav-lang { display: none; } } .inst-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(6,11,24,0.66); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .26s var(--ease); } .inst-overlay.open { opacity: 1; pointer-events: auto; } .inst-modal { position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - 48px); overflow-y: auto; background: linear-gradient(168deg, #16213C 0%, #121B33 60%, #0F1830 100%); border: 1px solid rgba(255,255,255,0.10); border-radius: 24px; padding: 34px 32px 30px; box-shadow: 0 40px 100px -50px rgba(0,0,0,0.8); text-align: left; transform: translateY(10px) scale(.985); transition: transform .26s var(--ease); } .inst-overlay.open .inst-modal { transform: none; } .inst-close { position: absolute; top: 16px; right: 16px; appearance: none; border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 4px; line-height: 0; transition: color .18s var(--ease); } .inst-close:hover { color: var(--bone); } .inst-lock { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; margin-bottom: 18px; color: var(--accent-hi, var(--apex-blue-hi)); background: var(--accent-halo, rgba(30,91,255,0.14)); box-shadow: inset 0 0 0 1px rgba(30,91,255,0.28); } .inst-eyebrow { display: block; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--accent, var(--apex-blue)); margin-bottom: 10px; } .inst-title { margin: 0 0 12px; font-family: var(--font); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--bone); } .inst-body { margin: 0 0 22px; font-family: var(--font); font-size: 15px; line-height: 1.55; color: var(--soft-grey); text-wrap: pretty; } .inst-form { display: grid; gap: 16px; margin-top: 4px; } .inst-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .inst-field { display: grid; gap: 7px; } .inst-label { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .inst-label .req { color: var(--accent, var(--apex-blue)); margin-left: 2px; } .inst-form input, .inst-form textarea { width: 100%; background: #1B2440; border: 1px solid var(--card-line); border-radius: 12px; color: var(--bone); padding: 13px 14px; font-family: var(--font); font-size: 15px; outline: none; transition: border-color .15s ease, background .15s ease; } .inst-form input::placeholder, .inst-form textarea::placeholder { color: var(--muted); } .inst-form input:focus, .inst-form textarea:focus { border-color: var(--accent, var(--apex-blue)); background: #131D3F; } .inst-form textarea { min-height: 92px; resize: vertical; line-height: 1.5; } .inst-submit { width: 100%; justify-content: center; margin-top: 6px; } .inst-privacy { display: flex; align-items: flex-start; gap: 9px; margin: 16px 0 0; color: var(--muted); } .inst-privacy svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 2px; } .inst-privacy p { margin: 0; font-size: 12px; line-height: 1.45; } /* Consent checkbox — shared by every lead form (contact, institutional, Aurex, jobs). Global so it renders identically on every page (mirrors .terms / .apply-terms). */ .aq-consent { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 13px; line-height: 1.5; color: var(--soft-grey); cursor: pointer; margin-top: 4px; } .aq-consent input { position: absolute; opacity: 0; width: 0; height: 0; } .aq-consent .checkbox { width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--card-line); background: #1B2440; display: grid; place-items: center; margin-top: 1px; transition: background .15s ease, border-color .15s ease; } .aq-consent .checkbox svg { opacity: 0; transition: opacity .15s ease; } .aq-consent input:checked + .checkbox { background: var(--accent, var(--apex-blue)); border-color: transparent; } .aq-consent input:checked + .checkbox svg { opacity: 1; } .aq-consent input:focus-visible + .checkbox { outline: 2px solid var(--accent, var(--apex-blue)); outline-offset: 2px; } .aq-consent a { color: var(--accent-hi, var(--apex-blue-hi)); text-decoration: none; border-bottom: 1px solid currentColor; } @media (max-width: 460px){ .inst-row { grid-template-columns: 1fr; } } /* Thank-you state — confirm eyebrow, numbered steps, reference, close */ .inst-confirm-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; } .inst-confirm-eyebrow .tick { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(35,229,196,0.14); color: var(--plasma, #23E5C4); } .inst-confirm-label { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--plasma, #23E5C4); } .inst-steps { list-style: none; margin: 24px 0 0; padding: 0; } .inst-steps li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--hair); } .inst-steps li:first-child { border-top: 0; } .inst-steps .s-num { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--accent, var(--apex-blue)); padding-top: 1px; } .inst-steps .s-text { font-family: var(--font); font-size: 14.5px; line-height: 1.45; color: var(--soft-grey); } .inst-steps .s-text b { color: var(--bone); font-weight: 500; } .inst-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hair); } .inst-meta .m-item { display: inline-flex; align-items: center; gap: 7px; } .inst-meta .m-label { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .inst-meta .m-val { font-family: var(--mono); font-size: 12.5px; color: var(--bone); letter-spacing: .04em; } .inst-thanks-foot { margin-top: 26px; } .inst-thanks-foot .aq-btn { width: 100%; justify-content: center; } /* MOBILE — modal becomes a bottom sheet: grab handle, bigger touch targets, 16px inputs (no iOS focus-zoom) */ @media (max-width: 640px){ .inst-overlay { padding: 0; align-items: flex-end; } .inst-modal { max-width: none; width: 100%; max-height: 92vh; border-radius: 24px 24px 0 0; padding: 12px 20px calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 -24px 80px -20px rgba(0,0,0,0.8); -webkit-overflow-scrolling: touch; } .inst-overlay.open .inst-modal { transform: none; } .inst-modal::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.20); margin: 2px auto 18px; } .inst-close { top: 10px; right: 10px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; } .inst-lock { width: 46px; height: 46px; margin-bottom: 18px; } .inst-title { font-size: 24px; } .inst-form { margin-top: 6px; } .inst-form input, .inst-form textarea { font-size: 16px; padding: 14px 15px; } .inst-form textarea { min-height: 84px; } .inst-form .aq-btn { padding: 16px 24px; } .inst-steps li { padding: 13px 0; } }