/* ===================================================================== coming-soon.css — styling for the standalone /coming-soon landing page. Loaded ONLY by coming-soon.php, LAST (after fonts.css, the theme overlay, site.css and theme-unified.css), so its overrides win. Two jobs: 1. Adapt the shared unified header to a nav-less landing banner — a taller, more generous bar, and a language toggle that survives the mobile rules written for the full site's drawer menu. 2. Style the hero card + footer strip. Tenant-neutral: every colour comes from the brand custom properties that flip per theme (--brand-primary / --brand-secondary / --brand-line), so navy and green installs both look correct with no per-theme rules. The hero sits on the theme's fixed dark backdrop (html.theme-*::before), which is why its text is light. ===================================================================== */ /* --------------------------------------------------------------------- 1 · HEADER Banner proportions are custom properties on , which the existing site.css rules (`min-height: var(--appbar-height, 68px)`, `height: var(--appbar-logo-height, 44px)`, `font-size: var(--brand-ar-size, 17px)` …) pick up through the cascade — no inline style needed. These four are FALLBACKS ONLY. coming-soon-theme.php overrides all four (and their phone variants) from alp_banner_metrics(), the same admin `banner_height` / `title_*_size` settings partials/site-header.php uses for every other page — it is linked after this file, so it wins. They used to be authoritative, and set to 96/62/23/13: a banner this page sized for itself, ignoring the settings. That is fine until an admin tunes the header, at which point the real site moves and the placeholder standing in for it does not. So keep these EQUAL to the shipped setting defaults — the point of a fallback here is to look like the site when the endpoint fails to load, not to express a second opinion about the banner. --------------------------------------------------------------------- */ body.cs-page { --appbar-height: 68px; --appbar-logo-height: 44px; --brand-ar-size: 17px; --brand-en-size: 11px; /* ---- Hero tokens ------------------------------------------------------- Only TWO are authoritative, and coming-soon-theme.php overrides both from the admin settings (coming_card_bg + coming_card_opacity → --cs-card-bg, coming_card_text → --cs-fg). The values here are the fallbacks used if that stylesheet is missing. EVERYTHING else derives from --cs-fg via color-mix, which is what makes a LIGHT card work: set a pale background and a dark text colour, and the borders, chip fills, plane mark and footer all follow. Hardcoding rgba(255,255,255,…) here — the obvious shortcut — would leave white borders and near-invisible chips on a light card. */ --cs-fg: #f5f8ff; --cs-card-bg: rgba(16, 20, 38, 0.44); --cs-page-bg: rgba(15, 18, 32, 0); /* a=0 → layer off, theme backdrop as-is */ --cs-fg-dim: color-mix(in srgb, var(--cs-fg) 74%, transparent); --cs-card-line: color-mix(in srgb, var(--cs-fg) 16%, transparent); --cs-chip-bg: color-mix(in srgb, var(--cs-fg) 8%, transparent); --cs-rule: color-mix(in srgb, var(--cs-fg) 12%, transparent); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } /* ---- admin-controlled page backdrop ------------------------------------- The theme paints the page backdrop on html.theme-*::before — a 45% black wash over the uploaded background image, or a dark gradient when there's no upload. That selector is on , which CSS can't reach from a class, so instead of fighting it we lay our OWN fixed layer over the top. ::after, NOT ::before. theme-green.css already owns `html.theme-green body::before` — the 3px green ribbon pinned across the top at z-index 1000. Using ::before here would both collide with that element and LOSE to it on specificity ((0,1,2) vs our (0,1,1)), so on a green tenant the backdrop simply wouldn't paint. ::after is unused site-wide, so the ribbon survives. Layering: at z-index -1 this paints over html.theme-*::before (equal z-index → tree order, and body::after comes later) while still sitting BEHIND all page content, because negative-z descendants are painted before a stacking context's in-flow children regardless of tree position. Fixed positioning also keeps it out of flow, so it never becomes a flex item of the .cs-page column. Fully transparent by default (--cs-page-bg alpha 0), so a tenant that hasn't touched the setting keeps its existing backdrop byte-for-byte. At 100% it's a solid colour that hides the wash AND the uploaded photo; in between it tints the photo. */ body.cs-page::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--cs-page-bg); } /* The landing banner is static — it should scroll away, not follow. `:not(.is-open)` is load-bearing, not decoration: site.css turns the OPEN mobile drawer into the full-screen menu with `.appbar.is-open { position: fixed; inset: 0 }` (0,2,0), and a plain `body.cs-page .appbar` (0,2,1) beats that on specificity — the drawer would stay in flow and never cover the page. */ body.cs-page .appbar:not(.is-open) { position: static; } /* Row 2 holds only the language toggle (the drawer's copy of it is hidden above the mobile breakpoint). theme-unified.css uses space-between for [menu | toggle], which would park a lone child at the reading-START edge; push it back to the end where the toggle normally sits. Skipped while the drawer is open, where row 2 becomes the vertical menu column and flex-end would drop its contents to the bottom of the screen. NOTE on the selector: theme-unified.css qualifies these rules as `html.layout-unified .appbar--unified .appbar__row--…` (0,3,1). A plain `body.cs-page .appbar__row--nav` (0,2,1) would LOSE to that regardless of file order, so every header override below carries the `html.layout-unified body.cs-page` prefix to outrank it on specificity rather than relying on load order. */ html.layout-unified body.cs-page .appbar--unified:not(.is-open) .appbar__row--nav { justify-content: flex-end; } /* Desktop: the drawer's nav is empty (its only child, .appbar__mlang-row, is a mobile-only element in site.css) — but an empty flex item still eats a row gap. Take it out of the layout; .appbar__side is the visible toggle here. */ @media (min-width: 901px) { html.layout-unified body.cs-page .appbar__nav { display: none; } /* Reserve the height the missing menu items would have occupied. A flex row is as tall as its tallest item. On the real site that is a menu link (.appbar__link — font-size 14px + 8px block padding, site.css); here row 2 holds only the language pills, a shorter box, so the whole banner came out 4px shorter than the live header. Measured on Damascus: 137.2px there vs 133.2px here, everything else identical. Adding the 4px as row padding rather than sizing the pills keeps it invisible — it is empty space, not a taller control. The inputs are all fixed px in site.css (not admin-tunable) and every tenant now ships the same font, so the 4px is a constant, not a Damascus-specific tweak. Desktop only, deliberately: below 900px theme-unified.css collapses row 2 to zero padding because the toggle moves into the drawer, and this selector (0,4,2) would outrank that (0,3,1) and re-inflate the empty strip. */ html.layout-unified body.cs-page .appbar--unified:not(.is-open) .appbar__row--nav { padding-top: 4px; padding-bottom: 4px; } } /* Mobile: the language toggle moves into the drawer, exactly as on the real site — so nothing here re-shows .appbar__side or re-inflates the (now empty) row 2, and the brand row keeps theme-unified.css's reserved corner for the hamburger. No banner sizes here either: coming-soon-theme.php emits the phone variants from the same settings (0.82x of the desktop values, with a floor), matching partials/site-header.php exactly. The desktop fallbacks above stand in if it fails to load. */ /* --------------------------------------------------------------------- 2 · HERO --------------------------------------------------------------------- */ .cs-main { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: clamp(28px, 6vw, 64px) clamp(16px, 4vw, 40px); } .cs-card { width: 100%; max-width: 720px; text-align: center; color: var(--cs-fg); padding: clamp(28px, 5vw, 52px) clamp(20px, 5vw, 56px) clamp(30px, 5vw, 48px); background: var(--cs-card-bg); border: 1px solid var(--cs-card-line); border-radius: 24px; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.34); /* Frosted panel over the theme backdrop photo. Degrades to the flat translucent fill where backdrop-filter is unsupported. */ -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); } /* ---- runway mark ---- */ .cs-mark { display: block; margin: 0 auto 18px; width: 96px; height: 96px; } .cs-mark svg { display: block; width: 100%; height: auto; overflow: visible; } .cs-mark__ring { fill: none; stroke: color-mix(in srgb, var(--cs-fg) 22%, transparent); stroke-width: 1.5; } .cs-mark__plane { fill: var(--cs-fg); /* Lifts off along the runway, then resets. */ animation: cs-takeoff 4.5s ease-in-out infinite; } .cs-mark__runway { fill: none; stroke: color-mix(in srgb, var(--cs-fg) 42%, transparent); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 8 9; animation: cs-runway 1.6s linear infinite; } @keyframes cs-takeoff { 0%, 12% { transform: none; opacity: 1; } 55% { transform: translate(9px, -11px); opacity: 1; } 78% { transform: translate(20px, -26px); opacity: 0; } 79% { transform: translate(-14px, 8px); opacity: 0; } 100% { transform: none; opacity: 1; } } @keyframes cs-runway { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -17px; } } /* ---- copy ---- */ .cs-badge { margin: 0 0 14px; font-size: 12.5px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; /* Deliberately NOT --cs-fg: this pill sits on --brand-primary (the tenant's solid navy or green), so it needs contrast against THAT, not against the card. Both brand colours are dark, so white is correct either way — and tying it to --cs-fg would make it vanish the moment an admin picks a light card text colour. */ color: #ffffff; /* Pill sized to its text, centered regardless of direction. */ display: inline-block; padding: 7px 20px; border-radius: 999px; background: var(--brand-primary); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28); } /* Arabic doesn't letterspace (it breaks letter-joining) or uppercase. */ html[lang="ar"] .cs-badge { letter-spacing: normal; text-transform: none; word-spacing: 0.14em; } .cs-heading { margin: 0 0 10px; font-size: clamp(26px, 5.2vw, 40px); font-weight: 800; line-height: 1.25; color: var(--cs-fg); /* No text-shadow: a dark glow is only right on a dark card, and the card's own background already carries the contrast at any admin colour. */ } .cs-brand { margin: 0 0 20px; font-size: clamp(15px, 2.4vw, 18px); font-weight: 700; color: var(--cs-fg); opacity: 0.9; } .cs-lead { margin: 0 auto; max-width: 52ch; font-size: clamp(14.5px, 2.1vw, 16.5px); line-height: 1.85; color: var(--cs-fg-dim); } .cs-note { margin: 26px auto 0; max-width: 48ch; font-size: 13.5px; line-height: 1.75; color: var(--cs-fg-dim); } /* ---- fact chips (IATA / ICAO / location) ---- */ .cs-facts { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .cs-fact { flex: 0 1 auto; min-width: 116px; padding: 14px 20px; border: 1px solid var(--cs-card-line); border-radius: 14px; background: var(--cs-chip-bg); } .cs-fact__value { display: block; font-size: 19px; font-weight: 800; color: var(--cs-fg); line-height: 1.2; } /* IATA/ICAO are Latin codes — keep them LTR inside the RTL page. */ .cs-fact__value--code { direction: ltr; unicode-bidi: isolate; letter-spacing: 1.5px; } .cs-fact__label { display: block; margin-top: 6px; font-size: 11.5px; font-weight: 600; color: var(--cs-fg-dim); } /* ---- social row ---- */ .cs-socials { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 28px; } .cs-social { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--cs-card-line); background: var(--cs-chip-bg); color: var(--cs-fg); transition: background 0.15s, transform 0.15s, border-color 0.15s; } .cs-social svg { fill: currentColor; } .cs-social:hover, .cs-social:focus-visible { background: var(--brand-primary); border-color: var(--brand-primary); transform: translateY(-2px); } /* --------------------------------------------------------------------- 3 · FOOTER STRIP --------------------------------------------------------------------- */ /* CONTRAST: the footer is the only text OUTSIDE the card, so it sits on the page backdrop (--cs-page-bg over the theme layer) rather than on --cs-card-bg. It therefore must NOT use --cs-fg-dim, which is calibrated for text on the card: with a light backdrop the dimmed colour blends into it. Measured on a live light palette (#103384 text, backdrop resolving to rgb(163,164,166)): --cs-fg-dim gave 3.11:1 and the 0.86-opacity link 3.75:1, both under the 4.5:1 WCAG AA floor for normal text. Full --cs-fg gives 4.59:1. On the dark default this only makes the footer brighter (9.7 → 17.1), so it is safe in both directions. Visual hierarchy comes from font-size/weight instead of dimming — the only lever here that can't cost contrast. */ .cs-footer { flex: 0 0 auto; text-align: center; padding: 22px clamp(16px, 4vw, 40px) 28px; border-top: 1px solid var(--cs-rule); color: var(--cs-fg); } .cs-footer__gaca { display: inline-block; margin-bottom: 10px; font-size: 13.5px; font-weight: 700; color: var(--cs-fg); text-decoration: none; } .cs-footer__gaca:hover, .cs-footer__gaca:focus-visible { text-decoration: underline; } .cs-footer__copy { margin: 0; font-size: 12.5px; line-height: 1.7; } .cs-footer__copy strong { color: var(--cs-fg); font-weight: 700; } /* --------------------------------------------------------------------- 4 · ACCESSIBILITY --------------------------------------------------------------------- */ .cs-page a:focus-visible, .cs-page button:focus-visible { outline: 3px solid var(--cs-fg); outline-offset: 3px; border-radius: 8px; } @media (prefers-reduced-motion: reduce) { .cs-mark__plane, .cs-mark__runway { animation: none; } .cs-social { transition: none; } .cs-social:hover, .cs-social:focus-visible { transform: none; } }