/* ============================================================ DESTINATION SAUDI — Colors & Type Foundation tokens for the master brand + city sub-brands. Latin subset of the design system (Arabic/Thmanyah omitted — this page is English-only). ============================================================ */ /* Fraunces — editorial display serif (variable: opsz/SOFT/WONK/wght) */ @font-face{font-family:'Fraunces';src:url("../fonts/Fraunces-Variable.ttf") format('truetype');font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:'Fraunces';src:url("../fonts/Fraunces-Variable-Italic.ttf") format('truetype');font-weight:100 900;font-style:italic;font-display:swap} /* Archivo — grotesque sans for headings / UI / labels (variable: wdth/wght) */ @font-face{font-family:'Archivo';src:url("../fonts/Archivo-Variable.ttf") format('truetype');font-weight:100 900;font-stretch:62.5% 125%;font-style:normal;font-display:swap} /* Inter — body & long-form text */ @font-face{font-family:'Inter';src:url("../fonts/Inter-Regular.ttf") format('truetype');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Inter';src:url("../fonts/Inter-Medium.ttf") format('truetype');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Inter';src:url("../fonts/Inter-SemiBold.ttf") format('truetype');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Inter';src:url("../fonts/Inter-Bold.ttf") format('truetype');font-weight:700;font-style:normal;font-display:swap} /* IBM Plex Mono — kickers, tags, metadata */ @font-face{font-family:'IBM Plex Mono';src:url("../fonts/IBMPlexMono-Regular.ttf") format('truetype');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'IBM Plex Mono';src:url("../fonts/IBMPlexMono-Medium.ttf") format('truetype');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'IBM Plex Mono';src:url("../fonts/IBMPlexMono-SemiBold.ttf") format('truetype');font-weight:600;font-style:normal;font-display:swap} /* Anton — condensed "loud" headline / poster face */ @font-face{font-family:'Anton';src:url("../fonts/Anton-Regular.ttf") format('truetype');font-weight:400;font-style:normal;font-display:swap} :root{ /* ============ MASTER BRAND · DESTINATION. (official) ============ */ --paper: #F6F5F2; /* Sand / Paper — primary background, reverse text */ --sand: #ECE6D6; /* warm secondary surface (subtle tint of paper) */ --ink: #19150F; /* Ink — primary text & reverse background */ --charcoal: #16120D; --terracotta: #FF5400; /* Brand orange — accent only: kickers & the full stop */ --terracotta-d: #D14600; /* pressed / deeper orange */ --terracotta-l: #FF7A38; /* hover / tint */ /* Master neutrals (warm-grey ramp built on the ink) */ --ink-90: #2C271E; --ink-70: #4A4234; --ink-50: #6E6450; /* Muted — captions / secondary meta */ --ink-30: #A99E86; /* hairlines, disabled */ --ink-15: #D6CEBC; /* dividers on paper */ --line: #E2DCCB; /* default hairline on paper */ /* ============ SEMANTIC (defaults to master brand) ============ */ --bg: var(--paper); --bg-alt: var(--sand); --fg: var(--ink); --fg-muted: var(--ink-50); --fg-subtle: var(--ink-30); --accent: var(--terracotta); --accent-fg: #FFFFFF; --hairline: var(--line); /* ============ TYPE FAMILIES ============ 1 Hero display → Anton · ALL CAPS, Regular, tracking +0.5% 2 Editorial head → Archivo Black · 800/900, sentence case, tracking -2% 3 Premium serif → Fraunces · 600/italic, high opsz, sparing 4 Body & UI → Inter · 400/500/600, line-height 1.6 5 Kicker & meta → IBM Plex Mono · 400/500, UPPERCASE, tracking +4–6% ======================================== */ --font-hero: 'Anton', 'Archivo', Impact, sans-serif; --font-cond: 'Anton', 'Archivo', Impact, sans-serif; --font-display: 'Archivo', system-ui, -apple-system, sans-serif; --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace; /* ============ TYPE SCALE ============ */ --fs-display: clamp(48px, 7vw, 96px); --fs-h1: clamp(36px, 4.5vw, 64px); --fs-h2: clamp(28px, 3vw, 40px); --fs-h3: 24px; --fs-lead: 21px; --fs-body: 17px; --fs-small: 14px; --fs-label: 12px; --lh-body: 1.6; --track-label: 0.16em; /* ============ RADII / ELEVATION / SPACING ============ */ --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; --shadow-sm: 0 1px 2px rgba(22,18,13,.06), 0 1px 3px rgba(22,18,13,.08); --shadow-md: 0 4px 12px rgba(22,18,13,.08), 0 2px 4px rgba(22,18,13,.06); --shadow-lg: 0 18px 40px -12px rgba(22,18,13,.22); } /* ---------- SEMANTIC ELEMENT STYLES ---------- */ .dsa-eyebrow{ font-family:var(--font-mono); font-weight:500; font-size:var(--fs-label); text-transform:uppercase; letter-spacing:.05em; color:var(--fg-muted); } .dsa-hero{ font-family:var(--font-hero); font-weight:400; text-transform:uppercase; font-size:var(--fs-display); line-height:.92; letter-spacing:.005em; color:var(--fg); } h1,.dsa-h1{ font-family:var(--font-display); font-weight:900; font-size:var(--fs-h1); line-height:1.04; letter-spacing:-.02em; color:var(--fg); margin:0; } h2,.dsa-h2{ font-family:var(--font-display); font-weight:800; font-size:var(--fs-h2); line-height:1.08; letter-spacing:-.015em; color:var(--fg); margin:0; } h3,.dsa-h3{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-h3); line-height:1.2; letter-spacing:-.01em; color:var(--fg); margin:0; } .dsa-serif{ font-family:var(--font-serif); font-weight:600; font-variation-settings:"opsz" 144; letter-spacing:-.005em; color:var(--fg); } .dsa-serif-italic{ font-family:var(--font-serif); font-style:italic; font-weight:500; font-variation-settings:"opsz" 144; } p,.dsa-body{ font-family:var(--font-body); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--fg); } .dsa-caption{ font-family:var(--font-sans); font-size:var(--fs-small); color:var(--fg-muted); } .dsa-mono{ font-family:var(--font-mono); font-size:var(--fs-small); letter-spacing:.04em; }