@charset "UTF-8"; /* ============================================================================ ANNO ALMERE — design system Grote Markt 121, 1315 JC Almere Palette is lifted straight from the venue: the teal leopard upholstery, the copper leaf wall, the plum/magenta florals and the red ANNO wordmark. Sections: 01 tokens · 02 reset · 03 typography · 04 layout · 05 buttons 06 header/nav · 07 hero · 08 marquee · 09 worlds · 10 daily 11 stats · 12 split · 13 cards · 14 filmstrip · 15 reviews 16 accordion · 17 compare · 18 menu cards · 19 cta band 20 practical · 21 footer · 22 dock · 23 lightbox · 24 motion ========================================================================= */ /* ---------------------------------------------------------------- 01 tokens */ :root { /* ink — near-black with a green cast, so photography sits warm on it */ --ink-900: #050d0c; --ink-850: #071312; --ink-800: #0a1918; --ink-700: #0f2422; --ink-600: #16332f; /* teal — the leopard upholstery */ --teal-900: #062e2c; --teal-800: #084743; --teal-700: #0b605c; --teal-600: #0f7a75; --teal-500: #12908c; --teal-400: #1fb5ac; --teal-300: #35d6c8; --teal-200: #7fe8dd; /* copper — the pressed-leaf wall */ --copper-700: #8c4718; --copper-600: #a85a22; --copper-500: #c9762f; --copper-400: #e0a54a; --copper-300: #f0c882; /* plum & magenta — the dried florals */ --plum-800: #2e0a1e; --plum-700: #4a1030; --magenta-600: #a3155a; --magenta-500: #c41e68; --magenta-400: #e8437f; /* brand + neutrals */ --red: #db1f28; --bone: #f6f1e8; --sand: #ded4c4; --mist: rgb(246 241 232 / 70%); --haze: rgb(246 241 232 / 58%); /* keeps small caps above 4.5:1 on --ink-900 */ --hair: rgb(127 232 221 / 18%); --hair-soft: rgb(246 241 232 / 12%); --bg: var(--ink-900); --fg: var(--bone); /* type */ --f-display: "Fraunces", "Iowan Old Style", Georgia, serif; --f-body: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --t-xs: 0.75rem; --t-sm: 0.875rem; --t-base: clamp(1rem, 0.96rem + 0.2vw, 1.075rem); --t-lede: clamp(1.1rem, 1rem + 0.55vw, 1.4rem); --t-h4: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem); --t-h3: clamp(1.45rem, 1.25rem + 1vw, 2.1rem); --t-h2: clamp(2.1rem, 1.55rem + 2.6vw, 4rem); --t-h1: clamp(2.9rem, 1.7rem + 5.6vw, 7.5rem); --t-mega: clamp(4rem, 1rem + 15vw, 17rem); /* space & shape */ --gut: clamp(1.15rem, 0.8rem + 1.8vw, 2.75rem); --pad-y: clamp(4rem, 2.6rem + 5vw, 7.5rem); --wrap: 82.5rem; --wrap-narrow: 56rem; --r-sm: 6px; --r-md: 14px; --r-lg: 26px; --r-pill: 999px; --header-h: 5rem; --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-io: cubic-bezier(0.65, 0, 0.35, 1); --shadow-lift: 0 1.5rem 3.5rem -1.5rem rgb(0 0 0 / 78%); --shadow-deep: 0 2.5rem 6rem -2rem rgb(0 0 0 / 85%); } /* per-page accent — set on */ /* Each page gets its own surface, taken from a different part of the venue: the turquoise banquettes, the pressed-leaf wall, the dried flower display. */ body { --accent: var(--teal-300); --accent-mid: var(--teal-500); --accent-deep: var(--teal-900); --pattern: url("../img/pattern-leopard.webp"); --pattern-size: 300px; --type-fill: url("../img/type-leopard.webp"); } body[data-accent="copper"] { --accent: var(--copper-400); --accent-mid: var(--copper-600); --accent-deep: #3a1b06; --pattern: url("../img/pattern-leaf.webp"); --pattern-size: 360px; --type-fill: url("../img/type-leaf.webp"); } body[data-accent="magenta"] { --accent: var(--magenta-400); --accent-mid: var(--magenta-600); --accent-deep: var(--plum-800); --pattern: url("../img/pattern-floral.webp"); --pattern-size: 260px; --type-fill: url("../img/type-floral.webp"); } /* ----------------------------------------------------------------- 02 reset */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); } body { background: var(--bg); color: var(--fg); font-family: var(--f-body); font-size: var(--t-base); line-height: 1.65; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, picture, svg, video { display: block; max-width: 100%; } img { height: auto; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } :where(h1, h2, h3, h4, h5, h6) { font-weight: 400; line-height: 1.1; } ::selection { background: var(--teal-400); color: var(--ink-900); } :focus-visible { outline: 2px solid var(--teal-300); outline-offset: 3px; border-radius: 3px; } .skip-link { position: fixed; inset-inline-start: 1rem; inset-block-start: -6rem; z-index: 999; padding: 0.75rem 1.25rem; background: var(--accent); color: var(--ink-900); font-weight: 800; border-radius: var(--r-pill); transition: inset-block-start 0.25s var(--ease); } .skip-link:focus { inset-block-start: 1rem; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ------------------------------------------------------------ 03 typography */ .display, :where(h1, h2, h3) .display, .h1, .h2, .h3 { font-family: var(--f-display); font-variation-settings: "opsz" 120, "SOFT" 22, "WONK" 1; font-weight: 800; letter-spacing: -0.028em; line-height: 0.98; text-wrap: balance; } .h1 { font-size: var(--t-h1); line-height: 0.9; letter-spacing: -0.04em; } .h2 { font-size: var(--t-h2); line-height: 0.95; letter-spacing: -0.034em; } .h3 { font-size: var(--t-h3); line-height: 1.06; } .h4 { font-family: var(--f-display); font-variation-settings: "opsz" 40, "SOFT" 16, "WONK" 1; font-weight: 700; font-size: var(--t-h4); line-height: 1.18; letter-spacing: -0.015em; } .eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--f-body); font-size: clamp(0.66rem, 0.6rem + 0.2vw, 0.78rem); font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); line-height: 1; } .eyebrow::before { content: ""; width: 2rem; height: 1px; background: currentColor; opacity: 0.65; } .eyebrow--center::after { content: ""; width: 2rem; height: 1px; background: currentColor; opacity: 0.65; } .lede { font-size: var(--t-lede); line-height: 1.55; color: var(--mist); max-width: 46ch; text-wrap: pretty; } .lede strong { color: var(--bone); font-weight: 600; } .prose p { color: var(--mist); text-wrap: pretty; } .prose p + p { margin-block-start: 1.1em; } .prose strong { color: var(--bone); font-weight: 600; } .prose a:not(.btn) { color: var(--accent); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; transition: opacity 0.2s; } .prose a:not(.btn):hover { opacity: 0.7; } .amount { font-family: var(--f-display); font-variation-settings: "opsz" 40; font-weight: 700; color: var(--copper-400); } /* leopard-filled type — the signature move, taken from the theme swatch */ .t-leopard { color: var(--accent); } @supports (background-clip: text) or (-webkit-background-clip: text) { .t-leopard { background-image: linear-gradient(100deg, rgb(53 214 200 / 0%) 22%, rgb(243 205 138 / 78%) 100%), var(--type-fill); background-size: 100% 100%, clamp(20rem, 52vw, 52rem); background-position: center, center; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } } .t-outline { color: transparent; -webkit-text-stroke: 1.2px rgb(127 232 221 / 55%); paint-order: stroke fill; } .t-accent { color: var(--accent); } .t-copper { color: var(--copper-400); } .t-red { color: var(--red); } /* ---------------------------------------------------------------- 04 layout */ .container { width: min(100% - (var(--gut) * 2), var(--wrap)); margin-inline: auto; } .container--narrow { width: min(100% - (var(--gut) * 2), var(--wrap-narrow)); } .container--wide { width: min(100% - (var(--gut) * 2), 96rem); } .section { padding-block: var(--pad-y); position: relative; } .section--tight { padding-block: clamp(3rem, 2rem + 4vw, 6rem); } .section--flush-top { padding-block-start: 0; } .section--ink { background: var(--ink-850); } .section--deep { background: linear-gradient(180deg, var(--ink-900), var(--teal-900) 160%); } .section--plum { background: linear-gradient(180deg, var(--ink-900), var(--plum-800) 180%); } .section-head { display: grid; gap: 1.5rem; margin-block-end: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); } .section-head--split { grid-template-columns: minmax(0, 1fr); align-items: end; } @media (min-width: 60rem) { .section-head--split { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 3rem; } } .section-head__aside { color: var(--mist); max-width: 42ch; } .stack { display: grid; gap: 1.5rem; justify-items: start; } .stack--center { justify-items: center; text-align: center; } .stack--center .lede { margin-inline: auto; } .stack--center .eyebrow::after { content: ""; width: 2rem; height: 1px; background: currentColor; opacity: 0.65; } .rule { height: 1px; background: linear-gradient(90deg, transparent, var(--hair) 12%, var(--hair) 88%, transparent); border: 0; } /* texture utilities ------------------------------------------------------- */ .grain::after { content: ""; position: absolute; inset: 0; background-image: url("../img/grain.webp"); background-size: 160px; opacity: 0.05; mix-blend-mode: overlay; pointer-events: none; z-index: 3; } .leopard-bg { position: absolute; inset: 0; background-image: var(--pattern); background-size: var(--pattern-size); opacity: 0.14; mix-blend-mode: luminosity; pointer-events: none; } .rosettes-bg { position: absolute; inset: 0; background-image: url("../img/rosettes.svg"); background-size: 260px; opacity: 0.35; pointer-events: none; } /* --------------------------------------------------------------- 05 buttons */ .btn { --btn-fg: var(--ink-900); --btn-bg: var(--accent); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem; padding: 0.95rem 1.6rem; border-radius: var(--r-pill); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; line-height: 1; white-space: nowrap; isolation: isolate; overflow: hidden; background: var(--btn-bg); color: var(--btn-fg); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), color 0.3s; } .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bone); transform: translateY(101%); transition: transform 0.45s var(--ease); } .btn:hover, .btn:focus-visible { transform: translateY(-2px); box-shadow: 0 0.9rem 1.8rem -0.75rem color-mix(in srgb, var(--accent) 45%, transparent); } .btn:hover::after, .btn:focus-visible::after { transform: translateY(0); } .btn__ico { width: 1em; height: 1em; flex: none; transition: transform 0.35s var(--ease); } .btn:hover .btn__ico { transform: translateX(3px); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--bone); box-shadow: inset 0 0 0 1px var(--hair); } .btn--ghost::after { background: var(--accent); } .btn--ghost:hover, .btn--ghost:focus-visible { color: var(--ink-900); box-shadow: inset 0 0 0 1px transparent; } .btn--accent { --btn-bg: var(--accent); } .btn--copper { --btn-bg: var(--copper-400); } .btn--bone { --btn-bg: var(--bone); } .btn--bone::after { background: var(--accent); } .btn--lg { padding: 1.15rem 2rem; font-size: 0.86rem; } .btn--sm { padding: 0.7rem 1.15rem; font-size: 0.72rem; } .btn--block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; } /* very narrow phones: let long labels wrap rather than push the layout out */ @media (max-width: 26rem) { .btn { white-space: normal; text-align: center; padding-inline: 1.2rem; letter-spacing: 0.07em; } .btn--lg { padding-block: 1rem; font-size: 0.8rem; } } /* text link with a drawn underline */ .link-arrow { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); padding-block-end: 0.35rem; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 0.4s var(--ease), gap 0.3s var(--ease); } .link-arrow:hover { background-size: 30% 1px; gap: 0.95rem; } /* pill chips */ .chips { display: flex; flex-wrap: wrap; gap: 0.6rem; } .chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: var(--r-pill); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sand); box-shadow: inset 0 0 0 1px var(--hair); background: rgb(255 255 255 / 3%); } .chip--solid { background: var(--accent); color: var(--ink-900); box-shadow: none; } .chip__dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--accent); } /* badge used for times / prices */ .badge { display: inline-flex; align-items: baseline; gap: 0.45rem; font-family: var(--f-display); font-variation-settings: "opsz" 20; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; color: var(--accent); } .badge::before { content: ""; align-self: center; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); } /* --------------------------------------------------------- 06 header & nav */ .site-header { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h); display: flex; align-items: center; transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), height 0.4s var(--ease); } .site-header::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(5 13 12 / 78%), transparent); transition: opacity 0.4s; pointer-events: none; } .site-header.is-stuck { height: 4.25rem; background: rgb(5 13 12 / 86%); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); box-shadow: 0 1px 0 var(--hair), 0 1rem 2.5rem -1.5rem rgb(0 0 0 / 90%); } .site-header.is-stuck::before { opacity: 0; } .nav { position: relative; width: min(100% - (var(--gut) * 2), 96rem); margin-inline: auto; display: flex; align-items: center; gap: 1.5rem; } .brand { display: flex; align-items: center; gap: 0.85rem; flex: none; } .brand__mark { width: auto; height: clamp(1.35rem, 1.1rem + 0.7vw, 1.75rem); } .brand__sub { display: none; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase; color: var(--haze); padding-inline-start: 0.85rem; border-inline-start: 1px solid var(--hair-soft); } @media (min-width: 30rem) { .brand__sub { display: block; } } .nav__links { display: none; } @media (min-width: 62rem) { .nav__links { display: flex; align-items: center; gap: clamp(1rem, 0.2rem + 1.6vw, 2.25rem); margin-inline: auto; } } .nav__link { position: relative; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mist); padding-block: 0.4rem; transition: color 0.3s; } .nav__link::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease); } .nav__link:hover, .nav__link:focus-visible { color: var(--bone); } .nav__link:hover::after, .nav__link:focus-visible::after { transform: scaleX(1); } .nav__link[aria-current="page"] { color: var(--bone); } .nav__link[aria-current="page"]::after { transform: scaleX(1); background: var(--accent); } .nav__actions { display: flex; align-items: center; gap: 0.6rem; margin-inline-start: auto; } @media (min-width: 62rem) { .nav__actions { margin-inline-start: 0; } } /* reserve dropdown */ .reserve { position: relative; display: none; } @media (min-width: 48rem) { .reserve { display: block; } } .reserve__panel { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 0.85rem); width: 19rem; padding: 0.6rem; border-radius: var(--r-md); background: rgb(7 19 18 / 97%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: inset 0 0 0 1px var(--hair), var(--shadow-deep); display: grid; gap: 0.15rem; opacity: 0; visibility: hidden; transform: translateY(-0.5rem); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s; } .reserve[data-open="true"] .reserve__panel { opacity: 1; visibility: visible; transform: translateY(0); } .reserve__item { display: grid; grid-template-columns: 2.1rem 1fr; align-items: center; gap: 0.85rem; padding: 0.8rem 0.9rem; border-radius: 10px; transition: background 0.25s; } .reserve__item:hover, .reserve__item:focus-visible { background: color-mix(in srgb, var(--accent) 10%, transparent); } .reserve__item svg { width: 1.2rem; height: 1.2rem; color: var(--accent); justify-self: center; } .reserve__item b { display: block; font-size: 0.92rem; font-weight: 700; letter-spacing: -0.01em; } .reserve__item span { display: block; font-size: 0.75rem; color: var(--haze); line-height: 1.4; } /* burger */ .nav-toggle { position: relative; z-index: 2; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hair); transition: background 0.3s; } @media (min-width: 62rem) { .nav-toggle { display: none; } } .nav-toggle:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } .nav-toggle__bars { display: grid; gap: 5px; width: 1.1rem; } .nav-toggle__bars i { display: block; height: 1.5px; background: var(--bone); transition: transform 0.4s var(--ease), opacity 0.25s; } [aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } [aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; } [aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* full-screen mobile menu */ .menu { position: fixed; inset: 0; z-index: 99; padding: calc(var(--header-h) + 1.5rem) var(--gut) 2rem; background: var(--ink-900); display: grid; align-content: space-between; gap: 2rem; overflow-y: auto; clip-path: circle(0% at calc(100% - 3.5rem) 2.5rem); visibility: hidden; transition: clip-path 0.7s var(--ease), visibility 0.7s; } .menu[data-open="true"] { clip-path: circle(150% at calc(100% - 3.5rem) 2.5rem); visibility: visible; } .menu__bg { position: absolute; inset: 0; background-image: var(--pattern); background-size: var(--pattern-size); opacity: 0.1; mix-blend-mode: luminosity; pointer-events: none; } .menu__list { position: relative; display: grid; gap: 0.15rem; } .menu__item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.55rem; border-block-end: 1px solid var(--hair-soft); opacity: 0; transform: translateY(1.5rem); } .menu[data-open="true"] .menu__item { animation: menu-in 0.6s var(--ease) forwards; animation-delay: calc(0.12s + var(--i, 0) * 0.06s); } @keyframes menu-in { to { opacity: 1; transform: none; } } .menu__label { font-family: var(--f-display); font-variation-settings: "opsz" 90, "WONK" 1; font-weight: 700; font-size: clamp(2rem, 1.2rem + 4.5vw, 3.4rem); line-height: 1.05; letter-spacing: -0.035em; } .menu__item:hover .menu__label, .menu__item:focus-visible .menu__label { color: var(--accent); } .menu__num { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.18em; color: var(--haze); } .menu__foot { position: relative; display: grid; gap: 1.25rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--hair-soft); font-size: 0.9rem; color: var(--mist); } .menu__foot a:hover { color: var(--accent); } body.is-locked { overflow: hidden; } /* ------------------------------------------------------------------ 07 hero */ .hero { position: relative; isolation: isolate; display: grid; overflow: clip; } .hero--home { min-height: 100svh; align-content: end; padding-block: calc(var(--header-h) + 3rem) clamp(2rem, 1rem + 4vw, 4rem); } .hero--page { min-height: min(78svh, 44rem); align-content: end; padding-block: calc(var(--header-h) + 4rem) clamp(2.5rem, 1.5rem + 4vw, 5rem); } .hero__media { position: absolute; inset: 0; z-index: -2; } .hero__media img, .hero__media picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s var(--ease-io); } .hero__slide.is-active { opacity: 1; } .hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgb(5 13 12 / 86%) 0%, rgb(5 13 12 / 52%) 38%, rgb(5 13 12 / 0%) 74%), radial-gradient(120% 80% at 15% 90%, rgb(6 46 44 / 62%), transparent 62%), radial-gradient(90% 70% at 88% 12%, rgb(74 16 48 / 45%), transparent 60%), linear-gradient(180deg, rgb(5 13 12 / 74%) 0%, rgb(5 13 12 / 20%) 34%, rgb(5 13 12 / 80%) 78%, var(--ink-900) 100%); } .hero__leopard { position: absolute; inset: auto 0 0; z-index: -1; height: 55%; background-image: var(--pattern); background-size: calc(var(--pattern-size) * 1.4); opacity: 0.16; mix-blend-mode: overlay; -webkit-mask-image: linear-gradient(transparent, #000 85%); mask-image: linear-gradient(transparent, #000 85%); pointer-events: none; } .hero__inner { position: relative; display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); } .hero__title { display: grid; gap: 0.1em; } .t-line { display: block; font-family: var(--f-display); font-variation-settings: "opsz" 144, "SOFT" 18, "WONK" 1; font-weight: 800; font-size: var(--t-h1); line-height: 0.88; letter-spacing: -0.045em; text-wrap: balance; } .t-sub { display: block; margin-block-start: clamp(0.9rem, 0.5rem + 1vw, 1.5rem); max-width: 34ch; font-family: var(--f-body); font-size: clamp(0.98rem, 0.9rem + 0.4vw, 1.2rem); font-weight: 500; line-height: 1.5; letter-spacing: 0; color: var(--mist); text-wrap: pretty; } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; } .hero__foot { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; margin-block-start: clamp(1.5rem, 1rem + 2vw, 3rem); padding-block-start: 1.4rem; border-block-start: 1px solid var(--hair-soft); } .hero__status { display: inline-flex; align-items: center; gap: 0.65rem; font-size: 0.82rem; font-weight: 600; color: var(--sand); } .hero__status i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); animation: pulse 2.4s infinite; } .hero__status.is-closed i { background: var(--copper-400); box-shadow: 0 0 0 0 rgb(224 165 74 / 55%); } @keyframes pulse { 70% { box-shadow: 0 0 0 0.65rem color-mix(in srgb, var(--accent) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); } } .hero__cue { display: inline-flex; align-items: center; gap: 0.75rem; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--haze); } .hero__cue svg { width: 1rem; height: 1rem; animation: nudge 2s var(--ease-io) infinite; } @media (max-width: 47.99rem) { .hero--home .hero__cue { display: none; } } @keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } /* dot indicators for the home hero */ .hero__dots { display: flex; gap: 0.5rem; } .hero__dot { width: 1.9rem; height: 3px; border-radius: var(--r-pill); background: rgb(246 241 232 / 22%); transition: background 0.4s; } .hero__dot.is-active { background: var(--accent); } /* page hero breadcrumb */ .crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--haze); font-weight: 700; } .crumbs a:hover { color: var(--accent); } .crumbs li + li::before { content: "/"; margin-inline-end: 0.5rem; opacity: 0.5; } .crumbs li { display: flex; } /* --------------------------------------------------------------- 08 marquee */ .marquee { position: relative; overflow: hidden; padding-block: clamp(0.85rem, 0.6rem + 0.8vw, 1.4rem); background: var(--teal-900); box-shadow: inset 0 1px 0 var(--hair), inset 0 -1px 0 var(--hair); } .marquee__bg { position: absolute; inset: 0; background-image: var(--pattern); background-size: calc(var(--pattern-size) * 0.85); opacity: 0.3; mix-blend-mode: soft-light; } .marquee__track { position: relative; display: flex; width: max-content; } .marquee__group { display: flex; align-items: center; flex: none; } .marquee__item { display: inline-flex; align-items: center; gap: 1.5rem; padding-inline: 1.5rem; font-family: var(--f-display); font-variation-settings: "opsz" 60, "WONK" 1; font-weight: 700; font-size: clamp(1rem, 0.85rem + 0.7vw, 1.55rem); letter-spacing: -0.01em; color: var(--bone); white-space: nowrap; } .marquee__item::after { content: ""; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--red); flex: none; } @keyframes marquee { to { transform: translateX(-50%); } } .marquee--copper { background: linear-gradient(90deg, var(--copper-700), var(--plum-700)); } .marquee--plum { background: linear-gradient(90deg, var(--plum-800), var(--magenta-600) 120%); } /* ---------------------------------------------------------------- 09 worlds */ .worlds { display: grid; gap: 0.85rem; } @media (min-width: 62rem) { .worlds { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; transition: grid-template-columns 0.8s var(--ease); } .worlds:has(.world:nth-child(1):hover), .worlds:has(.world:nth-child(1):focus-within) { grid-template-columns: 2.05fr 0.65fr 0.65fr 0.65fr; } .worlds:has(.world:nth-child(2):hover), .worlds:has(.world:nth-child(2):focus-within) { grid-template-columns: 0.65fr 2.05fr 0.65fr 0.65fr; } .worlds:has(.world:nth-child(3):hover), .worlds:has(.world:nth-child(3):focus-within) { grid-template-columns: 0.65fr 0.65fr 2.05fr 0.65fr; } .worlds:has(.world:nth-child(4):hover), .worlds:has(.world:nth-child(4):focus-within) { grid-template-columns: 0.65fr 0.65fr 0.65fr 2.05fr; } } .world { position: relative; isolation: isolate; display: grid; align-content: end; gap: 0.9rem; min-height: 20rem; padding: clamp(1.25rem, 1rem + 1vw, 2rem); border-radius: var(--r-lg); overflow: hidden; box-shadow: inset 0 0 0 1px var(--hair-soft); } @media (min-width: 62rem) { .world { min-height: min(66vh, 34rem); } } .world__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: var(--w-pos, center); filter: saturate(0.82) brightness(0.78); transform: scale(1.03); transition: transform 1.1s var(--ease), filter 0.7s var(--ease); } .world:hover .world__img, .world:focus-within .world__img { filter: saturate(1.1) brightness(0.92); transform: scale(1.09); } .world::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(5 13 12 / 10%) 20%, rgb(5 13 12 / 82%) 100%); } .world::after { content: ""; position: absolute; inset-block-end: 0; inset-inline: 0; height: 3px; background: var(--w-accent, var(--accent)); transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease); } .world:hover::after, .world:focus-within::after { transform: scaleX(1); } .world__num { position: absolute; inset-block-start: clamp(1.25rem, 1rem + 1vw, 2rem); inset-inline-start: clamp(1.25rem, 1rem + 1vw, 2rem); font-family: var(--f-display); font-variation-settings: "opsz" 40; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.1em; color: var(--w-accent, var(--accent)); } .world__title { font-family: var(--f-display); font-variation-settings: "opsz" 100, "WONK" 1; font-weight: 800; font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.6rem); line-height: 0.95; letter-spacing: -0.035em; } .world__body { color: var(--mist); font-size: 0.95rem; line-height: 1.55; max-width: 34ch; } @media (min-width: 62rem) { .world__body { opacity: 0; max-height: 0; transform: translateY(0.6rem); transition: opacity 0.4s var(--ease), transform 0.55s var(--ease), max-height 0.7s var(--ease); } .world:hover .world__body, .world:focus-within .world__body { opacity: 1; max-height: 12rem; transform: none; transition-delay: 0.12s; } } .world__cta { color: var(--w-accent, var(--accent)); } .world__link { position: absolute; inset: 0; z-index: 4; } .world__link:focus-visible { outline-offset: -6px; } /* ----------------------------------------------------------------- 10 daily */ .daily { display: grid; gap: 1.75rem; position: relative; } @media (min-width: 60rem) { .daily { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; } .daily::before { content: ""; position: absolute; inset-block-start: 0.5rem; inset-inline: 6%; height: 1px; background-image: repeating-linear-gradient(90deg, var(--hair) 0 8px, transparent 8px 16px); background-repeat: no-repeat; background-size: var(--draw) 100%; } } .stop { position: relative; display: grid; gap: 0.85rem; align-content: start; } .stop::before { content: ""; width: 1rem; height: 1rem; border-radius: 50%; background: var(--ink-900); box-shadow: inset 0 0 0 2px var(--stop-accent, var(--teal-400)); position: relative; z-index: 1; } .stop__time { font-family: var(--f-display); font-variation-settings: "opsz" 100, "WONK" 1; font-weight: 800; font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem); line-height: 1; letter-spacing: -0.04em; color: var(--stop-accent, var(--accent)); } .stop__title { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } .stop__body { font-size: 0.92rem; color: var(--mist); line-height: 1.55; text-wrap: pretty; } .stop__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); filter: saturate(0.85); transition: filter 0.5s var(--ease), transform 0.6s var(--ease); } .stop:hover .stop__img { filter: saturate(1.1); transform: translateY(-4px); } /* ----------------------------------------------------------------- 11 stats */ .stats { display: grid; gap: 1px; background: var(--hair-soft); border-block: 1px solid var(--hair-soft); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 52rem) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .stat { background: var(--ink-900); padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.75rem) clamp(1rem, 0.8rem + 1vw, 1.75rem); display: grid; gap: 0.5rem; text-align: center; place-items: center; } .stat__num { font-family: var(--f-display); font-variation-settings: "opsz" 144, "WONK" 1; font-weight: 800; font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.6rem); line-height: 0.9; letter-spacing: -0.05em; color: var(--bone); } .stat__num .u { color: var(--accent); } .stat__label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--haze); text-wrap: balance; } /* ----------------------------------------------------------------- 12 split */ .split { display: grid; gap: clamp(2rem, 1.2rem + 3vw, 4.5rem); align-items: center; } @media (min-width: 60rem) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); } .split--wide-media { grid-template-columns: 1.15fr 1fr; } .split--wide-text { grid-template-columns: 1fr 1.15fr; } .split--flip .split__media { order: 2; } } .split + .split { margin-block-start: clamp(3.5rem, 2rem + 5vw, 7rem); } .split__media { position: relative; } .split__media picture img, .split__media > img:not(.split__inset) { width: 100%; border-radius: var(--r-lg); aspect-ratio: var(--ar, 4 / 5); object-fit: cover; box-shadow: var(--shadow-lift); } .split__media--wide picture img { aspect-ratio: 5 / 4; } .split__frame { position: absolute; inset: auto -0.85rem -0.85rem auto; width: 45%; aspect-ratio: 1; border-radius: var(--r-lg); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); z-index: -1; } .split__inset { position: absolute; inset-block-end: -2rem; inset-inline-start: -1.5rem; width: min(46%, 13rem); border-radius: var(--r-md); box-shadow: var(--shadow-deep), 0 0 0 5px var(--ink-900); aspect-ratio: 3 / 4; object-fit: cover; } @media (max-width: 40rem) { .split__inset { display: none; } } .split__body { display: grid; gap: 1.5rem; justify-items: start; } /* pull-quote */ .pull { position: relative; padding-inline-start: 1.5rem; border-inline-start: 2px solid var(--accent); font-family: var(--f-display); font-variation-settings: "opsz" 60, "SOFT" 30, "WONK" 1; font-weight: 500; font-size: clamp(1.15rem, 1rem + 0.8vw, 1.6rem); line-height: 1.35; letter-spacing: -0.015em; color: var(--sand); text-wrap: pretty; } /* feature list */ .features { display: grid; gap: 1rem; width: 100%; } .feature { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.9rem; align-items: start; padding-block-end: 1rem; border-block-end: 1px solid var(--hair-soft); } .feature:last-child { border-block-end: 0; padding-block-end: 0; } .feature svg { width: 1.25rem; height: 1.25rem; color: var(--accent); margin-block-start: 0.15rem; } .feature b { display: block; font-weight: 700; letter-spacing: -0.01em; } .feature span { display: block; font-size: 0.92rem; color: var(--mist); line-height: 1.5; } /* ----------------------------------------------------------------- 13 cards */ .cards { display: grid; gap: clamp(1rem, 0.7rem + 1vw, 1.75rem); } .cards--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); } .cards--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } .cards--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); } .card { position: relative; isolation: isolate; display: grid; gap: 1rem; align-content: start; padding: clamp(1.25rem, 1rem + 1vw, 1.85rem); border-radius: var(--r-lg); background: linear-gradient(180deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 1.5%)); box-shadow: inset 0 0 0 1px var(--hair-soft); overflow: hidden; transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); } .card:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1px var(--hair), var(--shadow-lift); } .card__leo { position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 15% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%); opacity: 0; transition: opacity 0.6s var(--ease); } .card:hover .card__leo { opacity: 0.5; } .card__media { width: calc(100% + (clamp(1.25rem, 1rem + 1vw, 1.85rem) * 2)); max-width: none; margin: calc(clamp(1.25rem, 1rem + 1vw, 1.85rem) * -1) calc(clamp(1.25rem, 1rem + 1vw, 1.85rem) * -1) 0; aspect-ratio: 16 / 11; object-fit: cover; transition: transform 0.7s var(--ease); } .card:hover .card__media { transform: scale(1.04); } .card__title { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.015em; } .card__body { font-size: 0.93rem; color: var(--mist); line-height: 1.55; text-wrap: pretty; } .card__link { position: absolute; inset: 0; z-index: 3; } .card__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; font-size: 0.78rem; color: var(--haze); font-weight: 600; letter-spacing: 0.06em; } /* menu-card downloads */ .menucard { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.1rem; padding: 1.15rem 1.35rem; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--hair-soft); background: rgb(255 255 255 / 2.5%); transition: background 0.35s, box-shadow 0.35s, transform 0.35s var(--ease); } .menucard:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); box-shadow: inset 0 0 0 1px var(--hair); transform: translateX(4px); } .menucard__ico { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); } .menucard__ico svg { width: 1.15rem; height: 1.15rem; } .menucard b { display: block; font-weight: 700; letter-spacing: -0.01em; } .menucard span { display: block; font-size: 0.8rem; color: var(--haze); } .menucard__go { width: 1.15rem; height: 1.15rem; color: var(--accent); transition: transform 0.35s var(--ease); } .menucard:hover .menucard__go { transform: translate(3px, -3px); } /* ------------------------------------------------------------- 14 filmstrip */ .filmstrip { position: relative; display: grid; gap: 0.85rem; overflow: hidden; } .filmstrip::before, .filmstrip::after { content: ""; position: absolute; inset-block: 0; width: clamp(2rem, 8vw, 8rem); z-index: 2; pointer-events: none; } .filmstrip::before { inset-inline-start: 0; background: linear-gradient(90deg, var(--bg), transparent); } .filmstrip::after { inset-inline-end: 0; background: linear-gradient(270deg, var(--bg), transparent); } .filmstrip--on-ink::before { background: linear-gradient(90deg, var(--ink-850), transparent); } .filmstrip--on-ink::after { background: linear-gradient(270deg, var(--ink-850), transparent); } .strip { display: flex; width: max-content; gap: 0.85rem; } .strip__group { display: flex; gap: 0.85rem; flex: none; } .shot { position: relative; flex: none; width: clamp(13rem, 24vw, 22rem); aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; cursor: zoom-in; } .shot--tall { aspect-ratio: 3 / 4; width: clamp(10rem, 18vw, 16.5rem); } .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease), filter 0.5s; filter: saturate(0.9) brightness(0.9); } .shot:hover img { transform: scale(1.06); filter: saturate(1.1) brightness(1); } /* --------------------------------------------------------------- 15 reviews */ .reviews { display: grid; gap: clamp(1rem, 0.7rem + 1vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr)); } .review { display: grid; gap: 1.1rem; align-content: start; padding: clamp(1.35rem, 1.1rem + 1vw, 2rem); border-radius: var(--r-lg); background: linear-gradient(180deg, rgb(255 255 255 / 4.5%), transparent); box-shadow: inset 0 0 0 1px var(--hair-soft); } .review__score { display: inline-grid; place-items: center; width: 3.1rem; height: 3.1rem; border-radius: 50%; font-family: var(--f-display); font-variation-settings: "opsz" 40; font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--ink-900); background: var(--accent); } .review__quote { font-family: var(--f-display); font-variation-settings: "opsz" 40, "SOFT" 30, "WONK" 1; font-weight: 500; font-size: 1.05rem; line-height: 1.45; letter-spacing: -0.012em; color: var(--sand); text-wrap: pretty; } .review__who { font-size: 0.8rem; color: var(--haze); font-weight: 600; letter-spacing: 0.06em; } .review__who b { color: var(--bone); font-weight: 700; } .rating-summary { display: flex; align-items: center; gap: 1.15rem; padding: 1.1rem 1.5rem; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--hair); background: color-mix(in srgb, var(--accent) 7%, transparent); } .rating-summary b { font-family: var(--f-display); font-variation-settings: "opsz" 60; font-weight: 800; font-size: 2.35rem; letter-spacing: -0.03em; color: var(--accent); line-height: 0.9; } .rating-summary span { font-size: 0.86rem; color: var(--mist); line-height: 1.45; } /* ------------------------------------------------------------- 16 accordion */ .accordion { display: grid; } .ac { border-block-end: 1px solid var(--hair-soft); } .ac:first-child { border-block-start: 1px solid var(--hair-soft); } .ac__btn { width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.25rem; padding-block: 1.35rem; text-align: start; font-family: var(--f-display); font-variation-settings: "opsz" 40, "WONK" 1; font-weight: 600; font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.25rem); letter-spacing: -0.015em; line-height: 1.3; transition: color 0.3s; } .ac__btn:hover { color: var(--accent); } .ac__ico { position: relative; width: 1.6rem; height: 1.6rem; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hair); transition: background 0.35s, transform 0.45s var(--ease); } .ac__ico::before, .ac__ico::after { content: ""; position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; background: currentColor; } .ac__ico::before { width: 0.7rem; height: 1.5px; } .ac__ico::after { width: 1.5px; height: 0.7rem; transition: opacity 0.3s, transform 0.4s var(--ease); } .ac__btn[aria-expanded="true"] { color: var(--accent); } .ac__btn[aria-expanded="true"] .ac__ico { transform: rotate(180deg); } .ac__btn[aria-expanded="true"] .ac__ico::after { opacity: 0; transform: scaleY(0); } .ac__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease); } .ac__panel > div { overflow: hidden; } .ac__panel[data-open="true"] { grid-template-rows: 1fr; } .ac__panel .prose { padding-block-end: 1.5rem; max-width: 62ch; } /* --------------------------------------------------------------- 17 compare */ .compare { --pos: 50%; position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-deep), inset 0 0 0 1px var(--hair-soft); aspect-ratio: 16 / 10; touch-action: pan-y; } @media (max-width: 40rem) { .compare { aspect-ratio: 4 / 5; } } .compare__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .compare__clip { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); } .compare__range { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: none; margin: 0; } .compare__range::-webkit-slider-thumb { -webkit-appearance: none; width: 4rem; height: 100%; cursor: ew-resize; } .compare__range::-moz-range-thumb { width: 4rem; height: 100vh; border: 0; background: transparent; cursor: ew-resize; } .compare__range:focus-visible ~ .compare__handle { outline: 2px solid var(--teal-300); outline-offset: 4px; } .compare__handle { position: absolute; inset-block: 0; inset-inline-start: var(--pos); z-index: 3; width: 2px; translate: -1px 0; background: var(--bone); pointer-events: none; } .compare__grip { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; translate: -50% -50%; width: 3.1rem; height: 3.1rem; border-radius: 50%; background: var(--bone); color: var(--ink-900); display: grid; place-items: center; box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 55%); } .compare__grip svg { width: 1.4rem; height: 1.4rem; } .compare__tag { position: absolute; inset-block-end: 1.1rem; z-index: 3; padding: 0.5rem 1rem; border-radius: var(--r-pill); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; background: rgb(5 13 12 / 72%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px var(--hair-soft); pointer-events: none; } .compare__tag--a { inset-inline-start: 1.1rem; color: var(--teal-300); } .compare__tag--b { inset-inline-end: 1.1rem; color: var(--magenta-400); } /* -------------------------------------------------------------- 18 practical */ .practical { display: grid; gap: clamp(2rem, 1.2rem + 3vw, 4rem); } @media (min-width: 60rem) { .practical { grid-template-columns: 1fr 1.05fr; } } .hours { display: grid; width: 100%; } .hours__row { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding-block: 0.85rem; border-block-end: 1px solid var(--hair-soft); font-size: 0.95rem; } .hours__row:first-child { border-block-start: 1px solid var(--hair-soft); } .hours__row dt { color: var(--mist); } .hours__row dd { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: 0.01em; } .hours__row.is-today { color: var(--bone); } .hours__row.is-today dt { color: var(--accent); font-weight: 700; } .hours__row.is-today dt::after { content: " · vandaag"; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; } .info-list { display: grid; gap: 1.25rem; } .info { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; align-items: start; } .info__ico { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hair); color: var(--accent); } .info__ico svg { width: 1.15rem; height: 1.15rem; } .info dt { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--haze); margin-block-end: 0.25rem; } .info dd { font-size: 1.02rem; line-height: 1.5; } .info dd a:hover { color: var(--accent); } .map-frame { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: inset 0 0 0 1px var(--hair-soft); aspect-ratio: 4 / 3; background: var(--ink-800); } .map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(0.92) contrast(0.85) hue-rotate(150deg); } /* -------------------------------------------------------------- 19 cta band */ .cta-band { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-lg); padding: clamp(2.5rem, 1.5rem + 5vw, 6rem) clamp(1.5rem, 1rem + 3vw, 4.5rem); text-align: center; display: grid; gap: 1.75rem; justify-items: center; } .cta-band__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.4) saturate(0.85); } .cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, rgb(6 46 44 / 82%), rgb(46 10 30 / 62%)); } .cta-band__leo { position: absolute; inset: 0; z-index: -1; background-image: var(--pattern); background-size: var(--pattern-size); opacity: 0.18; mix-blend-mode: overlay; } /* ---------------------------------------------------------------- 20 footer */ .site-footer { position: relative; padding-block-start: clamp(3.5rem, 2rem + 5vw, 6rem); background: var(--ink-850); overflow: hidden; } .footer-grid { display: grid; gap: clamp(2rem, 1.2rem + 3vw, 3.5rem); padding-block-end: clamp(2.5rem, 1.5rem + 3vw, 4rem); } @media (min-width: 48rem) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } } @media (min-width: 68rem) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.15fr; } } .foot-col { display: grid; gap: 1rem; align-content: start; } .foot-col h2, .foot-col h3 { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); font-family: var(--f-body); } .foot-col ul { display: grid; gap: 0.6rem; } .foot-col a { color: var(--mist); transition: color 0.25s, padding-inline-start 0.3s var(--ease); } .foot-col a:hover { color: var(--bone); padding-inline-start: 0.35rem; } .foot-col p { color: var(--mist); font-size: 0.95rem; } .socials { display: flex; gap: 0.6rem; } .socials a { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hair-soft); color: var(--mist); transition: background 0.3s, color 0.3s, transform 0.35s var(--ease), padding 0s; } .socials a:hover { background: var(--accent); color: var(--ink-900); transform: translateY(-3px); padding-inline-start: 0; } .socials svg { width: 1.15rem; height: 1.15rem; } .foot-word { position: relative; display: block; width: 100%; font-family: var(--f-display); font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0; font-weight: 900; font-size: min(37vw, 30rem); line-height: 0.74; letter-spacing: -0.05em; text-align: center; user-select: none; margin-block-start: clamp(0.5rem, 0.2rem + 1.5vw, 1.5rem); overflow: hidden; } .foot-bar { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; justify-content: space-between; padding-block: 1.5rem; border-block-start: 1px solid var(--hair-soft); font-size: 0.78rem; color: var(--haze); } .foot-bar nav { display: flex; flex-wrap: wrap; gap: 0.75rem 1.35rem; } .foot-bar a:hover { color: var(--accent); } /* ------------------------------------------------------------------ 21 dock */ .dock { position: fixed; inset: auto 0 0; z-index: 90; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hair-soft); box-shadow: 0 -1px 0 var(--hair-soft), 0 -1rem 2rem -1rem rgb(0 0 0 / 70%); transition: transform 0.45s var(--ease); padding-block-end: env(safe-area-inset-bottom); } @media (min-width: 48rem) { .dock { display: none; } } .dock.is-hidden { transform: translateY(105%); } .dock a { background: rgb(5 13 12 / 96%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: grid; place-items: center; gap: 0.3rem; padding-block: 0.7rem; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist); } .dock a svg { width: 1.15rem; height: 1.15rem; color: var(--accent); } .dock a:active { background: color-mix(in srgb, var(--accent) 14%, transparent); } @media (max-width: 47.99rem) { body { padding-block-end: 4.25rem; } } /* -------------------------------------------------------------- 22 lightbox */ .lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(1rem, 0.5rem + 3vw, 3rem); background: rgb(5 13 12 / 94%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease), visibility 0.35s; } .lightbox[data-open="true"] { opacity: 1; visibility: visible; } .lightbox img { max-width: 100%; max-height: 86svh; width: auto; border-radius: var(--r-md); box-shadow: var(--shadow-deep); transform: scale(0.96); transition: transform 0.45s var(--ease); } .lightbox[data-open="true"] img { transform: scale(1); } .lightbox__close { position: absolute; inset: clamp(1rem, 0.5rem + 2vw, 2rem) clamp(1rem, 0.5rem + 2vw, 2rem) auto auto; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; color: var(--bone); box-shadow: inset 0 0 0 1px var(--hair); transition: background 0.3s, transform 0.3s; } .lightbox__close:hover { background: var(--accent); color: var(--ink-900); transform: rotate(90deg); } .lightbox__close svg { width: 1.2rem; height: 1.2rem; } .lightbox__cap { position: absolute; inset: auto 0 clamp(1rem, 0.5rem + 2vw, 2rem); text-align: center; font-size: 0.82rem; color: var(--haze); padding-inline: 2rem; } /* ------------------------------------------------------------------ 23 note */ .note { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem); border-radius: var(--r-md); background: rgb(224 165 74 / 8%); box-shadow: inset 0 0 0 1px rgb(224 165 74 / 25%); } .note svg { width: 1.35rem; height: 1.35rem; color: var(--copper-400); margin-block-start: 0.15rem; } .note b { display: block; color: var(--copper-300); margin-block-end: 0.25rem; letter-spacing: -0.01em; } .note p { font-size: 0.93rem; color: var(--mist); line-height: 1.55; } /* subnav for long pages */ .subnav { position: sticky; inset-block-start: 4.25rem; /* matches the height of the stuck header */ z-index: 40; margin-block-start: -1px; background: rgb(5 13 12 / 88%); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 -1px 0 var(--hair-soft), inset 0 1px 0 var(--hair-soft); } .subnav__track { display: flex; gap: 0.35rem; overflow-x: auto; scrollbar-width: none; padding-block: 0.7rem; } .subnav__track::-webkit-scrollbar { display: none; } .subnav a { flex: none; padding: 0.55rem 1.05rem; border-radius: var(--r-pill); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--mist); transition: background 0.3s, color 0.3s; } .subnav a:hover, .subnav a.is-active { background: var(--accent); color: var(--ink-900); } /* ---------------------------------------------------------------- 24 motion */ /* The "before" states live behind html.js, which motion.js strips off the moment GSAP is missing or reduced motion is requested — so a failed script can never leave the page invisible. */ html.js .reveal { opacity: 0; } .reveal-mask { display: block; overflow: hidden; } .reveal-mask > * { display: block; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal, .reveal-mask > * { opacity: 1 !important; transform: none !important; } .hero__slide { transition: opacity 0.3s linear; } .filmstrip { overflow-x: auto; } } /* --------------------------------------------------------------- 25 utility */ .mt-0 { margin-block-start: 0; } .mt-1 { margin-block-start: clamp(1rem, 0.8rem + 0.6vw, 1.5rem); } .mt-2 { margin-block-start: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); } .mt-3 { margin-block-start: clamp(2.5rem, 1.6rem + 3vw, 4.5rem); } .center { text-align: center; } .full-bleed { width: 100vw; margin-inline: calc(50% - 50vw); } /* ========================================================================== */ /* 26 hero navigator — the four worlds, reachable from the first screen */ /* ========================================================================== */ .hero-nav { position: relative; display: grid; gap: 0.5rem; grid-auto-flow: column; grid-auto-columns: minmax(13rem, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 0.25rem; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); } .hero-nav::-webkit-scrollbar { display: none; } @media (min-width: 52rem) { .hero-nav { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; } } .hnav { position: relative; isolation: isolate; scroll-snap-align: start; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.85rem; padding: 0.7rem 0.9rem; border-radius: var(--r-md); background: rgb(5 13 12 / 55%); backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); box-shadow: inset 0 0 0 1px var(--hair-soft); transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.4s var(--ease); } .hnav:hover, .hnav:focus-within { background: rgb(5 13 12 / 78%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h-accent, var(--accent)) 55%, transparent); transform: translateY(-3px); } .hnav__thumb { width: 2.9rem; height: 2.9rem; border-radius: 9px; object-fit: cover; flex: none; filter: saturate(0.9); } .hnav__text { min-width: 0; } .hnav__label { display: block; font-family: var(--f-display); font-variation-settings: "opsz" 40, "WONK" 1; font-weight: 700; font-size: 1.02rem; letter-spacing: -0.02em; line-height: 1.1; } .hnav__meta { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--haze); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hnav__go { width: 1rem; height: 1rem; flex: none; color: var(--h-accent, var(--accent)); transition: transform 0.4s var(--ease); } .hnav:hover .hnav__go { transform: translate(3px, -3px); } .hnav__link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; } /* ========================================================================== */ /* 27 stamp — rotating circular badge, echoing the O of the wordmark */ /* ========================================================================== */ .stamp { position: relative; display: grid; place-items: center; width: var(--stamp-size, 10.5rem); aspect-ratio: 1; flex: none; color: var(--accent); } .stamp__ring { position: absolute; inset: 0; } .stamp__ring text { font-family: var(--f-body); font-size: 7.6px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; fill: currentColor; } @keyframes stamp-spin { to { transform: rotate(360deg); } } .stamp__core { display: grid; place-items: center; gap: 0.1rem; text-align: center; line-height: 0.95; } .stamp__core b { font-family: var(--f-display); font-variation-settings: "opsz" 60, "WONK" 1; font-weight: 800; font-size: 2.3rem; letter-spacing: -0.04em; color: var(--bone); } .stamp__core small { font-size: 0.56rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } /* ========================================================================== */ /* 28 collage — pinned-up photo wall, deliberately off-grid */ /* ========================================================================== */ .collage { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(0.6rem, 0.4rem + 0.8vw, 1.1rem); align-items: start; } .collage figure { position: relative; margin: 0; } .collage img { width: 100%; border-radius: var(--r-md); object-fit: cover; box-shadow: var(--shadow-lift); transition: transform 0.6s var(--ease), filter 0.5s var(--ease); filter: saturate(0.94); } .collage figure:hover img { transform: scale(1.03) rotate(0deg) !important; filter: saturate(1.08); } .collage figcaption { margin-block-start: 0.6rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--haze); } /* Staggered columns rather than a grid of equal boxes: same aspect ratio, four different drops and rotations, so it reads as pinned-up photographs. */ .collage { grid-template-columns: repeat(4, 1fr); align-items: start; } .collage figure { grid-column: span 1; } .collage img { aspect-ratio: 3 / 4; } .collage__a { margin-block-start: clamp(1.5rem, 4vw, 3.5rem); } .collage__a img { rotate: -2.2deg; } .collage__b { margin-block-start: 0; } .collage__b img { rotate: 1.6deg; } .collage__c { margin-block-start: clamp(2.5rem, 6vw, 5rem); } .collage__c img { rotate: 1.1deg; } .collage__d { margin-block-start: clamp(0.75rem, 2vw, 1.75rem); } .collage__d img { rotate: -3deg; } @media (max-width: 52rem) { .collage { grid-template-columns: repeat(2, 1fr); } .collage__a, .collage__b { margin-block-start: 0; } .collage__c, .collage__d { margin-block-start: clamp(1rem, 4vw, 2rem); } } @media (max-width: 30rem) { .collage img { rotate: none !important; } } /* ========================================================================== */ /* 29 ticket — the opening hours as a punched card */ /* ========================================================================== */ .ticket { --notch: 11px; position: relative; padding: clamp(1.4rem, 1.1rem + 1vw, 2.1rem) clamp(1.25rem, 1rem + 1vw, 1.9rem); background: linear-gradient(175deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 2%)); border-radius: var(--r-md); -webkit-mask: radial-gradient(circle var(--notch) at 0 var(--cut, 62%), transparent 98%, #000) , radial-gradient(circle var(--notch) at 100% var(--cut, 62%), transparent 98%, #000); -webkit-mask-composite: source-in; mask: radial-gradient(circle var(--notch) at 0 var(--cut, 62%), transparent 98%, #000), radial-gradient(circle var(--notch) at 100% var(--cut, 62%), transparent 98%, #000); mask-composite: intersect; } .ticket::before { content: ""; position: absolute; inset-inline: calc(var(--notch) + 0.35rem); inset-block-start: var(--cut, 62%); border-block-start: 1.5px dashed var(--hair); } .ticket__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-block-end: 0.9rem; } .ticket__head h3 { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); font-family: var(--f-body); } .ticket__no { font-family: var(--f-display); font-variation-settings: "opsz" 20; font-size: 0.72rem; letter-spacing: 0.14em; color: var(--haze); } .ticket__foot { padding-block-start: 1.1rem; } /* ========================================================================== */ /* 30 scribble — hand-drawn emphasis, the one non-geometric mark on the page */ /* ========================================================================== */ .scribble { position: relative; display: inline-block; white-space: nowrap; } .scribble > svg { position: absolute; inset-inline: -3%; inset-block-end: -0.36em; width: 106%; height: 0.42em; overflow: visible; color: var(--accent); pointer-events: none; } .scribble > svg path { fill: none; stroke: currentColor; stroke-width: 7; stroke-linecap: round; opacity: 0.85; } @media (prefers-reduced-motion: reduce) { .scribble > svg path { stroke-dashoffset: 0; animation: none; } .stamp__ring { animation: none; } } /* ========================================================================== */ /* 31 poster type — the four words, four different treatments */ /* ========================================================================== */ .t-line em { font-style: normal; } .t-word--outline { color: transparent; -webkit-text-stroke: 1.5px var(--bone); paint-order: stroke fill; } .t-word--accent { color: var(--accent); } .t-word--fill { /* uses .t-leopard alongside */ } /* the hero title sheds a little weight on its quieter words so the line reads as a poster rather than one solid block */ .t-line .t-word--outline { font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0; } @media (max-width: 30rem) { .t-word--outline { -webkit-text-stroke-width: 1px; } } /* sfeer footer — stamp beside the feature list */ .sfeer-foot { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: center; margin-block-start: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); padding-block-start: clamp(2rem, 1.5rem + 2vw, 3rem); border-block-start: 1px solid var(--hair-soft); } @media (min-width: 48rem) { .sfeer-foot { grid-template-columns: auto 1fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); } } /* stamp sitting above the contact details */ .practical .stamp { --stamp-size: 8.5rem; margin-block-end: 0.5rem; } /* Grid blowout guard: an `fr` track floors at min-content, so a wide child (the map iframe, a long unbroken string) can push the whole grid past the viewport. `min-width: 0` lets these tracks actually shrink. */ .practical > *, .split > *, .section-head--split > *, .cards > *, .reviews > *, .daily > *, .hero-nav > ul > * { min-width: 0; } .map-frame { width: 100%; } /* On phones the reserve dock overlays the bottom of the viewport, so the home hero has to end above it rather than behind it. */ @media (max-width: 47.99rem) { .hero--home { min-height: calc(100svh - 4.25rem); } .hero--home .hero__dots { display: none; } .hero--home .hero__foot { margin-block-start: 1.1rem; padding-block-start: 1rem; } } /* Registered so GSAP can interpolate it — an unregistered custom property is just a string and would jump rather than draw. */ @property --draw { syntax: ""; inherits: true; /* .daily::before has to see the value set on .daily */ initial-value: 100%; } .daily { --draw: 100%; } /* the only element transformed on every scroll frame */ .hero__media { will-change: transform; } /* --------------------------------------------------------------------------- Transform ownership. GSAP writes `transform` on the hero and CTA buttons (the magnetic effect), so CSS must not transition the same property on them — a CSS transition smears GSAP's per-frame writes and, worse, makes gsap.from() read a mid-transition value as its destination. Colour and shadow stay with CSS. --------------------------------------------------------------------------- */ .hero__actions .btn, .cta-band .btn { transition: box-shadow 0.35s var(--ease), color 0.3s; }