/* ═══════════════════════════════════════════════════════════════════════ DOHENY ATELIER — SITE STYLESHEET One stylesheet for every page. Organized by scope, then by page: 1. FONTS & DESIGN TOKENS ..... @font-face, brand colors, type variables 2. BASE & UTILITIES .......... reset, body fade-in, .visually-hidden, image loading skeleton 3. SHARED COMPONENTS ......... nav + mobile menu, footer, back-to-top, overlay scrollbar, cursor pill, client-logo marquee, work cards 4. HOME (index.html) ......... splash, hero slideshow, tagline, services 5. WORK LISTING (/work/) ..... project grid 6. CASE STUDIES (/work/casestudy//) — header, hero stack, Learn More panel, deliverables, More Work grid 7. ABOUT (/about/) ........... hero, collage, founder, expertise, FAQ 8. Q&A (/katedohenyqa/) ...... intro, pull quote, body 9. COMING SOON (/comingsoon/) 10. MOBILE ≤768px ............. every page's phone layout, one block, ordered to match the sections above Conventions: colors/fonts only via the :root variables in section 1. Desktop sizes use clamp(min, vw, max) so type/spacing stay fluid but bounded; the mobile block uses a raw-vw proportional ladder (see the notes there). Add new desktop rules with clamp(), and always add the matching rule to the mobile block in the same change. ═══════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════ 1. FONTS & DESIGN TOKENS ══════════════════════════════════════════════════════════════════════════ */ /* ── Fonts ─────────────────────────────────────────────── */ @font-face { font-family: 'Caslon540LTStd'; src: url('fonts/Caslon540LTStd-Roman.otf') format('opentype'); font-display: swap; /* show fallback text immediately, swap in when loaded */ font-weight: normal; font-style: normal; } @font-face { font-family: 'Caslon540LTStd'; src: url('fonts/Caslon540LTStd-Italic.otf') format('opentype'); font-display: swap; /* show fallback text immediately, swap in when loaded */ font-weight: normal; font-style: italic; } @font-face { font-family: 'EngraversGothicBT'; src: url('fonts/Engravers Gothic BT.ttf') format('truetype'); font-display: swap; /* show fallback text immediately, swap in when loaded */ font-weight: normal; font-style: normal; } /* ── Tokens ────────────────────────────────────────────── */ :root { --white: #FFFFFF; --ecru: #F5F3EF; --beige: #CCC6BA; --graphite: #292929; /* RGB channel-lists mirroring the hex tokens above, for use in rgba() so that translucent colours (glass nav, hairline borders, shadows) invert with the theme instead of staying hardcoded. Keep these in sync with the hex vars. */ --white-rgb: 255, 255, 255; --ecru-rgb: 245, 243, 239; --beige-rgb: 204, 198, 186; --graphite-rgb: 41, 41, 41; /* Logo recolour amounts for the brightness(0) invert() trick used on every transparent-PNG logo. In light mode logos read graphite; the dark-mode block below lifts them to ecru. */ --logo-ink: 0.161; /* invert() amount → graphite */ --font-heading: 'aviano-didone', serif; --font-body: 'Caslon540LTStd', serif; --font-caps: 'EngraversGothicBT', sans-serif; --ls-heading: 0em; --ls-body: -0.035em; --ls-caps: 0.2em; --lh-heading: 1; --lh-body: 1.45; --lh-caps: 1.9; } /* ── Dark mode ───────────────────────────────────────────── A manual, button-driven theme (js/theme.js sets data-theme on and persists it to localStorage; an inline snippet in each page's applies it before first paint to avoid a flash). Because nearly all colours route through the tokens above, dark mode is a token remap into an elevation scale anchored on graphite: • ecru → graphite (#292929) — the default page surface • beige → #1B1917 — collapses onto the same recessed surface as white • white → #1B1917 — one step DARKER than graphite (Featured Works) • graphite (the ink) → light ecru so text/marks flip to light Photographs are never touched; only UI colours and the transparent-PNG logos invert. */ html[data-theme="dark"] { --white: #1B1917; /* recessed: darker than graphite */ --ecru: #292929; /* default surface: graphite */ --beige: #1B1917; /* collapses onto the same recessed surface as white */ --graphite: #F5F3EF; /* ink flips to light */ --white-rgb: 27, 25, 23; --ecru-rgb: 41, 41, 41; --beige-rgb: 27, 25, 23; --graphite-rgb: 245, 243, 239; --logo-ink: 0.955; /* invert() amount → ecru */ } /* Smooth cross-fade when the theme flips. Scoped to colour properties so we don't animate layout, and disabled for reduced-motion users. (body handles its own transition — see the body rule — because it already animates opacity for the page fade-in and `transition` is not additive.) */ .nav, .mobile-menu, .works, .footer, .cursor-label-inner, .cs-viewmore-btn, .service-item, .faq-item, .expertise-rule, .nav-logo-img, .marquee-logo img, .footer-icon, .footer-social-link img { transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease, filter 0.5s ease; } @media (prefers-reduced-motion: reduce) { .nav, .mobile-menu, .works, .footer, .cursor-label-inner, .cs-viewmore-btn, .service-item, .faq-item, .expertise-rule, .nav-logo-img, .marquee-logo img, .footer-icon, .footer-social-link img { transition: none; } } /* ══════════════════════════════════════════════════════════════════════════ 2. BASE & UTILITIES Element reset, page fade-in (body.is-loaded, driven by js/transitions.js), screen-reader-only headings, and the beige pulse shown while images load. ══════════════════════════════════════════════════════════════════════════ */ /* ── Reset ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* NOTE: no `scroll-behavior: smooth` here — Lenis provides the smooth scrolling; the CSS version would double-animate programmatic scrolls (splash reset, back-to-top fallback) and fight Lenis. */ body { background-color: var(--ecru); color: var(--graphite); font-family: var(--font-body); letter-spacing: var(--ls-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; opacity: 0; transition: opacity 0.4s ease, background-color 0.5s ease, color 0.5s ease; } /* Selection highlight inverts: the highlight takes the text colour and the text takes the background colour. `currentColor` can't be used here — inside ::selection it resolves to the pseudo's own `color`, not the element's — so the two themes are set explicitly. Default = dark text on light ground; the footer (dark ground, light text) flips it. */ ::selection { background-color: var(--graphite); color: var(--ecru); } .footer ::selection { background-color: var(--ecru); color: var(--graphite); } body.is-loaded { opacity: 1; } /* Arrived from a mobile-menu tap: the menu panel is still covering the viewport and about to wipe up (see .mobile-menu in the mobile block), so this page has to be fully painted behind it — the entry fade would otherwise be caught mid-way as the panel lifts. */ html.menu-wipe-in body { opacity: 1; transition: none; } a { color: inherit; text-decoration: none; } img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ── A11y / SEO utility ────────────────────────────────── */ /* Visually hidden but exposed to screen readers & crawlers. Used for SEO headings on image-led pages — no visual effect. */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Image skeleton loading ─────────────────────────────── */ .img-loading { position: relative; } .img-loading img { color: transparent; } .img-loading::after { content: ''; position: absolute; inset: 0; background: var(--beige); animation: skeleton-pulse 1.8s ease-in-out infinite; pointer-events: none; z-index: 1; } @keyframes skeleton-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } /* ══════════════════════════════════════════════════════════════════════════ 3. SHARED COMPONENTS — used on every page (or several) Nav + mobile menu, footer, back-to-top donut, overlay scrollbar, the "View case study" cursor pill, the client-logo marquee (home + about), and the work-card styles shared by home / work listing / case studies. ══════════════════════════════════════════════════════════════════════════ */ /* ── Nav ───────────────────────────────────────────────── */ .nav { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; justify-items: center; padding: clamp(12px, 1.6vw, 20px) clamp(24px, 3.2vw, 40px); background: rgba(var(--ecru-rgb), 0.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); position: fixed; top: 0; left: 0; right: 0; z-index: 100; } .nav-link { font-family: var(--font-caps); font-size: clamp(12px, 0.9vw, 14px); letter-spacing: var(--ls-caps); line-height: var(--lh-caps); text-transform: uppercase; background: none; border: none; cursor: pointer; color: var(--graphite); position: relative; padding-bottom: 2px; } .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--graphite); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); } .nav-logo { display: flex; justify-content: center; align-items: center; } .nav-logo-img { height: 36px; width: auto; object-fit: contain; display: block; } /* ── Mobile Menu (hidden on desktop) ───────────────────── */ .nav-hamburger { display: none; } .mobile-menu { display: none; } /* ── Footer ────────────────────────────────────────────── */ .footer { background: var(--graphite); padding: clamp(48px, 6.4vw, 80px) clamp(24px, 3.2vw, 40px) clamp(24px, 3.2vw, 40px); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 0; position: relative; } .footer-left { display: flex; align-items: flex-start; } .footer-icon { width: 170px; height: auto; object-fit: contain; opacity: 0.88; } .footer-right { display: flex; flex-direction: column; align-items: flex-end; text-align: right; } .footer-headline { font-family: var(--font-body); font-size: clamp(32px, 3vw, 48px); letter-spacing: var(--ls-body); line-height: var(--lh-body); color: var(--ecru); } .footer-sub { font-family: var(--font-body); font-size: clamp(32px, 3vw, 48px); font-style: italic; letter-spacing: var(--ls-body); line-height: var(--lh-body); color: var(--ecru); margin-bottom: clamp(12px, 1.28vw, 16px); } .footer-email { font-family: var(--font-body); font-size: clamp(13px, 1.2vw, 19px); line-height: var(--lh-body); color: var(--ecru); text-decoration: none; position: relative; padding-bottom: 2px; margin-bottom: clamp(14px, 1.92vw, 24px); } .footer-email::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--ecru); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .footer-email:hover::after { transform: scaleX(1); } .footer-social { display: flex; gap: 12px; align-items: center; } .footer-social-link { display: flex; opacity: 0.7; transition: opacity 0.2s ease; } .footer-social-link:hover { opacity: 1; } .footer-social-link img { width: 18px; height: 18px; object-fit: contain; } .footer-copy { grid-column: 1 / -1; text-align: center; padding-top: clamp(36px, 4.8vw, 60px); font-family: var(--font-caps); font-size: clamp(9px, 0.65vw, 10px); letter-spacing: var(--ls-caps); line-height: var(--lh-caps); text-transform: uppercase; color: var(--ecru); opacity: 0.6; } /* ── Scroll-to-top progress button ───────────────────────────────────────── Pure-CSS progress indicator: a thin beige DONUT ring whose graphite fill sweeps clockwise from the top as the page scrolls, with a graphite arrow in the (transparent) centre hole. The fill is a scroll-driven animation (no JS drives it) — --cs-totop-fill is animated 0%→100% against the document's scroll timeline and used as the conic-gradient sweep on .cs-totop::before. Only the fade/roll-in is JS (casestudy.js adds .is-visible once you've scrolled a screenful, since Lenis suppresses native scroll events). No-ops on pages without the markup. Technique adapted from matuzo.at, restyled in DA brand tokens. */ @property --cs-totop-fill { syntax: ''; inherits: false; initial-value: 0%; } .cs-totop { position: fixed; inset: auto 2rem 2rem auto; z-index: 900; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; --totop-track: transparent; /* ring: unfilled track (invisible) */ --totop-fill: var(--graphite); /* ring: scroll-progress fill */ color: var(--graphite); /* arrow colour */ border-radius: 50%; background: none; /* the middle hole is transparent */ /* Hidden until scrolled; casestudy.js adds .is-visible. It rolls in from the right — parked fully off-screen, then travels in with a full spin. No fade; the motion alone reveals it. */ visibility: hidden; transform: translateX(6rem) rotate(-360deg); transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.9s; cursor: pointer; } /* Over a dark section (e.g. the footer): render the ink white and blend it with the backdrop using `difference`. Wherever the button overlaps graphite it reads light (ecru-ish); wherever it still overlaps the light page it reads dark (graphite-ish) — the split follows the exact boundary as you scroll past it. Scoped to dark sections (casestudy.js toggles .on-dark) so it never inverts over the page's images. */ .cs-totop.on-dark { --totop-fill: #fff; color: #fff; mix-blend-mode: difference; } /* Donut ring: a thin beige track with a graphite progress fill that sweeps CLOCKWISE from the top (top → right → bottom → left) as the page scrolls. The centre is masked out, so the arrow shows through with no background. */ .cs-totop::before { content: ""; position: absolute; inset: 0; border-radius: 50%; --ring: 4px; /* ring thickness (relatively thin) */ background: conic-gradient(from 0deg, var(--totop-fill) 0% var(--cs-totop-fill), var(--totop-track) var(--cs-totop-fill)); /* Cut out the middle to leave a ring of --ring thickness. */ -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--ring)), #000 calc(100% - var(--ring))); mask: radial-gradient(farthest-side, #0000 calc(100% - var(--ring)), #000 calc(100% - var(--ring))); /* Scroll-driven fill — duration is ignored on a scroll timeline. */ animation: cs-totop-progress linear; animation-timeline: scroll(root); } .cs-totop.is-visible { visibility: visible; transform: translateX(0) rotate(0deg); } .cs-totop.is-visible:hover { transform: translateY(-3px); } .cs-totop svg { display: block; width: 1.35rem; height: 1.35rem; stroke-width: 1.4px; /* thin arrow */ } /* Accessible label, visually hidden (screen readers still announce it). */ .cs-totop span { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; width: 1px; overflow: hidden; position: absolute; white-space: nowrap; } @keyframes cs-totop-progress { 0% { --cs-totop-fill: 0%; } 100% { --cs-totop-fill: 100%; } } /* ── Theme toggle (sticky, every page) ───────────────────── Injected into every page by js/theme.js. Fixed bottom-left so it clears the bottom-right back-to-top control. Glass pill in brand colours that itself inverts with the theme; shows a sun in dark mode (tap → go light) and a moon in light mode (tap → go dark). */ .theme-toggle { position: fixed; left: 2rem; bottom: 2rem; z-index: 901; width: 3.25rem; height: 3.25rem; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid rgba(var(--graphite-rgb), 0.28); background: rgba(var(--ecru-rgb), 0.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: var(--graphite); cursor: pointer; transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease, transform 0.3s ease; } .theme-toggle:hover { transform: scale(1.06); } .theme-toggle svg { display: block; width: 1.25rem; height: 1.25rem; stroke-width: 1.4px; } /* Show the moon in light mode, the sun in dark mode. */ .theme-toggle .theme-toggle-sun { display: none; } html[data-theme="dark"] .theme-toggle .theme-toggle-moon { display: none; } html[data-theme="dark"] .theme-toggle .theme-toggle-sun { display: block; } /* No scroll-driven-animation support (e.g. Safari): the ring stays a static beige donut (0% fill) — the scroll-to-top link still works everywhere. */ @media (prefers-reduced-motion: reduce) { .cs-totop, .cs-totop.is-visible, .cs-totop.is-visible:hover { transform: none; transition: visibility 0.2s; } } @media (max-width: 768px) { .cs-totop { inset: auto 1rem 1rem auto; width: 2.75rem; height: 2.75rem; } } /* ── Custom overlay scrollbar ─────────────────────────────────────────────── A thin beige thumb over a transparent track, pinned to the right edge. It's created and driven by js/scrollbar.js: it reveals on scroll, fades out once scrolling stops, and reappears when the pointer nears the right edge; the thumb is draggable. The native scrollbar is hidden below (Lenis still does the actual scrolling). Skipped on touch devices, which have no persistent pointer. */ .da-scrollbar { position: fixed; top: 0; right: 0; width: 10px; /* hover/hit zone; the visible thumb is thinner */ height: 100vh; z-index: 950; pointer-events: none; /* never blocks page clicks... */ opacity: 0; transition: opacity 0.35s ease; } .da-scrollbar.is-visible { opacity: 1; } .da-scrollbar-thumb { pointer-events: auto; /* ...except the thumb, which is draggable */ position: absolute; top: 0; right: 2px; width: 4px; /* thin */ border-radius: 4px; background: var(--beige); /* Hairline graphite ring keeps the beige thumb visible on beige sections; second layer is a slight drop shadow with reduced blur. */ box-shadow: 0 0 0 1px rgba(var(--graphite-rgb), 0.28), 0 1px 2.5px rgba(var(--graphite-rgb), 0.22); cursor: grab; } .da-scrollbar-thumb:active { cursor: grabbing; } /* Hide the native scrollbar site-wide — the overlay above replaces it. */ html { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* legacy Edge */ } html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; /* Chrome / Safari / Edge */ } @media (prefers-reduced-motion: reduce) { .da-scrollbar { transition: opacity 0.12s ease; } } /* ── Custom cursor ─────────────────────────────────────── */ .cursor-label { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 1000; transform: translate(calc(var(--cx, 0px) - 50%), calc(var(--cy, 0px) - 50%)); } .cursor-label-inner { display: inline-block; background: var(--graphite); color: var(--white); font-family: var(--font-caps); font-size: clamp(9px, 0.6vw, 11px); letter-spacing: var(--ls-caps); text-transform: uppercase; padding: clamp(8px, 0.7vw, 10px) clamp(12px, 1.1vw, 16px); border-radius: 999px; white-space: nowrap; opacity: 0; transform: scale(0); transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.2s ease; } .cursor-label.visible .cursor-label-inner { opacity: 1; transform: scale(1); } .work-img-wrap:hover { cursor: none; } /* Touch devices of ANY size (incl. iPads >768px wide): there is no persistent pointer to follow, and a tap would leave the pill stuck on screen. */ @media (hover: none) { .cursor-label { display: none; } } /* ── Client logo marquee (CSS-only infinite scroll, right → left) ─ */ .logo-marquee { width: 50vw; /* banner spans half the viewport… */ margin: clamp(72px, 9.6vw, 120px) auto 0; /* …and is centered */ --marquee-scale: 0.55; /* global size knob — smaller logos → shorter band */ } .logo-marquee-viewport { overflow: hidden; /* clip the over-wide track */ } .logo-marquee-track { display: flex; align-items: center; width: max-content; will-change: transform; animation: logo-marquee-scroll 32s linear infinite; } /* pause the scroll while hovering anywhere over the banner */ .logo-marquee:hover .logo-marquee-track { animation-play-state: paused; } /* The track holds two identical logo sets; sliding exactly one set-width (−50%) loops seamlessly. Each logo owns equal left/right padding, so the gap at the seam matches every other gap — no jump at the loop point. */ @keyframes logo-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee-logo { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 0 3vw; /* reserve the band height so the row never collapses to 0 before the images decode (the tallest mark, Kylie's 3-line lockup, sets it) */ min-height: calc(60px * var(--marquee-scale, 0.8)); } /* Optical-weight sizing (same principle as the About client wall): size by a per-logo target width so every mark reads at a comparable cap-height. --logo-w is set inline per logo so it travels with the image on reorder. */ .marquee-logo img { /* optical-weight sizing: each logo sized by target WIDTH (--logo-w, inline per logo) with height auto, so multi-line lockups read at a comparable cap-height instead of being crushed to equal box height */ width: calc(var(--logo-w, 150px) * var(--marquee-scale, 0.8)); height: auto; object-fit: contain; /* recolor every (transparent-PNG) logo: brightness(0) makes the opaque pixels black, then invert(--logo-ink) lifts black → graphite in light mode, ecru in dark mode (see the dark-theme block for the lifted invert amount) */ filter: brightness(0) invert(var(--logo-ink)); opacity: 1; } @media (prefers-reduced-motion: reduce) { .logo-marquee-track { animation: none; } } /* ── Dark-mode logo recolouring ──────────────────────────── These transparent-PNG marks are shown as-is in light mode (a dark logo on a light ground, or a light logo on the dark footer). In dark mode the grounds invert, so force each mark to the correct ink with the brightness(0)+invert trick: nav logo + splash logo → ecru (light) on the now-dark nav/splash; footer icon + social icons → graphite (dark) on the now-light footer. Photos are never targeted. */ html[data-theme="dark"] .nav-logo-img, html[data-theme="dark"] .splash-logo { filter: brightness(0) invert(0.955); /* → ecru */ } html[data-theme="dark"] .footer-icon, html[data-theme="dark"] .footer-social-link img { filter: brightness(0) invert(0.161); /* → graphite */ } /* ── Featured Works ────────────────────────────────────── */ .works { background: var(--white); padding: clamp(36px, 4.8vw, 60px) clamp(18px, 2.4vw, 30px) clamp(48px, 6.4vw, 80px); } .section-label { font-family: var(--font-caps); font-size: clamp(12px, 0.85vw, 14px); letter-spacing: var(--ls-caps); line-height: var(--lh-caps); text-transform: uppercase; color: var(--graphite); margin-bottom: clamp(17px, 2.24vw, 28px); } .works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 20px); } .work-img-wrap { width: 100%; aspect-ratio: 7 / 8; overflow: hidden; background: var(--ecru); } .work-img-wrap img { width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform 0.6s ease-in; will-change: transform; backface-visibility: hidden; } .work-item:hover .work-img-wrap img { transform: scale(1.03); } .work-title { font-family: var(--font-body); font-size: clamp(16px, 1.4vw, 22px); font-style: italic; font-weight: normal; line-height: var(--lh-body); margin-top: clamp(16px, 2vw, 30px); margin-bottom: clamp(4px, 0.4vw, 6px); color: var(--graphite); position: relative; display: inline-block; padding-bottom: 2px; } .work-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--graphite); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .work-item:hover .work-title::after { transform: scaleX(1); } .work-desc { font-family: var(--font-body); font-size: clamp(14px, 1.05vw, 18px); letter-spacing: var(--ls-body); line-height: var(--lh-body); color: var(--graphite); opacity: 1; max-width: 80%; } .work-item:has(.work-img-wrap--tall) .work-desc { max-width: 90%; } .work-disclaimer { font-family: var(--font-caps); font-size: clamp(9px, 0.66vw, 11px); letter-spacing: var(--ls-caps); line-height: var(--lh-caps); text-transform: uppercase; color: var(--graphite); opacity: 0.55; margin-top: clamp(7px, 0.7vw, 11px); } .works-more { text-align: center; margin-top: clamp(29px, 3.84vw, 48px); } .view-more { font-family: var(--font-caps); font-size: clamp(12px, 0.85vw, 14px); /* match .section-label ("More Work") beside it */ letter-spacing: var(--ls-caps); text-transform: uppercase; /* match the other caps elements so the capital V isn't taller than the rest */ color: var(--graphite); position: relative; padding-bottom: 1px; } .view-more::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--graphite); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .view-more:hover::after { transform: scaleX(1); } /* ══════════════════════════════════════════════════════════════════════════ 4. HOME — index.html Splash screen, hero slideshow, tagline, services. (Animations for these live in js/main.js; the marquee above is CSS-only.) ══════════════════════════════════════════════════════════════════════════ */ /* ── Splash ────────────────────────────────────────────── */ .splash { position: fixed; inset: 0; z-index: 1000; background-color: var(--beige); display: flex; align-items: center; justify-content: center; cursor: pointer; } /* The wrapper carries the entry fade/blur and the fly-to-nav transform, so the img itself is free to hold the dark-mode recolour filter below — GSAP writes an inline `filter` and would otherwise clobber it. */ .splash-logo-wrap { display: inline-block; opacity: 0; } .splash-logo { width: 280px; height: auto; object-fit: contain; display: block; } .splash-hint { position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%); font-family: var(--font-caps); font-size: clamp(12px, 0.8vw, 13px); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--graphite); opacity: 0; white-space: nowrap; } /* ── Blink animation (splash logo) ─────────────────────── */ .blink-2 { animation: blink-2 2.7s infinite; } @keyframes blink-2 { 0% { opacity: 1; } 6.5% { opacity: 0.1; } 13% { opacity: 1; } 19.5% { opacity: 0.1; } 26% { opacity: 1; } 100% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .blink-2 { animation: none; } } /* ── Hero ──────────────────────────────────────────────── */ .hero { position: relative; width: 100%; height: 58vw; max-height: 780px; overflow: hidden; margin-top: 76px; /* clears the fixed nav (~constant height) — not viewport-proportional */ } .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 0; transition: opacity 0.25s ease; /* stacked images overlap — only the visible one should take the click */ pointer-events: none; } .hero-img.hero-img--active { opacity: 1; pointer-events: auto; cursor: pointer; } /* the "View case study" / "Coming soon" pill replaces the real cursor — but only while the pill/preview is actually showing (JS toggles .cursor-hidden). Near the dots the effect is suppressed, so the real cursor returns. */ .hero.cursor-hidden .hero-img--active { cursor: none; } /* Dots nav — sits above the slides, centered near the bottom edge */ .hero-dots { position: absolute; left: 50%; bottom: clamp(16px, 2vw, 28px); transform: translateX(-50%); display: flex; gap: 10px; z-index: 3; } .hero-dot { width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%; background: var(--ecru); opacity: 0.5; /* inactive dots are dimmed */ cursor: pointer; -webkit-appearance: none; appearance: none; transition: opacity 0.25s ease, transform 0.25s ease; } .hero-dot:hover { opacity: 0.75; } .hero-dot.is-active { opacity: 1; transform: scale(1.3); } /* Pause/play toggle — bottom-right, its baseline aligned with the dots row. */ .hero-toggle { position: absolute; right: clamp(18px, 3vw, 40px); bottom: clamp(16px, 2vw, 28px); display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: none; background: none; color: var(--ecru); opacity: 1; cursor: pointer; -webkit-appearance: none; appearance: none; transition: opacity 0.25s ease; z-index: 3; } .hero-toggle:hover { opacity: 0.6; } .hero-toggle svg { width: 18px; height: 18px; fill: currentColor; display: block; } /* Cursor preview card — trails the pointer beneath the "View case study" pill on the home hero only (built in js/main.js, appended to ). */ .hero-preview { position: fixed; top: 0; left: 0; z-index: 999; /* just under the pill (1000) */ width: 210px; pointer-events: none; /* anchor point sits below the pill; centered on the cursor's x */ transform: translate(calc(var(--cx, 0px) - 50%), calc(var(--cy, 0px) + 26px)); transform-origin: top center; opacity: 0; transition: opacity 0.2s ease; } .hero-preview.visible { opacity: 1; } /* Scale lives on an inner wrapper so it doesn't multiply the outer translate (which would collapse the card toward the top-left as it grows/shrinks). Mirrors the cursor pill's two-element split. */ .hero-preview-inner { background: var(--white); padding: 10px; transform-origin: top center; transform: scale(0); transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .hero-preview.visible .hero-preview-inner { transform: scale(1); } .hero-preview-thumb { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ecru); } .hero-preview-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-preview-title { font-family: var(--font-body); font-style: italic; font-weight: normal; font-size: 15px; line-height: 1.15; color: var(--graphite); margin: 12px 0 4px; } .hero-preview-desc { font-family: var(--font-body); font-size: 11px; line-height: 1.4; letter-spacing: var(--ls-body); color: var(--graphite); margin: 0; } @media (hover: none) { .hero-preview { display: none; } } /* ── Tagline ───────────────────────────────────────────── */ .tagline { background: var(--ecru); text-align: center; padding: clamp(108px, 14.4vw, 180px) clamp(24px, 3.2vw, 40px); } .tagline p { font-family: var(--font-body); font-size: clamp(30.8px, 2.57vw, 41.8px); letter-spacing: var(--ls-body); line-height: var(--lh-body); color: var(--graphite); margin: 0; } /* "the Design Agency" opener; the italic D and A (via ) echo the Doheny Atelier initials. Gap separates it from the statement below. Needs `p.tagline-lead` to outrank `.tagline p { margin: 0 }` above. */ .tagline p.tagline-lead { margin-bottom: 2em; font-size: clamp(12px, 0.85vw, 14px); font-family: var(--font-caps); letter-spacing: var(--ls-caps); line-height: var(--lh-caps); text-transform: uppercase; font-style: normal; } /* ── Services ──────────────────────────────────────────── */ .services { background: var(--beige); padding: clamp(108px, 14.4vw, 180px) clamp(24px, 3.2vw, 40px) clamp(102px, 13.6vw, 170px); } .services-headline { font-family: var(--font-body); font-size: clamp(30.8px, 2.57vw, 41.8px); letter-spacing: var(--ls-body); line-height: var(--lh-body); color: var(--graphite); max-width: 90%; margin-bottom: clamp(30px, 4.0vw, 50px); } .services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 30px) clamp(36px, 4.8vw, 60px); } .service-item { display: flex; align-items: baseline; gap: clamp(14px, 1.92vw, 24px); padding: clamp(12px, 1.6vw, 20px) 0; border-bottom: 1px solid rgba(var(--graphite-rgb), 0.25); opacity: 1; transition: border-color 0.4s ease; } .service-item:hover { border-color: rgba(var(--graphite-rgb), 0.7); } .service-name { font-family: var(--font-caps); font-size: clamp(12px, 1vw, 16px); letter-spacing: var(--ls-caps); line-height: var(--lh-caps); text-transform: uppercase; color: var(--graphite); white-space: nowrap; flex-shrink: 0; } /* Arrow affordance — sits next to each title at rest to signal "hover me", then drags to the right on hover as the description slides in behind it. */ .service-name::after { content: "\2192"; display: inline-block; margin-left: 0.6em; color: var(--graphite); transform: translateX(0); transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .service-item:hover .service-name::after { transform: translateX(9px); } @media (prefers-reduced-motion: reduce) { .service-name::after, .service-item:hover .service-name::after { transition: none; transform: none; } } .service-desc { font-family: var(--font-body); font-size: clamp(12px, 1vw, 16px); letter-spacing: var(--ls-body); line-height: var(--lh-body); color: var(--graphite); opacity: 0; transform: translateX(-10px); transition: opacity 0.6s ease, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .service-item:hover .service-desc { opacity: 1; transform: translateX(0); } /* Touch tablets (≥769px, no hover — iPad landscape/Pro): the hover-reveal above can never fire, which left every service description invisible. Show the descriptions statically, in their settled hover state. */ @media (hover: none) and (min-width: 769px) { .service-desc, .service-item:hover .service-desc { opacity: 1; transform: none; } } /* ══════════════════════════════════════════════════════════════════════════ 5. WORK LISTING — /work/ ══════════════════════════════════════════════════════════════════════════ */ /* ── Work Page ───────────────────────────────────────────── */ .work-page-grid { padding: clamp(112px, 11vw, 150px) clamp(24px, 5vw, 60px) clamp(80px, 10vw, 140px); background: var(--ecru); display: flex; flex-direction: column; gap: clamp(48px, 5.6vw, 80px); } #work-heading.work-page-heading { font-family: var(--font-heading); font-size: clamp(34px, 4.5vw, 72px); font-weight: normal; letter-spacing: var(--ls-heading); color: var(--graphite); } .work-page-subtext { font-family: var(--font-body); font-size: clamp(14px, 1.05vw, 18px); /* kept identical to .work-desc so both read the same at every width */ letter-spacing: var(--ls-body); line-height: var(--lh-body); color: var(--graphite); opacity: 1; margin-top: clamp(-8px, 0.4vw, 8px); margin-bottom: clamp(-64px, -5vw, -40px); } .work-row { display: grid; align-items: start; gap: clamp(12px, 1.4vw, 20px); } .work-row--asym { grid-template-columns: 60fr 38fr; } .work-row--equal { grid-template-columns: 1fr 1fr 1fr; } .work-row--asym-rev { grid-template-columns: 38fr 60fr; } .work-img-wrap--tall { aspect-ratio: 1 / 1; } .work-img-wrap--short { aspect-ratio: 6 / 5; } .work-img-wrap--wide { aspect-ratio: 5 / 4; } .work-img-wrap--portrait { aspect-ratio: 4 / 5; } /* ── Work filters ──────────────────────────────────────────────────────────── The default view keeps the hand-composed asymmetric rows. Selecting a filter adds .is-filtering to .work-rows: the individual .work-row grids become display:contents so every .work-item flows as a direct child of one uniform grid, and GSAP Flip (js/workfilter.js) animates the survivors into place. ── */ .work-rows { display: flex; flex-direction: column; gap: clamp(48px, 5.6vw, 80px); /* the inter-row gap, moved off .work-page-grid */ } .work-filter { display: flex; flex-wrap: wrap; align-items: baseline; gap: clamp(6px, 0.8vw, 14px); margin-top: clamp(10px, 1.2vw, 18px); font-family: var(--font-caps); font-size: clamp(12px, 0.85vw, 14px); letter-spacing: var(--ls-caps); line-height: var(--lh-caps); text-transform: uppercase; color: var(--graphite); /* Halve the filter→grid gap only. The .work-page-grid gap (clamp(48,5.6vw,80)) also spaces heading/subtext, so pull the grid up by half that instead of touching the shared gap. */ margin-bottom: clamp(-40px, -2.8vw, -24px); } .work-filter-label { opacity: 1; } /* Inline custom dropdown (native