/* ============================================================ Erbila — landing The Studio: warm grey + white + lime, full-bleed hero, 50/50 work slider. Wix-Studio-inspired composition. ============================================================ */ :root { /* Surfaces */ --bg: #7E7E80; /* warm grey — hero img bg + view 3 + footer */ --bg-light: #F4F2EE; /* off-white work section */ --bg-deep: #14141A; /* near-black masthead scrim on scroll */ /* Inks (default = white-on-grey/image) */ --ink: #FFFFFF; --ink-2: rgba(255,255,255,0.78); --muted: rgba(255,255,255,0.58); --rule: rgba(255,255,255,0.22); --rule-2: rgba(255,255,255,0.34); /* Inks for white surface (scoped inside .work) */ --ink-d: #18181C; --ink-d-2: rgba(24,24,28,0.72); --muted-d: rgba(24,24,28,0.5); --rule-d: rgba(24,24,28,0.12); --rule-d-2: rgba(24,24,28,0.22); /* Accents */ --accent: #E47148; /* orange — dot/pulse, masthead i, brand */ --accent-2: #FF8A5C; --accent-soft: rgba(228,113,72,0.18); --green: #4ADE80; /* shipped indicator */ --lime: #C8F25E; /* lime — work slider CTA pill */ --lime-2: #B5E044; /* Legacy tokens used by chat widget. The launcher/bubbles need a dark solid surface to stand out on the new warm-grey + white palette. */ --bg-2: rgba(28, 28, 32, 0.94); --bg-3: rgba(40, 40, 46, 0.96); --muted-2: rgba(255, 255, 255, 0.4); /* Type */ --display: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --arab: "Amiri", "Noto Naskh Arabic", serif; /* Layout — gutter scales fluidly through 2K/4K, content max grows on wide screens */ --gutter: clamp(1.25rem, 4vw, 5.5rem); --max: clamp(74rem, 88vw, 96rem); --max-wide: clamp(88rem, 92vw, 110rem); --radius: 14px; --radius-sm: 8px; --pill-r: 999px; --masthead-h: 72px; /* Spacing (legacy + new) */ --s-1: 0.5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2rem; --s-5: 2.5rem; --s-6: 3rem; --s-8: 4rem; } /* ---------- Reset + base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* The document scroller is , not , even though body has overflow-x: hidden. Putting snap on body silently no-ops in Chrome / Firefox / Safari — the viewport scroll never sees it. */ scroll-snap-type: y mandatory; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 1rem; line-height: 1.6; font-weight: 400; font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; max-width: 100%; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } ul { list-style: none; padding: 0; margin: 0; } ::selection { background: var(--ink); color: var(--bg); } .mono { font-family: var(--mono); font-weight: 400; font-size: 0.78em; letter-spacing: 0.02em; color: var(--muted); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* skip link */ .skip { position: absolute; top: 0; inset-inline-start: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; background: var(--ink); color: var(--bg-deep); border-radius: var(--radius-sm); z-index: 100; } .skip:focus { width: auto; height: auto; margin: 0; clip: auto; inset-inline-start: 1rem; top: 1rem; padding: 0.5rem 1rem; } /* ---------- Masthead, wordmark, nav, lang-switch ---------- Moved to assets/css/masthead.css so the docx-translator and any future free tool share the exact same chrome. Edit that file instead — every public page s it. */ @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.85); } } /* ---------- Pill button (new system) ---------- */ .pill { display: inline-flex; align-items: center; gap: 0.65rem; padding: 0.85rem 1.4rem; border-radius: var(--pill-r); border: 0; font-family: var(--sans); font-size: clamp(0.95rem, 1.05vw, 1.15rem); font-weight: 500; letter-spacing: -0.005em; text-decoration: none; cursor: pointer; white-space: nowrap; line-height: 1; transition: transform 200ms cubic-bezier(.2,.8,.2,1), background 200ms ease, box-shadow 200ms ease; } .pill--lg { padding: clamp(1.05rem, 1.3vw, 1.4rem) clamp(1.7rem, 2vw, 2.4rem); font-size: clamp(1.02rem, 1.2vw, 1.3rem); } .pill--accent { /* white pill — for hero CTA over image */ background: #FFFFFF; color: var(--ink-d); box-shadow: 0 8px 24px -12px rgba(0,0,0,0.35); } .pill--accent:hover { transform: translateY(-1px); box-shadow: 0 14px 32px -12px rgba(0,0,0,0.45); } .pill--lime { /* lime pill — for work slider CTA */ background: var(--lime); color: var(--bg-deep); } .pill--lime:hover { background: var(--lime-2); transform: translateY(-1px); } .pill--cta { /* CTA on grey View 3 — bright, white-on-deep */ background: var(--bg-deep); color: var(--ink); } .pill--cta:hover { background: var(--accent); color: var(--bg-deep); transform: translateY(-1px); box-shadow: 0 14px 30px -10px var(--accent); } .pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: pulse 2.4s cubic-bezier(.4,0,.6,1) infinite; flex-shrink: 0; } .pill--cta:hover .pill__dot { background: var(--bg-deep); box-shadow: 0 0 8px rgba(20,20,26,0.4); } .pill__arrow { display: inline-block; font-size: 1.05em; line-height: 1; flex-shrink: 0; transition: transform 200ms cubic-bezier(.2,.8,.2,1); } .pill:hover .pill__arrow { transform: translateX(3px); } [dir="rtl"] .pill__arrow { transform: scaleX(-1); } [dir="rtl"] .pill:hover .pill__arrow { transform: scaleX(-1) translateX(3px); } /* ---------- Legacy buttons (work.php still uses .btn) ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.85rem 1.2rem; border-radius: var(--radius-sm); font-weight: 500; font-size: 0.94rem; letter-spacing: -0.005em; cursor: pointer; transition: all 200ms cubic-bezier(.2,.8,.2,1); border: 1px solid transparent; white-space: nowrap; } .btn--lg { padding: 1.05rem 1.5rem; font-size: 1rem; } .btn--primary { background: var(--ink); color: var(--bg-deep); } .btn--primary:hover { background: var(--accent); color: var(--ink); transform: translateY(-1px); box-shadow: 0 12px 28px -10px var(--accent); } .btn--ghost { color: var(--ink); border-color: var(--rule-2); background: transparent; } .btn--ghost:hover { color: var(--ink); border-color: var(--ink); } .btn__arrow { transition: transform 200ms cubic-bezier(.2,.8,.2,1); } .btn:hover .btn__arrow { transform: translateX(2px); } /* ---------- Section scaffolding (legacy — work.php uses .section__inner) ---------- */ .section__inner { max-width: var(--max); margin: 0 auto; padding: clamp(4rem, 8vw, 7rem) var(--gutter); position: relative; z-index: 1; } /* ============================================================ HERO — full-bleed image + corner overlays ============================================================ */ .hero { position: relative; width: 100%; height: 100vh; height: 100svh; min-height: 540px; background: var(--bg); overflow: hidden; isolation: isolate; /* Slide-style snap target. */ scroll-snap-align: start; scroll-snap-stop: always; /* Fixed masthead overlays the top of the hero naturally; hero__overlay padding-top clears it. No max-height — let it fill whatever the viewport actually is, on any screen size. */ } .hero__media { position: absolute; inset: 0; z-index: 0; } .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Asymmetric scrim — darkens the photo only where text sits (top-left wordmark, bottom band for tagline + CTA), leaving the center-right illustration to breathe. Sits above the img, below .hero__overlay. */ .hero__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.6) 100%), radial-gradient(ellipse 70% 60% at top left, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 60%); } .hero__overlay { position: relative; z-index: 1; width: 100%; height: 100%; display: grid; grid-template-rows: auto 1fr auto; padding: calc(var(--masthead-h) + clamp(1rem, 3vh, 3.5rem)) clamp(1.5rem, 5vw, 7rem) clamp(2rem, 4vh, 4.75rem); color: var(--ink); pointer-events: none; } .hero__overlay > * { pointer-events: auto; } .hero__display { font-family: var(--display); font-weight: 700; /* Smaller than a pure brand-statement: the wordmark is still the visual anchor, but the tagline below it is now the loudest piece of copy. */ font-size: clamp(3rem, 10.5vw, 16rem); line-height: 0.85; letter-spacing: -0.04em; margin: 0; color: var(--ink); align-self: start; user-select: none; /* Three-layer shadow: omnidirectional halo for legibility on bright spots the scrim can't fully cover, plus the original directional drop shadows for weight against the stone texture. */ text-shadow: 0 0 24px rgba(0,0,0,0.55), 0 8px 28px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.32); } /* Lowercase i in the brand word, drawn entirely with CSS so we get the right proportions (Space Grotesk's dotless-ı renders too short). The wrapper is sized to cap-height; ::before draws a sturdy stem from baseline up to ~x-height; the orange E-mark sits as the dot above. */ .hero__display-i { position: relative; display: inline-block; width: 0.18em; height: 0.7em; /* matches Space Grotesk Bold cap-height */ vertical-align: baseline; margin: 0 0.06em; } .hero__display-i::before { /* The i stem — a sturdy vertical bar in the heading's white. */ content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 0.5em; /* x-height — clearly lowercase, not stunted */ background: currentColor; border-radius: 0.04em; } .hero__display-dot { position: absolute; /* Bottom of mark sits where the natural i-dot would: just above x-height. */ bottom: 0.55em; left: 50%; transform: translateX(-50%); width: 0.16em; height: 0.16em; border-radius: 0.035em; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--bg-deep); display: grid; place-items: center; /* Don't inherit the heading's text-shadow on the SVG glyph. */ text-shadow: none; box-shadow: 0 3px 8px -3px var(--accent), 0 1px 3px rgba(0,0,0,0.2); } .hero__display-dot svg { width: 70%; height: 70%; display: block; } .hero__bottom { align-self: end; display: grid; grid-template-columns: 1fr auto; /* Generous horizontal gap so the tagline (left) and the CTA stack (right) never crowd each other — especially with Arabic / Kurdish text that reads RTL within an LTR layout. */ gap: clamp(2rem, 5vw, 6rem); align-items: end; } .hero__tag { margin: 0; /* Promoted to primary headline — sits noticeably larger than before so the actual sales message wins the eye over the brand wordmark. */ font-size: clamp(1.6rem, 4vw, 4.5rem); line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; max-width: 26ch; color: var(--ink); text-shadow: 0 0 18px rgba(0,0,0,0.55), 0 4px 18px rgba(0,0,0,0.45), 0 2px 5px rgba(0,0,0,0.32); } /* Unified style — no italic emphasis, no weight/color contrast. Both lines read as one solid voice. */ .hero__tag .accent { color: inherit; font-style: normal; font-weight: inherit; } .hero__tag .hero__heading-2 { display: block; color: inherit; font-weight: inherit; } .hero__cta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.85rem; text-align: end; } .hero__cta-status { font-size: clamp(0.7rem, 0.85vw, 1rem); color: var(--ink-2); letter-spacing: 0.1em; text-transform: uppercase; text-shadow: 0 2px 8px rgba(0,0,0,0.5); } /* Scroll cue — sits at bottom-center of the hero, between the tagline (left) and the CTA stack (right). LTR-pinned with the rest of the hero composition, so it never collides with RTL text flow. */ .hero__scroll { position: absolute; left: 50%; bottom: clamp(1.25rem, 2.5vh, 2rem); transform: translateX(-50%); z-index: 2; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule); background: rgba(255,255,255,0.06); color: var(--ink); text-decoration: none; opacity: 0.85; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: opacity 200ms ease, background 200ms ease, border-color 200ms ease; } .hero__scroll:hover { opacity: 1; background: rgba(255,255,255,0.14); border-color: var(--rule-2); } .hero__scroll svg { width: 20px; height: 20px; display: block; animation: heroScrollBounce 1.8s ease-in-out infinite; } @keyframes heroScrollBounce { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } } @media (max-width: 760px) { .hero__bottom { grid-template-columns: 1fr; gap: 1.5rem; } .hero__cta { align-items: flex-start; text-align: start; } .hero__display { font-size: clamp(2.75rem, 17vw, 5.5rem); } .hero__tag { font-size: clamp(1.4rem, 6vw, 2.2rem); max-width: none; } /* On narrow screens the hero__bottom stack fills the lower viewport; the scroll cue would overlap the CTA pill, so hide it. */ .hero__scroll { display: none; } } @media (prefers-reduced-motion: reduce) { .hero__scroll svg { animation: none; } } [dir="rtl"] .hero__cta { align-items: flex-start; text-align: start; } @media (min-width: 761px) { [dir="rtl"] .hero__bottom { grid-template-columns: auto 1fr; } [dir="rtl"] .hero__cta { align-items: flex-end; text-align: end; } } /* ============================================================ WORK — Wix-style 50/50 slider on white ============================================================ */ .work { background: var(--bg-light); color: var(--ink-d); /* Slide-style snap target. */ min-height: 100vh; min-height: 100svh; scroll-snap-align: start; scroll-snap-stop: always; /* scope dark tokens for everything inside .work */ --ink: var(--ink-d); --ink-2: var(--ink-d-2); --muted: var(--muted-d); --rule: var(--rule-d); --rule-2: var(--rule-d-2); } .slider { position: relative; width: 100%; min-height: 100vh; min-height: 100svh; outline: none; } .slider:focus-visible { box-shadow: inset 0 0 0 2px var(--ink-d); } .slider__track { list-style: none; margin: 0; padding: 0; position: relative; width: 100%; min-height: 100vh; min-height: 100svh; } .slide { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 600ms ease, visibility 0s linear 600ms; } .slide[data-active] { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 600ms ease, visibility 0s; z-index: 1; } .slide__media { position: relative; /* Warm grey backdrop — matches the hero / View 3 palette so the contained image sits on the same surface as the rest of the page. */ background: var(--bg); overflow: hidden; display: grid; place-items: center; padding: clamp(1.25rem, 3vw, 3rem); } .slide__media img, .slide__media video { width: 100%; height: 100%; object-fit: contain; display: block; } .slide__placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,0.5); font-size: 1rem; letter-spacing: 0.04em; } .slide__body { display: grid; grid-template-rows: auto 1fr auto; gap: 1.5rem; /* Top padding clears the fixed masthead so caption + counter sit below it. */ padding: calc(var(--masthead-h) + clamp(1rem, 3vw, 3rem)) clamp(1.75rem, 5vw, 6rem) clamp(2rem, 5vw, 6.5rem); align-content: stretch; } .slide__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .slide__cap { font-family: var(--mono); font-size: clamp(0.78rem, 0.9vw, 1rem); letter-spacing: 0.04em; color: var(--muted-d); text-transform: uppercase; } .slide__counter { font-family: var(--mono); font-size: clamp(0.78rem, 0.9vw, 1rem); letter-spacing: 0.04em; color: var(--ink-d-2); font-weight: 500; } .slide__title { font-family: var(--display); font-size: clamp(2rem, 5.5vw, 6.5rem); line-height: 1.05; letter-spacing: -0.025em; font-weight: 600; margin: 0; align-self: center; color: var(--ink-d); } .slide__sum { margin: 0.75rem 0 0; font-size: clamp(1rem, 1.5vw, 1.4rem); line-height: 1.55; color: var(--ink-d-2); max-width: 56ch; align-self: start; } .slide__body .pill { justify-self: start; align-self: end; } .slider__nav { position: absolute; /* Sit below the fixed masthead so the buttons aren't hidden. */ top: calc(var(--masthead-h) + clamp(0.75rem, 2vh, 1.5rem)); inset-inline-end: clamp(1.75rem, 5vw, 4rem); display: flex; gap: 0.6rem; z-index: 5; } .slider__btn { width: 44px; height: 44px; border-radius: var(--pill-r); background: transparent; border: 1px solid var(--rule-d-2); color: var(--ink-d); display: grid; place-items: center; cursor: pointer; transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease; padding: 0; } .slider__btn:hover { background: var(--ink-d); color: var(--bg-light); border-color: var(--ink-d); } .slider__btn:focus-visible { outline: 2px solid var(--ink-d); outline-offset: 2px; } [dir="rtl"] .slider__btn svg { transform: scaleX(-1); } .slider__progress { position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: rgba(24,24,28,0.08); z-index: 4; overflow: hidden; } .slider__progress-fill { width: 0%; height: 100%; background: var(--lime); transition: width 80ms linear; } @media (max-width: 880px) { .slide { grid-template-columns: 1fr; grid-template-rows: 50vh auto; } .slide__body { padding: 1.75rem 1.5rem 3.5rem; } .slide__title { font-size: clamp(1.75rem, 7vw, 2.5rem); } .slider__nav { top: auto; bottom: 1.25rem; inset-inline-end: 1.25rem; } .slider__btn { width: 40px; height: 40px; } } /* empty state */ .work--empty { background: var(--bg-light); color: var(--ink-d); padding: clamp(4rem, 10vh, 7rem) var(--gutter); /* Center the small placeholder line vertically in the snap-sized panel. */ display: grid; place-items: center; } .work__empty { display: flex; align-items: center; gap: 0.85rem; justify-content: center; font-size: 0.85rem; color: var(--muted-d); letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--mono); } .work__empty-hint { color: var(--ink-d-2); } /* ============================================================ VIEW 3 — split into snap panels (services / studio / cta+footer) Each panel fills 100vh and snaps to viewport like a slide. ============================================================ */ .view3 { background: var(--bg); color: var(--ink); position: relative; } .view3__panel { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: stretch; /* Top padding clears the fixed masthead at every viewport. */ padding: calc(var(--masthead-h) + clamp(2rem, 5vh, 4.5rem)) var(--gutter) clamp(3rem, 8vh, 6rem); scroll-snap-align: start; scroll-snap-stop: always; } .view3__panel-inner { max-width: var(--max); width: 100%; margin: 0 auto; display: grid; gap: clamp(2.5rem, 6vh, 5rem); } /* Last panel — CTA centered, footer pinned to the bottom of the viewport. */ .view3__panel--end { justify-content: flex-start; padding-bottom: 0; } .view3__panel--end .view3__panel-inner { flex: 1; align-content: center; } .view3__panel--end .foot { /* footer keeps its own internal padding from the .foot rules */ flex-shrink: 0; } /* Block heads (services / studio) */ .block-head { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: clamp(1.5rem, 4vh, 2.5rem); } .block-head__num { color: var(--muted); } .block-head__title { font-family: var(--display); font-size: clamp(2rem, 4.4vw, 5rem); line-height: 1.05; letter-spacing: -0.025em; font-weight: 600; margin: 0; color: var(--ink); } /* ---------- Status panel (on grey) ---------- */ .status { background: rgba(255,255,255,0.07); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.5rem 1.6rem; position: relative; overflow: hidden; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .status__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.95rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--rule); } .status__title { color: var(--ink-2); font-size: 0.8rem; } .status__live { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.2rem 0.55rem; background: rgba(74, 222, 128, 0.14); border: 1px solid rgba(74, 222, 128, 0.4); border-radius: var(--pill-r); color: var(--green); } .status__live .mono { color: var(--green); font-size: 0.72rem; } .status__live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite; } .status__section { margin-bottom: 1.1rem; } .status__section:last-of-type { margin-bottom: 0; } .status__label { display: block; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.66rem; color: var(--muted); margin-bottom: 0.7rem; } .status__list { display: flex; flex-direction: column; gap: 0.6rem; } .status__list li { display: flex; align-items: center; gap: 0.7rem; font-size: 0.95rem; transition: background 400ms ease, padding 400ms ease; } .status__list li.is-promoting { background: var(--accent-soft); border-radius: var(--radius-sm); padding: 0.45rem 0.55rem; margin: -0.45rem -0.55rem; } .status__row { flex: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; min-width: 0; } .status__name { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .status__meta { color: var(--muted); font-size: 0.72rem; flex-shrink: 0; } .status__bullet { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--accent); display: grid; place-items: center; flex-shrink: 0; position: relative; } .status__bullet::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); animation: pulse 1.8s cubic-bezier(.4,0,.6,1) infinite; } .status__bullet--check { border-color: rgba(74, 222, 128, 0.55); background: rgba(74, 222, 128, 0.14); color: var(--green); } .status__bullet--check::before { display: none; } [data-state="shipped"] .status__name { color: var(--ink-2); } .status__foot { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px dashed var(--rule); display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .status__avail { font-size: 0.95rem; color: var(--ink); } .status { opacity: 0; transform: translateY(8px); transition: opacity 600ms ease, transform 600ms cubic-bezier(.2,.8,.2,1); } .status.is-ready { opacity: 1; transform: none; } /* ---------- Services (on grey) ---------- */ .services__list { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--rule); } @media (min-width: 40rem) { .services__list { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 64rem) { .services__list { grid-template-columns: repeat(4, 1fr); } } .service { padding: 1.75rem 1.5rem 2rem; display: flex; flex-direction: column; gap: 0.55rem; border-bottom: 1px solid var(--rule); border-inline-end: 1px solid var(--rule); transition: background 220ms ease; } @media (min-width: 64rem) { .services__list .service:nth-child(4n) { border-inline-end: 0; } .services__list .service:nth-last-child(-n+4) { border-bottom: 0; } } @media (min-width: 40rem) and (max-width: 63.99rem) { .services__list .service:nth-child(2n) { border-inline-end: 0; } .services__list .service:nth-last-child(-n+2) { border-bottom: 0; } } @media (max-width: 39.99rem) { .service { border-inline-end: 0; } .services__list .service:last-child { border-bottom: 0; } } .service:hover { background: rgba(255,255,255,0.06); } .service__num { color: var(--accent); } .service__title { font-size: clamp(1.2rem, 1.4vw, 1.5rem); font-weight: 600; margin: 0.3rem 0 0; letter-spacing: -0.012em; color: var(--ink); } .service__body { margin: 0; font-size: clamp(0.95rem, 1.05vw, 1.1rem); color: var(--ink-2); line-height: 1.55; } /* ---------- Studio ---------- */ .studio__body p { font-size: clamp(1.1rem, 1.6vw, 1.5rem); line-height: 1.6; color: var(--ink-2); margin: 0 0 1rem; max-width: 48rem; } .studio__body em { font-style: italic; color: var(--ink); font-weight: 500; } /* ---------- Free tools (on grey) ---------- Card-style tiles. auto-fit grid so a single tool fills its row, and 2+ tools split cleanly. Self-contained — does not share .services rules. */ .tools__intro { margin: 0.4rem 0 0; color: var(--ink-2); font-size: clamp(0.95rem, 1.1vw, 1.1rem); max-width: 42rem; } .tools__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 40rem) { .tools__list { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; } } @media (min-width: 64rem) { .tools__list { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } } .tool { border: 1px solid var(--rule); border-radius: var(--radius); background: rgba(255,255,255,0.04); overflow: hidden; transition: background 220ms ease, border-color 220ms ease, transform 220ms ease; } .tool:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); transform: translateY(-2px); } .tool__link { display: flex; flex-direction: column; color: inherit; text-decoration: none; } .tool__media { aspect-ratio: 800 / 436; overflow: hidden; background: rgba(0,0,0,0.18); border-bottom: 1px solid var(--rule); } .tool__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 480ms cubic-bezier(.2,.8,.2,1); } .tool:hover .tool__media img { transform: scale(1.03); } .tool__text { display: flex; flex-direction: column; gap: 0.45rem; padding: 1.15rem 1.2rem 1.1rem; } .tool__num { color: var(--accent); font-size: 0.74rem; } .tool__title { font-size: clamp(1rem, 1.05vw, 1.2rem); font-weight: 600; margin: 0.2rem 0 0; letter-spacing: -0.012em; color: var(--ink); } .tool__body { margin: 0; font-size: clamp(0.86rem, 0.92vw, 0.98rem); color: var(--ink-2); line-height: 1.5; } .tool__cta { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.55rem; color: var(--accent); font-size: 0.72rem; letter-spacing: 0.02em; text-transform: lowercase; } .tool__cta .pill__arrow { transition: transform 220ms ease; } .tool:hover .tool__cta .pill__arrow { transform: translateX(3px); } [dir="rtl"] .tool:hover .tool__cta .pill__arrow { transform: scaleX(-1) translateX(3px); } /* ---------- CTA (in View 3 + legacy work.php) ---------- */ .cta { text-align: center; padding: clamp(2rem, 5vh, 3.5rem) 0; border-top: 1px solid var(--rule); } .cta__inner { /* legacy — work.php */ text-align: center; max-width: 48rem; margin: 0 auto; } .cta__num { display: block; margin-bottom: 1rem; color: var(--muted); } .cta__heading { font-family: var(--display); font-size: clamp(2rem, 4.8vw, 5.5rem); line-height: 1.05; letter-spacing: -0.025em; margin: 0 auto 1.25rem; font-weight: 600; max-width: 24ch; color: var(--ink); } .cta__sub { color: var(--ink-2); font-size: clamp(1rem, 1.4vw, 1.35rem); margin: 0 auto clamp(1.5rem, 4vh, 2.75rem); max-width: 44rem; } .cta__actions { display: inline-flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; justify-content: center; } .cta__email { color: var(--ink-2); font-size: 0.95rem; text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 4px; transition: color 180ms ease, text-decoration-color 180ms ease; } .cta__email:hover { color: var(--ink); text-decoration-color: var(--ink); } .cta__btn-dot { /* legacy — work.php */ width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: pulse 2.4s cubic-bezier(.4,0,.6,1) infinite; } /* ---------- Footer ---------- */ .foot { background: var(--bg); border-top: 1px solid var(--rule); } .foot__inner { max-width: var(--max); margin: 0 auto; padding: 2rem var(--gutter) 2.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .foot__brand { display: inline-flex; align-items: baseline; gap: 0.7rem; color: var(--ink); font-weight: 500; } .foot__mark { font-family: var(--arab); font-size: 1.25rem; color: var(--ink-2); } .foot__copy { color: var(--ink-2); } @media (max-width: 640px) { .foot__inner { flex-direction: column; align-items: flex-start; gap: 0.85rem; } [dir="rtl"] .foot__inner { align-items: flex-end; } } /* ============================================================ RTL polish ============================================================ */ [dir="rtl"] .btn__arrow, [dir="rtl"] .next__hint::before { transform: scaleX(-1); } [dir="rtl"] .btn:hover .btn__arrow { transform: scaleX(-1) translateX(2px); } [dir="rtl"] .hero__display { letter-spacing: 0; } [dir="rtl"] .nav > a:not(.nav__cta), [dir="rtl"] .slide__cap, [dir="rtl"] .slide__counter, [dir="rtl"] .hero__cta-status { letter-spacing: 0.04em; } body.lang-ar, body.lang-ku { font-feature-settings: normal; } body.lang-ar .hero__display, body.lang-ku .hero__display, body.lang-ar .block-head__title, body.lang-ku .block-head__title, body.lang-ar .slide__title, body.lang-ku .slide__title, body.lang-ar .cta__heading, body.lang-ku .cta__heading { letter-spacing: 0; line-height: 1.15; } /* ============================================================ Scroll-reveal animations IntersectionObserver toggles .is-revealed on .hero / .work / .view3__panel as each enters the viewport. Children fade + rise into place with a small stagger. Gated behind html.js so no-JS users see content unanimated. ============================================================ */ .js .hero__display, .js .hero__tag, .js .hero__cta, .js .work .slide__top, .js .work .slide__title, .js .work .slide__sum, .js .work .slide__body .pill, .js .work .slider__nav, .js .view3__panel .block-head, .js .view3__panel .status, .js .view3__panel .services__list .service, .js .view3__panel .tools__list .tool, .js .view3__panel .studio__body p, .js .view3__panel .cta__num, .js .view3__panel .cta__heading, .js .view3__panel .cta__sub, .js .view3__panel .cta__actions { opacity: 0; transform: translateY(28px); transition: opacity 1400ms cubic-bezier(.2,.8,.2,1), transform 1400ms cubic-bezier(.2,.8,.2,1); } .js .is-revealed .hero__display, .js .is-revealed .hero__tag, .js .is-revealed .hero__cta, .js .is-revealed .slide__top, .js .is-revealed .slide__title, .js .is-revealed .slide__sum, .js .is-revealed .slide__body .pill, .js .is-revealed .slider__nav, .js .is-revealed .block-head, .js .is-revealed .status, .js .is-revealed .services__list .service, .js .is-revealed .tools__list .tool, .js .is-revealed .studio__body p, .js .is-revealed .cta__num, .js .is-revealed .cta__heading, .js .is-revealed .cta__sub, .js .is-revealed .cta__actions { opacity: 1; transform: none; } /* Stagger — heading first, body next, button last */ .js .is-revealed .hero__display { transition-delay: 100ms; } .js .is-revealed .hero__tag { transition-delay: 380ms; } .js .is-revealed .hero__cta { transition-delay: 640ms; } .js .is-revealed .slide__top { transition-delay: 120ms; } .js .is-revealed .slide__title { transition-delay: 320ms; } .js .is-revealed .slide__sum { transition-delay: 540ms; } .js .is-revealed .slide__body .pill { transition-delay: 760ms; } .js .is-revealed .slider__nav { transition-delay: 920ms; } .js .is-revealed .block-head { transition-delay: 120ms; } .js .is-revealed .status { transition-delay: 320ms; } .js .is-revealed .services__list .service:nth-child(1) { transition-delay: 380ms; } .js .is-revealed .services__list .service:nth-child(2) { transition-delay: 540ms; } .js .is-revealed .services__list .service:nth-child(3) { transition-delay: 700ms; } .js .is-revealed .services__list .service:nth-child(4) { transition-delay: 860ms; } .js .is-revealed .tools__list .tool:nth-child(1) { transition-delay: 380ms; } .js .is-revealed .tools__list .tool:nth-child(2) { transition-delay: 540ms; } .js .is-revealed .tools__list .tool:nth-child(3) { transition-delay: 700ms; } .js .is-revealed .tools__list .tool:nth-child(4) { transition-delay: 860ms; } .js .is-revealed .studio__body p:nth-child(1) { transition-delay: 380ms; } .js .is-revealed .studio__body p:nth-child(2) { transition-delay: 580ms; } .js .is-revealed .cta__num { transition-delay: 120ms; } .js .is-revealed .cta__heading { transition-delay: 320ms; } .js .is-revealed .cta__sub { transition-delay: 540ms; } .js .is-revealed .cta__actions { transition-delay: 760ms; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } .status { opacity: 1; transform: none; } .slide { transition: none; } /* Skip reveal hide-state — content visible immediately. */ .js .hero__display, .js .hero__tag, .js .hero__cta, .js .slide__top, .js .slide__title, .js .slide__sum, .js .slide__body .pill, .js .slider__nav, .js .block-head, .js .services__list .service, .js .tools__list .tool, .js .studio__body p, .js .cta__num, .js .cta__heading, .js .cta__sub, .js .cta__actions { opacity: 1; transform: none; } } /* ---------- Floating chat launcher — hide while hero is in view ---------- The hero already has a "Chat with the studio" pill. The floating launcher only appears once the user scrolls past the hero, so we never have two chat triggers visible at once. */ .cw-launcher { transition: opacity 240ms ease, transform 240ms cubic-bezier(.2,.8,.2,1); } .cw-launcher.is-hidden-on-hero { opacity: 0; pointer-events: none; transform: translateY(16px); } /* ---------- When chat is open, get the hero's CTA out of the way ---------- The hero's "Chat with the studio" pill triggers the same chat. Once the panel is open, the pill is redundant AND on smaller viewports it sits right under the panel, which looks broken. */ body:has(.cw-panel.is-open) .hero__cta { opacity: 0; pointer-events: none; transition: opacity 200ms ease; } /* ============================================================ Project detail page (work.php) — fresh class names (.proj-*) so nothing collides with the homepage's .work slider rules. Warm grey + white, identical scheme to the hero. ============================================================ */ /* 404 / empty state */ .proj-empty { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; padding: calc(var(--masthead-h) + 2rem) var(--gutter) 2rem; scroll-snap-align: start; scroll-snap-stop: always; } .proj-empty__num { color: var(--muted); display: block; margin-bottom: 1rem; } .proj-empty__h { font-family: var(--display); font-size: clamp(1.6rem, 4vw, 2.6rem); margin: 0 0 1rem; color: var(--ink); } .proj-empty__p { color: var(--ink-2); margin: 0 0 2rem; } /* Slide 1: 2-column stage — info left, media right, edge to edge */ .proj-stage { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; scroll-snap-align: start; scroll-snap-stop: always; } .proj-stage--solo { grid-template-columns: minmax(0, 1fr); align-items: center; } @media (max-width: 880px) { /* Slider anchored at the bottom; info hugs the slider from above with a 1fr top spacer absorbing the rest. Bumped padding-top so info has real breathing room from the fixed masthead, not just a 2px sliver. */ .proj-stage { /* Stage fits the viewport — slider stays where it is. Info gets its breathing room from the masthead via the bumped padding-top (4.5rem instead of 3.25rem). position:relative so the Visit link below can absolutely-position itself against the stage. padding-bottom reserves space for the standalone Visit pill so it doesn't overlap the slider's caption / dots row. */ position: relative; min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; padding-top: calc(env(safe-area-inset-top, 0px) + 4.5rem); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 3.5rem); gap: 0.85rem; } .proj-stage--solo { grid-template-rows: auto; padding-top: calc(env(safe-area-inset-top, 0px) + 4.5rem); } } /* Left column: title + meta + summary + live link */ .proj-info { display: flex; flex-direction: column; justify-content: center; gap: 1.25rem; padding: calc(var(--masthead-h) + clamp(2rem, 5vh, 4rem)) clamp(1.75rem, 5vw, 5rem) clamp(2rem, 5vh, 4rem); color: var(--ink); } .proj-info__back { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ink-2); font-size: 0.92rem; text-decoration: none; align-self: flex-start; margin-bottom: 0.5rem; transition: color 180ms ease; } .proj-info__back:hover { color: var(--ink); } .proj-info__meta { display: flex; gap: 0.6rem; flex-wrap: wrap; color: var(--ink-2); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; margin: 0; } .proj-info__meta > span:not(:last-child)::after { content: '·'; margin-inline-start: 0.6rem; color: rgba(255, 255, 255, 0.32); } .proj-info__title { font-family: var(--display); font-size: clamp(2rem, 5vw, 5rem); line-height: 1.02; letter-spacing: -0.03em; font-weight: 600; margin: 0; color: var(--ink); text-shadow: 0 6px 24px rgba(0, 0, 0, 0.32); } .proj-info__sum { font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.6; color: rgba(255, 255, 255, 0.78); max-width: 56ch; margin: 0; } .proj-info__live { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink); font-size: 0.92rem; text-decoration: none; align-self: flex-start; padding-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.32); /* URLs always render LTR, even inside an RTL paragraph, so they read naturally instead of getting bidi-flipped. overflow-wrap:anywhere beats word-break:break-all — it only breaks when the line genuinely can't fit, instead of breaking mid-word every time. */ direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; max-width: 100%; transition: color 180ms ease, border-color 180ms ease; } .proj-info__live:hover { color: var(--accent); border-color: var(--accent); } /* Right column: media stage — hosts the work-slider component, full-bleed */ .proj-media { display: flex; align-items: stretch; background: var(--bg); position: relative; isolation: isolate; } .proj-media .work-slider { width: 100%; height: 100vh; height: 100svh; /* Override the standalone-slider decorations from elsewhere in this file */ aspect-ratio: auto; max-height: none; border-radius: 0; box-shadow: none; background: var(--bg); } .proj-media .work-slide__media { display: grid; place-items: center; padding: clamp(1rem, 3vw, 3rem); } .proj-media .work-slide__media img, .proj-media .work-slide__media video { width: 100%; height: 100%; object-fit: contain; display: block; } @media (max-width: 880px) { /* Mobile info-block tightening — placed AFTER the desktop .proj-info rule above so the cascade lands on these (same specificity, source order wins). Earlier copies of this block were silently overridden. */ .proj-info { justify-content: flex-start; /* Masthead clearance now lives on .proj-stage; here we just need a small bottom pad to give the slider some breath from the Visit link. */ padding: 0 clamp(1rem, 5vw, 2rem) 0.85rem; /* Base rhythmic gap. Title and Visit get extra margin-top below to create real typographic hierarchy: tight pairs (back↔eyebrow, title↔summary), wider breath before the title and the CTA. */ gap: 0.5rem; flex-shrink: 0; } .proj-info__back { margin-bottom: 0; font-size: 0.92rem; } .proj-info__meta { font-size: 0.72rem; gap: 0.4rem; } .proj-info__title { font-size: clamp(1.55rem, 6.5vw, 2.3rem); line-height: 1.1; /* +0.6rem on top of the base gap = ~17px of breath before the title. The title is the visual peak; this is the break that signals it. */ margin-top: 0.6rem; } /* Summary clamped to 2 lines so a long copy can't keep pushing the slider down. Full text remains in DOM for screen readers. */ .proj-info__sum { font-size: 0.98rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .proj-info__live { /* Detached from the info stack on mobile — anchored to the bottom of .proj-stage as a centered standalone CTA pill in the padding-bottom space we reserved on the stage. */ position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem); left: 50%; transform: translateX(-50%); margin-top: 0; z-index: 5; font-size: 0.82rem; padding: 0.55rem 1.15rem; /* Quiet dark pill matching the page chrome — no orange flash, no border-bottom underline residue. */ background: rgba(20, 20, 24, 0.85); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; color: var(--ink); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.55); } .proj-info__live:hover { border-color: var(--accent, #E47148); } /* Slider sized to a fixed aspect-ratio capped at ~60vh so it sits as a centered focal block in the viewport, not stretched to fill the whole flex column. The flex-column inside the slide keeps the image on top and the overlay text directly below it. */ .proj-media { flex: 0 0 auto; /* Lift the whole slider+caption up ~2 rows so it tucks closer to the info block above. Info block stays in its current position; only the slider section moves. */ margin-top: -2.5rem; /* Kill the dark fill — with the -2.5rem lift this background was extending up into the info-text area and covering it. */ background: transparent; } .proj-media .work-slider { height: auto; aspect-ratio: 4 / 5; /* was 4/3 — taller container, bigger focal block */ max-height: 75vh; max-height: 75svh; background: transparent; } } /* Slide 2: long-form body copy */ .proj-body { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--masthead-h) + clamp(2rem, 5vh, 4rem)) var(--gutter) clamp(2rem, 6vh, 5rem); scroll-snap-align: start; scroll-snap-stop: always; } .proj-body__inner { width: 100%; max-width: 70ch; margin: 0 auto; } .proj-body p { font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.7; color: rgba(255, 255, 255, 0.82); margin: 0 0 1.25rem; } .proj-body p:last-child { margin-bottom: 0; } /* Slide 3: CTA + footer */ .proj-cta { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding: calc(var(--masthead-h) + clamp(2rem, 5vh, 4rem)) 0 0; scroll-snap-align: start; scroll-snap-stop: always; } .proj-cta__inner { flex: 1; display: grid; align-content: center; text-align: center; padding: 0 var(--gutter); } .proj-cta__num { display: block; margin-bottom: 1rem; color: var(--ink-2); } .proj-cta__heading { font-family: var(--display); font-size: clamp(2rem, 4.5vw, 4.5rem); line-height: 1.05; letter-spacing: -0.025em; font-weight: 600; max-width: 24ch; margin: 0 auto 1rem; color: var(--ink); } .proj-cta__sub { color: rgba(255, 255, 255, 0.78); font-size: clamp(1rem, 1.3vw, 1.2rem); margin: 0 auto clamp(1.5rem, 4vh, 2.5rem); max-width: 44rem; } .proj-cta__actions { display: inline-flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; justify-content: center; } .proj-cta__email { color: rgba(255, 255, 255, 0.78); font-size: 0.95rem; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.32); text-underline-offset: 4px; transition: color 180ms ease, text-decoration-color 180ms ease; } .proj-cta__email:hover { color: var(--ink); text-decoration-color: var(--ink); } .proj-foot { flex-shrink: 0; border-top: 1px solid rgba(255, 255, 255, 0.18); background: var(--bg); } .proj-foot__inner { max-width: var(--max); margin: 0 auto; padding: 1.6rem var(--gutter) 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; color: var(--ink-2); font-weight: 500; } .proj-foot__copy { color: rgba(255, 255, 255, 0.6); } @media (max-width: 640px) { .proj-foot__inner { flex-direction: column; align-items: flex-start; gap: 0.85rem; } [dir="rtl"] .proj-foot__inner { align-items: flex-end; } } .work-slider { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 78vh; background: #050507; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 30px 80px -30px rgba(0,0,0,0.55); isolation: isolate; } .work-slider__track { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; } .work-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 600ms ease, visibility 0s linear 600ms; } .work-slide[data-active] { opacity: 1; visibility: visible; transition: opacity 600ms ease, visibility 0s; } .work-slide__media { position: absolute; inset: 0; /* Center the contained image with breathing room — full image visible, no zoom-crop. Matches the homepage slider's media treatment. */ display: grid; place-items: center; padding: clamp(1.25rem, 3vw, 3rem); } .work-slide__media img, .work-slide__media video { width: 100%; height: 100%; object-fit: contain; display: block; } .work-slide__embed { position: absolute; inset: 0; } .work-slide__embed iframe { width: 100%; height: 100%; border: 0; } .work-slide__overlay { position: absolute; inset: auto 0 0 0; padding: clamp(1.25rem, 3vw, 2.4rem) clamp(1.25rem, 3vw, 2.4rem) clamp(1.25rem, 2.5vw, 2rem); background: linear-gradient( to top, rgba(8,8,12,0.85) 0%, rgba(8,8,12,0.55) 50%, rgba(8,8,12,0.0) 100% ); color: #fff; pointer-events: none; display: flex; flex-direction: column; gap: 0.4rem; z-index: 2; } /* On mobile: switch the slide from "image with text overlaid" to "image with text BELOW it". Selectors are .proj-media-scoped for higher specificity (0,0,2,0) so they beat the global .work-slide* rules above (which have display:grid and position:absolute baked in). */ @media (max-width: 880px) { .proj-media .work-slide { display: flex; flex-direction: column; } .proj-media .work-slide__media { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; /* Override the display:grid + place-items:center from the global .work-slide__media rule — those were for the absolute-overlay layout and conflict with our new flex-column stack. */ display: block; padding: 0; } .proj-media .work-slide__media img, .proj-media .work-slide__media video { width: 100%; height: 100%; object-fit: contain; object-position: center; } .proj-media .work-slide__overlay { position: relative; inset: auto; flex: 0 0 auto; align-items: center; text-align: center; /* No gradient — overlay no longer sits on the image, it sits on the slider's solid dark background. */ background: transparent; padding: 0.85rem clamp(1rem, 4vw, 1.5rem) 1rem; } .proj-media .work-slide__title, .proj-media .work-slide__caption { max-width: 92%; } .proj-media .work-slide__title { font-size: clamp(1.45rem, 5.5vw, 2rem); line-height: 1.15; } .proj-media .work-slide__caption { font-size: clamp(0.95rem, 3.5vw, 1.15rem); line-height: 1.45; } /* Move the slide-progress dots OUT of the slider on mobile and anchor them to the slider's bottom edge (touching the border from below). Removes the pill background so they read as part of the page rhythm rather than a floating chip. proj-media gets bottom padding to make visual room. overflow:visible on the slider lets the dots extend out. */ .proj-media .work-slider { overflow: visible; } .proj-media { padding-bottom: 28px; } .proj-media .work-slider__dots { top: 100%; bottom: auto; right: auto; left: 50%; transform: translateX(-50%); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 6px 0; } [dir="rtl"] .proj-media .work-slider__dots { right: auto; left: 50%; } } .work-slide__title { margin: 0; font-size: clamp(1.25rem, 2.5vw, 1.95rem); line-height: 1.15; letter-spacing: -0.015em; font-weight: 600; max-width: 32ch; opacity: 0; transform: translateY(8px); transition: opacity 500ms ease 150ms, transform 500ms cubic-bezier(.2,.8,.2,1) 150ms; } .work-slide__caption { margin: 0; font-size: clamp(0.85rem, 1.05vw, 1rem); line-height: 1.5; color: rgba(255,255,255,0.78); max-width: 60ch; opacity: 0; transform: translateY(8px); transition: opacity 500ms ease 280ms, transform 500ms cubic-bezier(.2,.8,.2,1) 280ms; } .work-slide[data-active] .work-slide__title, .work-slide[data-active] .work-slide__caption { opacity: 1; transform: translateY(0); } .work-slide__playbtn { position: absolute; inset: 0; margin: auto; width: 68px; height: 68px; border-radius: 999px; border: 0; background: rgba(255,255,255,0.95); color: #0A0A0C; display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 30px rgba(0,0,0,0.4); transition: transform 220ms cubic-bezier(.2,.8,.2,1), background 220ms ease; z-index: 3; } .work-slide__playbtn:hover { transform: scale(1.08); background: var(--accent); color: #fff; } .work-slide__playbtn svg { transform: translateX(2px); } .work-slide.is-playing .work-slide__playbtn { display: none; } .work-slider__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 999px; border: 0; background: rgba(20, 20, 24, 0.6); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity 220ms ease, background 200ms ease, transform 200ms ease; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 4; } .work-slider:hover .work-slider__nav, .work-slider:focus-within .work-slider__nav { opacity: 1; } .work-slider__nav:hover { background: rgba(20, 20, 24, 0.85); transform: translateY(-50%) scale(1.05); } .work-slider__nav--prev { left: 14px; } .work-slider__nav--next { right: 14px; } [dir="rtl"] .work-slider__nav--prev { left: auto; right: 14px; } [dir="rtl"] .work-slider__nav--next { right: auto; left: 14px; } .work-slider__dots { position: absolute; bottom: 14px; right: 14px; display: flex; gap: 5px; list-style: none; margin: 0; padding: 6px 8px; border-radius: 999px; background: rgba(8, 8, 12, 0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 4; } [dir="rtl"] .work-slider__dots { right: auto; left: 14px; } .work-slider__dot { position: relative; width: 22px; height: 3px; border: 0; padding: 0; background: rgba(255,255,255,0.28); border-radius: 999px; cursor: pointer; overflow: hidden; transition: width 220ms ease, background 200ms ease; } .work-slider__dot.is-active { background: rgba(255,255,255,0.4); width: 36px; } .work-slider__dot-fill { position: absolute; inset: 0; width: 0%; background: #fff; border-radius: 999px; } .work-slider__count { display: none; } /* ─────────── Project detail — body copy (slide 3) ─────────── */ .work-body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--masthead-h) + clamp(2rem, 5vw, 4rem)) var(--gutter) clamp(3rem, 6vh, 5rem); max-width: 70ch; margin: 0 auto; scroll-snap-align: start; scroll-snap-stop: always; } .work-body p { font-size: 1.02rem; line-height: 1.75; color: var(--ink-2); margin: 0 0 1rem; } /* 404 */ .work-empty { padding: clamp(3rem, 8vw, 5rem) 0; text-align: center; } .work-empty__inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; } .work-empty__h { font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 0; } @media (max-width: 720px) { .work-slider { aspect-ratio: 4 / 5; max-height: none; } .work-slider__nav { opacity: 1; width: 36px; height: 36px; } .work-slide__playbtn { width: 56px; height: 56px; } } @media (prefers-reduced-motion: reduce) { .work-slide, .work-slide__title, .work-slide__caption { transition: none; } }