@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700;900&display=swap'); /* ============================================================ SUPANODE x PARTNERS — SHARED DESIGN SYSTEM Industrial / Tactical Telemetry, elevated to agency-tier. Deep-black instrument panel. Sharp corners. Hairline depth. ============================================================ */ /* ---- 1. TOKENS ------------------------------------------- */ :root { /* --- Surfaces / line --- */ --bg: #0a0a0a; --bg-2: #121212; --bg-3: #161616; /* raised inner cores under hover */ --fg: #eaeaea; --fg-dim: #888888; --fg-dimmer: #7b7b7b; --line: #1f1f1f; --line-bright: #2f2f2f; /* --- Signal accents --- */ --green: #24aa52; --green-bright: #2fbf63; --amber: #f0b429; --amber-bright: #f5c451; /* Translucent accent washes (for fills / glows — never neon) */ --green-wash: rgba(36, 170, 82, 0.10); --green-wash-2: rgba(36, 170, 82, 0.18); --amber-wash: rgba(240, 180, 41, 0.10); --amber-wash-2: rgba(240, 180, 41, 0.18); /* Inset top highlight — the "machined" sheen on inner cores */ --sheen: inset 0 1px 0 rgba(255, 255, 255, 0.04); --sheen-strong: inset 0 1px 0 rgba(255, 255, 255, 0.06); /* --- Per-page accent (overridable per ) --- */ --accent: var(--green); --accent-bright: var(--green-bright); --accent-wash: var(--green-wash); --accent-wash-2: var(--green-wash-2); /* --- Fonts --- (Latin first, Chinese fallback resolves per-glyph) */ --font-display: 'Archivo Black', 'Noto Sans SC', 'Arial Black', sans-serif; --font-body: 'Inter', 'Noto Sans SC', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Noto Sans SC', ui-monospace, monospace; /* --- Fluid type scale (clamp: min, fluid, max) --- */ --t-display: clamp(2.75rem, 1.4rem + 6.6vw, 6.5rem); /* hero H1 */ --t-h2: clamp(2rem, 1.1rem + 4vw, 3.75rem); /* section */ --t-h3: clamp(1.4rem, 1rem + 1.6vw, 2rem); /* tile head */ --t-lead: clamp(1.05rem, 0.95rem + 0.6vw, 1.375rem);/* sub/lead */ --t-body: clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem); --t-mono: 0.75rem; /* eyebrows */ --t-mono-sm: 0.6875rem; /* fine tags */ --t-metric: clamp(2.25rem, 1.4rem + 4vw, 4rem); /* count-up */ /* --- Spatial rhythm --- */ --pad-section: clamp(6rem, 4rem + 9vw, 10rem); /* macro vertical */ --pad-x: clamp(1.25rem, 0.5rem + 3vw, 3rem); --maxw: 1240px; --gap: clamp(1rem, 0.6rem + 1.6vw, 1.75rem); /* --- Motion --- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* settle / reveal */ --ease-glide: cubic-bezier(0.32, 0.72, 0, 1); /* glide / nav */ --dur: 720ms; --dur-slow: 880ms; --dur-fast: 240ms; /* --- Radius: SHARP everywhere --- */ --radius: 0; } /* Per-page accent leans (set on ) */ body[data-accent="amber"] { --accent: var(--amber); --accent-bright: var(--amber-bright); --accent-wash: var(--amber-wash); --accent-wash-2: var(--amber-wash-2); } body[data-accent="green"] { --accent: var(--green); --accent-bright: var(--green-bright); --accent-wash: var(--green-wash); --accent-wash-2: var(--green-wash-2); } /* "duo" keeps green primary; amber is summoned locally via .u-amber */ /* ---- 2. RESET -------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; border-radius: var(--radius) !important; /* SHARP, enforced */ margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--t-body); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; min-height: 100dvh; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } ul { list-style: none; } ::selection { background: var(--accent); color: #050505; } /* Visible focus — accessibility */ :focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; } .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; } /* ---- 3. TYPOGRAPHY HELPERS ------------------------------- */ .display { font-family: var(--font-display); font-weight: 400; /* Archivo Black is already heavy */ letter-spacing: -0.02em; line-height: 0.98; text-transform: none; } .h1 { font-size: var(--t-display); } .h2 { font-family: var(--font-display); font-size: var(--t-h2); letter-spacing: -0.02em; line-height: 1.0; } .h3 { font-family: var(--font-display); font-size: var(--t-h3); letter-spacing: -0.01em; line-height: 1.05; } .lead { font-size: var(--t-lead); color: var(--fg-dim); line-height: 1.55; max-width: 56ch; font-weight: 400; } .mono { font-family: var(--font-mono); } /* accent inflection inside display headings */ .display .em { color: var(--accent-bright); } /* ---- 4. LAYOUT SCAFFOLD ---------------------------------- */ .section { position: relative; padding-block: var(--pad-section); padding-inline: var(--pad-x); } .shell { /* centered max-width inner wrap */ width: 100%; max-width: var(--maxw); margin-inline: auto; position: relative; } .section--tight { padding-block: clamp(4rem, 3rem + 5vw, 7rem); } .divider-line { height: 1px; background: var(--line); border: 0; width: 100%; } /* ---- 5. EYEBROW TAG -------------------------------------- */ /* tiny mono uppercase + accent tick: // 01 — WHAT WE DO */ .eyebrow { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem); } .eyebrow::before { content: ""; width: 7px; height: 7px; background: var(--accent); flex: 0 0 auto; box-shadow: 0 0 0 1px var(--accent-wash-2); } .eyebrow .slash { color: var(--accent); } /* the leading "//" */ /* ---- 6. MACHINED PANEL (double-bezel, SHARP) ------------- */ /* outer hairline shell (aluminium tray) wrapping inner core */ /* (glass plate). Concentric sharp frames. Depth = hairlines */ /* + inset sheen + layering. NEVER fuzzy dark shadows. */ .panel { background: var(--bg-2); border: 1px solid var(--line); padding: clamp(6px, 0.4vw, 9px); /* the tray gap */ position: relative; } .panel__core { background: var(--bg-2); border: 1px solid var(--line); box-shadow: var(--sheen); padding: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem); height: 100%; position: relative; } /* hover lift for interactive panels */ .panel--interactive { transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); } .panel--interactive:hover { border-color: var(--line-bright); } .panel--interactive:hover .panel__core { border-color: var(--line-bright); box-shadow: var(--sheen-strong); } /* corner ticks — machined registration marks (decorative) */ .panel__core::before, .panel__core::after { content: ""; position: absolute; width: 8px; height: 8px; border-color: var(--line-bright); border-style: solid; pointer-events: none; } .panel__core::before { top: 8px; left: 8px; border-width: 1px 0 0 1px; } .panel__core::after { bottom: 8px; right: 8px; border-width: 0 1px 1px 0; } /* ---- 7. BUTTONS ------------------------------------------ */ /* primary = accent fill, sharp, with button-in-button square */ /* trailing chip that nudges on hover. */ .btn { --chip: 2.6em; display: inline-flex; align-items: stretch; font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid transparent; transition: transform var(--dur-fast) var(--ease-out), background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); user-select: none; } .btn__label { display: inline-flex; align-items: center; padding: 0 1.25em; min-height: var(--chip); } .btn__chip { display: inline-flex; align-items: center; justify-content: center; width: var(--chip); min-height: var(--chip); border-left: 1px solid rgba(0, 0, 0, 0.28); } .btn__chip svg { width: 1.05em; height: 1.05em; transition: transform var(--dur) var(--ease-glide); } .btn:active { transform: scale(0.98); } /* PRIMARY (green/accent fill) */ .btn--primary { background: var(--accent); color: #050505; border-color: var(--accent); } .btn--primary:hover { background: var(--accent-bright); border-color: var(--accent-bright); } .btn--primary:hover .btn__chip svg { transform: translate(3px, 3px); } /* down variant: chip arrow points down, nudges down on hover */ .btn--down:hover .btn__chip svg { transform: translateY(3px); } /* GHOST (hairline) */ .btn--ghost { background: transparent; color: var(--fg); border-color: var(--line-bright); } .btn--ghost .btn__chip { border-left-color: var(--line-bright); } .btn--ghost:hover { border-color: var(--fg-dim); background: rgba(255,255,255,0.02); } .btn--ghost:hover .btn__chip svg { transform: translate(3px, 3px); } /* small inline "Enter ->" chip used inside fork tiles */ .chip-link { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-bright); } .chip-link svg { width: 0.95em; height: 0.95em; transition: transform var(--dur) var(--ease-glide); } /* ---- 8. FLOATING GLASS NAV PILL -------------------------- */ .nav { position: fixed; inset-block-start: clamp(0.75rem, 0.4rem + 1vw, 1.25rem); inset-inline: 0; z-index: 100; display: flex; justify-content: center; padding-inline: var(--pad-x); pointer-events: none; /* let clicks pass the gutter */ } .nav__pill { pointer-events: auto; display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); width: 100%; max-width: var(--maxw); padding: 0.55rem 0.65rem 0.55rem 1.1rem; background: rgba(18, 18, 18, 0.62); border: 1px solid var(--line-bright); box-shadow: var(--sheen); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out); } .nav__pill.is-scrolled { background: rgba(14, 14, 14, 0.82); border-color: #353535; } .nav__brand { display: flex; align-items: baseline; gap: 0.55rem; } .nav__wordmark { font-family: var(--font-display); font-size: 1.0625rem; letter-spacing: -0.01em; color: var(--fg); } .nav__tag { font-family: var(--font-mono); font-size: var(--t-mono-sm); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-bright); } .nav__links { display: flex; align-items: center; gap: clamp(0.9rem, 1.6vw, 1.6rem); margin-inline-start: auto; } .nav__link { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-dim); transition: color var(--dur-fast) var(--ease-out); position: relative; } .nav__link::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease-glide); } .nav__link:hover { color: var(--fg); } .nav__link:hover::after { transform: scaleX(1); } .nav__cta { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.5em 0.95em; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #050505; background: var(--accent); border: 1px solid var(--accent); transition: background var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .nav__cta:hover { background: var(--accent-bright); } .nav__cta:active { transform: scale(0.98); } .nav__cta svg { width: 0.95em; height: 0.95em; } /* back link ("<- All partners") */ .backlink { display: inline-flex; align-items: center; gap: 0.55em; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-dim); transition: color var(--dur-fast) var(--ease-out); } .backlink svg { width: 0.95em; height: 0.95em; transition: transform var(--dur) var(--ease-glide); } .backlink:hover { color: var(--fg); } .backlink:hover svg { transform: translateX(-3px); } /* --- Hamburger + full-screen overlay --- */ .nav__burger { display: none; width: 2.6em; height: 2.6em; flex: 0 0 auto; align-items: center; justify-content: center; border: 1px solid var(--line-bright); margin-inline-start: auto; } .nav__burger span { position: relative; width: 18px; height: 1.5px; background: var(--fg); transition: transform var(--dur) var(--ease-glide), opacity var(--dur-fast); } .nav__burger span::before, .nav__burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--fg); transition: transform var(--dur) var(--ease-glide); } .nav__burger span::before { top: -6px; } .nav__burger span::after { top: 6px; } body.menu-open .nav__burger span { background: transparent; } body.menu-open .nav__burger span::before { transform: translateY(6px) rotate(45deg); } body.menu-open .nav__burger span::after { transform: translateY(-6px) rotate(-45deg); } .nav-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(10, 10, 10, 0.96); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; padding: var(--pad-x); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur) var(--ease-out), visibility var(--dur); } body.menu-open .nav-overlay { opacity: 1; visibility: visible; pointer-events: auto; } .nav-overlay a { font-family: var(--font-display); font-size: clamp(2rem, 8vw, 3.25rem); letter-spacing: -0.02em; color: var(--fg); opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), color var(--dur-fast) var(--ease-out); } .nav-overlay a:hover { color: var(--accent-bright); } body.menu-open .nav-overlay a { opacity: 1; transform: translateY(0); } body.menu-open .nav-overlay a:nth-child(1) { transition-delay: 80ms; } body.menu-open .nav-overlay a:nth-child(2) { transition-delay: 150ms; } body.menu-open .nav-overlay a:nth-child(3) { transition-delay: 220ms; } body.menu-open .nav-overlay a:nth-child(4) { transition-delay: 290ms; } body.menu-open .nav-overlay a:nth-child(5) { transition-delay: 360ms; } /* ---- 9. HERO ATMOSPHERE ---------------------------------- */ .hero { position: relative; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(8rem, 6rem + 8vw, 12rem) var(--pad-section); padding-inline: var(--pad-x); overflow: hidden; } /* subtle green radial glow behind hero — never neon */ .hero__glow { position: absolute; pointer-events: none; z-index: 0; inset-block-start: -20%; inset-inline-start: 50%; width: min(120vw, 1400px); aspect-ratio: 1; transform: translateX(-50%); background: radial-gradient(circle at center, var(--accent-wash-2) 0%, transparent 58%); opacity: 0.7; } .hero > .shell { position: relative; z-index: 2; } /* faint hairline grid background */ .grid-bg { position: absolute; inset: 0; pointer-events: none; z-index: 1; background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: clamp(48px, 6vw, 84px) clamp(48px, 6vw, 84px); -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 0%, transparent 78%); mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 0%, transparent 78%); opacity: 0.6; } .hero__sub { margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); } .hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); } /* telemetry strip — mono signal line */ .telemetry { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(0.75rem, 2vw, 1.5rem); margin-top: clamp(2.5rem, 2rem + 3vw, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-dim); } .telemetry__dot { width: 7px; height: 7px; background: var(--green); flex: 0 0 auto; box-shadow: 0 0 0 3px var(--green-wash); animation: pulse 2.4s var(--ease-out) infinite; } .telemetry .sep { color: var(--line-bright); } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } } /* ---- 10. SECTION HEADER ---------------------------------- */ .sec-head { max-width: 72ch; margin-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); } .sec-head .h2 { margin-top: 0.25rem; } .sec-head .lead { margin-top: 1.25rem; } /* ---- 11. PRODUCT / BENTO TILES --------------------------- */ .bento { display: grid; gap: var(--gap); grid-template-columns: repeat(12, 1fr); } .bento > * { grid-column: span 6; } /* default half */ .bento .span-7 { grid-column: span 7; } .bento .span-5 { grid-column: span 5; } .bento .span-4 { grid-column: span 4; } .bento .span-12 { grid-column: span 12; } .tile-icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; color: var(--accent-bright); margin-bottom: 1.25rem; } .tile-icon svg { width: 100%; height: 100%; } .tile__label { font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 0.6rem; } .tile__title { line-height: 1.15; min-height: 2.3em; margin-bottom: 0.6rem; } .tile__body { color: #b6b6b6; font-size: var(--t-body); line-height: 1.65; } /* ---- 12. METRIC TILES (count-up) ------------------------- */ .metrics { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .metric__value { font-family: var(--font-display); font-size: var(--t-metric); line-height: 1; letter-spacing: -0.03em; color: var(--fg); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; white-space: nowrap; } .metric__value .suffix { color: var(--accent-bright); margin-left: 0.06em; } .metric__value .star { font-family: var(--font-mono); font-size: 0.4em; color: var(--amber); margin-left: 0.15em; align-self: flex-start; } .metric__label { font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-dim); margin-top: 0.85rem; } /* ---- 13. NETWORK STRIP ----------------------------------- */ .netstrip { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .nettile { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; padding: clamp(1.5rem, 1rem + 2vw, 2.25rem) 1rem; background: var(--bg-2); border: 1px solid var(--line); box-shadow: var(--sheen); transition: border-color var(--dur) var(--ease-out); } .nettile:hover { border-color: var(--line-bright); } .nettile__mono { width: 2.75rem; height: 2.75rem; color: var(--fg-dim); } .nettile:hover .nettile__mono { color: var(--accent-bright); } .nettile__mono svg { width: 100%; height: 100%; transition: color var(--dur) var(--ease-out); } .nettile__name { font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg); } .clarify { font-family: var(--font-mono); font-size: var(--t-mono-sm); letter-spacing: 0.06em; color: var(--fg-dimmer); line-height: 1.7; margin-top: 1.5rem; max-width: 64ch; } /* ---- 14. FORK TILES -------------------------------------- */ .fork { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .fork-tile { position: relative; display: flex; flex-direction: column; min-height: clamp(300px, 36vh, 420px); padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); background: var(--bg-2); border: 1px solid var(--line); box-shadow: var(--sheen); overflow: hidden; isolation: isolate; transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); } /* accent-fill wash that rises on hover */ .fork-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, var(--accent-wash) 0%, transparent 70%); opacity: 0; transition: opacity var(--dur) var(--ease-out); } .fork-tile:hover { transform: translateY(-6px); border-color: var(--accent); } .fork-tile:hover::before { opacity: 1; } .fork-tile__icon { width: 3rem; height: 3rem; color: var(--accent-bright); margin-bottom: 0; } .fork-tile__icon svg { width: 100%; height: 100%; } .fork-tile__seg { font-family: var(--font-display); font-size: var(--t-h3); letter-spacing: -0.02em; line-height: 1.0; margin-top: 1.75rem; /* reserve 2 lines so 1-line titles (Builder/Trader) top-align with the 2-line ones (Influencer/KOL, Accelerator/Fund) instead of dropping down */ min-height: 2em; /* variant B — "3D print" offset in the tile's accent → depth + weight */ text-shadow: 3px 3px 0 color-mix(in srgb, var(--accent) 34%, transparent); } /* reserve 2 lines so the grey hook lines up across all tiles and the optional trial note has room without shoving the title/hook out of alignment */ .fork-tile__hook { color: #b6b6b6; margin-top: 0.75rem; line-height: 1.55; min-height: 3.1em; } /* ENTER pinned to the bottom of the (equal-height) tile */ .fork-tile__enter { margin-top: auto; padding-top: 1.5rem; } .fork-tile:hover .chip-link svg { transform: translate(3px, 0); } /* a per-tile accent override hook */ .fork-tile[data-accent="amber"] { --accent: var(--amber); --accent-bright: var(--amber-bright); --accent-wash: var(--amber-wash); } /* ---- 15. "WHAT YOU GET" LIST (room pages) ---------------- */ .getlist { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .get { display: flex; flex-direction: column; padding: clamp(1.5rem, 1rem + 1.5vw, 2rem); background: var(--bg-2); border: 1px solid var(--line); border-top: 2px solid var(--accent); box-shadow: var(--sheen); transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); } .get:hover { border-color: var(--line-bright); border-top-color: var(--accent-bright); transform: translateY(-3px); } .get__num { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 700; letter-spacing: 0.16em; color: var(--accent-bright); margin-bottom: 1rem; } .get__title { font-family: var(--font-body); font-weight: 600; font-size: 1.125rem; line-height: 1.3; min-height: 2.6em; color: var(--fg); margin-bottom: 0.65rem; } .get__body { color: #c2c2c2; font-size: var(--t-body); line-height: 1.6; } /* "Why us" callout block */ .whyus { border-left: 2px solid var(--accent); padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem) clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--accent-wash); font-size: clamp(1.0625rem, 1rem + 0.55vw, 1.375rem); font-weight: 500; color: var(--fg); line-height: 1.5; letter-spacing: -0.01em; max-width: 60ch; } /* ---- 16. FINAL CTA --------------------------------------- */ .finalcta { text-align: center; } .finalcta .h2 { max-width: 22ch; margin-inline: auto; } .finalcta .btn { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); } /* ---- 17. FOOTER ------------------------------------------ */ .footer { border-top: 1px solid var(--line); padding: clamp(2.5rem, 2rem + 2vw, 3.5rem) var(--pad-x); } .footer__inner { max-width: var(--maxw); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-dim); } .footer__inner a { color: var(--fg-dim); transition: color var(--dur-fast) var(--ease-out); } .footer__inner a:hover { color: var(--accent-bright); } .footer__brand { color: var(--fg); } /* ---- 18. SCROLL-REVEAL ----------------------------------- */ .reveal { opacity: 0; transform: translateY(24px); filter: blur(6px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out); will-change: transform, opacity; } .reveal.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); } /* stagger: children reveal in sequence once parent is .is-visible */ .stagger > * { opacity: 0; transform: translateY(24px); filter: blur(6px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out); will-change: transform, opacity; } .stagger.is-visible > * { opacity: 1; transform: translateY(0); filter: blur(0); } .stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; } .stagger.is-visible > *:nth-child(2) { transition-delay: 90ms; } .stagger.is-visible > *:nth-child(3) { transition-delay: 180ms; } .stagger.is-visible > *:nth-child(4) { transition-delay: 270ms; } .stagger.is-visible > *:nth-child(5) { transition-delay: 360ms; } .stagger.is-visible > *:nth-child(6) { transition-delay: 450ms; } /* ---- 19. GRAIN OVERLAY (fixed, pointer-events none) ------ */ .grain { position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: 0.028; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---- 20. UTILITIES --------------------------------------- */ .u-amber { --accent: var(--amber); --accent-bright: var(--amber-bright); --accent-wash: var(--amber-wash); --accent-wash-2: var(--amber-wash-2); } .u-mt-sm { margin-top: 1rem; } .u-mt-md { margin-top: 2rem; } .u-mt-lg { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); } .u-center { text-align: center; } .u-dim { color: var(--fg-dim); } /* ---- 21. RESPONSIVE -------------------------------------- */ @media (max-width: 980px) { .bento > *, .bento .span-7, .bento .span-5 { grid-column: span 12; } .bento .span-4 { grid-column: span 6; } } @media (max-width: 768px) { .bento .span-4 { grid-column: span 12; } :root { --pad-section: clamp(4rem, 3rem + 6vw, 6rem); } .nav__links { display: none; } .nav__burger { display: inline-flex; } .nav__pill { padding: 0.5rem 0.5rem 0.5rem 1rem; } .hero__actions { flex-direction: column; align-items: stretch; } .btn { justify-content: space-between; } .footer__inner { flex-direction: column; align-items: flex-start; } .fork-tile { min-height: 280px; } } /* ---- 22. REDUCED MOTION ---------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal, .stagger > * { opacity: 1 !important; transform: none !important; filter: none !important; } .telemetry__dot { animation: none !important; } .fork-tile:hover { transform: none; } } /* ============================================================ 23. INTERESTING MOMENTS — live ops layer (features 1–7) ------------------------------------------------------------ Per-room accent inherited via var(--accent)/var(--accent-bright) (green default, amber on body[data-accent="amber"]). GPU-safe: animate only transform/opacity. SHARP corners. Every animation neutralized in the reduced-motion block (§24). ============================================================ */ /* ---- (1) LIVE TELEMETRY TICKER --------------------------- */ /* The existing .telemetry strip gains live [data-tick] values. */ /* tabular-nums keeps digit width fixed so numbers don't jiggle. */ .tick { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; color: var(--fg); letter-spacing: 0.04em; } /* refined hairline separators already provided by .telemetry .sep; */ /* harden the OPERATIONAL dot pulse to inherit the room accent. */ .telemetry .telemetry__dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); } .telemetry__item { display: inline-flex; align-items: baseline; gap: 0.5em; white-space: nowrap; } .telemetry__item .tick { font-weight: 600; } /* ---- (2) NETWORK STATUS BOARD ---------------------------- */ /* Each .nettile becomes a live status row: LIVE dot + label + */ /* a faint scrolling sparkline canvas. Layout stays centered. */ .nettile__live { display: inline-flex; align-items: center; gap: 0.45em; margin-top: 0.1rem; } .livedot { width: 6px; height: 6px; flex: 0 0 auto; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); animation: livepulse 2.2s var(--ease-out) infinite; } .livelabel { font-family: var(--font-mono); font-size: var(--t-mono-sm); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-bright); } .spark { display: block; width: 132px; height: 30px; max-width: 100%; margin-top: 0.25rem; opacity: 0.85; } @keyframes livepulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } } /* ---- (3) HOT-PATH ANIMATION (client.html) ---------------- */ /* A connector line threads the stage tiles; an accent pulse */ /* travels along it. CSS-only — no JS. */ .hotpath { position: relative; } .hotpath__line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%); background: var(--line-bright); z-index: 0; pointer-events: none; } /* the moving glowing dot */ .hotpath__pulse { position: absolute; top: 50%; left: 0; width: 8px; height: 8px; margin-top: -4px; margin-left: -4px; background: var(--accent-bright); box-shadow: 0 0 0 3px var(--accent-wash), 0 0 10px 1px var(--accent-wash-2); z-index: 1; pointer-events: none; animation: hotpathmove 2.6s var(--ease-glide) infinite; will-change: transform; } @keyframes hotpathmove { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(calc(100% + 0px)); opacity: 0; } } /* keep the existing stage tiles above the line + connector */ .hotpath > *:not(.hotpath__line):not(.hotpath__pulse) { position: relative; z-index: 2; } /* ---- (4) CURSOR-REACTIVE HERO GLOW ----------------------- */ /* JS eases --gx/--gy on the .hero; the glow drifts toward cursor.*/ /* Keeps the existing translateX(-50%) centering intact. */ .hero__glow { transform: translateX(-50%) translate(var(--gx, 0px), var(--gy, 0px)); transition: transform 220ms var(--ease-out); } /* ---- (5) FORK-TILE POWER-ON HOVER ------------------------ */ /* A thin accent bar sweeps across the top edge on hover, on top */ /* of the existing lift + wash. ::before is taken; use ::after. */ .fork-tile::after { content: ""; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 2px; background: var(--accent-bright); transform: scaleX(0); transform-origin: left; opacity: 0; transition: transform 320ms var(--ease-glide), opacity 320ms var(--ease-out); pointer-events: none; } .fork-tile:hover::after { transform: scaleX(1); opacity: 1; } /* ---- (6) OPERATORS-ONLINE PRESENCE ----------------------- */ /* Small mono pill above each final CTA button. */ .presence { display: inline-flex; align-items: center; gap: 0.55em; margin-bottom: clamp(1.25rem, 1rem + 1vw, 1.75rem); padding: 0.4em 0.85em; font-family: var(--font-mono); font-size: var(--t-mono-sm); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-dim); background: var(--bg-2); border: 1px solid var(--line); box-shadow: var(--sheen); } .presence__dot { width: 6px; height: 6px; flex: 0 0 auto; background: var(--green); box-shadow: 0 0 0 3px var(--green-wash); animation: livepulse 2.2s var(--ease-out) infinite; } /* ---- (7) REFERRAL FLOW 1-2-3 (influencer.html) ----------- */ /* Horizontal stepper with connecting lines on desktop, stacked */ /* on mobile. Amber room inherits via var(--accent). */ .flow__grid { display: grid; gap: var(--gap); grid-template-columns: repeat(3, 1fr); margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); } .flow__step { position: relative; display: flex; flex-direction: column; padding: clamp(1.5rem, 1rem + 1.5vw, 2rem); background: var(--bg-2); border: 1px solid var(--line); box-shadow: var(--sheen); transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); } .flow__step:hover { border-color: var(--line-bright); transform: translateY(-3px); } /* connector line between steps (desktop): a hairline reaching to */ /* the next bubble, with a small accent node at the joint. */ .flow__step:not(:last-child)::after { content: ""; position: absolute; z-index: 0; top: calc(clamp(1.5rem, 1rem + 1.5vw, 2rem) + 1.1rem); /* aligns to bubble center */ left: 100%; width: var(--gap); height: 1px; background: var(--line-bright); pointer-events: none; } .flow__num { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; flex: 0 0 auto; font-family: var(--font-mono); font-size: 0.95rem; font-weight: 700; letter-spacing: 0; color: #050505; background: var(--accent); box-shadow: var(--sheen); margin-bottom: 1.1rem; } .flow__title { font-family: var(--font-body); font-weight: 600; font-size: 1.125rem; line-height: 1.3; color: var(--fg); margin-bottom: 0.55rem; } .flow__body { color: #c2c2c2; font-size: var(--t-body); line-height: 1.6; } @media (max-width: 768px) { .flow__grid { grid-template-columns: 1fr; } /* connectors become vertical, dropping from each bubble downward */ .flow__step:not(:last-child)::after { top: auto; left: calc(clamp(1.5rem, 1rem + 1.5vw, 2rem) + 1.1rem); bottom: calc(-1 * var(--gap)); width: 1px; height: var(--gap); } } /* ============================================================ 24. INTERESTING MOMENTS — REDUCED MOTION NEUTRALIZER Static, tasteful fallbacks: NO motion anywhere. ============================================================ */ @media (prefers-reduced-motion: reduce) { .livedot, .presence__dot { animation: none !important; } .hotpath__pulse { animation: none !important; display: none !important; } .hotpath__line { background: var(--accent); } /* static accent connector */ .hero__glow { transition: none !important; transform: translateX(-50%) !important; /* ignore JS drift vars */ } .fork-tile::after { display: none !important; } .flow__step { transition: none !important; } .flow__step:hover { transform: none !important; } } /* ---- "+ more networks" ghost tile (network status strip) ---- */ .nettile--more { justify-content: center; align-items: center; background: transparent; border-style: dashed; border-color: var(--line-bright); text-align: center; gap: 0; } .nettile--more .nettile__more { font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-dim); line-height: 1.5; } .nettile--more .nettile__more strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--fg); margin-bottom: 0.4rem; } /* ---- CN: display headings render heavy ---------------------- Archivo Black is a single black weight and ignores font-weight, so bumping these to 900 is a no-op for Latin but makes the Noto Sans SC fallback render properly heavy for Chinese text. */ .display, .h2, .h3, .nav-overlay a, .fork-tile__seg, .nettile--more .nettile__more strong { font-weight: 900; } /* ---- Language switch (中 / EN) ------------------------------- */ .lang-switch { display: inline-flex; align-items: stretch; border: 1px solid var(--line-bright); } .lang-switch__opt { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; line-height: 1; letter-spacing: 0.04em; padding: 0.45rem 0.62rem; color: var(--fg-dim); text-decoration: none; display: inline-flex; align-items: center; transition: background-color 0.2s, color 0.2s; } .lang-switch__opt + .lang-switch__opt { border-left: 1px solid var(--line-bright); } .lang-switch__opt:hover { color: var(--fg); } .lang-switch__opt.is-active { background: var(--accent); color: #07140d; } .nav-overlay .lang-switch { margin-top: 1.75rem; align-self: center; } .nav-overlay .lang-switch__opt { font-size: 0.95rem; padding: 0.6rem 1.05rem; }