/* ============================================================ أتيليه مصر — Atelier Egypt CINEMATIC DARK. A film opening sequence: every section is a scene, content floats in darkness, negative space is the design. Amiri at massive scale is the only hero. Two languages, one standard — neither is an afterthought. ------------------------------------------------------------ RULES BAKED IN: - CSS logical properties only (no left/right physical props). - letter-spacing ONLY inside selectors scoped with :lang(en). Arabic text is never tracked — and the [lang="ar"] base fork below resets inherited tracking as a hard guarantee. - Arabic line-heights: display 1.3 / body 1.9. 1.3 is Amiri's FLOOR: display copy with shadda/stacked harakat must be checked visually at wrap widths before shipping (or bump that heading to 1.35). Latin display line-height: 1.0. - NO cards, NO boxes, NO borders on content. The only lines on the site are the gold hairlines, and they are drawn as events (scaleX 0→1 by JS), not painted as borders. - Gold #C9A96E ONLY on: hairlines, process numerals (ghost), marquee separator dots, the single dash before the hero kicker, the process progress dot. Nothing else is gold. - Animation classes on : .js (inline script), .gsap (full choreography), .io (fallback reveals). With none of them, everything is visible — the no-JS / CDN-failure state. ============================================================ */ /* ---------- 1. Tokens ---------- */ :root { --bg: #0C0C0A; --ink: #F0EDE8; --ink-dim: rgba(240, 237, 232, 0.64); --ink-faint: rgba(240, 237, 232, 0.56); /* ≥4.5:1 on --bg — it styles real text */ --gold: #C9A96E; --gold-ghost: rgba(201, 169, 110, 0.16); /* the giant process numerals */ --wa: #1FAD56; --ar-display: 'Amiri', 'Times New Roman', serif; --ar-body: 'Almarai', 'Segoe UI', system-ui, sans-serif; --la-display: 'Fraunces', Georgia, serif; --la-body: 'Archivo', 'Segoe UI', system-ui, sans-serif; /* round 7: monumental scale across the board */ --fs-hero: clamp(5rem, 14vw, 11rem); --fs-chapter: clamp(5rem, 13vw, 10rem); --fs-founder: clamp(5rem, 12vw, 9rem); --fs-h2: clamp(3rem, 7vw, 6rem); --fs-h3: clamp(1.35rem, 2.2vw, 1.8rem); --fs-num: clamp(8rem, 20vw, 16rem); /* process numerals */ --header-h: 4.25rem; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1); } /* ---------- 2. Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; /* round 9: the dark fill lives on (not ) so the position:fixed z-index:-1 star field canvas shows through the now-transparent body. Visually identical when no stars render (no JS / no WebGL): the page is still #0C0C0A end to end. */ background: var(--bg); } /* Lenis smooth scroll (classes set by the library itself) */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } body { margin: 0; background: transparent; /* round 9: star field (fixed, z-index:-1) shows through; dark fill is on */ color: var(--ink); font-size: 1.0625rem; overflow-x: clip; /* giant numerals bleed by design */ } body:lang(ar) { font-family: var(--ar-body); line-height: 1.9; } body:lang(en) { font-family: var(--la-body); line-height: 1.65; } /* Opposite-language inline runs always get the right family — and letter-spacing is an INHERITED property, so a tracked :lang(en) ancestor would otherwise track nested Arabic glyphs. Arabic is never tracked; this base fork is the guarantee. */ [lang="ar"] { font-family: var(--ar-body); letter-spacing: normal; } [lang="en"] { font-family: var(--la-body); } h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; } ul, ol { padding: 0; } a { color: inherit; text-decoration: none; } ::selection { background: var(--gold); color: #0C0C0A; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* ---------- Cursor: hidden site-wide; a gold dot marks clickables ---------- html.cur is added by main.js ONLY on fine pointers — so touch devices and no-JS visitors keep cursor: auto untouched. The 12px gold dot itself is a JS-created element (inline-styled, viewport coordinates); it appears instantly over a, button, [role="button"] and never animates. The descendant rules are needed because UA stylesheets put cursor: pointer on links, which would defeat the html-level none. */ html.cur, html.cur body, html.cur a, html.cur button, html.cur [role="button"] { cursor: none; } .skip-link { position: fixed; inset-block-start: 0.75rem; inset-inline-start: 0.75rem; z-index: 300; background: var(--ink); color: var(--bg); padding: 0.6em 1.2em; font-weight: 700; transform: translateY(-300%); } .skip-link:focus { transform: none; } .container { inline-size: min(100% - clamp(2.5rem, 7vw, 6rem), 80rem); margin-inline: auto; } /* ---------- 3. Display type ---------- */ .display:lang(ar) { font-family: var(--ar-display); font-weight: 700; line-height: 1.3; } .display:lang(en) { font-family: var(--la-display); font-weight: 500; line-height: 1.0; letter-spacing: -0.03em; /* tighter Latin display = luxury; Arabic never tracked */ } h1.display { font-size: var(--fs-hero); } h2.display { font-size: var(--fs-h2); } /* Signature device: second-language caption under every heading. AR pages → Archivo uppercase, tracked, faint (Latin only). EN pages → Almarai, no tracking, faint. */ .h-caption { color: var(--ink-faint); margin-block-start: 0.8rem; /* the caption's dir is the OPPOSITE of the page, so text-align:start would pull it to the far edge from its heading. text-align:end (logical) resolves to the page's start edge in both directions, so caption and heading share an edge. Centered scenes override. */ text-align: end; } .h-caption:lang(en) { font-family: var(--la-body); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; /* Blink/Gecko track AFTER the last glyph too; end-aligned captions on AR pages would sit ~0.26em short of the heading edge */ margin-inline-end: -0.26em; } .scene-center .h-caption:lang(en) { margin-inline-end: 0; } .h-caption:lang(ar) { font-family: var(--ar-body); font-size: 0.85rem; font-weight: 700; } .kicker { display: inline-flex; align-items: center; gap: 0.8em; color: var(--ink-dim); margin-block-end: clamp(1.4rem, 3vw, 2.2rem); } .kicker:lang(ar) { font-weight: 400; font-size: 0.92rem; } .kicker:lang(en) { font-size: 0.74rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; } /* the single gold hero detail: one dash before the kicker */ .kicker-dash { inline-size: 1.8rem; block-size: 1px; background: var(--gold); flex: none; } .lede { color: var(--ink-dim); font-size: clamp(1.1rem, 1.5vw, 1.35rem); max-inline-size: 40rem; } .lede:lang(ar) { font-weight: 300; line-height: 1.9; } /* cinematic lightness */ .lede:lang(en) { font-weight: 400; } /* ---------- 4. Scenes — every section is full viewport ---------- */ .scene { position: relative; min-block-size: 100svh; display: grid; align-content: center; padding-block: clamp(5rem, 12vh, 8rem); } .scene-center { justify-items: center; text-align: center; } .scene-center .lede { margin-inline: auto; } /* constrained blocks (max-inline-size) need auto margins to actually sit centered — text-align:center only centers their inline content */ .scene-center .h-caption { text-align: center; } .scene-center .hero-title, .scene-center .quote-line { margin-inline: auto; } /* The drawn gold hairline — an event between scenes, not a border. Default state is fully drawn (no-JS / reduced motion); the GSAP path sets scaleX 0 with a direction-aware origin and draws it. */ .hairline { display: block; block-size: 1px; inline-size: min(100% - clamp(2.5rem, 7vw, 6rem), 80rem); margin-inline: auto; background: var(--gold); opacity: 0.65; border: 0; } /* ---------- 5. Header — quiet chrome, blurs past 80px ---------- */ .site-header { position: sticky; inset-block-start: 0; z-index: 100; background: transparent; transition: background 0.45s ease, backdrop-filter 0.45s ease; } html.js .site-header.scrolled { background: rgba(12, 12, 10, 0.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } html:not(.js) .site-header { background: rgba(12, 12, 10, 0.78); } .header-inner { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); min-block-size: var(--header-h); } .brand { display: inline-flex; align-items: center; gap: 0.7rem; } .brand img { display: block; block-size: 36px; inline-size: auto; } .brand-name:lang(ar) { font-family: var(--ar-display); font-weight: 700; font-size: 1.3rem; line-height: 1.35; } .brand-name:lang(en) { font-family: var(--la-body); font-weight: 500; font-size: 0.92rem; letter-spacing: 0.28em; } .site-nav { margin-inline-start: auto; } .site-nav ul { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.2rem); list-style: none; } .site-nav a { color: var(--ink-dim); transition: color 0.3s; } .site-nav a:lang(ar) { font-weight: 700; font-size: 0.95rem; } .site-nav a:lang(en) { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; } .site-nav a:hover { color: var(--ink); } .site-nav a[aria-current="page"] { color: var(--ink); } .nav-lang a { color: var(--ink-faint); } .nav-lang a:hover { color: var(--ink); } .nav-toggle { display: none; background: none; border: 0; padding: 0.9rem 0.6rem; cursor: pointer; } .nav-toggle .bar { display: block; inline-size: 1.5rem; block-size: 1px; background: var(--ink); transition: transform 0.35s var(--ease-out); } .nav-toggle .bar + .bar { margin-block-start: 7px; } html.nav-open .nav-toggle .bar:first-child { transform: translateY(4px) rotate(45deg); } html.nav-open .nav-toggle .bar:last-child { transform: translateY(-4px) rotate(-45deg); } @media (max-width: 56.25em) { /* JS-gated: without JS the desktop nav stays usable (header wraps) */ html.js .nav-toggle { display: block; } html.js .site-nav { display: none; } html:not(.js) .header-inner { flex-wrap: wrap; padding-block: 0.9rem; } html:not(.js) .site-nav ul { flex-wrap: wrap; row-gap: 0.4rem; } html.nav-open { overflow: hidden; } html.nav-open .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; } html.nav-open .nav-toggle { position: relative; z-index: 95; } html.nav-open .site-nav { display: grid; position: fixed; inset: 0; z-index: 90; padding-block-start: var(--header-h); background: var(--bg); align-content: center; justify-items: center; } html.nav-open .site-nav ul { flex-direction: column; gap: clamp(1rem, 4vh, 1.9rem); text-align: center; } html.nav-open .site-nav a:lang(ar) { font-family: var(--ar-display); font-size: clamp(2rem, 9vw, 3.2rem); font-weight: 700; line-height: 1.35; } html.nav-open .site-nav a:lang(en) { font-family: var(--la-display); font-size: clamp(1.8rem, 8vw, 3rem); font-weight: 500; line-height: 1.05; letter-spacing: 0; text-transform: none; } } /* ---------- 6. Buttons & quiet links ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.9em 1.7em; border: 0; border-radius: 2px; transition: background 0.3s, color 0.3s; } .btn:lang(ar) { font-weight: 700; font-size: 0.97rem; } .btn:lang(en) { font-weight: 500; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; } .btn-primary { background: var(--ink); color: var(--bg); } .btn-primary:hover { background: var(--gold); color: #0C0C0A; } .dot { inline-size: 0.55em; block-size: 0.55em; border-radius: 50%; background: var(--wa); /* WhatsApp green lives here only */ flex: none; } /* quiet text link — underline, not a border */ .link-quiet { display: inline-flex; align-items: center; gap: 0.55em; color: var(--ink-dim); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.35em; transition: color 0.3s; } .link-quiet:hover { color: var(--ink); } .link-quiet:lang(en) { font-weight: 500; } .arrow { transition: transform 0.3s var(--ease-out); } [dir="rtl"] .link-quiet:hover .arrow { transform: translateX(-5px); } [dir="ltr"] .link-quiet:hover .arrow { transform: translateX(5px); } .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.2rem, 3vw, 2rem); margin-block-start: clamp(2.2rem, 5vw, 3.2rem); } .scene-center .cta-row { justify-content: center; } /* ---------- 7. Hero — the film title card ---------- */ .hero { padding-block-end: clamp(7rem, 16vh, 10rem); } /* room for the marquee strip */ /* The birds stage (round 7): on desktop the Boids canvas lives here and the 800 birds form "ATELIER EGYPT"; on mobile / reduced motion / no-JS / failed WebGL the .bird-brand type IS the formation — always visible by default, hidden only when the canvas takes over. Hero content flows BELOW the stage, so birds and text never overlap. */ .bird-stage { position: relative; min-block-size: min(36svh, 28rem); display: grid; place-items: center; margin-block-end: clamp(1.5rem, 4vh, 3rem); } .bird-stage canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .bird-brand { font-family: var(--la-display); font-weight: 500; font-size: clamp(2.6rem, 8.5vw, 8rem); line-height: 1.0; text-align: center; overflow-wrap: anywhere; } .bird-brand:lang(en) { letter-spacing: -0.03em; } html.js .bird-stage.birds-on .bird-brand { visibility: hidden; } /* short-viewport budget (1366×768-class laptops): without this the stage + monumental H1 stack to ~1.4 viewports and the first scroll needed to READ the headline is the same gesture that scatters the flock — formation and copy must coexist on screen */ @media (min-width: 48em) and (max-height: 50em) { .bird-stage { min-block-size: min(26svh, 16rem); margin-block-end: 1rem; } .hero .hero-title { font-size: clamp(3.4rem, 9vh, 7rem); } .hero { padding-block-end: clamp(4rem, 9vh, 6rem); } } /* sub-26em phones: the 5rem hero floor would overflow the container — typography correctness beats the spec floor only down here */ @media (max-width: 26em) { h1.display { font-size: clamp(3.2rem, 15vw, 5rem); } } /* typewriter cursor (contact heroes) — gold, 2px, 1s blink */ .tw-cursor { display: inline-block; inline-size: 2px; block-size: 0.85em; margin-inline-start: 0.08em; background: var(--gold); vertical-align: baseline; animation: tw-blink 1s step-end infinite; } @keyframes tw-blink { 50% { opacity: 0; } } .hero .container { position: relative; z-index: 1; /* text above the fabric */ } .hero-marquee { z-index: 1; } .hero-title { max-inline-size: 18ch; } .hero-caption { margin-block-start: clamp(1.2rem, 2.5vw, 1.8rem); } .hero .lede { margin-block-start: clamp(1.6rem, 3.5vw, 2.4rem); } /* the marquee: small, unobtrusive, breathing at the bottom of the hero */ .hero-marquee { position: absolute; inset-block-end: 0; inset-inline: 0; overflow: hidden; padding-block: 1rem; opacity: 0.5; pointer-events: none; } .marquee-track { display: flex; inline-size: max-content; animation: marquee-ltr 60s linear infinite; } [dir="rtl"] .marquee-track { animation-name: marquee-rtl; } @keyframes marquee-ltr { to { transform: translateX(-50%); } } @keyframes marquee-rtl { to { transform: translateX(50%); } } html.gsap .marquee-track { animation: none; } /* GSAP drives the loop */ .marquee-half { display: flex; align-items: center; flex: none; } .m-item { white-space: nowrap; font-size: 0.8rem; color: var(--ink-faint); } .m-item:lang(ar) { font-family: var(--ar-body); font-weight: 400; } .m-item:lang(en) { font-family: var(--la-body); font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.72rem; } .m-dot { color: var(--gold); /* gold separator dots */ padding-inline: clamp(1rem, 2.4vw, 1.6rem); font-size: 0.9em; line-height: 1; } /* ---------- 8. Chapters — full-screen category title cards ---------- */ .chapter-title { font-size: var(--fs-chapter); max-inline-size: 100%; } /* anywhere-breaking is for long Latin compounds only — breaking an Arabic word mid-cursive severs letter joining, so Arabic wraps at spaces and takes a smaller floor on narrow phones (the spec floor of 5rem would clip long Arabic words on sub-30em screens; typography correctness wins below that width, spec scale everywhere else). */ .chapter-title:lang(en) { overflow-wrap: anywhere; } .chapter-title:lang(ar) { font-family: var(--ar-display); font-weight: 700; line-height: 1.3; } @media (max-width: 30em) { .chapter-title:lang(ar) { font-size: clamp(3.2rem, 15vw, 5rem); } } .chapter-title:lang(en) { font-family: var(--la-display); font-weight: 500; line-height: 1.0; letter-spacing: -0.03em; } .chapter-desc { margin-block-start: clamp(1.2rem, 3vw, 2rem); color: var(--ink-dim); max-inline-size: 34rem; font-size: clamp(1.05rem, 1.4vw, 1.25rem); } .chapter-desc:lang(ar) { font-weight: 300; } .scene-center .chapter-desc { margin-inline: auto; } /* ---------- 9. Floating text blocks (pillars, beliefs, prose) ---------- */ .blocks { display: grid; gap: clamp(2.6rem, 7vh, 4.5rem); margin-block-start: clamp(2.4rem, 6vh, 4rem); max-inline-size: 44rem; } .block h3 { font-size: var(--fs-h3); margin-block-end: 0.6rem; } .block h3:lang(ar) { font-weight: 700; } .block h3:lang(en) { font-family: var(--la-display); font-weight: 500; line-height: 1.05; } .block p { color: var(--ink-dim); max-inline-size: 60ch; } .block p:lang(ar) { font-weight: 300; } .prose { display: grid; gap: 1.4rem; max-inline-size: 44rem; margin-block-start: clamp(2rem, 5vh, 3rem); } .prose p { color: var(--ink-dim); } .prose p:lang(ar) { font-weight: 300; } /* plain check list — a mark in ink, never gold, never boxed */ .checks-flat { list-style: none; display: grid; gap: 1.1rem; margin-block-start: clamp(2.2rem, 5vh, 3rem); max-inline-size: 44rem; } .checks-flat li { display: flex; align-items: baseline; gap: 0.9rem; color: var(--ink-dim); } .checks-flat li::before { content: "✓"; color: var(--ink); flex: none; font-size: 0.9em; } .checks-flat li:lang(ar) { font-weight: 300; } /* Arabic-Indic with a leading zero, so AR (٠١..٠٤) matches EN (01..04) */ @counter-style arabic-indic-padded { system: extends arabic-indic; pad: 2 "٠"; } /* numbered brief (contact) — counters, not boxes */ .brief { list-style: none; counter-reset: brief; display: grid; gap: 1.3rem; margin-block-start: clamp(2.2rem, 5vh, 3rem); max-inline-size: 44rem; } .brief li { counter-increment: brief; display: flex; align-items: baseline; gap: 1.1rem; color: var(--ink-dim); } .brief li:lang(ar) { font-weight: 300; } .brief li::before { content: counter(brief, decimal-leading-zero); font-family: var(--la-display); font-weight: 500; font-size: 1.1rem; color: var(--ink-faint); flex: none; } .brief li:lang(ar)::before { content: counter(brief, arabic-indic-padded); font-family: var(--ar-display); font-weight: 700; font-size: 1.25rem; } /* ---------- 10. Process — pinned scenes, 40vw numerals ---------- */ .steps { list-style: none; } /* default (no GSAP / reduced motion / mobile fallback is the same markup): each step is its own full-screen scene, the giant gold ghost numeral floats behind the floating text */ .steps li { position: relative; min-block-size: 100svh; display: grid; align-content: center; overflow: hidden; } .step-num { position: absolute; inset-block-start: 50%; inset-inline-end: -0.06em; transform: translateY(-50%); font-size: var(--fs-num); line-height: 1; color: var(--gold-ghost); /* semi-transparent gold */ z-index: 0; pointer-events: none; user-select: none; -webkit-user-select: none; } .step-num:lang(ar) { font-family: var(--ar-display); font-weight: 700; } .step-num:lang(en) { font-family: var(--la-display); font-weight: 500; } .step-body { position: relative; z-index: 1; max-inline-size: 32rem; display: grid; gap: 0.8rem; } .steps h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); } .steps h3:lang(ar) { font-weight: 700; font-family: var(--ar-display); line-height: 1.35; } .steps h3:lang(en) { font-family: var(--la-display); font-weight: 500; line-height: 1.05; } .steps p { color: var(--ink-dim); } .steps p:lang(ar) { font-weight: 300; } /* pinned mode (html.gsap + .process-scene set by main.js): the list collapses to one stage, steps stack and crossfade */ html.gsap .process-scene .steps { position: relative; block-size: min(64svh, 36rem); } html.gsap .process-scene .steps li { position: absolute; inset: 0; min-block-size: 0; } /* (--fs-num caps at 16rem, well inside the 36rem pinned stage — no extra pinned-mode clamp needed since the round-7 numeral tokens) */ /* the gold progress dot, scrubbed down the inline-start edge */ .process-dot { position: absolute; inset-inline-start: 0; inset-block-start: 12%; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--gold); z-index: 2; } /* ---------- 11. Manifesto quote — full-screen title card ---------- */ .quote-line { font-size: clamp(2.4rem, 7vw, 5.2rem); max-inline-size: 22ch; } .quote-line:lang(ar) { font-family: var(--ar-display); font-weight: 700; line-height: 1.5; } .quote-line:lang(en) { font-family: var(--la-display); font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; } /* ---------- 12. Founders — each a full-screen scene ---------- */ .founders { list-style: none; } .founder-name { display: block; font-size: var(--fs-founder); } .founder-name:lang(ar) { font-family: var(--ar-display); font-weight: 700; line-height: 1.3; } .founder-name:lang(en) { font-family: var(--la-display); font-weight: 500; line-height: 1.0; letter-spacing: -0.03em; } .founder-role { display: block; margin-block-start: 0.8rem; color: var(--ink-faint); } .founder-role:lang(ar) { font-weight: 400; font-size: 0.95rem; } .founder-role:lang(en) { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; } .founder-bio { margin-block-start: clamp(1.6rem, 4vh, 2.4rem); color: var(--ink-dim); max-inline-size: 56ch; } .founder-bio:lang(ar) { font-weight: 300; } /* ---------- 13. Contact — the number IS the page ---------- */ /* must out-specify h1.display (0,1,1) so the contact/404 H1 stays small and the giant number below it leads — "the number IS the page" */ h1.display.contact-h1 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); } .contact-number-wrap { margin-block-start: clamp(2.2rem, 6vh, 3.6rem); } .contact-number { display: inline-block; font-family: var(--la-display); font-weight: 500; font-size: clamp(3rem, 8vw, 6rem); line-height: 1.0; transition: color 0.3s; } .contact-number:hover { color: var(--gold); } .contact-sub { margin-block-start: clamp(1.2rem, 3vh, 2rem); color: var(--ink-faint); } .channels { display: grid; gap: clamp(2.4rem, 6vh, 3.6rem); margin-block-start: clamp(2.4rem, 6vh, 4rem); max-inline-size: 44rem; } .channel h2 { font-size: 0.9rem; color: var(--ink-faint); } .channel h2:lang(ar) { font-weight: 700; } .channel h2:lang(en) { font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.76rem; } .channel-value { display: inline-block; font-family: var(--la-display); font-weight: 500; font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height: 1.3; margin-block: 0.5rem 0.4rem; transition: color 0.3s; overflow-wrap: anywhere; } .channel-value:hover { color: var(--gold); } .channel p { color: var(--ink-dim); font-size: 0.95rem; } .channel p:lang(ar) { font-weight: 300; } /* ---------- 14. Footer — logo, links, copyright. Nothing else. ---------- */ .site-footer { padding-block: clamp(4rem, 10vh, 6.5rem) 0; text-align: center; } .footer-logo { display: inline-block; } .footer-logo img { display: block; block-size: 64px; inline-size: auto; margin-inline: auto; } .footer-nav { margin-block-start: clamp(2rem, 5vh, 3rem); } .footer-nav ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.2rem, 3vw, 2.4rem); } .footer-nav a { color: var(--ink-dim); transition: color 0.3s; } .footer-nav a:hover { color: var(--ink); } .footer-nav a:lang(ar) { font-weight: 700; font-size: 0.95rem; } .footer-nav a:lang(en) { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; } .footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-block-start: clamp(2.5rem, 6vh, 4rem); padding-block: 1.5rem; color: var(--ink-faint); font-size: 0.85rem; } .footer-base a { color: var(--ink-dim); transition: color 0.3s; } .footer-base a:hover { color: var(--ink); } /* ---------- 15. Reveal states (JS-gated; nothing hidden without JS) ---------- .fade → opacity-only reveal (chapter descs, blocks, ledes) .mat → SplitType word materialisation (handled inline by GSAP) Chapter titles / founders / hero are tweened directly by main.js. */ html.gsap .fade, html.io .fade { opacity: 0; transition: opacity 0.9s ease; } html.gsap .fade.in, html.io .fade.in { opacity: 1; } /* ---------- 16. Reduced motion — stillness, everything visible ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .marquee-track { animation: none; } .tw-cursor { animation: none; display: none; } html.gsap .fade, html.io .fade { opacity: 1; transition: none; } .arrow, .site-header, .btn, .link-quiet, .channel-value, .contact-number { transition: none; } } /* ---------- 17. Print — ink on paper, nothing hidden ---------- */ @media print { :root { --bg: #fff; --ink: #000; --ink-dim: #333; --ink-faint: #555; --gold: #6b5836; --gold-ghost: rgba(0, 0, 0, 0.08); } body { background: #fff; color: #000; } /* the birds canvas is CONTENT, not background — it would print as an opaque dark slab; the .bird-brand type prints instead */ .hero-marquee, .bird-stage canvas, .nav-toggle, .skip-link, .tw-cursor { display: none !important; } html.js .bird-stage.birds-on .bird-brand { visibility: visible !important; } .site-header { position: static; background: #fff; } .scene, .steps li { min-block-size: 0; padding-block: 2rem; } .btn-primary { background: #fff; color: #000; outline: 1px solid #000; } .fade, .mat, .word, .char, .hairline, .bird-brand, .chapter-title, .chapter-desc, .h-caption, h2.display, .founder-name, .founder-role, .founder-bio, .hero-title, .hero-caption, .lede, .kicker, .cta-row, .quote-line, .steps li, .step-num, .step-body { opacity: 1 !important; visibility: visible !important; transform: none !important; filter: none !important; animation: none !important; transition: none !important; } html.gsap .process-scene .steps { block-size: auto; } html.gsap .process-scene .steps li { position: static; min-block-size: 0; } .process-dot { display: none !important; } } /* ---------- 18. 3D Tilt text hero (round 10) ---------- tilt.js dynamically wraps the hero H1 in .tilt-container at runtime. preserve-3d lets GSAP's rotateX/rotateY render as true 3D; perspective: 800px creates the depth context for children. */ .tilt-container { transform-style: preserve-3d; perspective: 800px; }