/* RAK People Hub — Design System base layer Applies tokens to real elements. Everything is scoped under `.ui-v2` (added to only when the UI-v2 feature flag is on) so the new look never leaks into the legacy experience during migration. */ .ui-v2 { box-sizing: border-box; } .ui-v2 *, .ui-v2 *::before, .ui-v2 *::after { box-sizing: inherit; } body.ui-v2 { margin: 0; background: var(--color-surface-page); color: var(--color-text-primary); font-family: var(--font-family-latin); font-size: var(--type-body-size); line-height: var(--type-body-lh); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.ui-v2[dir="rtl"], .ui-v2 [lang="ar"], .ui-v2 [dir="rtl"] { font-family: var(--font-family-arabic); } /* Headings — modular scale */ .ui-v2 h1, .ui-v2 h2, .ui-v2 h3, .ui-v2 h4 { margin: 0 0 var(--spacing-16); color: var(--color-text-heading); font-weight: var(--font-weight-semibold); } .ui-v2 h1 { font-size: var(--type-h1-size); line-height: var(--type-h1-lh); letter-spacing: var(--type-h1-ls); } .ui-v2 h2 { font-size: var(--type-h2-size); line-height: var(--type-h2-lh); letter-spacing: var(--type-h2-ls); } .ui-v2 h3 { font-size: var(--type-h3-size); line-height: var(--type-h3-lh); letter-spacing: var(--type-h3-ls); } .ui-v2 h4 { font-size: var(--type-h4-size); line-height: var(--type-h4-lh); } .ui-v2 p { margin: 0 0 var(--spacing-16); } /* Arabic sizing rules: larger, looser, no tracking */ .ui-v2 [dir="rtl"] h1, .ui-v2 [dir="rtl"] h2, .ui-v2 [dir="rtl"] h3, .ui-v2 [dir="rtl"] h4, body.ui-v2[dir="rtl"] h1, body.ui-v2[dir="rtl"] h2, body.ui-v2[dir="rtl"] h3, body.ui-v2[dir="rtl"] h4 { letter-spacing: 0; line-height: 1.4; } /* Links */ .ui-v2 a { color: var(--color-text-heading); text-decoration: none; transition: color var(--motion-fast); } .ui-v2 a:hover { color: var(--color-brand-gold-500); } .ui-v2 ::selection { background: var(--color-brand-gold-500); color: #fff; } /* Focus — 3px electric-blue ring on every interactive element, always visible */ .ui-v2 a:focus-visible, .ui-v2 button:focus-visible, .ui-v2 input:focus-visible, .ui-v2 select:focus-visible, .ui-v2 textarea:focus-visible, .ui-v2 [tabindex]:focus-visible, .ui-v2 summary:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-sm); } /* Layout: 1440 container, 12-col grid, 72/20px margins */ .ui-v2 .ds-container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--grid-margin-desktop); } .ui-v2 .ds-section { padding-block: var(--spacing-96); } .ui-v2 .ds-grid { display: grid; grid-template-columns: repeat(var(--grid-columns), 1fr); gap: var(--grid-gutter); } .ui-v2 .ds-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spacing-24); } /* Eyebrow / section label */ .ui-v2 .ds-eyebrow { display: inline-flex; align-items: center; gap: var(--spacing-12); color: var(--color-brand-gold-500); font-size: 11px; font-weight: var(--font-weight-semibold); letter-spacing: 0.2em; text-transform: uppercase; } .ui-v2 [dir="rtl"] .ds-eyebrow { text-transform: none; letter-spacing: 0; } .ui-v2 .ds-eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--color-brand-gold-500); } /* Icons (SVG sprite) */ .ui-v2 .rak-icon { width: var(--icon-md); height: var(--icon-md); display: inline-block; vertical-align: middle; flex: none; color: currentColor; } .ui-v2 .rak-icon.is-xs { width: var(--icon-xs); height: var(--icon-xs); } .ui-v2 .rak-icon.is-sm { width: var(--icon-sm); height: var(--icon-sm); } .ui-v2 .rak-icon.is-lg { width: var(--icon-lg); height: var(--icon-lg); } .ui-v2 .rak-icon.is-xl { width: var(--icon-xl); height: var(--icon-xl); } /* Utilities */ .ui-v2 .ds-mono { font-family: var(--font-family-mono); } .ui-v2 .ds-muted { color: var(--color-text-secondary); } .ui-v2 .ds-tabnum { font-variant-numeric: tabular-nums; } .ui-v2 .ds-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; } /* Responsive margins */ @media (max-width: 1024px) { .ui-v2 .ds-container { padding-inline: var(--spacing-32); } .ui-v2 .ds-section { padding-block: var(--spacing-64); } } @media (max-width: 600px) { .ui-v2 .ds-container { padding-inline: var(--grid-margin-mobile); } .ui-v2 h1 { font-size: 32px; } .ui-v2 h2 { font-size: 27px; } .ui-v2 h3 { font-size: 22px; } } /* Reduced motion — collapse everything to ~instant */ @media (prefers-reduced-motion: reduce) { .ui-v2 *, .ui-v2 *::before, .ui-v2 *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }