/* ========================================================================== Post App Clarity — Identity tokens (Stage 2) Direction: "Chrome Caret" (Y2K / cyber revival). Approved stage 1. Plain CSS custom properties. No build step, no npm, no icon fonts. Fonts: Michroma 400, Space Grotesk 400/500/600/700, JetBrains Mono 400/500/700. SELF-HOST THESE. Do not load them from the Google Fonts CDN. All three are SIL Open Font License, so self-hosting is permitted. Serve woff2 from /assets/fonts/ with @font-face and font-display: swap. The reason is not performance, it is truthfulness: the privacy policy states the site has no third parties and sets no cookies, and a to fonts.googleapis.com sends every visitor's IP to Google on every page load. Amended 2026-08-02 — the original header here specified the CDN, which contradicted the shipped policy. ========================================================================== */ :root { /* ---------- 1. PALETTE — raw ramps ------------------------------------- Locked stage-1 seeds are marked (locked). Do not change those values. */ /* Ink / neutral. Every step holds the blue-violet undertone — this is what keeps the studio distinct from NutHub's dead-neutral #050505. */ --pac-ink-000: #07060F; /* deepest well: full-bleed void, footer, code block */ --pac-ink-100: #0B0A16; /* (locked) page background */ --pac-ink-200: #12101F; /* raised surface: card, input */ --pac-ink-300: #1A1233; /* (locked) bloom — radial wash, feature surface */ --pac-ink-400: #221B36; /* (locked) border, hairline, divider */ --pac-ink-500: #2E2748; /* border hover, disabled fill */ --pac-ink-600: #4A4270; /* disabled text, chart grid */ --pac-ink-700: #8C86B5; /* muted text — 5.79:1 on ink-100 */ --pac-ink-800: #B9B4D4; /* secondary text — 9.77:1 on ink-100 */ --pac-ink-900: #EFF3FF; /* primary text / wordmark — 17.71:1 on ink-100 */ /* Mint — primary. Carries every action and every bright moment. */ --pac-mint-100: #D8FFEE; /* faintest tint: on-mint hairlines, hero flecks */ --pac-mint-300: #7CFFC4; /* (locked) links, focus ring, hover lift */ --pac-mint-500: #2BFF9E; /* (locked) PRIMARY — filled CTA, cursor block */ --pac-mint-700: #0B9A5E; /* (locked) smallest safe mint text, quiet borders */ --pac-mint-900: #063A26; /* mint background wash, success surface */ /* Violet — secondary. Never dominant. Never a filled action. */ --pac-violet-100: #E7DEFF; /* text on violet-900 surfaces */ --pac-violet-300: #B79BFF; /* the ONLY violet safe for text — 8.54:1 on ink */ --pac-violet-500: #8B5CFF; /* (locked) borders, glows, large display text */ --pac-violet-700: #4C2CB8; /* washes, gradient stops, chart series 2 */ --pac-violet-900: #241546; /* (locked) elevated violet surface */ /* Chrome ramp — 135°. Quarantined to the mark + edge material. Never type. */ --pac-chrome-1: #FFFFFF; --pac-chrome-2: #8E9BC4; --pac-chrome-3: #F4F7FF; --pac-chrome-4: #464F78; --pac-chrome-5: #D8DEF2; --pac-chrome-ramp: linear-gradient(135deg, #FFFFFF 0%, #8E9BC4 30%, #F4F7FF 50%, #464F78 72%, #D8DEF2 100%); --pac-chrome-hairline: linear-gradient(90deg, rgba(255,255,255,0) 0%, #8E9BC4 18%, #F4F7FF 42%, #464F78 68%, rgba(216,222,242,0) 100%); --pac-chrome-flat: #EFF3FF; /* what chrome collapses to below threshold */ /* Signal colours — derived inside the palette, not imported stock hues. */ --pac-success: #2BFF9E; /* = mint 500. 14.87:1 on ink-100 */ --pac-success-surface: #063A26; --pac-warning: #E8FF6A; /* acid lime: mint hue pushed toward chrome. 17.72:1 on ink-100 */ --pac-warning-surface: #2A3308; --pac-error: #FF4D8D; /* violet hue pushed to magenta. 6.26:1 on ink-100 */ --pac-error-surface: #3D0E23; /* NEVER put light text on --pac-error. ink-900 on error is 2.83:1 (fails). Filled error/destructive surfaces take --pac-ink-100 (6.26:1) or don't exist. Preferred error block: --pac-error-surface carrying --pac-ink-900 (14.73:1). There is no filled destructive button — see README 1.3b. */ --pac-text-on-error: var(--pac-ink-100); /* ---------- 2. SEMANTIC ASSIGNMENTS ------------------------------------ */ --pac-bg: var(--pac-ink-100); --pac-bg-deep: var(--pac-ink-000); --pac-bg-bloom: radial-gradient(120% 90% at 50% -10%, #1A1233 0%, #0B0A16 62%); --pac-surface: var(--pac-ink-200); --pac-surface-raised: var(--pac-ink-300); --pac-surface-violet: var(--pac-violet-900); --pac-border: var(--pac-ink-400); /* 1.20:1 on ink — non-text, by design */ --pac-border-strong: var(--pac-ink-500); --pac-border-accent: var(--pac-mint-700); --pac-border-violet: var(--pac-violet-500); --pac-text: var(--pac-ink-900); --pac-text-secondary: var(--pac-ink-800); --pac-text-muted: var(--pac-ink-700); --pac-text-disabled: var(--pac-ink-600); --pac-text-on-mint: var(--pac-ink-100); /* 15.62:1 — the CTA pairing */ --pac-text-on-violet-surface: var(--pac-violet-100); --pac-link: var(--pac-mint-300); --pac-link-hover: var(--pac-mint-100); --pac-link-visited: var(--pac-violet-300); --pac-link-underline: rgba(124,255,196,0.42); --pac-action: var(--pac-mint-500); --pac-action-hover: var(--pac-mint-300); --pac-action-active: var(--pac-mint-700); --pac-action-text: var(--pac-ink-100); --pac-action-disabled-bg: var(--pac-ink-500); --pac-action-disabled-text: var(--pac-ink-600); --pac-focus-ring: var(--pac-mint-300); --pac-focus-ring-width: 2px; --pac-focus-ring-offset: 2px; --pac-focus-glow: 0 0 0 6px rgba(139,92,255,0.28); /* ---------- 3. TYPE ---------------------------------------------------- Three faces. Ratio 1.25 (major third) above body, 1.125 below. Michroma: wordmark, display 1–3, and nothing else. Never below 20px, never more than 8 words, never a paragraph, never a form label. */ --pac-font-display: 'Michroma', 'Arial Black', sans-serif; --pac-font-sans: 'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif; --pac-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --pac-size-display-1: 72px; --pac-lh-display-1: 1.02; --pac-ls-display-1: 0.02em; --pac-size-display-2: 48px; --pac-lh-display-2: 1.08; --pac-ls-display-2: 0.02em; --pac-size-display-3: 28px; --pac-lh-display-3: 1.20; --pac-ls-display-3: 0.03em; --pac-size-h1: 44px; --pac-lh-h1: 1.10; --pac-ls-h1: -0.01em; --pac-size-h2: 32px; --pac-lh-h2: 1.20; --pac-ls-h2: -0.01em; --pac-size-h3: 24px; --pac-lh-h3: 1.30; --pac-ls-h3: -0.005em; --pac-size-h4: 19px; --pac-lh-h4: 1.40; --pac-ls-h4: 0em; --pac-size-body-lg: 19px; --pac-lh-body-lg: 1.70; --pac-size-body: 17px; --pac-lh-body: 1.70; --pac-size-body-sm: 15px; --pac-lh-body-sm: 1.60; --pac-size-caption: 13px; --pac-lh-caption: 1.50; --pac-size-label: 12px; --pac-lh-label: 1.20; --pac-ls-label: 0.14em; --pac-weight-regular: 400; --pac-weight-medium: 500; --pac-weight-semibold: 600; --pac-weight-bold: 700; /* Long-form reading (privacy, terms, support, product prose) */ --pac-measure: 68ch; /* ~720px at 17px Space Grotesk */ --pac-measure-px: 720px; --pac-para-gap: 24px; --pac-h2-space-before: 56px; --pac-h2-space-after: 16px; --pac-h3-space-before: 40px; --pac-h3-space-after: 12px; --pac-h4-space-before: 28px; --pac-h4-space-after: 8px; --pac-list-indent: 24px; --pac-list-item-gap: 10px; --pac-list-marker: var(--pac-mint-700); /* ---------- 4. THRESHOLDS (the flat/display rule) ----------------------- */ --pac-mark-glitch-min: 96px; /* mark: chromatic offsets only at >= 96px */ --pac-mark-glitch-offset: 3px; /* at 96px; scales 3/96 of size, cap 6px */ --pac-mark-chrome-min: 32px; /* mark: below this, chrome -> --pac-chrome-flat */ --pac-type-glitch-min: 40px; /* type: chromatic split only at >= 40px */ --pac-type-glitch-offset: 2px; /* fixed 2px; never scales up */ /* ---------- 5. SPACING — base unit 4px --------------------------------- */ --pac-space-0: 0; --pac-space-1: 4px; --pac-space-2: 8px; --pac-space-3: 12px; --pac-space-4: 16px; --pac-space-5: 24px; --pac-space-6: 32px; --pac-space-7: 48px; --pac-space-8: 64px; --pac-space-9: 96px; --pac-space-10: 128px; --pac-space-11: 160px; /* ---------- 6. RADIUS / BORDER / ELEVATION ----------------------------- */ --pac-radius-0: 0px; /* default for anything structural */ --pac-radius-1: 2px; /* buttons, inputs, tags — the house radius */ --pac-radius-2: 4px; /* cards */ --pac-radius-3: 10px; /* modals, large feature surfaces */ --pac-radius-pill: 999px; /* status dots and count pills only */ --pac-border-1: 1px; --pac-border-2: 2px; --pac-shadow-0: none; --pac-shadow-1: 0 1px 0 0 rgba(255,255,255,0.04), 0 2px 8px rgba(7,6,15,0.6); --pac-shadow-2: 0 1px 0 0 rgba(255,255,255,0.05), 0 12px 32px rgba(7,6,15,0.72); --pac-shadow-3: 0 24px 64px rgba(7,6,15,0.85), 0 0 0 1px rgba(139,92,255,0.18); --pac-glow-mint: 0 0 24px rgba(43,255,158,0.30); --pac-glow-violet: 0 0 32px rgba(139,92,255,0.34); /* ---------- 7. LAYOUT --------------------------------------------------- */ --pac-container: 1200px; --pac-container-narrow: 720px; /* long-form */ --pac-container-wide: 1440px; /* full-bleed feature bands */ --pac-gutter: 24px; --pac-gutter-lg: 32px; --pac-columns: 12; --pac-bp-xs: 390px; --pac-bp-sm: 640px; --pac-bp-md: 900px; --pac-bp-lg: 1200px; --pac-bp-xl: 1440px; /* ---------- 8. MOTION --------------------------------------------------- */ --pac-dur-snap: 120ms; --pac-dur-glide: 240ms; --pac-dur-split: 180ms; --pac-dur-scan: 900ms; --pac-dur-caret: 1060ms; --pac-ease-snap: cubic-bezier(0.2, 0, 0, 1); --pac-ease-glide: cubic-bezier(0.2, 0.8, 0.2, 1); --pac-ease-split: cubic-bezier(0.16, 1, 0.3, 1); --pac-ease-scan: linear; /* ---------- 9. ICONOGRAPHY --------------------------------------------- */ --pac-icon-grid: 24px; --pac-icon-stroke: 2px; --pac-icon-linecap: square; --pac-icon-linejoin: miter; --pac-icon-size-sm: 16px; --pac-icon-size-md: 20px; --pac-icon-size-lg: 24px; } /* Reduced motion: the identity's decorative motion switches off entirely. Functional state feedback survives, shortened. */ @media (prefers-reduced-motion: reduce) { :root { --pac-dur-split: 0ms; /* chromatic split never animates */ --pac-dur-scan: 0ms; /* chrome sheen never sweeps */ --pac-dur-caret: 0ms; /* cursor block stops blinking, stays solid */ --pac-dur-glide: 1ms; --pac-dur-snap: 1ms; } }