/* * Shop Apparel (/shop/): a port of the live N8TIVE Shopify storefront, theme * "N8TIVE mono" (n8tive-store repo: theme/assets/n8-theme.css). Keep the two in * step: tokens, components and the cinematic layer mirror the theme 1:1, minus * the Shopify-only pieces (header, cart, quick add, sheets, collection pages). * * Everything is scoped under body.n8-shop so no other portal page is touched. * Theme mapping: the store's :root[data-n8-scheme='dark'] is the portal's * `.dark` class on (components/theme.js contract); light is the base. * html.n8-cine is set in the page whenever the device allows motion, so * nothing in the cinematic layer needs its own reduced-motion guard. * * Anton (assets/fonts/n8-anton-latin.woff2) is Copyright 2020 The Anton Project Authors * (https://github.com/googlefonts/AntonFont), licensed under the SIL Open Font License, * Version 1.1 (https://openfontlicense.org). Subset to Latin from google/fonts ofl/anton. */ @font-face { font-family: 'Anton'; src: url('/assets/fonts/n8-anton-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215; } /* ---------- Tokens (light = theme settings, dark = n8-theme.css) ---------- */ .n8-shop { --n8-canvas: #f5f5f3; --n8-ink: #0a0a0a; --n8-card: #ffffff; --n8-line: #e2e2df; --n8-dark: #111111; --n8-gray: #6b6b6b; --n8-tile: #ecece9; --n8-tile-alt: #e4e4e0; --n8-accent: #c1121f; --n8-product-tile: var(--n8-tile); --n8-product-tile-alt: var(--n8-tile-alt); --n8-button-hover: #2c2c2c; --n8-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --n8-font-display: 'Anton', 'Arial Narrow', 'Helvetica Neue Condensed', Impact, sans-serif; --n8-gutter: clamp(16px, 4vw, 48px); --n8-max: 1680px; --n8-radius: 4px; --n8-radius-pill: 999px; --n8-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --n8-ease-cine: cubic-bezier(0.16, 1, 0.3, 1); --n8-dur: 320ms; --n8-focus: 2px solid var(--n8-ink); /* The portal's floating navbar pill (12px + 56px + 12px) stands in for the store header. */ --n8-header-h: 80px; --n8-card-radius: 8px; --n8-card-shadow: 0 1px 2px rgb(17 17 17 / 0.06), 0 18px 40px -22px rgb(17 17 17 / 0.4); /* Section colours set in the theme editor (light values); dark mode overrides some below. */ --n8-announce-bg: #111111; --n8-announce-fg: #ffffff; --n8-strip-bg: #111111; --n8-strip-fg: #f5f5f3; --n8-footer-bg: #1b1b1b; --n8-footer-fg: #ffffff; margin: 0; padding-top: var(--n8-header-h); background: var(--n8-canvas); color: var(--n8-ink); font-family: var(--n8-font-body); -webkit-font-smoothing: antialiased; } :root.dark .n8-shop { --n8-canvas: #0b0b0b; --n8-ink: #f2f2f0; --n8-card: #151515; --n8-line: #2a2a2a; --n8-gray: #9a9a9a; --n8-tile: #1c1c1c; --n8-tile-alt: #232323; --n8-accent: #ff6b6f; --n8-button-hover: #d6d6d3; --n8-product-tile: #e6e6e3; --n8-product-tile-alt: #dcdcd8; --n8-card-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 18px 40px -22px rgb(0 0 0 / 0.8); --n8-strip-bg: var(--n8-ink); --n8-strip-fg: var(--n8-canvas); } /* Hero and split colour blocks are set per panel in light mode; dark mode flattens them to the tile. */ :root.dark .n8-shop [style*='--n8-fallback-bg'] { --n8-fallback-bg: var(--n8-tile) !important; } /* Smooth the light/dark switch, but never animate the first paint or for reduced-motion users. */ @media (prefers-reduced-motion: no-preference) { .n8-js .n8-shop { transition: background-color var(--n8-dur) var(--n8-ease), color var(--n8-dur) var(--n8-ease); } } /* ---------- Base ---------- */ .n8-shop *, .n8-shop *::before, .n8-shop *::after { box-sizing: border-box; } .n8-shop img { max-width: 100%; } .n8-shop .n8-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .n8-shop .n8-skip { position: absolute; top: -60px; left: 12px; z-index: 60; padding: 10px 16px; border-radius: var(--n8-radius-pill); background: var(--n8-ink); color: var(--n8-canvas); font: 700 13px/1 var(--n8-font-body); text-decoration: none; } .n8-shop .n8-skip:focus { top: 12px; } .n8-shop .n8-container { width: 100%; max-width: var(--n8-max); margin-inline: auto; padding-inline: var(--n8-gutter); } .n8-shop .n8-display { font-family: var(--n8-font-display); font-weight: 400; text-transform: uppercase; line-height: 0.92; letter-spacing: 0.005em; margin: 0; text-wrap: balance; } /* Visible focus everywhere on the page. */ .n8-shop :focus-visible { outline: var(--n8-focus); outline-offset: 3px; border-radius: 2px; box-shadow: none; } .n8-shop :is(.n8-footer, .n8-announce) :focus-visible { outline-color: currentColor; } .n8-shop .n8-chip { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 12px; border-radius: var(--n8-radius-pill); background: var(--n8-card); color: var(--n8-ink); font: 600 11px/1 var(--n8-font-body); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } .n8-shop .n8-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border: 0; border-radius: var(--n8-radius-pill); background: var(--n8-ink); color: var(--n8-canvas); font: 700 13px/1 var(--n8-font-body); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color 160ms ease, transform 160ms ease; } .n8-shop .n8-button:hover { background: var(--n8-button-hover); } .n8-shop .n8-button:active { transform: scale(0.98); } .n8-shop .n8-button .n8-icon { width: 18px; height: 18px; transition: transform 200ms var(--n8-ease); } .n8-shop .n8-button:hover .n8-icon { transform: translateX(3px); } .n8-shop .n8-link { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .n8-shop .n8-link:hover { text-decoration-thickness: 2px; } .n8-shop .n8-icon { width: 22px; height: 22px; flex: none; } .n8-shop .n8-icon-button { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; text-decoration: none; transition: background-color 160ms ease, opacity 160ms ease; } .n8-shop .n8-icon-button:hover { background: color-mix(in srgb, currentColor 8%, transparent); } .n8-shop .n8-icon-button--outline { border: 1px solid currentColor; } .n8-shop .n8-icon-button--outline:hover { background: var(--n8-ink); color: var(--n8-canvas); } .n8-shop .n8-icon-button[disabled] { opacity: 0.3; cursor: default; pointer-events: none; } .n8-shop .n8-section { padding-block: clamp(48px, 7vw, 104px); } /* ---------- Delivery promise ---------- */ .n8-shop .n8-delivery { display: flex; align-items: flex-start; gap: 8px; margin: 0; font: 500 14px/1.4 var(--n8-font-body); } .n8-shop .n8-delivery__icon { width: 20px; height: 20px; margin-top: -1px; } .n8-shop .n8-delivery__range { font-weight: 700; white-space: nowrap; } /* ---------- Announcement ---------- */ .n8-shop .n8-announce { background: var(--n8-announce-bg); color: var(--n8-announce-fg); font: 600 11px/1 var(--n8-font-body); letter-spacing: 0.1em; text-transform: uppercase; text-align: center; } .n8-shop .n8-announce__track { display: grid; min-height: 34px; place-items: center; padding-inline: var(--n8-gutter); } .n8-shop .n8-announce__item { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(6px); transition: opacity 360ms ease, transform 360ms var(--n8-ease); pointer-events: none; } .n8-shop .n8-announce__item.is-active { opacity: 1; transform: none; pointer-events: auto; } /* ---------- Media fallback + mockup card ---------- */ .n8-shop .n8-media { position: absolute; inset: 0; overflow: hidden; } .n8-shop .n8-fallback { position: absolute; inset: 0; background: var(--n8-fallback-bg, var(--n8-tile)); } /* * Product mockup card (hero + category split). The area is an in-flow flex/grid child that only gets * the space the text block leaves, so the card can never overlap copy; the card is centred in it with * a guaranteed --n8-mockup-pad gap on every side. White card + radius + shadow on purpose: the * mockups ship on white, so the white is framed as a card instead of fighting the colour block. */ .n8-shop .n8-mockup-area { position: relative; z-index: 1; flex: 1 1 auto; min-height: clamp(140px, 30vw, 220px); pointer-events: none; } .n8-shop .n8-mockup { position: absolute; inset: var(--n8-mockup-pad, 24px); display: block; width: auto; height: auto; max-width: min(calc(100% - var(--n8-mockup-pad, 24px) * 2), 460px); max-height: calc(100% - var(--n8-mockup-pad, 24px) * 2); margin: auto; padding: 10px; object-fit: contain; background: #ffffff; border-radius: var(--n8-card-radius); box-shadow: var(--n8-card-shadow); transition: transform 700ms var(--n8-ease); } /* ---------- Hero triptych ---------- */ .n8-shop .n8-hero { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--n8-hero-gap, 4px); } /* Panels are flex columns: [mockup area (grows)] then [text block]. Text never overlaps the mockup. */ .n8-shop .n8-hero__panel { --n8-mockup-pad: clamp(16px, 3vw, 40px); position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 1; overflow: clip; isolation: isolate; color: var(--n8-ink); } .n8-shop .n8-hero__panel--content { grid-column: 1 / -1; order: -1; aspect-ratio: auto; min-height: clamp(460px, 115vw, 680px); } .n8-shop .n8-hero__media { position: absolute; inset: 0; z-index: -1; will-change: transform; } .n8-shop .n8-hero__media .n8-media { transition: transform 900ms var(--n8-ease); } .n8-shop .n8-hero__content { position: relative; z-index: 1; flex: none; display: grid; justify-items: start; gap: 14px; padding: clamp(20px, 4vw, 48px); } .n8-shop .n8-hero__heading { font-size: clamp(48px, 13vw, 96px); } .n8-shop .n8-hero__tagline { max-width: 32ch; margin: 0; font: 500 16px/1.45 var(--n8-font-body); } .n8-shop .n8-hero__panel-link { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: clamp(14px, 2vw, 28px); color: inherit; font: 800 13px/1 var(--n8-font-body); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; } /* Whole panel is clickable; the link row itself stays in flow below the mockup. */ .n8-shop .n8-hero__panel-link::after { content: ''; position: absolute; inset: 0; z-index: 2; } .n8-shop .n8-hero__panel-link:focus-visible { outline: none; } .n8-shop .n8-hero__panel:has(.n8-hero__panel-link:focus-visible) { outline: var(--n8-focus); outline-offset: -4px; } .n8-shop .n8-hero__panel-link > span:first-child { padding: 10px 14px; border-radius: var(--n8-radius-pill); background: var(--n8-card); color: var(--n8-ink); } .n8-shop .n8-hero__panel-link .n8-icon { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--n8-ink); color: var(--n8-canvas); transition: transform 220ms var(--n8-ease); } .n8-shop .n8-hero__panel-link:hover .n8-icon { transform: rotate(45deg); } /* Triptych from 990px; below that: content panel full width, the other two side by side. */ @media (min-width: 990px) { .n8-shop .n8-hero { grid-template-columns: repeat(var(--n8-panels, 3), 1fr); } .n8-shop .n8-hero__panel, .n8-shop .n8-hero__panel--content { grid-column: auto; order: 0; aspect-ratio: auto; min-height: var(--n8-hero-h); } .n8-shop .n8-hero--tall { --n8-hero-h: clamp(560px, calc(100svh - var(--n8-header-h) - 34px), 1000px); } .n8-shop .n8-hero__heading { font-size: clamp(48px, 5vw, 104px); } } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .n8-shop .n8-hero__panel:hover .n8-media { transform: scale(1.04); } .n8-shop .n8-hero__panel:hover .n8-mockup, .n8-shop .n8-split__tile:hover .n8-mockup { transform: translateY(-4px); } } /* ---------- Product rail ---------- */ .n8-shop .n8-rail__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: clamp(20px, 3vw, 36px); } .n8-shop .n8-rail__title { font-size: clamp(44px, 8vw, 96px); } .n8-shop .n8-rail__subtitle { margin: 10px 0 0; color: var(--n8-gray); font: 500 15px/1.4 var(--n8-font-body); } .n8-shop .n8-rail__controls { display: flex; align-items: center; gap: 8px; } .n8-shop .n8-rail__all { margin-right: 8px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; } .n8-shop .n8-rail__controls .n8-icon-button { display: none; } .n8-shop .n8-rail[data-overflow] .n8-rail__controls .n8-icon-button { display: inline-grid; } .n8-shop .n8-rail__viewport { display: block; margin-inline: calc(var(--n8-gutter) * -1); } .n8-shop .n8-rail__track { display: grid; grid-auto-flow: column; grid-auto-columns: min(82vw, 440px); gap: 12px; margin: 0; padding: 12px var(--n8-gutter) 16px; list-style: none; overflow-x: auto; /* Never scroll vertically: a vertically scrollable track swallows the mouse wheel and the page stops. */ overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--n8-gutter); scrollbar-width: none; } .n8-shop .n8-rail__track::-webkit-scrollbar { display: none; } .n8-shop .n8-rail__item { scroll-snap-align: start; } .n8-shop .n8-rail__viewport[data-dragging] .n8-rail__track { scroll-snap-type: none; cursor: grabbing; user-select: none; } .n8-shop .n8-rail__viewport[data-dragging] a { pointer-events: none; } @media (min-width: 750px) { .n8-shop .n8-rail__track { grid-auto-columns: calc((100% - var(--n8-gutter) * 2 - 16px * 1.4) / 2.4); gap: 16px; } } @media (min-width: 1200px) { .n8-shop .n8-rail__track { grid-auto-columns: calc((100% - var(--n8-gutter) * 2 - 16px * 2.3) / 3.3); } } /* ---------- Product card ---------- */ .n8-shop .n8-card { position: relative; display: flex; flex-direction: column; gap: 14px; height: 100%; } .n8-shop .n8-card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--n8-radius); background: var(--n8-tile-tint, var(--n8-product-tile)); isolation: isolate; } /* Mockups: a white card (padding, radius, shadow) floating on the tinted tile, same card as hero/split. */ .n8-shop .n8-card__img { position: absolute; inset: 9%; width: 82%; height: 82%; padding: 5%; object-fit: contain; background: #ffffff; border-radius: var(--n8-card-radius); box-shadow: var(--n8-card-shadow); transition: opacity 360ms ease, transform 700ms var(--n8-ease); } .n8-shop .n8-card__img--alt { opacity: 0; } @media (hover: hover) { .n8-shop .n8-card:hover .n8-card__img--alt, .n8-shop .n8-card:focus-within .n8-card__img--alt { opacity: 1; } .n8-shop .n8-card:has(.n8-card__img--alt):hover .n8-card__img--primary, .n8-shop .n8-card:has(.n8-card__img--alt):focus-within .n8-card__img--primary { opacity: 0; } } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .n8-shop .n8-card:hover .n8-card__img { transform: scale(1.03); } } .n8-shop .n8-card__info { display: grid; gap: 6px; } .n8-shop .n8-card__title { margin: 0; font: 700 15px/1.3 var(--n8-font-body); text-transform: none; letter-spacing: 0; } .n8-shop .n8-card__link { color: inherit; text-decoration: none; } .n8-shop .n8-card__link::after { content: ''; position: absolute; inset: 0; z-index: 1; } .n8-shop .n8-card__link:focus-visible { outline: none; } .n8-shop .n8-card:has(.n8-card__link:focus-visible) .n8-card__media { outline: var(--n8-focus); outline-offset: 3px; } .n8-shop .n8-card__price { margin: 0; font: 500 15px/1.3 var(--n8-font-body); } /* ---------- Category split ---------- */ .n8-shop .n8-split__head { display: grid; gap: 12px; margin-bottom: clamp(20px, 3vw, 36px); } .n8-shop .n8-split__heading { font-size: clamp(44px, 8vw, 96px); } .n8-shop .n8-split__text { max-width: 48ch; margin: 0; color: var(--n8-gray); font: 500 16px/1.45 var(--n8-font-body); } .n8-shop .n8-split__grid { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } /* Stacked: [mockup area (grows)] over [text block]. Side by side from 1200px. */ .n8-shop .n8-split__tile { --n8-mockup-pad: clamp(16px, 3vw, 36px); position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 4 / 5; overflow: clip; border-radius: var(--n8-radius); isolation: isolate; color: var(--n8-ink); } .n8-shop .n8-split__media { position: absolute; inset: 0; z-index: -1; } .n8-shop .n8-split__tile .n8-media { transition: transform 900ms var(--n8-ease); } .n8-shop .n8-split__body { flex: none; display: grid; justify-items: start; gap: 12px; padding: clamp(20px, 3vw, 40px); } .n8-shop .n8-split__title { font-size: clamp(44px, 6vw, 88px); } .n8-shop .n8-split__link { color: inherit; text-decoration: none; } .n8-shop .n8-split__link::after { content: ''; position: absolute; inset: 0; z-index: 3; } .n8-shop .n8-split__link:focus-visible { outline: none; } .n8-shop .n8-split__tile:has(.n8-split__link:focus-visible) { outline: var(--n8-focus); outline-offset: 3px; } .n8-shop .n8-split__copy { max-width: 36ch; margin: 0; font: 500 15px/1.45 var(--n8-font-body); } @media (min-width: 750px) { .n8-shop .n8-split__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } } @media (min-width: 1200px) { .n8-shop .n8-split__tile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; aspect-ratio: 5 / 4; } .n8-shop .n8-split__body { grid-column: 1; grid-row: 1; } .n8-shop .n8-split__mockup { grid-column: 2; grid-row: 1; align-self: stretch; min-height: 0; } } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .n8-shop .n8-split__tile:hover .n8-media { transform: scale(1.04); } .n8-shop .n8-split__tile:hover .n8-button .n8-icon { transform: translateX(3px); } } /* ---------- Brand strip ---------- */ /* The colour lives on this div, not the
: sui-theme.css flattens every section background. */ .n8-shop .n8-strip { overflow: hidden; background: var(--n8-strip-bg); color: var(--n8-strip-fg); } .n8-shop .n8-strip__viewport { display: flex; width: max-content; min-width: 100%; } .n8-shop .n8-strip__list { display: flex; flex: none; align-items: center; justify-content: flex-start; gap: clamp(16px, 3vw, 40px); margin: 0; padding: clamp(18px, 2.4vw, 30px) clamp(16px, 3vw, 40px) clamp(18px, 2.4vw, 30px) 0; list-style: none; font-family: var(--n8-font-display); font-size: clamp(26px, 4.4vw, 60px); line-height: 1; text-transform: uppercase; white-space: nowrap; } @media (prefers-reduced-motion: no-preference) { .n8-shop .n8-strip__viewport { animation: n8-marquee var(--n8-strip-speed, 30s) linear infinite; } .n8-shop .n8-strip:hover .n8-strip__viewport { animation-play-state: paused; } } /* Reduced motion: no marquee; one centred, wrapping copy of the list. */ @media (prefers-reduced-motion: reduce) { .n8-shop .n8-strip__list[aria-hidden='true'] { display: none; } .n8-shop .n8-strip__list { flex-wrap: wrap; justify-content: center; white-space: normal; min-width: 100%; padding-inline: clamp(8px, 1.5vw, 20px); } .n8-shop .n8-strip__list > li:last-child { display: none; } } @keyframes n8-marquee { to { transform: translateX(-50%); } } /* ---------- Footer ---------- */ .n8-shop .n8-footer { --n8-ink: #ffffff; background: var(--n8-footer-bg); color: var(--n8-footer-fg); } :root.dark .n8-shop .n8-footer { border-top: 1px solid var(--n8-line); } .n8-shop .n8-footer a { color: inherit; } .n8-shop .n8-footer__top { display: grid; gap: 40px; padding-block: clamp(48px, 7vw, 96px) 40px; } .n8-shop .n8-footer__wordmark { margin: 0; font-family: var(--n8-font-display); font-size: clamp(72px, 18vw, 200px); line-height: 0.85; text-transform: uppercase; } .n8-shop .n8-footer__tagline { max-width: 36ch; margin: 16px 0; font: 500 16px/1.45 var(--n8-font-body); } .n8-shop .n8-footer__delivery { color: rgb(255 255 255 / 0.8); } .n8-shop .n8-footer__delivery + .n8-footer__delivery { margin-top: 8px; } .n8-shop .n8-footer__heading { margin: 0 0 14px; font: 700 12px/1 var(--n8-font-body); letter-spacing: 0.1em; text-transform: uppercase; } .n8-shop .n8-footer__links { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font: 500 15px/1.3 var(--n8-font-body); } .n8-shop .n8-footer__links a { text-decoration: none; } .n8-shop .n8-footer__links a:hover { text-decoration: underline; } .n8-shop .n8-footer__small { margin: 0 0 12px; color: rgb(255 255 255 / 0.78); font: 500 13px/1.45 var(--n8-font-body); } .n8-shop .n8-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding-block: 24px 32px; border-top: 1px solid rgb(255 255 255 / 0.18); } .n8-shop .n8-footer__bottom .n8-footer__small { margin: 0; } @media (min-width: 990px) { .n8-shop .n8-footer__top { grid-template-columns: 2fr repeat(auto-fit, minmax(160px, 1fr)); align-items: start; } } /* ---------- Scroll reveal (JS + motion OK only) ---------- */ @media (prefers-reduced-motion: no-preference) { .n8-reveal-on .n8-shop [data-n8-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--n8-ease), transform 700ms var(--n8-ease); transition-delay: var(--n8-reveal-delay, 0ms); } .n8-reveal-on .n8-shop [data-n8-reveal].is-revealed { opacity: 1; transform: none; } } /* ---------- Reduced motion: kill every N8 transition and transform ---------- */ @media (prefers-reduced-motion: reduce) { .n8-shop .n8-announce__item, .n8-shop .n8-card__img, .n8-shop .n8-hero__media .n8-media, .n8-shop .n8-split__tile .n8-media, .n8-shop .n8-button .n8-icon, .n8-shop .n8-hero__panel-link .n8-icon, .n8-shop .n8-mockup { transition: none !important; } .n8-shop .n8-hero__media { transform: none !important; } } /* ---------- Cinematic layer ---------- */ /* Film grain over everything; never intercepts clicks. */ .n8-cine .n8-shop::after { content: ''; position: fixed; inset: -50%; z-index: 2147483000; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: n8-grain 900ms steps(5) infinite; } :root.dark.n8-cine .n8-shop::after { opacity: 0.07; } @keyframes n8-grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } } /* Hero intro: letterbox bars retract, panels open like curtains, media settles from a slow zoom, then the headline rises out of a mask. */ .n8-cine .n8-shop .n8-hero::before, .n8-cine .n8-shop .n8-hero::after { content: ''; position: absolute; inset-inline: 0; z-index: 3; height: 14%; background: #000000; pointer-events: none; animation: n8-letterbox 1300ms var(--n8-ease-cine) 150ms forwards; } .n8-cine .n8-shop .n8-hero::before { top: 0; transform-origin: top; } .n8-cine .n8-shop .n8-hero::after { bottom: 0; transform-origin: bottom; } @keyframes n8-letterbox { to { transform: scaleY(0); } } .n8-cine .n8-shop .n8-hero__panel { animation: n8-curtain 1200ms var(--n8-ease-cine) backwards; animation-delay: calc(250ms + var(--n8-i, 0) * 140ms); } @keyframes n8-curtain { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } } .n8-cine .n8-shop .n8-hero__media .n8-media { animation: n8-settle 2600ms var(--n8-ease-cine) backwards; animation-delay: calc(250ms + var(--n8-i, 0) * 140ms); } @keyframes n8-settle { from { transform: scale(1.22); filter: brightness(0.4); } } .n8-cine .n8-shop .n8-hero__mockup { animation: n8-float-in 1400ms var(--n8-ease-cine) backwards; animation-delay: calc(650ms + var(--n8-i, 0) * 140ms); } @keyframes n8-float-in { from { opacity: 0; transform: translateY(48px) scale(0.94); } } .n8-cine .n8-shop .n8-hero__heading { animation: n8-mask-rise 1100ms var(--n8-ease-cine) 700ms backwards; } @keyframes n8-mask-rise { from { clip-path: inset(0 0 100% 0); transform: translateY(35%); } to { clip-path: inset(0 0 -20% 0); transform: none; } } .n8-cine .n8-shop .n8-hero__chip, .n8-cine .n8-shop .n8-hero__tagline, .n8-cine .n8-shop .n8-hero__button, .n8-cine .n8-shop .n8-hero__panel-link { animation: n8-fade-up 900ms var(--n8-ease-cine) backwards; animation-delay: 1050ms; } .n8-cine .n8-shop .n8-hero__chip { animation-delay: 550ms; } .n8-cine .n8-shop .n8-hero__button { animation-delay: 1200ms; } @keyframes n8-fade-up { from { opacity: 0; transform: translateY(18px); } } /* Scroll-linked: the hero's copy drifts up and fades as the page scrolls (progress set by ). */ .n8-cine .n8-shop .n8-hero__content { opacity: calc(1 - var(--n8-hero-progress, 0) * 1.6); transform: translate3d(0, calc(var(--n8-hero-progress, 0) * -80px), 0); } /* Pointer spotlight on hero panels. */ .n8-cine .n8-shop .n8-hero__panel::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: radial-gradient( 520px circle at var(--n8-mx, 50%) var(--n8-my, 50%), rgb(255 255 255 / 0.16), transparent 60% ); transition: opacity 400ms ease; } .n8-cine .n8-shop .n8-hero__panel:hover::before { opacity: 1; } /* Product tiles tilt toward the pointer with a moving glare (mouse/trackpad only). */ @media (hover: hover) and (pointer: fine) { .n8-cine .n8-shop .n8-card__media { transform: perspective(900px) rotateX(var(--n8-rx, 0deg)) rotateY(var(--n8-ry, 0deg)); transition: transform 500ms var(--n8-ease-cine), box-shadow 500ms ease; } .n8-cine .n8-shop .n8-card.is-tilting .n8-card__media { transition: transform 90ms linear, box-shadow 500ms ease; box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.6); } .n8-cine .n8-shop .n8-card__media::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: radial-gradient( circle at var(--n8-gx, 50%) var(--n8-gy, 50%), rgb(255 255 255 / 0.35), transparent 55% ); mix-blend-mode: soft-light; transition: opacity 300ms ease; } .n8-cine .n8-shop .n8-card.is-tilting .n8-card__media::after { opacity: 1; } } /* Section headings wipe up out of a mask as they scroll into view. Pure CSS (scroll-driven), so a heading can never get stuck hidden; unsupported browsers just show it. */ @supports (animation-timeline: view()) { .n8-cine .n8-shop .n8-display:not(.n8-hero__heading) { animation: n8-mask-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; } }