/* ============================================================ AWAKE theme tokens — shared by SaturnShop storefront + admin. Mirrors the portfolio / account chrome (style.css, account.css): paper / ink / mint sticker-OUTLINE / Anton display / grain. Client tint overrides paper/ink/mint via [data-brand] inline variables — never the type system or grain. ============================================================ */ /* ============================================================ PLATE TYPE SYSTEMS — self-hosted, latin subset. These are declared, not linked from a CDN, for three reasons: the storefront CSP can stay on 'self' without a font-src exception, there is no third-party request on a merchant's checkout, and a plate's face cannot silently vanish because someone else's stylesheet changed. Declaring a family costs nothing until a plate references it — the browser only fetches a face that is actually used, so a store on the press plate never downloads Oswald. ⚠ NAMING A FAMILY IS NOT LOADING IT. Before these existed, the industrial and swiss plates resolved `font-family: Oswald` / `Inter` and computed styles reported exactly that, while the glyphs on screen were the generic fallback. The only instrument that catches this is measuring a string against a DELIBERATELY NONSENSE family name: if the real face and "Zzzz No Such Font" render identical widths, neither is loading. document.fonts.check() returns true either way and is worthless here. Any new TYPE_SETS entry needs a face below and that measurement, or the plate ships with dead type. ============================================================ */ @font-face { font-family: "Oswald"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/oswald-600.woff2") format("woff2"); } @font-face { font-family: "Roboto Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/roboto-mono-400.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/inter-400.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/inter-700.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2"); } @font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/instrument-serif-400.woff2") format("woff2"); } /* Every token below is a PLATE variable — api/saturnshop/_lib/plate.mjs resolves a store's brand blob and store.js writes the results onto at boot. These :root values are the `press` plate (izzy's own language) and they are LOAD-BEARING, not decoration: a custom property that resolves to nothing takes its whole declaration down with it, so a storefront would paint unstyled in the window before the shop payload lands, and permanently if the fetch fails. Never delete one because "the server always sends it." */ :root { --paper: #ece7db; --paper-deep: #e0dac9; --ink: #141312; --muted: #6b675f; --accent: #d9e8cf; --accent-ink: #141312; /* --mint is the pre-plate name for --accent. Kept as an alias because store.css + admin.css still reference it in 8 places; aliasing beats a sweep that silently misses one and leaves a dead var behind. */ --mint: var(--accent); /* edge language */ --edge-w: 2px; --edge-r: 0px; --line: var(--edge-w) solid var(--ink); --line-soft: 1px solid rgba(20, 19, 18, 0.22); /* grid density */ --grid-min: 230px; --grid-gap: 22px; --grid-aspect: 1; /* type system */ --font: "Archivo", "Helvetica Neue", Arial, sans-serif; --display: "Anton", "Archivo", sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --display-case: uppercase; --display-tracking: 0.02em; --display-line: 0.95; --pad: clamp(16px, 3vw, 32px); --max: 1120px; } /* pavé glint — iced AWAKE seal (same as portfolio) */ .iced { filter: contrast(1.1) brightness(1.06) saturate(1.12) drop-shadow(-1px 0 0 rgba(76, 243, 255, 0.35)) drop-shadow(1px 0 0 rgba(255, 61, 207, 0.28)) drop-shadow(0 0 8px rgba(236, 231, 219, 0.35)); } .seal { display: block; width: 36px; height: auto; flex-shrink: 0; } .seal--sm { width: 28px; } .seal--md { width: 48px; } .seal--lg { width: clamp(56px, 8vw, 88px); } .footer-seal { width: clamp(48px, 7vw, 72px); height: auto; margin: 0 auto 14px; mix-blend-mode: screen; opacity: 0.95; } * { box-sizing: border-box; margin: 0; padding: 0; } [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { font-family: var(--font); background: var(--paper); color: var(--ink); font-weight: 500; line-height: 1.45; min-height: 100vh; -webkit-font-smoothing: antialiased; } ::selection { background: var(--mint); color: var(--ink); } h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; text-transform: var(--display-case); letter-spacing: var(--display-tracking); line-height: var(--display-line); } /* Serif and neo-grotesque display faces have real weight axes and look anaemic at 400, which Anton (a single-weight face) does not. */ [data-plate-type="swiss"] h1, [data-plate-type="swiss"] h2, [data-plate-type="swiss"] h3, [data-plate-type="swiss"] h4 { font-weight: 700; } [data-plate-type="industrial"] h1, [data-plate-type="industrial"] h2, [data-plate-type="industrial"] h3, [data-plate-type="industrial"] h4 { font-weight: 600; } a { color: inherit; } button { font: inherit; cursor: pointer; } img { max-width: 100%; display: block; } .grain { position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: 0.4; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Texture is the fastest read on "is this the same store?" — a clean surface next to a grained one registers as a different brand before any type or colour does. */ [data-plate-texture="clean"] .grain { display: none; } [data-plate-texture="halftone"] .grain { opacity: 0.5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Ccircle cx='1.5' cy='1.5' r='1' fill='rgba(0,0,0,0.16)'/%3E%3C/svg%3E"); background-size: 6px 6px; } .shell { width: min(100% - (var(--pad) * 2), var(--max)); margin-inline: auto; } /* ink chip wordmark — same move as portfolio header */ .brand-chip { display: inline-flex; align-items: center; background: var(--ink); color: var(--paper); font-family: var(--display); font-size: clamp(20px, 4vw, 28px); letter-spacing: 0.02em; padding: 6px 14px; text-decoration: none; text-transform: uppercase; } .btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; border: var(--edge-w) solid var(--ink); border-radius: var(--edge-r); background: var(--ink); color: var(--paper); padding: 12px 18px; transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease; } .btn:hover { background: var(--paper); color: var(--ink); box-shadow: 3px 3px 0 var(--accent); } /* Motion register. `cut` is not "no animation for accessibility" — it is an art direction: hard cuts read as confidence when the photography carries the page. Reduced-motion is handled separately at the bottom of this file and still wins over all three registers. */ [data-plate-motion="cut"] .btn { transition: none; } [data-plate-motion="cut"] .btn:hover { box-shadow: none; } [data-plate-motion="kinetic"] .btn { transition: background 0.18s cubic-bezier(0.2, 0.9, 0.3, 1), color 0.18s ease, box-shadow 0.18s ease, transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1); } [data-plate-motion="kinetic"] .btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--accent); } .btn--ghost { background: var(--paper); color: var(--ink); } .btn--ghost:hover { background: var(--ink); color: var(--paper); } .btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; } .chip { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 9px; border: 1.5px solid var(--ink); border-radius: var(--edge-r); } /* On the press plate the accent is a sticker OUTLINE and never fills — izzy's standing rule. Other plates own a real brand colour and are allowed to fill with it, so the rule is scoped to the plates whose accent is a mint sticker rather than applied globally. */ .chip--mint { box-shadow: inset 0 0 0 2px var(--accent); } [data-plate-type="industrial"] .chip--mint, [data-plate-type="swiss"] .chip--mint { box-shadow: none; background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .mono-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } input, select, textarea { font-family: var(--font); /* 16px floor is load-bearing on iOS: anything smaller makes Safari zoom the page on focus and the shopper loses the layout mid-checkout. */ font-size: 16px; font-weight: 600; border: var(--edge-w) solid var(--ink); background: var(--paper); color: var(--ink); padding: 11px 12px; border-radius: var(--edge-r); width: 100%; } /* The focus ring is deliberately NOT a plate token. A merchant picking a pale accent would otherwise ship an invisible focus state, so this always draws against ink and only borrows the accent as a second ring. */ input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--ink); outline-offset: 1px; box-shadow: 0 0 0 6px var(--accent); } .field { display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; font-weight: 700; text-transform: uppercase; } .panel { border: var(--line); border-radius: var(--edge-r); background: var(--paper); padding: 18px; } .tape { position: absolute; width: 84px; height: 22px; background: rgba(196, 186, 158, 0.55); transform: rotate(-4deg); top: -11px; left: 18px; } .powered { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .powered a { color: inherit; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }