/* ========================================================== BASE — reset, body, atmosphere, typography defaults ========================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--ink-950); color: var(--ink-100); font-family: var(--f-body); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { overflow-x: hidden; } img, video, svg { max-width: 100%; height: auto; display: block; } a { color: var(--lime-300); text-decoration: none; transition: color .2s; } a:hover { color: var(--lime-200); } ::selection { background: var(--lime-300); color: var(--ink-950); } /* —— Atmosphere layers (apply once on ) —— */ body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; } body::before { background: radial-gradient(900px 600px at 12% 8%, rgba(132,204,22,.08), transparent 60%), radial-gradient(1100px 700px at 92% 38%, rgba(56,189,248,.04), transparent 60%), radial-gradient(700px 500px at 50% 110%, rgba(163,230,53,.06), transparent 60%); } body::after { background-image: linear-gradient(rgba(163,230,53,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(163,230,53,.04) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%); } /* Scanlines overlay (optional — add class .has-scanlines on ) */ body.has-scanlines::before { background-image: radial-gradient(900px 600px at 12% 8%, rgba(132,204,22,.08), transparent 60%), repeating-linear-gradient(to bottom, rgba(255,255,255,.015) 0 1px, transparent 1px 3px); } main, header, footer, section, article { position: relative; z-index: 1; } /* —— Layout primitives —— */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } .wrap-narrow { max-width: var(--maxw-narrow); margin: 0 auto; padding: 0 var(--gutter); } .section { padding: 64px 0; } .section-sm { padding: 40px 0; } .section-lg { padding: 96px 0; } @media (max-width: 768px) { .section { padding: 48px 0; } .section-sm { padding: 32px 0; } .section-lg { padding: 64px 0; } } /* —— Headings (default site-wide) —— */ h1, h2, h3, h4 { font-family: var(--f-ui); color: var(--ink-50); letter-spacing: -.005em; text-wrap: balance; margin: 0 0 .5em; } h1 { font-size: clamp(32px, 5vw, 48px); line-height: 1.1; font-weight: 700; } h2 { font-size: clamp(24px, 3.4vw, 34px); line-height: 1.15; font-weight: 700; } h3 { font-size: clamp(18px, 2vw, 22px); line-height: 1.25; font-weight: 700; } h4 { font-size: 16px; line-height: 1.3; font-weight: 600; } .display, .display h1, .display h2 { font-family: var(--f-display); text-transform: uppercase; letter-spacing: -.01em; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--lime-300); padding: 6px 12px; border: 1px solid rgba(163,230,53,.3); border-radius: var(--r-sm); background: rgba(163,230,53,.06); } .eyebrow::before { content: ""; width: 6px; height: 6px; background: var(--lime-300); border-radius: 999px; box-shadow: 0 0 10px var(--lime-300); animation: ccg-pulse 1.6s ease-in-out infinite; } @keyframes ccg-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.85); } } .label-mono { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-400); } .section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; } .section-head h2 { margin: 8px 0 0; font-family: var(--f-display); text-transform: uppercase; } .divider { height: 1px; background: rgba(163,230,53,.1); margin: 32px 0; border: 0; } /* —— Skip link (a11y) —— */ .skip-link { position: absolute; top: -100px; left: 12px; background: var(--lime-300); color: var(--ink-950); padding: 10px 16px; border-radius: var(--r-sm); font-weight: 700; z-index: 200; } .skip-link:focus { top: 12px; } /* —— Visually hidden —— */ .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; } /* —— Scrollbar —— */ @media (min-width: 769px) { ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--ink-950); } ::-webkit-scrollbar-thumb { background: var(--ink-700); border-radius: 8px; border: 2px solid var(--ink-950); } ::-webkit-scrollbar-thumb:hover { background: var(--lime-700); } }