/* ============================================================================ Folio campaign · shared design law (tokens.css) Distilled from the SHIPPING app tokens — src/renderer/src/app.css (Sky Soft, locked 2026-05-06) — so every campaign surface is pixel-true to the product. Light is primary for marketing. Trilingual he/ar/en + RTL. No emojis. ---------------------------------------------------------------------------- PERF NOTE: @import below is convenient for drafts. For the fast-load finals, move font loading into each as: and subset to the weights actually used. (Confirm against perf-budget research.) ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700&family=Frank+Ruhl+Libre:wght@400;500;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap'); :root { /* ── Sky Soft palette (exact, from app.css) ── */ --bg-0: #f0f9ff; /* sky-tinted canvas */ --bg-1: #ffffff; /* surface */ --bg-2: #e0f2fe; /* soft sky tint */ --bg-3: #cce4f5; --border: #cce4f5; --border-strong: #93c5e7; --text: #0c2340; /* deep navy */ --text-muted: #506980; --text-faint: #7e9bbb; --accent: #0284c7; /* sky-blue 600 — TONE/large-bold/non-text only (white text on it = 4.10:1, FAILS AA) */ --accent-cta: #0369a1; /* CTA/button bg — white text = 5.93:1 (AA pass). Use for ALL white-on-accent labels. */ --accent-deep: #075985; /* darker stop (from site/cards) */ --accent-bright: #38bdf8; /* sky-blue 400 — highlight / non-text accent ONLY (never bg for white text) */ --accent-soft: #e0f2fe; --good: #2f8c3c; --warn: #b45309; --danger: #c4313e; /* Course accent cycle (used as gentle multi-color confetti where needed) */ --c1: #7aa2f7; --c2: #bb9af7; --c3: #9ece6a; --c4: #e0af68; --c5: #f7768e; --c6: #2ac3de; --c7: #ff9e64; --c8: #b4f9f8; /* ── Brand gradient (wordmark / accents) ── */ --grad-mark: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%); /* large display text only */ --grad-bright: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent) 100%); /* non-text accents only */ --grad-cta: linear-gradient(180deg, #0a76b0 0%, var(--accent-deep) 100%); /* white-text CTA, AA-safe both stops */ /* ── Radius / shadow (from app.css) ── */ --radius: 12px; --radius-sm: 9px; --radius-lg: 20px; --shadow-1: 0 1px 2px rgba(12, 35, 64, 0.06); --shadow-2: 0 8px 32px rgba(12, 35, 64, 0.12); --shadow-glow: 0 8px 30px rgba(2, 132, 199, 0.22); /* ── Motion (Emil Kowalski curves, app-canonical; all UI < 300ms) ── */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --dur-press: 140ms; --dur-pop: 200ms; --dur-modal: 280ms; /* Narrative beats (marketing only — kept slow + few, never on product UI) */ --dur-beat: 600ms; --dur-scene: 900ms; /* ── Type ── */ --font-he: 'Heebo', 'Assistant', 'Rubik', system-ui, sans-serif; --font-ar: 'IBM Plex Sans Arabic', 'Cairo', 'Tajawal', system-ui, sans-serif; --font-en: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-serif: 'Frank Ruhl Libre', 'Iowan Old Style', Garamond, serif; /* literary register */ --fs-display: clamp(30px, 8vw, 84px); --fs-h1: clamp(30px, 4.5vw, 52px); --fs-h2: clamp(22px, 3vw, 32px); --fs-lead: clamp(17px, 2vw, 21px); --fs-body: 16px; --fs-eyebrow: 12px; --ls-tight: -0.02em; --ls-eyebrow: 0.16em; --lh-tight: 1.08; --lh-normal: 1.55; /* ── Spacing (8-pt) ── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; --maxw: 1120px; } /* Marketing is light-first. A dark token set is here only if a surface opts in. */ [data-theme='dark'] { --bg-0: #0a1825; --bg-1: #11253c; --bg-2: #16304a; --bg-3: #1e3855; --border: #1e3855; --border-strong: #2f5076; --text: #dcebf7; --text-muted: #7e9bbb; --text-faint: #506980; --accent: #38bdf8; --accent-deep: #0284c7; --accent-bright: #7dd3fc; --accent-soft: #082f49; --shadow-1: 0 1px 2px rgba(0,0,0,0.3); --shadow-2: 0 8px 32px rgba(0,0,0,0.45); } /* ── Reset + base ── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg-0); color: var(--text); font-family: var(--font-en); font-size: var(--fs-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } html[lang='he'] body, [lang='he'] { font-family: var(--font-he); } html[lang='ar'] body, [lang='ar'] { font-family: var(--font-ar); } html[lang='en'] body, [lang='en'] { font-family: var(--font-en); } img, svg, video, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } /* ── Accessibility: motion is content; cut it when asked ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── Reusable primitives (shared across all 9 drafts; lift, never copy-paste) ── */ .wordmark { font-family: var(--font-en); font-weight: 600; letter-spacing: -0.04em; line-height: 1; background: var(--grad-mark); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .eyebrow { font-family: var(--font-en); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--text-muted); font-weight: 600; } .container { width: min(100% - 2*var(--sp-5), var(--maxw)); margin-inline: auto; } .btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 12px 22px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-weight: 600; line-height: 1; transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out), background var(--dur-press) var(--ease-out); } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--grad-cta); color: #fff; box-shadow: var(--shadow-glow); } /* AA-safe white text */ .btn-primary:hover { box-shadow: 0 10px 34px rgba(2,132,199,0.34); } .btn-ghost { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--border-strong); } .btn-ghost:hover { background: var(--accent-soft); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }