/* ============================================================================ AL-SAYEGH DESIGN SYSTEM — Foundations Abdulreda Hussain Al-Sayegh · Museum Designer · Visual Artist · Kuwait ---------------------------------------------------------------------------- A warm museum-publication editorial system: ink + paper + gold, set in Cormorant Garamond (display serif), Barlow (body sans) and Barlow Condensed (labels). Sharp corners, hairline rules, generous scale. Bilingual EN / AR. Inspired by Ralph Appelbaum Associates; original to Abdulreda. All three families are open-source Google Fonts (loaded below). ============================================================================ */ /* Fonts loaded via in _site.html — preconnect + preload + display=swap. Only TWO families ship: Instrument Serif (display + Arabic) and Work Sans (body + labels). */ :root { /* ─── HYBRID PALETTE — Day (paper) default, Dark (cinematic) optional ── Default is a warm museum-publication paper system. Add `data-theme="dark"` on or to flip to the cinematic deep-black / gold ground without touching component code. Contrast ratios tuned for WCAG AA (body ≥4.5:1, large display ≥3:1). */ /* TEXT TOKENS — deep ink on warm paper */ --ink: #14110D; /* primary text · 17.8:1 on --paper (AAA) */ --ink-warm: #2A241D; /* warm heading ink */ --ink-mid: #4A4036; /* secondary text · 8.6:1 (AAA) */ --charcoal: #1A1A1A; --charcoal-2: #202020; /* SURFACE TOKENS — warm paper grounds */ --bg-deep: #0B0B0B; /* for cinematic blocks layered on paper */ --paper: #F4F1EA; /* PRIMARY page background — warm ivory */ --paper-2: #EDE7D8; /* alt page background */ --warm: #E8E0CE; /* warm cream section */ --warm-2: #DED4BE; --ivory: #FBF8F1; /* lifted card surface */ --cream: #F0EADB; /* ─── RULES & TEXT TONES ─────────────────────────────────────────────── */ --rule: rgba(20,17,13,0.14); --rule-soft: rgba(20,17,13,0.08); --muted: rgba(20,17,13,0.66); /* ~5.8:1 body (AA) */ --faint: rgba(20,17,13,0.62); /* ~5.0:1 captions (AA strong) */ /* On-dark tones reserved for cinematic sections over --bg-deep */ --on-dark: rgba(244,241,234,0.92); --on-dark-muted: rgba(244,241,234,0.72); --on-dark-faint: rgba(244,241,234,0.50); --rule-dark: rgba(244,241,234,0.14); /* ─── GOLD (signature accent) ──────────────────────────────────────── On paper: --gold-deep #62490B = 7.52:1 (AAA) — body-size text, links, CTAs. --gold #D4AF37 = 1.86:1 — decorative ONLY (rules, glyphs). --gold-light #C9A84C — secondary decoration. --gold-glow #F0D78C — top-bar gradient peak. */ --gold: #D4AF37; --gold-deep: #62490B; --gold-light: #C9A84C; --gold-glow: #F0D78C; --rust: #8C6D17; --sienna: #62490B; /* ─── PROJECT ACCENTS (per case-study, layered on the neutral spine) ───── */ --acc-teal: #2A5F6E; --acc-teal-lt: #4A9BAA; --acc-ocean: #2A7090; --acc-ocean-lt: #A8CDD6; --acc-sand: #C9A84C; --acc-dune: #F0D78C; --acc-desert: #7A4A1E; /* ─── TYPE FAMILIES — Instrument Serif (display) + Work Sans (body) ────── */ --serif: 'Instrument Serif', 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --sans: 'Work Sans', system-ui, -apple-system, sans-serif; --cond: 'Work Sans', system-ui, sans-serif; --arabic: 'Instrument Serif', 'Cormorant Garamond', 'Segoe UI', Tahoma, sans-serif; /* ─── TYPE SCALE (fluid, museum-publication) ───────────────────────────── */ --fs-display: clamp(54px, 7vw, 112px); /* hero name / cover */ --fs-h1: clamp(40px, 5.2vw, 76px); --fs-h2: clamp(28px, 3vw, 54px); /* section titles */ --fs-h3: clamp(22px, 2.4vw, 32px); --fs-lead: clamp(17px, 1.9vw, 24px); /* serif lead paragraph */ --fs-body: 15px; --fs-small: 13.5px; --fs-eyebrow: 10px; --fs-caption: 9px; /* ─── TRACKING ─────────────────────────────────────────────────────────── */ --tr-display: -0.035em; /* tight on large serif */ --tr-tight: -0.01em; --tr-eyebrow: 0.26em; /* wide on condensed labels */ --tr-label: 0.20em; --tr-caption: 0.18em; /* ─── SPACING (base unit 4 — RAA-derived) ──────────────────────────────── */ --u: 4px; --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; --pad-section: clamp(60px, 8vw, 100px); /* vertical section rhythm */ --pad-gutter: clamp(20px, 6vw, 64px); /* horizontal page gutter */ /* ─── BORDERS, RADII, SHADOW ───────────────────────────────────────────── */ --hair: 1px; --radius: 0px; /* SHARP CORNERS — the house rule */ --shadow-none: none; --shadow-img: 0 24px 60px -28px rgba(20,18,16,0.45); /* lifted artwork */ --shadow-card: 0 1px 0 rgba(0,0,0,0.04); /* barely-there */ /* ─── MOTION ───────────────────────────────────────────────────────────── */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --reveal: opacity 0.75s var(--ease), transform 0.75s var(--ease); --hover: color 0.2s ease, background 0.2s ease, transform 0.4s var(--ease); } /* ============================================================================ SEMANTIC TYPOGRAPHY CLASSES ============================================================================ */ .ds-display { font-family: var(--serif); font-weight: 300; font-size: var(--fs-display); line-height: 0.9; letter-spacing: var(--tr-display); } .ds-h1 { font-family: var(--serif); font-weight: 300; font-size: var(--fs-h1); line-height: 1.02; letter-spacing: var(--tr-tight); } .ds-h2 { font-family: var(--serif); font-weight: 300; font-size: var(--fs-h2); line-height: 1.08; } .ds-h3 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-h3); line-height: 1.12; } /* Italic serif — used for pull-quotes & signatures */ .ds-italic { font-family: var(--serif); font-style: italic; font-weight: 300; } /* Eyebrow — condensed, uppercase, tracked, gold, with a leading dash. Uses --gold-deep for AA contrast (4.62:1) on paper grounds. */ .ds-eyebrow { font-family: var(--cond); font-weight: 500; font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--gold-deep); display: inline-flex; align-items: center; gap: 14px; } .ds-eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--gold-deep); } /* Section number — condensed, gold-deep for legibility */ .ds-num { font-family: var(--cond); font-weight: 500; font-size: 11px; letter-spacing: var(--tr-label); color: var(--gold-deep); } /* Lead — serif, the opening statement of a section */ .ds-lead { font-family: var(--serif); font-weight: 300; font-size: var(--fs-lead); line-height: 1.62; color: var(--ink-mid); max-width: 700px; } /* Body */ .ds-body { font-family: var(--sans); font-weight: 300; font-size: var(--fs-body); line-height: 1.85; color: var(--muted); max-width: 600px; } .ds-body-sm { font-family: var(--sans); font-weight: 300; font-size: var(--fs-small); line-height: 1.8; color: var(--muted); } /* Label / meta value — condensed */ .ds-meta-label { font-family: var(--sans); font-weight: 400; font-size: 8.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); } .ds-meta-value { font-family: var(--cond); font-weight: 400; font-size: 15px; letter-spacing: 0.04em; color: var(--ink-mid); } /* Caption — uppercase tracked, the smallest voice */ .ds-caption { font-family: var(--sans); font-weight: 400; font-size: var(--fs-caption); letter-spacing: var(--tr-caption); text-transform: uppercase; color: var(--faint); } /* Screen-reader only — visually hidden but accessible to assistive tech */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Arabic — RTL, serif metrics for display, sans for body */ .ds-ar { direction: rtl; text-align: right; font-family: var(--arabic); } .ds-ar-body { direction: rtl; text-align: right; font-family: var(--sans); font-weight: 300; line-height: 2; color: var(--muted); } /* ─── Decorative ───────────────────────────────────────────────────────── */ .ds-rule { height: 1px; background: var(--rule); border: 0; } .ds-topbar { height: 3px; background: linear-gradient(90deg, var(--gold-deep), var(--gold-glow), var(--rust)); } /* ============================================================================ DARK MODE — opt-in cinematic ground (set data-theme="dark" on ) Components stay identical; only token values flip. Contrast ratios on --paper #0B0B0B: --ink #F4F1EA = 18.6:1 (AAA), --muted .72 ≈ 13:1, --gold-light #F0D78C = 12.4:1 (AAA). Gold-deep (#D4AF37) is used as accent text here — 9.1:1 on black (AAA). */ :root[data-theme="dark"], [data-theme="dark"] { --ink: #F4F1EA; --ink-warm: #EDE6D2; --ink-mid: #C9C0AE; --paper: #0B0B0B; --paper-2: #111111; --warm: #15110D; --warm-2: #1A1612; --ivory: #16120E; --cream: #14110D; --rule: rgba(244,241,234,0.14); --rule-soft: rgba(244,241,234,0.08); --muted: rgba(244,241,234,0.72); --faint: rgba(244,241,234,0.50); --gold: #F0D78C; /* brighter on black for legibility */ --gold-deep: #D4AF37; /* AA+ on black */ --gold-light: #F5E1A0; --gold-glow: #F5E1A0; } /* ─── Smooth theme switch ─────────────────────────────────────────────── A one-shot wash applied only during the toggle (class added by JS, then removed after ~520ms). Outside this window, hover/focus animations on individual components are untouched — no interference, no jank. */ html, body { transition: background-color 0.45s var(--ease, ease), color 0.35s var(--ease, ease); } html.theme-switching, html.theme-switching body, html.theme-switching *:not(svg):not(path):not(circle):not(line):not(rect) { transition: background-color 0.5s var(--ease, ease), background-image 0.5s var(--ease, ease), color 0.4s var(--ease, ease), border-color 0.4s ease, fill 0.4s ease, stroke 0.4s ease, box-shadow 0.4s ease !important; } @media (prefers-reduced-motion: reduce) { html, body, html.theme-switching, html.theme-switching * { transition: none !important; } } /* ───────────────────────────────────────────────────────────────────────── Navigation display controls + independent back-to-top ───────────────────────────────────────────────────────────────────────── */ .nav-display-panel { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.09); } .nav-display-kicker { display: block; margin-bottom: 12px; font-family: var(--cond); font-size: 9px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.46); } .theme-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.035); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); } .theme-seg { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 40px; padding: 0; margin: 0; background: transparent; border: 0; cursor: pointer; color: rgba(255,255,255,0.66); position: relative; transition: color .22s ease, background-color .22s ease, transform .15s var(--ease); } /* Hairline divider between segments */ .theme-seg + .theme-seg::before { content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 1px; background: rgba(255,255,255,0.1); } .theme-seg svg { display: block; opacity: 0.85; transition: opacity .22s ease, transform .22s var(--ease); } .theme-seg:hover { color: var(--gold-light); background: rgba(255,255,255,0.055); } .theme-seg:hover svg { opacity: 1; transform: scale(1.06); } .theme-seg:active { transform: scale(0.96); transition-duration: .08s; } /* Selected segment — high-contrast active state for low-vision accessibility (AAA: ≥7:1). Thicker underline, stronger fill, brighter gold text. */ .theme-seg.is-active, .theme-seg[aria-checked="true"] { color: #F5E1A0; /* bright gold — ~12:1 on dark nav bg (AAA) */ background: rgba(240,215,140,0.20); /* stronger warm wash — clearly visible */ box-shadow: inset 0 -3px 0 0 #F0D78C, /* thicker, brighter underline */ inset 0 0 0 1px rgba(240,215,140,0.40), 0 0 14px rgba(240,215,140,0.10); /* subtle outer glow for visibility */ font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,0.35); /* depth for gold legibility */ } .theme-seg.is-active svg, .theme-seg[aria-checked="true"] svg { opacity: 1; transform: scale(1.08); } /* AAA focus ring — visible on paper and on cinematic black */ .theme-seg:focus-visible, .back-to-top:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; box-shadow: 0 0 0 1px var(--paper), 0 0 0 4px color-mix(in oklab, var(--gold-deep) 35%, transparent); color: var(--gold-deep); } :root[data-theme="dark"] .theme-seg:focus-visible, :root[data-theme="dark"] .back-to-top:focus-visible { outline-color: var(--gold); box-shadow: 0 0 0 1px var(--paper), 0 0 0 4px color-mix(in oklab, var(--gold) 35%, transparent); } /* ─── Back-to-top ────────────────────────────────────────────────────── */ .back-to-top { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--rule); background: color-mix(in oklab, var(--paper) 78%, transparent); color: var(--ink-mid); cursor: pointer; backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); transition: opacity .4s var(--ease), color .22s ease, border-color .22s ease, background-color .22s ease, box-shadow .22s ease, transform .2s var(--ease); } .back-to-top:hover { color: var(--gold-deep); border-color: var(--gold-deep); background: color-mix(in oklab, var(--paper) 88%, transparent); transform: translateY(-1px); } .back-to-top:active { transform: translateY(0); transition-duration: .08s; } .back-to-top svg { display: block; transition: transform .25s var(--ease); } .back-to-top:hover svg { transform: translateY(-2px); } /* Hide the redundant text label — the icon speaks for itself */ .back-to-top .btt-label { display: none; } /* ─── Mobile (≤720px) ────────────────────────────────────────────────── */ @media (max-width: 720px) { .theme-rail { left: 12px; bottom: 12px; } .theme-seg { width: 38px; height: 34px; } .back-to-top { right: 12px; bottom: 12px; width: 34px; height: 34px; } } /* ─── Reduced motion ─────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .theme-seg, .theme-seg svg, .back-to-top, .back-to-top svg { transform: none !important; } }