/* ============================================================ Xposio Tools — design tokens from DNA v1.0 DIGITAL package (03_COLOR_SYSTEM/Design_Tokens.json — measured, zero invented colors) Ratios: blue/violet >=70% · lavender bridge ~20% · gold <=5%. Forbidden combos enforced by usage below (e.g. Ink on Night = 1.03 fail). Static CSS by design: shared hosting, no build step, no heavy libraries. ============================================================ */ /* The `hidden` attribute must always win. The browser default is `[hidden] { display: none }`, which ANY class rule that sets `display` silently overrides — a class selector outranks it. That is exactly what happened to `.consent-categories { display: grid }`: the preferences panel rendered permanently expanded even though the markup said `hidden` and the toggle reported `aria-expanded="false"`. Declaring it once, defensively, keeps every current and future `element.hidden = true` honest. */ [hidden] { display: none !important; } :root { /* brand */ --ink: #040B51; /* primary text — 17.92:1 on white (AAA) */ --primary: #3426F1; /* 7.80 on white (AAA) */ --primary-deep: #1C19AC; /* 11.77 on white (AAA) */ --violet: #7F26FB; /* 5.88 on white (AA) */ --accent-blue: #1387F8; /* >=24px text only on light (3.59) */ --i-cyan: #00B2FC; /* touch only — NEVER text on light (2.39 fail) */ /* bridge */ --lavender: #6E50B8; /* 6.00 on white (AA) */ --lavender-2: #9B7BD4; /* accent (<=5%) */ --gold: #B8923F; /* fails as text on light — decorative only */ --gold-light: #E3BF78; /* night accent */ /* surfaces */ --white: #FFFFFF; --cream: #F7F3EC; --night: #1D1338; --mist: #F6F0FB; /* night text — 15.61 (AAA) */ /* typography — fonts declared, files not shipped (license O-4 pending): browsers fall back safely to system-ui per brand fallback rule */ --font-ar: "Tajawal", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-head-en: "Space Grotesk", "Inter", system-ui, sans-serif; --font-body-en: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --space-1: .25rem; --space-2: .5rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2.5rem; --space-6: 4rem; --radius: .5rem; --maxw: 72rem; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; color: var(--ink); background: var(--white); font-family: var(--font-body-en); font-size: 1rem; line-height: 1.6; } /* Arabic typography — brand rules are LAW: letter-spacing forbidden · line-height >= 1.7 · RTL set on root */ html[lang="ar"] body { font-family: var(--font-ar); letter-spacing: 0 !important; line-height: 1.7; } html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { font-family: var(--font-ar); letter-spacing: 0 !important; } h1, h2, h3 { font-family: var(--font-head-en); color: var(--ink); line-height: 1.2; } h1 { font-size: 2.25rem; margin: 0 0 var(--space-3); } h2 { font-size: 1.6rem; margin: var(--space-5) 0 var(--space-2); } h3 { font-size: 1.25rem; color: var(--primary-deep); } a { color: var(--primary); } a:hover { color: var(--primary-deep); } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-3); } /* header / nav */ .site-header { border-bottom: 1px solid var(--mist); background: var(--white); } .site-header .container { display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-2); padding-bottom: var(--space-2); flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--ink); font-family: var(--font-head-en); font-weight: 700; } .brand img { height: 2rem; width: auto; } .nav { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-inline-start: auto; } .nav a { text-decoration: none; color: var(--ink); font-weight: 500; } .nav a:hover { color: var(--primary); } .lang-switch { border: 1px solid var(--lavender); color: var(--lavender); border-radius: var(--radius); padding: .2rem .7rem; text-decoration: none; font-weight: 700; } .lang-switch:hover { background: var(--mist); } /* footer — night surface uses Mist text (AAA), never Ink (1.03 fail) */ .site-footer { background: var(--night); color: var(--mist); margin-top: var(--space-6); } .site-footer a { color: var(--mist); } .site-footer .container { padding: var(--space-5) var(--space-3); display: grid; gap: var(--space-3); } .site-footer small { color: var(--lavender-2); } /* cards / shells */ .card { background: var(--white); border: 1px solid var(--mist); border-radius: var(--radius); padding: var(--space-4); } .grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); } /* calculator shell */ .calc-shell { display: grid; gap: var(--space-4); grid-template-columns: 1fr; } @media (min-width: 60rem) { .calc-shell { grid-template-columns: 2fr 1fr; } } .calc-form { display: grid; gap: var(--space-3); } .calc-form label { font-weight: 600; display: block; margin-bottom: var(--space-1); } .calc-form input, .calc-form select { width: 100%; padding: .55rem .7rem; border: 1px solid var(--lavender-2); border-radius: var(--radius); font: inherit; color: var(--ink); background: var(--white); } .calc-form input:focus, .calc-form select:focus { outline: 2px solid var(--primary); outline-offset: 1px; } .field-error { color: #A11212; font-size: .875rem; margin-top: var(--space-1); } .btn { display: inline-block; background: var(--primary); color: var(--white); border: 0; border-radius: var(--radius); padding: .6rem 1.4rem; font: inherit; font-weight: 700; cursor: pointer; } .btn:hover { background: var(--primary-deep); } .btn-secondary { background: transparent; color: var(--primary); border: 1px solid var(--primary); } .result-box { background: var(--cream); border-radius: var(--radius); padding: var(--space-4); } .result-value { font-family: var(--font-head-en); font-variant-numeric: tabular-nums; font-size: 1.8rem; color: var(--primary-deep); } .result-detail { font-variant-numeric: tabular-nums; } /* disclaimer */ .disclaimer { border-inline-start: 4px solid var(--gold); background: var(--cream); padding: var(--space-3); border-radius: var(--radius); font-size: .9rem; } /* promotion slot — ALWAYS labeled, visually distinct from content */ .promo { border: 1px dashed var(--lavender); border-radius: var(--radius); padding: var(--space-3); background: var(--mist); } .promo-label { display: inline-block; font-size: .75rem; font-weight: 700; color: var(--lavender); text-transform: uppercase; letter-spacing: .05em; } html[lang="ar"] .promo-label { letter-spacing: 0; } .promo-video-facade { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); background: var(--night); border-radius: var(--radius); min-height: 10rem; color: var(--mist); text-align: center; padding: var(--space-5) var(--space-3); cursor: pointer; border: 0; width: 100%; font: inherit; } /* First-party poster contents. The video is identified by its own title and a drawn play cue — never by a YouTube thumbnail, which would be a third-party request before the visitor asked for the video. */ .promo-video-poster-title { font-weight: 600; font-size: 1rem; max-width: 90%; } .promo-video-poster-cue { font-size: .9rem; opacity: .85; } .promo-video-fallback { font-size: .85rem; margin-top: var(--space-2); } /* reserved future ad zone — clearly labeled placeholder space, NO ad code */ /* Ad slot geometry — ONE source of truth for both states. r8: the reserved box previously stood at 6rem while a live unit occupied the 250px PLUS its label, so client-side activation grew the box by ~180px and shifted the page. Under Google CMP the server always renders the inert state (consent is unknown server-side), so that was the only path there is. Reserving unit + label makes activation height-neutral, measured by D5b. */ :root { --ad-unit-min: 250px; --ad-label-space: 1.4rem; } .ad-reserved { min-height: calc(var(--ad-unit-min) + var(--ad-label-space)); border: 1px dashed var(--lavender-2); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--lavender); font-size: .8rem; background: var(--white); } /* Live unit: label above the ad, not centred beside it. `ad-reserved` stays on the element so the reserved min-height survives activation. Applies to both the server-rendered live state and the one cmp-bridge.js builds after consent; they are the same DOM. */ .ad-reserved.ad-live { display: block; align-items: initial; justify-content: initial; } .ad-label { display: block; height: var(--ad-label-space); line-height: var(--ad-label-space); color: var(--lavender); font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; } .ad-reserved.ad-live ins.adsbygoogle { min-height: var(--ad-unit-min); } /* tables */ table.data { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; } table.data th, table.data td { border: 1px solid var(--mist); padding: .45rem .7rem; text-align: start; } table.data th { background: var(--mist); } .table-wrap { overflow-x: auto; } /* utilities */ .muted { color: var(--lavender); } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; inset-inline-start: -999px; } .skip-link:focus { position: static; display: inline-block; padding: var(--space-2); } .breadcrumbs { font-size: .875rem; margin: var(--space-3) 0; } .breadcrumbs a { color: var(--lavender); } /* cookie-consent banner (first-party; rendered only when tracking configured + undecided) */ .consent-banner { position: fixed; inset-inline: var(--space-3); bottom: var(--space-3); z-index: 50; max-width: 34rem; margin-inline: auto; background: var(--night); color: var(--mist); border-radius: var(--radius); padding: var(--space-4); box-shadow: 0 6px 24px rgba(4, 11, 81, .35); } .consent-banner .consent-title { font-size: 1rem; margin: 0 0 var(--space-2); color: var(--mist); } .consent-banner p { margin: 0 0 var(--space-3); font-size: .9rem; } .consent-banner a { color: var(--mist); text-decoration: underline; } .consent-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; } .consent-banner .btn-secondary { color: var(--mist); border-color: var(--mist); } /* share tools + print (Phase 5) */ .share-tools { display: flex; gap: var(--space-2); flex-wrap: wrap; } @media print { .site-header, .site-footer, .no-print, .promo, .ad-reserved, .consent-banner, .breadcrumbs, .lang-switch { display: none !important; } body { background: #fff; color: #000; } a[href]::after { content: " (" attr(href) ")"; font-size: .8em; } .card { border: 1px solid #ccc; box-shadow: none; } } /* consent v2: categories block */ .consent-categories { display: grid; gap: var(--space-1); margin-bottom: var(--space-3); } .consent-categories label { display: flex; gap: var(--space-2); align-items: center; font-size: .9rem; } /* discovery (Phase 7) */ .category-jumps { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; } .category-jumps a { color: var(--primary); } .calc-filter { margin: var(--space-3) 0; max-width: 28rem; } .calc-filter input { width: 100%; padding: .55rem .8rem; border: 1px solid var(--lavender-2); border-radius: var(--radius); font: inherit; }