/* ========================================================================= Rubikal — KSA National Day theme Loaded only on /en/ksa.html and /ar/ksa.html (see the in each). Palette and motifs read from the GEA "Saudi National Day" brand guideline (deep green base, gold/bronze, and the blue/magenta/lime/violet accent set) and rebuilt from scratch as original artwork/copy — no campaign photography, wordmark, or slogans are reused. Additive only. Nothing here edits a shared class in place — every rule below either defines a new .ksa-* class or qualifies a shared class with an .is-ksa / .ksa-* modifier, so main.css and every other page on the site (including the brand-blue CTA system) are completely untouched. ========================================================================= */ :root { --ksa-green-950: #061B12; --ksa-green-900: #0A2A1C; --ksa-green-800: #103823; --ksa-green: #146C3E; --ksa-green-2: #1E8449; --ksa-gold: #C9A24B; --ksa-gold-soft: #E4C98A; --ksa-gold-deep: #7A5A22; /* Secondary accents, lifted from the guideline's official palette page — used sparingly, as single-value accents (a dot, a top-rule), never as large fills, so the page still reads as one deep-green-and-gold system. */ --ksa-blue: #2D6CDF; --ksa-magenta: #C81F5C; --ksa-lime: #4FA82B; --ksa-violet: #6A63D1; /* Shared Najdi diamond tile, reused by dividers and the CTA overlay. */ --ksa-diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 2 L26 14 L14 26 L2 14 Z' fill='none' stroke='%23D4AF37' stroke-width='1.4' stroke-opacity='.55'/%3E%3Cpath d='M14 9 L19 14 L14 19 L9 14Z' fill='%23D4AF37' fill-opacity='.32'/%3E%3C/svg%3E"); /* Larger, fainter tile for the full-page fixed wash. */ --ksa-diamond-lg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M36 8 L64 36 L36 64 L8 36 Z' fill='none' stroke='%23D4AF37' stroke-width='1' stroke-opacity='.16'/%3E%3C/svg%3E"); /* Running-stitch zigzag, the guideline's border motif for banner edges. */ --ksa-stitch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8'%3E%3Cpath d='M0 8 L4 0 L8 8 L12 0 L16 8' fill='none' stroke='%23C9A24B' stroke-width='1.6' stroke-opacity='.8'/%3E%3C/svg%3E"); } /* ========================================================================= FIXED BACKDROP — a "drawing" that stays put behind the page as you scroll. Sits on ; dark-theme sections below are given a translucent tint (instead of an opaque one) so the watermark reads through every dark section, not just the hero. Light (paper) sections are left opaque on purpose — that alternating rhythm is the page's existing structure. ========================================================================= */ body.ksa-page { background-color: var(--ksa-green-950); background-repeat: no-repeat, repeat, no-repeat; background-position: center top, center, center 480px; background-size: auto, 72px 72px, min(760px, 92vw) auto; background-image: radial-gradient(ellipse 1200px 800px at 50% 6%, rgba(30, 132, 73, .28), transparent 65%), var(--ksa-diamond-lg), url("../img/ksa-watermark.svg"); background-attachment: scroll, fixed, fixed; } @media (prefers-reduced-motion: no-preference) { body.ksa-page { background-attachment: scroll, fixed, fixed; } } /* iOS Safari ignores background-attachment: fixed silently — the page still looks correct (the wash just scrolls with content there), so no fallback is required. */ body.ksa-page [data-theme="dark"].page-hero, body.ksa-page section[data-theme="dark"].section, body.ksa-page footer.site-footer[data-theme="dark"] { background: linear-gradient(180deg, rgba(6, 24, 16, .8) 0%, rgba(4, 5, 10, .88) 100%); } /* ---- Top & bottom running-stitch borders -------------------------------- */ .ksa-stitch-line { block-size: 8px; background-image: var(--ksa-stitch); background-repeat: repeat-x; background-position: center; opacity: .8; } /* The hero's buttons sat almost flush against this line — give it room to breathe instead of crowding the CTAs. */ .page-hero .ksa-stitch-line { margin-block-start: var(--s-7); position: relative; z-index: 2; } /* ---- Top flagline — a thin ribbon along the very top of the hero ------- */ .ksa-flagline { position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 5px; background: linear-gradient(90deg, var(--ksa-green) 0%, var(--ksa-gold) 50%, var(--ksa-green) 100%); z-index: 3; } /* ---- National Day badge (sits above the existing hero eyebrow) -------- */ .ksa-nd-badge { display: inline-flex; align-items: center; gap: 10px; padding: 7px 18px 7px 7px; margin-block-end: var(--s-4); background: linear-gradient(135deg, var(--ksa-green-900), var(--ksa-green-800)); border: 1px solid rgba(212, 175, 55, .45); border-radius: var(--r-pill); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .06); } [dir="rtl"] .ksa-nd-badge { padding: 7px 7px 7px 18px; } .ksa-nd-badge__num { display: grid; place-items: center; flex: none; font-family: var(--font-mono); font-weight: 700; font-size: .76rem; letter-spacing: .01em; color: var(--ksa-green-950); background: linear-gradient(135deg, var(--ksa-gold-soft), var(--ksa-gold)); inline-size: 28px; block-size: 28px; border-radius: 50%; } .ksa-nd-badge__dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--ksa-gold); flex: none; animation: ksa-pulse 2.2s infinite; } .ksa-nd-badge__text { font-size: .82rem; font-weight: 600; color: var(--ksa-gold-soft); white-space: nowrap; } @keyframes ksa-pulse { 0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, .55); } 70% { box-shadow: 0 0 0 8px rgba(212, 175, 55, 0); } 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); } } /* ---- Shimmering headline accent — a slow gold sweep, not a static fill - */ .ksa-shimmer { background: linear-gradient(100deg, var(--ksa-gold-soft) 20%, #fff 45%, var(--ksa-gold) 60%, var(--ksa-gold-soft) 80%); background-size: 250% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ksa-shine 6s linear infinite; } @keyframes ksa-shine { to { background-position: -250% 0; } } /* ---- Hero glow recolor — additive layer, original .hero-glow untouched - */ .hero-glow.is-ksa { background: radial-gradient(circle at 30% 30%, rgba(212, 175, 55, .22), transparent 45%), radial-gradient(circle at 60% 55%, rgba(20, 108, 62, .55), rgba(212, 175, 55, .1) 45%, transparent 72%); } /* ---- Section divider — Najdi diamond strip ----------------------------- */ .ksa-divider { block-size: 30px; background-color: var(--ksa-green-900); background-image: var(--ksa-diamond); background-repeat: repeat-x; background-position: center; box-shadow: inset 0 1px 0 rgba(212, 175, 55, .25), inset 0 -1px 0 rgba(212, 175, 55, .25); } /* ---- Moving ticker — "wording for Saudi" in continuous motion ---------- */ .ksa-ticker { overflow: hidden; background: var(--ksa-green-900); border-block: 1px solid rgba(212, 175, 55, .25); padding-block: 12px; } .ksa-ticker__track { display: flex; inline-size: max-content; gap: 44px; animation: ksa-ticker-scroll 26s linear infinite; } [dir="rtl"] .ksa-ticker__track { animation-name: ksa-ticker-scroll-rtl; } .ksa-ticker__track span { display: inline-flex; align-items: center; gap: 14px; flex: none; font-family: var(--font-mono); font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ksa-gold-soft); white-space: nowrap; } .ksa-ticker__track span::after { content: "\2726"; color: var(--ksa-gold-deep); font-size: .7rem; } @keyframes ksa-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes ksa-ticker-scroll-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } } @media (prefers-reduced-motion: reduce) { .ksa-ticker__track { animation: none; } .ksa-nd-badge__dot { animation: none; } .ksa-shimmer { animation: none; background-position: 0 0; } } /* ---- CTA band — festive background for the KSA page's closing CTA ----- */ .cta-band.ksa-cta { background: linear-gradient(160deg, var(--ksa-green-900) 0%, var(--ink-850) 78%); border-color: rgba(212, 175, 55, .3); } .cta-band.ksa-cta::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--ksa-diamond); background-size: 28px 28px; opacity: .1; } .cta-band.ksa-cta > * { position: relative; z-index: 1; } /* ---- Multi-colour trait dots — the "Why KSA" checklist, one accent per line, pulled straight from the guideline's secondary palette instead of the default brand-blue tick. Purely decorative; order is presentational. */ body.ksa-page .why-ksa .checks li:nth-child(4n+1)::before { background: var(--ksa-blue); background-image: none; } body.ksa-page .why-ksa .checks li:nth-child(4n+2)::before { background: var(--ksa-magenta); background-image: none; } body.ksa-page .why-ksa .checks li:nth-child(4n+3)::before { background: var(--ksa-gold); background-image: none; } body.ksa-page .why-ksa .checks li:nth-child(4n+4)::before { background: var(--ksa-lime); background-image: none; } /* ---- Floating icon "shadows" — the embroidered tile motifs, drifting slowly and faintly behind content instead of sitting flat in it. Each instance sets its own size/position/duration via inline style; this just supplies the drift keyframes and the resting opacity/blend. ------------- */ .ksa-float-icon { position: absolute; z-index: 0; pointer-events: none; background-size: contain; background-repeat: no-repeat; opacity: .16; filter: saturate(1.15); animation: ksa-float-drift 20s ease-in-out infinite; } .ksa-float-icon.is-rev { animation-direction: reverse; } @keyframes ksa-float-drift { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-18px) rotate(3deg); } } @media (prefers-reduced-motion: reduce) { .ksa-float-icon { animation: none; } } /* ---- Icon showcase row — the tiles shown properly, not as a shadow ----- */ .ksa-icon-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-6); margin-block-start: var(--s-6); position: relative; z-index: 1; } .ksa-icon-tile { display: flex; flex-direction: column; align-items: center; gap: 10px; } .ksa-icon-tile img { inline-size: 84px; block-size: 84px; border-radius: var(--r-sm); box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .6); transition: transform .3s var(--ease-out); } .ksa-icon-tile:hover img { transform: translateY(-4px) scale(1.05); } .ksa-icon-tile span { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ksa-gold-soft); } /* ---- Mobile ------------------------------------------------------------- */ @media (max-width: 560px) { .ksa-nd-badge__text { white-space: normal; } } @media (max-width: 900px) { body.ksa-page { background-size: auto, 72px 72px, 520px auto; background-position: center top, center, center 380px; } } @media (max-width: 720px) { .ksa-float-icon { display: none; } } /* ---- Floating book button: hold it back until the hero is scrolled past - On narrow screens the hero's fluid headline plus the new National Day badge push the fold low enough that the fixed "Book your call now!" pill (and, worse, the taller stacked cookie banner pushing it further up) can land on top of the headline before the visitor scrolls. body.ksa-scrolled is toggled by a small inline script once the hero (#top) leaves view. */ @media (max-width: 640px) { body.ksa-page .float-book { opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); } body.ksa-page.ksa-scrolled .float-book { opacity: 1; transform: none; pointer-events: auto; } } @media (max-width: 640px) and (prefers-reduced-motion: reduce) { body.ksa-page .float-book { transition: opacity .15s linear; } } /* ---- Bilingual brand lockup (header + footer, KSA page only) ---------- RUBIKAL / روبيكال stacked, with a tiny flag planted on a pole standing at the cube's shoulder — like a flag staked into the side of it — rather than a pennant floating loose in the wordmark. The pole is fixed; only the flag cloth flaps, hinged from where it meets the pole. Colour is our National Day green/gold, standing in for a literal Saudi flag, which carries the Shahada and isn't something to render at decorative scale. */ .ksa-brand { display: inline-flex; align-items: center; gap: 10px; } .ksa-brand-mark { position: relative; inline-size: 30px; block-size: 30px; flex: none; } .ksa-brand-cube { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; } .ksa-brand-pole { position: absolute; inset-block-start: -13px; inset-inline-end: -7px; inline-size: 16px; block-size: 30px; overflow: visible; } .ksa-brand-flagwave { transform-origin: 2px 5px; animation: ksa-flag-wave 2.6s ease-in-out infinite; } .ksa-brand-word { display: flex; flex-direction: column; line-height: 1.15; gap: 1px; } .ksa-brand-word strong { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em; color: #fff; } .ksa-brand-word em { font-style: normal; font-family: 'Tajawal', sans-serif; font-weight: 700; font-size: .88rem; color: var(--ksa-gold-soft); } @keyframes ksa-flag-wave { 0%, 100% { transform: skewY(0deg) scaleX(1); } 25% { transform: skewY(-8deg) scaleX(.95); } 50% { transform: skewY(5deg) scaleX(1.03); } 75% { transform: skewY(-3deg) scaleX(.98); } } @media (prefers-reduced-motion: reduce) { .ksa-brand-flagwave { animation: none; } }