/* * globals.css — the site palette (STEP 2) and the navbar alignment. * * Every colour on the site resolves to one of the variables below: _polish.mjs * rewrites the original stylesheets, the page markup and the scripts to use * them, so nothing outside this palette is left. Each colour has an `-rgb` * twin for the translucent uses (overlays, hairlines, glows). * * Direction (approved): keep the dark ground with gold accents; the neutrals * come from the logo's navy and silver. No pure black, no pure white. * Contrast ratios are listed in STEP2.md. * * Loaded last, after the rewritten original stylesheets. */ :root { /* brand — the logo's navy */ --clr-brand: #183048; --clr-brand-rgb: 24, 48, 72; --clr-brand-dark: #10233a; --clr-brand-dark-rgb: 16, 35, 58; /* hover / active */ --clr-brand-tint: #e9eef4; --clr-brand-tint-rgb: 233, 238, 244; /* the light tint */ /* accent — one gold, for primary buttons and small highlights */ --clr-accent: #d4a02c; --clr-accent-rgb: 212, 160, 44; --clr-accent-hover: #b8891f; --clr-accent-hover-rgb: 184, 137, 31; --clr-on-accent: #0c1119; --clr-on-accent-rgb: 12, 17, 25; /* neutrals — navy-tinted darks, silver text */ --clr-bg: #0c1119; --clr-bg-rgb: 12, 17, 25; /* page background */ --clr-surface: #121a26; --clr-surface-rgb: 18, 26, 38; /* cards, bands */ --clr-surface-raised: #1a2432; --clr-surface-raised-rgb: 26, 36, 50; /* menus, inputs */ --clr-border: #2b3747; --clr-border-rgb: 43, 55, 71; --clr-heading: #eef1f5; --clr-heading-rgb: 238, 241, 245; /* same neutral as body, */ --clr-text: #c3cad4; --clr-text-rgb: 195, 202, 212; /* at different weights */ --clr-muted: #97a1af; --clr-muted-rgb: 151, 161, 175; /* semantic */ --clr-success: #25d366; --clr-success-rgb: 37, 211, 102; /* WhatsApp */ --clr-success-hover: #1eb257; --clr-success-hover-rgb: 30, 178, 87; --clr-on-success: #0c1119; --clr-on-success-rgb: 12, 17, 25; --clr-warning: #f08a3c; --clr-warning-rgb: 240, 138, 60; --clr-error: #f06a6a; --clr-error-rgb: 240, 106, 106; } /* -------------------------------------------------------------- type (STEP 3) * One scale, defined once: 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 48. * _polish.mjs rewrites every font-size on the site to one of these variables. * The three largest steps shrink on smaller screens, so a size is on the * scale at every width. Headings: one family, weight 700, line height 1.2, a * size per level. Body: weight 400, line height 1.6, lines capped at 70ch. */ :root { --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --text-4xl: 36px; --text-5xl: 48px; --h1: var(--text-5xl); --h2: var(--text-4xl); --h3: var(--text-2xl); --h4: var(--text-xl); --h5: var(--text-lg); --h6: var(--text-base); --lh-heading: 1.2; --lh-body: 1.6; --ls-caps: 0.08em; /* every uppercase label */ --measure: 70ch; /* longest paragraph line */ } @media (max-width: 991.98px) { :root { --text-5xl: 36px; } } @media (max-width: 767.98px) { :root { --text-5xl: 30px; --text-4xl: 30px; --text-3xl: 24px; } } @media (max-width: 575.98px) { :root { --text-4xl: 24px; --h3: var(--text-xl); } } /* The original stylesheet sets "contain: layout style" on . That makes the body a containing block, so the header's "position: fixed" behaves like absolute and the header — and anything sticky under it — scrolls away. Nothing here needs layout containment. */ body { contain: none !important; } body { font-family: 'Poppins', sans-serif; font-size: var(--text-base); line-height: var(--lh-body); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'Poppins', sans-serif !important; font-weight: 700 !important; line-height: var(--lh-heading) !important; } h1, .h1 { font-size: var(--h1) !important; } h2, .h2 { font-size: var(--h2) !important; } h3, .h3 { font-size: var(--h3) !important; } h4, .h4 { font-size: var(--h4) !important; } h5, .h5 { font-size: var(--h5) !important; } h6, .h6 { font-size: var(--h6) !important; } p, li, dd, blockquote, figcaption, td, th, .lead { line-height: var(--lh-body) !important; } /* comfortable line length; centred paragraphs stay centred once capped */ p { max-width: var(--measure); } .text-center p, p.text-center, p.mx-auto, [style*="text-align: center"] p, [style*="text-align:center"] p, p[style*="text-align: center"], p[style*="text-align:center"] { margin-left: auto; margin-right: auto; } /* paragraphs whose own inline max-width is wider than the measure (750 / 780 / 920px — up to 92 characters a line); the narrower inline caps (560–600px) are already inside it and stay */ p[style*="max-width: 750px"], p[style*="max-width: 780px"], p[style*="max-width: 920px"] { max-width: var(--measure) !important; } .text-uppercase { letter-spacing: var(--ls-caps) !important; } /* WhatsApp green carries dark text: white on #25d366 was 1.98:1, this is 9.54:1 */ .btn-success, .btn-success *, .whatsapp-button, .whatsapp-button *, .fab-btn.whatsapp, .fab-btn.whatsapp *, #ai-agent-btn, #ai-agent-btn * { color: var(--clr-on-success) !important; } /* "What's Included" sits on a gold-tinted box: muted text there was 4.18:1, body text is AA */ .rules-box .feature-list-condensed li { color: var(--clr-text) !important; } /* the Facebook embed sits in a light frame: its fallback link is navy (11.57:1) */ .fb-page a { color: var(--clr-brand) !important; } /* open FAQ item: the original's color-mix() of gold into the surface, rebuilt from palette values — the raised surface under a 10% accent layer */ .accordion-button:not(.collapsed) { background-color: var(--clr-surface-raised); background-image: linear-gradient(rgba(var(--clr-accent-rgb), 0.1), rgba(var(--clr-accent-rgb), 0.1)); } /* trending cards crop to a near-square from the centre: on the split Kaaba | mosque picture that is the divider, so aim the crop at the Kaaba */ a.content-card img[src$="trending_taif.jpg"] { object-position: 22% 50%; } /* Home hero booking tabs. The tab bar sits inside a