@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@500;600&display=swap'); /* ============ THEME TOKENS ============ Same variable names throughout, values swap per theme. Light = default (:root). Dark = @media(prefers-color-scheme:dark) unless overridden, or forced via [data-theme="dark"/"light"] on . */ :root { /* accent zones (hero / showcase / board) */ --sea: #eef4f6; --sea-mid: #dff0f2; --sea-edge: #cfe4e8; --on-accent: #0d1b26; --on-accent-muted: rgba(13, 27, 38, 0.66); --glass-bg: rgba(13, 27, 38, 0.045); --glass-border: rgba(13, 27, 38, 0.14); --panel-grad: linear-gradient(160deg, #ffffff 0%, #e7f2f3 100%); --button-grad: linear-gradient(160deg, var(--harbor) 0%, var(--tide) 100%); --button-text: #ffffff; --nav-bg: rgba(255, 255, 255, 0.78); --rays: rgba(0, 150, 170, 0.32); --poster-img: url("assets/hero-banner-light.jpg"); --poster-ratio: 2.402; --poster-fade: rgba(238, 244, 246, 0); --harbor: #0a2efa; --tide: #00ccdb; --tide-text: #018d9c; --timber: #d9822b; --foam: #f5f7f6; --paper: #ffffff; --ink: #0d1b26; --mist: #5b6b76; --line: rgba(13, 27, 38, 0.09); --radius: 20px; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sea: #050c1c; --sea-mid: #0a1a34; --sea-edge: #0e2647; --on-accent: #ffffff; --on-accent-muted: rgba(255, 255, 255, 0.68); --glass-bg: rgba(255, 255, 255, 0.06); --glass-border: rgba(255, 255, 255, 0.14); --panel-grad: linear-gradient(160deg, var(--sea-mid) 0%, var(--sea) 100%); --button-grad: linear-gradient(160deg, #ffffff 0%, #dff6f8 100%); --button-text: var(--sea); --nav-bg: rgba(5, 12, 28, 0.72); --rays: rgba(0, 204, 219, 0.45); --poster-img: url("assets/hero-banner-dark.jpg"); --poster-ratio: 2.402; --poster-fade: rgba(5, 12, 28, 0); --tide-text: #00ccdb; --foam: #0b1420; --paper: #101c2c; --ink: #eef3f6; --mist: #93a2ac; --line: rgba(255, 255, 255, 0.09); color-scheme: dark; } } :root[data-theme="dark"] { --sea: #050c1c; --sea-mid: #0a1a34; --sea-edge: #0e2647; --on-accent: #ffffff; --on-accent-muted: rgba(255, 255, 255, 0.68); --glass-bg: rgba(255, 255, 255, 0.06); --glass-border: rgba(255, 255, 255, 0.14); --panel-grad: linear-gradient(160deg, var(--sea-mid) 0%, var(--sea) 100%); --button-grad: linear-gradient(160deg, #ffffff 0%, #dff6f8 100%); --button-text: var(--sea); --nav-bg: rgba(5, 12, 28, 0.72); --rays: rgba(0, 204, 219, 0.45); --poster-img: url("assets/hero-banner-dark.jpg"); --poster-ratio: 2.402; --poster-fade: rgba(5, 12, 28, 0); --tide-text: #00ccdb; --foam: #0b1420; --paper: #101c2c; --ink: #eef3f6; --mist: #93a2ac; --line: rgba(255, 255, 255, 0.09); color-scheme: dark; } :root[data-theme="light"] { --sea: #eef4f6; --sea-mid: #dff0f2; --sea-edge: #cfe4e8; --on-accent: #0d1b26; --on-accent-muted: rgba(13, 27, 38, 0.66); --glass-bg: rgba(13, 27, 38, 0.045); --glass-border: rgba(13, 27, 38, 0.14); --panel-grad: linear-gradient(160deg, #ffffff 0%, #e7f2f3 100%); --button-grad: linear-gradient(160deg, var(--harbor) 0%, var(--tide) 100%); --button-text: #ffffff; --nav-bg: rgba(255, 255, 255, 0.78); --rays: rgba(0, 150, 170, 0.32); --poster-img: url("assets/hero-banner-light.jpg"); --poster-ratio: 2.402; --poster-fade: rgba(238, 244, 246, 0); --tide-text: #018d9c; --foam: #f5f7f6; --paper: #ffffff; --ink: #0d1b26; --mist: #5b6b76; --line: rgba(13, 27, 38, 0.09); color-scheme: light; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; color: var(--ink); background: var(--foam); -webkit-font-smoothing: antialiased; transition: background 0.25s ease, color 0.25s ease; } h1, h2, h3, .brand span, .board-cta, .nav-cta { font-family: "Space Grotesk", -apple-system, sans-serif; } .mono { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; } /* ---------- Banner ---------- */ .launch-banner { background: var(--sea); color: var(--tide-text); text-align: center; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 10px 16px; border-bottom: 1px solid rgba(0, 204, 219, 0.25); } /* ---------- Nav ---------- */ .nav { position: sticky; top: 0; z-index: 50; background: var(--nav-bg); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--glass-border); } .nav-inner { max-width: 1080px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; } .brand { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: var(--on-accent); text-decoration: none; transition: opacity 0.15s ease; } .brand:hover { opacity: 0.8; } .brand-mark { width: 25px; height: 25px; border-radius: 7px; } .nav-right { display: flex; align-items: center; gap: 10px; } .theme-toggle { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--glass-border); background: var(--glass-bg); color: var(--on-accent); cursor: pointer; padding: 0; } .theme-toggle:hover { background: var(--glass-border); } .theme-toggle svg { width: 16px; height: 16px; } .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; } :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; } } .lang-switch { font-family: "JetBrains Mono", monospace; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--on-accent-muted); background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 999px; padding: 6px 11px; appearance: none; cursor: pointer; } .lang-switch:hover { background: var(--glass-border); } .nav-cta { font-size: 13.5px; font-weight: 600; color: var(--sea); text-decoration: none; padding: 7px 16px; border-radius: 999px; background: var(--tide); transition: transform 0.15s ease, box-shadow 0.15s ease; } .nav-cta:hover { transform: translateY(-1px); } /* ---------- Cinematic poster banner ---------- */ .poster { position: relative; width: 100%; aspect-ratio: var(--poster-ratio); background-image: var(--poster-img); background-size: cover; background-position: center 30%; overflow: hidden; } .poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--poster-fade) 40%, var(--sea) 97%); } /* ---------- Hero ---------- */ .hero { position: relative; background: radial-gradient(720px 420px at 82% -10%, rgba(0, 204, 219, 0.18), transparent 65%), radial-gradient(900px 500px at 10% 0%, rgba(10, 46, 250, 0.16), transparent 60%), linear-gradient(180deg, var(--sea) 0%, var(--sea) 55%, var(--sea-mid) 100%); padding: 88px 24px 0; overflow: hidden; } .protocol-tags { display: flex; justify-content: center; gap: 8px; margin-bottom: 26px; } .protocol-tags span { font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--tide-text); border: 1px solid rgba(0, 204, 219, 0.4); background: rgba(0, 204, 219, 0.1); border-radius: 999px; padding: 5px 12px; } .hero-inner { max-width: 680px; margin: 0 auto; text-align: center; } .hero-icon { width: 76px; height: 76px; border-radius: 18px; box-shadow: 0 24px 48px -18px rgba(2, 8, 20, 0.35); margin-bottom: 26px; } .hero h1 { font-size: 50px; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 20px; font-weight: 650; color: var(--on-accent); } .hero-sub { font-size: 17.5px; line-height: 1.6; color: var(--on-accent-muted); max-width: 500px; margin: 0 auto 34px; } .hero-actions { display: flex; justify-content: center; } .button { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; border-radius: 14px; padding: 14px 32px; font-weight: 600; font-size: 16px; transition: transform 0.15s ease, box-shadow 0.15s ease; } .button.primary { color: var(--button-text); background: var(--button-grad); box-shadow: 0 18px 34px -16px rgba(0, 204, 219, 0.4); } .button.primary:hover { transform: translateY(-1px); } .button-sub { font-size: 11.5px; font-weight: 600; font-family: "JetBrains Mono", monospace; letter-spacing: 0.04em; opacity: 0.75; } /* Horizon seam at bottom of hero */ .horizon { position: relative; height: 70px; margin-top: 44px; } .horizon::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: min(1040px, 92%); height: 1px; background: linear-gradient(90deg, transparent, rgba(0, 204, 219, 0.55), transparent); box-shadow: 0 0 24px 1px rgba(0, 204, 219, 0.35); } .horizon span { position: absolute; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--tide); box-shadow: 0 0 10px 2px rgba(0, 204, 219, 0.7); } .horizon span:nth-child(1) { left: 18%; } .horizon span:nth-child(2) { left: 47%; } .horizon span:nth-child(3) { left: 79%; } /* ---------- Showcase (desk / monitor scene) ---------- */ .showcase { position: relative; background: linear-gradient(180deg, var(--sea-mid) 0%, var(--sea) 78%, var(--sea) 100%); padding: 30px 24px 90px; overflow: hidden; } .stage { position: relative; max-width: 1080px; margin: 0 auto; } .ray { position: absolute; top: -40px; bottom: -40px; width: 2px; background: linear-gradient(180deg, transparent, var(--rays), transparent); filter: blur(5px); opacity: 0.7; pointer-events: none; } .ray-a { left: 6%; } .ray-b { left: 50%; opacity: 0.4; } .ray-c { left: 93%; } .monitor { position: relative; width: min(760px, 86vw); margin: 0 auto; z-index: 2; } .screen { background: #0a1018; border-radius: 16px; padding: 12px; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 50px 90px -25px rgba(2, 8, 20, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.03) inset; } .screen-frame { border-radius: 9px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset; } .screen-frame img { width: 100%; display: block; } .monitor-neck { width: 84px; height: 40px; margin: 0 auto; background: linear-gradient(180deg, #1c2530, #0d141c); clip-path: polygon(32% 0%, 68% 0%, 100% 100%, 0% 100%); } .monitor-foot { width: 240px; height: 12px; margin: 0 auto; background: linear-gradient(180deg, #222c38, #141b23); border-radius: 8px; box-shadow: 0 14px 28px -8px rgba(2, 8, 20, 0.4); } .float-card { position: absolute; width: 188px; background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 14px; padding: 14px 16px; color: var(--on-accent); z-index: 3; box-shadow: 0 20px 40px -20px rgba(2, 8, 20, 0.35); } .fc-connection { left: -4%; top: 12%; } .fc-speed { right: -4%; bottom: 6%; } .fc-title { font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; color: var(--tide-text); margin-bottom: 10px; } .fc-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 6px 0; border-top: 1px solid var(--glass-border); color: var(--on-accent); } .fc-row:first-of-type { border-top: none; padding-top: 0; } .fc-row span:first-child { color: var(--on-accent-muted); } .fc-live { color: #16a34a; font-weight: 600; } .fc-spark { width: 100%; height: 32px; color: var(--tide-text); display: block; margin-bottom: 6px; } .fc-value { font-family: "JetBrains Mono", monospace; font-size: 17px; font-weight: 600; letter-spacing: 0.01em; } @media (max-width: 980px) { .float-card { display: none; } } /* Dock-plank divider */ .plank-divider { max-width: 1080px; margin: 0 auto; padding: 0 24px 6px; display: flex; gap: 6px; justify-content: center; opacity: 0.5; } .plank-divider span { width: 26px; height: 2px; background: var(--line); border-radius: 2px; } /* ---------- Features (manifest) ---------- */ .features { max-width: 900px; margin: 0 auto; padding: 60px 24px 90px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 30px; background: var(--foam); } .feature { text-align: left; border-top: 1px solid var(--line); padding-top: 18px; position: relative; } .feature-tag { font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 600; color: var(--tide-text); letter-spacing: 0.06em; display: block; margin-bottom: 14px; } .feature-icon { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(155deg, rgba(10, 46, 250, 0.12), rgba(0, 204, 219, 0.16)); color: var(--harbor); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .feature-icon svg { width: 19px; height: 19px; } .feature h3 { font-size: 15.5px; margin: 0 0 7px; letter-spacing: -0.01em; font-weight: 600; color: var(--ink); } .feature p { font-size: 13.5px; line-height: 1.55; color: var(--mist); margin: 0; } /* ---------- Board / pricing ---------- */ .board-wrap { max-width: 900px; margin: 0 auto; padding: 10px 24px 110px; background: var(--foam); } .board { position: relative; background: var(--panel-grad); border: 1px solid var(--glass-border); border-radius: 24px; padding: 46px 40px; text-align: center; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(2, 8, 20, 0.25); } .board::before { content: ""; position: absolute; inset: -60% -20% auto -20%; height: 240px; background: radial-gradient(closest-side, rgba(0, 204, 219, 0.16), transparent 70%); } .board-brand { font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; color: var(--on-accent-muted); text-transform: uppercase; margin-bottom: 30px; position: relative; } .board-rows { display: flex; justify-content: center; gap: 0; margin-bottom: 34px; position: relative; } .board-row { flex: 1; max-width: 220px; padding: 0 26px; } .board-rows .board-row + .board-row { border-left: 1px solid var(--glass-border); } .board-label { font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: var(--tide-text); margin-bottom: 10px; } .board-value { font-family: "JetBrains Mono", monospace; font-size: 25px; font-weight: 600; color: var(--on-accent); letter-spacing: 0.01em; } .board-strike { font-size: 15px; font-weight: 500; color: var(--on-accent-muted); text-decoration: line-through; margin-right: 6px; } .board-cta { position: relative; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--button-text); background: var(--button-grad); font-weight: 600; font-size: 16px; padding: 14px 32px; border-radius: 14px; box-shadow: 0 18px 34px -16px rgba(0, 204, 219, 0.4); transition: transform 0.15s ease; } .board-cta:hover { transform: translateY(-1px); } /* ---------- Notify signup ---------- */ .notify { max-width: 480px; margin: 40px auto 0; text-align: center; } .notify h3 { font-size: 16px; margin: 0 0 8px; color: var(--ink); } .notify p { font-size: 13.5px; color: var(--mist); margin: 0 0 18px; line-height: 1.5; } .notify-form { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .notify-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .notify-input { flex: 1; min-width: 220px; font-family: inherit; font-size: 14px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); } .notify-input:focus { outline: 2px solid var(--tide); outline-offset: 1px; } .notify-button { font-family: inherit; font-weight: 600; font-size: 14px; padding: 12px 22px; border-radius: 12px; border: none; background: var(--harbor); color: #ffffff; cursor: pointer; transition: opacity 0.15s ease; } .notify-button:hover { opacity: 0.9; } .notify-button:disabled { opacity: 0.6; cursor: default; } .notify-msg { margin-top: 14px; font-size: 13px; font-weight: 600; } .notify-msg-ok { color: #16a34a; } .notify-msg-err { color: #dc2626; } /* ---------- Footer ---------- */ .footer { max-width: 1080px; margin: 0 auto; padding: 30px 24px 50px; display: flex; justify-content: space-between; font-size: 13px; color: var(--mist); background: var(--foam); } .footer a { color: var(--mist); text-decoration: none; } .footer a:hover { color: var(--ink); } @media (max-width: 760px) { .hero h1 { font-size: 32px; } .features { grid-template-columns: repeat(2, 1fr); } .board-rows { flex-direction: column; gap: 22px; } .board-rows .board-row + .board-row { border-left: none; border-top: 1px solid var(--glass-border); padding-top: 22px; } .footer { flex-direction: column; gap: 8px; text-align: center; } } @media (prefers-reduced-motion: reduce) { .nav-cta, .button.primary, .board-cta, body { transition: none; } } :focus-visible { outline: 2px solid var(--tide); outline-offset: 2px; }