/* ========================================================================= Auralink — "Calm Infrastructure" design system Dark-first. Tokens per master build brief §3. No hard-coded colors in markup. ========================================================================= */ /* ----- Design tokens ----- */ :root { /* Base — elevated slate; clearly lifted off black for a premium, luminous dark */ --bg: #1A2838; /* elevated slate with a hint of blue, lifted off black */ --bg-2: #2D4259; /* lighter wash tone used in the ambient backdrop */ --surface: #25344A; --surface-raised: #30425A; --hairline: #3C4B5B; --hairline-soft: #30404F; /* Text */ --text: #F6F9FB; --text-secondary: #B7C3D0; --text-muted: #8190A0; /* Accent — "Aurora" */ --accent: #19E3C0; --accent-hover: #0FB89E; --accent-2: #6BF0A8; --accent-link: #3DA2FF; --aurora: linear-gradient(120deg, #19E3C0 0%, #6BF0A8 60%, #3DA2FF 120%); /* Status */ --success: #3FCF8E; --warning: #F5A623; --danger: #F0556B; /* Effects */ --glow-accent: 0 0 0 1px rgba(25,227,192,.25), 0 8px 30px rgba(25,227,192,.18); --shadow-card: 0 1px 0 rgba(255,255,255,.03) inset, 0 12px 40px rgba(0,0,0,.45); /* Glass (frosted surfaces over the aurora backdrop) */ --glass: color-mix(in srgb, var(--surface) 68%, transparent); --glass-raised: color-mix(in srgb, var(--surface-raised) 70%, transparent); --glass-border: color-mix(in srgb, #ffffff 9%, var(--hairline)); --glass-blur: blur(16px) saturate(125%); --shadow-glass: 0 1px 0 rgba(255,255,255,.07) inset, 0 18px 50px rgba(0,0,0,.4); /* Fonts */ --font-display: "Clash Display", "Switzer", "Hanken Grotesk", system-ui, sans-serif; --font-body: "Switzer", "Hanken Grotesk", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Spacing scale (px) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* Radius */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px; /* Motion */ --ease: cubic-bezier(.22, 1, .36, 1); --t-fast: 150ms; --t-mid: 250ms; --t-slow: 400ms; /* Layout */ --maxw: 1200px; --nav-h: 72px; } /* ----- Light variant (legal pages opt-in via .theme-light on ) ----- */ html.theme-light { --bg: #F7F9FA; --surface: #FFFFFF; --surface-raised: #FFFFFF; --hairline: #E2E8ED; --text: #0A0E12; --text-secondary: #44525E; --text-muted: #6B7884; --shadow-card: 0 1px 0 rgba(0,0,0,.02) inset, 0 12px 40px rgba(10,14,18,.08); } html.theme-light body { background-image: linear-gradient(180deg, #EEF4F8 0%, #F7F9FA 42%, #EFF3F7 100%); } /* ----- Reset ----- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); background-color: var(--bg); /* full-document vertical wash: colour shifts as you scroll a long page */ background-image: linear-gradient(180deg, #123640 0%, #143e5a 17%, #1b2d62 35%, #2a2058 52%, #1d2f5c 70%, #133b48 87%, #0f2230 100%); background-attachment: scroll; background-repeat: no-repeat; color: var(--text); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: var(--accent-link); text-decoration: none; } a:hover { text-decoration: underline; } ul, ol { padding-left: 1.25em; } button { font: inherit; cursor: pointer; } /* ----- Typography scale ----- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; } .display-xl { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.75rem, 7vw, 4.5rem); line-height: 1.05; letter-spacing: -0.02em; } .display-l { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.25rem, 5.5vw, 3.5rem); line-height: 1.08; letter-spacing: -0.02em; } h1, .h1 { font-size: clamp(2rem, 4.5vw, 2.75rem); line-height: 1.12; } h2, .h2 { font-size: clamp(1.6rem, 3.5vw, 2rem); line-height: 1.18; } h3, .h3 { font-size: 1.5rem; line-height: 1.25; } h4, .h4 { font-size: 1.25rem; line-height: 1.3; } .body-l { font-size: 1.125rem; line-height: 1.6; } .small { font-size: 0.875rem; line-height: 1.55; } .eyebrow { font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); display: inline-block; } .text-secondary { color: var(--text-secondary); } .text-muted { color: var(--text-muted); } .accent-text { background: linear-gradient(120deg, #19E3C0 0%, #6BF0A8 45%, #3DA2FF 90%, #19E3C0 130%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: sheen 9s linear infinite; } @keyframes sheen { to { background-position: 220% 50%; } } /* ----- Layout helpers ----- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s-5); } .section { padding-block: clamp(56px, 10vw, 128px); } .section--tight { padding-block: clamp(40px, 7vw, 80px); } .stack > * + * { margin-top: var(--s-4); } .measure { max-width: 60ch; } .measure-narrow { max-width: 46ch; } .center { text-align: center; } .mx-auto { margin-inline: auto; } .divider { height: 1px; background: var(--hairline); border: 0; } .grid { display: grid; gap: var(--s-5); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } /* ----- Background atmosphere: ambient wash + drifting aurora + node mesh + grain ----- */ .bg-atmosphere { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .bg-atmosphere > span { position: absolute; display: block; } /* base wash — lifts the page off flat black with soft luminosity at the top */ .bg-wash { inset: 0; background: radial-gradient(120% 78% at 50% -8%, rgba(96,128,166,.55) 0%, rgba(43,58,77,.18) 40%, transparent 66%), radial-gradient(72% 58% at 88% 6%, rgba(61,162,255,.20) 0%, transparent 56%), radial-gradient(64% 60% at 6% 24%, rgba(25,227,192,.16) 0%, transparent 56%), radial-gradient(80% 70% at 94% 68%, rgba(124,92,255,.16) 0%, transparent 60%), radial-gradient(72% 64% at 8% 90%, rgba(25,227,192,.12) 0%, transparent 60%); } /* parallax wrappers (JS translates these; inner blooms keep their drift animation) */ .bg-parallax { inset: 0; will-change: transform; } /* two slow-drifting colour blooms (the "aurora") */ .bg-bloom { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; transform: translate3d(0,0,0); } .bg-bloom-1 { top: -220px; left: 50%; width: 1000px; height: 720px; margin-left: -600px; background: radial-gradient(50% 50% at 50% 50%, rgba(25,227,192,.50), rgba(25,227,192,.12) 45%, transparent 72%); animation: drift-1 26s var(--ease) infinite; } .bg-bloom-2 { top: -120px; right: -180px; width: 820px; height: 640px; background: radial-gradient(50% 50% at 50% 50%, rgba(61,162,255,.42), rgba(61,162,255,.10) 45%, transparent 72%); animation: drift-2 32s var(--ease) infinite; } /* third bloom anchored lower-left so colour persists down the page */ .bg-bloom-3 { bottom: -240px; left: -200px; width: 860px; height: 660px; background: radial-gradient(50% 50% at 50% 50%, rgba(124,92,255,.34), rgba(124,92,255,.09) 46%, transparent 72%); animation: drift-1 34s var(--ease) infinite reverse; } /* node mesh — thin connected-dot field, slowly drifting, faded toward edges */ .bg-mesh { inset: 0; background-image: radial-gradient(rgba(154,167,180,.12) 1px, transparent 1.4px); background-size: 40px 40px; background-position: -12px -12px; mask-image: radial-gradient(125% 95% at 50% 0%, #000 28%, transparent 82%); -webkit-mask-image: radial-gradient(125% 95% at 50% 0%, #000 28%, transparent 82%); opacity: .55; animation: mesh-drift 60s linear infinite; } /* faint film grain for depth */ .bg-grain { inset: 0; opacity: .035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } @keyframes drift-1 { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(4%,3%,0) scale(1.08); } 100% { transform: translate3d(0,0,0) scale(1); } } @keyframes drift-2 { 0% { transform: translate3d(0,0,0) scale(1.03); } 50% { transform: translate3d(-5%,2%,0) scale(1); } 100% { transform: translate3d(0,0,0) scale(1.03); } } @keyframes mesh-drift { from { background-position: -12px -12px; } to { background-position: 28px 28px; } } html.theme-light .bg-bloom-1 { opacity: .5; } html.theme-light .bg-bloom-2 { opacity: .4; } html.theme-light .bg-bloom-3 { opacity: .32; } html.theme-light .bg-mesh { opacity: .35; } html.theme-light .bg-grain { display: none; } /* ----- Buttons ----- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: 14px 22px; border-radius: var(--r-pill); font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; border: 1px solid transparent; text-decoration: none; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-mid) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); white-space: nowrap; } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: #04130F; position: relative; overflow: hidden; } .btn-primary:hover { background: var(--accent-hover); box-shadow: var(--glow-accent); transform: translateY(-2px); } .btn-primary::after { content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); transform: skewX(-18deg); opacity: 0; pointer-events: none; } .btn-primary:hover::after { animation: shine .9s var(--ease); } @keyframes shine { 0% { left: -60%; opacity: 0; } 20% { opacity: .85; } 100% { left: 135%; opacity: 0; } } .btn-secondary { background: transparent; color: var(--text); border-color: var(--hairline); } .btn-secondary:hover { border-color: var(--accent); color: var(--text); transform: translateY(-2px); } .btn-tertiary { background: transparent; color: var(--accent); padding: 8px 4px; border-radius: var(--r-sm); } .btn-tertiary .arrow { transition: transform var(--t-fast) var(--ease); } .btn-tertiary:hover { text-decoration: none; } .btn-tertiary:hover .arrow { transform: translateX(4px); } .btn-lg { padding: 16px 28px; font-size: 1.0rem; } .btn-block { width: 100%; } /* ----- Focus visibility (a11y) ----- */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: 12px; top: -48px; z-index: 200; background: var(--accent); color: #04130F; padding: 10px 16px; border-radius: var(--r-sm); font-weight: 600; transition: top var(--t-fast) var(--ease); } .skip-link:focus { top: 12px; text-decoration: none; } /* ----- Navigation ----- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; background: transparent; border-bottom: 1px solid transparent; transition: background var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease), backdrop-filter var(--t-mid) var(--ease); } .nav.scrolled { background: color-mix(in srgb, var(--surface-raised) 88%, transparent); backdrop-filter: blur(12px); border-bottom-color: var(--hairline); } .nav .container { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); } .brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; } .brand:hover { text-decoration: none; } .brand-mark { width: 30px; height: 30px; flex: none; } .brand-text { display: flex; flex-direction: column; line-height: 1; } .brand-name { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--text); letter-spacing: -0.01em; } .brand-tag { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-top: 3px; } .nav-links { display: flex; align-items: center; gap: var(--s-6); list-style: none; padding: 0; margin: 0; } .nav-links a { position: relative; color: var(--text-secondary); font-size: 0.95rem; font-weight: 500; transition: color var(--t-fast) var(--ease); } .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); text-decoration: none; } .nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1.5px; border-radius: 2px; background: var(--aurora); transform: scaleX(0); transform-origin: left; transition: transform var(--t-mid) var(--ease); } .nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); } .nav-actions { display: flex; align-items: center; gap: var(--s-4); } .nav-toggle { display: none; background: transparent; border: 1px solid var(--hairline); border-radius: var(--r-sm); width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--text); } /* Mobile menu overlay */ .mobile-menu { position: fixed; inset: 0; z-index: 99; background: var(--bg); display: flex; flex-direction: column; padding: calc(var(--nav-h) + 24px) var(--s-5) var(--s-7); transform: translateY(-100%); opacity: 0; visibility: hidden; transition: transform var(--t-slow) var(--ease), opacity var(--t-mid) var(--ease), visibility var(--t-slow); } .mobile-menu.open { transform: translateY(0); opacity: 1; visibility: visible; } .mobile-menu a { color: var(--text); font-family: var(--font-display); font-size: 1.75rem; padding: var(--s-4) 0; border-bottom: 1px solid var(--hairline); } .mobile-menu a:hover { text-decoration: none; color: var(--accent); } .mobile-menu .btn { margin-top: var(--s-6); } /* ----- Hero ----- */ .hero { padding-top: calc(var(--nav-h) + clamp(48px, 9vw, 110px)); padding-bottom: clamp(56px, 9vw, 110px); position: relative; } .hero-inner { max-width: 820px; } .hero .display-xl, .hero .display-l { margin-top: var(--s-4); } .hero p.sub { margin-top: var(--s-5); } .hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-7); align-items: center; } .trust-strip { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); margin-top: var(--s-7); color: var(--text-muted); font-size: 0.85rem; } .trust-strip li { list-style: none; display: flex; align-items: center; gap: var(--s-2); } .trust-strip { padding: 0; } .trust-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; } /* ----- Section heading block ----- */ .section-head { max-width: 640px; margin-bottom: var(--s-7); } .section-head.center { margin-inline: auto; } .section-head h2 { margin-top: var(--s-3); } .section-head p { margin-top: var(--s-4); color: var(--text-secondary); } /* ----- Cards ----- */ .card { background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--r-lg); padding: var(--s-6); box-shadow: var(--shadow-glass); transition: transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease); } .card-hover:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 55%, var(--hairline)); } /* App card */ .app-card { display: flex; flex-direction: column; gap: var(--s-4); height: 100%; text-decoration: none; color: inherit; } .app-card:hover { text-decoration: none; } .app-card.is-live:hover { box-shadow: var(--glow-accent); } .app-card .tile { width: 56px; height: 56px; border-radius: var(--r-md); flex: none; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--surface-raised), var(--surface)); border: 1px solid var(--hairline); color: var(--accent); } .app-card.is-live .tile { background: linear-gradient(120deg, #19E3C0 0%, #6BF0A8 50%, #3DA2FF 100%); background-size: 180% 180%; color: #04130F; border-color: transparent; animation: aurora-pan 14s var(--ease) infinite; } @keyframes aurora-pan { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .app-card .app-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); } .app-card h3 { font-size: 1.3rem; } .app-card p { color: var(--text-secondary); flex: 1; } .app-card .app-foot { margin-top: var(--s-2); } /* Status chip */ .chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--hairline); color: var(--text-muted); white-space: nowrap; } .chip.live { color: #04130F; background: var(--accent); border-color: transparent; } .chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* Feature / value cards */ .feature { display: flex; flex-direction: column; gap: var(--s-3); } .feature .ico { width: 44px; height: 44px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; background: var(--surface-raised); border: 1px solid var(--hairline); color: var(--accent); } .feature h3 { font-size: 1.2rem; } .feature p { color: var(--text-secondary); } /* Numbered steps */ .steps { counter-reset: step; display: grid; gap: var(--s-5); } .step { display: flex; gap: var(--s-4); align-items: flex-start; } .step .num { counter-increment: step; flex: none; width: 40px; height: 40px; border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 600; color: var(--accent); border: 1px solid var(--hairline); background: var(--surface); } .step .num::before { content: counter(step); } .step h3 { font-size: 1.15rem; } .step p { color: var(--text-secondary); margin-top: 4px; } /* Promise / CTA band */ .band { background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--r-xl); padding: clamp(32px, 6vw, 72px); position: relative; overflow: hidden; box-shadow: var(--shadow-glass); } .band::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 120% at 90% 0%, rgba(25,227,192,.12), transparent 60%); } .band > * { position: relative; } /* Store badges (disabled "coming soon" state pre-launch) */ .store-badges { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-5); } .store-badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: var(--r-md); border: 1px solid var(--glass-border); background: var(--glass-raised); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); color: var(--text-secondary); min-width: 180px; position: relative; cursor: not-allowed; opacity: .9; } .store-badge .sb-ico { width: 26px; height: 26px; flex: none; color: var(--text); } .store-badge .sb-text { display: flex; flex-direction: column; line-height: 1.1; text-align: left; } .store-badge .sb-top { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); } .store-badge .sb-main { font-size: 1.0rem; font-weight: 600; color: var(--text); font-family: var(--font-display); } .store-badge .sb-soon { position: absolute; top: -9px; right: 10px; font-family: var(--font-mono); font-size: 0.58rem; text-transform: uppercase; letter-spacing: .08em; background: var(--warning); color: #2A1B00; padding: 2px 7px; border-radius: var(--r-pill); } /* Microcopy / notes */ .microcopy { color: var(--text-muted); font-size: 0.85rem; margin-top: var(--s-4); } .note { border-left: 2px solid var(--hairline); padding: var(--s-3) 0 var(--s-3) var(--s-4); color: var(--text-secondary); font-size: 0.9rem; } /* ----- FAQ accordion ----- */ .faq { border-top: 1px solid var(--hairline); } .faq-item { border-bottom: 1px solid var(--hairline); } .faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); background: transparent; border: 0; color: var(--text); text-align: left; padding: var(--s-5) 0; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; } .faq-q .pm { flex: none; color: var(--accent); transition: transform var(--t-mid) var(--ease); width: 22px; height: 22px; } .faq-q[aria-expanded="true"] .pm { transform: rotate(45deg); } .faq-a { overflow: hidden; max-height: 0; transition: max-height var(--t-slow) var(--ease); } .faq-a-inner { padding-bottom: var(--s-5); color: var(--text-secondary); max-width: 70ch; } /* ----- Footer ----- */ .footer { border-top: 1px solid var(--hairline); background: var(--surface); margin-top: var(--s-9); } .footer .container { padding-block: var(--s-8); } .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--s-6); } .footer h4 { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); font-weight: 500; margin-bottom: var(--s-4); } .footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); } .footer ul a { color: var(--text-secondary); font-size: 0.92rem; } .footer ul a:hover { color: var(--text); text-decoration: none; } .footer .soon-tag { color: var(--text-muted); font-size: 0.7rem; margin-left: 4px; } .footer-brand .brand { margin-bottom: var(--s-4); } .footer-brand p { color: var(--text-muted); font-size: 0.88rem; max-width: 32ch; } .entity-block { margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--hairline); color: var(--text-muted); font-size: 0.82rem; line-height: 1.7; } .entity-block .powered { color: var(--text-secondary); } /* ----- Cookie banner ----- */ .cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 150; max-width: 720px; margin-inline: auto; background: var(--glass-raised); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--r-lg); box-shadow: var(--shadow-glass); padding: var(--s-5); display: none; flex-direction: column; gap: var(--s-4); } .cookie-banner.show { display: flex; } .cookie-banner p { color: var(--text-secondary); font-size: 0.9rem; } .cookie-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); } .cookie-actions .btn { padding: 10px 18px; font-size: 0.88rem; } /* ----- Legal / prose pages ----- */ .prose { max-width: 760px; } .prose .updated { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); margin-bottom: var(--s-6); } .prose h2 { font-size: 1.35rem; margin-top: var(--s-7); } .prose h3 { font-size: 1.1rem; margin-top: var(--s-6); } .prose p, .prose li { color: var(--text-secondary); } .prose p { margin-top: var(--s-4); } .prose ul, .prose ol { margin-top: var(--s-4); display: grid; gap: var(--s-2); } .prose strong { color: var(--text); } .prose .placeholder { font-family: var(--font-mono); font-size: 0.85em; background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); padding: 1px 6px; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); } .legal-table { width: 100%; border-collapse: collapse; margin-top: var(--s-5); font-size: 0.9rem; } .legal-table th, .legal-table td { text-align: left; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--hairline); } .legal-table th { color: var(--text); font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: .06em; } .legal-table td { color: var(--text-secondary); } .toc { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--s-5); margin-bottom: var(--s-7); } .toc h4 { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); margin-bottom: var(--s-3); } .toc ol { display: grid; gap: var(--s-2); } .toc a { color: var(--text-secondary); } /* ----- Contact form ----- */ .form-grid { display: grid; gap: var(--s-4); max-width: 560px; } .field { display: flex; flex-direction: column; gap: var(--s-2); } .field label { font-size: 0.85rem; color: var(--text-secondary); font-weight: 500; } .field input, .field select, .field textarea { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 12px 14px; color: var(--text); font: inherit; font-size: 0.95rem; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(25,227,192,.15); } .field textarea { resize: vertical; min-height: 120px; } .form-note { color: var(--text-muted); font-size: 0.85rem; } .form-status { font-size: 0.9rem; color: var(--success); display: none; } .form-status.show { display: block; } /* ----- Pills / misc ----- */ .pill-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); } .info-pill { display: inline-flex; align-items: center; gap: var(--s-2); padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--hairline); background: var(--surface); color: var(--text-secondary); font-size: 0.85rem; } /* ----- Reveal animation (orchestrated hero + on-scroll) ----- */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); } .reveal.in { opacity: 1; transform: none; } [data-stagger] > * { opacity: 0; transform: translateY(16px); } [data-stagger].in > * { opacity: 1; transform: none; transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); } [data-stagger].in > *:nth-child(1){ transition-delay: 0ms; } [data-stagger].in > *:nth-child(2){ transition-delay: 60ms; } [data-stagger].in > *:nth-child(3){ transition-delay: 120ms; } [data-stagger].in > *:nth-child(4){ transition-delay: 180ms; } [data-stagger].in > *:nth-child(5){ transition-delay: 240ms; } [data-stagger].in > *:nth-child(6){ transition-delay: 300ms; } /* ----- Hero two-column + product visual ----- */ .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 6vw, 72px); align-items: center; } .hero-grid .hero-inner { max-width: 640px; } .hero-visual { position: relative; display: flex; justify-content: center; } /* Faux "VPN connected" app card used as the hero visual */ .conn-card { width: 100%; max-width: 380px; background: var(--glass-raised); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--r-xl); box-shadow: var(--shadow-glass), var(--glow-accent); padding: var(--s-6); position: relative; overflow: hidden; animation: float 7s var(--ease) infinite; } .conn-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% -10%, rgba(25,227,192,.16), transparent 60%); pointer-events: none; } .conn-card > * { position: relative; } .conn-head { display: flex; align-items: center; justify-content: space-between; } .conn-app { display: flex; align-items: center; gap: var(--s-3); font-family: var(--font-display); font-weight: 600; } .conn-app .tile-sm { width: 34px; height: 34px; border-radius: 9px; background: var(--aurora); display: flex; align-items: center; justify-content: center; color: #04130F; } .conn-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); } .conn-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(25,227,192,.18); animation: pulse 2.4s var(--ease) infinite; } .conn-shield { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--s-6) 0 var(--s-5); } .conn-shield .ring { width: 92px; height: 92px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, rgba(25,227,192,.22), transparent 70%); border: 1px solid var(--hairline); color: var(--accent); } .conn-shield .ring svg { width: 40px; height: 40px; } .conn-shield .big { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; margin-top: var(--s-4); } .conn-shield .sub { color: var(--text-muted); font-size: .82rem; margin-top: 4px; } .conn-meta { display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--hairline); } .conn-row { display: flex; align-items: center; justify-content: space-between; font-size: .85rem; } .conn-row .k { color: var(--text-muted); font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; } .conn-row .v { color: var(--text-secondary); } @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes pulse { 0%,100% { box-shadow: 0 0 0 4px rgba(25,227,192,.18); } 50% { box-shadow: 0 0 0 7px rgba(25,227,192,.06); } } /* ----- Stat / value strip ----- */ .stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); border-block: 1px solid var(--hairline); padding-block: var(--s-7); } .stat .n { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1; letter-spacing: -0.02em; } .stat .n .accent-text { display: inline; } .stat .l { display: block; color: var(--text-secondary); font-size: .9rem; margin-top: var(--s-2); max-width: 22ch; } /* ----- Alternating feature spotlight ----- */ .spotlight { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 72px); align-items: center; } .spotlight + .spotlight { margin-top: clamp(48px, 8vw, 96px); } .spotlight.reverse .spot-media { order: -1; } .spot-body h2 { margin-top: var(--s-3); } .spot-body p { color: var(--text-secondary); margin-top: var(--s-4); } .spot-body .btn-tertiary { margin-top: var(--s-5); } .spot-list { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: grid; gap: var(--s-3); } .spot-list li { display: flex; gap: var(--s-3); align-items: flex-start; color: var(--text-secondary); } .spot-list .ic { color: var(--accent); flex: none; margin-top: 2px; width: 20px; height: 20px; } .spot-list .ic svg { width: 20px; height: 20px; } .spot-list.dont .ic { color: var(--text-muted); } .spot-media { background: var(--glass-raised); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--r-xl); box-shadow: var(--shadow-glass); padding: clamp(28px, 4vw, 44px); min-height: 320px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .spot-media::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 30% 0%, rgba(25,227,192,.14), transparent 60%); pointer-events: none; } .spot-media svg, .spot-media .glyph { position: relative; } .spot-glyph { width: clamp(90px, 14vw, 140px); height: clamp(90px, 14vw, 140px); color: var(--accent); } .spot-glyph svg { width: 100%; height: 100%; } /* Mock device row used inside a spotlight media panel */ .device-row { display: flex; gap: var(--s-4); align-items: flex-end; position: relative; } .device { background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; color: var(--accent); box-shadow: var(--shadow-card); } .device.phone { width: 92px; height: 168px; border-radius: 18px; } .device.tablet { width: 150px; height: 120px; } .device .ico-lg { width: 34px; height: 34px; } /* No-logs "struck record" glyph */ .nolog { display: grid; gap: 10px; width: 100%; max-width: 280px; } .nolog .line { height: 12px; border-radius: 6px; background: var(--hairline); position: relative; overflow: hidden; } .nolog .line::after { content: ""; position: absolute; inset: 0; width: var(--w, 70%); background: linear-gradient(90deg, var(--surface-raised), var(--hairline)); } .nolog .strike { position: absolute; left: -4%; right: -4%; top: 50%; height: 2px; background: var(--accent); box-shadow: var(--glow-accent); transform: rotate(-8deg); } .nolog-wrap { position: relative; width: 100%; display: flex; justify-content: center; } /* ----- Checklist (privacy/security) ----- */ .checklist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-6); } .checklist li { display: flex; gap: var(--s-3); align-items: flex-start; } .checklist .ic { width: 24px; height: 24px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(25,227,192,.12); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); } .checklist .ic svg { width: 14px; height: 14px; } .checklist h3 { font-size: 1rem; } .checklist p { color: var(--text-secondary); font-size: .9rem; margin-top: 2px; } /* ----- Roadmap ----- */ .roadmap { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } .road-col h3 { font-family: var(--font-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); font-weight: 500; margin-bottom: var(--s-4); display: flex; align-items: center; gap: var(--s-2); } .road-col .marker { width: 8px; height: 8px; border-radius: 50%; } .road-col.live .marker { background: var(--accent); box-shadow: var(--glow-accent); } .road-col.soon .marker { background: var(--warning); } .road-col.future .marker { background: var(--text-muted); } .road-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); } .road-col li { background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--r-md); padding: var(--s-4); box-shadow: var(--shadow-glass); } .road-col li strong { display: block; } .road-col li span { color: var(--text-muted); font-size: .85rem; } /* ----- Hero phone render (original CSS product mockup) ----- */ .hero-phone { width: min(300px, 76vw); aspect-ratio: 300 / 612; border-radius: 44px; padding: 12px; position: relative; background: linear-gradient(160deg, #34465c, #141d28); border: 1px solid var(--glass-border); box-shadow: var(--shadow-glass), var(--glow-accent), 0 40px 80px rgba(0,0,0,.45); animation: float 7s var(--ease) infinite; } .hp-screen { height: 100%; border-radius: 33px; overflow: hidden; position: relative; background: radial-gradient(120% 70% at 50% -8%, rgba(25,227,192,.20), transparent 52%), linear-gradient(180deg, #16222F, #101924); border: 1px solid rgba(255,255,255,.05); display: flex; flex-direction: column; padding: 16px 15px 15px; } .hp-notch { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 86px; height: 20px; background: #0c131b; border-radius: 12px; z-index: 4; } .hp-status { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: .58rem; color: var(--text-muted); padding: 2px 4px 0; } .hp-head { display: flex; align-items: center; gap: 8px; margin-top: 20px; } .hp-head .t { width: 28px; height: 28px; border-radius: 8px; background: var(--aurora); display: flex; align-items: center; justify-content: center; color: #04130F; } .hp-head .t svg { width: 17px; height: 17px; } .hp-head .nm { font-family: var(--font-display); font-weight: 600; font-size: .92rem; } .hp-head .pill { margin-left: auto; font-family: var(--font-mono); font-size: .54rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); display: inline-flex; align-items: center; gap: 5px; } .hp-head .pill .d { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(25,227,192,.2); animation: pulse 2.4s var(--ease) infinite; } .hp-globe { flex: 1; display: flex; align-items: center; justify-content: center; } .hp-ring { width: 148px; height: 148px; border-radius: 50%; position: relative; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 42%, rgba(25,227,192,.26), transparent 64%); } .hp-ring::before, .hp-ring::after { content: ""; position: absolute; border-radius: 50%; } .hp-ring::before { inset: -12px; border: 1px solid rgba(25,227,192,.38); } .hp-ring::after { inset: -30px; border: 1px solid rgba(61,162,255,.22); animation: ringpulse 3.4s var(--ease) infinite; } .hp-core { width: 76px; height: 76px; border-radius: 50%; background: var(--aurora); background-size: 180% 180%; display: flex; align-items: center; justify-content: center; color: #04130F; box-shadow: var(--glow-accent); animation: aurora-pan 14s var(--ease) infinite; } .hp-core svg { width: 34px; height: 34px; } .hp-state { text-align: center; margin-top: 4px; } .hp-state .b { font-family: var(--font-display); font-weight: 600; font-size: 1rem; display: block; } .hp-state .s { color: var(--text-muted); font-size: .68rem; } .hp-server { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.07); font-size: .7rem; color: var(--text-secondary); } .hp-server .loc { display: flex; align-items: center; gap: 7px; } .hp-server .loc .fl { width: 18px; height: 13px; border-radius: 3px; background: var(--aurora); } .hp-toggle { margin-top: 11px; height: 46px; border-radius: 14px; background: var(--accent); color: #04130F; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: .9rem; box-shadow: var(--glow-accent); } .hp-toggle svg { width: 18px; height: 18px; flex: none; } @keyframes ringpulse { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } } /* ----- App-store style cards (preview + listing) ----- */ .app-card { padding: 0; overflow: hidden; gap: 0; } .app-preview { position: relative; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--surface-raised), var(--surface)); border-bottom: 1px solid var(--glass-border); overflow: hidden; } .app-card.is-live .app-preview { background: linear-gradient(160deg, rgba(25,227,192,.22), rgba(61,162,255,.12)); } .app-preview::before { content: ""; position: absolute; inset: 0; background: radial-gradient(72% 70% at 50% 16%, rgba(25,227,192,.18), transparent 62%); } .app-glyph { position: relative; width: 46px; height: 46px; color: var(--accent); } .app-glyph svg { width: 100%; height: 100%; } .app-card.is-live .app-glyph { color: var(--text); } .app-preview .chip { position: absolute; top: 12px; right: 12px; } .ui-bars { position: absolute; left: 16px; right: 16px; bottom: 14px; display: grid; gap: 6px; } .ui-bars i { display: block; height: 6px; border-radius: 3px; background: var(--hairline); width: var(--w, 60%); } .app-info { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; } .app-row { display: flex; align-items: center; gap: var(--s-3); } .app-row .tile { width: 42px; height: 42px; } .app-info h3 { font-size: 1.15rem; } .app-info p { color: var(--text-secondary); flex: 1; margin: 0; } .app-info .app-foot { margin-top: var(--s-2); } /* ----- Responsive ----- */ @media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } .hero-grid { grid-template-columns: 1fr; } .hero-visual { order: 2; margin-top: var(--s-6); } .hero-grid .hero-inner { max-width: 720px; } .spotlight, .spotlight.reverse { grid-template-columns: 1fr; } .spotlight.reverse .spot-media { order: 0; } .stat-band { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } .roadmap { grid-template-columns: 1fr; } } @media (max-width: 768px) { .nav-links, .nav-actions .btn { display: none; } .nav-toggle { display: inline-flex; } .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-5); } .hero-cta .btn { flex: 1 1 auto; } .checklist { grid-template-columns: 1fr; } } @media (max-width: 480px) { .stat-band { grid-template-columns: 1fr 1fr; gap: var(--s-5); } } @media (max-width: 480px) { .container { padding-inline: var(--s-4); } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .store-badge { min-width: 100%; } } /* ----- Reduced motion ----- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } .reveal, [data-stagger] > * { opacity: 1 !important; transform: none !important; } }