/* ============================================================ Components: loader, header, menu, buttons, footer, accordion ============================================================ */ /* ---------- loader ---------- */ .loader { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--color-background-primary); transition: transform 1.1s var(--ease-in-out-quart); } .loader__inner { display: flex; flex-direction: column; align-items: center; gap: 40px; } /* The mark spins into place once, echoing the turntable further down the page, then settles rather than spinning on like a busy-cursor. */ .loader__mark { width: clamp(84px, 12vw, 116px); opacity: 0; animation: mark-spin-in 1.3s var(--ease-out-expo) forwards; } @keyframes mark-spin-in { 0% { opacity: 0; transform: rotate(-300deg) scale(0.18); } 55% { opacity: 1; } 100% { opacity: 1; transform: rotate(0deg) scale(1); } } .loader__bar { width: min(320px, 62vw); height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--color-brown) 13%, transparent); overflow: hidden; opacity: 0; animation: reveal 0.65s 0.55s var(--ease-out-quart) forwards; } .loader__bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-pink-300), var(--color-pink-700)); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.5s var(--ease-out-quart); } .loader.is-done { transform: translateY(-101%); } /* The intro plays once per visit. On every page after that the script has already flagged , so the loader never renders and the page is scrollable immediately — no flash, no wait. */ html.skip-loader .loader { display: none; } html.skip-loader body.is-loading { overflow: visible; } /* ---------- header ---------- */ .header { position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: var(--header-h); display: flex; align-items: center; transition: transform 0.6s var(--ease-in-out-quart), background-color 0.5s var(--ease-out-quart), border-color 0.5s var(--ease-out-quart); border-bottom: 1px solid transparent; } .header.is-pinned { background: color-mix(in srgb, var(--color-background-primary) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--color-grey-300); } .header.is-hidden { transform: translateY(-100%); } .header.is-menu-open { transform: translateY(0); background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } .header__inner { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .header__brand { display: flex; align-items: center; gap: 12px; position: relative; z-index: 2; } .header__brand img { width: auto; height: 46px; transition: opacity 0.4s var(--ease-out-quart); } .header__brand:hover img { opacity: 0.65; } .header__nav { display: none; align-items: center; gap: 34px; } @media (min-width: 1024px) { .header__nav { display: flex; } } .nav-link { font: var(--font-label-2); text-transform: lowercase; letter-spacing: 0.02em; position: relative; padding-block: 4px; } .nav-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform 0.55s var(--ease-out-expo); } .nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); transform-origin: 0 50%; } .header__actions { display: flex; align-items: center; gap: 16px; position: relative; z-index: 2; } /* On narrow screens the logo, CTA and burger fight for the same row and the button's label gets clipped. The order link lives in the menu, so drop it. */ @media (max-width: 719px) { .header__actions .btn { display: none; } } /* ---------- burger ---------- */ .burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 34px; height: 34px; padding: 0; } @media (min-width: 1024px) { .burger { display: none; } } .burger span { display: block; height: 1.5px; width: 100%; background: var(--color-ink); transition: transform 0.5s var(--ease-in-out-quart), opacity 0.3s; } .burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .burger.is-open span:nth-child(2) { opacity: 0; } .burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ---------- menu overlay ---------- */ .menu { position: fixed; inset: 0; z-index: 90; background: var(--color-background-secondary); padding: calc(var(--header-h) + 40px) var(--page-x) 40px; display: flex; flex-direction: column; justify-content: space-between; transform: translateY(-100%); transition: transform 0.9s var(--ease-in-out-quart); visibility: hidden; overflow-y: auto; } .menu.is-open { transform: translateY(0); visibility: visible; } .menu__list { display: flex; flex-direction: column; gap: 4px; } .menu__item { overflow: hidden; } .menu__item a { display: block; font: var(--font-display-2); font-size: clamp(2.75rem, 13vw, 4.5rem); line-height: 1.16; text-transform: lowercase; transform: translateY(110%); transition: transform 0.9s var(--ease-out-expo); transition-delay: calc(var(--i, 0) * 60ms); } .menu.is-open .menu__item a { transform: translateY(0); } .menu__item a:hover { font-style: italic; color: var(--color-pink-700); } .menu__foot { display: flex; flex-wrap: wrap; gap: 10px 30px; justify-content: space-between; align-items: flex-end; padding-top: 40px; opacity: 0; transition: opacity 0.6s 0.45s var(--ease-out-quart); } .menu.is-open .menu__foot { opacity: 1; } /* ---------- buttons ---------- */ .btn { --btn-bg: var(--color-ink); --btn-fg: var(--color-cream-100); display: inline-flex; align-items: center; justify-content: center; min-width: 210px; height: 52px; padding-inline: 30px; background: var(--btn-bg); color: var(--btn-fg); border-radius: 999px; font: var(--font-button); text-transform: uppercase; letter-spacing: 0.12em; overflow: hidden; position: relative; transition: background-color 0.5s var(--ease-out-quart), color 0.5s var(--ease-out-quart); } .btn__label { display: block; position: relative; overflow: hidden; height: 1em; } .btn__label > span { display: block; transition: transform 0.7s var(--ease-out-expo); } .btn__label > span:last-child { position: absolute; top: 100%; left: 0; width: 100%; } .btn:hover .btn__label > span { transform: translateY(-100%); } .btn:hover { --btn-bg: var(--color-pink-700); --btn-fg: var(--color-white); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--color-ink); border: 1px solid var(--color-ink); } .btn--ghost:hover { --btn-bg: var(--color-ink); --btn-fg: var(--color-cream-100); } .btn--small { min-width: 0; height: 42px; padding-inline: 22px; font-size: 0.8125rem; } /* inline text link with the always-on underline sweep */ .inline-link { display: inline-block; position: relative; font-style: italic; padding-bottom: 2px; } .inline-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform-origin: 0 50%; transition: transform 0.6s var(--ease-out-expo); } .inline-link:hover::after { transform: scaleX(0); transform-origin: 100% 50%; } /* ---------- scroll cue ---------- */ .scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 12px; } .scroll-cue__line { width: 1px; height: 56px; overflow: hidden; background: color-mix(in srgb, var(--color-ink) 18%, transparent); } .scroll-cue__line i { display: block; width: 100%; height: 100%; background: var(--color-ink); animation: scroll-cue 2.4s var(--ease-in-out-quart) infinite; } /* ---------- marquee ---------- */ .marquee { overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .marquee__track { display: flex; width: max-content; animation: marquee 42s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__item { display: inline-flex; align-items: center; gap: 40px; padding-right: 40px; font: var(--font-display-3); white-space: nowrap; } .marquee__item span:nth-child(even) { font-style: italic; color: var(--color-pink-700); } .marquee__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-pink-500); flex: none; } /* ---------- accordion ---------- */ .accordion { border-top: 1px solid var(--color-grey-300); } .accordion__item { border-bottom: 1px solid var(--color-grey-300); } .accordion__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 28px; text-align: left; font: var(--font-display-5); transition: color 0.4s var(--ease-out-quart); } .accordion__trigger:hover { color: var(--color-pink-700); } .accordion__icon { position: relative; flex: none; width: 16px; height: 16px; } .accordion__icon::before, .accordion__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform 0.5s var(--ease-in-out-quart); } .accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg); } .accordion__item.is-open .accordion__icon::after { transform: translate(-50%, -50%) rotate(0deg); } .accordion__panel { height: 0; overflow: hidden; transition: height 0.6s var(--ease-in-out-quart); } .accordion__panel > div { padding-bottom: 30px; max-width: 62ch; color: var(--color-brown); } /* ---------- form ---------- */ .field { display: flex; flex-direction: column; gap: 8px; } .field label { font: var(--font-tiny-1); text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-grey-500); } .field input, .field textarea, .field select { width: 100%; padding: 14px 2px; font: var(--font-label-form); border-bottom: 1px solid var(--color-grey-300); transition: border-color 0.4s var(--ease-out-quart); } .field select { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 8px center, right 2px center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 24px; } .field textarea { resize: vertical; min-height: 130px; } .field input:focus, .field textarea:focus, .field select:focus { border-bottom-color: var(--color-pink-700); outline: none; } /* ---------- footer ---------- */ .footer { background: var(--color-ink); color: var(--color-cream-200); padding-block: 70px 30px; } .footer a:hover { color: var(--color-pink-300); } .footer__top { display: flex; flex-wrap: wrap; gap: 50px; justify-content: space-between; padding-bottom: 60px; } .footer__brand { max-width: 340px; display: flex; flex-direction: column; gap: 22px; } .footer__brand img { width: 232px; } .footer__cols { display: flex; flex-wrap: wrap; gap: 50px 70px; } .footer__col { display: flex; flex-direction: column; gap: 14px; min-width: 130px; } .footer__col h4 { font: var(--font-tiny-1); text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-grey-500); font-weight: 400; } .footer__col a, .footer__col p { font: var(--font-label-2); } .footer__bottom { display: flex; flex-wrap: wrap; gap: 12px 30px; justify-content: space-between; align-items: center; padding-top: 26px; border-top: 1px solid color-mix(in srgb, var(--color-cream-200) 18%, transparent); font: var(--font-tiny-1); color: var(--color-grey-500); } .footer__wordmark { padding-block: 40px 26px; line-height: 0; } .footer__wordmark svg { width: 100%; height: auto; }