/* ===================================================== CorpoCoders — Public Site Foundation Brand: #0F3DDE (deep blue) · #00C2FF (cyan) Type: Space Grotesk (falls back to Plus Jakarta Sans) The shared base for every public page. Load this BEFORE any page stylesheet. Page CSS may use these tokens but must not redefine them — see CLAUDE.md §1. Contents 1. Space Grotesk @font-face 2. Tokens — brand, type, radius, motion 3. Theme tokens — dark (default) + light 4. Base reset ===================================================== */ /* ========================= 1. Space Grotesk Drop the .woff files into public/assets/system/fonts/space-grotesk/ Until then the stack falls back to Plus Jakarta Sans, which is already self-hosted. No Google Fonts CDN. (CLAUDE.md task 0.1) ========================= */ @font-face { font-family: 'Space Grotesk'; src: url('../../system/fonts/space-grotesk/SpaceGrotesk-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Space Grotesk'; src: url('../../system/fonts/space-grotesk/SpaceGrotesk-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Space Grotesk'; src: url('../../system/fonts/space-grotesk/SpaceGrotesk-SemiBold.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Space Grotesk'; src: url('../../system/fonts/space-grotesk/SpaceGrotesk-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } /* ========================= 2. TOKENS Theme-independent. Never hard-code a colour in a rule — add a token. ========================= */ :root { --cc-brand-1: #0F3DDE; --cc-brand-2: #00C2FF; --cc-grad: linear-gradient(135deg, #0F3DDE 0%, #00C2FF 100%); --cc-grad-soft: linear-gradient(135deg, rgba(15, 61, 222, .14), rgba(0, 194, 255, .14)); --cc-secondary: #7C3AED; --cc-success: #16A34A; --cc-font: 'Space Grotesk', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --cc-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --cc-danger: #DC2626; --cc-warning: #F59E0B; --cc-r-sm: 10px; --cc-r-md: 14px; --cc-r-lg: 20px; --cc-r-xl: 28px; --cc-max: 1180px; --cc-t: .32s cubic-bezier(.4, 0, .2, 1); /* Spacing — 4px base. Use these for new work; the coming-soon page keeps its hand-tuned values and is not retrofitted. */ --cc-s-1: 4px; --cc-s-2: 8px; --cc-s-3: 12px; --cc-s-4: 16px; --cc-s-5: 20px; --cc-s-6: 24px; --cc-s-7: 32px; --cc-s-8: 40px; --cc-s-9: 48px; --cc-s-10: 56px; --cc-s-11: 72px; --cc-s-12: 96px; /* Z-index — the only place layer order is decided. Never invent a value. Note: .cs-cell uses a LOCAL 0/1/2 stack inside its own stacking context (glow / content / brackets); that is unrelated to this scale. */ --cc-z-bg: 0; --cc-z-content: 1; --cc-z-sticky: 100; --cc-z-header: 200; --cc-z-drawer: 300; --cc-z-overlay: 400; --cc-z-modal: 500; --cc-z-popover: 600; --cc-z-toast: 700; --cc-z-tooltip: 800; } /* ========================= 3. THEME TOKENS Applied via data-theme on , set pre-paint by an inline script and persisted in localStorage under `cc-theme`. Dark is the default. --cc-tx-3 alphas are tuned to a WCAG AA floor, not picked by eye. If you change a background token, re-measure. (CLAUDE.md §1.9) ========================= */ /* Dark (default) — near-black with a faint blue cast. The brand colour lives in the accents, not the backdrop. */ :root, :root[data-theme="dark"] { --cc-bg: #05070D; --cc-bg-2: #03050A; --cc-surface: rgba(255, 255, 255, .032); --cc-surface-2: rgba(255, 255, 255, .055); --cc-border: rgba(255, 255, 255, .075); --cc-border-str: rgba(255, 255, 255, .15); --cc-tx-1: #EEF3FB; --cc-tx-2: rgba(238, 243, 251, .64); /* .50 keeps small muted text (tags, labels, footer) at 4.5:1 — WCAG AA. Anything below ~.48 fails against this near-black background. */ --cc-tx-3: rgba(238, 243, 251, .50); --cc-shadow: 0 24px 60px -18px rgba(0, 0, 0, .8); --cc-glow: 0 0 0 1px rgba(0, 194, 255, .12), 0 18px 50px -18px rgba(15, 61, 222, .3); /* Slightly stronger than a top-only fade needs — the grid now covers the whole page (see .hm-grid), so it must stay legible mid-scroll. */ --cc-grid-line: rgba(255, 255, 255, .04); --cc-orb-o: .16; --cc-glass-bg: rgba(255, 255, 255, .045); --cc-glass-bg-strong: rgba(255, 255, 255, .075); --cc-glass-solid: #0C1018; --cc-scrim: rgba(0, 0, 0, .68); } /* Light — kept deliberately airy. The brand shows in small accents, not in heavy borders or strong orbs, so the canvas stays light and low-contrast. Text tokens (tx-1/2/3) are AA-measured — do not lighten those. */ :root[data-theme="light"] { --cc-bg: #FBFCFE; --cc-bg-2: #F3F6FB; --cc-surface: #FFFFFF; --cc-surface-2: #FFFFFF; --cc-border: rgba(15, 23, 42, .06); --cc-border-str: rgba(15, 23, 42, .11); --cc-tx-1: #0F172A; --cc-tx-2: rgba(15, 23, 42, .68); /* Same AA floor as dark — .46 measured only 3:1 on this background. */ --cc-tx-3: rgba(15, 23, 42, .62); --cc-shadow: 0 16px 40px -22px rgba(15, 23, 42, .12); --cc-glow: 0 0 0 1px rgba(15, 61, 222, .06), 0 16px 40px -20px rgba(15, 61, 222, .12); --cc-grid-line: rgba(15, 23, 42, .035); --cc-orb-o: .12; --cc-glass-bg: rgba(255, 255, 255, .70); --cc-glass-bg-strong: rgba(255, 255, 255, .88); --cc-glass-solid: #FFFFFF; --cc-scrim: rgba(15, 23, 42, .45); } /* ========================= 4. BASE ========================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; background: var(--cc-bg); color: var(--cc-tx-1); font-family: var(--cc-font); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background var(--cc-t), color var(--cc-t); } h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -.02em; font-weight: 700; } p { margin: 0; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--cc-brand-2); outline-offset: 3px; border-radius: 6px; } /* ========================= 5. GLASS UTILITIES Opt-in. Glass over a busy backdrop hurts text contrast — use it for chrome (headers, popovers, overlays), not for long-form content. ========================= */ .cc-glass, .cc-glass-strong { border: 1px solid var(--cc-border); background: var(--cc-glass-bg); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); } .cc-glass-strong { background: var(--cc-glass-bg-strong); -webkit-backdrop-filter: blur(26px) saturate(160%); backdrop-filter: blur(26px) saturate(160%); } /* Firefox <103 and anything else without backdrop-filter gets an opaque panel rather than unreadable semi-transparent text. */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .cc-glass, .cc-glass-strong { background: var(--cc-glass-solid); } } /* ========================= 6. MOTION Lives here — not in a separate file — so the reveal gate is always parsed before first paint. A late-loading gate would flash the content visible and then hide it. The gate class `cc-motion` is added by motion.js. Without JS, without IntersectionObserver, or with prefers-reduced-motion, the class is never added and everything renders normally. (CLAUDE.md §1.8) ========================= */ :root.cc-motion [data-cc-reveal] { opacity: 0; transform: translateY(20px); transition: opacity var(--cc-reveal-dur, .7s) ease, transform var(--cc-reveal-dur, .7s) cubic-bezier(.2, .7, .3, 1); } :root.cc-motion [data-cc-reveal="fade"] { transform: none; } :root.cc-motion [data-cc-reveal="scale"] { transform: scale(.96); } :root.cc-motion [data-cc-reveal="left"] { transform: translateX(-22px); } :root.cc-motion [data-cc-reveal="right"] { transform: translateX(22px); } :root.cc-motion [data-cc-reveal].is-in { opacity: 1; transform: none; } /* Counters — stop digits jittering as they tick */ .cc-counter { font-variant-numeric: tabular-nums; } /* Marquee — CSS-driven in both engines; GSAP adds nothing to an infinite linear loop. motion.js duplicates the track and sets the duration, so the -50% translate is always seamless. */ .cc-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .cc-marquee-track { display: flex; align-items: center; gap: var(--cc-s-3); width: max-content; animation: cc-marquee var(--cc-marquee-dur, 34s) linear infinite; } .cc-marquee[data-cc-direction="right"] .cc-marquee-track { animation-direction: reverse; } .cc-marquee:hover .cc-marquee-track, .cc-marquee:focus-within .cc-marquee-track { animation-play-state: paused; } @keyframes cc-marquee { to { transform: translate3d(-50%, 0, 0); } } @media (prefers-reduced-motion: reduce) { .cc-marquee-track { animation: none; } :root.cc-motion [data-cc-reveal] { opacity: 1; transform: none; transition: none; } } /* Screen-reader-only, for icon-only controls and skip links */ .cc-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; }