/* ========================================================================== PC Pals: design tokens (owned by the design lead) -------------------------------------------------------------------------- Every colour is lifted from the art (art.py palettes), so UI and tokens read as one pixel world. Mint + pot builders: style ONLY with these vars. THE PIXEL RULE - 1 art pixel = var(--px) = 4px on screen (a 64x64 token shown at 256px). - Borders are "notched" pixel outlines built from box-shadow (var(--ring)), never border-radius. Corners stay square + stepped. - Shadows are hard offsets (no blur): var(--drop), var(--ring-drop). - Every size is a multiple of 4px (spacing scale below). - Imagery: add class .px or `image-rendering: pixelated`. RECIPES .card { background: var(--c-panel); box-shadow: var(--ring-drop); } .btn { font: var(--f-btn); background: var(--c-cta); color: var(--c-cta-ink); box-shadow: var(--ring), var(--drop); } .btn:hover { transform: translateY(calc(var(--px) * -1)); } .btn:active { transform: translateY(var(--px)); box-shadow: var(--ring); } screen-like readouts (the PC's face): background: var(--c-screen); color: var(--glow); font-family: var(--f-pixel); text-shadow: var(--glow-text); ========================================================================== */ @font-face { font-family: "Pixelify"; src: url("../fonts/pixelify-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* Pixelify's bold 5 reads as "S": digits inside the Pixelify family come from Silkscreen Bold. */ @font-face { font-family: "Pixelify"; src: url("../fonts/silkscreen-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0030-0039; } @font-face { font-family: "Silkscreen"; src: url("../fonts/silkscreen-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Grotesk"; src: url("../fonts/spacegrotesk-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Grotesk"; src: url("../fonts/spacegrotesk-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Grotesk"; src: url("../fonts/spacegrotesk-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { /* ---- Art palette: backgrounds (exact art.py values) ---------------- */ --blue: #087BFD; --sky: #38BAFE; --cyan: #07CFE9; --pink: #FD5894; --yellow: #FED61B; --purple: #7141EA; --lavender: #B496FA; --orange: #FD751D; --red: #F54336; --green: #35B75F; --lime: #96D628; --mint: #64DEAA; --peach: #FFA888; --cream: #F8EED0; --charcoal: #2C2E38; /* ---- Deep tones (for shadows / shade sides of each colour) ---------- */ --blue-deep: #0559C4; --purple-deep: #4E26B5; --pink-deep: #C92F6C; --green-deep: #1F8443; --orange-deep: #C4520C; --yellow-deep: #D9A800; /* ---- Structural: outline, screens, paper ---------------------------- */ --k: #0A0A0C; /* the art's outline black: ALL borders use this */ --screen: #121216; /* PC screen (face) */ --screen-2: #1C1C24; /* raised surface on a screen */ --paper: #FFFFFF; --shoe: #FAFAFC; /* sneaker white: off-white for light panels */ --grey: #96969A; /* case top / seams */ --grey-2: #56585E; /* case panel */ /* ---- Glows (LED + face colours) ------------------------------------- */ --glow-cyan: #00D2FA; --glow-green: #50E246; --glow-red: #F0322C; --glow-pink: #FF60AC; --glow-yellow: #FFD228; --glow-purple: #B060FF; --glow-orange: #FF8C1E; --glow-lime: #BEFF3C; --glow: var(--glow-cyan); /* default readout colour */ --glow-text: 0 0 8px color-mix(in srgb, var(--glow) 55%, transparent); /* ---- Semantic roles (use these in components) ----------------------- */ --c-ink: var(--k); /* text on light/colour surfaces */ --c-ink-soft: #3A3A46; /* secondary text on light */ --c-ink-inv: var(--paper); /* text on dark / saturated surfaces */ --c-ink-inv-soft: rgba(255,255,255,.78); --c-panel: var(--shoe); /* light card / window body */ --c-panel-2: #ECECF2; /* inset on a light card */ --c-screen: var(--screen); /* dark readout surface (the "face") */ --c-titlebar: var(--purple); /* window title bars */ --c-cta: var(--yellow); /* primary action (Mint, Claim) */ --c-cta-ink: var(--k); --c-cta-hover: #FFE45C; --c-alt: var(--paper); /* secondary button */ --c-ok: var(--glow-green); --c-live: var(--glow-green); --c-soon: var(--glow-cyan); --c-cool: var(--glow-orange); /* cooldown / rebooting */ --c-done: var(--pink); /* sold out */ --c-err: var(--red); /* errors: text + icon, never a big yellow bar */ --c-focus: var(--glow-cyan); /* ---- Type ------------------------------------------------------------ */ --f-display: "Pixelify", "Silkscreen", ui-monospace, monospace; /* headlines */ --f-pixel: "Silkscreen", "Pixelify", ui-monospace, monospace; /* labels, readouts, buttons */ --f-body: "Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --f-btn: 400 16px/1 var(--f-pixel); /* Silkscreen is crisp at multiples of 8px: 8, 16, 24, 32 */ --t-pixel-s: 8px; --t-pixel: 16px; --t-pixel-l: 24px; --t-xs: 12px; --t-sm: 14px; --t-md: 16px; --t-lg: 20px; --t-xl: 28px; --t-2xl: 40px; --t-3xl: clamp(40px, 5.2vw, 72px); --lh-tight: 1.05; --lh-body: 1.55; /* ---- Pixel unit + spacing (4px grid) -------------------------------- */ --px: 4px; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; /* ---- Radii: pixel world = square. Only use --r-0. -------------------- */ --r-0: 0; /* ---- Pixel outlines + hard shadows ---------------------------------- --ring 4-sided outline with notched (stepped) corners --ring-2 same, 8px (for hero-scale windows) --drop hard drop shadow down-right (combine with --ring) --ring-drop outline + drop, the default card treatment --ring-inset outline drawn inside (for inputs / wells) */ --ring: 0 calc(var(--px) * -1) 0 0 var(--k), 0 var(--px) 0 0 var(--k), calc(var(--px) * -1) 0 0 0 var(--k), var(--px) 0 0 0 var(--k); --ring-2: 0 -8px 0 0 var(--k), 0 8px 0 0 var(--k), -8px 0 0 0 var(--k), 8px 0 0 0 var(--k), -4px -4px 0 0 var(--k), 4px -4px 0 0 var(--k), -4px 4px 0 0 var(--k), 4px 4px 0 0 var(--k); --drop: 8px 12px 0 0 rgba(10, 10, 12, .28); --ring-drop: var(--ring), var(--drop); --ring-inset: inset 0 var(--px) 0 0 var(--k), inset 0 calc(var(--px) * -1) 0 0 var(--k), inset var(--px) 0 0 0 var(--k), inset calc(var(--px) * -1) 0 0 0 var(--k); --bevel: inset 0 calc(var(--px) * -1) 0 0 rgba(10,10,12,.22), inset 0 var(--px) 0 0 rgba(255,255,255,.45); /* ---- Motion (animate transform + opacity only) ---------------------- */ --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-snap: cubic-bezier(.3, 1.4, .5, 1); --steps-px: steps(4, end); /* chunky pixel tweens */ --dur-1: 120ms; --dur-2: 240ms; --dur-3: 480ms; /* ---- Layout ----------------------------------------------------------- */ --nav-h: 72px; /* header height: sections use scroll-margin-top: var(--nav-h) */ --wrap: 1120px; /* content width (fits the 1170px laptop with gutters) */ --gutter: clamp(16px, 4vw, 40px); --z-scene: 0; --z-content: 2; --z-nav: 50; --z-modal: 100; --z-toast: 120; /* Reduced motion SLOWS and softens; it never hides the art. */ --motion: 1; /* parallax / travel amplitude multiplier */ --loop: 1; /* loop duration multiplier (walks, marquees) */ } @media (prefers-reduced-motion: reduce) { :root { --motion: .25; --loop: 3; --dur-3: 240ms; } }