/* ========================================================================== AKSO — Home Page Page-specific composition only. Reuses tokens/components from the design system (variables, typography, grid, sections, nav, footer). ========================================================================== */ /* --------------------------------------------------------------------- 1. HERO Full-viewport cross-fading photo slideshow, oversized headline, centered "by AKSO" credit, scroll cue. The nav sits transparent over this section (data-nav-solid is intentionally absent on the Home so nav.js keeps it transparent until the user scrolls). --------------------------------------------------------------------- */ .hero { position: relative; width: 100%; height: 100svh; min-height: 560px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background-color: var(--color-bg); } .hero__media { position: absolute; inset: 0; z-index: 0; } /* Two of these exist in the DOM at all times (a "double buffer") — hero-slideshow.js toggles .is-active between them to cross-fade, having already preloaded the incoming image so the transition never has to wait on the network. */ .hero__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; /* Pinned to an exact 1s per the brief — doesn't land on any existing --duration-* token (0.25 / 0.5 / 0.9 / 1.6s). Keep this in sync with FADE_MS in hero-slideshow.js if either changes. */ transition: opacity 1s var(--ease-standard); } .hero__slide.is-active { opacity: 1; z-index: 1; } @media (prefers-reduced-motion: reduce) { .hero__slide { transition: none; } } /* "by AKSO" — centered over the slideshow, independent of the bottom-aligned .hero__content block. Uses .text-accent (the site's single editorial serif-italic voice, otherwise reserved for pull quotes) since this is exactly that kind of sparing, special-occasion usage. The text-shadow guarantees legibility regardless of how bright or dark the current slide is — the scrim gradient below is intentionally lightest through the vertical middle of the hero (where this sits), so it can't be relied on alone for contrast here the way it can for the bottom-aligned title. */ .hero__credit { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; margin: 0; font-size: clamp(1.5rem, 1vw + 1.3rem, 2.5rem); letter-spacing: var(--tracking-wide); text-align: center; white-space: nowrap; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.4); pointer-events: none; } /* Scrim for headline legibility over the video, heavier toward the bottom where the headline and scroll cue sit. */ .hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.15) 45%, rgba(10, 10, 10, 0.55) 100%); pointer-events: none; } .hero__content { position: relative; z-index: 2; width: 100%; padding: 0 var(--section-padding-x) var(--space-8); display: flex; flex-direction: column; gap: var(--space-5); } .hero__eyebrow { color: var(--color-text-secondary); display: flex; align-items: center; gap: var(--space-2); } .hero__eyebrow::before { content: ""; display: inline-block; width: var(--space-4); height: 1px; background-color: var(--color-text-secondary); } .hero__title { max-width: 19ch; /* Intentionally smaller than the site-wide .text-hero utility (~12% down) so the headline has more air around it — a Home-page refinement only; other pages using .text-hero keep the full scale. */ font-size: clamp(2.6rem, 2.4vw + 3.6vw, 7rem); color: var(--color-text-primary); } /* SplitText (assets/js/modules/hero-video.js) wraps each line in this element with .hero__title-line for the entrance animation; the base state below is the pre-JS / reduced-motion fallback so text is never invisible if the script fails or is skipped. */ .hero__title-line { overflow: hidden; display: block; } .hero__title-line > span { display: inline-block; will-change: transform; } .hero__footer-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-4); } .hero__tagline { max-width: 40ch; } @media (max-width: 768px) { .hero__content { padding-bottom: var(--space-6); gap: var(--space-3); } .hero__footer-row { flex-direction: column; align-items: flex-start; gap: var(--space-4); } } /* --------------------------------------------------------------------- 2. INTRO STATEMENT Short, oversized editorial line. Contained width for readability. --------------------------------------------------------------------- */ .intro { padding-block: var(--space-8); } .intro__statement { max-width: 26ch; font-size: clamp(1.75rem, 1.5vw + 1.75rem, 3.25rem); line-height: var(--leading-snug); } @media (max-width: 900px) { .intro { padding-block: var(--space-6); } } /* --------------------------------------------------------------------- 3. SELECTED WORK Full-bleed editorial list — large rows, image reveals on hover (desktop), always-visible thumbnail on mobile/touch. --------------------------------------------------------------------- */ .selected-work { border-top: 1px solid var(--color-border); } .work-list { display: flex; flex-direction: column; } .work-item { position: relative; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid var(--color-border); transition: border-color var(--duration-base) var(--ease-standard); } .work-item:hover, .work-item:focus-within { border-color: var(--color-border-hover); } .work-item__link { position: absolute; inset: 0; z-index: 2; } .work-item__title { font-size: clamp(1.75rem, 4vw, 3.25rem); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); transition: transform var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-standard); } .work-item:hover .work-item__title, .work-item:focus-within .work-item__title { transform: translateX(var(--space-2)); } .work-item__category { color: var(--color-text-muted); white-space: nowrap; } .work-item__year { color: var(--color-text-muted); white-space: nowrap; } /* Floating preview image that follows hover on desktop (position set by scroll-animations.js's pointer handler). Hidden entirely on touch devices in favour of the static thumbnail below. */ .work-item__preview { position: fixed; top: 0; left: 0; z-index: var(--z-overlay); width: 360px; aspect-ratio: 3 / 2; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(0.96); transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-out); overflow: hidden; } .work-item__preview img { width: 100%; height: 100%; object-fit: cover; } @media (hover: hover) and (pointer: fine) { .work-item:hover .work-item__preview, .work-item:focus-within .work-item__preview { opacity: 1; transform: translate(-50%, -50%) scale(1); } } /* Touch / coarse-pointer fallback: static thumbnail inline with the row */ .work-item__thumb { display: none; } @media (hover: none), (pointer: coarse) { .work-item { grid-template-columns: 96px 1fr auto; } .work-item__thumb { display: block; width: 96px; aspect-ratio: 4 / 3; overflow: hidden; } .work-item__thumb img { width: 100%; height: 100%; object-fit: cover; } .work-item__year { display: none; } .work-item__preview { display: none; } } @media (max-width: 640px) { .work-item { grid-template-columns: 72px 1fr; row-gap: var(--space-1); } .work-item__thumb { width: 72px; } .work-item__category { grid-column: 2; font-size: var(--text-caption); } } /* --------------------------------------------------------------------- 4. PHOTOS / VIDEOS SPLIT Two large tappable panels, 50/50 desktop, stacked mobile. --------------------------------------------------------------------- */ .split-panels { display: grid; grid-template-columns: 1fr 1fr; } .split-panel { position: relative; display: flex; align-items: flex-end; min-height: 640px; overflow: hidden; } .split-panel__media { position: absolute; inset: 0; z-index: 0; transition: transform var(--duration-slow) var(--ease-out); } .split-panel__media img { width: 100%; height: 100%; object-fit: cover; } /* Equal-cell thumbnail collages for the Photos / Videos panels. */ .split-panel__media--collage { display: grid; gap: 2px; background: var(--color-bg); transform: none; } .split-panel__media--photo-collage { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); } .split-panel__media--video-collage { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); } .split-panel__media--collage img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; } .split-panel__media--video-collage img { filter: saturate(0.85); } .split-panel:hover .split-panel__media--collage, .split-panel:focus-within .split-panel__media--collage { transform: scale(1.02); } .split-panel__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(10, 10, 10, 0.85) 0%, rgba(10, 10, 10, 0.1) 60%); } .split-panel__content { position: relative; z-index: 2; width: 100%; padding: var(--space-5); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); } .split-panel__link { position: absolute; inset: 0; z-index: 3; } .split-panel__title { font-size: clamp(2rem, 4vw, 3.5rem); } .split-panel__meta { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); color: var(--color-text-secondary); text-align: right; } .split-panel__arrow { width: 20px; height: 20px; transition: transform var(--duration-base) var(--ease-out); } .split-panel:hover .split-panel__arrow, .split-panel:focus-within .split-panel__arrow { transform: translate(4px, -4px); } @media (max-width: 900px) { .split-panels { grid-template-columns: 1fr; } .split-panel { min-height: 420px; } } /* --------------------------------------------------------------------- 5. ABOUT PREVIEW Portrait image + short bio excerpt, split layout. --------------------------------------------------------------------- */ .about-preview__media { overflow: hidden; } .about-preview__media img { width: 100%; height: 100%; object-fit: cover; } .about-preview__body { display: flex; flex-direction: column; justify-content: center; gap: var(--space-4); } .about-preview__body .eyebrow { color: var(--color-text-muted); } @media (max-width: 900px) { .about-preview .split { display: flex; flex-direction: column-reverse; } } /* --------------------------------------------------------------------- 6. CONTACT CTA BAND Inverted, full-width, single unmissable statement + button. --------------------------------------------------------------------- */ .cta-band { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); } .cta-band__title { max-width: 18ch; } .cta-band .btn-outline { border-color: var(--color-inverse-text); color: var(--color-inverse-text); } .cta-band .btn-outline:hover { background-color: var(--color-inverse-text); color: var(--color-inverse-bg); }