/* ============================================================================ * base.css — design tokens, reset, typography. * * Two axes vary at runtime: * [data-theme="light|dark"] on — palette * [dir="rtl|ltr"] + .is-ar on — direction and font family * * Every rule below uses CSS logical properties (inline-start/end, margin-inline, * inset-inline) rather than left/right, so the RTL flip needs no mirrored * stylesheet — the browser resolves direction for us. * ==========================================================================*/ /* ------------------------------------------------------------------ tokens */ :root { /* Brand constants — identical in both themes. */ --navy: #16232E; --steel: #1F5F8B; --amber: #F5A623; --amber-deep: #D98B0C; --wa: #25D366; --wa-deep: #128C7E; /* Light palette (default). */ --bg: #FFFFFF; --bg-alt: #F3F7FA; --bg-deep: #16232E; --surface: #FFFFFF; --surface-2: #F7FAFC; --surface-3: #EDF2F7; --border: #E2E9F0; --border-strong: #CBD8E3; --text: #16232E; --text-muted: #56697A; --text-faint: #8396A6; --text-on-dark: #FFFFFF; --text-on-dark-muted: #B9C9D6; --brand: #1F5F8B; --brand-hover: #17496B; --brand-soft: #E8F1F8; --accent: #F5A623; --accent-hover: #E2950F; --accent-ink: #16232E; --accent-soft: #FEF4E2; --danger: #C0392B; --danger-soft: #FDECEA; --ok: #1E8E5A; --ok-soft: #E6F5EE; --shadow-sm: 0 1px 2px rgba(22, 35, 46, .06), 0 1px 3px rgba(22, 35, 46, .04); --shadow: 0 2px 6px rgba(22, 35, 46, .06), 0 8px 24px rgba(22, 35, 46, .07); --shadow-lg: 0 4px 12px rgba(22, 35, 46, .08), 0 18px 48px rgba(22, 35, 46, .12); --shadow-amber: 0 6px 20px rgba(245, 166, 35, .28); /* Shape */ --r-xs: 6px; --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* Rhythm */ --gap-xs: 8px; --gap-sm: 12px; --gap: 20px; --gap-md: 28px; --gap-lg: 44px; --gap-xl: 72px; --section-y: clamp(56px, 8vw, 104px); --container: 1200px; --container-pad: 20px; --header-h: 68px; --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); /* Latin default; the Arabic override lives on html.is-ar. */ --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-num: 'Inter', ui-sans-serif, system-ui, sans-serif; color-scheme: light; } /* ---------------------------------------------------------------- dark mode */ :root[data-theme="dark"] { --bg: #0C141C; --bg-alt: #101B25; --bg-deep: #08111A; --surface: #15222E; --surface-2: #1A2A38; --surface-3: #213443; --border: #24384A; --border-strong: #35506690; --text: #E8F0F7; --text-muted: #9BB0C1; --text-faint: #76909F; --text-on-dark: #FFFFFF; --text-on-dark-muted: #B9C9D6; /* Steel blue is too dark to read on a dark ground — lift it. */ --brand: #52A3DA; --brand-hover: #7BBCE8; --brand-soft: #14293A; --accent: #F7B23F; --accent-hover: #FFC45F; --accent-ink: #121D26; --accent-soft: #2B2313; --danger: #F0837A; --danger-soft: #2C1917; --ok: #4CC28C; --ok-soft: #10281E; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 2px 8px rgba(0, 0, 0, .45), 0 12px 32px rgba(0, 0, 0, .35); --shadow-lg: 0 8px 24px rgba(0, 0, 0, .5), 0 24px 64px rgba(0, 0, 0, .45); --shadow-amber: 0 6px 22px rgba(245, 166, 35, .22); color-scheme: dark; } /* Arabic swaps the family and needs a touch more line height and size, since Cairo runs optically smaller than Inter at the same px value. */ :root.is-ar { --font: 'Cairo', 'Segoe UI', Tahoma, sans-serif; --font-num: 'Cairo', 'Segoe UI', Tahoma, sans-serif; } /* ------------------------------------------------------------------- reset */ *, *::before, *::after { box-sizing: border-box; } /* The UA rule for [hidden] is display:none at zero specificity, so any class that sets display (.formstate is a grid, .mobilenav a block) silently beats it and the element stays on screen. Make the attribute authoritative. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.65; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; transition: background-color .28s var(--ease), color .28s var(--ease); } :root.is-ar body { line-height: 1.85; } body.has-drawer { overflow: hidden; } h1, h2, h3, h4, h5 { margin: 0 0 .5em; font-weight: 800; line-height: 1.18; letter-spacing: -.02em; color: var(--text); text-wrap: balance; } :root.is-ar h1, :root.is-ar h2, :root.is-ar h3, :root.is-ar h4, :root.is-ar h5 { letter-spacing: 0; /* negative tracking breaks Arabic joining */ line-height: 1.4; font-weight: 700; } h1 { font-size: clamp(2rem, 1.35rem + 2.9vw, 3.6rem); } h2 { font-size: clamp(1.55rem, 1.15rem + 1.7vw, 2.5rem); } h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); } h4 { font-size: 1.05rem; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } a { color: var(--brand); text-decoration: none; transition: color .18s var(--ease); } a:hover { color: var(--brand-hover); } img, svg, video { max-width: 100%; display: block; } img { height: auto; } ul, ol { margin: 0; padding: 0; } li { list-style: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; } strong, b { font-weight: 700; color: var(--text); } hr { border: 0; border-top: 1px solid var(--border); margin: var(--gap-md) 0; } /* Latin numerals inside Arabic copy still read left-to-right; keeping them in the Latin face avoids the mixed-metrics wobble Cairo gives them. */ .tel { direction: ltr; unicode-bidi: isolate; display: inline-block; } .num, .cred__value, .spec__value { font-family: var(--font-num); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; display: inline-block; } /* .rate sits on a , so it must not be given a display value - an inline-block table cell drops out of the table's column sizing and the row rules stop short of the card edge. Figures only, no direction override: "SAR 2,300" and "2,300 ريال" both read correctly as written. */ .rate { font-family: var(--font-num); font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------------- focus */ :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); } :focus:not(:focus-visible) { outline: none; } .skip-link { position: absolute; inset-block-start: -100px; inset-inline-start: 12px; z-index: 200; padding: 12px 20px; background: var(--accent); color: var(--accent-ink); font-weight: 700; border-radius: 0 0 var(--r) var(--r); transition: inset-block-start .2s var(--ease); } .skip-link:focus { inset-block-start: 0; color: var(--accent-ink); } /* -------------------------------------------------------------- structure */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--container-pad); } @media (max-width: 430px) { :root { --container-pad: 16px; } } @media (min-width: 768px) { :root { --container-pad: 32px; } } .section { padding-block: var(--section-y); } .section--tight { padding-block: clamp(40px, 5vw, 64px); } .section--alt { background: var(--bg-alt); } .section--surface { background: var(--surface-2); } main { min-height: 50vh; } /* --------------------------------------------------------------- utilities */ .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; } .text-center { text-align: center; } .mt-0 { margin-block-start: 0; } .mb-0 { margin-block-end: 0; } /* Icons flip with the reading direction where they indicate movement. */ .ico { width: 20px; height: 20px; flex: none; } .ico--sm { width: 16px; height: 16px; } .ico--lg { width: 26px; height: 26px; } :root[dir="rtl"] .ico--rtl { transform: scaleX(-1); } /* -------------------------------------------------- placeholder data marker * Every value still waiting on the client renders with a dashed amber rule and * a small dot, so nothing unfinished can slip through a review unnoticed. * Remove the .is-pending class in config.js once real data lands. * ------------------------------------------------------------------------ */ .is-pending { text-decoration: underline dotted color-mix(in srgb, var(--amber) 75%, transparent); text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: help; } .is-pending::after { content: ''; display: inline-block; width: 5px; height: 5px; margin-inline-start: 5px; border-radius: 50%; background: var(--amber); opacity: .8; vertical-align: middle; } /* CONFIG.showPendingMarkers = false -> values render as ordinary text. */ :root.hide-pending .is-pending { text-decoration: none; cursor: inherit; } :root.hide-pending .is-pending::after { content: none; } /* ------------------------------------------------------------------ reveal */ [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); } [data-reveal].is-in { opacity: 1; transform: none; } [data-reveal][data-delay="1"] { transition-delay: .07s; } [data-reveal][data-delay="2"] { transition-delay: .14s; } [data-reveal][data-delay="3"] { transition-delay: .21s; } [data-reveal][data-delay="4"] { transition-delay: .28s; } [data-reveal][data-delay="5"] { transition-delay: .35s; } /* Before app.js runs, nothing has been translated yet — hold the first paint back a beat so visitors never see raw i18n keys. */ html:not(.is-ready) body { opacity: 0; } html.is-ready body { opacity: 1; transition: opacity .2s var(--ease); }