/* ═══════════════════════════════════════════════════════════════════════ SAUDI NATIONAL DAY — seasonal theme for darassalama.com ═══════════════════════════════════════════════════════════════════════ TWO KINDS OF RULE LIVE HERE, and the SELECTOR is what tells them apart. `html.nd-on …` — THE SEASON: the green, the gold, the greeting and the 96, the scene behind the page. `national-day.js` puts `nd-on` on only while its switch is true, so all of it disappears together when it is false. Nothing is deleted to revert. unscoped — THE LAYOUT, which is not seasonal and has to survive the switch: the header row ranged to departments.html, the nav leaning against the hospital name, the mobile nav kept in the flow instead of floating over the page, the contact block that no longer squeezes into two columns on a phone, the footer that stacks clear of the floating buttons, and the copyright that stopped reading ".All rights reserved" in Arabic. Those are fixes to the stock page and the user asked for them to stay. Where a rule did both, it is split into two rules rather than judged by eye. `html.nd-notoggle` / `html.nd-hastoggle` say which shape of header the page has. They are tagged whatever the switch says, because the layout rules need them in both states. Palette is lifted from the client's own Little Champions poster and the official lockup, not invented: #0C442F deep forest green the poster ground → OVERHEAD (the header) #E9C98D sand gold the poster's Arabic title `!important` appears where the page carries inline style attributes on the same elements (logo height, nav links). Inline styles outrank an external sheet, so without it the override silently loses. ═══════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════ RETHEME BLOCK — the only part to edit for a new season ══════════════════════════════════════════════════════════════════════ Every colour below is theme-dependent; everything further down the sheet references these and nothing else. Change the ten values here and drop a new photo in as nd-bg.webp and the whole page re-skins — header, nav pills, the greeting sheen, the scrim over the photo, the contact panel and the footer. Nothing else in this file needs touching. Pull the values from the client's own artwork, never invented — the greens below were sampled from the Little Champions poster and the gold from its Arabic title, which is why the page reads as the same family as the posters sitting in the slider. --nd-green the base of the header, and the footer's top --nd-green-mid the header gradient's middle stop, a touch darker --nd-green-2 the header gradient's far stop, a touch lighter --nd-deep the darkest tone: footer bottom, panel grounds --nd-gold the accent: rules, frames, active pills, the 96 --nd-on-gold type ON that gold — must clear 4.5:1 against it --nd-shine-1/2/3 the sheen that travels through the greeting and the 96, dark stop → light centre → pale peak --nd-deep-rgb --nd-deep as a bare R,G,B triple, for rgba() alphas --nd-scrim-rgb the wash laid over the background photo, R,G,B The two -rgb triples are bare numbers, not hex: CSS cannot take an alpha off a hex variable, so `rgba(var(--nd-deep-rgb), .55)` is the only way to reuse one tone at several strengths. Keep each triple equal to its hex. */ html.nd-on { --nd-green: #0C442F; --nd-green-mid: #0A3A28; --nd-green-2: #14603F; --nd-deep: #052217; --nd-gold: #E9C98D; --nd-on-gold: #0B3A26; --nd-shine-1: #e0ac36; --nd-shine-2: #ffe27e; --nd-shine-3: #fff2c8; --nd-deep-rgb: 4, 26, 18; --nd-scrim-rgb: 5, 34, 23; /* Swap the season's artwork here, or just overwrite the files. The scene goes behind
; the motif is the barely-there weave in the header. */ --nd-bg-img: url("nd-bg.webp"); --nd-motif-img: url("nd-motif.webp"); } /* The Sadu edge strips were removed on request: with the National Day scene filling the middle, a second woven frame around it was one texture too many. The tile stays in assets/ (nd-sadu-green.webp) in case it is wanted back. */ /* ── 2. OVERHEAD: the header carries the green ───────────────────────────── */ html.nd-on .site-header { position: relative; background: linear-gradient(135deg, var(--nd-green) 0%, var(--nd-green-mid) 46%, var(--nd-green-2) 100%) !important; border-bottom: 4px solid var(--nd-gold) !important; } html.nd-on .site-header::before { /* woven pixel motif, barely there */ content: ""; position: absolute; inset: 0; background: var(--nd-motif-img) repeat center / 80px 80px; opacity: .12; mix-blend-mode: screen; pointer-events: none; } html.nd-on .site-header > * { position: relative; z-index: 1; } /* Ranged to departments.html, which is the site's best header and does not use the base sheet's metrics: a 78px row with an 18px gutter. Matching it means the masthead keeps its shape as a patient moves between tabs. */ .header-inner { gap: 18px; min-height: 78px; padding-top: 8px !important; padding-bottom: 8px !important; flex-wrap: wrap; } /* The row's WIDTH, ranged to departments too — and this is the larger half of the difference. departments.html does not use the base `.container` for its header: it sets its own max-width:1300px with a 28px gutter, giving 1244px of row. The base container is width:min(1120px, 92vw), 124px narrower, so the same five links and the greeting had to fit into noticeably less space and fitHeaderRow() was shrinking the nav BELOW the sizes set above to keep it on one line. Scoped to the header, so the content below keeps its own measure — which is exactly what departments does. The gutter is fluid because a flat 28px each side takes 56px off a 375px phone. */ .site-header .container { width: 100%; max-width: 1300px; padding-inline: clamp(16px, 2vw, 28px); } /* The row reads: name, nav, the greeting with the 96, then the language select on its own at the end. Orders are set explicitly at every width rather than left to DOM order, because the greeting is APPENDED to the row at runtime — it arrives last whatever it is meant to sit beside. The two stacked layouts below (900px and 640px) re-order the select back in front of it, since there the greeting takes a full row of its own and the select must not be pushed onto a third one. */ .site-header .logo { order: 1; } .site-nav { order: 2; margin-inline-end: auto; } html.nd-on .header-inner > .nd-greet { order: 3; } /* A SECOND auto margin, facing the greeting. Flexbox splits the row's free space equally between every auto margin on the main axis, so with one after the nav and one before the select the greeting ends up centred in the gap between Login and the language bar rather than shoved against either end. This div inherits the page direction, so inline-start is the side facing the greeting in both Arabic and English. */ .header-inner > div { order: 4; margin-inline-start: auto; } /* ── 2b. The nav, on the green ─────────────────────────────────────────── The base sheet sets `.site-nav a { color:#0b1020 }` — near-black — plus `opacity:.9`. On the green header that renders as an almost invisible black row, which is what "header is all black" was. Links go solid white and the current page takes a gold pill. The inner .t-en/.t-ar spans are targeted too: colouring only the leaves any span that sets its own colour behind. Opacity is forced back to 1 — dimmed white on a coloured panel is exactly the half-legible text this is meant to fix. */ html.nd-on .site-nav a, html.nd-on .site-nav a span { color: #fff !important; opacity: 1 !important; font-weight: 600; } /* The nav is translated, so its width is different in each of the four languages — Filipino's labels are far wider than English's. --nd-fit is driven by fitHeaderRow() in national-day.js: it steps down until the whole masthead holds one row, whatever language is showing. Padding is !important because the page sets it inline on every link. */ .site-nav a { font-size: calc(15px * var(--nd-fit, 1)) !important; padding: calc(9px * var(--nd-fit, 1)) calc(15px * var(--nd-fit, 1)) !important; } .site-nav { gap: calc(5px * var(--nd-fit, 1)) !important; } .header-inner { column-gap: calc(18px * var(--nd-fit, 1)) !important; } .site-nav a { border-radius: 8px; transition: background .18s ease; } html.nd-on .site-nav a:not(.active):hover { background: rgba(255, 255, 255, .17) !important; } /* current page: gold pill, deep green type — 4.5:1 clear */ html.nd-on .site-nav a.active, html.nd-on .site-nav a[aria-current="page"] { background: var(--nd-gold) !important; box-shadow: 0 3px 12px rgba(0, 0, 0, .4) !important; } html.nd-on .site-nav a.active, html.nd-on .site-nav a.active span, html.nd-on .site-nav a[aria-current="page"] span { color: var(--nd-on-gold) !important; font-weight: 700; } html.nd-on #lang-select { background: rgba(255, 255, 255, .96); color: var(--nd-on-gold); border: 1px solid var(--nd-gold); font-weight: 600; } /* The logo IMAGE is hidden, not removed — flip the switch off and it is simply visible again. In its place the hospital name is set as type, the way the posters set it: Arabic over English, both ranging the same width. */ html.nd-on .site-header .logo img { display: none !important; } .site-header .logo { text-decoration: none; display: flex; align-items: center; } html.nd-on .nd-brand { display: flex; align-items: center; } /* The two lines of the name are ranged to the same width at runtime by matchPair() in national-day.js. CSS cannot equalise two different scripts on its own, and a hand-tuned font-size only holds until the wording changes. */ /* align-items MUST NOT be stretch. A stretched child fills the column, so both spans measured the same width, matchPair's ratio was always 1, and the English never resized — the two lines only looked close by luck. */ html.nd-on .nd-name { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.16; } html.nd-on .nd-name .ar { color: #fff; font-size: calc(23px * var(--nd-fit, 1)); font-weight: 800; white-space: nowrap; text-shadow: 0 2px 5px rgba(0, 0, 0, .45); } html.nd-on .nd-name .en { color: #fff; /* full strength, never a tinted overlay */ font-size: 14px; font-weight: 700; white-space: nowrap; margin-top: 3px; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); } /* ── 3. The greeting, in the header beside the name ────────────────────── It previously sat in its own row, centred, with a rule flexing between the two scripts. Marooned mid-header like that it read as filler. Sitting at the end of the brand row it belongs to something. */ html.nd-on .nd-greet { /* THE BLOCK'S SIZE. Everything in the greeting is expressed against this: the Arabic line takes it, the English line 0.62 of it, and the 96 twice it — which is what makes the numeral cover both lines. Change this one value to scale the whole block. */ --nd-greet-size: calc(clamp(14px, 1.6vw, 22px) * var(--nd-fit, 1)); display: flex; flex-direction: row; align-items: center; gap: 14px; /* air around the numeral - at 3px it read as part of the Arabic line rather than a mark of its own */ /* This auto margin is what makes the nav lean against the hospital name, the way departments.html does it. An auto margin eats the row's free space before justify-content ever sees it, so all of the slack collects HERE — in front of the greeting — and the name and nav pack together at the start instead of drifting apart. It was briefly removed because the greeting used to sit AFTER the language select, where the same margin left the select stranded between it and the nav. With the select ordered last that no longer happens: the greeting and the select travel to the end together, with their own gutter between them. */ margin-inline-start: 0; /* direction:ltr so "to the right of it" means the same thing in the Arabic layout as in the English one. Each line carries its own dir attribute, so the Arabic still shapes correctly inside this box. */ direction: ltr; } html.nd-on .nd-greet-lines { display: flex; flex-direction: column; align-items: flex-start; /* not stretch — see the note on .nd-name */ /* Tight: the 96 is sized FROM this block's height, so the leading here is what decides how tall the numeral has to be to cover both lines. */ line-height: 1.02; } /* The 96th National Day, in the dental hero's gold — same gradient, same 200% band, same 5s ease-in-out sweep, so the two pages glow alike. Sized in CSS as a multiple of the Arabic line beside it, so it tracks that text at every width and in every language. An earlier version measured the block height in JS and set the size from it; that ran inside the header-fit loop, which resizes those same lines, so the two kept resizing each other. Weight 700 rather than 900: at this size the heavy cut closed up the counters in the 9 and the 6 and read as a blob once the sheen crossed it. */ /* The mark is the PHONE's stand-in for the wording and the numeral, and it is hidden everywhere until a mobile rule asks for it. It lives in the markup on every page, so this must be in the SHARED sheet: written only in the greeting-only sheet, it left the lockup sitting in the middle of offers.html's desktop header, which loads this file instead. */ html.nd-on .nd-lockup { display: none; } html.nd-on .nd-96 { color: var(--nd-gold); font-weight: 700; /* `normal`, not a number. The numeral is painted by a gradient with background-clip:text, and a background is only painted inside the element's own box — so any part of a glyph hanging outside that box gets no paint and simply disappears. A ratio smaller than the font's own ascent+descent shears the digits: .70 cut their feet, and a flat 1 can still clip the tops in a face whose metrics run tall. `normal` uses the font's own metrics, which contain every glyph by definition, so it cannot clip in any face. It costs nothing here: .nd-greet centres its items, so a taller box does not move the numeral. Tightness comes from --nd-greet-size, never from here. */ line-height: normal; letter-spacing: -.045em; font-size: calc(var(--nd-greet-size) * 1.7); text-shadow: 0 2px 8px rgba(0, 0, 0, .55); flex: 0 0 auto; } /* The guard is not optional. A transparent text-fill with no background-clip support renders the numeral INVISIBLE rather than unstyled, so browsers without it must keep the solid gold above. */ @supports ((-webkit-background-clip: text) or (background-clip: text)) { /* The Arabic greeting glows with the same gold as the 96 and the dental hero. The English line beside it stays solid #fff: white on a coloured panel has to hold its contrast, and a gradient-filled white would drop it below legible the moment the dark stop crossed a letter. */ html.nd-on .nd-greet .ar, html.nd-on .nd-96 { background: linear-gradient(100deg, var(--nd-shine-1) 10%, var(--nd-shine-2) 42%, var(--nd-shine-3) 50%, var(--nd-shine-2) 58%, var(--nd-shine-1) 90%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 2px 8px rgba(var(--nd-deep-rgb), .9)) drop-shadow(0 0 18px rgba(var(--nd-deep-rgb), .7)); animation: ndShine 5s ease-in-out infinite; } /* Arabic and Urdu read right-to-left, so the light travels the other way — the same correction dental makes on its hero. */ html.nd-on .nd-greet .ar { animation-direction: reverse; } /* only background-position animates — compositor-cheap, no layout, no paint of anything but the clipped band */ @keyframes ndShine { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }} html.nd-on .nd-greet .ar { color: var(--nd-gold); font-size: var(--nd-greet-size); font-weight: 800; white-space: nowrap; text-shadow: 0 2px 6px rgba(0, 0, 0, .5); } html.nd-on .nd-greet .en { color: #fff; /* full strength, never a tinted overlay */ font-size: calc(var(--nd-greet-size) * .62); /* matchPair re-ranges it at runtime */ font-weight: 700; letter-spacing: .04em; white-space: nowrap; margin-top: 1px; text-shadow: 0 2px 6px rgba(0, 0, 0, .5); } @media (max-width: 900px) { html.nd-on .nd-name .ar { font-size: 17px; } html.nd-on .nd-greet { margin-inline-start: 0; justify-content: center; width: 100%; } /* The greeting is width:100% here, so it wraps to a row of its own. Left at order 3 the select would be pushed onto a THIRD row; it belongs beside the nav on the first. */ .site-nav { margin-inline-end: 0; } .header-inner > div { order: 3; } html.nd-on .header-inner > .nd-greet { order: 4; }} /* ── 3b. THE MIDDLE: the National Day scene fills the empty cream ───────── The stock page left a wide band of blank cream around the slider. The scene goes there, with a scrim over it — the poster is white and the photograph is busy, so without one the offer stops reading as the subject. */ html.nd-on main { position: relative; background: linear-gradient(180deg, rgba(var(--nd-scrim-rgb), .72) 0%, rgba(var(--nd-scrim-rgb), .78) 26%, rgba(var(--nd-scrim-rgb), .78) 74%, rgba(var(--nd-scrim-rgb), .94) 100%), var(--nd-bg-img) center center / cover no-repeat fixed; } /* `fixed` costs too much on mobile compositing, and iOS ignores it outright — scroll it there instead of leaving a background that judders. */ @media (max-width: 900px) { html.nd-on main { background: linear-gradient(180deg, rgba(var(--nd-scrim-rgb), .74) 0%, rgba(var(--nd-scrim-rgb), .84) 30%, rgba(var(--nd-scrim-rgb), .93) 100%), var(--nd-bg-img) center top / cover no-repeat scroll; }} /* ── 3c. The mark, on its own stage ────────────────────────────────────── The top of
was a dead band of near-flat dark green. The عزنا بطبعنا mark goes there — shown once, large, instead of twice small. */ html.nd-on .nd-stage { display: flex; justify-content: center; align-items: center; width: 100%; max-width: 1180px; /* the same column the offers sit in, so the mark centres on the content and not on the viewport */ margin: 0 auto; padding: 18px 20px; /* symmetric: 20/8 sat it low in the band */ text-align: center; } html.nd-on .nd-stage .nd-ndlogo { height: clamp(74px, 10vw, 128px); width: auto; display: block; margin-inline: auto; /* belt and braces if the flex row is ever changed */ filter: drop-shadow(0 5px 16px rgba(0, 0, 0, .6)); } /* ── 4. Close the gaps ─────────────────────────────────────────────────── The stock page breathes at ~40px a step, which left a lot of empty cream between the header and the first poster. */ html.nd-on main > .section { padding-top: 18px !important; padding-bottom: 12px !important; } html.nd-on .section-title { margin: 4px 0 2px !important; color: #fff !important; text-shadow: 0 2px 10px rgba(0,0,0,.55); } html.nd-on .slider-container { margin: 16px auto 0 !important; } html.nd-on.nd-page-offers .dots { margin-top: 12px !important; margin-bottom: 22px !important; } /* ── 5. The slider, dressed ──────────────────────────────────────────────── */ html.nd-on .slider-container { border-radius: 10px; /* zero spread offset = the gold sits flush on the image box edge, no ring of anything else between the poster and the frame. */ box-shadow: 0 0 0 5px var(--nd-gold), 0 18px 46px rgba(0, 0, 0, .55); } html.nd-on .slider-btn { background: var(--nd-gold); color: var(--nd-on-gold); /* deep green on gold clears 4.5:1 */ box-shadow: 0 3px 12px rgba(0, 0, 0, .45); } html.nd-on .dot { background: rgba(255, 255, 255, .38); } html.nd-on .dot.active { background: var(--nd-gold); } /* ── 6. Seasonal slides ────────────────────────────────────────────────── With the theme off these are hidden here AND skipped by the slider's own query, so the dots and the translate maths never count an empty frame. */ html:not(.nd-on) .nd-only { display: none !important; } .slide[hidden] { display: none !important; } /* .slide sets display:flex, which outranks [hidden] */ /* ── 7. Contact, on the scene ──────────────────────────────────────────── #contact lives INSIDE
, so once the scene went behind main this section became dark type on a dark photograph. Every string in it is lifted to white — full strength, not a tinted overlay — and the panel behind it is darkened so the map and the text keep their contrast. */ html.nd-page-offers #contact { /* the gold rule here was not wanted */ margin-top: 8px; /* the map ran right up against the footer; this is the gap under it. It has to be set here rather than on the footer, because the footer is outside
and a margin there would sit on the scene, not under it. */ padding-bottom: 38px !important; } html.nd-on.nd-page-offers #contact { background: rgba(var(--nd-deep-rgb), .55) !important; border-top: 0 !important; } html.nd-on.nd-page-offers #contact .section-title, html.nd-on.nd-page-offers #contact p, html.nd-on.nd-page-offers #contact li, html.nd-on.nd-page-offers #contact strong, html.nd-on.nd-page-offers #contact .muted { color: #fff !important; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); } html.nd-on.nd-page-offers #contact a { color: var(--nd-gold) !important; text-decoration: none; } html.nd-on.nd-page-offers #contact a:hover { text-decoration: underline; } /* The map's top edge is ranged to the HEADING, not to the first line of text. The heading is a sibling ABOVE .contact-grid, so no amount of aligning inside that grid could reach it. `display:contents` dissolves .contact-grid and lifts its two children into the section's own grid; the map is then spanned across both rows, which puts its top edge on the heading's. No negative margins, so nothing drifts when the heading wraps. */ html.nd-page-offers #contact .container { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; align-items: start; } html.nd-page-offers #contact .contact-grid { display: contents; } html.nd-page-offers #contact .section-title { grid-column: 1; grid-row: 1; text-align: start !important; margin: 0 0 10px !important; } html.nd-page-offers #contact .contact-grid > *:not(.map) { grid-column: 1; grid-row: 2; } html.nd-page-offers #contact .map { grid-column: 2; grid-row: 1 / span 2; align-self: start; } @media (max-width: 760px) { html.nd-page-offers #contact .container { display: block; } html.nd-page-offers #contact .contact-grid { display: grid; grid-template-columns: 1fr; gap: 18px; } html.nd-page-offers #contact .section-title { text-align: center !important; } /* Undoing `display:contents` is NOT enough. `grid-column: 2` on the map creates an IMPLICIT second column even in a one-column grid, so the two children kept sitting side by side and the address was squeezed into a strip about 90px wide. The placement has to be cleared as well. */ html.nd-page-offers #contact .section-title, html.nd-page-offers #contact .contact-grid > * { grid-column: auto !important; grid-row: auto !important; }} html.nd-page-offers #contact .map { overflow: hidden; border-radius: 8px; line-height: 0; } html.nd-page-offers #contact .map iframe { border-radius: 8px; width: 100% !important; height: 300px !important; max-height: 300px !important; display: block; } html.nd-on.nd-page-offers #contact .map iframe { border: 2px solid var(--nd-gold); } /* ── 8. The footer ─────────────────────────────────────────────────────── It sits OUTSIDE
, so the scene behind main never reached it and it stayed a tall block of plain white under a themed page. The base sheet gives it `padding:26px 0 40px; margin-top:40px`, which is most of that height. Themed to match, and roughly halved. */ .site-footer { /* the gold rule here was not wanted */ padding: 20px 0 22px !important; margin-top: 0 !important; } html.nd-on .site-footer { background: linear-gradient(180deg, var(--nd-green) 0%, var(--nd-deep) 100%); border-top: 0 !important; } html.nd-on .site-footer, html.nd-on .site-footer p, html.nd-on .site-footer small, html.nd-on .site-footer span { color: #fff !important; opacity: 1 !important; } html.nd-on .site-footer a { color: var(--nd-gold) !important; opacity: 1 !important; text-decoration: none; } html.nd-on .site-footer a:hover { text-decoration: underline; } /* the base sets gap:20px on .footer-inner and 14px on .footer-nav; both add height once the row wraps on a narrow window */ .footer-inner { padding-top: 0 !important; padding-bottom: 0 !important; gap: 18px !important; line-height: 1.6; } .site-footer p, .site-footer .footer-nav { margin: 0 !important; } /* The copyright is a Latin-only sentence. In Arabic the page direction is rtl, so its trailing full stop resolves to the PARAGRAPH direction and renders at the far left — ".All rights reserved", the stop leading the line. Isolating the run is the fix; rewording cannot reach it. */ .site-footer p { direction: ltr; unicode-bidi: isolate; } /* ── 9. Mobile ────────────────────────────────────────────────────── The header ships in TWO shapes on this site and they need opposite treatment, which is why one set of rules fixed neither: · offers.html has NO hamburger. Its own