/* ============================================================================ YummiCo — "Fully Stocked" (concept C, multi-page) The design idea is ABUNDANCE. This shop's pitch is that there is an overwhelming amount of stuff in it — "variety of products" is the single most common phrase in its 133 reviews — so the page shows dozens of products at once rather than three or five. The chrome is quiet on purpose: every colour on screen comes out of the photography. Palette sampled from YummiCo's own sign and interior. ========================================================================== */ :root { color-scheme: light; --ink: #15131A; --ink-2: #4C4656; --ink-3: #7B7488; --paper: #FAF7F4; /* their stucco, lightened */ --white: #FFFFFF; --line: #E6DEDA; --coral: #D9414C; /* the sign's oval */ --coral-dp:#B0323C; /* AA with white at body size */ --magenta: #B52E6B; /* the shop's accent wall */ --cobalt: #1F49A8; /* the est.2025 starburst */ --ice: #CFE2F8; /* the wordmark */ --yellow: #F2C230; /* the bollards */ --r: 4px; --maxw: 1360px; --read: 68ch; --gut: clamp(16px, 3.6vw, 56px); --display: "Unbounded", "Trebuchet MS", system-ui, sans-serif; --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; --shadow: 0 1px 2px rgba(21,19,26,.05), 0 10px 30px rgba(21,19,26,.08); } /* ───────────────────── immersive body chapters ───────────────────── The measured figure stays in normal flow. Motion belongs to its inner button/image so scroll geometry never feeds on its own transform. */ .scroll-story { --story-progress: 0; position: relative; min-height: 255vh; padding: clamp(80px, 11vw, 160px) 0; color: var(--white); background: radial-gradient(circle at calc(12% + var(--story-progress) * 70%) 22%, rgba(255,255,255,.15), transparent 24%), linear-gradient(145deg, #2a202a, #15131a 60%); overflow: clip; } .scroll-story--coral { background-color: #5b1828; background-image: radial-gradient(circle at calc(10% + var(--story-progress) * 72%) 24%, rgba(242,194,48,.22), transparent 24%), linear-gradient(145deg, #7b2039, #24131d 66%); } .scroll-story--cobalt { background-color: #10235a; background-image: radial-gradient(circle at calc(10% + var(--story-progress) * 72%) 24%, rgba(207,226,248,.24), transparent 25%), linear-gradient(145deg, #214fae, #11172d 68%); } .scroll-story--visit { background-color: #7f2931; background-image: radial-gradient(circle at calc(10% + var(--story-progress) * 72%) 24%, rgba(242,194,48,.23), transparent 25%), linear-gradient(145deg, #b0323c, #32171b 70%); } .scroll-story::after { content: ""; position: absolute; inset: 0; opacity: .18; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 11.9%, rgba(255,255,255,.15) 12% 12.08%); } .scroll-story__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(260px, .78fr) minmax(0, 1.22fr); gap: clamp(42px, 8vw, 130px); align-items: start; } .scroll-story__copy { position: sticky; top: clamp(110px, 16vh, 180px); padding-bottom: 20vh; } .scroll-story__copy .eyebrow { color: rgba(255,255,255,.72); } .scroll-story__copy .h2 { max-width: 11ch; color: var(--white); } .scroll-story__copy > p:not(.eyebrow):not(.scroll-story__hint) { max-width: 42ch; color: rgba(255,255,255,.78); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.6; } .scroll-story__hint { margin-top: 34px; color: rgba(255,255,255,.58); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; } .scroll-story__stack { display: grid; gap: 34vh; padding: 4vh 0 28vh; } .story-card { --card-progress: 1; --card-distance: 1; margin: 0; position: relative; perspective: 1000px; } .story-card:nth-child(even) { width: 86%; margin-left: auto; } .story-card .plate { display: block; width: 100%; border-radius: 2px; box-shadow: 0 32px 80px rgba(0,0,0,.34); transform: translate3d(calc(var(--card-progress) * 34px), calc(var(--card-distance) * 22px), 0) scale(calc(1 - var(--card-distance) * .055)); transition: box-shadow .25s ease; } .story-card .plate:hover { box-shadow: 0 38px 100px rgba(0,0,0,.48); } .story-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .story-card figcaption { display: flex; justify-content: space-between; gap: 16px; padding: 14px 2px 0; color: rgba(255,255,255,.88); font-weight: 600; } .story-card figcaption span { color: rgba(255,255,255,.48); font-family: var(--display); } /* A different image language for each landing page. */ .scroll-story--deck .scroll-story__stack { position: relative; gap: 18vh; } .scroll-story--deck .story-card { transform-origin: 50% 110%; } .scroll-story--deck .story-card--one { transform: translate3d(calc(var(--story-progress) * 5vw),0,0); } .scroll-story--deck .story-card--two { transform: translate3d(calc(var(--story-progress) * -4vw),0,0); } .scroll-story--deck .story-card--three { transform: translate3d(calc(var(--story-progress) * 3vw),0,0); } .scroll-story--deck .story-card .plate { border: 8px solid rgba(255,255,255,.92); box-shadow: 0 35px 80px rgba(20,4,12,.42); } .scroll-story--walk .story-card { width: min(760px,92%); margin-inline:auto; transform-origin: 50% 100%; } .scroll-story--walk .story-card .plate { border-radius: 2px; } .scroll-story--walk .story-card--one { transform: perspective(1100px) translateZ(calc(var(--story-progress) * 110px)) translateY(calc(var(--story-progress) * -5vh)); } .scroll-story--walk .story-card--two { transform: perspective(1100px) translateZ(calc(var(--story-progress) * 180px)) translateY(calc(var(--story-progress) * -9vh)); } .scroll-story--walk .story-card--three { transform: perspective(1100px) translateZ(calc(var(--story-progress) * 250px)) translateY(calc(var(--story-progress) * -12vh)); } .scroll-story--arrival .scroll-story__stack { border-left: 1px solid rgba(255,255,255,.25); padding-left: clamp(25px,5vw,70px); } .scroll-story--arrival .story-card { border-radius: 999px 999px 28px 28px; overflow: hidden; } .scroll-story--arrival .story-card .plate { border-radius: inherit; } .scroll-story--arrival .story-card:nth-child(2) { margin-left: -3vw; } .scroll-story--arrival .story-card:nth-child(3) { margin-left: 4vw; } .taste-reel { overflow: hidden; padding: clamp(80px,10vw,140px) 0; background: #15131a; color: white; } .taste-reel .eyebrow,.taste-reel .prose { color: rgba(255,255,255,.68); } .taste-reel__head { margin-bottom: 38px; } .taste-reel__track { display:grid; grid-auto-flow:column; grid-auto-columns:min(72vw,620px); gap:clamp(18px,3vw,38px); overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x mandatory; padding:0 max(24px,calc((100vw - 1180px)/2)) 24px; scrollbar-width:thin; scrollbar-color:#f2c230 transparent; cursor:grab; } .taste-reel__track:active { cursor:grabbing; } .taste-reel__track figure { scroll-snap-align:center; margin:0; } .taste-reel__track .plate { aspect-ratio:16/10; border-radius:24px; } .taste-reel__track img { width:100%; height:100%; object-fit:cover; transform:scale(1.035); transition:transform .7s cubic-bezier(.2,.8,.2,1); } .taste-reel__track figure:hover img { transform:scale(1); } .taste-reel__track figcaption { color:rgba(255,255,255,.65); padding-top:12px; letter-spacing:.08em; text-transform:uppercase; font-size:12px; } .band--cinema::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(6,7,12,.34),transparent 28%,transparent 72%,rgba(6,7,12,.36)),linear-gradient(0deg,rgba(6,7,12,.45),transparent 48%); mix-blend-mode:multiply; } .phead__media img,.phead__media video,.band img,.cat img { filter:saturate(.92) contrast(1.06) brightness(.96); } /* Existing galleries gain depth while retaining their established layout and lightbox. Only the inner plate moves; captions and hit areas remain stable. */ .grid > figure, .mosaic > figure { --card-progress: 0; --card-distance: 0; perspective: 900px; } .grid > figure > .plate, .mosaic > figure > .plate { transform: translate3d(0, calc(var(--card-progress) * -16px), 0) scale(calc(1 - var(--card-distance) * .018)); transform-origin: 50% 50%; transition: box-shadow .3s ease; } .grid > figure > .plate:hover, .mosaic > figure > .plate:hover { box-shadow: 0 24px 55px rgba(21,19,26,.19); } .cats > .cat { --card-progress: 0; } .cats > .cat img { transform: translateY(calc(var(--card-progress) * -12px)) scale(1.055); } @media (max-width: 760px) { .scroll-story { min-height: auto; padding: 78px 0 96px; } .scroll-story__grid { grid-template-columns: 1fr; gap: 44px; } .scroll-story__copy { position: relative; top: auto; padding: 0; } .scroll-story__copy .h2 { max-width: 12ch; } .scroll-story__hint { display: none; } .scroll-story__stack { gap: 64px; padding: 0; } .story-card:nth-child(even) { width: 92%; } .story-card:nth-child(odd) { width: 94%; } .story-card:nth-child(3) { margin-left: auto; } .scroll-story--deck .scroll-story__stack { position:relative; display:block; min-height:960px; } .scroll-story--deck .story-card { position:sticky; top:110px; width:100%; margin:0 0 120px; transform:none !important; } .scroll-story--deck .story-card:nth-child(2) { top:132px; } .scroll-story--deck .story-card:nth-child(3) { top:154px; } .scroll-story--walk { padding-bottom:70px; } .scroll-story--walk .scroll-story__stack { width:100vw; margin-left:calc(-1 * var(--gut)); padding:0 var(--gut) 24px; display:grid; grid-auto-flow:column; grid-auto-columns:88vw; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; } .scroll-story--walk .story-card,.scroll-story--walk .story-card:nth-child(n) { width:100%; margin:0; transform:none !important; scroll-snap-align:center; } .scroll-story--walk .story-card img { aspect-ratio:3/4; object-fit:contain; background:#0b1118; } .scroll-story--arrival .scroll-story__stack { padding-left:22px; border-left:2px solid rgba(255,255,255,.32); } .scroll-story--arrival .story-card:nth-child(n) { width:100%; margin:0 0 58px; border-radius:160px 160px 18px 18px; } .taste-reel__track { grid-auto-columns:86vw; } } @media (prefers-reduced-motion: reduce) { .scroll-story, .story-card, .story-card .plate, .grid > figure > .plate, .mosaic > figure > .plate, .cats > .cat img { transform: none !important; } .scroll-story { min-height: auto; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: clamp(16px, .98vw, 17.5px); line-height: 1.62; -webkit-font-smoothing: antialiased; overflow-x: clip; } img, video { max-width: 100%; display: block; } img { image-rendering: auto; } a { color: inherit; } ::selection { background: var(--ice); } /* ───────────────────── editorial page identities ──────────────────── */ .page-snacks .phead { background:var(--ink); } .page-toys .phead { background:var(--ink); } .page-shop .phead { background:var(--ink); } .page-visit .phead { background:var(--ink); } .page-snacks .phead__media,.page-toys .phead__media,.page-shop .phead__media,.page-visit .phead__media { opacity:.55; } .page-snacks .phead::after,.page-toys .phead::after,.page-shop .phead::after,.page-visit .phead::after { background:linear-gradient(90deg,rgba(9,10,12,.88),rgba(9,10,12,.38) 58%,rgba(9,10,12,.72)); } .page-snacks .scroll-story--coral { background-image:radial-gradient(circle at calc(10% + var(--story-progress)*72%) 24%,rgba(212,170,91,.16),transparent 25%),linear-gradient(145deg,#493128,#171311 68%); } .page-toys .scroll-story--coral { background-image:radial-gradient(circle at calc(10% + var(--story-progress)*72%) 24%,rgba(201,157,180,.15),transparent 25%),linear-gradient(145deg,#4a2234,#171117 68%); } .page-shop .scroll-story--cobalt { background-image:radial-gradient(circle at calc(10% + var(--story-progress)*72%) 24%,rgba(150,181,197,.16),transparent 25%),linear-gradient(145deg,#233f56,#0e1721 70%); } .page-visit .scroll-story--visit { background-image:radial-gradient(circle at calc(10% + var(--story-progress)*72%) 24%,rgba(207,226,248,.18),transparent 25%),linear-gradient(145deg,var(--coral-dp),#11172d 70%); } .cinema-break { position:relative; width:min(1120px,calc(100% - clamp(24px,7vw,112px))); aspect-ratio:1280/500; height:auto; margin:clamp(36px,6vw,84px) auto; overflow:hidden; border-radius:clamp(18px,3vw,38px); background:#111; box-shadow:0 35px 90px rgba(12,16,20,.18); } .cinema-break video { width:100%; height:100%; object-fit:contain; object-position:center; } .cinema-break::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(8,10,12,.08),transparent 45%,rgba(8,10,12,.72)); } .cinema-break__label { position:absolute; z-index:1; left:clamp(22px,4vw,60px); right:clamp(22px,4vw,60px); bottom:clamp(22px,4vw,54px); display:flex; align-items:end; justify-content:space-between; gap:20px; color:#fff; } .cinema-break__label span { font-size:11px; letter-spacing:.16em; text-transform:uppercase; opacity:.65; } .cinema-break__label strong { max-width:12ch; font-family:var(--display); font-size:clamp(24px,4vw,54px); line-height:.95; text-align:right; } .cinema-break--snacks { border-radius:clamp(18px,3vw,38px); } .cinema-break--toys { border-radius:44% 44% 30px 30px / 18% 18% 30px 30px; } .cinema-break--shop { width:min(1120px,calc(100% - clamp(24px,7vw,112px))); border-radius:4px; } .cinema-break--visit { width:min(1180px,calc(100% - 40px)); border-radius:999px 999px 28px 28px; } /* Full-resolution photography is composed like an editorial spread, not a uniform product grid. Every frame maintains a deliberate focal crop. */ .page-snacks .grid,.page-toys .grid,.page-shop .grid,.page-visit .grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(16px,2vw,30px); align-items:start; } .page-snacks .grid figure,.page-toys .grid figure,.page-shop .grid figure,.page-visit .grid figure { grid-column:span 4; margin:0; } .page-snacks .grid figure:nth-child(5n+1),.page-shop .grid figure:nth-child(5n+1) { grid-column:span 7; } .page-snacks .grid figure:nth-child(5n+2),.page-shop .grid figure:nth-child(5n+2) { grid-column:span 5; margin-top:clamp(34px,7vw,100px); } .page-snacks .grid figure:nth-child(5n+3),.page-shop .grid figure:nth-child(5n+3) { grid-column:2/span 4; } .page-snacks .grid figure:nth-child(5n+4),.page-shop .grid figure:nth-child(5n+4) { grid-column:span 4; margin-top:clamp(45px,8vw,120px); } .page-snacks .grid figure:nth-child(5n),.page-shop .grid figure:nth-child(5n) { grid-column:span 4; } .page-toys .grid figure:nth-child(odd) { grid-column:2/span 5; } .page-toys .grid figure:nth-child(even) { grid-column:7/span 5; margin-top:clamp(45px,8vw,110px); } .page-visit .grid figure:nth-child(1) { grid-column:1/span 7; } .page-visit .grid figure:nth-child(2) { grid-column:8/span 5; margin-top:clamp(45px,8vw,110px); } .page-visit .grid figure:nth-child(3) { grid-column:3/span 8; } .page-snacks .grid .plate,.page-toys .grid .plate,.page-shop .grid .plate,.page-visit .grid .plate { background:#d9d6d0; border-radius:18px; box-shadow:0 18px 50px rgba(14,18,22,.09); } .page-snacks .grid .plate img,.page-toys .grid .plate img,.page-shop .grid .plate img,.page-visit .grid .plate img { width:100%; height:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 48%; filter:saturate(.93) contrast(1.045); } .page-snacks .grid figure:nth-child(5n+1) .plate img,.page-shop .grid figure:nth-child(5n+1) .plate img,.page-visit .grid figure:nth-child(1) .plate img,.page-visit .grid figure:nth-child(3) .plate img { aspect-ratio:16/10; } .page-snacks .grid figcaption,.page-toys .grid figcaption,.page-shop .grid figcaption,.page-visit .grid figcaption { padding:12px 4px 0; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); } /* The lower pages are separate visual chapters rather than one repeated gallery. Each system has its own rhythm, crop and transition language. */ .chapter { position:relative; overflow:clip; isolation:isolate; } .chapter::before { content:""; position:absolute; z-index:-1; width:36vw; height:36vw; border-radius:50%; filter:blur(2px); opacity:.2; pointer-events:none; } .chapter .plate { overflow:hidden; } .chapter .plate img { transition:transform .8s cubic-bezier(.2,.75,.25,1),filter .8s ease; } .chapter figure:hover .plate img { transform:scale(1.025); filter:saturate(1) contrast(1.035); } /* Snacks: shelf rail, confectionery ribbon, staggered bowls, refrigerated case. */ .chapter--snack-shelf::before { right:-16vw; top:6%; background:#d6b15f; } .page-snacks .chapter--snack-shelf .grid { display:grid; grid-auto-flow:column; grid-auto-columns:min(68vw,560px); grid-template-columns:none; gap:clamp(18px,2.5vw,36px); overflow-x:auto; padding:10px max(var(--gut),calc((100vw - var(--maxw))/2 + var(--gut))) 42px; margin-inline:calc(50% - 50vw); scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:var(--coral) transparent; } .page-snacks .chapter--snack-shelf .grid figure:nth-child(n) { grid-column:auto; margin:0; transform:none; scroll-snap-align:center; } .page-snacks .chapter--snack-shelf .grid .plate img { aspect-ratio:16/9; } .chapter--biscuit-ribbon { background:#f0e4cc; } .chapter--biscuit-ribbon::after { content:""; position:absolute; inset:26% 0 auto; height:42%; z-index:-1; background:linear-gradient(90deg,var(--coral-dp),var(--magenta)); } .page-snacks .chapter--biscuit-ribbon .grid { grid-template-columns:repeat(12,1fr); gap:clamp(14px,2vw,28px); } .page-snacks .chapter--biscuit-ribbon .grid figure:nth-child(n) { grid-column:span 4; margin:0; transform:none; } .page-snacks .chapter--biscuit-ribbon .grid figure:nth-child(2),.page-snacks .chapter--biscuit-ribbon .grid figure:nth-child(5) { margin-top:clamp(50px,8vw,110px); } .page-snacks .chapter--biscuit-ribbon .grid .plate img { aspect-ratio:4/5; } .page-snacks .chapter--biscuit-ribbon .grid figure:nth-child(3n+2) figcaption { color:#fff; } .page-snacks .chapter--noodle-stack .wrap { display:grid; grid-template-columns:minmax(220px,4fr) minmax(0,8fr); gap:clamp(32px,7vw,110px); align-items:start; } .chapter--noodle-stack .sec-head { position:sticky; top:130px; } .page-snacks .chapter--noodle-stack .grid { display:flex; flex-direction:column; gap:clamp(24px,5vw,70px); } .page-snacks .chapter--noodle-stack .grid figure:nth-child(n) { width:82%; margin:0; transform:none; } .page-snacks .chapter--noodle-stack .grid figure:nth-child(even) { align-self:flex-end; width:68%; } .page-snacks .chapter--noodle-stack .grid .plate img { aspect-ratio:3/2; } .chapter--cold-case { color:#fff; background:linear-gradient(135deg,#10235a,#15131a 72%); } .chapter--cold-case .h2,.chapter--cold-case .prose { color:inherit; } .chapter--cold-case::before { left:-12vw; bottom:-18vw; background:var(--magenta); opacity:.14; } .page-snacks .chapter--cold-case .grid { display:grid; grid-auto-flow:column; grid-auto-columns:min(58vw,610px); grid-template-columns:none; gap:10px; overflow-x:auto; padding:18px 18px 42px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.055); box-shadow:inset 0 0 70px rgba(207,226,248,.08); scroll-snap-type:x mandatory; scrollbar-color:var(--coral) transparent; } .page-snacks .chapter--cold-case .grid figure:nth-child(n) { grid-column:auto; margin:0; transform:none; scroll-snap-align:start; } .page-snacks .chapter--cold-case .grid .plate { border-radius:4px; } .page-snacks .chapter--cold-case .grid .plate img { aspect-ratio:4/3; } .page-snacks .chapter--cold-case .grid figcaption { color:var(--ice); } /* Toys: floating collection wall followed by a neon film strip. */ .chapter--collectable-orbit::before { right:-8vw; top:10%; border:1px solid #b66b91; background:transparent; box-shadow:0 0 0 8vw rgba(182,107,145,.055),0 0 0 16vw rgba(182,107,145,.035); } .page-toys .chapter--collectable-orbit .grid { position:relative; grid-template-columns:repeat(12,1fr); gap:clamp(18px,3vw,42px); } .page-toys .chapter--collectable-orbit .grid figure:nth-child(n) { grid-column:span 4; margin:0; transform:none; } .page-toys .chapter--collectable-orbit .grid figure:nth-child(1),.page-toys .chapter--collectable-orbit .grid figure:nth-child(5) { grid-column:span 7; } .page-toys .chapter--collectable-orbit .grid figure:nth-child(2),.page-toys .chapter--collectable-orbit .grid figure:nth-child(6) { grid-column:span 5; margin-top:clamp(65px,10vw,140px); } .page-toys .chapter--collectable-orbit .grid .plate { border-radius:50% 50% 24px 24px / 18% 18% 24px 24px; } .page-toys .chapter--collectable-orbit .grid .plate img { aspect-ratio:4/3; } .chapter--machine-filmstrip { color:#fff; background:linear-gradient(145deg,#22131f,#0d1018); } .chapter--machine-filmstrip .h2,.chapter--machine-filmstrip .prose { color:inherit; } .page-toys .chapter--machine-filmstrip .grid { display:grid; grid-auto-flow:column; grid-auto-columns:min(60vw,600px); grid-template-columns:none; gap:24px; overflow-x:auto; padding:42px 28px; margin-inline:calc(50% - 50vw); border-block:8px dotted rgba(255,255,255,.22); background:rgba(225,96,163,.06); scroll-snap-type:x mandatory; scrollbar-color:var(--magenta) transparent; } .page-toys .chapter--machine-filmstrip .grid figure:nth-child(n) { grid-column:auto; margin:0; transform:none; scroll-snap-align:center; } .page-toys .chapter--machine-filmstrip .grid .plate { border-radius:6px; box-shadow:0 20px 70px rgba(0,0,0,.42); } .page-toys .chapter--machine-filmstrip .grid .plate img { aspect-ratio:16/10; } .page-toys .chapter--machine-filmstrip .grid figcaption { color:#eacfe0; } /* Shop: wide aisle cuts, then a restrained numbered architectural index. */ .chapter--aisle-cuts::before { left:-16vw; top:20%; background:#6b91a8; } .page-shop .chapter--aisle-cuts .grid { display:flex; flex-direction:column; gap:clamp(45px,8vw,110px); } .page-shop .chapter--aisle-cuts .grid figure:nth-child(n) { position:sticky; top:96px; width:92%; min-height:68vh; margin:0; padding:12px; display:grid; grid-template-rows:minmax(0,1fr) auto; transform:none; background:#e9edef; border:1px solid rgba(16,24,32,.12); box-shadow:0 35px 90px rgba(16,24,32,.18); } .page-shop .chapter--aisle-cuts .grid figure:nth-child(even) { width:76%; align-self:flex-end; background:#dfe6e9; } .page-shop .chapter--aisle-cuts .grid .plate { border-radius:2px; } .page-shop .chapter--aisle-cuts .grid .plate img { height:100%; aspect-ratio:auto; object-fit:contain; background:#131a20; } .page-shop .chapter--aisle-cuts .grid figure:nth-child(even) .plate img { aspect-ratio:4/3; } .page-shop .chapter--aisle-cuts figcaption { display:flex; align-items:center; gap:12px; } .page-shop .chapter--aisle-cuts figcaption::before { content:""; width:40px; height:1px; background:currentColor; opacity:.45; } .chapter--room-index { color:#eef4f6; background:#122532; counter-reset:room; } .chapter--room-index .h2,.chapter--room-index .prose { color:inherit; } .page-shop .chapter--room-index .grid { grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.18); } .page-shop .chapter--room-index .grid figure:nth-child(n) { grid-column:auto; margin:0; padding:clamp(14px,2vw,24px); transform:none; background:#122532; counter-increment:room; } .page-shop .chapter--room-index .grid .plate { border-radius:0; box-shadow:none; } .page-shop .chapter--room-index .grid .plate img { aspect-ratio:4/3; } .page-shop .chapter--room-index figcaption::before { content:"0" counter(room) " / "; color:#7fa5b9; } .page-shop .chapter--room-index .grid figcaption { color:#d7e1e6; } /* Visit: a calm information card and a street-view triptych. */ .chapter--visit-details { background:linear-gradient(135deg,var(--paper),#f8e8e8); } .chapter--visit-details::before { right:-12vw; bottom:-22vw; border:1px solid #7c8f71; background:transparent; } .chapter--visit-details .split { padding:clamp(28px,5vw,70px); border:1px solid rgba(40,62,48,.18); border-radius:30px; background:rgba(255,255,255,.55); box-shadow:0 30px 90px rgba(39,54,43,.08); } .chapter--visit-details .hours { background:#11172d; color:#fff; border-radius:20px; overflow:hidden; } .chapter--visit-details .hours tr.is-today { background:var(--coral-dp); } .page-visit .chapter--street-triptych .grid { grid-template-columns:repeat(12,1fr); gap:clamp(16px,2vw,30px); } .page-visit .chapter--street-triptych .grid figure:nth-child(1) { grid-column:1/span 8; margin:0; } .page-visit .chapter--street-triptych .grid figure:nth-child(2) { grid-column:9/span 4; margin-top:clamp(60px,10vw,140px); } .page-visit .chapter--street-triptych .grid figure:nth-child(3) { grid-column:3/span 8; margin-top:clamp(-20px,-2vw,-4px); } .page-visit .chapter--street-triptych .grid .plate img { aspect-ratio:16/10; } .page-visit .chapter--street-triptych .grid figure:nth-child(2) .plate img { aspect-ratio:3/4; } @supports (animation-timeline:view()) { .chapter .sec-head { animation:chapter-in linear both; animation-timeline:view(); animation-range:entry 10% entry 72%; } @keyframes chapter-in { from { opacity:.35; transform:translateY(34px); } to { opacity:1; transform:none; } } } @media (max-width:760px) { .page-snacks .grid figure,.page-toys .grid figure,.page-shop .grid figure,.page-visit .grid figure, .page-snacks .grid figure:nth-child(n),.page-toys .grid figure:nth-child(n),.page-shop .grid figure:nth-child(n),.page-visit .grid figure:nth-child(n) { grid-column:1/-1; margin-top:0; transform:none; } .page-snacks .grid .plate img,.page-toys .grid .plate img,.page-shop .grid .plate img,.page-visit .grid .plate img { aspect-ratio:4/3; } .page-snacks .chapter--snack-shelf .grid,.page-snacks .chapter--cold-case .grid,.page-toys .chapter--machine-filmstrip .grid { grid-auto-columns:84vw; } .page-snacks .chapter--biscuit-ribbon .grid { grid-template-columns:1fr 1fr; } .page-snacks .chapter--biscuit-ribbon .grid figure:nth-child(n) { grid-column:span 1; margin:0; } .page-snacks .chapter--biscuit-ribbon .grid figure:nth-child(even) { margin-top:34px; } .page-snacks .chapter--noodle-stack .wrap { grid-template-columns:1fr; } .chapter--noodle-stack .sec-head { position:relative; top:auto; } .page-snacks .chapter--noodle-stack .grid figure:nth-child(n) { width:100%; } .page-shop .chapter--aisle-cuts .grid { gap:28px; margin-inline:calc(-1 * var(--gut)); } .page-shop .chapter--aisle-cuts .grid figure:nth-child(n) { position:relative; top:auto; width:calc(100% - 20px) !important; min-height:0; padding:8px; border-radius:0 22px 22px 0; } .page-shop .chapter--aisle-cuts .grid figure:nth-child(even) { align-self:flex-end; border-radius:22px 0 0 22px; } .page-shop .chapter--aisle-cuts .grid .plate img,.page-shop .chapter--aisle-cuts .grid figure:nth-child(even) .plate img { aspect-ratio:4/5; object-fit:contain; } .page-toys .chapter--collectable-orbit .grid figure:nth-child(n) { grid-column:1/-1; margin:0; } .page-shop .chapter--room-index .grid { grid-template-columns:1fr; } .page-visit .chapter--street-triptych .grid figure:nth-child(n) { grid-column:1/-1; margin:0; } .chapter--visit-details .split { padding:22px; border-radius:20px; } } @media (prefers-reduced-motion:reduce) { .chapter .plate img,.chapter .sec-head { transition:none; animation:none !important; } } :focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; } #top, #main { scroll-margin-top: 110px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: fixed; top: 8px; left: 8px; z-index: 999; transform: translateY(-180%); background: var(--ink); color: #fff; padding: 11px 18px; text-decoration: none; font-weight: 600; border-radius: var(--r); } .skip:focus { transform: none; } .wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); } /* ───────────────────────────── type ────────────────────────────── */ h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.045em; margin: 0; } .h1 { font-size: clamp(2.4rem, 6vw, 5rem); line-height: .98; } .h2 { font-size: clamp(1.8rem, 3.6vw, 3rem); line-height: 1.02; margin-bottom: .9rem; } .h3 { font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.15; letter-spacing: -.03em; } .eyebrow { font-family: var(--body); font-weight: 700; font-size: .76rem; letter-spacing: .15em; text-transform: uppercase; color: var(--coral-dp); margin: 0 0 .85rem; } .lede { font-size: clamp(1.05rem, 1.35vw, 1.22rem); color: var(--ink-2); max-width: 52ch; margin: 0 0 1.8rem; } .prose { max-width: var(--read); color: var(--ink-2); } .prose p { margin: 0 0 1rem; } .prose p:last-child { margin-bottom: 0; } .sec { padding-block: clamp(3rem, 7vw, 6rem); } .sec-head { max-width: 54ch; margin-bottom: clamp(1.8rem, 4vw, 3rem); } /* ──────────────────────────── buttons ──────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 50px; padding: 0 1.5rem; font-weight: 600; font-size: 1rem; text-decoration: none; background: var(--coral-dp); color: #fff; border: 1px solid var(--coral-dp); border-radius: 999px; transition: transform .18s cubic-bezier(.2,.7,.3,1), background-color .18s; } .btn:hover { background: #8F262F; border-color: #8F262F; transform: translateY(-1px); } .btn--ghost { background: transparent; color: var(--ink); border-color: rgba(21,19,26,.22); } .btn--ghost:hover { background: rgba(21,19,26,.05); border-color: rgba(21,19,26,.45); color: var(--ink); } .btn--light { background: #fff; color: var(--ink); border-color: #fff; } .btn--light:hover { background: var(--ice); border-color: var(--ice); color: var(--ink); } .btn--sm { min-height: 44px; font-size: .92rem; padding: 0 1.15rem; } /* ───────────────────────────── nav ─────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 80; background: rgba(250,247,244,.82); backdrop-filter: saturate(1.5) blur(16px); -webkit-backdrop-filter: saturate(1.5) blur(16px); border-bottom: 1px solid transparent; transition: border-color .25s, background-color .25s; } .nav.is-stuck { border-bottom-color: var(--line); background: rgba(250,247,244,.94); } .nav__bar { display: flex; align-items: center; gap: 1.2rem; padding-block: 10px; } .nav__brand { display: flex; align-items: center; min-height: 44px; flex: none; } .nav__brand img { width: 124px; height: auto; } .nav__links { display: flex; gap: 1.4rem; margin-left: auto; font-weight: 500; font-size: .94rem; } .nav__links a { text-decoration: none; color: var(--ink-2); min-height: 44px; display: flex; align-items: center; border-bottom: 2px solid transparent; white-space: nowrap; transition: color .18s, border-color .18s; } .nav__links a:hover { color: var(--ink); border-bottom-color: var(--coral); } .nav__links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--coral); font-weight: 600; } .nav__right { display: flex; align-items: center; gap: .65rem; } .chip { display: inline-flex; align-items: center; gap: .5em; font-size: .8rem; font-weight: 500; color: var(--ink-2); background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: .42em .85em; white-space: nowrap; } .chip__dot { width: 7px; height: 7px; border-radius: 50%; background: #16874A; flex: none; box-shadow: 0 0 0 3px rgba(22,135,74,.16); } .chip.is-shut .chip__dot { background: var(--ink-3); box-shadow: 0 0 0 3px rgba(123,116,136,.14); } /* ───────────────────── hero: the drifting wall ─────────────────── */ .hero { position: relative; min-height: min(92vh, 860px); display: grid; align-items: center; overflow: hidden; } .wall { position: absolute; inset: 0; z-index: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 10px; pointer-events: none; } .wall__col { display: grid; gap: 10px; align-content: start; will-change: transform; } .wall__col > * { border-radius: var(--r); overflow: hidden; background: var(--line); } .wall__col img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 34 / 44; } /* two tracks per column, the second a copy, so the loop is seamless */ .wall__col { animation: drift-up 52s linear infinite; } .wall__col:nth-child(even) { animation-name: drift-down; animation-duration: 62s; } .wall__col:nth-child(3) { animation-duration: 46s; } @keyframes drift-up { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } } @keyframes drift-down { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(0, 0, 0); } } .hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to right, rgba(250,247,244,.97) 0%, rgba(250,247,244,.93) 34%, rgba(250,247,244,.58) 58%, rgba(250,247,244,.42) 100%), linear-gradient(to bottom, rgba(250,247,244,.85), rgba(250,247,244,0) 22%, rgba(250,247,244,0) 72%, rgba(250,247,244,.9)); } .hero__inner { position: relative; z-index: 2; padding-block: clamp(3rem, 8vw, 6rem); } .hero__copy { max-width: 20ch; } .hero .lede { max-width: 40ch; } .hero__h1 .accent { color: var(--coral); } .hero__meta { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 2.2rem; align-items: center; } .rating { display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: var(--ink-2); } .rating b { font-family: var(--display); font-size: 1.6rem; color: var(--ink); line-height: 1; } .stars { color: var(--coral); letter-spacing: .05em; } /* ──────────────────────────── counters ─────────────────────────── */ .bar { background: var(--ink); color: var(--ice); } .bar__in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; padding-block: clamp(1.6rem, 3.4vw, 2.6rem); } .bar dt { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.4rem); letter-spacing: -.04em; color: #fff; } .bar dd { margin: .25rem 0 0; font-size: .85rem; color: rgba(207,226,248,.76); } /* ───────────────────────── the aisle video ─────────────────────── */ .reel { position: relative; background: var(--ink); overflow: hidden; } .reel__media { position: relative; height: clamp(420px, 78vh, 760px); } .reel__media video, .reel__media img.reel__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* the poster is in the markup and always renders; the film fades in over it once it has actually started, so a blocked or failed video shows a photo rather than a black box */ .reel__media video { opacity: 0; transition: opacity .7s ease; } .reel__media video.is-live { opacity: 1; } .reel__tall { display: none; } .reel__grad { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(10,8,14,.82) 0%, rgba(10,8,14,.18) 46%, rgba(10,8,14,.34) 100%); } .reel__copy { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding-bottom: clamp(2rem, 5vw, 3.5rem); color: #fff; } .reel__copy h2 { color: #fff; } .reel__copy p { color: rgba(255,255,255,.86); max-width: 48ch; margin: .8rem 0 0; } .reel__copy .eyebrow { color: var(--ice); } /* ─────────────────────────── category grid ─────────────────────── */ .cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.6rem); } .cat { position: relative; display: block; text-decoration: none; border-radius: var(--r); overflow: hidden; background: var(--ink); box-shadow: var(--shadow); } .cat img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.3,1); } .cat:hover img { transform: scale(1.045); } .cat__veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,8,14,.84) 4%, rgba(10,8,14,.1) 58%); } .cat__txt { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(.9rem, 1.8vw, 1.3rem); color: #fff; } .cat__txt p { margin: .3rem 0 0; font-size: .86rem; color: rgba(255,255,255,.82); } .cat__go { display: inline-block; margin-top: .5rem; font-size: .84rem; font-weight: 700; color: var(--ice); } /* ───────────────────────── mosaic / gallery ────────────────────── */ .mosaic { columns: 4; column-gap: clamp(.7rem, 1.4vw, 1.1rem); } .mosaic figure { break-inside: avoid; margin: 0 0 clamp(.7rem, 1.4vw, 1.1rem); } .plate { display: block; width: 100%; padding: 0; border: 0; background: var(--line); border-radius: var(--r); overflow: hidden; cursor: zoom-in; position: relative; } .plate img { width: 100%; height: auto; transition: transform .5s cubic-bezier(.2,.7,.3,1); } .plate:hover img { transform: scale(1.03); } .plate:focus-visible { outline-offset: 2px; } figcaption { font-size: .82rem; color: var(--ink-3); margin-top: .45rem; } /* a strict grid for the sub-page galleries */ .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); } .grid figure { margin: 0; } .grid .plate img { aspect-ratio: 4 / 5; object-fit: cover; } .grid figure.is-wide { grid-column: span 2; } .grid figure.is-wide .plate img { aspect-ratio: 8 / 5; } /* ──────────────────────────── page head ────────────────────────── */ .phead { background: var(--magenta); color: #fff; } /* white on magenta 5.3:1 */ .phead--coral { background: var(--coral-dp); } .phead--cobalt { background: var(--cobalt); } .phead__in { padding-block: clamp(2.6rem, 6vw, 4.5rem); } .phead .eyebrow { color: rgba(255,255,255,.8); } .phead h1 { color: #fff; max-width: 18ch; } .phead p { color: rgba(255,255,255,.9); max-width: 54ch; margin: 1rem 0 0; font-size: 1.06rem; } .crumb { font-size: .84rem; color: rgba(255,255,255,.78); margin: 0 0 1rem; } .crumb a { color: #fff; display: inline-flex; align-items: center; min-height: 44px; } .crumb { display: flex; align-items: center; gap: .4em; flex-wrap: wrap; } /* ───────────────────────────── quotes ──────────────────────────── */ .quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); list-style: none; margin: 0; padding: 0; } .quotes li { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(1.2rem, 2.4vw, 1.8rem); position: relative; } .quotes li::before { content: ""; position: absolute; left: 0; top: 16%; bottom: 16%; width: 3px; background: var(--coral); } .quotes p { margin: 0; } .src { font-size: .8rem; color: var(--ink-3); margin-top: 1.4rem; } /* ──────────────────────────── offer band ───────────────────────── */ .offer { position: relative; overflow: hidden; padding-block: clamp(1.4rem, 3vw, 2.4rem); background: var(--cobalt); color: #fff; } .offer::before { content: ""; position: absolute; inset: 0; opacity: .16; pointer-events: none; background: radial-gradient(circle at 88% 20%, var(--ice) 0 2px, transparent 2.5px) 0 0 / 22px 22px, linear-gradient(120deg, transparent 0 58%, rgba(255,255,255,.16) 58% 59%, transparent 59%); } .offer__in { position: relative; display: grid; grid-template-columns: minmax(220px,.72fr) minmax(0,1.28fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding: clamp(1.5rem, 3vw, 2.6rem); border: 1px solid rgba(255,255,255,.28); border-radius: 28px; background: linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.035)); box-shadow: 0 24px 70px rgba(8,24,71,.2); } .offer__deal { padding-right: clamp(1.2rem,3vw,2.8rem); border-right: 1px solid rgba(255,255,255,.3); } .offer__eyebrow,.offer__kicker { margin: 0 0 .75rem; color: var(--yellow); font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; } .offer__num { display: flex; align-items: baseline; gap: .38em; margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(3rem, 8vw, 5.5rem); line-height: .85; letter-spacing: -.06em; white-space: nowrap; } .offer__num small { font-size: .28em; letter-spacing: .08em; line-height: 1; text-transform: uppercase; } .offer__hours { display: flex; gap: .65rem; align-items: center; margin: 1rem 0 0; font-weight: 700; letter-spacing: .04em; } .offer__hours span { padding: .35rem .65rem; border-radius: 999px; background: var(--yellow); color: var(--ink); } .offer blockquote { margin: 0; font-size: clamp(1.1rem, 2vw, 1.5rem); font-family: var(--display); font-weight: 700; letter-spacing: -.03em; line-height: 1.2; } .offer .src { color: rgba(255,255,255,.72); margin-top: .7rem; } /* ──────────────────────────── hours ────────────────────────────── */ .hours { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .hours caption { caption-side: top; text-align: left; font-family: var(--display); font-weight: 700; font-size: 1.1rem; padding-bottom: .7rem; } .hours th, .hours td { padding: .74rem 1.1rem; text-align: left; font-weight: 400; font-size: .95rem; } .hours th { color: var(--ink-2); } .hours td { text-align: right; font-variant-numeric: tabular-nums; } .hours tr + tr { border-top: 1px solid var(--line); } .hours tr.is-today { background: #FFF4F1; } .hours tr.is-today th { font-weight: 700; color: var(--ink); } .hours tr.is-today th::after { content: "Today"; margin-left: .55rem; font-size: .66rem; letter-spacing: .09em; text-transform: uppercase; color: #fff; background: var(--coral-dp); padding: .16em .5em; border-radius: 999px; vertical-align: 2px; } .facts { display: grid; gap: 0; margin: 0 0 1.8rem; } .facts > div { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding: .78rem 0; border-top: 1px solid var(--line); } .facts > div:last-child { border-bottom: 1px solid var(--line); } .facts dt { color: var(--ink-3); font-size: .84rem; letter-spacing: .05em; text-transform: uppercase; } .facts dd { margin: 0; } .facts dd a { color: var(--coral-dp); display: inline-flex; align-items: center; min-height: 44px; } .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.8rem, 4vw, 3.5rem); align-items: start; } /* ──────────────────────────── lightbox ─────────────────────────── */ .lb { position: fixed; inset: 0; z-index: 200; background: rgba(12,10,16,.94); display: grid; grid-template-rows: auto 1fr auto; opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s; } .lb.is-open { opacity: 1; visibility: visible; } .lb__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 12px var(--gut); color: rgba(255,255,255,.8); font-size: .85rem; } .lb__stage { position: relative; padding: 0 var(--gut); min-height: 0; } /* Absolutely positioned, not a centred grid item. A grid item with a non-stretch alignment does not resolve a percentage max-height against its grid area, so `max-height: 100%` was silently ignored and tall portraits rendered at their full 1100px inside a 692px stage — overflowing the viewer. With inset:0 the containing block is definite, so the cap works, and margin:auto centres it. */ .lb__stage img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: var(--r); } .lb__cap { padding: 12px var(--gut) 20px; color: rgba(255,255,255,.82); font-size: .9rem; text-align: center; } .lb__btn { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.22); width: 46px; height: 46px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; line-height: 1; display: grid; place-items: center; } .lb__btn:hover { background: rgba(255,255,255,.2); } .lb__nav { display: flex; gap: .6rem; } /* ───────────────────────────── footer ──────────────────────────── */ .foot { background: var(--ink); color: var(--ice); padding-block: clamp(2.8rem, 6vw, 4.5rem) 2rem; } .foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(1.6rem, 4vw, 3rem); } .foot img { width: min(230px, 56vw); height: auto; margin-bottom: 1rem; } .foot h3 { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-family: var(--body); font-weight: 700; color: rgba(207,226,248,.6); margin-bottom: .8rem; } .foot ul { list-style: none; margin: 0; padding: 0; } .foot li { margin-bottom: .1rem; } .foot a { color: rgba(207,226,248,.88); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; } .foot a:hover { color: #fff; text-decoration: underline; } .foot p { color: rgba(207,226,248,.68); font-size: .9rem; margin: 0 0 .4rem; } .foot__fine { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(207,226,248,.14); font-size: .78rem; color: rgba(207,226,248,.45); } /* ─────────────────────── reveal (js-gated) ─────────────────────── */ .js [data-reveal] { opacity: 0; transform: translateY(14px); } .js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); } /* ─────────────────────────── responsive ────────────────────────── */ @media (max-width: 1100px) { .cats { grid-template-columns: repeat(2, 1fr); } .mosaic { columns: 3; } .quotes { grid-template-columns: 1fr; } .wall { grid-template-columns: repeat(4, 1fr); } .bar__in { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .nav__bar { flex-wrap: wrap; row-gap: 2px; } .nav__right { margin-left: auto; } .nav__links { order: 3; width: 100%; margin-left: 0; gap: 1.2rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } .nav__links::-webkit-scrollbar { display: none; } .split { grid-template-columns: 1fr; } .foot__grid { grid-template-columns: 1fr 1fr; } .grid { grid-template-columns: repeat(2, 1fr); } .hero__scrim { background: linear-gradient(to bottom, rgba(250,247,244,.92) 0%, rgba(250,247,244,.86) 46%, rgba(250,247,244,.66) 100%); } .hero__copy { max-width: none; } } @media (max-width: 700px) { .mosaic { columns: 2; } .wall { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 8px; } .reel__media { height: clamp(460px, 86vh, 720px); } .offer { padding-block: 1rem; } .offer__in { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.45rem; border-radius: 20px; } .offer__deal { padding: 0 0 1.2rem; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.3); } .offer__num { font-size: clamp(3.6rem, 18vw, 5rem); } .offer__num small { font-size: .24em; } .offer__eyebrow,.offer__kicker { margin-bottom: .6rem; } .offer__hours { margin-top: .8rem; } .offer blockquote { max-width: 31ch; } .chip__text { display: none; } .chip { padding: .5em; } .nav__brand img { width: 104px; } .facts > div { grid-template-columns: 1fr; gap: .1rem; } .grid figure.is-wide { grid-column: span 2; } } @media (max-width: 520px) { .cats { grid-template-columns: 1fr; } .foot__grid { grid-template-columns: 1fr; } .grid { grid-template-columns: 1fr; } .grid figure.is-wide { grid-column: span 1; } .grid .plate img, .grid figure.is-wide .plate img { aspect-ratio: 4 / 3; } } /* on a phone the hero runs the vertical cut of the film instead */ @media (max-aspect-ratio: 3/4) { .reel__wide { display: none; } .reel__tall { display: block; } } /* ────────────────────────── reduced motion ─────────────────────── */ @media (prefers-reduced-motion: reduce) { .wall__col { animation: none !important; } .cat img, .plate img { transition: none; } .cat:hover img, .plate:hover img { transform: none; } .btn { transition: none; } .js [data-reveal] { opacity: 1; transform: none; } .lb { transition: none; } } /* the map on the visit page */ .mapbox { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--line); aspect-ratio: 16 / 7; } .mapbox iframe { width: 100%; height: 100%; border: 0; display: block; } @media (max-width: 700px) { .mapbox { aspect-ratio: 4 / 3; } } /* ============================================================================ Added 2026-10-31: media behind each sub-page header, a deals band that comes before the galleries, and some rhythm in the long scroll of photographs. ========================================================================== */ /* ── media behind the page header ─────────────────────────────────────── */ .phead { position: relative; overflow: hidden; isolation: isolate; } .phead__media { position: absolute; inset: 0; z-index: -2; } .phead__media img, .phead__media video { width: min(100%, 1280px); height: 100%; object-fit: cover; position:absolute; left:50%; transform:translateX(-50%); } .phead__media video { position:absolute; inset:0 auto 0 50%; opacity:0; transition:opacity .8s ease; } .phead__media video.is-live { opacity: 1; } /* the page keeps its own colour: the band tints the footage rather than being replaced by it */ .phead::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(100deg, var(--tint) 0%, var(--tint) 42%, color-mix(in srgb, var(--tint) 72%, transparent) 100%), linear-gradient(to bottom, rgba(10,8,14,.18), rgba(10,8,14,.34)); } .phead { --tint: color-mix(in srgb, var(--magenta) 88%, transparent); } .phead--coral { --tint: color-mix(in srgb, var(--coral-dp) 88%, transparent); } .phead--cobalt { --tint: color-mix(in srgb, var(--cobalt) 88%, transparent); } @supports not (color: color-mix(in srgb, red 50%, transparent)) { .phead::after { background: linear-gradient(100deg, var(--magenta), rgba(181,46,107,.72)); } .phead--coral::after { background: linear-gradient(100deg, var(--coral-dp), rgba(176,50,60,.72)); } .phead--cobalt::after { background: linear-gradient(100deg, var(--cobalt), rgba(31,73,168,.72)); } } /* ── deals, before anything else ──────────────────────────────────────── */ .deals { background: var(--ink); color: var(--ice); padding-block: clamp(2rem, 4.5vw, 3.2rem); } .deals__head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; } .deals__head h2 { font-family: var(--display); font-weight: 700; color: #fff; font-size: clamp(1.5rem, 3vw, 2.3rem); letter-spacing: -.035em; } .deals__note { font-size: .84rem; color: rgba(207,226,248,.62); } .deals__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.8rem, 1.6vw, 1.3rem); } .deal { position: relative; border-radius: var(--r); overflow: hidden; background: #221f29; display: block; } .deal img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.3,1); } .deal:hover img { transform: scale(1.04); } .deal__veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,8,14,.88) 6%, rgba(10,8,14,.05) 62%); } .deal__txt { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(.8rem, 1.6vw, 1.15rem); } .deal__tag { display: inline-block; background: var(--coral); color: #fff; font-family: var(--display); font-weight: 700; font-size: .78rem; letter-spacing: .02em; padding: .3em .7em; border-radius: 999px; margin-bottom: .45rem; } .deal__tag--gold { background: var(--yellow, #F2C230); color: var(--ink); } .deal h3 { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: #fff; letter-spacing: -.02em; } .deal p { margin: .25rem 0 0; font-size: .85rem; color: rgba(255,255,255,.76); } .deals__hh { margin-top: clamp(1rem, 2vw, 1.5rem); border: 1px solid rgba(207,226,248,.22); border-radius: var(--r); padding: clamp(1rem, 2vw, 1.4rem); display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 2.4vw, 2rem); align-items: center; } .deals__hh b { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 5vw, 3.2rem); color: var(--yellow, #F2C230); line-height: .9; letter-spacing: -.05em; } .deals__hh q { font-style: normal; font-size: clamp(1rem, 1.7vw, 1.2rem); color: #fff; } .deals__hh small { display: block; margin-top: .4rem; font-size: .78rem; color: rgba(207,226,248,.6); } /* ── rhythm in the galleries ──────────────────────────────────────────── */ /* alternate the surface so consecutive grids do not merge into one scroll */ .sec--alt { background: var(--white); border-block: 1px solid var(--line); } /* each plate rises a beat after the one before it */ .js .grid [data-reveal] { transition-delay: 0ms; } .js .grid [data-reveal]:nth-child(2) { transition-delay: 55ms; } .js .grid [data-reveal]:nth-child(3) { transition-delay: 110ms; } .js .grid [data-reveal]:nth-child(4) { transition-delay: 40ms; } .js .grid [data-reveal]:nth-child(5) { transition-delay: 95ms; } .js .grid [data-reveal]:nth-child(6) { transition-delay: 150ms; } .js .grid [data-reveal]:nth-child(7) { transition-delay: 80ms; } .js .grid [data-reveal]:nth-child(8) { transition-delay: 135ms; } .js .grid [data-reveal]:nth-child(9) { transition-delay: 190ms; } .js .grid [data-reveal]:nth-child(n+10) { transition-delay: 120ms; } /* a full-bleed photograph between groups, drifting as it passes */ .band { position: relative; overflow: hidden; height: clamp(260px, 42vh, 460px); } .band img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--pz, 1.08)); transform-origin: 50% 50%; will-change: transform; } .band__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1rem, 3vw, 2rem) 0; background: linear-gradient(to top, rgba(10,8,14,.72), transparent); color: #fff; } .band__cap p { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -.03em; font-size: clamp(1.1rem, 2.4vw, 1.9rem); } @media (max-width: 860px) { .deals__row { grid-template-columns: 1fr 1fr; } .deals__row .deal:nth-child(3) { grid-column: span 2; } .deals__row .deal:nth-child(3) img { aspect-ratio: 16 / 7; } .deals__hh { grid-template-columns: 1fr; gap: .6rem; } } @media (max-width: 520px) { .deals__row { grid-template-columns: 1fr; } .deals__row .deal:nth-child(3) { grid-column: span 1; } .deals__row .deal:nth-child(3) img { aspect-ratio: 4 / 3; } } @media (prefers-reduced-motion: reduce) { .phead__media video { display: none; } .deal img, .deal:hover img { transform: none; transition: none; } .band img { transform: scale(1.02) !important; } .js .grid [data-reveal] { transition-delay: 0ms !important; } } /* Chapter surfaces intentionally win over the legacy alternating-section skin. */ .page-snacks .chapter--biscuit-ribbon { background:#f0e4cc; border-block:0; } .page-snacks .chapter--cold-case { color:#fff; background:linear-gradient(135deg,#10235a,#15131a 72%); border-block:0; } .page-toys .chapter--machine-filmstrip { color:#fff; background:linear-gradient(145deg,#22131f,#0d1018); border-block:0; } .page-shop .chapter--room-index { color:#eef4f6; background:#11172d; border-block:0; } .page-visit .chapter--visit-details { background:linear-gradient(135deg,var(--paper),#f8e8e8); } .page-visit .chapter--visit-details .hours { background:#11172d; color:#fff; border-color:rgba(255,255,255,.16); } .page-visit .chapter--visit-details .hours th { color:#dbe5dd; } .page-visit .chapter--visit-details .hours tr.is-today { background:var(--coral-dp); } .page-visit .chapter--visit-details .hours tr.is-today th { color:#fff; } /* Native orientation is part of the composition. Portrait photos retain the full vertical frame and are never enlarged into a cropped panorama. */ .chapter figure.media-portrait .plate { background:linear-gradient(180deg,#f4f0ed,#ebe4df); } .chapter figure.media-portrait .plate img, .deal.media-portrait img { width:100%; height:auto; aspect-ratio:3/4 !important; object-fit:contain !important; object-position:center !important; } .page-shop .chapter--aisle-cuts figure.media-portrait { width:min(48%,560px) !important; } .page-shop .chapter--aisle-cuts figure.media-portrait:nth-child(even) { align-self:flex-end; } .page-toys .chapter--collectable-orbit figure.media-portrait { grid-column:span 4 !important; margin-top:0 !important; } .page-snacks .chapter--noodle-stack figure.media-portrait { width:min(72%,560px) !important; } .page-snacks .chapter--noodle-stack figure.media-portrait:nth-child(even) { align-self:flex-end; } .deals__row { align-items:start; } .deal.media-portrait { max-width:430px; width:100%; justify-self:center; } .deal.media-portrait img { background:#11172d; } @media (max-width:760px) { .page-shop .chapter--aisle-cuts figure.media-portrait, .page-snacks .chapter--noodle-stack figure.media-portrait { width:min(88vw,520px) !important; align-self:center !important; } .chapter { padding-block:clamp(52px,12vw,86px); } .chapter .sec-head { margin-bottom:32px; } .page-toys .chapter--collectable-orbit figure.media-portrait { grid-column:1/-1 !important; } } .reel { width:min(1280px,100%); margin-inline:auto; } /* Original 1080p motion chapters. Each page has its own body grammar. */ .motion-suite { padding:clamp(82px,11vw,160px) 0; overflow:hidden; } .motion-suite__intro { margin-bottom:clamp(34px,6vw,76px); } .motion-suite__intro .h2 { max-width:13ch; font-size:clamp(38px,6vw,78px); line-height:.92; } .motion-panel { position:relative; margin:0; overflow:hidden; background:#0d1016; color:#fff; } .motion-panel video { width:100%; height:100%; object-fit:contain; background:#090b10; } .motion-panel > div { position:absolute; z-index:2; inset:auto 0 0; padding:clamp(18px,3vw,38px); background:linear-gradient(transparent,rgba(6,8,12,.9)); } .motion-panel span { font-size:11px; letter-spacing:.18em; text-transform:uppercase; opacity:.62; } .motion-panel h3 { margin:.4rem 0 0; font-size:clamp(24px,3vw,48px); color:#fff; } .motion-panel p { margin:.35rem 0 0; color:rgba(255,255,255,.7); } .motion-suite--snacks { color:#fff; background:linear-gradient(135deg,#351a16,#111015 68%); } .motion-suite--snacks .eyebrow { color:#efb675; } .motion-suite--snacks .h2 { color:#fff; } .motion-suite__rail { display:grid; grid-auto-flow:column; grid-auto-columns:min(76vw,820px); gap:18px; overflow-x:auto; padding:0 max(24px,calc((100vw - 1240px)/2)) 34px; scroll-snap-type:x mandatory; scrollbar-color:#d9414c transparent; } .motion-suite--snacks .motion-panel { height:min(68vh,660px); border-radius:28px; scroll-snap-align:center; } .motion-suite--toys { color:#fff; background:radial-gradient(circle at 74% 18%,rgba(181,46,107,.38),transparent 30%),#100d18; } .motion-suite--toys .eyebrow { color:#efb4d2; } .motion-suite--toys .h2 { color:#fff; } .toy-reels { display:grid; grid-template-columns:.72fr 1.45fr .72fr; gap:clamp(12px,2vw,28px); align-items:center; } .toy-reels .motion-panel { height:min(72vh,720px); border-radius:24px; box-shadow:0 32px 80px rgba(0,0,0,.42); } .toy-reels .motion-panel--wide { height:min(62vh,620px); } .motion-suite--shop { padding-bottom:22vh; background:#dfe6e9; } .motion-suite--shop .motion-suite__intro { color:#101820; } .shop-walk { display:grid; gap:22vh; } .shop-walk .motion-panel { position:sticky; top:90px; height:min(76vh,760px); border:12px solid #f5f7f8; box-shadow:0 38px 90px rgba(16,24,32,.22); } .shop-walk .motion-panel:nth-child(2) { width:82%; margin-left:auto; } .motion-suite--visit { background:#f3eee7; } .visit-portal { display:grid; grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr); gap:clamp(36px,8vw,120px); align-items:center; } .visit-portal .motion-suite__intro { margin:0; } .visit-portal .motion-panel { height:min(72vh,720px); border-radius:50% 50% 24px 24px / 18% 18% 24px 24px; box-shadow:0 30px 80px rgba(40,28,30,.18); } .deals--top { padding-top:clamp(34px,5vw,66px); border-top:4px solid var(--coral); } .offer--top { border-top:4px solid var(--yellow); } .collectible-vault { padding:clamp(82px,11vw,150px) 0; color:#fff; background:linear-gradient(145deg,#15101a,#2b1425 58%,#10182a); overflow:hidden; } .collectible-vault__head { margin-bottom:clamp(34px,6vw,74px); } .collectible-vault__head .eyebrow { color:#efb4d2; } .collectible-vault__head .h2 { color:#fff; max-width:12ch; font-size:clamp(40px,6vw,80px); line-height:.92; } .collectible-vault__head .prose { color:rgba(255,255,255,.7); } .collectible-vault__media { display:grid; grid-template-columns:1fr 1.15fr 1fr; gap:clamp(12px,2vw,26px); align-items:center; } .collectible-vault__media figure { margin:0; min-width:0; } .collectible-vault__media .plate,.collectible-vault__film { height:min(68vh,690px); overflow:hidden; border-radius:22px; background:#090b10; box-shadow:0 30px 80px rgba(0,0,0,.36); } .collectible-vault__media img,.collectible-vault__media video { width:100%; height:100%; object-fit:contain; object-position:center; background:#090b10; } .collectible-vault__film { height:min(58vh,590px); } .collectible-vault__media figcaption { padding:12px 4px 0; color:rgba(255,255,255,.68); font-size:12px; letter-spacing:.1em; text-transform:uppercase; } @media (max-width:760px) { .motion-suite { padding-block:64px 82px; } .motion-suite__rail { grid-auto-columns:88vw; padding-inline:14px; } .motion-suite--snacks .motion-panel { height:62vh; min-height:480px; } .toy-reels { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding-inline:10px; } .toy-reels .motion-panel,.toy-reels .motion-panel--wide { height:58vh; min-height:440px; border-radius:18px; } .toy-reels .motion-panel--wide { grid-column:1/-1; height:48vh; min-height:360px; grid-row:1; } .toy-reels .motion-panel h3 { font-size:19px; } .shop-walk { gap:48px; padding-inline:14px; } .shop-walk .motion-panel,.shop-walk .motion-panel:nth-child(2) { position:relative; top:auto; width:100%; height:62vh; min-height:470px; margin:0; border-width:7px; } .visit-portal { grid-template-columns:1fr; } .visit-portal .motion-panel { height:60vh; min-height:460px; } .deals--top { padding-top:30px; } .collectible-vault { padding-block:64px 84px; } .collectible-vault__media { grid-template-columns:1fr; gap:34px; } .collectible-vault__media .plate,.collectible-vault__film { height:auto; aspect-ratio:3/4; border-radius:18px; } .collectible-vault__film { aspect-ratio:16/10; } } /* Pulkit-inspired scroll language, rebuilt natively for this static site. */ html.js::before { content:""; position:fixed; z-index:1000; left:0; right:0; top:0; height:3px; pointer-events:none; background:linear-gradient(90deg,var(--magenta),var(--coral),var(--yellow)); transform:scaleX(var(--page-progress,0)); transform-origin:left; } main > section { position:relative; transition:opacity .7s ease, filter .8s ease; } .js main > section.is-past:not(.product-feature) { opacity:.82; filter:saturate(.88); } .js main > section.is-current { opacity:1; filter:none; } .cinema-break::before { content:""; position:absolute; z-index:1; inset:0; pointer-events:none; box-shadow:inset 0 0 110px rgba(5,6,10,.52); background:radial-gradient(circle at 50% 42%,transparent 48%,rgba(7,8,12,.22) 100%); } .cinema-break__label { transition:transform .75s cubic-bezier(.2,.7,.2,1), opacity .65s ease; } .cinema-break:not(.is-current) .cinema-break__label { transform:translateY(16px); opacity:.55; } .product-feature { color:#fff; padding:clamp(76px,10vw,150px) 0; overflow:clip; background:radial-gradient(circle at 75% 8%,rgba(181,46,107,.34),transparent 32%),linear-gradient(145deg,#100d18,#211121 58%,#11172d); } .product-feature__intro { position:relative; z-index:2; margin-bottom:clamp(38px,7vw,86px); } .product-feature__intro .eyebrow { color:#f4bdcf; } .product-feature__intro .h2 { color:#fff; max-width:12ch; font-size:clamp(42px,7vw,92px); line-height:.9; } .product-feature__intro .prose { color:rgba(255,255,255,.7); max-width:52ch; } .product-feature__stack { width:min(1180px,calc(100% - clamp(24px,6vw,88px))); margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,38px); } .product-focus { position:relative; top:auto; min-height:0; display:grid; grid-template-rows:auto 1fr; align-items:start; gap:0; padding:12px; border:1px solid rgba(255,255,255,.15); border-radius:clamp(22px,3vw,38px); overflow:hidden; background:rgba(18,16,29,.94); box-shadow:0 30px 80px rgba(0,0,0,.32); transform:none; opacity:1; } .product-focus:nth-child(2) { background:linear-gradient(145deg,rgba(63,25,56,.96),rgba(20,21,40,.96)); } .product-focus:nth-child(3) { background:linear-gradient(145deg,rgba(20,24,51,.97),rgba(49,17,40,.97)); } .product-focus__media { min-height:0; aspect-ratio:4/5; border-radius:clamp(16px,2vw,28px); overflow:hidden; background:#0b0d14; } .product-focus .plate { width:100%; height:100%; background:#0b0d14; } .product-focus .plate img { width:100%; height:100%; object-fit:contain; object-position:center; filter:contrast(1.04) saturate(.96); transition:transform 1.1s cubic-bezier(.2,.7,.2,1); } .product-focus:hover .plate img { transform:scale(1.018); } .product-focus figcaption { display:grid; gap:10px; padding:clamp(8px,2vw,24px); color:#fff; } .product-focus figcaption span { font-size:11px; letter-spacing:.2em; color:#f4bdcf; } .product-focus figcaption strong { font-family:var(--display); font-size:clamp(28px,4vw,55px); line-height:.94; letter-spacing:-.045em; } .product-focus figcaption small { max-width:30ch; color:rgba(255,255,255,.64); font-size:14px; line-height:1.55; } .product-focus--wide { grid-column:1/-1; grid-template-columns:minmax(0,1.6fr) minmax(260px,.7fr); grid-template-rows:1fr; align-items:stretch; } .product-focus--wide .product-focus__media { aspect-ratio:16/10; } .product-focus--portrait { width:100%; } @media (max-width:760px) { .js main > section.is-past:not(.product-feature) { opacity:.9; filter:none; } .cinema-break,.cinema-break--shop,.cinema-break--visit { width:calc(100% - 28px); aspect-ratio:16/9; max-height:none; border-radius:16px; } .cinema-break video { object-fit:contain; } .cinema-break__label { align-items:start; flex-direction:column; } .cinema-break__label strong { text-align:left; } .product-feature { padding-block:68px 90px; } .product-feature__stack { grid-template-columns:1fr; gap:24px; } .product-focus,.product-focus--portrait { position:relative; top:auto; width:100%; min-height:0; grid-template-columns:1fr; gap:0; padding:10px; transform:none; opacity:1; } .product-focus--wide { grid-column:auto; grid-template-rows:auto 1fr; } .product-focus__media { aspect-ratio:4/5; } .product-focus--wide .product-focus__media { aspect-ratio:4/3; } .product-focus figcaption { padding:22px 14px 18px; } } /* Professional framing rules: no tilted card treatments, no off-center crop. */ .plate,.motion-panel,.product-focus,.story-card { rotate:none !important; transform-style:flat; } .plate img,.chapter .plate img,.story-card img,.product-focus .plate img { object-position:center !important; } .page-visit .chapter--street-triptych .grid { grid-template-columns:1.25fr .75fr; align-items:end; } .page-visit .chapter--street-triptych .grid figure:nth-child(1), .page-visit .chapter--street-triptych .grid figure:nth-child(2) { grid-column:auto; margin:0; } .page-visit .chapter--street-triptych .grid .plate img { object-fit:contain; background:#ece8df; } @media (prefers-reduced-motion:reduce) { html.js::before { display:none; } main > section,.product-focus,.product-focus .plate img,.cinema-break__label { transition:none !important; transform:none !important; opacity:1 !important; filter:none !important; } } /* ============================================================================ Sub-page bodies, v4 "Konbini Pop" (2026-11-01). A convenience store full of imported snacks and toys, drawn from the shop's own surfaces: the blue-and-white awning, the pegboard, the zigzag valance, the claw machines' neon, the marbled floor, the red oval sign and the yellow bollards. Store tokens only, used at full strength. Each page has its own skin and its own structure: Snacks - pegboard, awning, shelf ledges with shelf-talker tags Toys - game-centre night: neon cabinets, halftone, sticker plush Shop - marbled floor, valance, big editorial numerals, colour blocks Visit - signage: the oval sign, the door-decal hours board, bollards Scroll motion is CSS scroll-driven (compositor-run), static where unsupported, and off under prefers-reduced-motion. ========================================================================== */ .page-snacks { --acc: var(--coral-dp); } .page-toys { --acc: var(--magenta); } .page-shop { --acc: var(--cobalt); } .page-visit { --acc: var(--coral-dp); } :root { --nav-h: 66px; --k-line: rgba(21,19,26,.12); } /* the legacy section dimming desaturates photographs; not on these pages */ .js main > .k-sec.is-past, .js main > .k-sec { opacity: 1; filter: none; } /* ------------------------------------------------------------- base */ .k-sec { position: relative; padding-block: clamp(72px, 9vw, 140px); overflow: clip; scroll-margin-top: calc(var(--nav-h) + 20px); } .k-wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); position: relative; z-index: 1; } .k-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: .74rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--acc); } .k-h { font-family: var(--display); font-weight: 700; font-size: clamp(2.4rem, 6vw, 5.2rem); line-height: .92; letter-spacing: -.05em; margin: 0; text-wrap: balance; } .k-lede { margin: 22px 0 0; max-width: 46ch; font-size: clamp(1.02rem, 1.3vw, 1.2rem); line-height: 1.6; color: var(--ink-2); } .k-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(20px, 5vw, 80px); align-items: end; margin-bottom: clamp(36px, 5vw, 64px); } .k-head .k-lede { margin: 0; } .k-dark { color: var(--white); } .k-dark .k-lede { color: rgba(255,255,255,.78); } .k-dark .k-eyebrow { color: var(--ice); } .k-fig { margin: 0; position: relative; min-width: 0; } .k-fig .plate { border-radius: 6px; background: #ECE6E1; } .k-fig .plate img { width: 100%; height: 100%; object-fit: cover; } .k-cap { display: flex; align-items: baseline; gap: 10px; margin: 12px 0 0; font-size: .84rem; color: var(--ink-2); } .k-cap i { font-style: normal; font-size: .7rem; font-weight: 700; letter-spacing: .14em; color: var(--acc); } .k-dark .k-cap { color: rgba(255,255,255,.74); } .k-dark .k-cap i { color: var(--ice); } .k-film { position: relative; overflow: hidden; background: var(--ink); } .k-film video { width: 100%; height: 100%; object-fit: cover; display: block; } /* four-point sparkle, the sticker shape used across the toy and snack pages */ .k-spark { display: inline-block; width: .8em; height: .8em; background: currentColor; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); flex: none; } .k-deco { position: absolute; pointer-events: none; z-index: 0; } /* -------------------------------------------- patterns from the shop */ /* the pegboard the gummies hang on */ .pat-peg { background-color: var(--white); background-image: radial-gradient(circle, rgba(21,19,26,.1) 2.2px, transparent 2.8px); background-size: 26px 26px; background-position: 13px 13px; } /* screentone, as on the anime decals in their windows */ .pat-tone { background-image: radial-gradient(circle, rgba(255,255,255,.2) 1.5px, transparent 2px); background-size: 12px 12px; } /* the poured marble floor: magenta, cobalt, ice and coral pooled on ink */ .pat-floor { background-color: var(--ink); background-image: radial-gradient(55% 45% at 12% 18%, rgba(181,46,107,.55), transparent 70%), radial-gradient(50% 55% at 88% 12%, rgba(31,73,168,.6), transparent 70%), radial-gradient(45% 50% at 72% 96%, rgba(207,226,248,.2), transparent 70%), radial-gradient(40% 40% at 28% 88%, rgba(217,65,76,.3), transparent 70%); } /* the zigzag valance, used as the edge where one band meets the next */ .k-zig { position: absolute; left: 0; right: 0; top: -1px; height: 20px; z-index: 2; --z: var(--paper); background-image: linear-gradient(135deg, var(--z) 25%, transparent 25%), linear-gradient(225deg, var(--z) 25%, transparent 25%); background-size: 20px 20px; background-position: 0 0; } /* scrolling sign band, in their own words */ .k-marquee { overflow: hidden; white-space: nowrap; padding: 20px 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.15rem, 2.4vw, 2rem); letter-spacing: -.02em; text-transform: uppercase; line-height: 1; position: relative; z-index: 2; } .k-marquee__in { display: inline-flex; animation: k-marq 40s linear infinite; } .k-marquee__in > span { display: inline-flex; align-items: center; gap: .9em; padding-right: .9em; } .k-marquee .k-spark { width: .62em; height: .62em; } @keyframes k-marq { to { transform: translateX(-50%); } } /* round badge set on a circle, the words from their sign */ .k-badge { width: clamp(112px, 12vw, 158px); aspect-ratio: 1; } .k-badge svg { width: 100%; height: 100%; animation: k-spin 28s linear infinite; } .k-badge text { font-family: var(--body); font-weight: 700; font-size: 10.5px; letter-spacing: 2.2px; text-transform: uppercase; } @keyframes k-spin { to { transform: rotate(360deg); } } /* ---------------------------------------------------------- strip */ .k-strip { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 26vw, 380px); gap: clamp(14px, 1.6vw, 24px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); padding: 6px var(--gut) 24px; scrollbar-width: none; cursor: grab; position: relative; z-index: 1; } .k-strip::-webkit-scrollbar { display: none; } .k-strip.is-dragging { cursor: grabbing; scroll-snap-type: none; } .k-strip > * { scroll-snap-align: start; } .k-strip .plate { aspect-ratio: 3 / 4; } .k-strip img { -webkit-user-drag: none; user-select: none; } .k-hint { display: flex; align-items: center; gap: 12px; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; opacity: .62; position: relative; z-index: 1; } .k-hint::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .4; } /* ---------------------------------------------------------- next page */ .k-next { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); text-decoration: none; color: var(--white); background: var(--acc); border-radius: 22px; overflow: hidden; min-height: clamp(220px, 26vw, 360px); } .k-next__txt { padding: clamp(26px, 4vw, 56px); display: flex; flex-direction: column; justify-content: space-between; gap: 30px; } .k-next__txt small { font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; opacity: .8; } .k-next__txt strong { font-family: var(--display); font-weight: 700; font-size: clamp(1.8rem, 4vw, 3.4rem); line-height: .98; letter-spacing: -.045em; } .k-next__txt span { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; } .k-next__txt span::after { content: "\2192"; transition: transform .35s cubic-bezier(.2,.7,.2,1); } .k-next:hover .k-next__txt span::after { transform: translateX(6px); } .k-next__img { overflow: hidden; } .k-next__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.7,.2,1); } .k-next:hover .k-next__img img { transform: scale(1.04); } .k-endpad { padding-block: clamp(48px, 7vw, 100px); } /* ======================================================= SNACKS */ /* offers, pinned to the pegboard under the awning */ .sn-offers { padding-block: clamp(44px, 6vw, 80px) clamp(64px, 8vw, 110px); } .sn-offers__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(20px, 3vw, 44px); align-items: start; } .k-ticket { display: grid; grid-template-columns: minmax(0, .95fr) auto minmax(0, 1.25fr); background: var(--white); border-radius: 14px; box-shadow: 0 1px 2px rgba(21,19,26,.06), 0 30px 70px -24px rgba(21,19,26,.32); } .k-ticket__main { padding: clamp(24px, 3.2vw, 44px); display: flex; flex-direction: column; justify-content: space-between; gap: 22px; } .k-ticket__kicker { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); display: flex; gap: 10px; align-items: center; } .k-ticket__kicker .k-spark { color: var(--coral); } .k-ticket__big { display: flex; align-items: flex-end; gap: 16px; } .k-ticket__big b { font-family: var(--display); font-weight: 700; font-size: clamp(4rem, 8.4vw, 7rem); line-height: .78; letter-spacing: -.07em; color: var(--coral-dp); } .k-ticket__big span { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.5; padding-bottom: 4px; } .k-ticket q { display: block; quotes: none; font-size: clamp(1rem, 1.3vw, 1.16rem); line-height: 1.45; max-width: 34ch; } .k-ticket small { display: block; margin-top: 8px; font-size: .76rem; color: var(--ink-3); } .k-ticket__perf { width: 1px; margin-block: 18px; background-image: linear-gradient(var(--k-line) 55%, transparent 0); background-size: 1px 9px; position: relative; } .k-ticket__perf::before, .k-ticket__perf::after { content: ""; position: absolute; left: -12px; width: 24px; height: 24px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 1px rgba(21,19,26,.06); } .k-ticket__perf::before { top: -30px; } .k-ticket__perf::after { bottom: -30px; } .k-ticket__signs { padding: clamp(18px, 2.4vw, 28px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .k-sign { margin: 0; display: flex; flex-direction: column; } .k-sign .plate { aspect-ratio: 3 / 4; border-radius: 8px; background: #ECE6E1; } .k-sign .plate img { width: 100%; height: 100%; object-fit: cover; } .k-sign__tag { align-self: flex-start; margin-top: 10px; font-family: var(--display); font-weight: 700; font-size: .8rem; color: var(--white); background: var(--coral-dp); padding: .3em .65em; border-radius: 999px; } .k-sign p { margin: 6px 0 0; font-size: .8rem; line-height: 1.4; color: var(--ink-2); } .k-offers__note { margin: 14px 4px 0; font-size: .76rem; color: var(--ink-3); } .sn-offers .k-badge { margin-top: -10px; color: var(--ink); } .sn-marquee { background: var(--cobalt); color: var(--white); } .sn-marquee .k-spark { color: var(--yellow); } /* a shelf: plates stand on the cobalt ledge, shelf-talkers hang below it */ .k-shelf { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); align-items: end; padding-bottom: 64px; position: relative; background: linear-gradient(var(--white) 0 3px, var(--cobalt) 3px) 0 calc(100% - 48px) / 100% 18px no-repeat local; } .k-shelf .k-fig { padding-bottom: 18px; } .k-shelf .k-fig .plate { aspect-ratio: 3 / 4; box-shadow: 0 16px 30px -18px rgba(21,19,26,.45); } .k-shelf .k-fig:nth-child(3n+2) .plate { aspect-ratio: 4 / 5; } .k-shelf .k-fig:nth-child(3n) .plate { aspect-ratio: 5 / 7; } .k-tag { position: absolute; left: 10px; top: calc(100% + 4px); display: inline-flex; align-items: baseline; gap: 8px; z-index: 2; background: var(--white); color: var(--ink); font-size: .78rem; font-weight: 600; line-height: 1.25; padding: 7px 12px 7px 22px; border-radius: 4px; box-shadow: 0 6px 14px -4px rgba(21,19,26,.22); max-width: calc(100% - 20px); } .k-tag::before { content: ""; position: absolute; left: 8px; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1px rgba(21,19,26,.28); transform: translateY(-50%); } .k-tag i { font-style: normal; color: var(--coral-dp); font-weight: 700; font-size: .7rem; } .sn-candy { padding-top: clamp(64px, 8vw, 110px); } .sn-candy__film { aspect-ratio: 21 / 9; border-radius: 22px; margin-bottom: clamp(48px, 6vw, 80px); } /* biscuits and matcha on ice, under the zigzag */ .sn-matcha { background: var(--ice); } .sn-matcha .k-zig { --z: var(--white); } .sn-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: start; } .sn-split__film { position: sticky; top: calc(var(--nav-h) + 28px); aspect-ratio: 4 / 5; max-height: calc(100vh - var(--nav-h) - 60px); border-radius: 22px; } .sn-split__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); } .sn-split__list .k-fig .plate { aspect-ratio: 4 / 5; border-radius: 16px; } .sn-split__list .k-fig:nth-child(3n+1) { grid-column: 1 / -1; } .sn-split__list .k-fig:nth-child(3n+1) .plate { aspect-ratio: 16 / 10; } .sn-split__list .k-fig:nth-child(3n) { margin-top: clamp(30px, 5vw, 72px); } /* noodles on coral with screentone; plates as white product cards */ .sn-noodles { background-color: var(--coral-dp); } .sn-noodles .k-zig { --z: var(--ice); } .sn-noodles .k-fig { background: var(--white); border-radius: 18px; padding: 10px 10px 14px; box-shadow: 0 24px 40px -24px rgba(21,19,26,.55); } .sn-noodles .k-fig .plate { border-radius: 10px; } .sn-noodles .k-cap { color: var(--ink-2); padding-inline: 4px; } .sn-noodles .k-cap i { color: var(--coral-dp); } .sn-noodles .k-film { aspect-ratio: 3 / 4; border-radius: 10px; } .sn-noodles .k-hint { color: var(--white); } /* cold cases: the lit glass of a reach-in at night */ .sn-cold { background: var(--ink); } .sn-cold::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 0%, rgba(207,226,248,.22), transparent 70%), radial-gradient(40% 40% at 90% 70%, rgba(31,73,168,.4), transparent 70%); } .sn-cold__film { aspect-ratio: 21 / 9; border-radius: 22px; box-shadow: 0 0 0 1px rgba(207,226,248,.25), 0 0 60px -10px rgba(207,226,248,.35); } .sn-cold__film::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 24.6%, rgba(255,255,255,.14) 24.6% 25%), linear-gradient(115deg, rgba(255,255,255,.12), transparent 35%); } .sn-cold__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); margin-top: clamp(28px, 4vw, 48px); } .sn-cold__row .plate { aspect-ratio: 3 / 4; border-radius: 14px; } /* ========================================================= TOYS */ .ty-night { background: var(--ink); color: var(--white); } .ty-marquee { background: var(--ink); color: var(--white); border-block: 1px solid rgba(255,255,255,.12); } .ty-marquee .k-marquee__in { animation-duration: 32s; } .ty-marquee span:nth-child(odd) b { color: var(--white); text-shadow: 0 0 8px rgba(255,255,255,.5), 0 0 22px var(--magenta), 0 0 44px var(--magenta); } .ty-marquee b { font-weight: 700; color: transparent; -webkit-text-stroke: 1.2px var(--ice); } .ty-marquee .k-spark { color: var(--yellow); } .k-neon { color: var(--white); text-shadow: 0 0 8px rgba(255,255,255,.45), 0 0 26px var(--magenta), 0 0 60px rgba(181,46,107,.7); } .k-outline { color: transparent; -webkit-text-stroke: 1.5px var(--ice); text-shadow: none; } .ty-machines { padding-top: clamp(80px, 10vw, 150px); } .ty-cabs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(16px, 2.2vw, 32px); align-items: end; } .k-cab { margin: 0; border-radius: 22px; padding: 10px; border: 2px solid transparent; background: linear-gradient(var(--ink), var(--ink)) padding-box, linear-gradient(160deg, var(--magenta), var(--cobalt) 55%, var(--ice)) border-box; box-shadow: 0 0 46px -8px rgba(181,46,107,.6), 0 0 90px -24px rgba(31,73,168,.7); } .k-cab .k-film { border-radius: 14px; aspect-ratio: 9 / 16; } .k-cab figcaption { display: flex; justify-content: space-between; gap: 10px; padding: 12px 6px 4px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ice); } .k-cab figcaption b { color: var(--white); text-shadow: 0 0 10px var(--magenta); font-weight: 700; } .k-cab--wide .k-film { aspect-ratio: 4 / 5; } .ty-cabs .k-cab:nth-child(2) { margin-bottom: clamp(30px, 6vw, 90px); } .ty-claw { margin-top: clamp(48px, 6vw, 80px); } .ty-claw .plate { border-radius: 16px; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 20px 50px -20px rgba(181,46,107,.7); } .ty-claw .k-cap, .ty-claw .k-hint { color: rgba(255,255,255,.72); } /* plush wall: magenta screentone, plates as die-cut stickers */ .ty-plush { background-color: var(--magenta); color: var(--white); } .ty-plush .k-zig { --z: var(--ink); } .ty-plush .k-lede { color: rgba(255,255,255,.85); } .ty-plush .k-eyebrow { color: var(--white); } .ty-plush__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); align-items: start; } .k-sticker .plate, .k-sticker.k-film { border: clamp(6px, .7vw, 9px) solid var(--white); border-radius: 26px; box-shadow: 0 22px 44px -22px rgba(21,19,26,.65); background: var(--white); } .ty-plush__grid > :first-child { grid-row: span 2; } .ty-plush__grid > :first-child.k-film { aspect-ratio: 4 / 5; } .ty-plush__grid .k-fig .plate { aspect-ratio: 4 / 5; } .ty-plush__grid .k-fig:nth-child(3) { margin-top: clamp(30px, 5vw, 70px); } .ty-plush .k-cap { color: rgba(255,255,255,.9); } .ty-plush .k-cap i { color: var(--yellow); } .ty-plush .k-badge { position: absolute; right: var(--gut); top: clamp(40px, 6vw, 90px); color: var(--white); } /* the pink cabinets, behind glass at night */ .ty-cabinets { background: var(--ink); color: var(--white); } .ty-cabinets .k-zig { --z: var(--magenta); } .ty-case { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: rgba(181,46,107,.5); border: 1px solid rgba(181,46,107,.5); border-radius: 18px; overflow: hidden; box-shadow: 0 0 60px -16px rgba(181,46,107,.6); } .ty-case > * { background: var(--ink); padding: clamp(10px, 1.2vw, 16px); margin: 0; display: flex; flex-direction: column; min-width: 0; } .ty-case .plate, .ty-case .k-film { aspect-ratio: 4 / 5; border-radius: 8px; position: relative; background: #1d1a22; } .ty-case .plate img { width: 100%; height: 100%; object-fit: cover; } .ty-case .plate::after, .ty-case .k-film::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.16), transparent 38%); } .ty-case .is-big { grid-column: span 2; grid-row: span 2; } .ty-case .is-big .plate { aspect-ratio: auto; flex: 1; } .ty-case .k-cap { color: rgba(255,255,255,.76); margin-top: 10px; } .ty-case__no { font-size: .66rem; font-weight: 700; letter-spacing: .2em; color: var(--magenta); margin: 0 0 8px; filter: brightness(1.6); } /* ========================================================= SHOP */ .sh-film { aspect-ratio: 21 / 9; max-height: 88vh; width: 100%; } .sh-film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(21,19,26,.7), transparent 45%); pointer-events: none; } .sh-film__cap { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; max-width: var(--maxw); margin: 0 auto; padding: clamp(20px, 3vw, 44px) var(--gut); color: var(--white); display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; } .sh-film__cap strong { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 4vw, 3.4rem); letter-spacing: -.045em; line-height: 1; } .sh-film__cap span { font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ice); } .k-bignum { font-family: var(--display); font-weight: 700; font-size: clamp(5rem, 13vw, 11rem); line-height: .78; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 2px var(--cobalt); margin: 0 0 18px; } .k-dark .k-bignum { -webkit-text-stroke-color: var(--ice); } .sh-walk__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 70px); align-items: start; } .sh-walk__grid .k-head { display: block; position: sticky; top: calc(var(--nav-h) + 40px); } .sh-walk__grid .k-head .k-lede { margin-top: 20px; } .sh-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); } .sh-duo figure { margin: 0; } .sh-duo .k-film { aspect-ratio: 4 / 5; border-radius: 18px; } .sh-duo figure:nth-child(2) { margin-top: clamp(60px, 9vw, 140px); } .sh-aisles { color: var(--white); } .sh-aisles .k-strip { grid-auto-columns: clamp(300px, 44vw, 640px); } .sh-aisles .k-strip .plate { aspect-ratio: 4 / 3; border-radius: 16px; } .sh-aisles .k-cap { color: rgba(255,255,255,.75); } .sh-aisles .k-cap i { color: var(--ice); } .sh-aisles .k-hint { color: var(--white); } /* surfaces as colour blocks */ .sh-blocks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); } .k-block { margin: 0; border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; color: var(--white); min-height: 100%; } .k-block .plate { aspect-ratio: 1; border-radius: 0; } .k-block .plate img { width: 100%; height: 100%; object-fit: cover; } .k-block figcaption { padding: 18px 20px 22px; flex: 1; } .k-block h3 { margin: 0 0 6px; font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; } .k-block p { margin: 0; font-size: .86rem; line-height: 1.5; opacity: .88; } .k-block--floor { background: var(--ink); } .k-block--stripe { background: repeating-linear-gradient(90deg, var(--cobalt) 0 18px, #2a56bd 18px 36px); } .k-block--cobalt { background: var(--cobalt); } .k-block--coral { background: var(--coral-dp); } .sh-room { background: var(--white); } .sh-room .k-zig { --z: var(--paper); } .sh-gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(120px, 13vw, 190px); gap: clamp(12px, 1.6vw, 22px); grid-auto-flow: dense; } .sh-gallery .k-fig { grid-column: span 3; grid-row: span 2; display: flex; flex-direction: column; } .sh-gallery .k-fig .plate { flex: 1; min-height: 0; border-radius: 14px; } .sh-gallery .is-lead { grid-column: span 6; grid-row: span 3; } .sh-gallery .is-tall { grid-column: span 3; grid-row: span 3; } /* ========================================================= VISIT */ /* the storefront film, set inside their own sign: ink ring, cream ring */ .k-oval { position: relative; aspect-ratio: 2.4 / 1; border-radius: 50%; overflow: hidden; border: clamp(8px, 1.1vw, 14px) solid var(--ink); box-shadow: 0 30px 70px -30px rgba(21,19,26,.5); background: var(--ink); } .k-oval::after { content: ""; position: absolute; inset: clamp(6px, .8vw, 10px); border-radius: 50%; border: clamp(3px, .4vw, 5px) solid var(--paper); pointer-events: none; z-index: 2; } .k-oval .k-film { position: absolute; inset: 0; } .vi-sign__cap { display: flex; justify-content: center; gap: 14px; align-items: center; margin-top: 22px; font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); } .vi-sign__cap .k-spark { color: var(--coral); } /* a row of yellow bollards along the kerb */ .vi-arrive .k-head { margin-bottom: clamp(30px, 4vw, 50px); } /* the hours, set like the decal on their door glass */ .vi-hours { background: var(--ink); color: var(--white); } .vi-hours::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.06), transparent 30%), radial-gradient(50% 60% at 100% 0%, rgba(31,73,168,.45), transparent 70%); } .vi-hours__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(30px, 5vw, 80px); align-items: start; } .k-times { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .k-times caption { caption-side: bottom; text-align: left; padding-top: 14px; font-size: .78rem; color: rgba(255,255,255,.55); } .k-times th, .k-times td { padding: 0; border-bottom: 1px solid rgba(255,255,255,.14); text-align: left; font-weight: 400; vertical-align: middle; } .k-times thead th { padding: 0 0 10px; font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55); } .k-times tbody th { width: 9rem; padding: 18px 0; font-family: var(--display); font-weight: 700; letter-spacing: -.02em; white-space: nowrap; } .k-times .k-times__hrs { width: 9rem; padding-right: 18px; color: rgba(255,255,255,.8); white-space: nowrap; } .k-times tr.is-today th, .k-times tr.is-today .k-times__hrs { color: var(--yellow); } .k-times tr.is-today th::after { content: "Today"; margin-left: 10px; font-family: var(--body); font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); background: var(--yellow); padding: .25em .55em; border-radius: 999px; vertical-align: 3px; } .k-day { position: relative; height: 12px; border-radius: 6px; background: rgba(255,255,255,.08); } .k-day i, .k-day b { position: absolute; top: 0; bottom: 0; border-radius: 6px; left: calc((var(--o) - 8) / 14 * 100%); right: calc((22 - var(--c)) / 14 * 100%); } .k-day i { background: var(--ice); } .k-day b { --o: 11; --c: 16; background: var(--yellow); box-shadow: 0 0 14px rgba(242,194,48,.55); } .k-times__scale { display: flex; justify-content: space-between; font-size: .66rem; letter-spacing: .06em; } .k-legend { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 18px; font-size: .8rem; color: rgba(255,255,255,.8); } .k-legend span::before { content: ""; display: inline-block; width: 22px; height: 8px; border-radius: 4px; margin-right: 8px; vertical-align: 1px; background: var(--ice); } .k-legend span + span::before { background: var(--yellow); } .vi-hours .k-fig .plate { border-radius: 18px; aspect-ratio: 4 / 5; } .vi-find__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(30px, 5vw, 80px); align-items: start; } .vi-find .facts dd a { color: var(--coral-dp); } .vi-find .facts dt { color: var(--ink-3); } .k-actions { display: flex; flex-wrap: wrap; gap: 12px; } .vi-find .k-fig .plate { border-radius: 18px; aspect-ratio: 4 / 5; } .k-map { margin-top: clamp(40px, 5vw, 70px); border-radius: 22px; overflow: hidden; border: 1px solid var(--k-line); aspect-ratio: 21 / 8; } .k-map iframe { width: 100%; height: 100%; border: 0; display: block; } /* the address, set on the red oval itself */ .k-pill { display: inline-flex; align-items: center; gap: 10px; padding: .55em 1.1em; border-radius: 999px; background: var(--coral-dp); color: var(--white); font-weight: 700; font-size: .82rem; letter-spacing: .04em; box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); margin-bottom: 22px; } /* ---------------------------------------------------- scroll motion */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .k-fig .plate img, .k-sign .plate img, .k-block .plate img { animation: k-part linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; } .k-head, .k-cab, .k-ticket, .sh-duo figure, .k-block, .k-times tbody tr, .k-oval { animation: k-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 65%; } .sn-candy__film, .sn-cold__film { animation: k-open linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; } .sn-split__film video { animation: k-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } .k-shelf .k-fig { animation: k-drop linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; } } } @keyframes k-part { from { clip-path: inset(0 50% 0 50%); scale: 1.12; } 60% { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 0); scale: 1; } } @keyframes k-rise { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } } @keyframes k-open { from { clip-path: inset(0 6% 0 6% round 28px); } to { clip-path: inset(0 0 0 0 round 22px); } } @keyframes k-drift { from { scale: 1.1; } to { scale: 1; } } @keyframes k-drop { from { translate: 0 -30px; opacity: 0; } to { translate: 0 0; opacity: 1; } } /* ------------------------------------------------------- responsive */ @media (max-width: 1024px) { .sn-offers__grid { grid-template-columns: 1fr; } .sn-offers .k-badge { display: none; } .k-ticket { grid-template-columns: 1fr; } .k-ticket__perf { width: auto; height: 1px; margin: 0 18px; background-image: linear-gradient(90deg, var(--k-line) 55%, transparent 0); background-size: 9px 1px; } .k-ticket__perf::before, .k-ticket__perf::after { top: -12px; bottom: auto; left: auto; } .k-ticket__perf::before { left: -30px; } .k-ticket__perf::after { right: -30px; } .ty-cabs { grid-template-columns: 1fr 1fr; } .ty-cabs .k-cab--wide { grid-column: 1 / -1; } .ty-cabs .k-cab:nth-child(2) { margin-bottom: 0; } .ty-case { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sh-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ty-plush .k-badge { display: none; } } @media (max-width: 760px) { :root { --nav-h: 60px; } .k-sec { padding-block: 64px; } .k-head { grid-template-columns: 1fr; gap: 14px; margin-bottom: 28px; } .k-h { font-size: clamp(2.1rem, 10vw, 3rem); } .k-ticket__signs { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .k-ticket__signs::-webkit-scrollbar { display: none; } .k-sign { scroll-snap-align: start; } .sn-candy__film, .sn-cold__film { aspect-ratio: 4 / 5; border-radius: 18px; } .k-shelf { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 46vw; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scroll-padding-inline: var(--gut); } .k-shelf::-webkit-scrollbar { display: none; } .k-shelf .k-fig { scroll-snap-align: start; } .sn-split { grid-template-columns: 1fr; } .sn-split__film { position: relative; top: auto; max-height: none; } .sn-split__list { gap: 14px; } .sn-split__list .k-fig:nth-child(3n) { margin-top: 0; } .sn-cold__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sn-cold__row .k-fig:first-child { grid-column: 1 / -1; } .sn-cold__row .k-fig:first-child .plate { aspect-ratio: 4 / 3; } .ty-cabs { gap: 12px; } .k-cab { padding: 6px; border-radius: 16px; } .k-cab figcaption { font-size: .64rem; letter-spacing: .1em; flex-direction: column; gap: 2px; } .ty-plush__grid { grid-template-columns: 1fr 1fr; } .ty-plush__grid > :first-child { grid-column: 1 / -1; grid-row: auto; } .ty-plush__grid .k-fig:nth-child(3) { margin-top: 0; } .ty-case { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ty-case .is-big { grid-column: 1 / -1; grid-row: auto; } .ty-case .is-big .plate { aspect-ratio: 4 / 5; flex: none; } .sh-film { aspect-ratio: 4 / 5; max-height: 80vh; } .sh-film__cap { flex-direction: column; align-items: flex-start; gap: 8px; } .sh-walk__grid { grid-template-columns: 1fr; } .sh-walk__grid .k-head { position: relative; top: auto; } .sh-duo { gap: 12px; } .sh-duo figure:nth-child(2) { margin-top: 40px; } .sh-aisles .k-strip { grid-auto-columns: 84vw; } .sh-blocks { gap: 12px; } .k-block figcaption { padding: 14px 14px 18px; } .k-block h3 { font-size: 1rem; } .k-block p { font-size: .8rem; } .sh-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 52vw; gap: 12px; } .sh-gallery .k-fig, .sh-gallery .is-tall { grid-column: span 1; grid-row: span 1; } .sh-gallery .is-lead { grid-column: span 2; grid-row: span 1; } .sh-gallery .k-cap { font-size: .76rem; } .k-oval { aspect-ratio: 1.25 / 1; } .vi-hours__grid, .vi-find__grid { grid-template-columns: 1fr; } .k-times thead { display: none; } .k-times tbody tr { display: grid; grid-template-columns: 1fr auto; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.14); } .k-times tbody th, .k-times .k-times__hrs { border: 0; padding: 0 0 10px; width: auto; } .k-times .k-times__hrs { text-align: right; padding-right: 0; } .k-times tbody td:last-child { grid-column: 1 / -1; border: 0; } .k-map { aspect-ratio: 4 / 5; } .k-next { grid-template-columns: 1fr; } .k-next__img { order: -1; aspect-ratio: 16 / 9; } } @media (prefers-reduced-motion: reduce) { .k-marquee__in, .k-badge svg { animation: none; } .k-next__img img, .k-next__txt span::after { transition: none; } } .k-sec--flush { padding-block: 0; } .ty-plush__grid > :first-child .k-film { aspect-ratio: 4 / 5; } /* the legacy pass fades sections once scrolled past (to .82 and desaturated); on these pages that greys the ink bands and washes the photographs */ .page-snacks main > section, .page-toys main > section, .page-shop main > section, .page-visit main > section { opacity: 1 !important; filter: none !important; } .ty-plush__grid > :first-child { align-self: stretch; display: flex; flex-direction: column; } .ty-plush__grid > :first-child .k-film { flex: 1; aspect-ratio: auto; min-height: 420px; } .sh-walk__grid .k-h { font-size: clamp(2.2rem, 4.2vw, 3.8rem); } @media (max-width: 760px) { .ty-plush__grid > :first-child .k-film { aspect-ratio: 4 / 5; min-height: 0; flex: none; } } .k-block figcaption { color: var(--white); margin: 0; } /* Snacks: the header runs straight into the moving sign band */ .page-snacks .sn-marquee { box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 18px 30px -22px rgba(31,73,168,.8); } /* Shop: the aisle film rises over the foot of the header as a card */ .page-shop .phead__in { padding-bottom: calc(clamp(2.6rem, 6vw, 4.5rem) + clamp(48px, 7vw, 110px)); } .sh-lead { padding-block: 0 clamp(20px, 3vw, 40px); overflow: visible; z-index: 2; } .sh-lead .sh-film { margin-top: calc(-1 * clamp(48px, 7vw, 110px)); border-radius: 24px; aspect-ratio: 21 / 9; max-height: 78vh; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 80px -40px rgba(21,19,26,.65); } .sh-lead .sh-film__cap { padding-inline: clamp(20px, 3vw, 44px); } @media (max-width: 760px) { .sh-lead .sh-film { aspect-ratio: 4 / 5; border-radius: 18px; } } .k-oval video { object-position: 50% 42%; } /* Visit: the red-oval film is the header. Shop: a still header and a shelf directory. One moving film in view at a time (app.js, filmCheck). */ .sh-dir__card { text-decoration: none; color: var(--white); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; } .sh-dir__card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -26px rgba(21, 19, 26, .55); } .sh-dir__card:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; } .sh-dir__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; } .sh-dir__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); } .sh-dir__card:hover .sh-dir__img img { transform: scale(1.05); } .sh-dir__txt { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; } .sh-dir__go { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .28); display: flex; justify-content: space-between; align-items: center; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .sh-dir__txt p { margin-bottom: 16px; } .k-block--magenta { background: var(--magenta); } @media (max-width: 1024px) { } @media (max-width: 760px) { .sh-dir__img { aspect-ratio: 1; } .sh-dir__txt { padding: 14px 14px 16px; } } /* Visit header: no film. The sign's own red, the real logo tilted like a sticker, and its rings echoing out behind it. The film sits below, in the oval. */ .vi-sign { padding-block: clamp(56px, 7vw, 100px) clamp(40px, 5vw, 70px); } .page-visit .phead.vi-head { background: var(--coral-dp); } .page-visit .vi-head::after { background: radial-gradient(120% 140% at 85% 50%, rgba(255, 255, 255, .08), transparent 55%), linear-gradient(100deg, rgba(90, 18, 26, .38), transparent 62%); } .vi-head .phead__in { position: relative; z-index: 1; } .vi-head__mark { position: absolute; z-index: 0; top: 64%; right: max(5vw, calc((100vw - 1280px) / 2 + 40px)); width: clamp(260px, 26vw, 420px); aspect-ratio: 3 / 1; transform: translateY(-50%) rotate(-6deg); } .vi-head__mark img { position: relative; z-index: 1; width: 100%; height: auto; filter: drop-shadow(0 28px 34px rgba(60, 10, 16, .5)); } .vi-head__mark::before, .vi-head__mark::after { content: ""; position: absolute; border-radius: 50%; border: 2px solid rgba(250, 247, 244, .2); } .vi-head__mark::before { inset: -16% -9%; } .vi-head__mark::after { inset: -38% -21%; border-color: rgba(250, 247, 244, .1); } .vi-head__acts { margin-top: 28px; } .vi-head__call { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); } .vi-head__call:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; } @media (max-width: 1024px) { .vi-head__mark { position: relative; top: auto; right: auto; width: min(74vw, 300px); margin: 40px 0 6px 22px; transform: rotate(-6deg); } .vi-head .phead__in { padding-top: 26px; } } /* Visit arrival: one wide photo of the front and three steps that point at what it shows, instead of four near-identical storefronts. */ .vi-arrive__grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(28px, 4.5vw, 72px); align-items: center; } .vi-arrive__grid .plate { border-radius: 22px; aspect-ratio: 3 / 2; } .vi-arrive__grid .k-cap i { display: none; } .k-steps { list-style: none; margin: 0; padding: 0; counter-reset: k-step; } .k-steps li { counter-increment: k-step; display: grid; grid-template-columns: 3.2rem 1fr; column-gap: 14px; padding: 22px 0; border-top: 1px solid rgba(21, 19, 26, .12); } .k-steps li:last-child { border-bottom: 1px solid rgba(21, 19, 26, .12); } .k-steps li::before { content: counter(k-step, decimal-leading-zero); grid-row: span 2; font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1; color: var(--coral); } .k-steps b { font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em; color: var(--ink); } .k-steps span { margin-top: 6px; color: var(--ink-2); line-height: 1.55; } @media (max-width: 1024px) { .vi-arrive__grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { .k-steps li { padding: 18px 0; grid-template-columns: 2.6rem 1fr; } } /* ===================================================== UX PASS (1 Nov, evening) Legibility, focus, phone nav. Palette variables only. */ /* labels were 10-11.8px; nothing below 12px */ .k-eyebrow, .k-hint, .k-ticket__kicker, .offer__eyebrow, .offer__kicker, .vi-sign__cap, .sh-dir__go, .ty-case__no, .k-fig b, .k-fig span, small { font-size: max(.78rem, 12px); } /* the focus ring was cobalt everywhere: invisible on ink, cobalt and red grounds */ .k-dark :focus-visible, .foot :focus-visible, .bar :focus-visible, .offer :focus-visible, .lb :focus-visible, .phead :focus-visible { outline-color: var(--yellow); } /* home hero: the rating sat straight on the drifting photos */ .hero .rating { padding: .5rem .95rem; border-radius: 999px; background: rgba(250,247,244,.94); } .hero__scrim { background: linear-gradient(to right, rgba(250,247,244,.97) 0%, rgba(250,247,244,.94) 48%, rgba(250,247,244,.72) 70%, rgba(250,247,244,.42) 100%), linear-gradient(to bottom, rgba(250,247,244,.85), rgba(250,247,244,0) 22%, rgba(250,247,244,0) 72%, rgba(250,247,244,.9)); } /* phones: all four nav links visible at 360-430, a fade cue where they still overflow */ @media (max-width: 900px) { .nav__links.is-more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); } } @media (max-width: 520px) { .nav__links { gap: .8rem; justify-content: space-between; font-size: .86rem; } .hero__scrim { background: linear-gradient(to bottom, rgba(250,247,244,.92) 0%, rgba(250,247,244,.88) 55%, rgba(250,247,244,.74) 100%); } } /* phones: the open/closed state was just a dot; say it */ @media (max-width: 700px) { .chip[data-short]::after { content: attr(data-short); font-size: .78rem; font-weight: 600; color: var(--ink); } .chip[data-short] { padding: .42em .8em .42em .7em; } } @media (max-width: 700px) { .nav__bar { padding-block: 5px; } } @media (max-width: 380px) { .nav__links { gap: .55rem; font-size: .8rem; } } .k-next__txt small, .sh-film__cap span, .k-cab figcaption b, .k-cab figcaption span { font-size: max(.78rem, 12px); }