/* ============================================================================ PIXEL ACADEMY — DESIGN TOKENS Direction 04 "Signal" · Satoshi single family Version 1.1.0 · 2026-08-17 Load order: 1. fonts (Satoshi, DM Mono, Noto Sans Georgian) 2. this file 3. component styles Themes: Dark is the default and the native theme. Light exists for print, A4 documents and any light-mode surface. Switch with or let the OS decide. ========================================================================= */ /* ---------------------------------------------------------------------------- FONTS Production self-hosts these. The CDN lines are for prototypes only. Satoshi — Fontshare, ITF Free Font Licence, free for commercial use DM Mono — Google Fonts, OFL Noto Sans Georgian — Google Fonts, OFL -------------------------------------------------------------------------- */ /* @import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+Georgian:wght@400;500;700&display=swap'); */ /* ---------------------------------------------------------------------------- GEORGIAN DISPLAY — TBC Contractica CAPS Mtavruli forms, so it is a title face only. Georgian body copy stays on Noto Sans Georgian: a paragraph set in caps is unreadable in any script. Source TTFs live in /fonts at the project root. These are woff2, 36KB each. Confirm the redistribution licence with TBC before this package is handed on. -------------------------------------------------------------------------- */ @font-face{ font-family:'TBC Contractica CAPS'; font-style:normal; font-weight:900; src:url('fonts/TBCContracticaCAPS-Black.woff2') format('woff2'); font-display:swap; } @font-face{ font-family:'TBC Contractica CAPS'; font-style:normal; font-weight:700; src:url('fonts/TBCContracticaCAPS-Bold.woff2') format('woff2'); font-display:swap; } @font-face{ font-family:'TBC Contractica CAPS'; font-style:normal; font-weight:500; src:url('fonts/TBCContracticaCAPS-Medium.woff2') format('woff2'); font-display:swap; } :root{ /* ========================================================================== 1 · PRIMITIVES Raw values. Never reference these directly in a component. ====================================================================== */ /* night ramp */ --pa-night-900:#08090C; --pa-night-800:#0C0E13; --pa-night-700:#12151C; --pa-night-600:#191D26; --pa-night-500:#232833; /* day ramp */ --pa-day-000:#FFFFFF; --pa-day-100:#F7F8FA; --pa-day-200:#EFF1F5; --pa-day-300:#E3E7ED; /* neutral type ramp */ --pa-grey-050:#F4F6FA; --pa-grey-300:#A6ADBB; --pa-grey-500:#6E7686; --pa-grey-700:#454C5A; --pa-grey-900:#0C0E13; /* accents — fill values, tuned for a dark surface */ --pa-green-fill:#00E5A0; --pa-violet-fill:#7C4DFF; --pa-crimson-fill:#FF2D6F; --pa-amber-fill:#FFB020; --pa-cyan-fill:#3AC5FF; /* gradient mid-stop only, never used alone */ /* accents — text values, darkened to clear 4.5:1 on white */ --pa-green-text:#007A59; --pa-violet-text:#5B29E8; --pa-crimson-text:#D40045; --pa-amber-text:#8A5C08; /* accents — text values on night, lightened for the same reason */ --pa-green-on-night:#00E5A0; --pa-violet-on-night:#B49BFF; --pa-crimson-on-night:#FF7CA3; --pa-amber-on-night:#FFB020; /* ========================================================================== 2 · SEMANTIC TOKENS — DARK (default) These are the only colour values a component may use. ====================================================================== */ --pa-surface-base:var(--pa-night-900); /* page */ --pa-surface-sunken:var(--pa-night-800); /* full-bleed sections */ --pa-surface-raised:var(--pa-night-700); /* cards, sheets */ --pa-surface-overlay:var(--pa-night-600);/* hover, popovers, menus */ --pa-text-strong:var(--pa-grey-050); /* headlines · 17.4:1 */ --pa-text-default:var(--pa-grey-300); /* body · 8.1:1 */ --pa-text-muted:var(--pa-grey-500); /* captions · 4.6:1 */ --pa-text-disabled:var(--pa-grey-700); /* non-text only */ --pa-text-on-accent:#04120C; /* on green, gradient, amber fills */ --pa-text-on-accent-alt:#FFFFFF; /* on violet and crimson fills */ --pa-border:rgba(255,255,255,.09); --pa-border-subtle:rgba(255,255,255,.05); --pa-border-strong:rgba(255,255,255,.22); --pa-accent:var(--pa-green-fill); --pa-accent-text:var(--pa-green-on-night); --pa-accent-soft:rgba(0,229,160,.13); --pa-accent-border:rgba(0,229,160,.30); --pa-learn:var(--pa-violet-fill); --pa-learn-text:var(--pa-violet-on-night); --pa-learn-soft:rgba(124,77,255,.16); --pa-learn-border:rgba(124,77,255,.34); --pa-alert:var(--pa-crimson-fill); --pa-alert-text:var(--pa-crimson-on-night); --pa-alert-soft:rgba(255,45,111,.14); --pa-alert-border:rgba(255,45,111,.32); --pa-asset:var(--pa-amber-fill); --pa-asset-text:var(--pa-amber-on-night); --pa-asset-soft:rgba(255,176,32,.14); --pa-asset-border:rgba(255,176,32,.32); /* Two gradients. One angle. Never invent a third. */ --pa-gradient-signal:linear-gradient(96deg,#00E5A0 0%,#3AC5FF 42%,#7C4DFF 100%); --pa-gradient-heat:linear-gradient(96deg,#FF2D6F 0%,#FFB020 100%); /* The aurora. One per screen, on the page background, never on a card. */ --pa-aurora: radial-gradient(52% 62% at 22% 0%, rgba(0,229,160,.20), transparent 68%), radial-gradient(46% 58% at 78% 8%, rgba(124,77,255,.22), transparent 70%); /* Depth comes from surface value plus a 1px edge, not from drop shadows. The only shadow in the system is the hover glow on a primary action. */ --pa-glow-accent:0 6px 28px rgba(0,229,160,.28); --pa-glow-heat:0 6px 28px rgba(255,45,111,.26); --pa-shadow-overlay:0 24px 70px rgba(0,0,0,.6); /* ========================================================================== 3 · TYPOGRAPHY One family. Hierarchy is weight first, size second. ====================================================================== */ --pa-font-sans:'Satoshi','Noto Sans Georgian','FiraGO',system-ui,sans-serif; --pa-font-mono:'DM Mono',ui-monospace,'SFMono-Regular',monospace; --pa-font-georgian:'Noto Sans Georgian','FiraGO',sans-serif; --pa-font-georgian-display:'TBC Contractica CAPS','Noto Sans Georgian',sans-serif; --pa-weight-body:400; --pa-weight-ui:500; --pa-weight-head:700; --pa-weight-display:900; /* size · weight · tracking · leading, as one token each */ --pa-display-xl:900 clamp(38px,6.6vw,86px)/1.0 var(--pa-font-sans); --pa-display-lg:900 clamp(34px,5.4vw,68px)/1.0 var(--pa-font-sans); --pa-display-md:700 clamp(24px,3.2vw,40px)/1.1 var(--pa-font-sans); --pa-title-lg:700 clamp(22px,3vw,32px)/1.12 var(--pa-font-sans); --pa-title-md:700 20px/1.2 var(--pa-font-sans); --pa-title-sm:700 16.5px/1.3 var(--pa-font-sans); --pa-body-lg:400 17px/1.65 var(--pa-font-sans); --pa-body:400 15.5px/1.6 var(--pa-font-sans); --pa-body-sm:400 13.5px/1.55 var(--pa-font-sans); --pa-label:500 12.5px/1.4 var(--pa-font-sans); --pa-mono-label:400 11px/1.4 var(--pa-font-mono); --pa-metric:900 clamp(32px,4.6vw,58px)/1 var(--pa-font-sans); /* Tracking scales with weight, not with size. Apply alongside the font token. */ --pa-track-display:-.05em; --pa-track-head:-.04em; --pa-track-ui:-.01em; --pa-track-body:0; --pa-track-mono:.14em; /* Mkhedruli never takes negative tracking. */ --pa-track-georgian:0; --pa-measure:60ch; /* body copy never runs wider */ /* ========================================================================== 4 · SPACE — 4px base ====================================================================== */ --pa-space-1:4px; --pa-space-2:8px; --pa-space-3:12px; --pa-space-4:16px; --pa-space-5:20px; --pa-space-6:24px; --pa-space-8:32px; --pa-space-10:40px; --pa-space-12:48px; --pa-space-16:64px; --pa-space-20:80px; --pa-space-24:96px; --pa-space-32:128px; --pa-gutter:clamp(20px,4vw,52px); --pa-container:1280px; --pa-section-y:clamp(64px,9vw,120px); /* ========================================================================== 5 · FORM Radius follows the size of the object it is applied to. ====================================================================== */ --pa-radius-sm:10px; /* chips, inputs, anything under 40px tall */ --pa-radius-md:16px; /* tiles, list rows */ --pa-radius-lg:24px; /* cards */ --pa-radius-xl:32px; /* sheets, modals, panels over 200px */ --pa-radius-full:999px; /* buttons, avatars, pills */ --pa-border-width:1px; --pa-focus-width:2px; --pa-focus-offset:3px; --pa-focus-color:var(--pa-accent); --pa-tap-target:44px; /* every interactive element, no exceptions */ /* ========================================================================== 6 · MOTION One easing curve for the entire system. ====================================================================== */ --pa-ease:cubic-bezier(.22,1,.36,1); --pa-duration-fast:120ms; --pa-duration:180ms; --pa-duration-slow:280ms; --pa-stagger:60ms; /* hero reveal only, nothing else animates on load */ /* ========================================================================== 7 · LAYERS ====================================================================== */ --pa-z-base:0; --pa-z-raised:10; --pa-z-sticky:20; --pa-z-overlay:30; --pa-z-modal:40; --pa-z-toast:50; --pa-z-topbar:60; } /* ============================================================================ LIGHT THEME For print, A4 documents and light-mode surfaces. Only semantic tokens are redefined. Primitives and scales are shared. ========================================================================= */ /* .pa-theme-light scopes the light theme to a subtree, which is how an A4 sheet or a light section lives inside an otherwise dark page. */ :root[data-theme="light"], .pa-theme-light{ --pa-surface-base:var(--pa-day-000); --pa-surface-sunken:var(--pa-day-100); --pa-surface-raised:var(--pa-day-000); --pa-surface-overlay:var(--pa-day-200); --pa-text-strong:var(--pa-grey-900); /* 18.1:1 */ --pa-text-default:#454C5A; /* 8.4:1 */ --pa-text-muted:#6E7686; /* 5.1:1 */ --pa-text-disabled:#A6ADBB; --pa-text-on-accent:#04120C; --pa-text-on-accent-alt:#FFFFFF; --pa-border:rgba(12,14,19,.12); --pa-border-subtle:rgba(12,14,19,.07); --pa-border-strong:rgba(12,14,19,.28); --pa-accent-text:var(--pa-green-text); --pa-accent-soft:rgba(0,229,160,.14); --pa-accent-border:rgba(0,122,89,.34); --pa-learn-text:var(--pa-violet-text); --pa-learn-soft:rgba(124,77,255,.10); --pa-learn-border:rgba(91,41,232,.30); --pa-alert-text:var(--pa-crimson-text); --pa-alert-soft:rgba(255,45,111,.10); --pa-alert-border:rgba(212,0,69,.30); --pa-asset-text:var(--pa-amber-text); --pa-asset-soft:rgba(255,176,32,.16); --pa-asset-border:rgba(138,92,8,.30); /* On light, the aurora is a whisper or it is nothing. */ --pa-aurora: radial-gradient(52% 62% at 22% 0%, rgba(0,229,160,.10), transparent 68%), radial-gradient(46% 58% at 78% 8%, rgba(124,77,255,.09), transparent 70%); --pa-glow-accent:0 6px 24px rgba(0,122,89,.20); --pa-glow-heat:0 6px 24px rgba(212,0,69,.18); --pa-shadow-overlay:0 20px 56px rgba(12,14,19,.16); } /* Follow the OS when no explicit theme is set. */ @media (prefers-color-scheme:light){ :root:not([data-theme="dark"]):not([data-theme="light"]){ --pa-surface-base:var(--pa-day-000); --pa-surface-sunken:var(--pa-day-100); --pa-surface-raised:var(--pa-day-000); --pa-surface-overlay:var(--pa-day-200); --pa-text-strong:var(--pa-grey-900); --pa-text-default:#454C5A; --pa-text-muted:#6E7686; --pa-text-disabled:#A6ADBB; --pa-border:rgba(12,14,19,.12); --pa-border-subtle:rgba(12,14,19,.07); --pa-border-strong:rgba(12,14,19,.28); --pa-accent-text:var(--pa-green-text); --pa-learn-text:var(--pa-violet-text); --pa-alert-text:var(--pa-crimson-text); --pa-asset-text:var(--pa-amber-text); --pa-aurora: radial-gradient(52% 62% at 22% 0%, rgba(0,229,160,.10), transparent 68%), radial-gradient(46% 58% at 78% 8%, rgba(124,77,255,.09), transparent 70%); } } /* ============================================================================ BASE ========================================================================= */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--pa-surface-base); color:var(--pa-text-default); font:var(--pa-body); letter-spacing:var(--pa-track-body); -webkit-font-smoothing:antialiased; } :lang(ka),.pa-ka{ font-family:var(--pa-font-georgian); letter-spacing:var(--pa-track-georgian); line-height:1.7; } /* Georgian titles run on Contractica CAPS. Caps carry no descenders, so they take tighter leading than Mkhedruli, and a touch of positive tracking rather than the negative tracking every Latin display size uses. */ h1:lang(ka),h2:lang(ka),h3:lang(ka),h4:lang(ka), .pa-ka-display, :lang(ka) .pa-ka-display{ font-family:var(--pa-font-georgian-display); letter-spacing:.012em; line-height:1.12; } :focus-visible{ outline:var(--pa-focus-width) solid var(--pa-focus-color); outline-offset:var(--pa-focus-offset); } /* Everything that moves, stops. The aurora stays: it never moved. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } } /* Print always runs the light theme, drops the aurora and every gradient fill. */ @media print{ :root{ --pa-surface-base:#FFFFFF; --pa-surface-sunken:#F7F8FA; --pa-surface-raised:#FFFFFF; --pa-surface-overlay:#EFF1F5; --pa-text-strong:#0C0E13; --pa-text-default:#333A45; --pa-text-muted:#5B6472; --pa-border:rgba(12,14,19,.22); --pa-border-subtle:rgba(12,14,19,.12); --pa-accent-text:#007A59; --pa-learn-text:#5B29E8; --pa-alert-text:#D40045; --pa-asset-text:#8A5C08; --pa-aurora:none; --pa-glow-accent:none; --pa-glow-heat:none; --pa-shadow-overlay:none; } body{background:#fff} }