/* ========================================================================== Optanite — Design System v1.1 ("the void", atmospheric) Dark islands + light "paper" content bands. Violet = signal, not paint. Commissioner (display) · Inter (body) · JetBrains Mono (data/labels). Self-hosted fonts (see fonts.css). Vanilla CSS, no build step. ========================================================================== */ /* ========== DESIGN TOKENS ========== Theme architecture: every color lives on a token; :root is the dark (default, brand) theme; [data-theme="light"] remaps the same tokens. A future toggle only has to stamp data-theme on (see main.js — any [data-theme-toggle] button already works). */ :root { color-scheme: dark; /* Void scale (page background world) — soft dark: lifted off pure black (research: #000 causes halation/eye strain; ~#121212+ reads richer) */ --void: #121019; --void-raised: #1A1725; --void-line: #2B2640; /* Signal (violet = electromagnetic signature) */ --signal: #A08CFF; --signal-deep: #2E2650; /* Output (text on void) — off-white, never pure #fff on dark */ --output: #E6E4EF; --ink-muted: #938FA7; /* Surface ("paper" heritage name) — theme-relative second surface: in dark it's a slightly raised dark band, in light a slightly deeper light band. Same rhythm, no dark↔light polarity flips inside a theme. */ --paper: #181522; --paper-raised: #211D30; --paper-line: #2B2640; --paper-ink: #E6E4EF; --paper-ink-2: #B6B2C8; --paper-muted: #938FA7; /* Theme plumbing: subtle fills, nav frost, glow color (rgb triplet), gradient text */ --wash-1: rgba(255,255,255,0.03); --wash-2: rgba(255,255,255,0.05); --frost-nav: rgba(18, 16, 25, 0.35); --frost-nav-line: rgba(255,255,255,0.06); --frost-scroll: rgba(22, 19, 31, 0.78); --glow: 160, 140, 255; --veil: 18, 16, 25; --em-1: #F2F1F8; --em-2: #d7ceff; /* Functional — audit data only, never decorative */ --score-good: #7FD1A8; --score-warn: #E3B368; --score-crit: #E0796B; /* Type */ --font-display: 'Commissioner', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Rhythm */ --container: 1160px; --gutter: clamp(1.25rem, 4vw, 1.5rem); --section-y: clamp(4.5rem, 10vw, 8rem); --nav-h: 68px; /* Radius */ --r-card: 10px; --r-btn: 8px; --r-pill: 999px; /* Motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1); --t: 0.2s var(--ease); } /* Light theme — same tokens, remapped. Soft light: violet-grey page, never pure white, dark-violet accent (the bright #A08CFF washes out on light bg). */ :root[data-theme="light"] { color-scheme: light; --void: #EFEDF4; --void-raised: #F6F5FA; --void-line: #D6D2E2; --signal: #5F4BC9; --signal-deep: #E2DBF8; --output: #26222F; --ink-muted: #575170; /* Second surface: slightly deeper than the page, same soft family */ --paper: #E5E2ED; --paper-raised: #EFEDF5; --paper-line: #CDC8DB; --paper-ink: #26222F; --paper-ink-2: #453F5C; --paper-muted: #575170; --wash-1: rgba(0,0,0,0.035); --wash-2: rgba(0,0,0,0.055); --frost-nav: rgba(239, 237, 244, 0.55); --frost-nav-line: rgba(0,0,0,0.06); --frost-scroll: rgba(239, 237, 244, 0.85); --glow: 95, 75, 201; --veil: 239, 237, 244; --em-1: #2A2440; --em-2: #5F4BC9; } /* ========== RESET & BASE ========== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-weight: 400; background: var(--void); color: var(--ink-muted); line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Soft cross-fade when the theme toggles (big surfaces only — components keep their own faster hover transitions) */ body, .section-paper, .footer, .marquee { transition: background-color 0.35s var(--ease), color 0.35s var(--ease); } img, svg { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .marquee-track { animation-play-state: paused !important; } } ::selection { background: var(--signal); color: var(--void); } /* ========== ANIMATIONS ========== */ @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes spinSlow { to { transform: rotate(360deg); } } @keyframes emDrift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } } @keyframes breathe { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.96); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } .a1 { animation: fadeUp 0.8s var(--ease) both 0.00s; } .a2 { animation: fadeUp 0.8s var(--ease) both 0.08s; } .a3 { animation: fadeUp 0.8s var(--ease) both 0.16s; } .a4 { animation: fadeUp 0.8s var(--ease) both 0.24s; } .a5 { animation: fadeUp 0.8s var(--ease) both 0.32s; } /* ========== TYPOGRAPHY ========== */ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--output); line-height: 1.08; letter-spacing: -0.03em; font-weight: 600; text-wrap: balance; } h1 { font-size: clamp(2.75rem, 7vw, 5.25rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; } h2 { font-size: clamp(2.15rem, 4.4vw, 3.25rem); } h3 { font-size: clamp(1.25rem, 2.1vw, 1.45rem); font-weight: 600; } h4 { font-size: 1.05rem; font-weight: 600; } /* Even line lengths on headings/quotes — no one-word orphan lines (progressive) */ h1, h2, .founder blockquote { text-wrap: balance; } p { color: var(--ink-muted); } .lead { font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.6; color: var(--ink-muted); text-wrap: pretty; } strong { color: var(--output); font-weight: 600; } .accent, .accent-word { color: var(--signal); } .hero-em { background: linear-gradient(135deg, var(--em-1) 0%, var(--em-2) 45%, var(--signal) 70%, var(--em-2) 100%); background-size: 220% 100%; animation: emDrift 9s ease-in-out infinite alternate; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Eyebrow / labels — mono voice, the "technical instrument" tell */ .eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--signal); } .eyebrow::before { content: ''; width: 0.95rem; height: 0.95rem; flex-shrink: 0; background-color: var(--signal); -webkit-mask: url('/assets/logo/optanite-mark.svg') center / contain no-repeat; mask: url('/assets/logo/optanite-mark.svg') center / contain no-repeat; } .eyebrow.center { justify-content: center; } /* ========== LAYOUT ========== */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); position: relative; } .section-sm { padding-block: clamp(3rem, 6vw, 5rem); } .section + .section { border-top: 1px solid var(--void-line); } .section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .section-head.center { margin-inline: auto; text-align: center; } .section-head.center .eyebrow { justify-content: center; } .section-head h2 { margin-top: 1rem; } .section-head p { margin-top: 1.1rem; font-size: 1.075rem; } .on-dark { background: transparent; } .section-alt { background: var(--void-raised); } /* legacy raised-panel shim, pending rollout to other pages */ /* Second-surface content bands (the "paper" heritage name) — theme-relative: a slightly raised band in dark, a slightly deeper band in light. All colors come from the --paper* tokens, so both themes stay soft and uniform. */ .section-paper { background-color: var(--paper); color: var(--paper-muted); border-top-color: transparent !important; /* Static ambient tint — painted once, zero runtime cost. A glow enters from the top corner and a fainter echo exits from the opposite bottom corner, so the light has somewhere to go instead of flashing once then sitting flat — the bottom echo is what the next section's top glow visually "connects" to across the seam. Alternates sides per band (see .tint-r) for a left-right weave down the page. */ background-image: radial-gradient(ellipse 75% 60% at 10% -6%, rgba(var(--glow), 0.11), transparent 68%), radial-gradient(ellipse 60% 50% at 92% 108%, rgba(var(--glow), 0.06), transparent 70%); background-repeat: no-repeat; } /* Explicit side flip (nth-of-type would miscount past non-paper sections): glow enters top-RIGHT on .tint-r bands — place artifacts on the opposite side */ .section-paper.tint-r { background-image: radial-gradient(ellipse 75% 60% at 90% -6%, rgba(var(--glow), 0.11), transparent 68%), radial-gradient(ellipse 60% 50% at 8% 108%, rgba(var(--glow), 0.06), transparent 70%); } .section-paper + .section-paper { border-top: 1px solid var(--paper-line) !important; } .section-paper h1, .section-paper h2, .section-paper h3, .section-paper h4 { color: var(--paper-ink); } .section-paper p { color: var(--paper-muted); } .section-paper strong { color: var(--paper-ink); } .section-paper .eyebrow { color: var(--paper-ink-2); } .section + .section-paper, .section-paper + .section:not(.section-paper) { border-top: none; } /* Void "atmosphere" — starfield + nebula glow, used on hero / demo / founder */ .atmo { position: relative; overflow: hidden; } .atmo-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle 2px at 85% 14%, rgba(var(--glow), 0.6) 0%, transparent 1px), radial-gradient(circle 1.5px at 72% 8%, rgba(255,255,255,0.5) 0%, transparent 1px), radial-gradient(circle 1px at 93% 31%, rgba(255,255,255,0.4) 0%, transparent 1px), radial-gradient(circle 1px at 68% 22%, rgba(255,255,255,0.3) 0%, transparent 1px), radial-gradient(circle 1px at 8% 22%, rgba(255,255,255,0.28) 0%, transparent 1px), radial-gradient(circle 1px at 22% 38%, rgba(255,255,255,0.18) 0%, transparent 1px), radial-gradient(circle 1px at 15% 65%, rgba(255,255,255,0.22) 0%, transparent 1px), radial-gradient(circle 1px at 38% 72%, rgba(255,255,255,0.15) 0%, transparent 1px), radial-gradient(circle 1px at 4% 85%, rgba(255,255,255,0.18) 0%, transparent 1px), radial-gradient(circle 1px at 48% 4%, rgba(255,255,255,0.22) 0%, transparent 1px), radial-gradient(circle 1px at 60% 90%, rgba(255,255,255,0.15) 0%, transparent 1px), radial-gradient(ellipse 75% 60% at 82% 8%, rgba(107,86,196,0.34) 0%, transparent 65%), radial-gradient(ellipse 50% 42% at 8% 88%, rgba(64,82,190,0.22) 0%, transparent 70%), radial-gradient(ellipse 40% 30% at 45% 45%, rgba(91,74,158,0.10) 0%, transparent 75%); } .atmo-grain { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; } .atmo > .container { position: relative; z-index: 1; } /* Light theme: white starfield dots vanish naturally on a light bg; fade the whole layer so only a whisper of the nebula tint remains, and drop the grain. */ :root[data-theme="light"] .atmo-bg { opacity: 0.4; } :root[data-theme="light"] .atmo-grain { display: none; } /* Section artifacts — tiny static instrument marks (crosshair, mini ring, mono tag). One or two per section at most; painted once, zero runtime cost. */ .artifact-cross { position: absolute; width: 14px; height: 14px; pointer-events: none; } .artifact-cross::before, .artifact-cross::after { content: ''; position: absolute; background: rgba(var(--glow), 0.45); } .artifact-cross::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); } .artifact-cross::after { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); } .artifact-tag { position: absolute; pointer-events: none; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-muted); opacity: 0.6; white-space: nowrap; } @media (max-width: 700px) { .artifact-cross, .artifact-tag { display: none; } } /* Spotlight band — a handful of pinpoint stars plus one large ghost ring (the real brand mark, slow-spinning, near-invisible) centered behind the panels — the same technique as the hero ring, just much fainter. Replaces a shapeless glow blob with something that reads as a deliberate mark, not smudged light. */ .section-spot { position: relative; overflow: hidden; } .section-spot::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(circle 1.5px at 14% 20%, rgba(255,255,255,0.22) 0%, transparent 1px), radial-gradient(circle 1px at 88% 16%, rgba(255,255,255,0.16) 0%, transparent 1px), radial-gradient(circle 1px at 6% 74%, rgba(255,255,255,0.14) 0%, transparent 1px), radial-gradient(circle 1.5px at 93% 78%, rgba(var(--glow), 0.4) 0%, transparent 1px), radial-gradient(circle 1px at 50% 92%, rgba(255,255,255,0.12) 0%, transparent 1px); } .spot-ring-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0; width: min(64vw, 720px); pointer-events: none; } .spot-ring { display: block; width: 100%; height: auto; opacity: 0.05; animation: spinSlow 200s linear infinite; filter: drop-shadow(0 0 40px rgba(var(--glow), 0.14)); } .section-spot > .container { position: relative; z-index: 1; } /* Light theme: the page bg is light everywhere, so the dark-bg wordmark never fits — always show the light-bg variant (nav top state and footer alike). */ :root[data-theme="light"] .wordmark .on-void { display: none; } :root[data-theme="light"] .wordmark .on-scroll { display: block; } /* Visually hidden but present for screen readers, search engines and AI crawlers — used where a section needs a real heading without a visible one on the page. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ========== SKIP LINK ========== */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 1100; padding: 0.75rem 1.25rem; background: var(--output); color: var(--void); font-weight: 600; border-radius: 0 0 var(--r-btn) 0; } .skip-link:focus { left: 0; } /* ========== NAVBAR (dual state: transparent-over-void → frosted-paper on scroll) ========== */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--nav-h); background: var(--frost-nav); border-bottom: 1px solid var(--frost-nav-line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background 0.3s var(--ease), border-color 0.3s var(--ease); } .navbar.scrolled { background: var(--frost-scroll); border-bottom-color: var(--paper-line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } body:has(.hero.section-paper) .navbar, .navbar.on-paper { background: var(--frost-scroll); border-bottom-color: var(--paper-line); } .nav-inner { max-width: var(--container); height: 100%; margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .wordmark { display: inline-flex; align-items: center; flex-shrink: 0; } .wordmark img { height: 26px; width: auto; max-width: none; display: block; } /* Logo variant is theme-driven, not scroll-driven: the nav frosts to a same-theme surface now, so the dark-bg wordmark stays in dark and the light-bg one in light (see the :root[data-theme="light"] .wordmark rules). */ .wordmark .on-scroll { display: none; } .footer .wordmark img { height: 32px; } .nav-links { display: flex; align-items: center; gap: 1.75rem; } .nav-link { font-size: 0.925rem; font-weight: 500; color: var(--ink-muted); position: relative; transition: color var(--t); } .navbar.scrolled .nav-link { color: var(--paper-muted); } .nav-link::after { content: ''; position: absolute; left: 0; bottom: -0.35rem; height: 1.5px; width: 0; background: var(--signal); transition: width 0.25s var(--ease-out); } .nav-link:hover, .nav-link:focus-visible, .nav-link[aria-current="page"] { color: var(--output); } .navbar.scrolled .nav-link:hover, .navbar.scrolled .nav-link:focus-visible, .navbar.scrolled .nav-link[aria-current="page"] { color: var(--paper-ink); } .nav-link:hover::after, .nav-link[aria-current="page"]::after { width: 100%; } .nav-lang { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.04em; } .nav-lang::after { display: none; } .nav-toggle { display: none; background: none; border: 0; cursor: pointer; width: 2.5rem; height: 2.5rem; color: var(--output); font-size: 1.4rem; } .navbar.scrolled .nav-toggle { color: var(--paper-ink); } /* Theme toggle — small icon button; main.js listens on [data-theme-toggle]. Shows the mode you'd switch TO: sun while dark, moon while light. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.15rem; height: 2.15rem; border-radius: 50%; flex-shrink: 0; background: transparent; border: 1px solid var(--void-line); color: var(--ink-muted); cursor: pointer; transition: color var(--t), border-color var(--t), background var(--t); } .theme-toggle:hover, .theme-toggle:focus-visible { color: var(--signal); border-color: var(--signal); background: var(--wash-1); } .theme-toggle svg { width: 1.05rem; height: 1.05rem; } .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } /* ========== BUTTONS ========== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.8rem 1.5rem; border-radius: var(--r-btn); font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; line-height: 1; cursor: pointer; border: 1px solid transparent; white-space: nowrap; transition: filter var(--t), border-color var(--t), color var(--t), background var(--t), transform 0.18s var(--ease-out), box-shadow 0.25s var(--ease-out); } .btn-primary, .btn-accent { background: var(--output); color: var(--void); } .btn-primary:hover, .btn-accent:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 8px 24px -10px rgba(var(--glow), 0.45); } .btn-ghost { background: transparent; color: var(--output); border-color: var(--void-line); } .btn-ghost:hover { border-color: var(--signal); } .section-paper .btn-ghost { color: var(--paper-ink); border-color: var(--paper-line); } .section-paper .btn-ghost:hover { border-color: var(--signal); } .btn .arrow { transition: transform var(--t); } .btn:hover .arrow { transform: translateX(3px); } .btn:active { transform: translateY(1px); } .btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; } /* ========== HERO ========== */ .hero { padding-top: calc(var(--nav-h) + clamp(3rem, 8vw, 6rem)); padding-bottom: clamp(3rem, 8vw, 6rem); min-height: 92vh; display: flex; align-items: center; } .hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; width: 100%; } .hero-inner { max-width: 34rem; } .hero h1 { margin-top: 1.1rem; } .hero-divider { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; } .hero-divider-line { height: 1px; width: 32px; background: var(--void-line); flex-shrink: 0; } .hero-divider-text { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--signal); opacity: 0.75; white-space: nowrap; } .hero .lead { margin-top: 1.35rem; max-width: 32rem; } .hero .btn-row { margin-top: 2.1rem; } .status-badge { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--ink-muted); padding: 0.5rem 1rem 0.5rem 0.7rem; border: 1px solid var(--void-line); border-radius: var(--r-pill); background: var(--wash-1); } .status-dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--signal); flex-shrink: 0; animation: breathe 2.6s ease-in-out infinite; } /* Hero decorative ring — the brand mark, big, glowing, slow-spinning + mouse parallax */ .hero-graphic { position: relative; display: flex; align-items: center; justify-content: center; user-select: none; pointer-events: none; } .hero-coords { position: absolute; inset: 0; pointer-events: none; } .hero-coord { position: absolute; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.2em; color: rgba(var(--glow), 0.45); text-transform: uppercase; white-space: nowrap; } .hc-top { top: 12%; right: 8%; } .hc-btm { bottom: 12%; left: 6%; } .hero-ring-parallax { transition: transform 0.08s linear; will-change: transform; } .hero-ring-wrap { animation: spinSlow 140s linear infinite; filter: drop-shadow(0 0 58px rgba(var(--glow), 0.4)); } .hero-ring-wrap img { width: clamp(220px, 24vw, 340px); height: auto; } /* Subpage hero graphic — same mark, smaller and static (slow-spin only, no parallax/coords readout — those stay the homepage's exclusive flourish) */ .hero-graphic.sub .hero-ring-wrap img { width: clamp(150px, 16vw, 240px); } /* Trust markers */ .marker-row { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin-top: 1.9rem; } .marker { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-muted); letter-spacing: 0.02em; } .marker::before { content: ''; width: 0.85rem; height: 0.85rem; flex-shrink: 0; background-color: var(--signal); -webkit-mask: url('/assets/logo/optanite-mark.svg') center / contain no-repeat; mask: url('/assets/logo/optanite-mark.svg') center / contain no-repeat; } /* ========== MARQUEE ========== */ .marquee { border-top: 1px solid var(--void-line); overflow: hidden; background: var(--void); } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-track { display: flex; align-items: center; width: max-content; animation: marquee 30s linear infinite; } .marquee-item { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; padding: 1rem 1.75rem; } .marquee-sep { color: var(--signal); font-size: 0.7rem; opacity: 0.45; flex-shrink: 0; } /* ========== CARDS ========== */ .grid { display: grid; gap: 1.25rem; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .card { position: relative; background: var(--void-raised); border: 1px solid var(--void-line); border-radius: var(--r-card); padding: clamp(1.6rem, 3vw, 2.25rem); transition: border-color 0.25s var(--ease), transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); } .card:hover { border-color: rgba(var(--glow), 0.4); transform: translateY(-3px); box-shadow: 0 12px 32px -16px rgba(0,0,0,0.35); } .card h3 { margin-bottom: 0.75rem; } .card p { margin-bottom: 1.1rem; } .section-paper .card { background: var(--paper-raised); border-color: var(--paper-line); } .section-paper .card:hover { border-color: rgba(var(--glow), 0.45); } .service-block { display: flex; flex-direction: column; height: 100%; } .service-block .eyebrow { margin-bottom: 0.85rem; } .service-block .card-link { margin-top: auto; padding-top: 1rem; font-weight: 500; color: var(--signal); display: inline-flex; align-items: center; gap: 0.4rem; } .service-block .card-link::after { content: '→'; transition: transform var(--t); } .service-block:hover .card-link::after { transform: translateX(5px); } .feature-list li { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.4rem 0; color: var(--ink-muted); font-size: 0.95rem; } .feature-list li::before { content: ''; margin-top: 0.35rem; width: 0.95rem; height: 0.95rem; flex-shrink: 0; background-color: var(--signal); -webkit-mask: url('/assets/logo/optanite-mark.svg') center / contain no-repeat; mask: url('/assets/logo/optanite-mark.svg') center / contain no-repeat; } .section-paper .feature-list li { color: var(--paper-muted); } .section-paper .tier { background: var(--paper-raised); border-color: var(--paper-line); } .section-paper .tier:hover { border-color: rgba(var(--glow), 0.45); } .section-paper .callout { background: var(--paper-raised); border-color: var(--paper-line); } .section-paper .faq details { border-color: var(--paper-line); } /* ========== EDITORIAL SERVICE LIST (numbered, hover reveal) ========== */ .svc-list { border-top: 1px solid var(--paper-line); } .svc-item { position: relative; isolation: isolate; display: grid; grid-template-columns: 3rem 1fr auto; gap: 1.75rem; padding: 2.4rem 0; border-bottom: 1px solid var(--paper-line); align-items: start; } /* Hover highlight lives on a bleeding pseudo-layer and fades in — the content itself never moves (animating padding/margin reflows the row and feels janky) */ .svc-item::after { content: ''; position: absolute; inset: 0 -1.25rem; z-index: -1; border-radius: 8px; background: var(--paper-raised); opacity: 0; transition: opacity 0.25s var(--ease); } .svc-item:hover::after { opacity: 1; } .svc-item::before { content: ''; position: absolute; left: -1.25rem; top: 0; bottom: 0; width: 3px; background: linear-gradient(to bottom, var(--signal), #7c5cff); transform: scaleY(0); transform-origin: bottom; transition: transform 0.3s var(--ease-spring); border-radius: 0 2px 2px 0; } .svc-item:hover::before { transform: scaleY(1); } .svc-num { position: relative; width: 2.25rem; height: 2.25rem; margin-top: 0.15rem; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.15em; color: var(--signal); opacity: 0.7; } /* Hover "lock-on" brackets — a HUD reads the row's number when you land on it. Services only: step-num already has its own circular border + glow, and the square brackets clashed with that shape instead of reading as a HUD accent. svc-num is sized to a fixed square (above) so the brackets frame it evenly on all four sides instead of wrapping a lopsided text baseline box. */ .svc-num::before, .svc-num::after { content: ''; position: absolute; width: 8px; height: 8px; border-color: var(--signal); opacity: 0; transition: opacity 0.25s var(--ease); } .svc-num::before { top: -6px; left: -6px; border-top: 1.5px solid; border-left: 1.5px solid; } .svc-num::after { bottom: -6px; right: -6px; border-bottom: 1.5px solid; border-right: 1.5px solid; } .svc-item:hover .svc-num::before, .svc-item:hover .svc-num::after { opacity: 0.85; } .svc-name { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 1.8rem); font-weight: 600; letter-spacing: -0.02em; color: var(--paper-ink); margin-bottom: 0.6rem; } .svc-desc { font-size: 1rem; color: var(--paper-muted); line-height: 1.7; max-width: 36rem; } .svc-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; max-width: 15rem; padding-top: 0.2rem; } .svc-tag { font-family: var(--font-mono); font-size: 0.68rem; color: var(--paper-muted); background: var(--paper); border: 1px solid var(--paper-line); border-radius: 4px; padding: 0.15rem 0.5rem; transition: border-color 0.25s var(--ease), color 0.25s var(--ease); } .svc-item:hover .svc-tag { border-color: rgba(var(--glow), 0.45); color: var(--paper-ink-2); } .svc-link { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.85rem; font-weight: 600; color: var(--signal); font-size: 0.9rem; } .svc-link::after { content: '→'; transition: transform var(--t); } .svc-item:hover .svc-link::after { transform: translateX(4px); } /* ========== STEPS (process spine) ========== */ .steps { border-top: 1px solid var(--paper-line); position: relative; } .steps::before { content: ''; position: absolute; left: 1.35rem; top: 2.5rem; bottom: 2.5rem; width: 2px; background: linear-gradient(to bottom, transparent, rgba(var(--glow), 0.35) 15%, rgba(var(--glow), 0.35) 85%, transparent); } .step { position: relative; isolation: isolate; display: grid; grid-template-columns: 2.75rem 1fr; gap: 1.5rem; padding: 1.85rem 0; border-bottom: 1px solid var(--paper-line); align-items: start; } /* No whole-row bleed background here (unlike .svc-item) — this list has a connecting spine line running through the numbers, and an opaque row-height backdrop paints over that line on hover. The number's own glow ring is feedback enough. */ .step-num { position: relative; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.9rem; font-weight: 500; color: var(--signal); } .step-num::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--paper-line); transition: border-color var(--t), box-shadow var(--t); } .step:hover .step-num::before { border-color: var(--signal); box-shadow: 0 0 0 4px rgba(var(--glow), 0.16); } .step-num > span { position: relative; z-index: 1; } .step h3 { font-size: 1.15rem; margin-bottom: 0.4rem; color: var(--paper-ink); } .step p { color: var(--paper-muted); } /* ========== PRINCIPLES (ghost numeral list) ========== */ .principles-layout { display: grid; grid-template-columns: 20rem 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; } .principles-aside { position: sticky; top: calc(var(--nav-h) + 2.5rem); border-left: 2px solid var(--signal); padding-left: 1.5rem; } .principles-list { border-top: 1px solid var(--paper-line); } .principle { position: relative; overflow: hidden; padding: 2.25rem 0; border-bottom: 1px solid var(--paper-line); } .principle-num { position: relative; z-index: 1; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.15em; color: var(--signal); } .principle-num::before { content: attr(data-num); position: absolute; top: -0.9rem; left: -0.4rem; z-index: 0; font-family: var(--font-display); font-size: 6.5rem; font-weight: 600; line-height: 1; color: rgba(var(--glow), 0.09); pointer-events: none; user-select: none; letter-spacing: -0.05em; } .principle h3 { position: relative; z-index: 1; font-size: clamp(1.25rem, 2.4vw, 1.6rem); color: var(--paper-ink); margin: 0.4rem 0 0.6rem; } .principle p { position: relative; z-index: 1; max-width: 32rem; } /* ========== PRICING TIERS ========== */ .tiers { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, 1fr); align-items: start; } .tier { position: relative; display: flex; flex-direction: column; background: var(--void-raised); border: 1px solid var(--void-line); border-radius: var(--r-card); padding: clamp(1.6rem, 3vw, 2.1rem); transition: border-color var(--t); } .tier:hover { border-color: rgba(var(--glow), 0.4); } .tier.featured { border-color: var(--signal); } .tier-tag { align-self: flex-start; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal); background: var(--signal-deep); border-radius: var(--r-pill); padding: 0.3rem 0.75rem; margin-bottom: 1.1rem; } .tier h3 { margin-bottom: 0.5rem; } .tier .price { font-family: var(--font-display); font-size: clamp(1.9rem, 3.6vw, 2.4rem); font-weight: 700; color: var(--output); letter-spacing: -0.02em; } .tier .price.by-quote { font-size: 1.3rem; font-weight: 600; color: var(--signal); } .tier .price.by-quote span { display: block; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 400; color: var(--ink-muted); margin-top: 0.25rem; letter-spacing: 0.02em; } .tier .tier-desc { margin: 0.8rem 0 1.3rem; } .tier .feature-list { margin-bottom: 1.5rem; } .tier .btn { margin-top: auto; width: 100%; } /* ========== CALLOUT ========== */ .callout { border: 1px solid var(--void-line); border-left: 2px solid var(--signal); background: var(--void-raised); border-radius: var(--r-card); padding: clamp(1.4rem, 3vw, 2rem); } .callout p { color: var(--output); } /* ========== CTA BAND ========== */ .cta-band { text-align: center; position: relative; overflow: hidden; } .cta-band .container { max-width: 44rem; position: relative; z-index: 1; } .cta-band h2 { margin-bottom: 1rem; } .cta-band .btn-row { justify-content: center; margin-top: 2.25rem; } /* Sized against the band's height (not the viewport width) so the full circle always fits inside the section — a ring cropped top+bottom reads as broken */ .cta-ring-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: min(90%, 720px); aspect-ratio: 1; pointer-events: none; z-index: 0; } .cta-ring { display: block; width: 100%; height: 100%; opacity: 0.16; animation: spinSlow 160s linear infinite; filter: drop-shadow(0 0 60px rgba(var(--glow), 0.25)); } /* Legibility veil between the ring and the text — deepens the center so the copy always reads, whatever part of the ring is passing behind it */ .cta-band::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 52% 58% at 50% 50%, rgba(var(--veil), 0.82), rgba(var(--veil), 0.25) 60%, transparent 78%); } .cta-micro { margin-top: 1.6rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); } .btn-lg { padding: 1rem 1.9rem; font-size: 1rem; } /* ========== "WHAT AI SEES" DEMO ========== */ .demo { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.25rem; align-items: stretch; } .demo-arrow { align-self: center; color: var(--signal); font-size: 1.5rem; } .demo-panel { position: relative; display: flex; flex-direction: column; border-radius: var(--r-card); border: 1px solid var(--void-line); background: var(--void-raised); overflow: hidden; } .demo-panel.after { border-color: rgba(var(--glow), 0.5); box-shadow: 0 0 60px -12px rgba(var(--glow), 0.35); } .demo-panel.after::before, .demo-panel.after::after { content: ''; position: absolute; width: 16px; height: 16px; border-color: var(--signal); opacity: 0.7; z-index: 2; } .demo-panel.after::before { top: -1px; left: -1px; border-top: 1.5px solid; border-left: 1.5px solid; } .demo-panel.after::after { bottom: -1px; right: -1px; border-bottom: 1.5px solid; border-right: 1.5px solid; } .demo-panel .demo-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--void-line); font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-muted); } /* Scan-gauge tick line — a HUD detail under the panel AI actually reads cleanly */ .demo-panel.after .demo-head { background-image: repeating-linear-gradient(to right, rgba(var(--glow), 0.5) 0 1px, transparent 1px 9px); background-position: bottom; background-size: 100% 1px; background-repeat: repeat-x; } .demo-panel .demo-tag { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.22rem 0.55rem; border-radius: var(--r-pill); } .demo-panel.before .demo-tag { color: var(--ink-muted); background: var(--wash-2); } .demo-panel.after .demo-tag { color: var(--void); background: var(--signal); } .demo-chat { flex: 1; display: flex; flex-direction: column; gap: 0.85rem; padding: 1.3rem 1.3rem 0.5rem; } .chat-q { align-self: flex-end; max-width: 85%; background: var(--void); border: 1px solid var(--void-line); color: var(--output); font-size: 0.9rem; padding: 0.6rem 0.9rem; border-radius: 14px 14px 4px 14px; } .chat-q::before { content: 'You'; display: block; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 0.2rem; } .chat-a { align-self: flex-start; max-width: 92%; font-size: 0.94rem; line-height: 1.5; padding: 0.7rem 1rem; border-radius: 14px 14px 14px 4px; } .chat-a::before { content: 'AI assistant'; display: block; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.25rem; color: var(--ink-muted); } .demo-panel.before .chat-a { background: var(--wash-1); color: var(--ink-muted); } .demo-panel.after .chat-a { background: var(--signal-deep); color: var(--output); border: 1px solid rgba(var(--glow), 0.35); } .demo-panel.after .chat-a strong { color: var(--signal); } .demo-cap { margin: 0; padding: 0.4rem 1.3rem 1.3rem; font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-muted); } .demo-panel.after .demo-cap { color: var(--signal); } /* ========== FAQ ========== */ .faq { max-width: 52rem; } .faq details { border-bottom: 1px solid var(--void-line); padding: 0.4rem 0; } .faq summary { list-style: none; cursor: pointer; padding: 1rem 2.5rem 1rem 0; position: relative; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--output); transition: color var(--t); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--signal); } .faq details[open] summary::after { content: '−'; } .faq summary:hover { color: var(--signal); } .faq details > p { padding: 0 2.5rem 1.1rem 0; margin: 0; color: var(--ink-muted); } /* ========== FOUNDER (void quote island) ========== */ .founder-wrap { position: relative; text-align: center; max-width: 40rem; margin-inline: auto; } .founder-glow { position: absolute; top: -3rem; left: 50%; transform: translateX(-50%); z-index: 0; width: 22rem; height: 22rem; max-width: 70vw; max-height: 70vw; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(var(--glow), 0.16), rgba(var(--glow), 0.03) 55%, transparent 72%); } .founder-avatar { position: relative; z-index: 1; width: 4rem; height: 4rem; margin: 0 auto 1.75rem; padding: 0.85rem; border-radius: 50%; display: grid; place-items: center; background: var(--signal-deep); border: 1.5px solid var(--signal); filter: drop-shadow(0 0 20px rgba(var(--glow), 0.42)); } .founder-avatar::before { content: ''; position: absolute; inset: -0.6rem; z-index: -1; border-radius: 50%; border: 1px solid var(--void-line); } .founder-avatar img { width: 100%; height: 100%; } .founder-wrap > .eyebrow { position: relative; z-index: 1; } .founder blockquote { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 2.6vw, 1.75rem); line-height: 1.45; color: var(--output); letter-spacing: -0.01em; } .founder blockquote::before { content: '“'; position: absolute; top: -2.75rem; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-size: 6rem; line-height: 1; color: var(--signal); opacity: 0.22; pointer-events: none; user-select: none; } .founder .founder-rule { position: relative; z-index: 1; width: 40px; height: 1px; background: var(--void-line); margin: 1.75rem auto; } .founder .founder-name { position: relative; z-index: 1; color: var(--output); font-weight: 600; } .founder .founder-role { position: relative; z-index: 1; color: var(--ink-muted); font-family: var(--font-mono); font-size: 0.8rem; margin-top: 0.2rem; } /* Operator record — HUD dossier card (Animus/data-readout aesthetic): bordered, corner brackets like the demo panel, mono designation + a dt/dd field list. Restates facts already said in the quote/badges above — no new claims. */ .record-card { position: relative; z-index: 1; text-align: left; width: 100%; max-width: 21rem; margin: 2.25rem auto 0; padding: 1.1rem 1.35rem; border: 1px solid var(--void-line); background: rgba(var(--glow), 0.03); } .record-card::before, .record-card::after { content: ''; position: absolute; width: 14px; height: 14px; border-color: var(--signal); opacity: 0.6; } .record-card::before { top: -1px; left: -1px; border-top: 1.5px solid; border-left: 1.5px solid; } .record-card::after { bottom: -1px; right: -1px; border-bottom: 1.5px solid; border-right: 1.5px solid; } .record-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 0.75rem; margin-bottom: 0.75rem; border-bottom: 1px solid var(--void-line); } .record-designation { font-family: var(--font-mono); font-size: 0.95rem; font-weight: 600; color: var(--signal); letter-spacing: -0.01em; } .record-label { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); opacity: 0.75; } .record-data { display: flex; flex-direction: column; gap: 0.55rem; } .record-row { display: grid; grid-template-columns: 4.75rem 1fr; gap: 0.75rem; align-items: baseline; } .record-row dt { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); opacity: 0.7; white-space: nowrap; } .record-row dd { font-family: var(--font-body); font-size: 0.85rem; color: var(--output); } /* ========== ORBITAL SCORE BADGE ========== */ .orbital { display: inline-flex; align-items: center; gap: 0.9rem; border: 1px solid var(--void-line); border-radius: var(--r-pill); padding: 0.5rem 1.1rem 0.5rem 0.5rem; background: var(--void-raised); } .orbital svg { width: 44px; height: 44px; display: block; transform: rotate(-90deg); } .orbital .ring-track { fill: none; stroke: var(--void-line); stroke-width: 3; } .orbital .ring-fill { fill: none; stroke: var(--signal); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset 0.6s var(--ease-out); } .orbital .ring-num { font-family: var(--font-mono); font-size: 12px; font-weight: 500; fill: var(--output); transform: rotate(90deg); transform-origin: center; } .orbital .orbital-label { display: flex; flex-direction: column; line-height: 1.25; } .orbital .orbital-label b { color: var(--output); font-weight: 600; font-size: 0.9rem; } .orbital .orbital-label span { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-muted); } /* ========== FOOTER ========== */ .footer { background: var(--void); border-top: 1px solid var(--void-line); padding-block: clamp(3.5rem, 6vw, 5rem) 2rem; } .footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1.5fr repeat(3, 1fr); padding-bottom: 2.5rem; border-bottom: 1px solid var(--void-line); } .footer h3 { color: var(--output); margin-bottom: 1.1rem; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .footer a, .footer p { color: var(--ink-muted); font-size: 0.925rem; } .footer li { margin-bottom: 0.6rem; } .footer a { transition: color var(--t); } .footer a:hover { color: var(--output); } .footer .wordmark { color: var(--output); margin-bottom: 1rem; } .footer-tagline { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--signal); } .footer-badge { margin-top: 1.5rem; } .footer-bottom { padding-top: 1.75rem; font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem 1.5rem; justify-content: space-between; } .footer-meta { display: flex; flex-direction: column; gap: 0.55rem; } /* Proof links — this exact page's own live validator reports, not a claim. No "verify it yourself" label — the tool names plus their hover color are self-explanatory, matching the reference site's bare-link treatment. */ .footer-checks { display: flex; flex-wrap: wrap; gap: 0 0.7rem; font-size: 0.72rem; letter-spacing: 0.02em; } .footer-checks a { color: var(--ink-muted); } .footer-checks a:hover, .footer-checks a:focus-visible { color: var(--signal); } .footer-standard { display: inline-flex; align-items: center; gap: 0.9rem; } /* ========== FOCUS STATES ========== */ a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible, .card:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: var(--r-btn); } /* ========== SCROLL REVEAL ========== */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); } .reveal.is-visible { opacity: 1; transform: none; } .reveal[data-delay="1"] { transition-delay: 0.08s; } .reveal[data-delay="2"] { transition-delay: 0.16s; } .reveal[data-delay="3"] { transition-delay: 0.24s; } /* Demo conversation "plays out" once the panels scroll into view: question lands, answer follows, caption last — the after-panel a beat behind the before-panel, so the good answer is the finale. */ .demo-panel .chat-q, .demo-panel .chat-a, .demo-panel .demo-cap { opacity: 0; transform: translateY(10px); transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out); } .demo-panel.is-visible .chat-q, .demo-panel.is-visible .chat-a, .demo-panel.is-visible .demo-cap { opacity: 1; transform: none; } .demo-panel.before.is-visible .chat-q { transition-delay: 0.3s; } .demo-panel.before.is-visible .chat-a { transition-delay: 0.9s; } .demo-panel.before.is-visible .demo-cap { transition-delay: 1.5s; } .demo-panel.after.is-visible .chat-q { transition-delay: 0.6s; } .demo-panel.after.is-visible .chat-a { transition-delay: 1.6s; } .demo-panel.after.is-visible .demo-cap { transition-delay: 2.3s; } /* ========== RESPONSIVE ========== */ @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } .hero-graphic { display: none; } .hero { min-height: auto; } .principles-layout { grid-template-columns: 1fr; gap: 2rem; } .principles-aside { position: static; } .svc-tags { display: none; } } @media (max-width: 900px) { .grid-3, .tiers { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .nav-toggle { display: inline-flex; } .nav-links { position: fixed; inset: 0 0 0 auto; width: min(82%, 340px); flex-direction: column; align-items: flex-start; gap: 1.5rem; background: var(--void-raised); border-left: 1px solid var(--void-line); padding: 5.5rem var(--gutter) 2rem; transform: translateX(100%); transition: transform 0.3s var(--ease-out); } .nav-links.open { transform: none; } .grid-2, .footer-grid { grid-template-columns: 1fr; } .demo { grid-template-columns: 1fr; } .demo-arrow { transform: rotate(90deg); justify-self: center; } .footer-bottom { flex-direction: column; } .svc-item, .step { grid-template-columns: 2.25rem 1fr; } }