/* ============================================================ -2. ANTI-FLICKER GATE — pairs with the script above. That script fixes the LAYOUT direction before first paint (lang/dir), but the actual [data-i18n] TEXT swap still has to wait for applyLanguage() to run at the bottom of , since it needs real DOM elements to exist. Without this gate, an Arabic-session visitor would still see one frame of English text flash before it swaps to Arabic — same category of bug as the layout one, just for text instead of geometry. Fix: body starts invisible, JS adds .i18n-ready to the instant BOTH dir and text are fully correct, which reveals it. visibility (not display:none) is deliberate — images keep loading in the background while hidden, so nothing is lost, only the premature/wrong paint. A

already requests 'IBM Plex Sans Arabic' by name, so it now resolves to the real file below instead of silently falling back to a system font. ============================================================ */ @font-face { font-family: 'IBM Plex Sans Arabic'; src: url('/assets/fonts/IBMPlexSansArabic-Regular.woff') format('woff'), url('/assets/fonts/IBMPlexSansArabic-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Sans Arabic'; src: url('/assets/fonts/IBMPlexSansArabic-Medium.woff') format('woff'), url('/assets/fonts/IBMPlexSansArabic-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Sans Arabic'; src: url('/assets/fonts/IBMPlexSansArabic-SemiBold.woff') format('woff'), url('/assets/fonts/IBMPlexSansArabic-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Sans Arabic'; src: url('/assets/fonts/IBMPlexSansArabic-Bold.woff') format('woff'), url('/assets/fonts/IBMPlexSansArabic-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } /* ============================================================ 0. DESIGN TOKENS ============================================================ */ :root { --hl-bg: #0F3435; --hl-bg-deep: #0A2425; --hl-accent: #C77D3A; --hl-accent-hover: #D99A5C; --hl-rose: #E3837E; --hl-ivory: #F5F1E9; --hl-sage: #9FB3AE; /* Both stacks now point at the same single family per instruction — the site is one unified typeface. --font-editorial is kept as a separate variable (not merged into --font-sans) purely so nothing elsewhere that references it by name breaks; both resolve identically now. Old fallback chains kept untouched, just demoted to backups behind Plex. */ --font-editorial: 'IBM Plex Sans Arabic', ui-serif, "New York", Georgia, "Times New Roman", serif; --font-sans: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Tahoma, Arial, sans-serif; --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); --container-max: 1440px; --header-h: 100px; /* Premium gloss layer — cursor-position custom props (updated by JS, eased/lerped so the glow trails the cursor smoothly instead of snapping to it), plus gradient recipes reused everywhere below. Zero new colors, ever: every stop below is one of the seven locked tokens at varying opacity — never a different hue. Two variants: -light (ivory/accent-hover tones) for the site's dark surfaces, -dark (bg/bg-deep tones) for the Founder page's light cream letter panel, so the "shine" reads correctly against either surface instead of vanishing into a same-toned background. */ --mx: 50%; --my: 25%; --gloss-glow: radial-gradient(640px circle at var(--mx) var(--my), rgba(245, 241, 233, 0.10), transparent 62%); --gloss-sheen: linear-gradient(115deg, transparent 30%, rgba(217, 154, 92, 0.07) 45%, rgba(245, 241, 233, 0.10) 50%, rgba(217, 154, 92, 0.07) 55%, transparent 70%); --gloss-glow-dark: radial-gradient(640px circle at var(--mx) var(--my), rgba(10, 36, 37, 0.10), transparent 62%); --gloss-sheen-dark: linear-gradient(115deg, transparent 30%, rgba(199, 125, 58, 0.09) 45%, rgba(10, 36, 37, 0.12) 50%, rgba(199, 125, 58, 0.09) 55%, transparent 70%); /* Depth/elevation system — every value below is rgba(10, 36, 37, x), i.e. --hl-bg-deep at varying opacity. Same "zero new colors, ever" rule as the gloss layer above: this is one locked token turned into a shadow, never a new hue. All offsets are symmetric (x: 0) on purpose — a shadow that only moves on the y-axis needs no dir="rtl" mirror override, so this whole system works identically, unmirrored, in both languages. Three tiers now: --depth-0 (light-to-medium — buttons, badges, the footer panel: small/secondary elements where the --depth-1 blur radius would look oversized and cartoonish relative to the element itself), --depth-1 (frames/cards/logo panels, set to "pronounced" per owner instruction), --depth-2 (the two largest surfaces — Founder's cream letter panel + its lead portrait). --depth-1-hover lifts the shadow further on interaction, paired with each element's existing hover transform so the "card" reads as rising toward the viewer, not just scaling in place. */ --depth-0: 0 2px 6px rgba(10, 36, 37, 0.22), 0 10px 20px -8px rgba(10, 36, 37, 0.3); --depth-0-hover: 0 4px 10px rgba(10, 36, 37, 0.28), 0 16px 28px -8px rgba(10, 36, 37, 0.36); --depth-1: 0 4px 10px rgba(10, 36, 37, 0.32), 0 22px 46px -10px rgba(10, 36, 37, 0.46); --depth-1-hover: 0 8px 18px rgba(10, 36, 37, 0.38), 0 34px 64px -10px rgba(10, 36, 37, 0.54); --depth-2: 0 10px 22px rgba(10, 36, 37, 0.34), 0 46px 88px -14px rgba(10, 36, 37, 0.5); --depth-header: 0 16px 38px -6px rgba(10, 36, 37, 0.46); --depth-chip: drop-shadow(0 6px 12px rgba(10, 36, 37, 0.48)); --depth-text: 0 2px 6px rgba(10, 36, 37, 0.38); } /* ============================================================ -0.5 LANGUAGE SWITCHER + RTL MIRRORING Arabic version = same site, same DOM, same components — only [dir] flips and data-i18n text swaps (see JS). Logical properties already used throughout this stylesheet (inset-inline-*, padding-inline, margin-inline) mirror automatically the instant html[dir="rtl"] is set — the overrides below only cover the small set of things that don't auto-mirror: physical left/right values, animation direction, font-family per language, and the four intentional parity exceptions. ============================================================ */ .lang-switch { display: flex; align-items: center; gap: .4rem; font-size: .68rem; letter-spacing: .06em; } .lang-switch button { color: rgba(245, 241, 233, 0.55); padding: .2rem .35rem; transition: color .3s var(--ease); } .lang-switch button.is-active { color: var(--hl-ivory); font-weight: 600; } .lang-switch button:hover { color: var(--hl-accent-hover); } .lang-switch-sep { color: rgba(245, 241, 233, 0.35); } .nav-mobile .lang-switch, .nav-panel-foot .lang-switch { font-size: .72rem; } html[dir="rtl"] body { font-family: var(--font-sans); } /* Carousel direction reversal — Arabic reader scans right-to-left, so the two tracks swap which existing keyframe animation they use: photos go from L→R to R→L, logos go from R→L to L→R. Zero new keyframes, just a swap. */ html[dir="rtl"] .carousel-track { animation-name: hl-scroll-rtl; } html[dir="rtl"] .logo-track { animation-name: hl-scroll-ltr; } /* Parity exception 1: Arabic Home has no subtitle (English keeps its subtitle). */ html[dir="rtl"] #page-home .hero-subtitle { display: none; } /* Parity exception 2: Arabic Gallery has no page title (English keeps its title). Hides only the heading text, not the .page-hero wrapper itself — that wrapper is what supplies the top padding clearing the fixed header, so removing the whole block would shove the category row up underneath the header. */ html[dir="rtl"] #page-gallery .page-hero h2 { display: none; } html[dir="rtl"] #page-gallery .page-hero { padding-bottom: 0; } /* Parity exception (added): Arabic Contact/Inquire page runs with no page title at all (English keeps its title). Same hide-the-heading-only pattern as Gallery above, so the wrapper's top padding still clears the fixed header. */ html[dir="rtl"] #page-contact .page-hero h2 { display: none; } html[dir="rtl"] #page-contact .page-hero { padding-bottom: 0; } /* nav-panel-links / hero / page-hero titles use --font-editorial — already resolves to the same self-hosted Plex Arabic family, so no override needed there. Country dial-code input stays LTR always (phone numbers read left-to-right universally, even inside an RTL form) — scoped opt-out below. */ .phone-field-row, #fPhoneCode, #fPhone { direction: ltr; } html[dir="rtl"] .phone-field-row { direction: ltr; } /* Wordmark lockdown, RTL: the logo is built from real SVG <text>/<tspan> elements with hand-kerned absolute x positions (not outlined paths — a known fragility flagged elsewhere in this file), so it inherits CSS direction from its ancestors like any other text. Under html[dir="rtl"] that flips the bidi run and can visually reorder or clip letters mid-wordmark even though the logo itself must always render in fixed English left-to-right, per brief ("logo stays in English in both versions"). Locked to ltr here regardless of page direction — belt-and-suspenders with the matching direction:ltr; unicode-bidi:bidi-override; added directly inside both <symbol> defs' own <style> blocks below, since <use> clones into its own referenced-content scope. */ .wordmark-svg, .footer-wordmark-svg { direction: ltr; unicode-bidi: bidi-override; } /* Home/logo carousel seam fix, RTL: .carousel-track and .logo-track are display:flex — under html[dir="rtl"] the browser also reverses flex item layout order (row direction follows text direction by default), which desyncs the visual frame order from the translateX() math the two keyframes were built against, opening a visible gap at the loop seam. Locking both tracks to direction:ltr keeps item layout identical to the English build; only the animation-name swap above (hl-scroll-ltr <-> hl-scroll-rtl) is what actually reverses the perceived scroll direction for an Arabic reader. */ html[dir="rtl"] .carousel-track, html[dir="rtl"] .logo-track { direction: ltr; } /* Root cause of the "logos invisible in Arabic" bug, found and confirmed live via getBoundingClientRect() on the actual deployed site: direction:ltr on the TRACK only controls how ITS OWN children (flex items) order themselves — it does NOT control where the track ITSELF sits inside ITS OWN parent. That placement is governed by the PARENT's direction. Since .logo-marquee-viewport/.carousel-viewport were still inheriting dir="rtl" from <html>, and the track is much wider than its viewport (width: max-content, e.g. 4468px inside a ~1324px box), the browser applied RTL's default overflow rule: an over-wide child hangs off the START side, which in RTL is the LEFT — so the entire track (and every logo/photo inside it) rendered thousands of pixels to the left of the visible box, invisible, regardless of the translateX() animation. Confirmed by measuring the live site: track x was -3654px while its viewport sat at x=325px. Locking the VIEWPORT to direction:ltr too (not just the track) fixes the containing block's overflow side back to the right/normal, which is what the animation math was written for. Verified live on the actual broken deployment before writing this fix — logos render correctly with this rule in place. */ html[dir="rtl"] .carousel-viewport, html[dir="rtl"] .logo-marquee-viewport { direction: ltr; } /* Arabic gallery category labels are full descriptive phrases (parity exception 4), not single words like the English "Corporate"/"Executive" — letter-spacing and uppercase (tuned for short LTR words) read as broken/disconnected on joined Arabic script, so both are neutralized here. Owner wants each label on exactly ONE line under its image, never wrapping word-over-word — sized down and forced to nowrap; on narrow mobile columns it's allowed to sit slightly wider than the image itself (overflow: visible) rather than break to a second line. */ html[dir="rtl"] .anchor-label { text-transform: none; letter-spacing: 0; font-size: .78rem; font-weight: 600; white-space: nowrap; overflow: visible; } /* Every uppercase-tracked micro-label across the site (eyebrows, nav chrome, buttons, form labels, footer) was tuned for short LTR English words — wide letter-spacing on joined Arabic script disconnects the letterforms and reads as broken. Neutralized site-wide in RTL; text-transform: uppercase is a harmless no-op on Arabic already, reset here too just for cleanliness. */ html[dir="rtl"] .coming-soon-badge, html[dir="rtl"] .eyebrow, html[dir="rtl"] .nav-expand-toggle, html[dir="rtl"] .nav-panel-eyebrow, html[dir="rtl"] .nav-panel-foot a, html[dir="rtl"] .btn, html[dir="rtl"] .tier-gallery-link, html[dir="rtl"] .footer-heading, html[dir="rtl"] .field label, html[dir="rtl"] .footer-bottom, html[dir="rtl"] .legal-card-body a, html[dir="rtl"] .nav-mobile a, html[dir="rtl"] .nav-primary { letter-spacing: 0; text-transform: none; } /* Founder credit line, RTL: enlarged and pinned to the far right edge of the portrait (was small + centered, tuned for the short uppercase-tracked English caption style). */ html[dir="rtl"] .founder-credit { letter-spacing: 0; text-transform: none; font-size: 1.05rem; font-weight: 600; text-align: right; color: var(--hl-ivory); } /* Founder title + subtitle, desktop (both languages): centered specifically over the canvas/narrative column, not the full row (portrait column + canvas column combined). Mirrors .founder-scroll-row's own grid definition exactly and drops the copy into the same second track, so it lines up with wherever that column actually renders — works identically in LTR and RTL since CSS Grid track numbering follows direction on its own, no dir-specific selector needed. column-gap only, never the gap shorthand: title and subtitle both live in column 2 (stacked, not side by side), so a row-gap would shove an extra 4rem between them on top of the subtitle's own margin-top — that was the 82px-vs-18px title→subtitle gap bug. */ @media (min-width: 1024px) { .founder-hero-copy { display: grid; grid-template-columns: minmax(350px, 460px) 1fr; column-gap: 4rem; } .founder-hero-copy > * { grid-column: 2; } } /* ============================================================ 1. RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; color: var(--hl-ivory); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; /* Premium gloss: cursor-following glow + a fixed diagonal sheen, layered above the unchanged brand base color. This is the ONLY background declaration that carries it — .site-header/.site-footer opt in separately below since they set their own opaque backgrounds that would otherwise hide it. Never touches <img> — it only ever shows in background pixels behind opaque foreground content. */ background: var(--gloss-glow), var(--gloss-sheen), var(--hl-bg); background-attachment: fixed, fixed, fixed; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ul { list-style: none; margin: 0; padding: 0; } h1, h2, h3, p { margin: 0; } ::selection { background: var(--hl-accent); color: var(--hl-bg-deep); } .container { max-width: var(--container-max); margin-inline: auto; padding-inline: 1.5rem; } .skip-link { position: absolute; inset-inline-start: -9999px; top: 0; background: var(--hl-accent); color: var(--hl-bg-deep); font-weight: 600; padding: .75rem 1.25rem; z-index: 300; } .skip-link:focus { inset-inline-start: 1rem; top: 1rem; } /* ============================================================ 2. WORDMARK — official logo, embedded once as hidden <symbol> defs near the top of <body>, referenced everywhere via <use>. Height is the only dimension set; width follows automatically from the symbol's own viewBox aspect ratio (≈3.49:1), so the full "HARSHLIGHT" + "PRODUCTIONS" lockup always scales as one unit with zero risk of bounding-box clipping at any size. ============================================================ */ .wordmark { display: flex; align-items: center; line-height: 1; } /* Main brand wordmark gets the same alpha-following drop-shadow treatment as the partner logos (--depth-chip) — the mark itself is real letterform pixels on a transparent SVG canvas, so a box-shadow would just shadow the invisible bounding box; drop-shadow follows the letters themselves. */ .wordmark-svg { display: block; height: 38px; width: auto; filter: var(--depth-chip); } @media (min-width: 640px) { .wordmark-svg { height: 42px; } } @media (min-width: 1024px) { .wordmark-svg { height: 46px; } } .footer-wordmark-svg { display: block; height: 30px; width: auto; filter: var(--depth-chip); } /* ============================================================ 3. HEADER + NAVIGATION Interactive hover-expand + localized blur veil over the carousel edge (desktop only), nav links get bubble/pop scale AND a font-size elastic bump. ============================================================ */ .site-header { position: fixed; inset-inline: 0; top: 0; z-index: 100; background: var(--gloss-glow), var(--gloss-sheen), rgba(15, 52, 53, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--hl-accent); /* Depth: the fixed header sits visibly above whatever scrolls beneath it, instead of reading as flush/flat with the page content. */ box-shadow: var(--depth-header); transition: padding-bottom .5s var(--ease); } .header-inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .header-blur-veil { position: absolute; inset-inline: 0; top: 100%; height: 52px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: linear-gradient(to bottom, rgba(10, 36, 37, 0.4), transparent); opacity: 0; pointer-events: none; transition: opacity .5s var(--ease); } @media (min-width: 1024px) { .site-header:hover { padding-bottom: 14px; } .site-header:hover .header-blur-veil { opacity: 1; } } .nav-primary { display: none; align-items: center; gap: 2.6rem; font-size: .86rem; letter-spacing: .04em; } .nav-primary a { display: inline-block; color: rgba(245, 241, 233, 0.8); position: relative; padding-block: .4rem; transition: color .3s var(--ease), transform .35s var(--ease-pop), font-size .35s var(--ease-pop); } .nav-primary a:hover { color: var(--hl-accent-hover); transform: scale(1.14); font-size: .93rem; } .nav-primary a.is-active, .nav-mobile a.is-active { color: var(--hl-ivory); } /* Active/hover indicator: was a static always-full-width 1px line; now a thicker accent bar that grows from the center on hover AND stays grown while active, so the "current section" read is stronger during navigation, per instruction. */ .nav-primary a::after { content: ""; position: absolute; inset-inline: 0; bottom: -2px; height: 2px; border-radius: 1px; background: var(--hl-accent); transform: scaleX(0); transform-origin: center; transition: transform .4s var(--ease); } .nav-primary a.is-active::after, .nav-primary a:hover::after { transform: scaleX(1); } /* ---- Expanded navigation trigger (desktop) — opens the full-screen nav panel below. Sits alongside the existing inline nav-primary links (untouched); this is an added richer navigation surface, not a replacement of the working inline links. ---- */ .nav-expand-toggle { display: none; align-items: center; gap: .55rem; font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: rgba(245, 241, 233, 0.8); transition: color .3s var(--ease); } .nav-expand-toggle:hover { color: var(--hl-accent-hover); } .nav-expand-icon { display: flex; flex-direction: column; gap: 4px; width: 18px; } .nav-expand-icon span { display: block; height: 1px; width: 100%; background: currentColor; } @media (min-width: 1024px) { .nav-expand-toggle { display: inline-flex; } } /* ---- Full-screen expanded nav panel: calm fade + gentle rise, background blur instead of a hard jump. Reuses .nav-link so the existing router/is-active JS (querySelectorAll('.nav-link') / '[data-page]') wires these links up automatically — zero duplicate routing logic. ---- */ .nav-panel { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(10, 36, 37, 0.88); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s linear .6s; } .nav-panel.is-open { opacity: 1; visibility: visible; transition: opacity .6s var(--ease), visibility 0s; } .nav-panel-inner { width: 100%; max-width: 640px; padding: 2rem; text-align: center; transform: translateY(16px); opacity: 0; transition: transform .6s var(--ease), opacity .6s var(--ease); } .nav-panel.is-open .nav-panel-inner { transform: translateY(0); opacity: 1; transition-delay: .12s; } .nav-panel-close { position: absolute; top: 2rem; inset-inline-end: 2rem; font-size: 1.7rem; line-height: 1; color: var(--hl-ivory); transition: color .3s var(--ease), transform .4s var(--ease-pop); } .nav-panel-close:hover { color: var(--hl-accent-hover); transform: rotate(90deg); } .nav-panel-eyebrow { font-size: .68rem; letter-spacing: .35em; text-transform: uppercase; color: var(--hl-sage); margin-bottom: 2.25rem; } .nav-panel-links { display: flex; flex-direction: column; gap: 1.15rem; } .nav-panel-links a { font-family: var(--font-editorial); font-weight: 500; font-size: 2.3rem; line-height: 1.2; color: var(--hl-ivory); display: inline-block; transition: color .3s var(--ease), transform .35s var(--ease-pop); } .nav-panel-links a:hover, .nav-panel-links a.is-active { color: var(--hl-accent); transform: scale(1.045); } .nav-panel-foot { margin-top: 2.75rem; display: flex; align-items: center; justify-content: center; gap: 1.75rem; flex-wrap: wrap; } .nav-panel-foot a { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--hl-sage); transition: color .3s var(--ease); } .nav-panel-foot a:hover { color: var(--hl-accent-hover); } @media (prefers-reduced-motion: reduce) { .nav-panel, .nav-panel-inner, .nav-panel-close { transition: none !important; } } .header-actions { display: flex; align-items: center; gap: 1.3rem; } .btn { display: inline-flex; align-items: center; justify-content: center; padding: .9rem 1.65rem; font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; font-weight: 600; box-shadow: var(--depth-0); transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); white-space: nowrap; cursor: pointer; } .btn:hover { box-shadow: var(--depth-0-hover); } .btn-primary { background: var(--hl-accent); color: var(--hl-bg-deep); } .btn-primary:hover { background: var(--hl-accent-hover); } .btn-ghost { background: transparent; color: var(--hl-ivory); border: 1px solid rgba(245, 241, 233, 0.25); } .btn-ghost:hover { border-color: var(--hl-accent-hover); color: var(--hl-accent-hover); } .menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 26px; height: 26px; } .menu-toggle span { display: block; height: 1px; width: 100%; background: var(--hl-ivory); transition: transform .3s var(--ease); } .menu-toggle.is-active span:first-child { transform: translateY(3px) rotate(45deg); } .menu-toggle.is-active span:last-child { transform: translateY(-3px) rotate(-45deg); } .nav-mobile { max-height: 0; overflow: hidden; background: var(--hl-bg-deep); border-bottom: 1px solid var(--hl-accent); transition: max-height .4s var(--ease); } .nav-mobile.is-open { max-height: 520px; } .nav-mobile-inner { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; } .nav-mobile a { font-size: .95rem; letter-spacing: .03em; color: var(--hl-ivory); } .nav-mobile-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; border-top: 1px solid var(--hl-accent); } /* ============================================================ 4. PAGE ROUTER ============================================================ */ .page { display: none; } .page.is-active { display: block; opacity: 1; transition: opacity .9s var(--ease); } .page.is-fading { opacity: 0 !important; transition: opacity .7s var(--ease); } .page.is-entering { opacity: 0 !important; } @media (prefers-reduced-motion: reduce) { .page, .page.is-fading, .page.is-entering { transition: none !important; } } /* Non-home pages: title only — eyebrow/lede intro copy removed per instruction */ .page-hero { padding-top: calc(var(--header-h) + 3rem); padding-bottom: 2.5rem; text-align: center; } /* h1 added alongside h2: every existing multi-section page uses h2 here (Home already owns the page's one semantic h1 via .hero h1). Standalone single-purpose pages like 404.html have no Home section competing for h1, so they use a real h1 for correct document structure — same visual treatment, just the correct tag for that context. */ .page-hero h2, .page-hero h1 { font-family: var(--font-editorial); font-weight: 500; font-size: 2.2rem; line-height: 1.1; color: var(--hl-ivory); text-shadow: var(--depth-text); } .eyebrow { font-size: .68rem; letter-spacing: .35em; text-transform: uppercase; color: var(--hl-sage); } .eyebrow-center { text-align: center; } /* ============================================================ 5. HOME — hero, asymmetric round-robin carousel, marquee ============================================================ */ .hero { padding-top: calc(var(--header-h) + 3rem); padding-bottom: 2.5rem; } .hero-copy { text-align: center; max-width: 900px; margin-inline: auto; } .hero h1 { font-family: var(--font-editorial); font-weight: 500; font-size: 2.1rem; line-height: 1.16; color: var(--hl-ivory); /* Deliberately restrained to just this one line of display type — a shadow this soft reads as depth; the same treatment on body copy or small labels would just read as blur, so it stops here and at the two other page-level titles (page-hero h2, founder-hero-title) rather than spreading to every heading on the site. */ text-shadow: var(--depth-text); } /* Titles reverted to their original flat --hl-ivory per instruction — no gloss/shine treatment on title text anymore, in any form. The gloss stays only on backgrounds (body/header/footer/Founder canvas) below, where it was never in question. */ /* Fluid, no forced <br> — the title and subtitle are plain flowing text now (not two hardcoded spans). At wide viewports both sit comfortably on one line inside the 900px cap; the browser only wraps them once the actual viewport is too narrow to hold that line, so the layout stays relaxed on desktop and never overflows on mobile. */ .hero-subtitle { margin-top: 1.1rem; font-size: .78rem; letter-spacing: .04em; color: var(--hl-sage); line-height: 1.6; } .carousel-viewport, .logo-marquee-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); } .carousel-viewport { margin-top: 3.5rem; padding-block: .5rem; } /* REVERTED — do not put filter here again. This element also carries overflow:hidden + mask-image (see the shared rule above). Confirmed live via Chrome DevTools on the actual Vercel deployment: with filter added here, all 13 logo images fetch successfully (200 OK, verified in the Network tab) but never paint — the box renders completely empty — specifically and only under html[dir="rtl"]. The identical mask-image is on .carousel-viewport too, which has no filter and renders fine in both languages, isolating the cause to this filter+mask+overflow combination under RTL specifically (almost certainly a browser compositing bug, not app logic). The performance argument for hoisting the filter here was real, but a broken render is worse than an expensive one — reverted to the per-image filter below, which has neither overflow nor mask-image on itself and is confirmed safe. */ .carousel-track { display: flex; width: max-content; gap: 1.1rem; padding-inline: 1.1rem; animation: hl-scroll-ltr 200s linear infinite; will-change: transform; } @keyframes hl-scroll-ltr { from { transform: translateX(-50%); } to { transform: translateX(0); } } .logo-track { display: flex; width: max-content; gap: 2.75rem; padding-inline: 1.25rem; align-items: center; animation: hl-scroll-rtl 55s linear infinite; will-change: transform; } @keyframes hl-scroll-rtl { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .carousel-track, .logo-track { animation: none; } } .carousel-track .geo-frame { width: 190px; border: 2px solid var(--hl-accent); } .geo-frame { position: relative; flex: 0 0 auto; aspect-ratio: 3 / 4; background: var(--hl-bg-deep); border: 1px solid rgba(245, 241, 233, 0.1); overflow: hidden; /* Elevation: every frame reads as a panel set slightly off the page, not flush with it. */ box-shadow: var(--depth-1); transition: transform .4s var(--ease-pop), border-color .3s var(--ease), box-shadow .4s var(--ease-pop); } .geo-frame img { width: 100%; height: 100%; object-fit: cover; } /* ---- GLOBAL IMAGE HOVER (bubble/pop) — every interactive image on the site, EXCEPT the About page's two founder portraits, which are excluded on purpose: About is frozen under instruction 3 this cycle, and a decorative hover-scale on a full-bleed dominant portrait reads as an unintended structural change, not a pure style inheritance. Flagged in chat — override me if you want it applied there too. ---- */ .carousel-track .geo-frame, .gallery-anchor .geo-frame, .image-grid .geo-frame, .tier-media .geo-frame, .logo-chip { cursor: pointer; } .carousel-track .geo-frame:hover, .gallery-anchor:hover .geo-frame, .image-grid .geo-frame:hover, .tier-card:hover .tier-media .geo-frame { transform: scale(1.045); z-index: 2; box-shadow: var(--depth-1-hover); } /* Partner/client logo marquee — Home page ONLY. "Trusted By" now lives OUTSIDE the frame. */ .social-proof { margin-top: 3rem; } .social-proof-title { font-size: .82rem; margin-bottom: 1.5rem; } .social-proof-frame { padding: 2.25rem 0; border: 2px solid var(--hl-accent); background: var(--hl-bg-deep); box-shadow: var(--depth-1); } /* Uniform bounding box for every logo — identical scale regardless of native asset ratio */ .logo-chip { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 128px; height: 42px; transition: transform .4s var(--ease-pop); } .logo-chip:hover { transform: scale(1.12); } /* Shadow moved up to .logo-marquee-viewport (see above) — kept off these individual images on purpose, see that rule's comment. */ /* Drop-shadow restored here (per-image) after the container-level version broke Arabic rendering — see the long comment above .logo-marquee-viewport. These elements have no overflow/mask-image of their own, so no conflict. */ .logo-chip img, .logo-chip svg { width: 100%; height: 100%; object-fit: contain; opacity: .88; filter: var(--depth-chip); } /* MDL Beast reads visually lighter than Dior/L'azurde at the uniform scale — the box itself stays the standard 128x42 (so track spacing/seamless-loop math is untouched), only the image inside is scaled up via transform, which never affects layout width. Applied identically to BOTH the live and duplicate instance below. */ .logo-chip--mdlbeast img { transform: scale(1.25); } /* ============================================================ 6. GALLERY ============================================================ */ .gallery-row { margin-top: 3rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; } .gallery-anchor { display: flex; flex-direction: column; align-items: center; text-align: center; background: none; padding: 0; } .gallery-anchor .geo-frame { width: 100%; border: 3px solid var(--hl-accent); } .gallery-anchor:hover .geo-frame, .gallery-anchor.is-open .geo-frame { border-color: var(--hl-accent-hover); } .anchor-label { margin-top: 1.1rem; font-size: 1rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hl-ivory); } .gallery-anchor::after { content: ""; display: block; height: 1px; width: 0; margin: .8rem auto 0; background: var(--hl-accent); transition: width .45s var(--ease); } .gallery-anchor.is-open::after { width: 42px; } .gallery-panel { display: none; opacity: 0; transform: translateY(12px); margin-block: 2rem 2.5rem; transition: opacity .4s var(--ease), transform .4s var(--ease); } .gallery-panel.is-open { display: block; } .gallery-panel.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .gallery-panel { transition: none !important; } } .image-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; } .image-grid .geo-frame { width: 100%; } /* ============================================================ 7. SERVICES ============================================================ */ .tier-grid { margin-top: 3rem; padding-bottom: 4rem; display: grid; grid-template-columns: 1fr; gap: 1.75rem; } .tier-card { display: flex; flex-direction: column; gap: 1.5rem; padding: 1.75rem; border: 2px solid var(--hl-accent); box-shadow: var(--depth-1); transition: border-color .3s var(--ease), transform .4s var(--ease-pop), box-shadow .4s var(--ease-pop); } .tier-card:hover { border-color: var(--hl-accent-hover); transform: scale(1.015); z-index: 2; box-shadow: var(--depth-1-hover); } .tier-media { flex: none; } .tier-media .geo-frame { width: 100%; aspect-ratio: 1 / 1; } .tier-content { display: flex; flex-direction: column; gap: .85rem; height: 100%; } .tier-name { font-size: 1.1rem; font-weight: 700; } /* Coming Soon status marker — distinct from the removed tier/class badges (Core Focus, Elite Tier, etc.): this flags booking availability, not a service class, so it uses a different color language (rose, not sage) to avoid reading as another tier label. */ .coming-soon-badge { display: inline-block; margin-inline-start: .65rem; font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--hl-rose); border: 1px solid rgba(227, 131, 126, 0.4); padding: .2rem .55rem; vertical-align: middle; box-shadow: var(--depth-0); } .tier-copy { font-size: .92rem; line-height: 1.7; color: var(--hl-sage); } /* Matches the Coming Soon badge color exactly — same status language, same token. */ .tier-copy.coming-soon-note { color: var(--hl-rose); } /* Pinned to the bottom of the card regardless of how long the copy above runs — keeps Inquire / View Gallery vertically level across all four cards. */ .tier-actions { margin-top: auto; padding-top: .5rem; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } /* Scoped to Services cards only — the global .btn-ghost (mobile nav footer, etc.) stays untouched; only the Inquire button inside each service card gets this. */ .tier-actions .btn-ghost { border: 1px solid var(--hl-accent); } .tier-gallery-link { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--hl-sage); border-bottom: 1px solid rgba(159, 179, 174, 0.35); padding-bottom: 2px; transition: color .3s var(--ease), border-color .3s var(--ease); } .tier-gallery-link:hover { color: var(--hl-accent-hover); border-color: var(--hl-accent-hover); } /* ============================================================ 8. FOUNDER (previously "About") — narrative letter layout, revised again July 2026. Title + subtitle sit full-width, top-center, matching the Home hero treatment. Below that: one flowing narrative, no Q&A grid — each of the four parts runs heading-then-full-paragraph in sequence, first heading "What does Harsh Light mean?", headings bold and visibly larger than the body beneath them. CEO-1 tracks the reader down the page in a sticky left column (desktop only — zero-JS "sticky portrait" pattern); as the narrative ends, CEO-2 sits as the last element of the same column CEO-1 has been sticking beside, so the two portraits land level with each other — CEO-1 (left, sticky) beside CEO-2 (right, closing the narrative) — without duplicating either image in the markup. Below that pair, "Harshlight Productions Co. LLC." closes the page at the same type scale as the opening title. Body copy still sits in the cream "letter" panel (#F5F1E9 bg / #0F3435 body / #C77D3A headings) — same seven locked brand tokens, just recombined. ============================================================ */ .founder-page { padding-bottom: 4rem; display: flex; flex-direction: column; gap: 3.5rem; } /* width:100% (not a narrower max-width + auto-margin) so the title/subtitle center against the actual canvas (.container) the rest of the page uses, not a smaller box floating inside it. */ .founder-hero-copy { text-align: center; width: 100%; } .founder-hero-title { font-family: var(--font-editorial); font-weight: 500; font-size: 2.1rem; line-height: 1.16; color: var(--hl-ivory); text-shadow: var(--depth-text); } .founder-hero-subtitle { /* margin-top matched to the sitewide title→subtitle standard (.hero-subtitle on Home uses the same 1.1rem) rather than a one-off value. */ margin-top: 1.1rem; font-size: 1.05rem; line-height: 1.7; font-style: italic; color: var(--hl-sage); max-width: 560px; margin-inline: auto; } .founder-scroll-row { display: flex; flex-direction: column; gap: 2.5rem; } .founder-portrait-col { max-width: 560px; width: 100%; margin-inline: auto; } .founder-primary-image { aspect-ratio: 3 / 4; overflow: hidden; background: var(--hl-bg-deep); box-shadow: var(--depth-2); } .founder-primary-image img { width: 100%; height: 100%; object-fit: cover; object-position: top; } .founder-credit { margin-top: 1.1rem; text-align: center; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--hl-sage); } .founder-narrative-col { display: flex; flex-direction: column; gap: 2.5rem; } /* Formal-letter panel — deliberately inverted palette, still 100% within the seven locked brand tokens (ivory bg / dark-teal body / copper-accent headings). */ .founder-framed-copy { padding: 2.75rem 1.75rem; /* Same gloss mechanism as the rest of the site, but the -dark token variants — the panel itself is light (--hl-ivory), so the ivory-toned glow used on dark surfaces would be invisible here; this uses --hl-bg/--hl-accent at low opacity instead, same idea, correct direction for a light surface. */ background: var(--gloss-glow-dark), var(--gloss-sheen-dark), var(--hl-ivory); border: 3px solid var(--hl-accent); box-shadow: var(--depth-2); } .founder-narrative-part + .founder-narrative-part { margin-top: 2.75rem; padding-top: 2.75rem; border-top: 1px solid rgba(15, 52, 53, 0.14); } .founder-narrative-part h3 { font-family: var(--font-editorial); font-weight: 700; font-size: 1.5rem; color: var(--hl-accent); text-wrap: pretty; } .founder-narrative-part p { margin-top: 1rem; font-size: 1rem; line-height: 1.95; color: var(--hl-bg); text-wrap: pretty; } /* Arabic section 2 embeds the brief's explicit question/answer structure as \n\n line breaks inside the translated string (setI18nText only ever sets textContent, never innerHTML, so real <br> tags can't be injected here) — white-space: pre-line renders those literal newlines as visual line breaks without touching any other paragraph, English included (which has no \n characters, so this is a no-op there). */ .founder-narrative-part p[data-i18n="founder.s1.p"], .founder-narrative-part p[data-i18n="founder.s2.p"] { white-space: pre-line; } .founder-secondary-image { aspect-ratio: 16 / 9; overflow: hidden; background: var(--hl-bg-deep); box-shadow: var(--depth-2); } .founder-secondary-image img { width: 100%; height: 100%; object-fit: cover; } /* ============================================================ 9. CONTACT — email block removed; email lives in footer only. ============================================================ */ .inquiry-form { margin-top: 1rem; display: grid; grid-template-columns: 1fr; gap: 1.75rem; } .field { display: flex; flex-direction: column; gap: .55rem; } .field label { font-size: .68rem; letter-spacing: .25em; text-transform: uppercase; color: var(--hl-sage); } .required-mark { color: var(--hl-rose); margin-inline-start: .2em; } .optional-mark { color: var(--hl-sage); margin-inline-start: .4em; text-transform: none; letter-spacing: 0; font-size: .9em; } .field input, .field select, .field textarea { background: transparent; border: none; border-bottom: 1px solid rgba(245, 241, 233, 0.25); color: var(--hl-ivory); font-family: var(--font-sans); font-size: .95rem; padding-block: .6rem; transition: border-color .3s var(--ease); } .field select option { background: var(--hl-bg-deep); color: var(--hl-ivory); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--hl-accent); } .field textarea { resize: vertical; min-height: 110px; } .field-conditional { margin-top: .85rem; } /* Phone: compact searchable country dial-code picker + digits-only number, side by side so the number always arrives in a complete, unambiguous international format. The code box shows only "ISO2 +dial" (e.g. "SA +966") to stay narrow — full country name + dial code are always shown, in full, inside the search list below it. */ .phone-field-row { display: flex; gap: .75rem; align-items: flex-end; } .phone-code-picker { position: relative; flex: 0 0 auto; } .phone-code-select { width: 7rem; cursor: pointer; caret-color: transparent; } .phone-field-row input#fPhone { flex: 1 1 auto; min-width: 0; } .phone-code-panel { display: none; position: absolute; top: calc(100% + .5rem); left: 0; z-index: 50; width: 280px; max-height: 320px; overflow: hidden; background: var(--hl-bg-deep); border: 1px solid var(--hl-accent); /* Harmonized to the sitewide depth-shadow color (--hl-bg-deep at opacity, same token the rest of the elevation system uses) instead of a generic black — was already a floating dropdown shadow, just brought onto the same "zero new colors" system. */ box-shadow: 0 18px 40px rgba(10, 36, 37, 0.4); } .phone-code-panel.is-open { display: block; } .phone-code-search { width: 100%; box-sizing: border-box; padding: .8rem 1rem; border: none; border-bottom: 1px solid rgba(245, 241, 233, 0.15); background: transparent; color: var(--hl-ivory); font-family: var(--font-sans); font-size: .85rem; } .phone-code-search:focus { outline: none; border-color: var(--hl-accent); } .phone-code-list { max-height: 260px; overflow-y: auto; } .phone-code-item { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .6rem 1rem; font-size: .8rem; text-align: start; color: var(--hl-ivory); transition: background-color .2s var(--ease); } .phone-code-item:hover, .phone-code-item.is-focused { background: rgba(199, 125, 58, 0.16); } .phone-code-item-abbr { flex: 0 0 auto; width: 2rem; font-weight: 700; letter-spacing: .05em; color: var(--hl-accent-hover); } .phone-code-item-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--hl-sage); } .phone-code-item-dial { flex: 0 0 auto; color: var(--hl-ivory); font-weight: 600; } .phone-code-empty { padding: .9rem 1rem; font-size: .8rem; color: var(--hl-sage); } .field-row { display: grid; grid-template-columns: 1fr; gap: 1.75rem; } .form-submit { margin-top: .5rem; } .overlay { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(10, 36, 37, 0.92); backdrop-filter: blur(6px); } .overlay.is-open { display: flex; } .overlay-card { max-width: 420px; width: 100%; text-align: center; padding: 3rem 2rem; background: var(--hl-bg); border: 1px solid rgba(199, 125, 58, 0.35); } .overlay-mark { width: 46px; height: 46px; margin-inline: auto 1.5rem; border: 1px solid var(--hl-accent); display: flex; align-items: center; justify-content: center; } .overlay-mark span { width: 16px; height: 8px; border-inline-start: 2px solid var(--hl-accent); border-block-end: 2px solid var(--hl-accent); transform: rotate(-45deg) translateY(-2px); } .overlay-card h3 { font-family: var(--font-editorial); font-size: 1.4rem; color: var(--hl-ivory); } .overlay-card p { margin-top: 1rem; font-size: .9rem; line-height: 1.7; color: var(--hl-sage); } .overlay-close { margin-top: 2rem; } /* Legal modal — reuses .overlay for the backdrop, but needs a wider, left-aligned, scrollable card since real policy text runs far longer than the confirmation message. */ .legal-card { max-width: 640px; width: 100%; max-height: 80vh; display: flex; flex-direction: column; text-align: start; padding: 2.5rem; background: var(--hl-bg); border: 1px solid rgba(199, 125, 58, 0.35); } .legal-card h3 { font-family: var(--font-editorial); font-size: 1.3rem; color: var(--hl-ivory); flex: 0 0 auto; } .legal-card-body { margin-top: 1rem; overflow-y: auto; padding-inline-end: .5rem; } .legal-card-body p { font-size: .85rem; line-height: 1.75; color: var(--hl-sage); margin-top: 1rem; } .legal-card-body p:first-child { margin-top: 0; } .legal-card-body h4 { margin-top: 1.5rem; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--hl-accent-hover); } .legal-disclaimer { margin-top: 1.5rem; padding: .9rem 1rem; font-size: .78rem; line-height: 1.6; background: rgba(227, 131, 126, 0.08); border: 1px solid rgba(227, 131, 126, 0.3); color: var(--hl-ivory); } .legal-card .overlay-close { flex: 0 0 auto; align-self: flex-start; } .footer-legal-links { display: flex; justify-content: center; gap: 1.25rem; margin-top: 1rem; } .footer-legal-links button { font-size: .68rem; letter-spacing: .12em; color: var(--hl-sage); text-decoration: underline; text-underline-offset: 3px; transition: color .3s var(--ease); background: none; border: 0; cursor: pointer; padding: 0; } .footer-legal-links button:hover { color: var(--hl-ivory); } /* ============================================================ 10. FOOTER ============================================================ */ .site-footer { background: var(--gloss-glow), var(--gloss-sheen), var(--hl-bg-deep); border-top: 1px solid var(--hl-accent); box-shadow: var(--depth-0); } .footer-grid { padding-block: 3.5rem; display: grid; grid-template-columns: 1fr; gap: 2.5rem; } .footer-location { margin-top: 1rem; display: flex; flex-direction: column; gap: .5rem; } .footer-location p { font-size: .82rem; color: var(--hl-sage); white-space: nowrap; } .footer-location strong { color: rgba(245, 241, 233, 0.85); font-weight: 600; } .footer-heading { font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--hl-sage); margin-bottom: 1rem; } .footer-links { display: flex; flex-direction: column; gap: .6rem; font-size: .88rem; } .footer-links a { color: rgba(245, 241, 233, 0.8); transition: color .3s var(--ease); cursor: pointer; } .footer-links a:hover { color: var(--hl-accent-hover); } .footer-bottom { border-top: 1px solid var(--hl-accent); padding-block: 1.5rem; text-align: center; font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(159, 179, 174, 0.7); } /* Legal-identity line — Commercial Registration surfaced next to the copyright notice, the global-standard placement for a registered entity's footer credentials (matches how UK/EU/US corporate sites disclose company-registration numbers site-wide). */ .footer-cr { margin-top: .4rem; } /* ============================================================ 11. LIGHTBOX — native, zero-dependency ============================================================ */ .lightbox { position: fixed; inset: 0; z-index: 250; display: none; align-items: center; justify-content: center; background: rgba(10, 36, 37, 0.96); padding: 2.5rem 1rem; } .lightbox.is-open { display: flex; } .lightbox-img { max-width: 92vw; max-height: 82vh; object-fit: contain; border: 1px solid rgba(245, 241, 233, 0.12); } .lightbox-close { position: absolute; top: 1.25rem; inset-inline-end: 1.5rem; font-size: 1.8rem; line-height: 1; color: var(--hl-ivory); transition: color .3s var(--ease), transform .3s var(--ease-pop); } .lightbox-close:hover { color: var(--hl-accent-hover); transform: scale(1.15); } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--hl-ivory); border: 1px solid rgba(245, 241, 233, 0.25); background: rgba(15, 52, 53, 0.6); transition: transform .3s var(--ease-pop), border-color .3s var(--ease), color .3s var(--ease); } .lightbox-nav:hover { border-color: var(--hl-accent-hover); color: var(--hl-accent-hover); transform: translateY(-50%) scale(1.12); } .lightbox-prev { inset-inline-start: 1rem; } .lightbox-next { inset-inline-end: 1rem; } .lightbox-counter { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--hl-sage); } @media (min-width: 640px) { .lightbox-nav { width: 54px; height: 54px; } .lightbox-prev { inset-inline-start: 2rem; } .lightbox-next { inset-inline-end: 2rem; } } /* Lightbox loading state — fixes the ~1.5-2s blank gap on open/navigate that came from swapping straight to the full 2048w image with zero feedback. The new-image fetch now happens off-DOM (see main.js renderLightbox) with the PREVIOUS image staying visible and dimmed underneath a small spinner until the next one is actually ready, instead of the frame going blank. */ .lightbox.is-loading .lightbox-img { opacity: .3; transition: opacity .15s var(--ease); } .lightbox.is-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 2px solid rgba(245, 241, 233, 0.25); border-top-color: var(--hl-accent); border-radius: 50%; animation: hl-lightbox-spin .8s linear infinite; } @keyframes hl-lightbox-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .lightbox.is-loading::after { animation: none; } } /* ============================================================ 12. RESPONSIVE BREAKPOINTS ============================================================ */ @media (min-width: 640px) { .container { padding-inline: 2.5rem; } .hero h1 { font-size: 2.5rem; } .hero-subtitle { font-size: .86rem; } .page-hero h2, .page-hero h1 { font-size: 2.7rem; } .footer-grid { grid-template-columns: repeat(3, 1fr); } .footer-location { max-width: none; } .image-grid { grid-template-columns: repeat(4, 1fr); } .gallery-row { grid-template-columns: repeat(4, 1fr); } .tier-grid { grid-template-columns: repeat(2, 1fr); } .field-row { grid-template-columns: 1fr 1fr; } .tier-card { flex-direction: row; align-items: stretch; } .tier-media { flex: 0 0 38%; } .tier-content { flex: 1; justify-content: center; } } @media (min-width: 1024px) { :root { --header-h: 112px; } .container { padding-inline: 3.5rem; } .nav-primary { display: flex; } .menu-toggle, .nav-mobile { display: none; } .hero h1 { font-size: 3.4rem; } .carousel-track .geo-frame { width: 230px; } .footer-grid { grid-template-columns: 1.4fr repeat(2, 1fr); } .tier-grid { grid-template-columns: repeat(2, 1fr); } .founder-hero-title { font-size: 3rem; } /* .founder-portrait-col is a plain (stretched, default align-items) grid track spanning the FULL row height, matching .founder-narrative-col's much taller content. The actual position:sticky lives on the shorter INNER .founder-portrait-sticky wrapper, so it has real room to travel: it sticks near the top of the viewport while the reader scrolls through the narrative, then only releases once the tall track's bottom edge is reached — which is exactly where the narrative (and CEO-2, its last element) ends. That's what closes the gap between CEO-1 and CEO-2 at the bottom, with zero JS. Column width bumped up (was minmax(320,420)) — CEO-1 enlarged slightly per instruction, sticky/travel mechanics and the end-of-page meeting with CEO-2 are untouched. */ .founder-scroll-row { display: grid; grid-template-columns: minmax(350px, 460px) 1fr; gap: 4rem; } .founder-portrait-col { max-width: none; } .founder-portrait-sticky { position: sticky; top: calc(var(--header-h) + 2.5rem); } .founder-framed-copy { padding: 3.5rem; } .inquiry-form { grid-template-columns: 1fr; max-width: 720px; margin-inline: auto; } } @media (min-width: 1440px) { .hero h1 { font-size: 4rem; } .carousel-track .geo-frame { width: 260px; } } /* ============================================================ PERFORMANCE — carousel/marquee layer promotion. Forces each bordered/shadowed frame onto its own GPU-composited layer so the two-layer box-shadow (--depth-1, blur up to 46px) is rasterized ONCE and then just translated by the compositor as the parent track animates, instead of being recomputed every frame across all 76 carousel frames + 26x2 logo chips simultaneously. Zero visual change — same shadow, same border, same position. ============================================================ */ .geo-frame, .logo-chip { transform: translateZ(0); backface-visibility: hidden; } .carousel-viewport, .logo-marquee-viewport { contain: layout paint; } /* ============================================================ IMAGE PROTECTION (best-effort deterrent only). Removes the two casual-save vectors this CSS layer can affect: native drag-out and iOS long-press callout. Right-click is blocked via JS (see main.js). This cannot and does not block OS-level screenshots or screen recording — no website can. Treat as a deterrent, not security. ============================================================ */ img { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; user-drag: none; }