@charset "UTF-8"; /* =========================================================================== ROOT — cinematic home page --------------------------------------------------------------------------- Scoped entirely to the home page. Every colour comes from the tokens in style.css, which are themselves sampled from the logo, so this sheet adds a layout and a choreography but never a new palette. Stacking order inside the sequence 0 .cine-stage the canvas (fixed, full viewport) 1 .cine-dark dimming veil, opacity written by the scroll engine 2 .cine-marquee oversized type sliding against the scroll 3 .cine-track the copy sections 4 .cine-hero the opening panel, wiped away by the canvas 5 .cine-loader held until enough frames are decoded Direction: this is a Farsi-first site, so the "sides" are logical, not physical. .align-start puts copy on the reading-start edge (right in Farsi, left in English) and .align-end on the other. The map keeps the centre. =========================================================================== */ /* == Page shell ============================================================ */ /* The sequence is full-bleed and sits under a transparent header, so the ordinary page padding is suppressed while it is on screen. */ .cine { position: relative; margin-top: calc(var(--header-h) * -1); background: var(--bark-950); --cine-track-height: 900vh; } /* The header floats over the map until the sequence is done with the screen. Written by the scroll engine as a class on . */ body.cine-page .site-header { background: transparent; border-bottom-color: transparent; transition: background-color .4s var(--ease), border-color .4s var(--ease); } body.cine-page.cine-past .site-header { background: var(--bark-800); border-bottom-color: rgba(227, 213, 189, .12); } /* Keep the header legible over the pale antique map. */ body.cine-page .site-header::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(16, 18, 8, .58), transparent); transition: opacity .4s var(--ease); } body.cine-page.cine-past .site-header::before { opacity: 0; } /* == 1 Loader ============================================================= */ .cine-loader { position: fixed; inset: 0; z-index: 120; background: var(--bark-900); display: grid; align-content: center; justify-items: center; gap: 1.1rem; transition: opacity .7s var(--ease), visibility .7s var(--ease); } .cine-loader.is-done { opacity: 0; visibility: hidden; } .cine-loader-glyph { width: 68px; height: auto; opacity: .9; animation: cine-breathe 2.6s ease-in-out infinite; } @keyframes cine-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } .cine-loader-label { margin: 0; font-size: .74rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: rgba(227, 213, 189, .6); } body.rtl .cine-loader-label { letter-spacing: 0; text-transform: none; font-size: .85rem; } .cine-loader-track { width: min(240px, 52vw); height: 1px; background: rgba(227, 213, 189, .18); overflow: hidden; } .cine-loader-track span { display: block; height: 100%; width: 100%; background: var(--ember-500); transform: scaleX(0); transform-origin: left center; transition: transform .25s linear; } body.rtl .cine-loader-track span { transform-origin: right center; } .cine-loader-percent { margin: 0; font-size: .72rem; color: rgba(227, 213, 189, .42); font-variant-numeric: tabular-nums; } /* == 2 Hero =============================================================== */ .cine-hero { position: relative; z-index: 4; height: 100vh; height: 100svh; background: var(--bark-900); color: var(--bone-100); display: grid; align-content: center; padding-inline: 6vw; padding-block-start: var(--header-h); /* Room at the foot of the panel for .cine-scroll-cue, which is positioned absolutely and therefore invisible to the grid centring above it. Without it the headline is centred in the full height and, on a short landscape window, its last line lands straight on top of the cue — which is what the English setting did, its seven words running to three lines at a size the five-word Persian one never reaches. Reserving the space here fixes it for both without touching the type. */ padding-block-end: clamp(6rem, 13vh, 9.5rem); overflow: hidden; } /* A whisper of the campfire behind the type — enough to stop the panel reading as a flat rectangle, not enough to become a gradient. */ .cine-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 90% at 22% 8%, rgba(98, 106, 65, .34), transparent 62%); pointer-events: none; } /* The mark above the headline. It arrives first and alone: it fades up before the first word of the heading starts to rise, so the panel reads as brand, then statement, rather than as two things appearing at once. Sized against the headline rather than the viewport — at 22vw it stays in proportion to the type at every width, and the clamp stops it from becoming a stamp on a phone or a billboard on an ultrawide. */ .cine-hero-logo { position: relative; z-index: 1; justify-self: center; display: block; width: clamp(140px, 20vw, 280px); height: auto; margin-bottom: clamp(2rem, 7vh, 5rem); opacity: 0; transform: translateY(.6em); animation: cine-logo-rise 1.1s cubic-bezier(.16, 1, .3, 1) forwards .1s; } @keyframes cine-logo-rise { to { transform: none; opacity: 1; } } /* Wide enough that a five-word Persian headline sets on two lines rather than one word per line — `ch` is useless as a measure at display sizes. */ .cine-hero-inner { position: relative; z-index: 1; max-width: min(92vw, 960px); } .cine-label { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--ember-400); margin-bottom: 1.4rem; /* The label is small, warm and lands on whatever the map happens to be showing, so it carries its own shadow rather than trusting the scrim. */ text-shadow: 0 1px 10px rgba(16, 18, 8, .95), 0 0 26px rgba(16, 18, 8, .7); } body.rtl .cine-label { letter-spacing: .04em; text-transform: none; font-size: .84rem; } /* The hero headline is the largest type on the site by a wide margin — this is the one place the brief asks for real scale. */ .cine-hero-heading { margin: 0; font-family: var(--font-display); font-size: clamp(3rem, 1rem + 9vw, 9.5rem); font-weight: 200; line-height: .96; letter-spacing: -.02em; color: var(--bone-100); text-wrap: balance; } /* Persian sets much wider than Latin at the same point size and cannot be tracked in, so the display size steps down and the leading opens up. */ body.rtl .cine-hero-heading { font-size: clamp(2.4rem, 1rem + 5.4vw, 6rem); line-height: 1.24; letter-spacing: 0; font-weight: 300; } body.rtl .cine-word { margin-inline-start: .08em; } /* Words are separate elements so they can rise in sequence. */ .cine-word { display: inline-block; transform: translateY(1.05em); opacity: 0; animation: cine-word-rise .95s cubic-bezier(.16, 1, .3, 1) forwards; animation-delay: calc(.62s + var(--i) * .075s); } .cine-word:nth-child(even) { font-weight: 600; } @keyframes cine-word-rise { to { transform: translateY(0); opacity: 1; } } .cine-hero-tagline { margin: 1.8rem 0 0; font-size: clamp(.95rem, .85rem + .35vw, 1.1rem); color: rgba(227, 213, 189, .62); opacity: 0; animation: cine-fade-in .9s ease forwards .95s; } @keyframes cine-fade-in { to { opacity: 1; } } .cine-scroll-cue { position: absolute; inset-block-end: 2.2rem; inset-inline-start: 6vw; max-width: 40vw; z-index: 1; display: grid; gap: .8rem; justify-items: start; font-size: .66rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: rgba(227, 213, 189, .5); opacity: 0; animation: cine-fade-in .8s ease forwards 1.3s; } body.rtl .cine-scroll-cue { letter-spacing: 0; text-transform: none; font-size: .78rem; } .cine-scroll-cue i { display: block; width: 1px; height: 54px; position: relative; overflow: hidden; background: rgba(227, 213, 189, .16); } .cine-scroll-cue i::after { content: ''; position: absolute; inset-inline: 0; top: -54px; height: 54px; background: linear-gradient(to bottom, transparent, var(--ember-400)); animation: cine-trace 2.1s cubic-bezier(.6, 0, .4, 1) infinite; } @keyframes cine-trace { to { transform: translateY(108px); } } /* == 3 Canvas stage ======================================================= */ /* Fixed for the whole sequence. The circle wipe is applied by the engine as an inline clip-path so it can be scrubbed frame-accurately. */ .cine-stage { position: fixed; inset: 0; z-index: 0; background: var(--bark-950); clip-path: circle(0% at 50% 50%); will-change: clip-path; } .cine-stage.is-static { clip-path: none; } .cine-poster, #map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .cine-poster { object-fit: cover; object-position: center 45%; z-index: 0; } #map-canvas { z-index: 1; opacity: 0; transition: opacity .45s var(--ease); } .cine-stage.is-ready #map-canvas { opacity: 1; } /* Vignette, so copy in the side zones always has something to sit on. */ .cine-stage::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: /* The outer thirds carry every line of copy, so they are darkened directly rather than relying on the vignette to do it. */ linear-gradient(to right, rgba(16, 18, 8, .74) 0%, rgba(16, 18, 8, .12) 32%, rgba(16, 18, 8, .12) 68%, rgba(16, 18, 8, .74) 100%), linear-gradient(to bottom, rgba(16, 18, 8, .5) 0%, transparent 20%, transparent 68%, rgba(16, 18, 8, .6) 100%), radial-gradient(115% 78% at 50% 48%, transparent 46%, rgba(16, 18, 8, .5) 100%); } /* == 4 Dimming veil ======================================================= */ .cine-dark { position: fixed; inset: 0; z-index: 1; background: var(--bark-950); opacity: 0; pointer-events: none; } /* == 5 Marquee ============================================================ */ .cine-marquee { position: fixed; inset-inline: 0; /* Parked low rather than dead centre: at 50% it sat straight behind the headline of every section it overlapped and turned the copy to soup. */ top: 76%; z-index: 2; translate: 0 -50%; pointer-events: none; opacity: 0; overflow: hidden; } .cine-marquee-text { display: flex; gap: 3vw; white-space: nowrap; width: max-content; font-family: var(--font-display); font-size: 13vw; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px rgba(227, 213, 189, .22); } body.rtl .cine-marquee-text { letter-spacing: 0; } /* == 6 Scroll track & sections ============================================ */ .cine-track { position: relative; z-index: 3; height: var(--cine-track-height); } /* Each section is parked so that it sits dead centre of the viewport at the midpoint of the scroll window it owns. --at is that midpoint as a unitless 0–1 fraction, written by the engine; the arithmetic stays in CSS so it re-solves for free on resize and for the shorter mobile tracks. */ .cine-section { position: absolute; inset-inline: 0; top: calc(var(--at, .5) * (var(--cine-track-height) - 100vh) + 50vh); translate: 0 -50%; min-height: 40vh; display: grid; align-content: center; opacity: 0; visibility: hidden; pointer-events: none; } .cine-section.is-live { visibility: visible; pointer-events: auto; } /* Side zones. The map owns the middle 55% of the screen at all times. */ .align-start { padding-inline-start: 6vw; padding-inline-end: 52vw; } .align-end { padding-inline-start: 52vw; padding-inline-end: 6vw; } .align-end .cine-section-inner { text-align: start; } .cine-section-inner { max-width: 42vw; } .cine-heading { margin: 0 0 1rem; font-family: var(--font-display); font-size: clamp(1.9rem, .9rem + 3.1vw, 4.2rem); font-weight: 300; line-height: 1.08; letter-spacing: -.015em; color: var(--bone-100); text-shadow: 0 2px 34px rgba(16, 18, 8, .8); } body.rtl .cine-heading { line-height: 1.28; letter-spacing: 0; font-weight: 400; } .cine-body { margin: 0; max-width: 38ch; font-size: clamp(.92rem, .85rem + .3vw, 1.05rem); line-height: 1.85; color: rgba(240, 235, 222, .82); text-shadow: 0 1px 20px rgba(16, 18, 8, .85); } /* == 7 Stats ============================================================== */ /* The one centred block, and the only one that dims the map far enough to be read rather than glanced at. */ .cine-section-stats { padding-inline: 6vw; text-align: center; justify-items: center; } .cine-section-stats .cine-section-inner { max-width: 1100px; width: 100%; } .cine-section-stats .cine-label { margin-bottom: 2.6rem; } .cine-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 2.4rem 1.5rem; } .cine-stat { display: grid; gap: .4rem; } .cine-stat-number { font-family: var(--font-display); font-size: clamp(2.6rem, 1.4rem + 4vw, 5.4rem); font-weight: 200; line-height: 1; color: var(--bone-100); font-variant-numeric: tabular-nums; } .cine-stat-label { font-size: .76rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(227, 213, 189, .55); } body.rtl .cine-stat-label { letter-spacing: 0; text-transform: none; font-size: .88rem; } /* == 8 Call to action ===================================================== */ .cine-cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; } .cine-btn { display: inline-flex; align-items: center; padding: .9rem 2rem; border-radius: var(--radius-pill); border: 1px solid transparent; font-size: .95rem; font-weight: 600; text-decoration: none; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .14s var(--ease); } .cine-btn:active { transform: translateY(1px); } .cine-btn-solid { background: var(--bone-200); color: var(--bark-900); } .cine-btn-solid:hover { background: #fff; color: var(--bark-950); } /* Over a pale stretch of map a hairline border alone disappears, so the outline button carries a dark backdrop of its own. */ .cine-btn-line { border-color: rgba(227, 213, 189, .5); color: var(--bone-100); background: rgba(16, 18, 8, .5); backdrop-filter: blur(8px); } .cine-btn-line:hover { border-color: var(--bone-200); background: rgba(16, 18, 8, .72); } /* == 9 Handover to the rest of the page =================================== */ /* The parchment page rises over the held final frame instead of cutting. */ .cine-after { position: relative; z-index: 5; margin-top: -18vh; padding-top: var(--cine-veil, calc(18vh + 3.5rem)); /* Two layers, both sized in absolute terms rather than as a percentage of this block. A single `transparent → paper 58%` gradient stretches across the *whole* of the content below, which on a long page means the map is still showing through the tour grid. The fade is a fixed band at the top; everything under it is solid parchment. */ background-image: linear-gradient(to bottom, transparent, var(--paper)), linear-gradient(var(--paper), var(--paper)); background-size: 100% var(--cine-veil, calc(18vh + 3.5rem)), 100% calc(100% - var(--cine-veil, calc(18vh + 3.5rem)) + 1px); background-position: top left, bottom left; background-repeat: no-repeat; } .cine-after .home-search { margin-top: 0; } /* == 10 Reduced motion, no-JS and failure fallbacks ======================= */ /* Set by the engine when the sequence cannot or should not run. The track collapses, every section becomes an ordinary stacked block, and the final frame stands as a still behind them. */ .cine.is-static { margin-top: calc(var(--header-h) * -1); } .cine.is-static .cine-loader { display: none; } .cine.is-static .cine-stage { position: absolute; inset: 0 0 auto; height: 100%; clip-path: none; } .cine.is-static .cine-dark { position: absolute; opacity: .58; } .cine.is-static .cine-marquee { display: none; } .cine.is-static .cine-track { height: auto; display: grid; gap: clamp(3rem, 8vw, 7rem); padding-block: clamp(3rem, 8vw, 7rem); } .cine.is-static .cine-section { position: relative; top: auto; translate: none; opacity: 1; visibility: visible; pointer-events: auto; min-height: 0; } .cine.is-static .align-start, .cine.is-static .align-end { padding-inline: 6vw; } .cine.is-static .cine-section-inner { max-width: 46ch; } .cine.is-static .cine-section-stats .cine-section-inner { max-width: 1100px; } .cine.is-static .cine-after { margin-top: 0; padding-top: 0; background: var(--paper); } @media (prefers-reduced-motion: reduce) { .cine-word, .cine-hero-tagline, .cine-scroll-cue { animation: none; opacity: 1; transform: none; } .cine-scroll-cue i::after { animation: none; } .cine-loader-glyph { animation: none; opacity: 1; } } /* Before the engine runs, nothing must be stuck invisible: if scripts never execute, the sections show as a plain stack. */ .no-cine .cine-loader { display: none; } .no-cine .cine-section { opacity: 1; visibility: visible; pointer-events: auto; } /* == 11 Responsive ======================================================== */ /* Below the tablet break the side zones collapse — there is no room for a 40vw column beside the map — so copy centres over a heavier scrim and the track shortens so the sequence never feels like a chore on a phone. */ @media (max-width: 900px) { .cine { --cine-track-height: 620vh; } .align-start, .align-end { padding-inline: 7vw; } .cine-section-inner { max-width: none; } .cine-section { text-align: center; justify-items: center; } .cine-section .cine-section-inner { background: rgba(16, 18, 8, .58); backdrop-filter: blur(10px); border-radius: var(--radius-lg); padding: 1.8rem 1.4rem; } .cine-section-stats .cine-section-inner { background: none; backdrop-filter: none; padding: 0; } .cine-body { max-width: none; margin-inline: auto; } .cine-cta-row { justify-content: center; } .cine-marquee-text { font-size: 19vw; } .cine-hero-inner { max-width: none; } .cine-hero-heading { font-size: clamp(2.6rem, 1rem + 11vw, 5rem); } .cine-stats { gap: 1.8rem 1rem; } } @media (max-width: 560px) { .cine { --cine-track-height: 520vh; } .cine-stats { grid-template-columns: repeat(2, 1fr); } .cine-stat-number { font-size: clamp(2.2rem, 1rem + 8vw, 3.4rem); } .cine-cta-row { flex-direction: column; width: 100%; } .cine-btn { justify-content: center; } } /* == Short landscape windows =============================================== A laptop at 1440x820, or any window with the devtools open, gives the hero barely 700px of usable height. The mark, the label and three lines of display type do not fit in that at full size, and the panel starts scrolling its own content behind the cue. Nothing here changes the typeface, the weights or the treatment — only the scale, and only once the height genuinely runs out. The `vw` floors are left alone so a narrow phone, which is tall, is untouched. */ @media (max-height: 900px) and (min-width: 700px) { /* The mark keeps its full size — it is the first thing on the page and shrinking it was never what bought the room. Only the space under it closes up. */ .cine-hero-logo { margin-bottom: clamp(1.2rem, 4vh, 2.6rem); } .cine-label { margin-bottom: .9rem; } .cine-hero-heading { font-size: clamp(2.6rem, 1rem + 6.4vw, 6.4rem); } body.rtl .cine-hero-heading { font-size: clamp(2.2rem, 1rem + 4.2vw, 4.6rem); } } @media (max-height: 720px) and (min-width: 700px) { /* Still full width; at this height the headline is doing the yielding. */ .cine-hero-logo { margin-bottom: clamp(.7rem, 2.5vh, 1.6rem); } .cine-hero-heading { font-size: clamp(2.2rem, 1rem + 5vw, 5rem); } body.rtl .cine-hero-heading { font-size: clamp(1.9rem, 1rem + 3.4vw, 3.7rem); } }