/* ============================================================================ SCP ECOSYSTEM — SHARED DESIGN TOKENS One family, three personalities. Cere Protocol + Dragon 1 + the marketplace layer. Grounded in ~/company-memory-bank/. Reference bar: ~/continuity/. Usage: or add class "light" on for the light theme. ============================================================================ */ /* ---------- FAMILY DNA (shared across every SCP-ecosystem site) ---------- */ :root { /* spatial system */ --maxw: 1180px; --gutter: 28px; --sec-pad: 120px; /* radii */ --r-pill: 999px; --r-lg: 22px; --r-md: 14px; --r-sm: 10px; /* motion */ --ease: cubic-bezier(.2, .7, .2, 1); --ease-expo: cubic-bezier(.16, 1, .3, 1); --dur: .7s; /* z-index */ --z-nav: 40; --z-ribbon: 35; --z-dialog: 60; /* family type — mono ties the three sites together */ --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --eyebrow-size: 11px; --eyebrow-track: .22em; } /* ============================================================================ CERE PROTOCOL — the standard / substrate Cold ink, electric indigo structure, signal-mint verification. "Math, not promises." RFC-grade, calm cryptographic authority. ============================================================================ */ [data-brand="protocol"] { /* LIGHT editorial "standard / journal" — the inverse of the infra console. Bone paper, near-black ink, one cold indigo accent, mint only for verified. */ --bg: #FAFAF8; /* warm bone paper */ --bg-2: #FFFFFF; --panel: #FFFFFF; --panel-2: #F4F3F0; --ink: #0E0E16; /* near-black headlines */ --body: #4A4860; /* slate body */ --muted: #8B889C; /* captions, eyebrows */ --faint: #D6D4E2; /* hairlines */ --struct: #4B3FE0; /* electric indigo — structure, links */ --struct-2: #6E5CF0; /* lifted indigo */ --struct-3: #3A2FC4; /* deep indigo for text accents on light */ --verify: #0E9F76; /* signal mint — signed / verified ONLY */ --line: rgba(20,16,50,.12); --line-2: rgba(20,16,50,.06); --gb-paint: linear-gradient(150deg, rgba(75,63,224,.35), rgba(75,63,224,.06) 48%, rgba(14,159,118,.28)); --display: "Geist", system-ui, sans-serif; --body-font: "Geist", system-ui, sans-serif; --accent-font: "Geist", system-ui, sans-serif; /* soft light-mode elevation */ --soft: 0 1px 2px rgba(30,24,70,.05), 0 4px 12px -4px rgba(30,24,70,.08), 0 18px 40px -18px rgba(30,24,70,.12), 0 40px 80px -40px rgba(40,30,120,.16); --lift: 0 2px 6px rgba(30,24,70,.08), 0 16px 34px -12px rgba(30,24,70,.14), 0 50px 90px -40px rgba(40,30,120,.22); --glow-a: rgba(75,63,224,.12); --glow-b: rgba(14,159,118,.07); } /* ============================================================================ DRAGON 1 — the infrastructure cluster Graphite metal, ember heat (running compute), cyan verification (storage / SLA met). Operational, alive, jurisdictional. The only nod to "dragon" is heat. ============================================================================ */ [data-brand="dragon1"] { /* surfaces (dark, default) */ --bg: #0B0D10; --bg-2: #0F1216; --panel: #13171C; --panel-2: #1A1F26; --ink: #EAEEF2; --body: #A4ACB6; --muted: #6B7480; --faint: #353D47; /* accents */ --struct: #FF7A3D; /* ember — running compute, heat, primary action */ --struct-2: #FFB057; /* amber lift */ --struct-3: #FF5470; /* magenta heat-peak for gradient ends */ --verify: #34D6E0; /* cyan — storage, on-chain commitment met */ /* lines + strict border-elevation hierarchy (Supabase console move) */ --line: rgba(150,170,190,.12); --line-2: rgba(150,170,190,.06); --edge-1: #1A1F26; /* base panel border */ --edge-2: #242a32; /* raised */ --edge-3: #333a44; /* hover / focus */ --gb-paint: linear-gradient(150deg, rgba(255,176,87,.5), rgba(255,84,112,.16) 48%, rgba(52,214,224,.3)); /* fonts */ --display: "Archivo", system-ui, sans-serif; --body-font: "Archivo", system-ui, sans-serif; --accent-font: "Archivo", system-ui, sans-serif; /* no serif; weight + ember does the accent */ --soft: 0 1px 2px rgba(0,0,0,.45), 0 4px 10px -3px rgba(0,0,0,.5), 0 14px 30px -10px rgba(0,0,0,.55), 0 30px 60px -24px rgba(255,110,50,.16); --lift: 0 2px 4px rgba(0,0,0,.5), 0 12px 28px -8px rgba(0,0,0,.6), 0 44px 84px -32px rgba(255,90,60,.30); --glow-a: rgba(255,122,61,.20); --glow-b: rgba(52,214,224,.12); } [data-brand="dragon1"].light { --bg: #F4F2EF; /* warm concrete */ --bg-2: #FBFAF8; --panel: #FFFFFF; --panel-2: #F0EDE8; --ink: #1A1714; --body: #4A4640; --muted: #756E64; --faint: #CFC8BD; --struct: #E8551B; --struct-2: #F08A2E; --struct-3: #E03A5C; --verify: #0E97A0; --line: rgba(40,30,20,.13); --line-2: rgba(40,30,20,.06); --gb-paint: linear-gradient(150deg, rgba(232,85,27,.4), rgba(224,58,92,.10) 48%, rgba(14,151,160,.3)); --soft: 0 1px 2px rgba(60,40,20,.06), 0 4px 10px -3px rgba(60,40,20,.09), 0 14px 30px -10px rgba(60,40,20,.11), 0 30px 60px -24px rgba(60,40,20,.13); --lift: 0 2px 4px rgba(60,40,20,.08), 0 12px 28px -8px rgba(60,40,20,.14), 0 44px 84px -32px rgba(60,40,20,.18); --glow-a: rgba(232,85,27,.14); --glow-b: rgba(14,151,160,.08); } /* ============================================================================ BASE ELEMENTS — shared structure, driven by the tokens above ============================================================================ */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--body); font-family: var(--body-font); font-size: 16.5px; line-height: 1.62; letter-spacing: .002em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; transition: background .4s var(--ease), color .4s var(--ease); } /* atmospheric vignette + drifting glow blobs (per-brand glow tokens) */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(900px 600px at 78% -8%, var(--glow-a), transparent 60%), radial-gradient(700px 520px at 8% 108%, var(--glow-b), transparent 62%); } body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background: radial-gradient(130% 110% at 50% -12%, transparent 58%, rgba(0,0,0,.22) 100%); } .light body::after { background: radial-gradient(130% 110% at 50% -12%, transparent 60%, rgba(40,30,20,.05) 100%); } h1, h2, h3 { font-family: var(--display); color: var(--ink); font-weight: 620; letter-spacing: -.025em; line-height: 1.06; margin: 0; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } a { color: var(--struct); text-decoration: none; } /* headline accent words */ h1 em, h2 em { font-family: var(--accent-font); font-style: italic; font-weight: 500; letter-spacing: 0; background: linear-gradient(100deg, var(--struct-3), var(--struct-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-brand="dragon1"] h1 em, [data-brand="dragon1"] h2 em { font-style: normal; font-weight: 800; } /* layout */ .wrap { width: min(var(--maxw), calc(100% - var(--gutter) * 2)); margin-inline: auto; } .sec { padding: var(--sec-pad) 0; position: relative; } /* eyebrow / kicker — the family mono signature */ .eyebrow { font-family: var(--mono); font-size: var(--eyebrow-size); letter-spacing: var(--eyebrow-track); text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 9px; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--struct); opacity: .8; } /* gradient-hairline panel (family signature border) */ .gb { position: relative; border-radius: var(--r-lg); background: var(--panel); border: 1px solid transparent; background-image: linear-gradient(var(--panel), var(--panel)), var(--gb-paint); background-origin: border-box; background-clip: padding-box, border-box; box-shadow: var(--soft); } /* buttons */ .btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--body-font); font-weight: 620; font-size: 15px; letter-spacing: -.01em; height: 50px; padding: 0 24px; border-radius: var(--r-sm); border: 1px solid transparent; cursor: pointer; transition: transform .25s var(--ease), filter .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease); } .btn svg { width: 17px; height: 17px; } .btn-primary { background: var(--struct); color: #fff; box-shadow: 0 10px 26px -12px var(--struct); } [data-brand="dragon1"] .btn-primary { color: #1a0d04; } .btn-primary:hover { transform: translateY(-2px); filter: brightness(1.07); } .btn-primary:active { transform: translateY(0) scale(.985); } .btn-ghost { background: color-mix(in srgb, var(--panel) 60%, transparent); color: var(--ink); border-color: var(--line); backdrop-filter: blur(8px); } .btn-ghost:hover { border-color: var(--struct); transform: translateY(-2px); } /* reveal on scroll */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease-expo), transform .8s var(--ease-expo); } .reveal.in { opacity: 1; transform: none; } /* cross-document view transitions — shared-element ecosystem logo morph */ @view-transition { navigation: auto; } .eco-logo { view-transition-name: scp-logo; } /* reduced motion: kill everything that breathes */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } html { scroll-behavior: auto; } } @media (max-width: 860px) { :root { --sec-pad: 84px; } body { font-size: 16px; } } /* ============================================================================ MOTION FX — "instructional elegance": physics, tactile, calm, zero-jank ============================================================================ */ :root { --spring: cubic-bezier(.34, 1.5, .5, 1); --ease-tactile: cubic-bezier(.2, .85, .25, 1); } /* tactile buttons: settle on hover, press on active */ .btn { will-change: transform; } .btn:active { transform: scale(.955); transition: transform .07s var(--ease-tactile); } /* sculpted components settle with mass on hover */ .card, .tile, .ecocard, .part, .eco-card { transition: transform .38s var(--spring), border-color .25s var(--ease), box-shadow .32s var(--ease), background .25s var(--ease); } /* zero-JS scroll progress (native scroll-driven, Chrome) */ .scrollbar-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; transform: scaleX(0); transform-origin: 0 50%; z-index: 70; background: linear-gradient(90deg, var(--struct), var(--verify)); } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: scroll()) { .scrollbar-progress { animation: scp auto linear; animation-timeline: scroll(root block); } @keyframes scp { to { transform: scaleX(1); } } } } /* cursor-tracked material layer (set --mx/--my via motion.js) */ .material, .sheen { position: absolute; pointer-events: none; transition: background .18s linear; }