/* ========================================================= XevoNet — Core design system Restrained, Apple-grade. Light AND dark surfaces, hairline borders, generous whitespace, no rainbow gradients. ========================================================= */ :root { /* ---- Surfaces ---- */ --surface-0: #000000; /* deepest hero black */ --surface-1: #0a0a0c; /* app shell */ --surface-2: #111114; --surface-3: #18181c; --surface-light-0: #ffffff; --surface-light-1: #fbfbfd; /* Apple's off-white */ --surface-light-2: #f5f5f7; --surface-light-3: #e8e8ed; /* ---- Ink (text) ---- */ --ink: #f5f5f7; --ink-dim: rgba(245, 245, 247, 0.72); --ink-soft: rgba(245, 245, 247, 0.5); --ink-faint: rgba(245, 245, 247, 0.22); --ink-dark: #1d1d1f; /* Apple's near-black */ --ink-dark-dim: #6e6e73; --ink-dark-soft: #86868b; --ink-dark-faint: rgba(0, 0, 0, 0.22); /* ---- Lines ---- */ --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.16); --line-dark: rgba(0, 0, 0, 0.10); --line-dark-strong: rgba(0, 0, 0, 0.18); /* ---- Accent (used sparingly) ---- */ --accent: #7c5cff; --accent-strong: #6a48ff; --accent-soft: rgba(124, 92, 255, 0.14); /* ---- Legacy aliases kept so existing markup never breaks. All grad-* are now subtle monochrome — no rainbow. ---- */ --bg-0: var(--surface-0); --bg-1: var(--surface-1); --grad-1: linear-gradient(135deg, #7c5cff 0%, #6a48ff 100%); --grad-2: linear-gradient(135deg, #2b2b30 0%, #1a1a1f 100%); --grad-3: linear-gradient(135deg, #5a5a64 0%, #2b2b30 100%); --grad-4: linear-gradient(135deg, #2b2b30 0%, #18181c 100%); /* ---- Spacing & radii ---- */ --gutter: clamp(20px, 4vw, 48px); --radius-xs: 8px; --radius-sm: 12px; --radius: 18px; --radius-lg: 24px; --radius-xl: 32px; /* ---- Type ---- */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif; --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif; --font-serif: "Instrument Serif", "New York", "Times New Roman", serif; --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, monospace; /* ---- Motion ---- */ --ease-emphasized: cubic-bezier(0.32, 0.72, 0, 1); /* Apple's signature */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); /* alias */ --ease-spring: cubic-bezier(0.32, 0.72, 0, 1); /* alias — bouncy retired */ --dur-fast: 0.2s; --dur: 0.4s; --dur-slow: 0.7s; --dur-xslow: 1.1s; } /* ========================================================= */ /* Base */ /* ========================================================= */ *, *::before, *::after { box-sizing: border-box; } /* IMPORTANT: never set overflow-x on . It silently kills position:sticky for descendants in every Chromium browser. */ html { -webkit-text-size-adjust: 100%; /* No global smooth scroll — we handle anchor smoothing in JS so it can't fight our scroll-tied transforms. */ scroll-behavior: auto; } body { margin: 0; padding: 0; min-height: 100vh; /* Theme-aware: --bg-base / --txt are defined in theme.css */ background: var(--bg-base, var(--surface-0)); color: var(--txt, var(--ink)); font-family: var(--font-text); font-weight: 400; line-height: 1.47; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* clip-x without breaking sticky: clip is the modern, safe option */ overflow-x: clip; /* Avoid the browser auto-snapping scroll position when DOM shifts */ overflow-anchor: none; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } img, svg, video { display: block; max-width: 100%; } ::selection { background: var(--accent-soft); color: var(--ink); } /* ========================================================= */ /* Kill switches */ /* Legacy decorative elements still appear in some markup; */ /* we neutralise them here rather than touching every file. */ /* ========================================================= */ .mesh-bg, .cursor-glow, .blob, .grain, .orb-shine, .orb-pulse, .cta-shine, .showcase-bg { display: none !important; } /* Brand text should never be a rainbow. */ .brand-name { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; color: var(--ink) !important; font-weight: 600; letter-spacing: -0.01em; } /* Inline serif italic should be plain, not gradient-coloured. */ .italic { font-family: var(--font-serif); font-style: italic; font-weight: 400; background: none; -webkit-text-fill-color: currentColor; color: inherit; letter-spacing: -0.005em; } /* ========================================================= */ /* Typography utilities */ /* ========================================================= */ .t-display { font-family: var(--font-sans); font-weight: 600; font-size: clamp(48px, 8vw, 96px); line-height: 1.04; letter-spacing: -0.025em; } .t-h1 { font-family: var(--font-sans); font-weight: 600; font-size: clamp(40px, 5.4vw, 64px); line-height: 1.08; letter-spacing: -0.02em; } .t-h2 { font-family: var(--font-sans); font-weight: 600; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.14; letter-spacing: -0.015em; } .t-h3 { font-family: var(--font-sans); font-weight: 600; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.25; letter-spacing: -0.008em; } .t-lead { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; color: var(--ink-dim); } .t-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .text-balance { text-wrap: balance; } .text-pretty { text-wrap: pretty; } /* ========================================================= */ /* Layout helpers */ /* ========================================================= */ main { position: relative; z-index: 1; } section { position: relative; padding: clamp(80px, 12vw, 160px) var(--gutter); } .container { max-width: 1240px; margin: 0 auto; width: 100%; } .container-narrow { max-width: 960px; margin: 0 auto; } .container-tight { max-width: 720px; margin: 0 auto; } .section-head { max-width: 880px; margin: 0 auto 64px; text-align: center; } .eyebrow-text { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; } .section-head h2 { font-family: var(--font-sans); font-size: clamp(32px, 4.6vw, 56px); line-height: 1.08; letter-spacing: -0.02em; font-weight: 600; margin: 0 0 16px; } .section-head p { font-size: clamp(16px, 1.4vw, 19px); color: var(--ink-dim); max-width: 640px; margin: 0 auto; line-height: 1.5; } /* Light-on-dark section (default) is base; flip with .on-light */ .on-light { background: var(--surface-light-1); color: var(--ink-dark); } .on-light .section-head h2 { color: var(--ink-dark); } .on-light .section-head p { color: var(--ink-dark-dim); } .on-light .t-lead { color: var(--ink-dark-dim); } /* ========================================================= */ /* Navigation */ /* ========================================================= */ .nav-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 0; display: flex; justify-content: center; pointer-events: none; transition: background var(--dur) var(--ease-out), backdrop-filter var(--dur) var(--ease-out); } .nav-wrap.scrolled { background: var(--bg-overlay); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--hairline); } .nav { pointer-events: auto; width: 100%; max-width: 1240px; display: flex; align-items: center; gap: 24px; padding: 14px var(--gutter); border-radius: 0; background: transparent; border: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; transition: padding var(--dur) var(--ease-out); } .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; letter-spacing: -0.01em; color: var(--txt); } .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: transparent; border: none; transition: opacity var(--dur) var(--ease-out); } .brand:hover .brand-mark { opacity: 0.78; } .nav-links { display: flex; gap: 4px; list-style: none; margin: 0 auto; padding: 0; } .nav-links a { display: inline-block; padding: 8px 14px; border-radius: 8px; font-size: 13.5px; font-weight: 400; color: var(--txt-dim); transition: color var(--dur-fast) var(--ease-out); } .nav-links a:hover { color: var(--txt); background: transparent; } .nav-cta { display: flex; gap: 8px; align-items: center; } .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; gap: 4px; flex-direction: column; } .nav-toggle span { display: block; width: 20px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } /* ========================================================= */ /* Buttons */ /* ========================================================= */ .btn-primary, .btn-secondary, .btn-glass, .btn-ghost, .btn-link { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; font-size: 14px; font-weight: 500; line-height: 1; border-radius: 999px; cursor: pointer; border: 1px solid transparent; user-select: none; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out), transform var(--dur) var(--ease-out); font-family: inherit; text-decoration: none; } .btn-lg { padding: 14px 26px; font-size: 15px; border-radius: 999px; } /* Primary — solid accent, no glow */ .btn-primary { color: #fff; background: var(--accent); border-color: var(--accent); box-shadow: none; } .btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); } .btn-primary:active { transform: scale(0.97); } /* Secondary — solid white-on-dark */ .btn-secondary { color: var(--ink-dark); background: var(--ink); border-color: var(--ink); } .btn-secondary:hover { background: #e4e4ea; border-color: #e4e4ea; } .btn-secondary:active { transform: scale(0.97); } /* Glass — restrained, hairline border, no blur soup Theme-aware: in light theme it sits on white; in dark theme on black. */ .btn-glass { color: var(--txt); background: transparent; border-color: var(--hairline-strong); } .btn-glass:hover { background: var(--hairline); } .btn-glass:active { transform: scale(0.97); } .btn-ghost { color: var(--txt); background: transparent; border-color: transparent; } .btn-ghost:hover { color: var(--txt); background: var(--hairline); } .btn-ghost:active { transform: scale(0.97); } /* Inline text-only link button */ .btn-link { padding: 0; color: var(--accent); background: transparent; border: none; border-radius: 0; } .btn-link:hover { color: var(--accent-strong); } /* Force ghost/glass to use light-on-dark when sitting inside a forced-dark section, regardless of theme. */ .m-section.dark .btn-glass, .m-section.darker .btn-glass { color: var(--ink); border-color: var(--line-strong); } .m-section.dark .btn-glass:hover, .m-section.darker .btn-glass:hover { background: rgba(255, 255, 255, 0.08); } .m-section.dark .btn-ghost, .m-section.darker .btn-ghost { color: var(--ink); } .m-section.dark .btn-ghost:hover, .m-section.darker .btn-ghost:hover { background: rgba(255, 255, 255, 0.08); } /* same for headlines/text inside forced-dark sections */ .m-section.dark, .m-section.darker { color: var(--ink); } .btn-primary.full, .btn-glass.full, .btn-secondary.full, .btn-ghost.full { width: 100%; } /* Disable old play-icon decoration (cleaner) */ .play-icon { display: none; } /* ========================================================= */ /* Hairline divider */ /* ========================================================= */ .hr { border: 0; border-top: 1px solid var(--line); margin: 0; } .on-light .hr { border-top-color: var(--line-dark); } /* ========================================================= */ /* Footer */ /* ========================================================= */ .footer { padding: 64px var(--gutter) 40px; background: var(--bg-elev); color: var(--txt-soft); font-size: 13px; border-top: 1px solid var(--hairline); } .footer-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 3fr; gap: 48px; align-items: start; } .footer-brand { max-width: 320px; } .footer-brand p { margin: 12px 0 0; color: var(--txt-soft); line-height: 1.5; } .footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .footer-col h4 { color: var(--txt); font-size: 13px; font-weight: 600; margin: 0 0 14px; } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col li { margin-bottom: 8px; } .footer-col a { color: var(--txt-soft); transition: color var(--dur-fast) var(--ease-out); } .footer-col a:hover { color: var(--txt); } .footer-bar { max-width: 1240px; margin: 48px auto 0; padding-top: 24px; border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; } /* ========================================================= */ /* Forms (carry-over for auth pages) */ /* ========================================================= */ .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-size: 13px; font-weight: 500; color: var(--ink-dim); } .field input, .field textarea, .field select { width: 100%; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-strong); color: var(--ink); font: inherit; font-size: 15px; line-height: 1.4; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); background: rgba(255, 255, 255, 0.06); } .on-light .field label { color: var(--ink-dark-dim); } .on-light .field input, .on-light .field textarea, .on-light .field select { background: #fff; border-color: var(--line-dark-strong); color: var(--ink-dark); } .on-light .field input:focus { border-color: var(--accent); background: #fff; } /* ========================================================= */ /* Mobile */ /* ========================================================= */ @media (max-width: 880px) { .nav-links { display: none; } .nav-toggle { display: flex; } .footer-inner { grid-template-columns: 1fr; gap: 32px; } .footer-cols { grid-template-columns: repeat(2, 1fr); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }