@import '../tokens.css?v=349798aa'; /* ── Featured stack (home concept page) ───────────────────────────────── * Full-viewport project panels that lock as you scroll: every panel is * sticky at the top of the viewport, so the next one in flow slides up * and covers it. js/page/home-featured.js adds the viewport snap — when * scrolling settles inside the stack, the window tweens to the nearest * panel boundary so each project squares up full-screen. * * Type sits directly on the media, anchored to the panel's corners — * counter top-right, title block bottom-left, CTA bottom-right — in * white ink that blend-inverts the media behind it (see below). */ .feature-stack { position: relative; /* Full bleed: break out of .main's gutter to the viewport edges using * the site's canonical pattern (see .featured-media in styles.css) — * it adapts to the responsive gutter, unlike a fixed negative margin. * 's overflow-x: hidden contains the scrollbar-width slop. */ margin-inline: calc(50% - 50vw); } /* The corner type sits on the same page gutter as the site chrome at * every breakpoint (48 desktop / 24 tablet / 20 phone — mirrors the * .header/.main paddings in styles.css). */ .feature-panel { --panel-gutter: var(--space-12); } @media (max-width: 1199px) { .feature-panel { --panel-gutter: var(--space-6); } } @media (max-width: 768px) { .feature-panel { --panel-gutter: var(--space-5); } } /* Immersive chrome: the header floats transparent over the panels on * this page (initHeaderReveal still hides it on scroll-down), so the * media truly owns the viewport. */ .header { background: transparent; } /* Type ink is a MEDIA-locked constant, not a theme token — the videos * keep their own colours in dark mode, so the type painted on them must * too. White ink + mix-blend-mode: difference (on the anchored type * blocks below) makes every glyph invert whatever the video is doing * behind it — contrast is self-solving on any frame, no outlines, no * scrims. */ .feature-panel { --panel-ink: #ffffff; position: sticky; top: 0; display: block; height: 100dvh; overflow: hidden; background: var(--color-surface-page); text-decoration: none; color: var(--panel-ink); } .feature-panel-media { position: absolute; inset: 0; } .feature-panel-media video, .feature-panel-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Corner anchors — the viewport edges own the type. The counter sits * upper-left on the same gutter as everything else and glides down out * of the way whenever the header reveals itself (initHeaderReveal * toggles .is-hidden), mirroring the header's own motion. */ .feature-panel-count { position: absolute; top: var(--space-12); left: var(--panel-gutter); font-size: var(--font-size-caption); line-height: var(--line-height-caption); letter-spacing: var(--letter-spacing-caption); font-weight: var(--font-weight-caption); color: var(--panel-ink); transition: top 320ms var(--ease-smooth); } body:has(.header:not(.is-hidden)) .feature-panel-count { top: var(--space-20); } .feature-panel-text { position: absolute; left: var(--panel-gutter); bottom: var(--space-12); max-width: 560px; } .feature-panel-title { font-size: var(--font-size-display-l); line-height: var(--line-height-display-l); letter-spacing: var(--letter-spacing-display-l); font-weight: var(--font-weight-display-l); color: var(--panel-ink); margin-bottom: var(--space-2); } .feature-panel-desc { font-size: var(--font-size-body); line-height: var(--line-height-body); letter-spacing: var(--letter-spacing-body); font-weight: var(--font-weight-body); color: var(--panel-ink); max-width: 44ch; } .feature-panel-cta { position: absolute; right: var(--panel-gutter); bottom: var(--space-12); color: var(--panel-ink); } /* Self-solving contrast: the anchored type inverts the media behind it. */ .feature-panel-count, .feature-panel-text, .feature-panel-cta { mix-blend-mode: difference; } /* The Artpilot panel swaps media on phones: hero video out, the * looping mark construction in (same block the homepage card uses, * driven by initArtpilotMarkLoop). */ .feature-panel-media .ap-mark-loop { display: none; } @media (max-width: 640px) { body:has(.header:not(.is-hidden)) .feature-panel-count { top: var(--space-16); } .feature-panel-media:has(.ap-mark-loop) .feature-panel-video { display: none; } .feature-panel-media .ap-mark-loop { display: flex; align-items: center; justify-content: center; height: 100%; padding: var(--space-8); } .feature-panel-media .ap-mark-loop-svg { width: 100%; max-width: 420px; } .feature-panel-text { right: var(--panel-gutter); bottom: calc(var(--space-12) + var(--space-8)); max-width: none; } .feature-panel-cta { right: auto; left: var(--panel-gutter); bottom: var(--space-6); } }