/* ============================================================ Seed Code CLI — style.css Cinematic multi-page design system ------------------------------------------------------------ Palette: bg #09090B · bg-2 #111827 · card #18181B · border #27272A text #FAFAFA / #D4D4D8 / #A1A1AA · accent #22C55E Motion: transform/opacity, GPU composited, reduced-motion safe ============================================================ */ :root { --bg: #09090B; --bg-2: #111827; --card: #18181B; --card-hover: #1C1C20; --border: #27272A; --border-strong: #3F3F46; --text: #FAFAFA; --text-2: #D4D4D8; --muted: #A1A1AA; --accent: #22C55E; --accent-hover: #2FD86C; --accent-dim: rgba(34, 197, 94, .12); --accent-border: rgba(34, 197, 94, .35); --error: #EF4444; --warning: #F59E0B; --term-bg: #0C0C0D; --term-border: #30363D; --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --display: "Space Grotesk", var(--font); --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --shadow-card: 0 1px 2px rgba(0, 0, 0, .4); --shadow-lift: 0 16px 40px -12px rgba(0, 0, 0, .65); --shadow-terminal: 0 0 0 1px rgba(255, 255, 255, .04), 0 32px 80px -20px rgba(0, 0, 0, .85), 0 8px 24px -8px rgba(0, 0, 0, .6); --max: 1200px; --nav-h: 64px; --ease: cubic-bezier(.22, 1, .36, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --ease-cine: cubic-bezier(.83, 0, .17, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-padding-top: calc(var(--nav-h) + 24px); } html.no-lenis { scroll-behavior: smooth; } body { font-family: var(--font); background: var(--bg); color: var(--text-2); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } ::selection { background: rgba(34, 197, 94, .3); color: var(--text); } img, svg { display: inline-block; vertical-align: middle; } h1, h2, h3, h4 { color: var(--text); letter-spacing: -0.025em; line-height: 1.2; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } code { font-family: var(--mono); font-size: .875em; background: var(--card); border: 1px solid var(--border); padding: .1em .4em; border-radius: 6px; color: var(--text-2); } .container { max-width: var(--max); margin: 0 auto; padding: 0 32px; } .container-narrow { max-width: 800px; } .container-wide { max-width: 1400px; } .visually-hidden { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .skip-link { position: absolute; left: 16px; top: -48px; z-index: 400; background: var(--accent); color: #052E16; font-weight: 600; padding: 10px 18px; border-radius: 0 0 10px 10px; transition: top .2s var(--ease); } .skip-link:focus { top: 0; text-decoration: none; } /* ============================================================ Splash screen — premium app launch (home, once per session, plays before the intro boot sequence). Animations are pure CSS and start at first paint; an inline script tags with .sc-seen on repeat visits so neither splash nor intro ever flashes again. A trimmed copy of these rules is inlined in index.html's head for instant paint — keep in sync (scripts/build-pages.py is the source of truth). ============================================================ */ html.sc-seen .splash, html.sc-seen .intro { display: none; } .splash { position: fixed; inset: 0; z-index: 520; background: var(--bg); display: flex; align-items: center; justify-content: center; transition: opacity .6s var(--ease-cine), visibility .6s, filter .6s var(--ease-cine); } .splash.done { opacity: 0; visibility: hidden; pointer-events: none; filter: blur(10px); } .splash-stage { position: relative; text-align: center; } /* soft green ambient glow behind the logo */ .splash-glow { position: absolute; top: 56px; left: 50%; width: 340px; height: 340px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(34, 197, 94, .16) 0%, rgba(34, 197, 94, .05) 45%, transparent 70%); filter: blur(24px); animation: splash-fade .9s var(--ease) .1s both; } .splash-logo { position: relative; width: 112px; height: 112px; border-radius: 26px; filter: drop-shadow(0 0 40px rgba(34, 197, 94, .35)); animation: splash-logo-in .65s var(--ease) both, splash-float 3s ease-in-out .7s infinite; } @keyframes splash-logo-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } } @keyframes splash-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes splash-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes splash-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .splash-name { font-family: var(--display); font-size: 1.55rem; font-weight: 700; color: var(--text); letter-spacing: -.02em; margin-top: 24px; animation: splash-rise .55s var(--ease) .15s both; } .splash-tag { font-family: var(--mono); font-size: .82rem; color: var(--muted); margin-top: 8px; letter-spacing: .02em; animation: splash-rise .55s var(--ease) .25s both; } .splash-status { display: inline-flex; align-items: center; gap: 9px; margin-top: 30px; min-height: 1.4em; font-family: var(--mono); font-size: .74rem; color: var(--muted); animation: splash-fade .5s var(--ease) .35s both; } .splash-spinner { width: 11px; height: 11px; border-radius: 50%; flex: none; border: 1.5px solid var(--border-strong); border-top-color: var(--accent); animation: splash-spin .8s linear infinite; } @keyframes splash-spin { to { transform: rotate(360deg); } } .splash-status-text { transition: opacity .25s var(--ease); } /* ============================================================ Intro sequence — AI boot (home, once per session) ============================================================ */ .intro { position: fixed; inset: 0; z-index: 500; background: #000; display: flex; align-items: center; justify-content: center; transition: opacity .9s var(--ease-cine), visibility .9s, transform .9s var(--ease-cine); } .intro.done { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(1.12); } .intro-stage { text-align: center; width: min(480px, 86vw); } .intro-logo { width: 92px; height: 92px; border-radius: 22px; opacity: 0; transform: scale(.55) rotate(-6deg); position: relative; } .intro.s1 .intro-logo { opacity: 1; transform: scale(1) rotate(0); filter: drop-shadow(0 0 52px rgba(34, 197, 94, .6)); transition: opacity .7s var(--ease), transform .9s var(--ease-spring), filter 1.3s var(--ease); } /* metallic light sweep across the logo */ .intro-logo-wrap { position: relative; display: inline-block; overflow: hidden; border-radius: 22px; } .intro-logo-wrap::after { content: ""; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 42%, rgba(250, 250, 250, .5) 50%, transparent 58%); transform: translateX(-120%); opacity: 0; } .intro.s1 .intro-logo-wrap::after { opacity: 1; animation: logo-sheen 1.1s var(--ease-cine) .45s; } @keyframes logo-sheen { from { transform: translateX(-120%); } to { transform: translateX(120%); } } .intro-name { font-family: var(--display); font-size: 1.7rem; font-weight: 700; color: var(--text); letter-spacing: -.02em; margin-top: 22px; min-height: 1.4em; opacity: 0; } .intro.s2 .intro-name { opacity: 1; transition: opacity .3s; } .intro-name .logo-cli { color: var(--accent); } .intro-name .t-cursor-i { display: inline-block; width: 10px; height: 1em; background: var(--accent); vertical-align: baseline; margin-left: 4px; animation: blink 1s steps(1) infinite; box-shadow: 0 0 10px rgba(34, 197, 94, .7); } /* boot log — diagnostics lines */ .intro-boot { font-family: var(--mono); font-size: .78rem; text-align: left; margin: 22px auto 0; min-height: 7.2em; line-height: 1.8; color: var(--muted); opacity: 0; } .intro.s3 .intro-boot { opacity: 1; transition: opacity .3s; } .intro-boot .ok { color: var(--accent); font-weight: 700; } .intro-boot .dim { color: #52525B; } .intro-progress { display: flex; align-items: center; gap: 14px; margin-top: 20px; opacity: 0; } .intro.s3 .intro-progress { opacity: 1; transition: opacity .3s; } .intro-progress-bar { flex: 1; height: 2px; background: var(--border); border-radius: 2px; overflow: hidden; } .intro-progress-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-hover)); box-shadow: 0 0 12px rgba(34, 197, 94, .8); transition: width .3s var(--ease); } .intro-progress-pct { font-family: var(--mono); font-size: .75rem; color: var(--accent); min-width: 4ch; text-align: right; } /* glitch burst right before reveal */ .intro.glitch .intro-stage { animation: intro-glitch .38s steps(2) both; } @keyframes intro-glitch { 0% { transform: translate(0); filter: none; } 25% { transform: translate(-6px, 2px) skewX(-2deg); filter: hue-rotate(40deg) contrast(1.6); } 50% { transform: translate(5px, -3px) skewX(2deg); filter: invert(.08) contrast(1.4); } 75% { transform: translate(-3px, 1px); filter: hue-rotate(-30deg); } 100% { transform: translate(0); filter: none; } } .intro.glitch::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(34, 197, 94, .06) 3px 4px); animation: scanline-jump .38s steps(3) both; } @keyframes scanline-jump { 0% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-8px); opacity: .6; } 100% { transform: translateY(4px); opacity: 0; } } .intro-skip { position: absolute; bottom: 34px; right: 40px; font-family: var(--mono); font-size: .78rem; color: var(--muted); background: none; border: 1px solid var(--border); border-radius: 100px; padding: 8px 18px; cursor: pointer; transition: color .2s, border-color .2s; } .intro-skip:hover { color: var(--text); border-color: var(--border-strong); } .intro-skip kbd { font-family: inherit; color: var(--accent); } /* UI builds itself: hero children cascade in after intro */ .cinema-in { animation: cinema-in 1.1s var(--ease-cine) both; } @keyframes cinema-in { from { opacity: 0; transform: scale(1.07); filter: blur(8px); } to { opacity: 1; transform: scale(1); filter: blur(0); } } .build-in > * { opacity: 0; transform: translateY(30px); } .build-in.built > * { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); } .build-in.built > *:nth-child(2) { transition-delay: .1s; } .build-in.built > *:nth-child(3) { transition-delay: .2s; } .build-in.built > *:nth-child(4) { transition-delay: .3s; } .build-in.built > *:nth-child(5) { transition-delay: .4s; } /* ============================================================ Page transitions — overlay wipes, per-page variants ============================================================ */ .pt-overlay { position: fixed; inset: 0; z-index: 450; pointer-events: none; visibility: hidden; } .pt-overlay .pt-a, .pt-overlay .pt-b { position: absolute; inset: 0; transform: translateY(101%); } .pt-overlay .pt-a { background: var(--accent); } .pt-overlay .pt-b { background: #050506; } /* leaving: panels sweep in (stagger) */ .pt-overlay.leave { visibility: visible; } .pt-overlay.leave .pt-a { animation: pt-in .5s var(--ease-cine) both; } .pt-overlay.leave .pt-b { animation: pt-in .5s var(--ease-cine) .09s both; } @keyframes pt-in { from { transform: translateY(101%); } to { transform: translateY(0); } } /* entering: panels sweep out revealing the page */ .pt-overlay.enter { visibility: visible; } .pt-overlay.enter .pt-a { transform: translateY(0); animation: pt-out .6s var(--ease-cine) .12s both; } .pt-overlay.enter .pt-b { transform: translateY(0); animation: pt-out .6s var(--ease-cine) both; } @keyframes pt-out { from { transform: translateY(0); } to { transform: translateY(-101%); } } /* variants by direction — set on body[data-transition] */ body[data-transition="slide"] .pt-overlay .pt-a, body[data-transition="slide"] .pt-overlay .pt-b { transform: translateX(-101%); } body[data-transition="slide"] .pt-overlay.leave .pt-a { animation-name: pt-in-x; } body[data-transition="slide"] .pt-overlay.leave .pt-b { animation-name: pt-in-x; } body[data-transition="slide"] .pt-overlay.enter .pt-a, body[data-transition="slide"] .pt-overlay.enter .pt-b { transform: translateX(0); animation-name: pt-out-x; } @keyframes pt-in-x { from { transform: translateX(-101%); } to { transform: translateX(0); } } @keyframes pt-out-x { from { transform: translateX(0); } to { transform: translateX(101%); } } /* circle mask variant */ body[data-transition="circle"] .pt-overlay .pt-a, body[data-transition="circle"] .pt-overlay .pt-b { transform: none; clip-path: circle(0% at 50% 50%); } body[data-transition="circle"] .pt-overlay.leave .pt-a { animation-name: pt-in-c; } body[data-transition="circle"] .pt-overlay.leave .pt-b { animation-name: pt-in-c; } body[data-transition="circle"] .pt-overlay.enter .pt-a, body[data-transition="circle"] .pt-overlay.enter .pt-b { clip-path: circle(150% at 50% 50%); animation-name: pt-out-c; } @keyframes pt-in-c { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(150% at 50% 50%); } } @keyframes pt-out-c { from { clip-path: circle(150% at 50% 50%); } to { clip-path: circle(0% at 50% 50%); } } /* page content enter — each page picks a flavour via data-enter */ .page-enter { animation: page-fade .8s var(--ease-cine) both; } body[data-enter="up"] .page-enter { animation-name: page-up; } body[data-enter="zoom"] .page-enter { animation-name: page-zoom; } body[data-enter="blur"] .page-enter { animation-name: page-blur; } @keyframes page-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes page-up { from { opacity: 0; transform: translateY(42px); } to { opacity: 1; transform: none; } } @keyframes page-zoom { from { opacity: 0; transform: scale(.965); } to { opacity: 1; transform: none; } } @keyframes page-blur { from { opacity: 0; filter: blur(14px); } to { opacity: 1; filter: blur(0); } } /* ============================================================ Scroll progress + custom cursor glow ============================================================ */ .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 300; background: linear-gradient(90deg, var(--accent), var(--accent-hover)); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; } /* ============================================================ Layered background — quiet, atmospheric, never competing with content. Subtle grid + soft radial light + vignette. ============================================================ */ .bg-layers { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--bg); overflow: hidden; } /* very subtle static terminal grid, fading out below the fold */ .bg-layers::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 100% 60% at 50% 0%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 100% 60% at 50% 0%, #000 30%, transparent 75%); } /* soft radial green light from the top + gentle vignette */ .bg-layers::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 42% at 50% -8%, rgba(34, 197, 94, .08), transparent 68%), radial-gradient(ellipse 90% 55% at 50% -10%, rgba(250, 250, 250, .04), transparent 65%), radial-gradient(ellipse 120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, .35) 100%), linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, .2) 100%); } /* soft ambient light that follows the pointer (desktop) */ .bg-spotlight { position: absolute; top: 0; left: 0; width: 760px; height: 760px; border-radius: 50%; background: radial-gradient(circle, rgba(34, 197, 94, .05) 0%, rgba(250, 250, 250, .02) 35%, transparent 70%); will-change: transform; } /* custom cursor glow ring (desktop, fine pointer) */ .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 460; pointer-events: none; border-radius: 50%; will-change: transform; } .cursor-dot { width: 6px; height: 6px; background: var(--accent); box-shadow: 0 0 10px rgba(34, 197, 94, .8); } .cursor-ring { width: 34px; height: 34px; border: 1.5px solid rgba(34, 197, 94, .45); transition: width .25s var(--ease), height .25s var(--ease), border-color .25s; } .cursor-ring.hovering { width: 52px; height: 52px; border-color: rgba(34, 197, 94, .85); } body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; } /* low-opacity film grain */ .bg-noise { position: absolute; inset: 0; opacity: .35; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E"); } /* ============================================================ Navbar ============================================================ */ .nav-wrap { position: sticky; top: 0; z-index: 200; background: rgba(9, 9, 11, .6); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid transparent; transition: background .3s var(--ease), border-color .3s var(--ease); } .nav-wrap.scrolled { background: rgba(9, 9, 11, .84); border-bottom-color: rgba(39, 39, 42, .8); } .nav { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); } .logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 1.02rem; color: var(--text); letter-spacing: -0.02em; } .logo:hover { text-decoration: none; } .logo-img { width: 26px; height: 26px; border-radius: 6px; } .logo-cli { color: var(--accent); } .nav-links { display: flex; align-items: center; gap: 2px; list-style: none; } .nav-links a:not(.btn) { color: var(--muted); font-weight: 500; font-size: .86rem; padding: 8px 11px; border-radius: var(--radius-sm); transition: color .15s var(--ease), background .15s var(--ease); } .nav-links a:not(.btn):hover { color: var(--text); background: rgba(250, 250, 250, .05); text-decoration: none; } .nav-links a.nav-active { color: var(--accent); } .nav-links li:last-child { margin-left: 8px; } /* glowing NEW badge in nav */ .badge-new { display: inline-block; vertical-align: middle; font-size: .58rem; font-weight: 800; letter-spacing: .08em; color: #052E16; background: var(--accent); border-radius: 100px; padding: 1px 7px; margin-left: 5px; animation: new-glow 2s ease-in-out infinite; } @keyframes new-glow { 0%, 100% { box-shadow: 0 0 4px rgba(34, 197, 94, .5); } 50% { box-shadow: 0 0 14px rgba(34, 197, 94, .95); } } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 10px; } .nav-toggle span { width: 20px; height: 1.5px; background: var(--text); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ============================================================ Buttons ============================================================ */ .btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border-radius: var(--radius-sm); font-family: var(--font); font-weight: 600; font-size: .9rem; line-height: 1.4; cursor: pointer; white-space: nowrap; border: 1px solid transparent; transition: background .15s var(--ease), border-color .15s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease-spring), color .15s var(--ease); will-change: transform; } .btn:hover { text-decoration: none; } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn svg { flex: none; width: 16px; height: 16px; } .btn-primary { background: var(--accent); color: #052E16; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 1px 2px rgba(0, 0, 0, .5); } .btn-primary:hover { background: var(--accent-hover); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 32px rgba(34, 197, 94, .45); } .btn-secondary { background: rgba(250, 250, 250, .04); color: var(--text); border-color: var(--border-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); } .btn-secondary:hover { background: rgba(250, 250, 250, .08); border-color: #52525B; } .btn-outline { color: var(--text) !important; border-color: var(--border-strong); background: transparent; padding: 7px 14px; font-size: .85rem; } .btn-outline:hover { border-color: #52525B; background: rgba(250, 250, 250, .05); text-decoration: none; } .btn-lg { padding: 13px 26px; font-size: .95rem; border-radius: 10px; } .btn-block { width: 100%; } .ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .18; transform: scale(0); animation: ripple .6s var(--ease) forwards; } @keyframes ripple { to { transform: scale(1); opacity: 0; } } .mega-badge { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; flex: none; background: #D9272E; color: #FAFAFA; font-size: .68rem; font-weight: 800; line-height: 1; } /* ============================================================ Page hero (interior pages) ============================================================ */ .page-hero { padding: 108px 0 64px; text-align: center; position: relative; } .page-hero .eyebrow { margin-bottom: 18px; } .page-hero h1 { font-family: var(--display); font-size: clamp(2.6rem, 5.4vw, 4rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.05; margin-bottom: 20px; } .page-hero p { color: var(--muted); font-size: 1.12rem; max-width: 40rem; margin: 0 auto; } .page-hero .hero-actions { justify-content: center; margin-top: 32px; } /* ============================================================ Home hero ============================================================ */ .hero { position: relative; padding: 96px 0 88px; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 64px; align-items: center; } .hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; } .badge { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 600; color: var(--text-2); background: rgba(250, 250, 250, .04); border: 1px solid var(--border); padding: 5px 12px; border-radius: 100px; } .badge-accent { color: var(--accent); border-color: var(--accent-border); background: var(--accent-dim); } .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse-dot 2.2s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); } 50% { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); } } .hero h1 { font-family: var(--display); font-size: clamp(2.8rem, 5.8vw, 4.6rem); font-weight: 700; line-height: 1.04; letter-spacing: -0.04em; margin-bottom: 24px; } .accent-word { color: var(--accent); text-shadow: 0 0 48px rgba(34, 197, 94, .4); } .words .w { display: inline-block; opacity: 0; transform: translateY(26px) rotate(2deg); transition: opacity .7s var(--ease), transform .7s var(--ease); } .words.visible .w { opacity: 1; transform: none; } .hero-sub { font-size: 1.125rem; line-height: 1.75; color: var(--muted); max-width: 33rem; margin-bottom: 32px; } .hero-sub strong { color: var(--text-2); font-weight: 600; } .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; } .install-card { display: inline-flex; align-items: center; gap: 16px; background: var(--term-bg); border: 1px solid var(--term-border); border-radius: 10px; padding: 12px 14px 12px 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 4px 16px rgba(0, 0, 0, .35); font-family: var(--mono); transition: border-color .25s var(--ease), box-shadow .25s var(--ease); } .install-card:hover { border-color: var(--accent-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 4px 24px rgba(34, 197, 94, .12); } .install-card code { background: none; border: 0; padding: 0; font-size: .9rem; color: var(--text); } .install-card code::before { content: "$ "; color: var(--accent); font-weight: 700; } .copy-btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font); font-size: .75rem; font-weight: 600; color: var(--muted); background: rgba(250, 250, 250, .05); border: 1px solid var(--border-strong); border-radius: 6px; padding: 5px 10px; cursor: pointer; flex: none; transition: color .15s, border-color .15s, background .15s, transform .15s var(--ease-spring); } .copy-btn:hover { color: var(--text); border-color: #52525B; background: rgba(250, 250, 250, .09); } .copy-btn:active { transform: scale(.94); } .copy-btn.copied { color: var(--accent); border-color: var(--accent-border); background: var(--accent-dim); } .copy-btn .icon-check { display: none; } .copy-btn.copied .icon-check { display: inline; } .copy-btn.copied .icon-copy { display: none; } .copy-btn svg { width: 13px; height: 13px; } /* ============================================================ Terminal ============================================================ */ .terminal-frame { position: relative; } .terminal-frame::before { content: ""; position: absolute; inset: -10%; background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(34, 197, 94, .12), transparent 70%); z-index: -1; filter: blur(28px); animation: term-glow 5s ease-in-out infinite alternate; } @keyframes term-glow { from { opacity: .7; } to { opacity: 1; } } .terminal { background: rgba(12, 12, 13, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--term-border); border-radius: var(--radius); box-shadow: var(--shadow-terminal); overflow: hidden; font-family: var(--mono); font-size: .82rem; } .terminal-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: linear-gradient(180deg, #17171A, #101013); padding: 10px 14px; border-bottom: 1px solid var(--term-border); } .terminal-dots { display: flex; gap: 8px; } .dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 -1px 1px rgba(0, 0, 0, .25); } .dot-red { background: #FF5F57; } .dot-yellow { background: #FEBC2E; } .dot-green { background: #28C840; } .terminal-title { color: var(--muted); font-size: .72rem; font-family: var(--font); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; } .terminal-body { padding: 20px 22px; line-height: 1.85; height: 320px; overflow: hidden; } .t-line { white-space: pre-wrap; word-break: break-word; min-height: 1.5em; } .t-prompt { color: var(--accent); font-weight: 700; } .t-cmd { color: var(--text); } .t-dim { color: #6B7280; } .t-label { color: var(--muted); } .t-value { color: var(--text-2); } .t-ok { color: var(--accent); font-weight: 700; } .t-you { color: var(--warning); font-weight: 700; } .t-bot-tag { color: var(--accent); font-weight: 700; } .t-resp { color: var(--text-2); } .t-cursor { display: inline-block; width: 8px; height: 1.05em; background: var(--accent); vertical-align: text-bottom; animation: blink 1.1s steps(1) infinite; box-shadow: 0 0 8px rgba(34, 197, 94, .6); } @keyframes blink { 50% { opacity: 0; } } .term-chips { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; } .term-chip { font-family: var(--mono); font-size: .75rem; font-weight: 500; color: var(--muted); background: rgba(250, 250, 250, .04); border: 1px solid var(--border); border-radius: 100px; padding: 6px 14px; cursor: pointer; transition: color .15s, border-color .15s, background .15s, transform .2s var(--ease-spring); } .term-chip:hover { color: var(--text); border-color: var(--border-strong); transform: translateY(-1px); } .term-chip.active { color: var(--accent); border-color: var(--accent-border); background: var(--accent-dim); } /* mini terminals (gallery, docs) */ .terminal-mini { background: var(--term-bg); border: 1px solid var(--term-border); border-radius: var(--radius-sm); overflow: hidden; font-family: var(--mono); font-size: .78rem; margin-bottom: 16px; } .terminal-mini .terminal-bar { padding: 8px 12px; } .terminal-mini .dot { width: 9px; height: 9px; } .terminal-mini-body { padding: 14px 16px; line-height: 1.8; } /* ============================================================ Sections ============================================================ */ .section { padding: 104px 0; } .section-tight { padding: 72px 0; } .section-head { max-width: 640px; margin: 0 auto 64px; text-align: center; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; } .eyebrow::before, .eyebrow::after { content: ""; width: 20px; height: 1px; background: var(--accent-border); } .section-head h2 { font-family: var(--display); font-size: clamp(1.9rem, 3.6vw, 2.6rem); font-weight: 700; margin-bottom: 16px; } .section-head p { color: var(--muted); font-size: 1.05rem; } /* ============================================================ Stats ============================================================ */ .stats { border-block: 1px solid var(--border); background: rgba(24, 24, 27, .35); } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); padding: 48px 0; } .stat { text-align: center; padding: 8px 16px; border-left: 1px solid var(--border); } .stat:first-child { border-left: 0; } .stat-num { display: block; font-family: var(--display); font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 700; letter-spacing: -0.03em; color: var(--text); font-variant-numeric: tabular-nums; } .stat-num .stat-suffix { color: var(--accent); } .stat-label { font-size: .85rem; color: var(--muted); font-weight: 500; margin-top: 4px; display: block; } /* ============================================================ Cards — features, downloads, generic ============================================================ */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .feature-grid-2 { grid-template-columns: repeat(2, 1fr); } .feature-card { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 26px; box-shadow: var(--shadow-card); transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); overflow: hidden; will-change: transform; } .feature-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(34, 197, 94, .07), transparent 65%); opacity: 0; transition: opacity .3s var(--ease); } .feature-card:hover::after { opacity: 1; } .feature-card::before { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgba(250, 250, 250, .14), transparent); opacity: 0; transition: opacity .25s var(--ease); } .feature-card:hover { background: var(--card-hover); border-color: var(--border-strong); box-shadow: var(--shadow-lift); } .feature-card:hover::before { opacity: 1; } .feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: var(--accent-dim); border: 1px solid var(--accent-border); color: var(--accent); margin-bottom: 20px; transition: transform .3s var(--ease-spring), box-shadow .3s var(--ease); } .feature-card:hover .feature-icon { transform: scale(1.08) rotate(-3deg); box-shadow: 0 0 24px rgba(34, 197, 94, .25); } .feature-icon svg { width: 20px; height: 20px; } .feature-card h3 { font-size: 1.05rem; font-weight: 650; margin-bottom: 10px; } .feature-card p { color: var(--muted); font-size: .92rem; line-height: 1.7; } .download-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .dl-card { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-card); transition: border-color .25s var(--ease), box-shadow .25s var(--ease); overflow: hidden; will-change: transform; } .dl-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(250, 250, 250, .05), transparent 65%); opacity: 0; transition: opacity .3s var(--ease); } .dl-card:hover::after { opacity: 1; } .dl-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-lift); } .dl-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: rgba(250, 250, 250, .05); border: 1px solid var(--border); color: var(--text-2); transition: transform .3s var(--ease-spring); } .dl-card:hover .dl-icon { transform: scale(1.08); } .dl-icon svg { width: 20px; height: 20px; } .dl-card h3 { font-size: 1.02rem; font-weight: 650; } .dl-card > p { color: var(--muted); font-size: .85rem; flex-grow: 1; line-height: 1.65; } .dl-meta { color: var(--muted); font-size: .75rem; } .dl-card-accent { border-color: var(--accent-border); } .dl-card-accent::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(34, 197, 94, .06), transparent 55%); } .dl-card-accent .dl-icon { background: var(--accent-dim); border-color: var(--accent-border); color: var(--accent); } .dl-card-accent:hover { border-color: var(--accent); } .dl-tag { position: absolute; top: 18px; right: 18px; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); background: var(--accent-dim); border: 1px solid var(--accent-border); padding: 3px 9px; border-radius: 100px; } .dl-footnote { text-align: center; color: var(--muted); font-size: .88rem; margin-top: 40px; } /* ============================================================ Quick start ============================================================ */ .quickstart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } .qs-step { display: flex; gap: 18px; margin-bottom: 32px; position: relative; } .qs-step:last-child { margin-bottom: 0; } .qs-step:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 40px; bottom: -24px; width: 1px; background: var(--border); } .qs-num { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--card); border: 1px solid var(--accent-border); color: var(--accent); font-weight: 700; font-size: .85rem; display: flex; align-items: center; justify-content: center; margin-top: 2px; position: relative; z-index: 1; } .qs-step h3 { font-size: 1rem; font-weight: 650; margin-bottom: 10px; } .qs-note { color: var(--muted); font-size: .85rem; margin-top: 10px; } .qs-body { min-width: 0; flex: 1; } .code-block { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--term-bg); border: 1px solid var(--term-border); border-radius: var(--radius-sm); padding: 11px 14px; font-family: var(--mono); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03); transition: border-color .25s var(--ease); } .code-block:hover { border-color: var(--border-strong); } .code-block code { background: none; border: 0; padding: 0; color: var(--text); font-size: .85rem; overflow-x: auto; } .code-block code::before { content: "$ "; color: var(--accent); font-weight: 700; } .code-block-sm { margin-top: 14px; } .cmd-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px 26px 22px; box-shadow: var(--shadow-card); } .cmd-panel h3 { font-size: 1rem; font-weight: 650; margin-bottom: 16px; } .cmd-table { width: 100%; border-collapse: collapse; font-size: .85rem; } .cmd-table td { padding: 10px 6px; border-bottom: 1px solid var(--border); vertical-align: top; } .cmd-table tr:last-child td { border-bottom: 0; } .cmd-table td:first-child { white-space: nowrap; padding-right: 18px; } .cmd-table td:first-child code { color: var(--accent); background: rgba(34, 197, 94, .07); border-color: transparent; } .cmd-table td:last-child { color: var(--muted); } .link-arrow { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-weight: 600; font-size: .9rem; transition: gap .2s var(--ease); } .link-arrow:hover { gap: 9px; text-decoration: none; } /* ============================================================ Gallery ============================================================ */ .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .screen-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 18px 22px; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); will-change: transform; } .screen-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-lift); } .screen-card h3 { font-size: 1rem; font-weight: 650; margin: 4px 0 6px; } .screen-card p { color: var(--muted); font-size: .88rem; } /* ============================================================ Timeline (changelog / roadmap) ============================================================ */ .timeline { position: relative; max-width: 720px; margin: 0 auto; padding-left: 36px; } .timeline::before { content: ""; position: absolute; left: 10px; top: 6px; bottom: 6px; width: 1px; background: var(--border); } .timeline-item { position: relative; margin-bottom: 44px; } .timeline-item::before { content: ""; position: absolute; left: -31.5px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--card); border: 2px solid var(--border-strong); } .timeline-item.is-current::before { border-color: var(--accent); background: var(--accent-dim); box-shadow: 0 0 12px rgba(34, 197, 94, .5); } .timeline-item h3 { font-size: 1.1rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .timeline-item p { color: var(--muted); font-size: .93rem; } .timeline-item ul { color: var(--muted); font-size: .93rem; margin: 8px 0 0 20px; } .timeline-item li { margin-bottom: 4px; } .timeline-heading { font-family: var(--display); font-size: 1.3rem; margin: 52px 0 28px; } .timeline-heading:first-child { margin-top: 0; } .tag { font-size: .68rem; font-weight: 700; padding: 2px 10px; border-radius: 100px; letter-spacing: .03em; } .tag-latest { background: var(--accent-dim); color: var(--accent); border: 1px solid var(--accent-border); } .tag-soon { background: rgba(250, 250, 250, .05); color: var(--muted); border: 1px solid var(--border); } .changelog-date { color: var(--muted); font-size: .8rem; font-weight: 400; } /* ============================================================ FAQ accordion ============================================================ */ .faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 760px; margin: 0 auto; } .faq-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color .2s var(--ease); } .faq-item[open] { border-color: var(--border-strong); } .faq-item summary { cursor: pointer; padding: 18px 52px 18px 22px; font-weight: 600; color: var(--text); font-size: .95rem; list-style: none; position: relative; transition: color .15s; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease), border-color .2s; } .faq-item[open] summary::after { transform: translateY(-30%) rotate(225deg); border-color: var(--accent); } .faq-item summary:hover { color: var(--accent); } .faq-item p { padding: 0 22px 20px; color: var(--muted); font-size: .92rem; line-height: 1.7; } /* ============================================================ Portfolio ============================================================ */ .pf-hero { padding: 116px 0 72px; text-align: center; } .pf-avatar { width: 108px; height: 108px; border-radius: 50%; background: var(--accent-dim); border: 1px solid var(--accent-border); display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 2.2rem; font-weight: 700; color: var(--accent); margin-bottom: 26px; box-shadow: 0 0 48px rgba(34, 197, 94, .25); } .pf-hero h1 { font-family: var(--display); font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 700; letter-spacing: -.04em; margin-bottom: 12px; } .pf-role { color: var(--accent); font-family: var(--mono); font-size: .95rem; margin-bottom: 20px; display: block; } .pf-hero p { color: var(--muted); max-width: 36rem; margin: 0 auto 30px; font-size: 1.08rem; } .pf-links { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .pf-skills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 700px; margin: 0 auto; } .pf-skill { font-family: var(--mono); font-size: .82rem; color: var(--text-2); background: var(--card); border: 1px solid var(--border); padding: 8px 16px; border-radius: 100px; transition: border-color .2s, color .2s, transform .2s var(--ease-spring); } .pf-skill:hover { border-color: var(--accent-border); color: var(--accent); transform: translateY(-2px); } .pf-exp { max-width: 720px; margin: 0 auto; } /* ============================================================ Prose pages (privacy, terms, support, about) ============================================================ */ .prose { max-width: 760px; margin: 0 auto; padding-bottom: 104px; } .prose h2 { font-family: var(--display); font-size: 1.4rem; margin: 44px 0 14px; } .prose p, .prose li { color: var(--muted); } .prose ul { margin: 0 0 16px 22px; } .prose li { margin-bottom: 6px; } .prose li strong, .prose p strong { color: var(--text-2); } .prose .callout { margin-top: 24px; } .callout { border: 1px solid var(--accent-border); background: var(--accent-dim); border-radius: var(--radius-sm); padding: 14px 18px; margin-bottom: 18px; font-size: .9rem; color: var(--text-2); } .callout strong { color: var(--accent); } /* ============================================================ Docs ============================================================ */ .docs-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 56px; padding: 56px 0 112px; align-items: start; } .docs-sidebar { position: sticky; top: calc(var(--nav-h) + 32px); display: flex; flex-direction: column; } .docs-sidebar h4 { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 20px 0 8px; padding-left: 12px; } .docs-sidebar h4:first-child { margin-top: 0; } .docs-sidebar a { color: var(--muted); font-size: .875rem; font-weight: 500; padding: 6px 12px; border-radius: var(--radius-sm); border-left: 2px solid transparent; transition: color .15s, background .15s; } .docs-sidebar a:hover { color: var(--text); background: rgba(250, 250, 250, .04); text-decoration: none; } .docs-sidebar a.active { color: var(--accent); background: var(--accent-dim); border-left-color: var(--accent); } .docs-content h1 { font-family: var(--display); font-size: 2.25rem; font-weight: 700; margin-bottom: 12px; } .docs-content .lead { color: var(--muted); font-size: 1.08rem; margin-bottom: 48px; } .docs-content section { margin-bottom: 64px; scroll-margin-top: calc(var(--nav-h) + 32px); } .docs-content h2 { font-family: var(--display); font-size: 1.5rem; font-weight: 700; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .docs-content h3 { font-size: 1.05rem; font-weight: 650; margin: 28px 0 12px; } .docs-content p { color: var(--muted); margin-bottom: 14px; } .docs-content ul, .docs-content ol { color: var(--muted); margin: 0 0 16px 22px; } .docs-content li { margin-bottom: 6px; } .docs-content li strong { color: var(--text-2); } .docs-content pre, .prose pre { background: var(--term-bg); border: 1px solid var(--term-border); border-radius: var(--radius-sm); padding: 16px 20px; overflow-x: auto; margin-bottom: 18px; font-family: var(--mono); font-size: .84rem; line-height: 1.8; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03); } .docs-content pre code, .prose pre code { background: none; border: 0; padding: 0; color: var(--text-2); } .pre-comment { color: #6B7280; } .pre-accent { color: var(--accent); font-weight: 700; } .docs-table { width: 100%; border-collapse: collapse; font-size: .875rem; margin-bottom: 20px; } .docs-table th { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-strong); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .docs-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--muted); } .docs-table td:first-child { white-space: nowrap; } .docs-table td code { color: var(--accent); background: rgba(34, 197, 94, .07); border-color: transparent; } /* ============================================================ 404 ============================================================ */ .page-404 { min-height: calc(100vh - var(--nav-h)); display: flex; align-items: center; justify-content: center; text-align: center; padding: 64px 24px; } .page-404 .code-glitch { font-family: var(--mono); font-size: clamp(5rem, 14vw, 9rem); font-weight: 700; color: var(--accent); text-shadow: 0 0 64px rgba(34, 197, 94, .5); letter-spacing: -.05em; line-height: 1; animation: glitch-flicker 3.2s steps(1) infinite; } @keyframes glitch-flicker { 0%, 92%, 96%, 100% { opacity: 1; } 93%, 95% { opacity: .55; } 94% { opacity: .85; transform: translateX(2px); } } .page-404 h1 { font-family: var(--display); font-size: 1.6rem; margin: 18px 0 10px; } .page-404 p { color: var(--muted); margin-bottom: 26px; } /* ============================================================ CLI Simulator integration — banner, feature card, strips, FAB ============================================================ */ .term-continue { margin-top: 14px; } .terminal-body-sm { height: 240px; font-size: .76rem; } .sim-banner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; background: var(--card); border: 1px solid var(--accent-border); border-radius: 20px; padding: 56px; overflow: hidden; position: relative; } .sim-banner::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 55% 80% at 18% 20%, rgba(34, 197, 94, .1), transparent 65%); } .sim-banner-copy { position: relative; } .sim-banner h2 { font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700; margin-bottom: 20px; } .sim-points { list-style: none; margin: 0 0 26px; } .sim-points li { color: var(--text-2); font-size: 1.02rem; margin-bottom: 8px; } .sim-points .c-ok { color: var(--accent); font-weight: 700; margin-right: 8px; } .sim-banner-term { position: relative; } .sim-feature { display: flex; align-items: center; justify-content: space-between; gap: 40px; background: var(--card); border: 1px solid var(--accent-border); border-radius: var(--radius-lg); padding: 40px 44px; position: relative; overflow: hidden; will-change: transform; } .sim-feature::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, rgba(34, 197, 94, .08), transparent 55%); } .sim-feature h2 { font-family: var(--display); font-size: 1.5rem; margin: 10px 0 12px; } .sim-feature p { color: var(--muted); max-width: 36rem; } .sim-feature .btn { flex: none; position: relative; } .sim-strip { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: var(--accent-dim); border: 1px solid var(--accent-border); border-radius: var(--radius); padding: 18px 26px; margin-bottom: 32px; } .sim-strip p { color: var(--text-2); margin: 0; } .sim-strip strong { color: var(--text); } .sim-strip-docs { margin-bottom: 48px; } /* floating action button */ .cli-fab { position: fixed; right: 28px; bottom: 28px; z-index: 350; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .82rem; font-weight: 600; color: #052E16; background: var(--accent); padding: 12px 20px; border-radius: 100px; box-shadow: 0 4px 20px rgba(0, 0, 0, .5), 0 0 24px rgba(34, 197, 94, .35); transition: transform .25s var(--ease-spring), box-shadow .25s var(--ease); } .cli-fab:hover { text-decoration: none; transform: translateY(-3px) scale(1.04); box-shadow: 0 8px 28px rgba(0, 0, 0, .55), 0 0 36px rgba(34, 197, 94, .55); } .cli-fab-icon { font-size: 1rem; } .footer-sim-link { color: var(--accent) !important; font-weight: 600; } /* ============================================================ CTA band ============================================================ */ .cta { position: relative; text-align: center; background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 72px 32px; overflow: hidden; } .cta::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(34, 197, 94, .1), transparent 65%); } .cta::after { content: ""; position: absolute; top: 0; left: 20%; right: 20%; height: 1px; background: linear-gradient(90deg, transparent, rgba(34, 197, 94, .5), transparent); } .cta h2 { font-family: var(--display); font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 700; margin-bottom: 14px; position: relative; } .cta p { color: var(--muted); margin-bottom: 32px; font-size: 1.05rem; position: relative; } .cta .hero-actions { justify-content: center; margin-bottom: 0; position: relative; } /* ============================================================ Footer ============================================================ */ .footer { border-top: 1px solid var(--border); background: rgba(17, 24, 39, .25); padding: 64px 0 0; } .footer-grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; } .footer-tag { color: var(--muted); font-size: .88rem; margin-top: 14px; max-width: 26rem; } .footer-credit { color: var(--muted); font-size: .82rem; margin-top: 14px; line-height: 1.9; } .footer-credit strong { color: var(--text-2); } .footer h4 { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 16px; } .footer nav a { display: block; color: var(--text-2); font-size: .88rem; margin-bottom: 10px; } .footer nav a:hover { color: var(--accent); text-decoration: none; } .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--border); padding: 20px 32px; color: var(--muted); font-size: .82rem; } .footer-bottom a { color: var(--muted); } .footer-bottom a:hover { color: var(--accent); } /* ============================================================ Reveal & parallax ============================================================ */ .reveal { opacity: 0; transform: translateY(22px); } .reveal.visible { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal-scale { opacity: 0; transform: scale(.95) translateY(12px); } .reveal-scale.visible { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal-blur { opacity: 0; filter: blur(10px); transform: translateY(14px); } .reveal-blur.visible { opacity: 1; filter: blur(0); transform: none; transition: opacity .8s var(--ease), filter .8s var(--ease), transform .8s var(--ease); } .reveal-left { opacity: 0; transform: translateX(-36px); } .reveal-left.visible { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal-right { opacity: 0; transform: translateX(36px); } .reveal-right.visible { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); } .stagger > * { opacity: 0; transform: translateY(18px); } .stagger.visible > * { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); } .stagger.visible > *:nth-child(2) { transition-delay: .07s; } .stagger.visible > *:nth-child(3) { transition-delay: .14s; } .stagger.visible > *:nth-child(4) { transition-delay: .21s; } .stagger.visible > *:nth-child(5) { transition-delay: .28s; } .stagger.visible > *:nth-child(6) { transition-delay: .35s; } .stagger.visible > *:nth-child(7) { transition-delay: .42s; } .stagger.visible > *:nth-child(8) { transition-delay: .49s; } .stagger.visible > *:nth-child(9) { transition-delay: .56s; } [data-parallax] { will-change: transform; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal, .reveal-scale, .reveal-blur, .reveal-left, .reveal-right, .stagger > *, .words .w { opacity: 1; transform: none; filter: none; transition: none; } .t-cursor, .badge-dot, .terminal-frame::before, .code-glitch { animation: none; } .ripple { display: none; } .intro, .pt-overlay, .splash { display: none !important; } .cinema-in, .page-enter { animation: none; } * { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* ============================================================ Responsive — desktop first; graceful degradation below ============================================================ */ @media (min-width: 2200px) { :root { --max: 1400px; } body { font-size: 17px; } } @media (max-width: 1024px) { .hero-grid { gap: 48px; } .feature-grid, .gallery-grid { grid-template-columns: repeat(2, 1fr); } .download-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .hero { padding: 72px 0 64px; } .hero-grid { grid-template-columns: 1fr; gap: 56px; } .hero-sub { max-width: none; } .quickstart-grid { grid-template-columns: 1fr; gap: 40px; } .footer-grid { grid-template-columns: 1fr 1fr; } .sim-banner { grid-template-columns: 1fr; padding: 36px 28px; } .sim-feature { flex-direction: column; align-items: flex-start; padding: 30px 26px; } .docs-layout { grid-template-columns: 1fr; gap: 32px; } .docs-sidebar { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; } .docs-sidebar h4 { display: none; } .docs-sidebar a { border: 1px solid var(--border); border-radius: 100px; padding: 6px 14px; } .docs-sidebar a.active { border-color: var(--accent-border); } } @media (max-width: 640px) { .section { padding: 72px 0; } .section-head { margin-bottom: 44px; } .feature-grid, .download-grid, .gallery-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 0; padding: 36px 0; } .stat:nth-child(3) { border-left: 0; } .install-card { width: 100%; justify-content: space-between; } .terminal-body { height: 280px; } .cta { padding: 56px 24px; } .footer-grid { grid-template-columns: 1fr; gap: 28px; } .footer-bottom { justify-content: center; text-align: center; } .intro-skip { right: 50%; transform: translateX(50%); } .nav-toggle { display: flex; } .nav-links { position: absolute; top: var(--nav-h); left: 0; right: 0; background: rgba(9, 9, 11, .97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); flex-direction: column; align-items: stretch; padding: 12px 16px 20px; gap: 2px; display: none; } .nav-links.open { display: flex; } .nav-links a:not(.btn) { padding: 12px; } .nav-links li:last-child { margin: 10px 12px 0; } .cli-fab { right: 14px; bottom: 14px; padding: 10px 16px; font-size: .76rem; } }