/* =========================================================================== SIPPARSOFT deck — design tokens Everything downstream consumes these. No hardcoded colours or sizes. Source of truth for the values: ../BRAND.md =========================================================================== */ :root { /* --------------------------------------------------------------------- 1. BRAND RAW (verbatim from branding.pdf p.8 "Color Details") Never reference these directly in components — use the roles below. --------------------------------------------------------------------- */ --brand-navy: #295270; /* PRIMARY BLUE · trust, stability, depth */ --brand-offwhite: #F7F6F2; /* OFF-WHITE · the page */ --brand-gold: #B79464; /* GOLD / BEIGE · warmth, sophistication */ --brand-bluegray: #9DA1A5; /* BLUE GRAY · ESTIMATED — see NOTES.md */ /* Derived navy ladder (screen needs more range than print) */ --navy-900: #16293A; --navy-800: #1D3A50; --navy-700: #234764; --navy-600: #295270; /* = brand navy */ --navy-500: #3D6787; --navy-400: #5E819D; --navy-300: #93AABF; --navy-200: #C4D0DC; --navy-100: #E4EAF0; /* Derived gold ladder. The brand gold fails AA against BOTH grounds, so text-safe variants exist either side of it. Raw gold = geometry only. */ --gold-700: #7E5F33; /* AA on off-white (4.9:1) */ --gold-600: #8A6A3C; /* AA on off-white (4.5:1) — small gold text */ --gold-500: #B79464; /* = brand gold — rules, marks, fills, never text */ --gold-300: #D9BC8E; /* AA on navy (4.3:1) — gold text on navy */ --gold-100: #EFE4D2; /* Derived paper ladder */ --paper-000: #FFFFFF; --paper-050: #FBFAF7; --paper-100: #F7F6F2; /* = brand off-white */ --paper-200: #EFEDE6; --paper-300: #E2DFD6; --paper-400: #D3CFC4; /* --------------------------------------------------------------------- 2. SEMANTIC ROLES — light ground (the default slide) --------------------------------------------------------------------- */ --surface: var(--paper-100); --surface-raised: var(--paper-050); --surface-sunken: var(--paper-200); --text: var(--navy-600); /* 7.2:1 on surface — AAA */ --text-strong: var(--navy-800); /* 10.9:1 — AAA */ --text-muted: #55708A; /* 5.4:1 — AA */ --text-accent: var(--gold-600); /* 4.5:1 — AA, small use only */ --rule: var(--paper-300); /* hairline separators */ --rule-strong: var(--brand-bluegray); --accent-line: var(--gold-500); /* decorative rules & marks */ --logo-ink: var(--brand-navy); --logo-dot: var(--brand-gold); /* --------------------------------------------------------------------- 3. SEMANTIC ROLES — dark ground (cover, dividers, statement) Applied by [data-ground="ink"] further down. --------------------------------------------------------------------- */ --ink-surface: var(--navy-600); --ink-surface-deep: var(--navy-800); --ink-text: var(--paper-100); /* 7.2:1 on navy — AAA */ --ink-text-muted: #B9C8D6; /* 5.1:1 on navy — AA */ --ink-rule: rgb(247 246 242 / 0.20); --ink-accent: var(--gold-300); /* 4.3:1 on navy — AA */ /* --------------------------------------------------------------------- 4. TYPEFACE STACKS Poppins first: it only claims Latin, so Arabic resolves to Plex Arabic. --------------------------------------------------------------------- */ --font-sans: "Poppins", "Plex Arabic", "Noto Sans Arabic", system-ui, sans-serif; --font-display: "Poppins", "Plex Arabic", "Noto Sans Arabic", system-ui, sans-serif; --font-label: "Raleway", "Plex Arabic", "Noto Sans Arabic", system-ui, sans-serif; --w-regular: 400; --w-medium: 500; --w-semi: 600; --w-bold: 700; /* --------------------------------------------------------------------- 5. OPTICAL SETTINGS FOR ARABIC Arabic is a connected script: letter-spacing is destructive. It also carries taller ascenders and deeper descenders than Latin, so it needs noticeably more leading at every size. --------------------------------------------------------------------- */ --lh-display: 1.28; --lh-heading: 1.40; --lh-lead: 1.62; --lh-body: 1.85; /* Arabic body floor — do not go below 1.7 */ --lh-tight: 1.50; --tracking-ar: 0; /* NEVER change this */ --tracking-latin: 0.02em; /* Latin caps labels only */ /* --------------------------------------------------------------------- 6. RADII · SHADOWS · MOTION · LAYERS The brand is geometric and flat; radii stay small and shadows stay physically plausible — three stacked low-opacity layers, never one. --------------------------------------------------------------------- */ --r-xs: 2px; --r-sm: 3px; --r-md: 6px; --r-lg: 10px; --r-pill: 999px; --shadow-1: 0 1px 2px rgb(22 41 58 / 0.05), 0 2px 6px rgb(22 41 58 / 0.05); --shadow-2: 0 1px 2px rgb(22 41 58 / 0.05), 0 6px 16px rgb(22 41 58 / 0.07), 0 16px 36px rgb(22 41 58 / 0.06); --shadow-3: 0 2px 4px rgb(22 41 58 / 0.07), 0 14px 30px rgb(22 41 58 / 0.10), 0 36px 72px rgb(22 41 58 / 0.11); --dur-1: 150ms; --dur-2: 220ms; --dur-3: 300ms; --ease-out: cubic-bezier(0.20, 0.70, 0.30, 1); --ease-in-out: cubic-bezier(0.65, 0.00, 0.35, 1); --stagger: 50ms; --z-slide: 1; --z-chrome: 20; --z-drawer: 40; --z-overview:50; --z-help: 60; /* Chrome sizing (outside slides — cannot use container units) */ --chrome-pad: clamp(0.9rem, 1.4vw, 2rem); --chrome-fs: clamp(11px, 0.62vw, 15px); } /* --------------------------------------------------------------------------- 7. THE SLIDE UNIT --u Slides are size containers, so --u resolves against the SLIDE box, not the viewport. That means a slide rendered at 1920x1080 inside the overview grid is typographically identical to the same slide on the projector. At 1920x1080 --u = 16px exactly. The scale is a true 16:9 FIT: min(width/120, height/67.5). Whichever axis is the constraint sets the size, so the deck stays one proportional canvas and grows with the display instead of stranding the type in a bigger frame. The floor is deliberately LOW (9px). A high floor freezes the scale: at 13px the type stopped shrinking below ~1560x877, so every window from 1440x900 down to 800x600 rendered identical laptop-sized type in a far smaller frame and resizing the window appeared to do nothing. Below 900px the reflow branch in layouts.css takes over and sets its own readable --u, so the low floor here only ever governs the scaled-canvas range. --------------------------------------------------------------------------- */ .slide { /* --fit is a PER-SLIDE multiplier set by the autofit pass in js/deck.js. content.md is deliberately sparse, so a global scale that suits a 15-atom slide leaves a 4-atom slide 85% empty, while a scale that fills the sparse one overflows the dense one. Each slide therefore grows until it is about to overflow, and no further. Default 1 = the designed scale, so the deck is correct even with JS disabled. */ --fit: 1; /* fallback for engines without container queries */ --u: calc(clamp(9px, min(0.8333vw, 1.4815vh), 64px) * var(--fit)); } @supports (container-type: size) { .slide { --u: calc(clamp(9px, min(0.8333cqw, 1.4815cqh), 64px) * var(--fit)); } } .slide { /* --- type scale (px @ 1920x1080) --- */ --fs-display: calc(5.50 * var(--u)); /* 88 — statement slides only */ --fs-h1: calc(4.50 * var(--u)); /* 72 — cover, section dividers */ --fs-h2: calc(3.25 * var(--u)); /* 52 — slide titles */ --fs-h3: calc(2.00 * var(--u)); /* 32 — sub-headings, table heads */ --fs-lead: calc(1.75 * var(--u)); /* 28 — deck / standfirst */ --fs-body: calc(1.50 * var(--u)); /* 24 — body floor for projection */ --fs-sm: calc(1.25 * var(--u)); /* 20 — captions, table cells */ --fs-xs: calc(1.00 * var(--u)); /* 16 — footnotes */ --fs-eyebrow: calc(0.94 * var(--u)); /* 15 — Latin caps labels */ --fs-numeral: calc(6.50 * var(--u)); /* 104 — big figures */ /* --- spacing scale --- */ --sp-1: calc(0.50 * var(--u)); --sp-2: calc(0.75 * var(--u)); --sp-3: calc(1.00 * var(--u)); --sp-4: calc(1.50 * var(--u)); --sp-5: calc(2.00 * var(--u)); --sp-6: calc(3.00 * var(--u)); --sp-7: calc(4.00 * var(--u)); --sp-8: calc(6.00 * var(--u)); --sp-9: calc(8.00 * var(--u)); /* --- slide frame --- */ --pad-block: calc(4.00 * var(--u)); /* 64 */ --pad-inline: calc(5.50 * var(--u)); /* 88 */ --measure: 30ch; /* Arabic reads short — keep tight */ --measure-wide: 42ch; } /* --------------------------------------------------------------------------- 8. GROUND SWITCH [data-ground="ink"] repaints a slide onto navy by rebinding the roles. Components never know which ground they are on. --------------------------------------------------------------------------- */ [data-ground="ink"] { --surface: var(--ink-surface); --surface-raised: var(--navy-700); --surface-sunken: var(--ink-surface-deep); --text: var(--ink-text); --text-strong: var(--paper-000); --text-muted: var(--ink-text-muted); --text-accent: var(--ink-accent); --rule: var(--ink-rule); --rule-strong: rgb(247 246 242 / 0.35); --accent-line: var(--gold-500); --logo-ink: var(--paper-100); --logo-dot: var(--brand-gold); } [data-ground="deep"] { --surface: var(--ink-surface-deep); --surface-raised: var(--navy-700); --surface-sunken: var(--navy-900); --text: var(--ink-text); --text-strong: var(--paper-000); --text-muted: var(--ink-text-muted); --text-accent: var(--ink-accent); --rule: var(--ink-rule); --rule-strong: rgb(247 246 242 / 0.35); --accent-line: var(--gold-500); --logo-ink: var(--paper-100); --logo-dot: var(--brand-gold); }