@layer reset, tokens, base, components, layout, pages, utilities, motion; @layer tokens { @font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url("../fonts/instrument-sans-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/instrument-sans-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url("../fonts/instrument-sans-latin-ext-wght-normal.woff2") format("woff2-variations"), url("../fonts/instrument-sans-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif-latin-ext-400-italic.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { --ink-1000: #00243b; --ink-950: #004874; --ink-900: #004874; --ink-850: #0b5587; --ink-800: #17649a; --ink-700: #2f78ae; --navy-700: #004874; --navy-600: #0d5b8c; --deep-blue: #003a5f; --porcelain-0: #ffffff; --porcelain-50: #ffffff; --porcelain-100: #f0f5f9; --porcelain-200: #e4edf4; --porcelain-300: #d1e0eb; --stone-400: #9db6c8; --stone-500: #4f7089; --stone-600: #3d6483; --stone-700: #2a4d6a; --text-ink: #004874; --on-accent: #00243b; --orange-500: #f58b26; --orange-400: #ff9e48; --orange-600: #b45f0b; --green-500: #7cbb46; --success-500: #3f8f55; --error-500: #c43d2b; --error-300: #ff8a76; --bg: var(--porcelain-50); --bg-raised: var(--porcelain-100); --bg-sunken: var(--porcelain-200); --stage: var(--porcelain-200); --text: var(--text-ink); --text-muted: var(--stone-600); --text-faint: var(--stone-500); --line: rgb(0 72 116 / 14%); --line-strong: rgb(0 72 116 / 30%); --accent: var(--orange-500); --accent-text: var(--orange-600); --invert-bg: var(--ink-900); --invert-text: var(--porcelain-50); --focus: var(--orange-500); --scrim: rgb(0 36 59 / 60%); --error: var(--error-500); --success: var(--success-500); --stock-in: var(--success-500); --font-display: "Instrument Serif", "Iowan Old Style", "Times New Roman", serif; --font-text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fs-mega: clamp(4.25rem, 15.5vw, 17rem); --fs-display: clamp(3.4rem, 9vw, 9.5rem); --fs-h1: clamp(2.9rem, 6.2vw, 6.75rem); --fs-h2: clamp(2.4rem, 4.6vw, 5rem); --fs-h3: clamp(1.85rem, 2.8vw, 3rem); --fs-h4: clamp(1.4rem, 1.8vw, 1.85rem); --fs-lead: clamp(1.125rem, 1.25vw, 1.375rem); --fs-body: 1rem; --fs-small: 0.875rem; --fs-micro: 0.75rem; --lh-display: 0.94; --lh-heading: 1.04; --lh-body: 1.62; --track-display: -0.018em; --track-label: 0.08em; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px; --gutter: clamp(20px, 3.6vw, 64px); --col-gap: clamp(16px, 2vw, 32px); --section: clamp(96px, 12vw, 200px); --section-sm: clamp(64px, 7.5vw, 120px); --wrap: 1680px; --wrap-text: 1180px; --header-h: 84px; --r-0: 0; --r-1: 2px; --r-2: 4px; --r-pill: 999px; --hair: 1px; --shadow-float: 0 32px 80px -32px rgb(0 36 59 / 45%); --shadow-lift: 0 18px 40px -26px rgb(0 36 59 / 35%); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-soft: cubic-bezier(0.33, 1, 0.68, 1); --d-1: 180ms; --d-2: 420ms; --d-3: 800ms; --d-4: 1200ms; --d-5: 1700ms; --stagger: 70ms; --z-sticky: 20; --z-menu: 60; --z-header: 70; --z-drawer: 80; --z-overlay: 90; --z-toast: 95; --z-loader: 100; --z-cursor: 110; color-scheme: light; } @media (max-width: 1023.98px) { :root { --header-h: 64px; } } @media (max-width: 767.98px) { :root { --fs-display: clamp(2.5rem, 9vw, 9.5rem); --fs-h1: clamp(2.1rem, 6.2vw, 6.75rem); --fs-h2: clamp(1.8rem, 4.6vw, 5rem); --fs-h3: clamp(1.45rem, 2.8vw, 3rem); --fs-h4: clamp(1.2rem, 1.8vw, 1.85rem); --s-7: 36px; --s-8: 44px; --s-9: 60px; --s-10: 84px; --s-11: 120px; --section: clamp(56px, 12vw, 200px); --section-sm: clamp(40px, 7.5vw, 120px); } } [data-theme="dark"], [data-theme="blue"] { --bg: var(--ink-900); --bg-raised: var(--ink-850); --bg-sunken: var(--deep-blue); --stage: var(--ink-850); --text: var(--porcelain-50); --text-muted: rgb(255 255 255 / 74%); --text-faint: rgb(255 255 255 / 68%); --line: rgb(255 255 255 / 16%); --line-strong: rgb(255 255 255 / 34%); --accent-text: var(--orange-400); --invert-bg: var(--porcelain-50); --invert-text: var(--text-ink); --error: var(--error-300); --stock-in: var(--green-500); color-scheme: dark; } [data-theme="paper"] { --bg: var(--porcelain-50); --stage: var(--porcelain-100); } } @layer reset { *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; hanging-punctuation: first last; } body { min-height: 100svh; } img, picture, video, canvas, svg { display: block; max-width: 100%; } img { height: auto; } input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; } a { color: inherit; text-decoration: none; } ul[class], ol[class], nav ul, nav ol { list-style: none; padding: 0; } table { border-collapse: collapse; } [hidden] { display: none !important; } h1, h2, h3, h4, h5, h6 { font-weight: inherit; font-size: inherit; overflow-wrap: break-word; } p { overflow-wrap: break-word; } dialog { padding: 0; border: 0; max-width: none; max-height: none; color: inherit; background: none; } address { font-style: normal; } summary { cursor: pointer; } summary::-webkit-details-marker { display: none; } } @layer base { html { background: var(--ink-950); scrollbar-gutter: stable; } body { background: var(--bg); color: var(--text); font-family: var(--font-text); font-size: var(--fs-body); line-height: var(--lh-body); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; } @media (min-width: 1280px) { body { font-size: 1.0625rem; } } [data-theme] { background-color: var(--bg); color: var(--text); } ::selection { background: var(--accent); color: var(--on-accent); } :focus { outline: none; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-1); } main:focus-visible { outline: none; } em { font-style: italic; } strong, b { font-weight: 600; } small { font-size: var(--fs-small); } kbd { font: 500 0.6875rem/1 var(--font-text); letter-spacing: 0.04em; padding: 4px 6px; border: 1px solid var(--line-strong); border-radius: var(--r-1); color: var(--text-muted); } hr { border: 0; border-top: 1px solid var(--line); } mark { background: none; color: inherit; box-shadow: inset 0 -0.42em 0 rgb(245 139 38 / 32%); } .display, h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: var(--lh-heading); letter-spacing: var(--track-display); text-wrap: balance; } h4, h5, h6 { font-family: var(--font-text); font-weight: 600; line-height: 1.3; } h1 em, h2 em, h3 em, .display em { font-style: italic; letter-spacing: -0.01em; } p { text-wrap: pretty; } .icon { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-stopped { overflow: clip; } .lenis [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-smooth iframe { pointer-events: none; } .js img.fade { opacity: 0; transition: opacity 0.9s var(--ease-out); } .js img.fade.is-loaded, .js-failed img.fade { opacity: 1; } } @layer utilities { .wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .wrap--text { max-width: calc(var(--wrap-text) + 2 * var(--gutter)); } .bleed { width: 100%; } .grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); } .section { padding-block: var(--section); } .section--sm { padding-block: var(--section-sm); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; z-index: calc(var(--z-cursor) + 1); left: var(--gutter); top: 12px; padding: 12px 18px; background: var(--porcelain-50); color: var(--text-ink); font-weight: 600; border-radius: var(--r-pill); transform: translateY(-160%); transition: transform var(--d-2) var(--ease-out); } .skip-link:focus-visible { transform: none; } .mono { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } .nowrap { white-space: nowrap; } .text-muted { color: var(--text-muted); } .echo { position: absolute; z-index: -1; left: var(--echo-l, -12%); top: var(--echo-t, -12%); width: var(--echo-w, 124%); height: var(--echo-h, 124%); max-width: none; max-height: none; margin: 0; padding: 0; object-fit: contain; mix-blend-mode: normal; filter: blur(40px) saturate(1.1) brightness(0.92); pointer-events: none; } :where(:has(> .echo)) { isolation: isolate; } } @layer components { .label { display: inline-flex; align-items: center; gap: 14px; font: 500 var(--fs-small)/1.2 var(--font-text); letter-spacing: 0.01em; color: var(--text-muted); } .label__index { display: inline-flex; align-items: center; gap: 14px; color: var(--text); font-variant-numeric: tabular-nums; } .label__index::after { content: ""; width: 36px; height: 1px; background: var(--accent); } .label__index .icon { width: 16px; height: 16px; } .roll { position: relative; display: inline-flex; flex-direction: column; overflow: hidden; height: 1.25em; line-height: 1.25; } .roll__a, .roll__b { display: block; transition: transform 0.6s var(--ease-out); white-space: nowrap; } .roll__b { position: absolute; top: 100%; left: 0; } :is(a, button):hover > .roll .roll__a, :is(a, button):hover > .roll .roll__b, :is(a, button):focus-visible > .roll .roll__a, :is(a, button):focus-visible > .roll .roll__b { transform: translateY(-100%); } .btn { --btn-bg: var(--invert-bg); --btn-fg: var(--invert-text); --btn-fill: var(--accent); --btn-fill-fg: var(--on-accent); --btn-line: transparent; position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 14px; height: 52px; padding: 0 8px 0 26px; border-radius: var(--r-pill); border: 1px solid var(--btn-line); background: var(--btn-bg); color: var(--btn-fg); font: 500 0.9375rem/1 var(--font-text); letter-spacing: 0.005em; white-space: nowrap; transition: color 0.5s var(--ease-out), border-color 0.5s var(--ease-out), transform 0.7s var(--ease-out), background-color 0.4s var(--ease-out); -webkit-tap-highlight-color: transparent; } .btn::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: var(--btn-fill); transform: translateY(101%); transition: transform 0.65s var(--ease-out); } .btn:hover, .btn:focus-visible { color: var(--btn-fill-fg); } .btn:hover::before, .btn:focus-visible::before { transform: translateY(0); } .btn.is-magnetic { transition: color 0.5s var(--ease-out), transform 0.25s var(--ease-soft); } .btn:not(:has(.btn__icon)) { padding-inline: 26px; } .btn__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--btn-fg); color: var(--btn-bg); overflow: hidden; transition: background-color 0.5s var(--ease-out), color 0.5s var(--ease-out); } .btn__icon .icon { width: 17px; height: 17px; stroke-width: 1.8; transition: transform 0.6s var(--ease-out); } .btn:hover .btn__icon, .btn:focus-visible .btn__icon { background: var(--btn-fill-fg); color: var(--btn-fill); } .btn:hover .btn__icon .icon { animation: arrow-out-in 0.7s var(--ease-out); } .btn .roll { transform: translateX(var(--mag-x, 0)); transition: transform 0.25s var(--ease-soft); } .btn--lg { height: 60px; padding-left: 30px; font-size: 1rem; } .btn--lg .btn__icon { width: 44px; height: 44px; } .btn--lg:not(:has(.btn__icon)) { padding-inline: 32px; } .btn--sm { height: 42px; padding-left: 20px; font-size: 0.875rem; } .btn--sm:not(:has(.btn__icon)) { padding-inline: 20px; } .btn--sm .btn__icon { width: 30px; height: 30px; } .btn--block { width: 100%; justify-content: space-between; } .btn--accent { --btn-bg: var(--accent); --btn-fg: var(--on-accent); --btn-fill: var(--invert-bg); --btn-fill-fg: var(--invert-text); } .btn--light { --btn-bg: var(--porcelain-50); --btn-fg: var(--text-ink); --btn-fill: var(--accent); --btn-fill-fg: var(--on-accent); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); --btn-line: var(--line-strong); --btn-fill: var(--text); --btn-fill-fg: var(--bg); } .btn--ghost .btn__icon { background: transparent; color: var(--text); border: 1px solid var(--line-strong); } .btn--ghost:hover .btn__icon { border-color: transparent; } .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; } .btn .spinner { display: none; } .btn.is-loading { pointer-events: none; } .btn.is-loading .roll, .btn.is-loading .btn__icon .icon { opacity: 0; } .btn.is-loading .spinner { display: block; position: absolute; right: 18px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.8s linear infinite; } .round-btn { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--text); background: transparent; transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out), border-color 0.4s var(--ease-out), opacity 0.3s; } .round-btn .icon { width: 19px; height: 19px; } .round-btn:hover, .round-btn:focus-visible { background: var(--text); color: var(--bg); border-color: var(--text); } .round-btn:disabled { opacity: 0.3; pointer-events: none; } .round-btn--sm { width: 42px; height: 42px; } .round-btn--solid { background: var(--bg-raised); border-color: transparent; } .arrow-link { display: inline-flex; align-items: center; gap: 10px; padding-block: 6px; font: 500 0.9375rem/1.2 var(--font-text); color: var(--text); } .arrow-link__text { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 3px; transition: background-size 0.6s var(--ease-out); } .arrow-link:hover .arrow-link__text { background-size: 0 1px; background-position: 100% 100%; } .arrow-link .icon { width: 18px; height: 18px; transition: transform 0.6s var(--ease-out); } .arrow-link:hover .icon { transform: translateX(6px); } .arrow-link--light { color: var(--porcelain-50); } .flink { background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat; transition: background-size 0.6s var(--ease-out), color 0.3s; padding-bottom: 2px; } .flink:hover { background-size: 100% 1px; background-position: 0 100%; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); font: 500 0.875rem/1 var(--font-text); color: var(--text); background: transparent; transition: background-color 0.35s var(--ease-out), color 0.35s, border-color 0.35s; } .chip .icon { width: 15px; height: 15px; opacity: 0.6; } .chip:hover, .chip:focus-visible { border-color: var(--text); } .chip.is-active, .chip[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); } .chip small { font-size: 0.75rem; color: var(--text-faint); font-variant-numeric: tabular-nums; } .chip--removable { padding-right: 6px; background: var(--bg-raised); border-color: transparent; } .chip--removable button { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--text-muted); transition: background-color 0.3s, color 0.3s; } .chip--removable button:hover { background: var(--text); color: var(--bg); } .chip--removable .icon { width: 14px; height: 14px; opacity: 1; } .tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-pill); font: 500 0.75rem/1 var(--font-text); letter-spacing: 0.01em; background: var(--bg-raised); color: var(--text-muted); } .tag--accent { background: var(--accent); color: var(--on-accent); } .swatch { --size: 20px; position: relative; display: inline-block; width: var(--size); height: var(--size); flex: none; border-radius: 50%; background: var(--swatch, #ccc); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 14%), inset 0 2px 4px rgb(255 255 255 / 35%); } .swatch::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--text); opacity: 0; transform: scale(0.8); transition: opacity 0.3s var(--ease-out), transform 0.4s var(--ease-out); } a.swatch:hover::after, .swatch.is-current::after { opacity: 0.55; transform: none; } .swatch--sm { --size: 14px; } .swatch--lg { --size: 28px; } .swatch--xl { --size: 40px; } .frame { position: relative; overflow: hidden; background: var(--media-bg, var(--stage)); } .frame > img { width: 100%; height: 100%; object-fit: contain; } .frame[data-fit="cutout"] { background: var(--stage); } .frame[data-fit="cutout"] > img { object-fit: contain; padding: 10%; mix-blend-mode: multiply; } .pcard { position: relative; display: flex; flex-direction: column; gap: 18px; min-width: 0; } .pcard__media { position: relative; overflow: hidden; aspect-ratio: var(--card-ratio, 4 / 5); background: var(--media-bg, var(--stage)); transition: background-color 0.6s var(--ease-out); } .pcard[data-fit="cutout"] .pcard__media, .pcard[data-fit="none"] .pcard__media { background: var(--stage); } .pcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out), opacity 0.7s var(--ease-out); } .pcard[data-fit="contain"] .pcard__img:not(.pcard__img--hover) { object-fit: contain; } .pcard[data-fit="cutout"] .pcard__img:not(.pcard__img--hover) { object-fit: contain; padding: 12%; mix-blend-mode: multiply; } .pcard[data-fit="cover"] .pcard__img:not(.pcard__img--hover) { object-fit: contain; } .pcard__img--hover[data-fit="cover"] { object-fit: contain; } .pcard__echo { position: absolute; left: -12%; top: -12%; width: 124%; height: 124%; max-width: none; object-fit: cover; filter: blur(40px) saturate(1.1) brightness(0.92); pointer-events: none; transition: transform 1.4s var(--ease-out), opacity 0.7s var(--ease-out); } .pcard__echo--hover { opacity: 0; } .pcard__echo--hover:not([data-fit="cover"]):not([data-fit="contain"]) { display: none; } .pcard.has-hover:hover .pcard__echo--hover, .pcard.is-previewing .pcard__echo--hover { opacity: 1; } .pcard__img--hover[data-fit="cover"], .pcard__img--hover[data-fit="contain"] { background: transparent; } .pcard__img--hover { opacity: 0; background: var(--hover-bg, var(--stage)); } .pcard__img--hover[data-fit="contain"] { object-fit: contain; } .pcard__img--hover[data-fit="cutout"] { object-fit: contain; padding: 12%; background: var(--stage); } .pcard.has-hover:hover .pcard__img--hover, .pcard.is-previewing .pcard__img--hover { opacity: 1; } .pcard:hover .pcard__echo, .pcard:focus-within .pcard__echo, .pcard[data-fit="cutout"]:hover .pcard__img:not(.pcard__img--hover), .pcard[data-fit="cutout"]:focus-within .pcard__img:not(.pcard__img--hover), .pcard:hover .pcard__img--hover[data-fit="cutout"] { transform: scale(1.045); } .pcard__placeholder { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--text-faint); font-size: var(--fs-small); } .pcard__placeholder svg { width: 42px; fill: currentColor; opacity: 0.35; } .pcard__badge { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 6px 10px; border-radius: var(--r-pill); background: var(--bg-raised); color: var(--text); font: 500 0.75rem/1 var(--font-text); } .pcard__quick { position: absolute; right: 14px; bottom: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 10px; border-radius: var(--r-pill); background: var(--invert-bg); color: var(--invert-text); font: 500 0.8125rem/1 var(--font-text); opacity: 0; transform: translateY(10px); transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-out), background-color 0.3s; } .pcard__quick .icon { width: 16px; height: 16px; } .pcard__quick:hover { background: var(--accent); color: var(--on-accent); } .pcard:hover .pcard__quick, .pcard:focus-within .pcard__quick { opacity: 1; transform: none; } @media (hover: none) { .pcard__quick { opacity: 1; transform: none; width: 36px; padding: 0; justify-content: center; } .pcard__quick span { display: none; } } .pcard__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; } .pcard__meta { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-micro); letter-spacing: 0.02em; color: var(--text-faint); } .pcard__code { flex: none; font-variant-numeric: tabular-nums; color: var(--text-muted); } .pcard__cat { min-width: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pcard__title { font-family: var(--font-display); font-size: clamp(1.5rem, 1.9vw, 1.95rem); line-height: 1.04; letter-spacing: -0.01em; text-wrap: balance; } .pcard__link { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.7s var(--ease-out); } .pcard__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .pcard:hover .pcard__link { background-size: 100% 1px; } .pcard__link:focus-visible { outline: none; } .pcard:has(.pcard__link:focus-visible) .pcard__media { outline: 2px solid var(--focus); outline-offset: 3px; } .pcard__specs { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.45; } .pcard__stock { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: 600; line-height: 1.35; } .pcard__stock__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .pcard__stock--in { color: var(--stock-in); } .pcard__stock--out { color: var(--text-muted); } .pgrid--dense .pcard__stock { font-size: var(--fs-micro); } .stock { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; line-height: 1.35; } .stock__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .stock--in { color: var(--stock-in); } .stock--out { color: var(--text-muted); } .pcard__sep { margin-inline: 8px; color: var(--line-strong); } .pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; } .pcard__swatches { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; } .pcard__more { font-size: var(--fs-micro); color: var(--text-faint); } .pcard__variants { font-size: var(--fs-micro); color: var(--text-faint); margin-left: auto; text-align: right; } .pcard.is-new { animation: card-in 0.9s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); } .pcard--skeleton .pcard__media { aspect-ratio: var(--card-ratio, 4 / 5); } .pcard--skeleton .pcard__body { gap: 10px; } .pgrid { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: clamp(36px, 4vw, 64px) var(--col-gap); } @media (min-width: 1024px) { .pgrid { --cols: 3; } } .pgrid--dense { --cols: 2; } @media (min-width: 768px) { .pgrid--dense { --cols: 3; } } @media (min-width: 1280px) { .pgrid--dense { --cols: 4; } } @media (max-width: 639.98px) { .pgrid { --cols: 1; } .pgrid--dense { --cols: 2; column-gap: 14px; } .pgrid--dense .pcard__title { font-size: 1.25rem; } .pgrid--dense .pcard__specs { display: none; } } .slider { --item: 82vw; position: relative; } @media (min-width: 640px) { .slider { --item: 44vw; } } @media (min-width: 1024px) { .slider { --item: calc((100% - 3 * var(--col-gap)) / 3.4); } } @media (min-width: 1536px) { .slider { --item: calc((100% - 3 * var(--col-gap)) / 4.2); } } .slider__track { display: grid; grid-auto-flow: column; grid-auto-columns: var(--item); gap: var(--col-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; } .slider__track::-webkit-scrollbar { display: none; } .slider__track > * { scroll-snap-align: start; } .slider__track.is-grabbing { cursor: grabbing; user-select: none; } .slider__track.is-grabbing a { pointer-events: none; } .slider__bar { display: flex; align-items: center; gap: var(--s-6); margin-top: var(--s-7); } .slider__progress { position: relative; flex: 1; height: 1px; background: var(--line); overflow: hidden; } .slider__progress span { position: absolute; inset: 0; background: var(--text); transform-origin: 0 50%; transform: scaleX(0.2); transition: transform 0.3s var(--ease-out); } .slider__nav { display: flex; gap: 10px; } .slider.is-static .slider__bar { display: none; } .tabs { position: relative; display: flex; gap: clamp(18px, 2.4vw, 36px); overflow-x: auto; scrollbar-width: none; padding-bottom: 12px; } .tabs::-webkit-scrollbar { display: none; } .tabs__tab { position: relative; padding: 4px 0; white-space: nowrap; font: 400 clamp(1.25rem, 1.6vw, 1.6rem)/1.1 var(--font-display); color: var(--text-faint); transition: color 0.4s var(--ease-out); } .tabs__tab:hover, .tabs__tab.is-active { color: var(--text); } .tabs__ink { position: absolute; left: 0; bottom: 0; height: 1px; background: var(--accent); transition: transform 0.6s var(--ease-out), width 0.6s var(--ease-out); } .tab-panel.is-active { animation: fade-up 0.8s var(--ease-out) both; } .form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px var(--s-6); } .field--full, .form__grid > .check, .form__grid > .field__hint { grid-column: 1 / -1; } @media (max-width: 639.98px) { .form__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; } } .field { position: relative; display: grid; padding-top: 18px; } .field__input { width: 100%; min-height: 48px; padding: 10px 0; border: 0; border-radius: 0; border-bottom: 1px solid var(--line-strong); background: transparent; color: var(--text); font: 400 1.0625rem/1.4 var(--font-text); outline: none; transition: border-color 0.3s; appearance: none; -webkit-appearance: none; } textarea.field__input { resize: vertical; min-height: 116px; } .field__label { position: absolute; left: 0; top: 30px; pointer-events: none; transform-origin: 0 0; font: 400 1.0625rem/1.2 var(--font-text); color: var(--text-muted); transition: transform 0.45s var(--ease-out), color 0.3s; } .field__input:focus ~ .field__label, .field__input:not(:placeholder-shown) ~ .field__label, .field--select .field__label, .field--prefixed .field__label { transform: translateY(-28px) scale(0.78); } .field__input:focus ~ .field__label { color: var(--text); } .field__req { color: var(--accent-text); } .field__opt { font-size: 0.85em; color: var(--text-faint); margin-left: 4px; } .field__line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--text); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.7s var(--ease-out), background-color 0.3s; } .field__input:focus ~ .field__line { transform: scaleX(1); } .field:has(textarea) .field__line { bottom: auto; top: calc(18px + 116px - 1px); } .field__error { min-height: 0; margin-top: 8px; font-size: var(--fs-small); color: var(--error); line-height: 1.35; } .field__error:empty { display: none; } .field.is-invalid .field__input { border-bottom-color: var(--error); } .field.is-invalid .field__line { background: var(--error); transform: scaleX(1); } .field.is-invalid .field__label { color: var(--error); } .field.is-invalid .field__error { animation: fade-up 0.45s var(--ease-out); } .field.is-valid::after { content: ""; position: absolute; right: 2px; top: 34px; width: 12px; height: 7px; border-left: 1.6px solid var(--success); border-bottom: 1.6px solid var(--success); transform: rotate(-45deg); animation: fade-in 0.4s var(--ease-out); } .field--select.is-valid::after { display: none; } .field__prefix { position: absolute; left: 0; top: 30px; font-size: 1.0625rem; color: var(--text-muted); } .field--prefixed .field__input { padding-left: 38px; } .field--select .field__input { padding-right: 32px; cursor: pointer; } .field--select option { color: var(--text-ink); } .field__chevron { position: absolute; right: 0; top: 32px; width: 18px; height: 18px; pointer-events: none; color: var(--text-muted); } .field__hint { margin-top: -18px; font-size: var(--fs-small); color: var(--text-faint); } .check { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 0.9375rem; color: var(--text-muted); } .check input { position: absolute; opacity: 0; width: 1px; height: 1px; } .check__box { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border: 1px solid var(--line-strong); border-radius: var(--r-1); color: transparent; transition: background-color 0.3s var(--ease-out), border-color 0.3s, color 0.3s; } .check__box .icon { width: 14px; height: 14px; stroke-width: 2.4; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 0.4s var(--ease-out); } .check input:checked + .check__box { background: var(--text); border-color: var(--text); color: var(--bg); } .check input:checked + .check__box .icon { stroke-dashoffset: 0; } .check input:focus-visible + .check__box { outline: 2px solid var(--focus); outline-offset: 3px; } .form__alert { display: flex; gap: 12px; align-items: flex-start; margin-top: var(--s-6); padding: 16px 18px; border-left: 2px solid var(--error); background: color-mix(in srgb, var(--error) 8%, transparent); color: var(--text); font-size: 0.9375rem; animation: fade-up 0.5s var(--ease-out); } .form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5) var(--s-6); margin-top: var(--s-7); } .form__note { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--text-faint); } .form__note .icon { width: 15px; height: 15px; } .done-mark { width: 72px; height: 72px; color: var(--success); } .done-mark svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .done-mark circle { stroke-dasharray: 152; stroke-dashoffset: 152; animation: draw 0.9s var(--ease-out) 0.1s forwards; } .done-mark path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw 0.6s var(--ease-out) 0.7s forwards; } .spec-list { display: grid; } .spec-list__row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-5); padding: 15px 0; border-top: 1px solid var(--line); } .spec-list__row:last-child { border-bottom: 1px solid var(--line); } .spec-list dt { color: var(--text-muted); font-size: 0.9375rem; } .spec-list dd { font-size: 0.9375rem; font-weight: 500; } .spec-list__note { display: block; margin-top: 2px; font-size: var(--fs-micro); font-weight: 400; color: var(--text-faint); } .table-wrap { position: relative; overflow-x: auto; scrollbar-width: thin; border-top: 1px solid var(--line-strong); } .data-table { width: 100%; min-width: 640px; font-size: 0.9375rem; font-variant-numeric: tabular-nums; } .data-table th, .data-table td { padding: 16px 18px 16px 0; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); white-space: nowrap; } .data-table thead th { font: 500 var(--fs-micro)/1.3 var(--font-text); letter-spacing: 0.04em; color: var(--text-faint); padding-block: 14px; } .data-table tbody th { font-weight: 500; } .data-table tbody tr { transition: background-color 0.3s; cursor: pointer; } .data-table tbody tr:hover { background: var(--bg-raised); } .data-table tr.is-selected th, .data-table tr.is-selected td { color: var(--text); } .data-table tr.is-selected th::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: var(--accent); vertical-align: middle; } .state { display: grid; justify-items: start; gap: var(--s-5); max-width: 640px; padding-block: var(--s-9); } .state__art { position: relative; width: 84px; height: 84px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; } .state__art .icon { width: 30px; height: 30px; color: var(--text-muted); } .state__mark { width: 34px; height: 42px; } .state__mark .mark__roof { fill: var(--accent); } .state__mark .mark__house { fill: var(--text); } .state__mark .mark__door { fill: var(--green-500); } .state__title { font-size: var(--fs-h3); line-height: 1.04; } .state__text { color: var(--text-muted); max-width: 52ch; } .state__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s-2); } .state--error .state__art { border-color: color-mix(in srgb, var(--error) 50%, transparent); } .skeleton { position: relative; overflow: hidden; background: var(--bg-sunken); } .skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgb(255 255 255 / 45%), transparent); animation: shimmer 1.6s var(--ease-in-out) infinite; } [data-theme="dark"] .skeleton::after { background: linear-gradient(90deg, transparent, rgb(255 255 255 / 6%), transparent); } .skeleton--line { display: block; height: 12px; border-radius: var(--r-1); } .skeleton--lg { height: 22px; } .drawer { position: fixed; inset: 0; z-index: var(--z-drawer); width: 100%; height: 100%; background: transparent; overflow: hidden; } .drawer::backdrop { background: var(--scrim); animation: fade-in 0.5s var(--ease-out); } .drawer.is-closing::backdrop { animation: fade-out 0.45s var(--ease-in) forwards; } .drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(600px, 100%); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-5) clamp(22px, 3vw, 48px) var(--s-7); background: var(--bg); color: var(--text); animation: drawer-in 0.75s var(--ease-out) both; } .drawer--left .drawer__panel { right: auto; left: 0; animation-name: drawer-in-left; } .drawer.is-closing .drawer__panel { animation: drawer-out 0.45s var(--ease-in) forwards; } .drawer--left.is-closing .drawer__panel { animation-name: drawer-out-left; } .drawer__bar { position: sticky; top: calc(-1 * var(--s-5)); z-index: 2; display: flex; align-items: center; justify-content: space-between; margin: calc(-1 * var(--s-5)) calc(-1 * clamp(22px, 3vw, 48px)) 0; padding: var(--s-5) clamp(22px, 3vw, 48px); background: var(--bg); } .drawer__kicker { display: inline-flex; align-items: center; gap: 12px; font-size: var(--fs-small); color: var(--text-muted); } .drawer__mark { width: 18px; height: 22px; } .drawer__mark .mark__roof { fill: var(--accent); } .drawer__mark .mark__house { fill: var(--navy-700); } .drawer__mark .mark__door { fill: var(--green-500); } .drawer__head { display: grid; gap: 12px; margin: var(--s-6) 0 var(--s-7); } .drawer__title { font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: 0.98; } .drawer__text { color: var(--text-muted); } @media (max-width: 639.98px) { .drawer__panel { top: auto; height: min(94svh, 100%); width: 100%; animation-name: sheet-in; } .drawer.is-closing .drawer__panel { animation-name: sheet-out; } .drawer--left .drawer__panel { animation-name: sheet-in; } .drawer--left.is-closing .drawer__panel { animation-name: sheet-out; } } .enquiry__product { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-bottom: var(--s-7); padding: 14px; background: var(--bg-raised); } .enquiry__thumb { width: 72px; height: 72px; background: var(--stage); } .enquiry__thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .enquiry__product strong { display: block; font: 400 1.35rem/1.1 var(--font-display); } .enquiry__product span { font-size: var(--fs-small); color: var(--text-muted); } .enquiry__product button { font-size: var(--fs-small); color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; } .enquiry__done { display: grid; justify-items: start; gap: var(--s-5); padding-top: var(--s-8); } .enquiry__done-actions { margin-top: var(--s-5); } .search-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); background: transparent; } .search-overlay__backdrop { position: absolute; inset: 0; background: var(--bg); animation: curtain-down 0.75s var(--ease-in-out) both; transform-origin: 50% 0; } .search-overlay.is-closing .search-overlay__backdrop { animation: curtain-up 0.6s var(--ease-in-out) 0.1s both; } .search-overlay__panel { position: relative; height: 100%; overflow-y: auto; overscroll-behavior: contain; } .search-overlay__inner { padding-block: var(--s-5) var(--s-9); animation: fade-up 0.7s var(--ease-out) 0.3s both; } .search-overlay.is-closing .search-overlay__inner { animation: fade-out 0.25s var(--ease-in) both; } .search-overlay__top { display: flex; align-items: center; justify-content: space-between; min-height: 52px; } .search-box { position: relative; margin: clamp(32px, 7vh, 80px) 0 clamp(28px, 5vh, 56px); } .search-box__input { width: 100%; padding: 0 0 18px; border: 0; background: none; outline: none; color: var(--text); font: 400 clamp(2.6rem, 7vw, 7rem)/1 var(--font-display); letter-spacing: -0.02em; border-bottom: 1px solid var(--line-strong); border-radius: 0; } .search-box__input::placeholder { color: var(--text-faint); opacity: 0.6; } .search-box__input::-webkit-search-cancel-button { display: none; } .search-box__line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.9s var(--ease-out); } .search-box__input:focus ~ .search-box__line { transform: scaleX(1); } .search-overlay__idle { display: grid; gap: var(--s-7); } @media (min-width: 1024px) { .search-overlay__idle { grid-template-columns: 1fr 1fr; } .search-overlay__idle > :last-child { grid-column: 1 / -1; } } .search-overlay__label { margin-bottom: 14px; font-size: var(--fs-small); color: var(--text-faint); } .search-overlay__types { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); border-top: 1px solid var(--line); } .search-overlay__types a { display: flex; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); font: 400 1.6rem/1.1 var(--font-display); transition: color 0.3s, padding 0.5s var(--ease-out); } .search-overlay__types a:hover { padding-left: 10px; color: var(--accent-text); } .search-overlay__types small { margin-left: auto; padding-right: 12px; font: 400 var(--fs-micro)/1 var(--font-text); color: var(--text-faint); } .search-overlay__ti { font: 400 var(--fs-micro)/1 var(--font-text); color: var(--text-faint); } .sr-results { display: grid; gap: var(--s-7); } .sr-group { display: grid; } .sr-list { display: grid; border-top: 1px solid var(--line); } .sr-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line); transition: background-color 0.3s, padding 0.45s var(--ease-out); } .sr-item:hover, .sr-item.is-active { background: var(--bg-raised); padding-inline: 12px; } .sr-item__media { width: 64px; height: 64px; display: grid; place-items: center; background: var(--porcelain-200); overflow: hidden; color: var(--text-ink); } .sr-item__media img { width: 100%; height: 100%; object-fit: cover; } .sr-item__media[data-fit="cutout"] img, .sr-item__media[data-fit="contain"] img, .sr-item__media[data-fit="cover"] img { object-fit: contain; } .sr-item__media[data-fit="cutout"] img { mix-blend-mode: multiply; padding: 6px; } .sr-item__media .icon { width: 22px; height: 22px; } .sr-item__title { display: block; font: 400 1.45rem/1.1 var(--font-display); } .sr-item__meta { display: block; margin-top: 2px; font-size: var(--fs-small); color: var(--text-muted); } .sr-item__code { font-size: var(--fs-small); color: var(--text-faint); font-variant-numeric: tabular-nums; } .sr-item > .icon { width: 18px; height: 18px; color: var(--text-faint); } .sr-all { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; } .sr-all.is-active { color: var(--accent-text); } .sr-all .icon { width: 18px; height: 18px; } .sr-empty { color: var(--text-muted); font-size: 1.0625rem; } .toasts { position: fixed; z-index: var(--z-toast); left: 50%; bottom: 28px; transform: translateX(-50%); display: grid; gap: 10px; justify-items: center; pointer-events: none; } .toast { display: inline-flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: var(--r-pill); background: var(--ink-900); color: var(--porcelain-50); font-size: 0.9375rem; box-shadow: var(--shadow-float); animation: toast-in 0.6s var(--ease-out) both; } .toast .icon { width: 18px; height: 18px; color: var(--orange-400); } .toast.is-leaving { animation: toast-out 0.4s var(--ease-in) forwards; } .lightbox { position: fixed; inset: 0; z-index: var(--z-overlay); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--porcelain-100); color: var(--text-ink); animation: fade-in 0.5s var(--ease-out); } .lightbox.is-closing { animation: fade-out 0.35s var(--ease-in) forwards; } .lightbox__bar { display: flex; align-items: center; justify-content: space-between; padding: 18px var(--gutter); font-size: var(--fs-small); color: var(--stone-600); } .lightbox__title { font: 400 1.4rem/1.1 var(--font-display); color: var(--text-ink); } .lightbox__stage { position: relative; overflow: hidden; touch-action: none; cursor: zoom-in; } .lightbox__stage.is-zoomed { cursor: grab; } .lightbox__stage.is-panning { cursor: grabbing; } .lightbox__img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: 0 0; will-change: transform; user-select: none; -webkit-user-drag: none; } .lightbox__img.is-cutout { mix-blend-mode: multiply; } .lightbox__img.is-entering { animation: lb-in 0.7s var(--ease-out); } .lightbox__nav { position: absolute; inset: 50% var(--gutter) auto; display: flex; justify-content: space-between; transform: translateY(-50%); pointer-events: none; } .lightbox__nav .round-btn { pointer-events: auto; background: var(--porcelain-50); border-color: transparent; color: var(--text-ink); } .lightbox__nav .round-btn:hover { background: var(--text-ink); color: var(--porcelain-50); } .lightbox__thumbs { display: flex; justify-content: center; gap: 8px; padding: 16px var(--gutter) 22px; overflow-x: auto; } .lightbox__thumbs button { width: 64px; height: 64px; flex: none; background: var(--porcelain-200); opacity: 0.55; transition: opacity 0.3s; position: relative; } .lightbox__thumbs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--text-ink); transform: scaleX(0); transition: transform 0.5s var(--ease-out); } .lightbox__thumbs button.is-active { opacity: 1; } .lightbox__thumbs button.is-active::after { transform: scaleX(1); } .lightbox__thumbs img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .lightbox__hint { font-size: var(--fs-micro); color: var(--stone-500); } .crumbs ol { display: flex; flex-wrap: wrap; gap: 6px 0; font-size: var(--fs-small); color: var(--text-muted); } .crumbs li { display: inline-flex; align-items: center; } .crumbs li + li::before { content: ""; width: 18px; height: 1px; margin: 0 10px; background: var(--line-strong); } .crumbs a { transition: color 0.3s; } .crumbs a:hover { color: var(--text); } .crumbs [aria-current] { color: var(--text); } .social { display: flex; gap: 8px; } .social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--text); transition: background-color 0.4s var(--ease-out), color 0.4s, border-color 0.4s; } .social a:hover { background: var(--text); color: var(--bg); border-color: var(--text); } .social .icon { width: 18px; height: 18px; } .cat-chip { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 8px 16px 8px 8px; min-width: max-content; border: 1px solid var(--line); background: var(--bg-raised); transition: border-color 0.4s var(--ease-out), background-color 0.4s; } .cat-chip:hover { border-color: var(--line-strong); } .cat-chip.is-current { border-color: var(--text); } .cat-chip__media { width: 52px; height: 52px; overflow: hidden; background: var(--media-bg, var(--stage)); } .cat-chip__media img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.8s var(--ease-out); } .cat-chip__media[data-fit="cutout"] { background: var(--stage); } .cat-chip__media[data-fit="cutout"] img { mix-blend-mode: multiply; padding: 4px; } .cat-chip:hover .cat-chip__media[data-fit="cutout"] img { transform: scale(1.08); } .cat-chip__name { font: 400 1.15rem/1.1 var(--font-display); white-space: nowrap; } .cat-chip__count { font-size: var(--fs-micro); color: var(--text-faint); font-variant-numeric: tabular-nums; } @media (max-width: 767.98px) { .drawer__title { font-size: clamp(2rem, 4vw, 3.6rem); } .search-box__input { font-size: clamp(2rem, 7vw, 7rem); } .sr-item__title { font-size: 1.3rem; } } } @layer layout { .loader { display: none; } .intro .loader { position: fixed; inset: 0; z-index: var(--z-loader); display: grid; grid-template-rows: 1fr auto; background: var(--ink-950); color: var(--porcelain-50); animation: loader-fallback 0.01s linear 4.4s forwards; } .intro-out .loader { animation: loader-lift 1.1s var(--ease-in-out) forwards; } .loader__center { display: grid; place-content: center; justify-items: center; gap: 26px; } .loader__mark { width: 58px; height: 72px; overflow: visible; } .loader__mark path { opacity: 0; } .mark__roof { fill: var(--orange-500); } .mark__house { fill: var(--porcelain-50); } .mark__door { fill: var(--green-500); } .intro .loader__mark .mark__roof { animation: mark-roof 0.9s var(--ease-out) 0.15s forwards; } .intro .loader__mark .mark__house { animation: mark-house 0.9s var(--ease-out) 0.32s forwards; } .intro .loader__mark .mark__door { animation: mark-door 0.9s var(--ease-out) 0.48s forwards; } .loader__word { display: flex; overflow: hidden; font: 400 clamp(2.6rem, 6vw, 4.4rem)/1 var(--font-display); letter-spacing: -0.01em; } .loader__word span { display: block; transform: translateY(105%); } .intro .loader__word span { animation: rise 1s var(--ease-out) forwards; animation-delay: calc(0.55s + var(--li) * 55ms); } .loader__foot { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-6); padding-block: var(--s-6); } .loader__meta { font-size: var(--fs-micro); letter-spacing: 0.06em; color: rgb(255 255 255 / 55%); } .loader__count { min-width: 2ch; font-variant-numeric: tabular-nums; text-align: right; } .loader__line { position: relative; height: 1px; background: rgb(255 255 255 / 14%); overflow: hidden; } .loader__line span { position: absolute; inset: 0; background: var(--orange-500); transform-origin: 0 50%; transform: scaleX(var(--progress, 0)); } .intro-out .loader__center, .intro-out .loader__foot { animation: fade-out 0.5s var(--ease-in) forwards; } .site-header { --fg: var(--text-ink); position: fixed; inset: 0 0 auto; z-index: var(--z-header); height: var(--header-h); color: var(--fg); transition: transform 0.7s var(--ease-out), color 0.5s var(--ease-out); view-transition-name: site-header; } .site-header::before { content: ""; position: absolute; inset: 0; background: var(--porcelain-50); opacity: 0; border-bottom: 1px solid rgb(0 72 116 / 9%); transition: opacity 0.5s var(--ease-out), background-color 0.5s var(--ease-out), border-color 0.5s; } .site-header[data-on="dark"] { --fg: var(--porcelain-50); } .site-header[data-on="dark"]::before { background: var(--ink-950); border-bottom-color: rgb(255 255 255 / 10%); } .site-header.is-scrolled::before, html:not(.js) .site-header::before { opacity: 0.94; } .site-header.is-hidden { transform: translateY(-101%); } .menu-open .site-header { --fg: var(--porcelain-50); transform: none; } .menu-open .site-header::before { opacity: 0; } .intro .site-header { transform: translateY(-101%); } .intro.intro-out .site-header:not(.is-hidden) { transform: none; transition: transform 1.1s var(--ease-out) 0.65s, color 0.5s var(--ease-out); } .js-failed .site-header { transform: none; } .site-header__bar { position: relative; height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-5); } .site-header__logo { position: relative; display: block; width: clamp(104px, 8.6vw, 128px); justify-self: start; } .logo { width: 100%; height: auto; transition: opacity 0.5s var(--ease-out); } .logo--white { position: absolute; inset: 0; opacity: 0; } [data-on="dark"] .logo--navy, .menu-open .logo--navy { opacity: 0; } [data-on="dark"] .logo--white, .menu-open .logo--white { opacity: 1; } .site-nav ul { display: flex; gap: clamp(22px, 2.6vw, 44px); } .nav-link { position: relative; display: inline-flex; padding: 8px 0; font: 500 0.9375rem/1 var(--font-text); } .nav-link::after { content: ""; position: absolute; left: 50%; bottom: -2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform 0.5s var(--ease-out); } .nav-link[aria-current="page"]::after, .nav-link:hover::after { transform: scale(1); } .site-header__actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; } .hbtn { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; border-radius: var(--r-pill); font: 500 0.9375rem/1 var(--font-text); transition: background-color 0.4s var(--ease-out); } .hbtn:hover { background: color-mix(in srgb, currentColor 9%, transparent); } .hbtn .icon { width: 19px; height: 19px; } .hbtn kbd { color: inherit; opacity: 0.55; border-color: currentColor; } .site-header .btn--accent { --btn-fill: var(--porcelain-50); --btn-fill-fg: var(--text-ink); } .site-header:not([data-on="dark"]) .btn--accent { --btn-fill: var(--ink-900); --btn-fill-fg: var(--porcelain-50); } .menu-toggle { display: inline-flex; align-items: center; gap: 12px; height: 42px; padding: 0 4px 0 12px; font: 500 0.9375rem/1 var(--font-text); } .menu-toggle__label { position: relative; display: grid; overflow: hidden; height: 1.2em; } .menu-toggle__label span { display: block; line-height: 1.2; transition: transform 0.6s var(--ease-out); } .menu-open .menu-toggle__label span { transform: translateY(-100%); } .menu-toggle__lines { position: relative; display: block; width: 42px; height: 42px; border-radius: 50%; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); transition: border-color 0.4s, background-color 0.4s; } .menu-toggle:hover .menu-toggle__lines { background: color-mix(in srgb, currentColor 10%, transparent); } .menu-toggle__lines i { position: absolute; left: 13px; right: 13px; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform 0.6s var(--ease-out), top 0.6s var(--ease-out); } .menu-toggle__lines i:first-child { top: 16px; } .menu-toggle__lines i:last-child { top: 23px; right: 18px; } .menu-toggle:hover .menu-toggle__lines i:last-child { right: 13px; } .menu-open .menu-toggle__lines i:first-child { top: 19.5px; transform: rotate(45deg); } .menu-open .menu-toggle__lines i:last-child { top: 19.5px; right: 13px; transform: rotate(-45deg); } @media (max-width: 1279.98px) { .hbtn__text, .hbtn kbd { display: none; } .hbtn { width: 42px; padding: 0; justify-content: center; } } @media (max-width: 1023.98px) { .site-header__bar { grid-template-columns: 1fr auto; } .site-nav, [data-header-cta] { display: none; } .menu-toggle__label { display: none; } } .menu { position: fixed; inset: 0; z-index: var(--z-menu); overflow: hidden; background: transparent; color: var(--text); } .menu__curtain { position: absolute; inset: 0; background: var(--ink-950); transform: translateY(-101%); transition: transform 0.9s var(--ease-in-out); } .menu-open .menu__curtain { transform: none; } .menu__inner { position: relative; height: 100%; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) auto; column-gap: var(--col-gap); padding-top: calc(var(--header-h) + 3vh); padding-bottom: var(--s-6); } .menu__families { grid-column: 1 / span 6; grid-row: 1; align-self: center; padding-block: 2vh; } .menu__kicker { margin-bottom: var(--s-5); font-size: var(--fs-small); color: var(--text-faint); } .menu__item { border-top: 1px solid var(--line); } .menu__item:last-child { border-bottom: 1px solid var(--line); } .menu__row { display: flex; align-items: center; } .menu__link { display: flex; align-items: baseline; gap: clamp(14px, 2vw, 28px); flex: 1; padding: clamp(5px, 0.9vh, 12px) 0; } .menu__index { width: 2.4em; font: 400 var(--fs-micro)/1 var(--font-text); color: var(--text-faint); font-variant-numeric: tabular-nums; } .menu__name { font: 400 clamp(2rem, min(3.7vw, 6.4vh), 4rem)/1 var(--font-display); letter-spacing: -0.015em; transition: transform 0.7s var(--ease-out), color 0.5s, opacity 0.5s; } .menu__count { font-size: var(--fs-micro); color: var(--text-faint); transform: translateY(-1.4em); } .menu__list:hover .menu__item:not(.is-active) .menu__name { opacity: 0.38; } .menu__item.is-active .menu__name { transform: translateX(14px); } .menu__item.is-active .menu__name em, .menu__item.is-active .menu__index { color: var(--accent); } .menu__toggle { display: none; } .menu__cats { display: none; } .menu__tag { margin-bottom: var(--s-4); font: 400 1.3rem/1.2 var(--font-display); color: var(--text-muted); } .menu__cats ul { display: grid; gap: 2px; } .menu__all { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--s-5); font-weight: 500; color: var(--text); } .menu__all .icon { width: 17px; height: 17px; transition: transform 0.5s var(--ease-out); } .menu__all:hover .icon { transform: translateX(5px); } .menu__preview { grid-column: 8 / span 3; grid-row: 1; align-self: center; position: relative; aspect-ratio: 4 / 5; overflow: hidden; } .menu__figure { position: absolute; inset: 0; background: var(--media-bg); clip-path: inset(100% 0 0 0); transition: clip-path 0.9s var(--ease-in-out); } .menu__figure img { width: 100%; height: 100%; object-fit: contain; } .menu__figure .echo { transform: scale(1.18); transition: transform 1.4s var(--ease-out); } .menu__figure.is-active { clip-path: inset(0); z-index: 1; } .menu__figure.is-active .echo { transform: scale(1); } .menu__aside { grid-column: 11 / -1; grid-row: 1; align-self: center; position: relative; min-height: 50vh; } .menu__panel { position: absolute; inset: 50% 0 auto; transform: translateY(-50%); opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease-out), visibility 0s linear 0.4s; } .menu__panel.is-active { opacity: 1; visibility: visible; transition: opacity 0.6s var(--ease-out) 0.1s, visibility 0s; } .menu__panel ul { display: grid; gap: 2px; list-style: none; padding: 0; } .menu__panel li { opacity: 0; transform: translateY(10px); transition: opacity 0.3s, transform 0.4s var(--ease-out); } .menu__panel.is-active li { opacity: 1; transform: none; transition: opacity 0.6s var(--ease-out), transform 0.8s var(--ease-out); transition-delay: calc(0.12s + var(--k, 0) * 30ms); } .menu__panel a, .menu__cats a { display: flex; justify-content: space-between; gap: 18px; padding: 7px 0; font-size: 0.9375rem; color: var(--text-muted); transition: color 0.3s, transform 0.5s var(--ease-out); } .menu__panel a:hover, .menu__cats a:hover { color: var(--text); transform: translateX(4px); } .menu__panel a span, .menu__cats a span { color: var(--text-faint); font-size: var(--fs-micro); font-variant-numeric: tabular-nums; } .menu__panel .menu__all { display: inline-flex; justify-content: flex-start; color: var(--text); } .menu__foot { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5) var(--s-7); padding-top: var(--s-6); margin-top: var(--s-6); border-top: 1px solid var(--line); } .menu__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); } .menu__links a, .menu__links button { font-weight: 500; transition: color 0.3s; } .menu__links a:hover, .menu__links button:hover { color: var(--accent-text); } .menu__contact { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin-left: auto; color: var(--text-muted); } .menu__contact a:hover { color: var(--text); } .menu__families, .menu__preview, .menu__aside, .menu__foot { opacity: 0; transition: opacity 0.4s var(--ease-out); } .menu-open .menu__families, .menu-open .menu__preview, .menu-open .menu__aside, .menu-open .menu__foot { opacity: 1; transition: opacity 0.6s var(--ease-out) 0.45s; } .site-nav { transition: opacity 0.4s var(--ease-out); } .menu-open .site-nav { opacity: 0; pointer-events: none; } .menu__item { transform: translateY(40px); opacity: 0; transition: transform 0.5s var(--ease-in), opacity 0.3s; } .menu-open .menu__item { transform: none; opacity: 1; transition: transform 1s var(--ease-out), opacity 0.8s var(--ease-out); transition-delay: calc(0.4s + var(--i) * 55ms); } .menu-closing .menu__curtain { transition-delay: 0.15s; } @media (max-width: 1023.98px) { .menu__inner { display: flex; flex-direction: column; padding-top: calc(var(--header-h) + 12px); } .menu__families { align-self: stretch; } .menu__preview, .menu__aside { display: none; } .menu__name { font-size: clamp(2rem, 9vw, 3rem); } .menu__item.is-active .menu__name { transform: none; } .menu__list:hover .menu__item:not(.is-active) .menu__name { opacity: 1; } .menu__toggle { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); transition: transform 0.5s var(--ease-out), background-color 0.3s; } .menu__toggle .icon { width: 18px; height: 18px; } .menu__toggle[aria-expanded="true"] { transform: rotate(45deg); background: var(--porcelain-50); color: var(--text-ink); } .menu__item.is-open .menu__cats { display: block; padding: 4px 0 var(--s-5) calc(2.4em * 0.75 + 14px); animation: fade-up 0.6s var(--ease-out) both; } .menu__tag { font-size: 1.1rem; } .menu__foot { flex-direction: column; align-items: flex-start; margin-top: auto; } .menu__contact { margin-left: 0; flex-direction: column; } } .site-footer { position: relative; overflow: hidden; padding-top: var(--section); } .footer-cta { display: grid; gap: var(--s-6); padding-bottom: var(--section); border-bottom: 1px solid var(--line); } .footer-cta__title { font-size: var(--fs-display); line-height: 0.92; max-width: 13ch; } .footer-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s-4); } .site-footer__main { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-8) var(--col-gap); padding-block: var(--s-9) var(--s-8); } .site-footer__brand { grid-column: span 4; display: grid; align-content: start; gap: var(--s-6); } .site-footer__logo { width: 150px; } .site-footer__statement { max-width: 34ch; color: var(--text-muted); } .site-footer__col { grid-column: span 2; } .site-footer__col:nth-of-type(1) { grid-column: 6 / span 2; } .site-footer__contact { grid-column: span 3; } .site-footer__heading { margin-bottom: var(--s-5); font: 500 var(--fs-small)/1 var(--font-text); color: var(--text-faint); } .site-footer__col ul { display: grid; gap: 10px; } .site-footer__col a { color: var(--text-muted); transition: color 0.3s; } .site-footer__col a:hover { color: var(--text); } .site-footer__contact address { display: grid; gap: 12px; color: var(--text-muted); } .site-footer__big { font: 400 clamp(1.7rem, 2.2vw, 2.2rem)/1.1 var(--font-display); color: var(--text) !important; } .site-footer__hours { font-size: var(--fs-small); color: var(--text-faint); } .site-footer__mark { display: flex; justify-content: center; padding: var(--s-7) var(--gutter) var(--s-9); user-select: none; } .site-footer__mark img { width: clamp(280px, 36vw, 520px); height: auto; } .site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-7); padding-block: var(--s-6) var(--s-6); border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--text-faint); } .site-footer__bottom a { color: var(--text-muted); } .site-footer__bottom a:hover { color: var(--text); } .site-footer__visitors { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; } .site-footer__visitors .icon { width: 16px; height: 16px; } .site-footer__visitors [data-visitors-count] { color: var(--text-muted); font-weight: 600; } .to-top { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; color: var(--text); font-weight: 500; } .to-top .icon { width: 17px; height: 17px; transition: transform 0.6s var(--ease-out); } .to-top:hover .icon { transform: translateY(-4px); } @media (max-width: 1023.98px) { .site-footer__brand { grid-column: 1 / -1; } .site-footer__col, .site-footer__col:nth-of-type(1) { grid-column: span 6; } .site-footer__contact { grid-column: 1 / -1; } } @media (max-width: 639.98px) { .site-footer__main { gap: var(--s-7) var(--s-5); } .to-top { margin-left: 0; } } .cursor { display: none; } .has-cursor .cursor { display: block; position: fixed; inset: 0; z-index: var(--z-cursor); pointer-events: none; view-transition-name: cursor; --c: var(--text-ink); --c-inv: var(--porcelain-50); } .cursor[data-tone="light"] { --c: var(--porcelain-50); --c-inv: var(--text-ink); } .cursor__dot, .cursor__ring { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 0.3s; will-change: transform; } .cursor.is-visible .cursor__dot, .cursor.is-visible .cursor__ring { opacity: 1; } .cursor__dot::before { content: ""; position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--c); transition: transform 0.4s var(--ease-out), background-color 0.3s; } .cursor__ring::before { content: ""; position: absolute; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); transition: transform 0.55s var(--ease-out), background-color 0.4s var(--ease-out), border-color 0.4s; } .cursor__label { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(0.6); opacity: 0; font: 500 0.8125rem/1 var(--font-text); letter-spacing: 0.02em; color: var(--c-inv); white-space: nowrap; transition: opacity 0.3s var(--ease-out), transform 0.5s var(--ease-out); } .cursor[data-state="link"] .cursor__ring::before { transform: scale(1.55); background: color-mix(in srgb, var(--c) 8%, transparent); border-color: transparent; } .cursor[data-state="link"] .cursor__dot::before { transform: scale(0.5); } .cursor:is([data-state="view"], [data-state="drag"], [data-state="zoom"], [data-state="enter"], [data-state="open"]) .cursor__ring::before { transform: scale(2.35); background: var(--c); border-color: transparent; } .cursor:is([data-state="view"], [data-state="drag"], [data-state="zoom"], [data-state="enter"], [data-state="open"]) .cursor__label { opacity: 1; transform: translate(-50%, -50%); } .cursor:is([data-state="view"], [data-state="drag"], [data-state="zoom"], [data-state="enter"], [data-state="open"]) .cursor__dot::before { transform: scale(0); } .cursor[data-state="hidden"] .cursor__dot::before, .cursor[data-state="hidden"] .cursor__ring::before { transform: scale(0); } .cursor.is-down .cursor__ring::before { transform: scale(0.8); } .cursor.is-down:is([data-state="view"], [data-state="drag"], [data-state="zoom"], [data-state="enter"]) .cursor__ring::before { transform: scale(2.1); } .has-cursor, .has-cursor * { cursor: none !important; } .has-cursor :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select, iframe, [contenteditable="true"]) { cursor: auto !important; } main { display: block; } .page-top { padding-top: calc(var(--header-h) + clamp(28px, 4vw, 56px)); } @media (max-width: 767.98px) { .menu__name { font-size: clamp(1.7rem, 8vw, 3rem); } .site-footer__big { font-size: 1.5rem; } .site-footer { padding-top: var(--section-sm); } .footer-cta { padding-bottom: var(--s-8); } .site-footer__main { padding-block: var(--s-7) var(--s-6); } .site-footer__mark { padding-block: var(--s-6) var(--s-8); } .site-footer__mark img { width: min(76vw, 320px); } } } @property --o { syntax: ""; inherits: true; initial-value: 1; } @property --zoom { syntax: ""; inherits: true; initial-value: 1; } @layer pages { .hero { position: relative; background: var(--ink-950); } .hero__track { height: 225vh; } .hero__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; --e: 0; --mx: 0; --my: 0; } .hero__light { position: absolute; inset: -25%; pointer-events: none; background: radial-gradient(38% 32% at 50% 46%, rgb(34 132 190 / 45%), transparent 72%); opacity: 0; transition: opacity 2.4s var(--ease-out); } .is-ready .hero__light { opacity: 1; animation: hero-light 22s var(--ease-in-out) infinite alternate; } .hero__media { position: absolute; inset: 0; } .hero__frame { --top: 21vh; --side: 34vw; --bottom: 14vh; position: absolute; inset: 0; overflow: hidden; background: var(--media-bg); clip-path: inset( calc(var(--top) * (1 - var(--e))) calc((50vw - (50vw - var(--side)) * var(--o)) * (1 - var(--e))) calc(var(--bottom) * (1 - var(--e))) calc((50vw - (50vw - var(--side)) * var(--o)) * (1 - var(--e)))); transform: translate3d(calc(var(--mx) * -16px * (1 - var(--e))), calc(var(--my) * -12px * (1 - var(--e))), 0); } @media (min-width: 1024px) { .hero__frame { --side: clamp(var(--gutter), 50% - (100svh - var(--top) - var(--bottom)) * var(--ar, 1) / 2, 40vw); } } .js:not(.is-ready) .hero__frame { --o: 0; } .js.is-ready .hero__frame { animation: hero-open 1.9s var(--ease-in-out) 0.05s both; } .hero__img { position: absolute; left: calc(var(--side) * (1 - var(--e))); top: calc(var(--top) * (1 - var(--e))); width: calc(100% - 2 * var(--side) * (1 - var(--e))); height: calc(100% - (var(--top) + var(--bottom)) * (1 - var(--e))); object-fit: contain; } .js:not(.is-ready) .hero__img { filter: blur(16px); } .js.is-ready .hero__img { animation: hero-focus 2.4s var(--ease-out) both; transition: filter 1.8s var(--ease-out); } .hero__echo { transform: translate3d(calc(var(--mx) * 12px), calc(var(--my) * 9px), 0) scale(calc(var(--zoom) * (1.14 - 0.14 * var(--e)))); } .js:not(.is-ready) .hero__echo { --zoom: 1.4; } .js.is-ready .hero__echo { animation: hero-zoom 2.4s var(--ease-out) both; } .hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 36 59 / 55%), rgb(0 36 59 / 8%) 38%, rgb(0 36 59 / 62%)); opacity: calc(0.45 + var(--e) * 0.55); } .hero__copy { position: absolute; z-index: 2; inset: calc(var(--header-h) + 3.5vh) var(--gutter) clamp(28px, 5.5vh, 64px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; row-gap: clamp(16px, 3vh, 36px); pointer-events: none; } .hero__eyebrow { justify-self: start; display: inline-flex; align-items: center; gap: 12px; font-size: var(--fs-small); color: var(--text-muted); opacity: calc(1 - var(--e) * 3); pointer-events: auto; } .hero__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgb(245 139 38 / 18%); } .hero__title { container-type: size; display: grid; align-content: center; gap: 0.04em; font-size: clamp(3.5rem, 10.4vw, 13rem); line-height: 0.92; letter-spacing: -0.028em; color: var(--porcelain-50); text-shadow: 0 0 60px rgb(0 36 59 / 28%); } .hero__line { display: block; white-space: nowrap; font-size: min(1em, 100cqh / (var(--lines, 3) * 0.96 + 0.3)); letter-spacing: -0.028em; transform: translate3d(calc(var(--dir) * var(--e) * 34vw + var(--mx) * var(--depth) * 1px), calc(var(--my) * var(--depth) * 0.4px), 0); opacity: calc(1 - var(--e) * 1.7); } .hero__line--1 { --dir: -1; --depth: 26; justify-self: start; } .hero__line--2 { --dir: 1; --depth: 44; justify-self: end; } .hero__line--3 { --dir: -1; --depth: 16; justify-self: start; padding-left: 9vw; } .hero__line .w__i { --delay: 380ms; } .hero__meta { justify-self: start; width: min(420px, 31vw); pointer-events: auto; opacity: calc(1 - var(--e) * 3); transform: translateY(calc(var(--e) * -40px)); } .hero__text { margin-bottom: var(--s-5); color: var(--text-muted); font-size: 0.9375rem; } .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); } .hero__foot { position: absolute; z-index: 3; right: var(--gutter); bottom: clamp(28px, 5.5vh, 64px); display: grid; justify-items: end; gap: var(--s-5); font-size: var(--fs-micro); letter-spacing: 0.04em; color: var(--text-faint); opacity: calc(1 - var(--e) * 3); } .hero__scroll { display: inline-flex; align-items: center; gap: 12px; color: var(--text-muted); } .hero__scroll-line { position: relative; width: 1px; height: 46px; background: rgb(255 255 255 / 18%); overflow: hidden; } .hero__scroll-line::after { content: ""; position: absolute; inset: 0; background: var(--porcelain-50); animation: scroll-line 2.4s var(--ease-in-out) infinite; } .hero__statement { position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: 14vh; text-align: center; font: 400 clamp(2.2rem, 5.4vw, 6.4rem)/1 var(--font-display); letter-spacing: -0.02em; color: var(--porcelain-50); opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease-out), transform 1.3s var(--ease-out); } .hero__stage.is-open .hero__statement { opacity: 1; transform: none; } .js .hero__eyebrow, .js .hero__meta > *, .js .hero__foot > * { transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); } .js:not(.is-ready) .hero__eyebrow, .js:not(.is-ready) .hero__meta > *, .js:not(.is-ready) .hero__foot > * { opacity: 0; transform: translateY(24px); } .js.is-ready .hero__eyebrow { transition-delay: 0.9s; } .js.is-ready .hero__meta > :nth-child(1) { transition-delay: 1.15s; } .js.is-ready .hero__meta > :nth-child(2) { transition-delay: 1.3s; } .js.is-ready .hero__foot > * { transition-delay: 1.45s; } @keyframes hero-open { from { --o: 0; } to { --o: 1; } } @keyframes hero-zoom { from { --zoom: 1.4; } to { --zoom: 1; } } @keyframes hero-focus { from { filter: blur(16px); } 60% { filter: blur(0); } to { filter: blur(0); } } @media (max-width: 1023.98px) { .hero__track { height: 185vh; } .hero__frame { --top: calc(var(--header-h) + 14px); --side: var(--gutter); --bottom: calc(var(--copy, 250px) + 28px); } .hero__copy { position: absolute; z-index: 3; top: auto; left: var(--gutter); right: var(--gutter); bottom: max(22px, env(safe-area-inset-bottom)); display: grid; grid-template-rows: none; justify-items: start; gap: var(--s-4); } .hero__eyebrow { font-size: 0.8125rem; } .hero__title { container-type: normal; align-content: start; font-size: clamp(2rem, 1.3rem + 5.64vw, 4.2rem); font-size: clamp(2rem, min(1.3rem + 5.64vw, 7.4svh), 4.2rem); line-height: 0.95; } .hero__line { white-space: normal; font-size: 1em; } .hero__line--1, .hero__line--2, .hero__line--3 { justify-self: start; padding-left: 0; } .hero__meta { width: auto; } .hero__actions { gap: 12px 24px; } .hero__actions .btn--lg { height: 52px; padding-left: 24px; font-size: 0.9375rem; } .hero__actions .btn--lg .btn__icon { width: 38px; height: 38px; } .hero__text { display: none; } .hero__foot { display: none; } .hero__statement { left: var(--gutter); right: var(--gutter); bottom: max(28px, env(safe-area-inset-bottom)); max-width: 16em; text-align: left; font-size: clamp(1.6rem, 1rem + 3.4vw, 3rem); } } @media (min-width: 768px) and (max-width: 1023.98px) { .hero__text { display: block; max-width: 46ch; } } @media (max-width: 1023.98px) and (orientation: landscape) and (max-height: 540px) { .hero__frame { --top: calc(var(--header-h) + 8px); --bottom: 22px; --left: 48vw; --right: var(--gutter); clip-path: inset( calc(var(--top) * (1 - var(--e))) calc((50vw - (50vw - var(--right)) * var(--o)) * (1 - var(--e))) calc(var(--bottom) * (1 - var(--e))) calc((50vw - (50vw - var(--left)) * var(--o)) * (1 - var(--e)))); } .hero__img { left: calc(var(--left) * (1 - var(--e))); width: calc(100% - (var(--left) + var(--right)) * (1 - var(--e))); } .hero__copy { right: auto; width: calc(48vw - 2 * var(--gutter)); bottom: 22px; } .hero__text { display: none; } } .manifesto__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-7); } .manifesto__side { grid-column: 1 / span 3; display: grid; align-content: start; gap: var(--s-8); padding-top: 0.6em; } .manifesto__facts { display: grid; gap: var(--s-5); } .manifesto__facts div { display: grid; gap: 2px; padding-top: var(--s-4); border-top: 1px solid var(--line); } .manifesto__facts dt { font-size: var(--fs-small); color: var(--text-muted); } .manifesto__facts dd { order: -1; font: 400 2rem/1 var(--font-display); } .manifesto__text { --q: clamp(0, (var(--p, 1) - 0.14) / 0.46, 1); grid-column: 4 / -1; font: 400 clamp(2.1rem, 4.25vw, 5.1rem)/1.1 var(--font-display); letter-spacing: -0.016em; text-wrap: pretty; } .sw { opacity: clamp(0.14, calc(var(--q) * var(--n) * 1.12 - var(--i)), 1); } .manifesto__pic { display: inline-block; width: 1.75em; height: 0.86em; margin-inline: 0.04em; vertical-align: -0.06em; border-radius: var(--r-pill); overflow: hidden; background: var(--media-bg); opacity: clamp(0.25, calc(var(--q) * var(--n) * 1.12 - var(--i) + 0.5), 1); transform: scale(calc(0.85 + 0.15 * clamp(0, calc(var(--q) * var(--n) * 1.12 - var(--i)), 1))); } .manifesto__pic img { width: 100%; height: 100%; object-fit: contain; padding-inline: 0.43em; } .manifesto__pic[data-fit="cutout"] { background: #fff; } .manifesto__pic[data-fit="cutout"] img { object-fit: contain; padding: 4px 6px; } .manifesto__link { grid-column: 4 / -1; } .calm .sw, .js-failed .sw { opacity: 1; } @media (max-width: 1023.98px) { .manifesto__side { grid-column: 1 / -1; grid-row: 2; gap: var(--s-6); } .manifesto__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .manifesto__facts dd { font-size: 1.6rem; } .manifesto__text, .manifesto__link { grid-column: 1 / -1; } .manifesto__text { grid-row: 1; } .manifesto__side .label { display: none; } } .royal { position: relative; } .royal__stage { position: relative; padding-block: var(--section-sm); } .royal__rail { display: grid; gap: var(--s-7); } .royal__intro { display: grid; align-content: center; gap: var(--s-5); padding-inline: var(--gutter); } .royal__title { font-size: var(--fs-h1); line-height: 0.94; } .royal__text { max-width: 40ch; color: var(--text-muted); } .royal__meta { font-size: var(--fs-small); color: var(--text-faint); } .finish-switch { display: flex; flex-wrap: wrap; gap: 8px; margin-block: var(--s-3); } .finish-switch__opt { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px 0 10px; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 0.9375rem; color: var(--text-muted); transition: border-color 0.4s var(--ease-out), color 0.4s, background-color 0.4s; } .finish-switch__opt:hover { color: var(--text); border-color: var(--line-strong); } .finish-switch__opt.is-active { color: var(--text); border-color: var(--text); background: rgb(255 255 255 / 6%); } .royal__pieces { display: grid; grid-auto-flow: column; grid-auto-columns: min(74vw, 360px); gap: var(--col-gap); overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; } .royal__pieces::-webkit-scrollbar { display: none; } .royal__pieces > * { scroll-snap-align: start; } .royal__piece { position: relative; display: grid; gap: var(--s-4); } .royal__num { font-size: var(--fs-micro); color: var(--text-faint); font-variant-numeric: tabular-nums; } .royal__plinth { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--porcelain-100); } .royal__plinth::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 9%; height: 1px; background: rgb(0 72 116 / 12%); } .royal__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 15% 13%; mix-blend-mode: multiply; opacity: 0; transform: translateY(14px) scale(0.97); transition: opacity 0.8s var(--ease-out), transform 1.1s var(--ease-out); } .royal__img.is-active { opacity: 1; transform: none; } .royal__piece:hover .royal__img.is-active { transform: scale(1.045); } .royal__caption { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); } .royal__name { font-size: 1.75rem; line-height: 1.05; } .royal__codes { position: relative; font-size: var(--fs-small); color: var(--text-muted); font-variant-numeric: tabular-nums; } .royal__code { display: none; } .royal__code.is-active { display: inline; animation: fade-in 0.5s var(--ease-out); } .royal__outro { display: grid; align-content: center; justify-items: start; gap: var(--s-6); padding: var(--s-6) var(--gutter); min-width: min(80vw, 420px); } .royal__outro-title { font: 400 var(--fs-h2)/0.98 var(--font-display); letter-spacing: -0.02em; } .royal__progress { display: none; } @media (min-width: 1024px) { .royal.is-pinned .royal__stage { position: sticky; top: 0; height: 100vh; padding: 0; display: flex; align-items: center; overflow: hidden; } .royal.is-pinned .royal__rail { display: flex; align-items: center; gap: 0; padding-inline: var(--gutter) 0; will-change: transform; } .royal.is-pinned .royal__intro { flex: 0 0 min(560px, 38vw); padding: 0 6vw 0 0; } .royal.is-pinned .royal__pieces { display: flex; gap: clamp(24px, 2.6vw, 48px); overflow: visible; padding: 0; } .royal.is-pinned .royal__piece { flex: 0 0 clamp(300px, 25vw, 440px); } .royal.is-pinned .royal__piece:nth-child(even) { transform: translateY(5vh); } .royal.is-pinned .royal__outro { flex: 0 0 min(620px, 46vw); padding: 0 var(--gutter) 0 8vw; } .royal.is-pinned .royal__progress { display: block; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 6vh; height: 1px; background: var(--line); } .royal__progress span { position: absolute; inset: 0; background: var(--porcelain-50); transform-origin: 0 50%; transform: scaleX(0); } } .discover__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-5); align-items: end; margin-bottom: var(--s-8); } .discover__head .label { grid-column: 1 / -1; } .discover__title { grid-column: 1 / span 8; font-size: var(--fs-h1); line-height: 0.95; } .discover__text { grid-column: 9 / -1; color: var(--text-muted); max-width: 36ch; } .panels { display: flex; height: clamp(540px, 78vh, 860px); gap: 6px; } .panel { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; color: var(--porcelain-50); background: var(--ink-900); transition: flex-grow 1.1s var(--ease-out); } .panel.is-active { flex-grow: 5.2; } .panel__media { position: absolute; inset: 0; margin: 0; overflow: hidden; background: var(--media-bg); filter: brightness(0.5) saturate(0.7); transition: filter 1s var(--ease-out); } .panel.is-active .panel__media { filter: none; } .panel__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: var(--pos, 50% 50%); } .panel__media[data-fit="cutout"] { background: var(--stage); } .panel__media[data-fit="cutout"] img { padding: 12%; mix-blend-mode: multiply; } .panel__media .echo { transform: scale(1.08); transition: transform 1.6s var(--ease-out); } .panel.is-active .panel__media .echo { transform: none; } .panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(0 36 59 / 78%), rgb(0 36 59 / 0%) 52%); pointer-events: none; } .panel[data-tone="light"]::after { background: linear-gradient(0deg, rgb(0 36 59 / 86%), rgb(0 36 59 / 10%) 60%); } .panel__index { position: absolute; z-index: 1; top: 22px; left: 22px; font-size: var(--fs-micro); font-variant-numeric: tabular-nums; color: rgb(255 255 255 / 70%); } .panel__vname { position: absolute; z-index: 1; left: 50%; bottom: 28px; writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); font: 400 clamp(1.4rem, 1.8vw, 2rem)/1 var(--font-display); white-space: nowrap; transition: opacity 0.5s var(--ease-out); } .panel.is-active .panel__vname { opacity: 0; } .panel__body { position: absolute; z-index: 1; left: clamp(22px, 2.4vw, 40px); right: clamp(22px, 2.4vw, 40px); bottom: clamp(22px, 2.4vw, 40px); display: grid; justify-items: start; gap: 10px; min-width: 300px; opacity: 0; transform: translateY(24px); transition: opacity 0.4s var(--ease-out), transform 0.6s var(--ease-out); } .panel.is-active .panel__body { opacity: 1; transform: none; transition: opacity 0.8s var(--ease-out) 0.35s, transform 1s var(--ease-out) 0.35s; } .panel__name { font: 400 clamp(2.4rem, 3.6vw, 4.2rem)/0.98 var(--font-display); letter-spacing: -0.02em; } .panel__tag { font: 400 1.25rem/1.2 var(--font-display); color: rgb(255 255 255 / 78%); } .panel__count { font-size: var(--fs-small); color: rgb(255 255 255 / 64%); } .panel__go { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / 30%); font-weight: 500; } .panel__go .icon { width: 18px; height: 18px; transition: transform 0.6s var(--ease-out); } .panel:hover .panel__go .icon { transform: translateX(6px); } @media (max-width: 1023.98px) { .discover__title, .discover__text { grid-column: 1 / -1; } .panels { flex-direction: column; height: auto; gap: 8px; } .panel, .panel.is-active { flex: none; height: clamp(150px, 34vw, 240px); } .panel__media, .panel.is-active .panel__media { filter: brightness(0.62); } .panel__media img { object-position: 100% 50%; } .panel__media .echo, .panel.is-active .panel__media .echo { transform: none; } .panel::after { background: linear-gradient(90deg, rgb(0 36 59 / 80%), rgb(0 36 59 / 10%) 70%); } .panel__vname { display: none; } .panel__index { top: auto; bottom: 20px; left: auto; right: 20px; } .panel__body, .panel.is-active .panel__body { opacity: 1; transform: none; min-width: 0; gap: 4px; left: 20px; bottom: 18px; right: 64px; transition: none; } .panel__name { font-size: clamp(1.9rem, 7vw, 2.8rem); } .panel__tag, .panel__go { display: none; } } .feature { position: relative; } .feature__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .feature__media { position: relative; } .feature__frame { position: sticky; top: 0; height: 100vh; height: 100svh; margin: 0; overflow: hidden; background: var(--bg); } .feature__frame { --echo-l: -9.12%; --echo-w: 94.24%; } .feature__img { width: 76%; height: 100%; object-fit: contain; } .feature__frame[data-fit="cutout"] { background: var(--stage); } .feature__frame[data-fit="cutout"] .feature__img { padding: 8%; mix-blend-mode: multiply; } .feature__frame::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, transparent 76%, var(--bg)); } .feature__body { position: relative; z-index: 2; display: grid; align-content: start; gap: var(--s-6); padding: var(--section) var(--gutter) var(--section) clamp(28px, 4vw, 72px); } .feature__kicker { font: 400 1.5rem/1.2 var(--font-display); color: var(--text-muted); max-width: 22ch; } .feature__title { font-size: clamp(5.5rem, 14vw, 17rem); line-height: 0.8; letter-spacing: -0.035em; margin-left: calc(-1 * clamp(90px, 11vw, 240px)); } .feature__meta { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: var(--fs-small); color: var(--text-muted); } .feature__meta span + span::before { content: ""; display: inline-block; width: 18px; height: 1px; margin: 0 12px 0 -6px; vertical-align: middle; background: var(--line-strong); } .feature__lead { max-width: 46ch; font-size: var(--fs-lead); line-height: 1.55; } .feature__specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); } .feature__spec { display: grid; gap: 6px; padding: 20px 16px 20px 0; border-bottom: 1px solid var(--line); } .feature__spec--wide { grid-column: 1 / -1; } .feature__spec dt { font-size: var(--fs-small); color: var(--text-muted); } .feature__spec dd { font: 400 1.65rem/1.1 var(--font-display); } .feature__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); } .feature__detail { position: relative; margin: 0; display: grid; gap: 12px; align-content: start; } .feature__detail img { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; background: var(--media-bg); } .feature__detail[data-fit="cutout"] img { padding: 6%; background: #fff; } .feature__detail figcaption { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.45; } .feature__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5) var(--s-6); margin-top: var(--s-4); } @media (max-width: 1023.98px) { .feature__grid { grid-template-columns: minmax(0, 1fr); } .feature__frame { position: relative; height: auto; aspect-ratio: 4 / 5; } .feature__frame { --echo-l: -12%; --echo-w: 124%; --echo-t: -8.4%; --echo-h: 86.8%; } .feature__img { width: 100%; height: 70%; } .feature__frame::before { background: linear-gradient(180deg, transparent 70%, var(--bg)); } .feature__body { padding-top: 0; margin-top: -0.9em; } .feature__title { margin-left: 0; font-size: clamp(5rem, 24vw, 9rem); } .feature__body > .label { display: none; } } .curated__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-6); margin-bottom: var(--s-8); } .curated__intro { display: grid; gap: var(--s-5); } .curated__title { font-size: var(--fs-h1); line-height: 0.95; max-width: 13ch; } .wrap--slider { padding-right: 0; } .wrap--slider .slider__bar { padding-right: var(--gutter); } .curated__foot { margin-top: var(--s-6); } .slider--cards .pcard { --card-ratio: 4 / 5; } .craft { padding-top: var(--section); overflow: clip; } .craft__head { display: grid; gap: var(--s-5); margin-bottom: var(--s-7); } .craft__title { font-size: var(--fs-h1); line-height: 0.95; max-width: 14ch; } .craft__track { position: relative; height: calc(var(--n) * 85vh + 15vh); } .craft__stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr auto 1fr; column-gap: var(--col-gap); padding: calc(var(--header-h) + 2vh) var(--gutter) 10vh; } .craft__figures { grid-column: 1 / span 7; grid-row: 1 / 3; align-self: end; position: relative; height: 0.86em; font: 400 clamp(7.5rem, 19vw, 23rem)/0.8 var(--font-display); letter-spacing: -0.04em; } .craft__fig { position: absolute; left: 0; bottom: 0; display: flex; align-items: baseline; white-space: nowrap; opacity: 0; transform: translateY(18%); transition: opacity 0.6s var(--ease-out), transform 1s var(--ease-out); } .craft__fig.is-active { opacity: 1; transform: none; } .craft__pre { font-size: 0.28em; margin-right: 0.12em; color: var(--text-muted); letter-spacing: 0; } .craft__unit { font: 500 0.13em/1 var(--font-text); letter-spacing: 0.02em; margin-left: 0.4em; color: var(--accent-text); transform: translateY(-0.2em); } .craft__media { grid-column: 8 / -1; grid-row: 1 / 4; align-self: center; position: relative; aspect-ratio: 4 / 5; width: min(100%, 72vh * 0.8); justify-self: end; overflow: hidden; } .craft__img { position: absolute; inset: 0; margin: 0; background: var(--media-bg); clip-path: inset(100% 0 0 0); transition: clip-path 1.2s var(--ease-in-out); } .craft__img.is-active { clip-path: inset(0); z-index: 1; } .craft__img img { width: 100%; height: 100%; object-fit: contain; } .craft__img[data-fit="cutout"], .craft__mobile-img[data-fit="cutout"] { background: var(--stage); } .craft__img[data-fit="cutout"] img, .craft__mobile-img[data-fit="cutout"] img { padding: 10%; mix-blend-mode: multiply; } .craft__img .echo { transform: scale(1.16); transition: transform 1.8s var(--ease-out); } .craft__img.is-active .echo { transform: none; } .craft__chapters { grid-column: 1 / span 5; grid-row: 3; align-self: start; position: relative; min-height: 190px; margin-top: var(--s-6); } .craft__chapter { position: absolute; inset: 0 0 auto; display: grid; gap: 10px; opacity: 0; transform: translateY(16px); transition: opacity 0.5s var(--ease-out), transform 0.8s var(--ease-out); } .craft__chapter.is-active { opacity: 1; transform: none; transition-delay: 0.15s; } .craft__step { font-size: var(--fs-micro); color: var(--text); font-variant-numeric: tabular-nums; } .craft__step span { margin-left: 6px; color: var(--text-faint); } .craft__ch-title { font-size: var(--fs-h3); line-height: 1; } .craft__ch-text { color: var(--text-muted); max-width: 46ch; } .craft__mobile-fig, .craft__mobile-img { display: none; } .craft__bar { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 5vh; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 10px; } .craft__bar span { position: relative; height: 1px; background: var(--line); overflow: hidden; } .craft__bar i { position: absolute; inset: 0; background: var(--porcelain-50); transform-origin: 0 50%; transform: scaleX(0); } @media (max-width: 1023.98px), (prefers-reduced-motion: reduce) { .craft__track { height: auto; } .craft__stage { position: static; height: auto; display: block; padding: 0 var(--gutter); } .craft__figures, .craft__media, .craft__bar { display: none; } .craft__chapters { min-height: 0; margin: 0; display: grid; gap: var(--s-9); } .craft__chapter, .craft__chapter.is-active { position: static; opacity: 1; transform: none; } .craft__mobile-fig { display: flex; align-items: baseline; font: 400 clamp(5.5rem, 26vw, 10rem)/0.85 var(--font-display); letter-spacing: -0.04em; margin-bottom: var(--s-4); } .craft__unit { font-size: max(0.13em, 0.75rem); } .craft__mobile-img { position: relative; display: block; margin: 0 0 var(--s-5); aspect-ratio: 4 / 3; overflow: hidden; background: var(--media-bg); } .craft__mobile-img img { width: 100%; height: 100%; object-fit: contain; } } .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block: var(--section-sm) var(--section); border-top: 1px solid var(--line); } .stat { display: flex; flex-direction: column; padding: var(--s-6) var(--s-5) 0 0; } .stat + .stat { padding-left: var(--s-5); border-left: 1px solid var(--line); } .stat__value { order: -1; display: flex; align-items: baseline; font: 400 clamp(3rem, 5.6vw, 6.6rem)/0.95 var(--font-display); letter-spacing: -0.03em; white-space: nowrap; } .stat__suffix { color: var(--accent-text); } .stat__unit { margin-left: 0.3em; font: 500 0.18em/1 var(--font-text); letter-spacing: 0.02em; color: var(--text-muted); } .stat__label { margin-top: var(--s-5); font-weight: 500; } .stat__note { font-size: var(--fs-small); color: var(--text-faint); } @media (max-width: 1023.98px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat:nth-child(3) { padding-left: 0; border-left: 0; } .stat:nth-child(n + 3) { margin-top: var(--s-6); border-top: 1px solid var(--line); } .stat__unit { font-size: max(0.18em, 0.75rem); } } .collections__head { display: grid; gap: var(--s-5); margin-bottom: var(--s-8); } .collections__title { font-size: var(--fs-h1); line-height: 0.95; max-width: 12ch; } .collections__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-9); } .coll { position: relative; display: grid; gap: var(--s-5); align-content: start; } .coll__media { position: relative; margin: 0; overflow: hidden; background: var(--media-bg, var(--stage)); } .coll__media img { width: 100%; height: 100%; object-fit: contain; transition: transform 1.6s var(--ease-out); } .coll__media[data-fit="cutout"] { background: var(--stage); } .coll__media[data-fit="cutout"] img { padding: 14%; mix-blend-mode: multiply; } .coll:hover .coll__media .echo, .coll:hover .coll__media[data-fit="cutout"] img { transform: scale(1.05); } .coll__body { display: grid; gap: 8px; } .coll__index { font-size: var(--fs-micro); color: var(--text-faint); font-variant-numeric: tabular-nums; } .coll__title { font: 400 clamp(1.9rem, 2.6vw, 3rem)/1 var(--font-display); letter-spacing: -0.015em; } .coll__text { color: var(--text-muted); max-width: 36ch; } .coll__count { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: var(--fs-small); font-weight: 500; } .coll__count .icon { width: 16px; height: 16px; transition: transform 0.6s var(--ease-out); } .coll:hover .coll__count .icon { transform: translate(3px, -3px); } .coll--1 { grid-column: 1 / span 7; } .coll--1 .coll__media { aspect-ratio: 5 / 4; } .coll--1 .coll__title { font-size: clamp(2.4rem, 4vw, 4.4rem); } .coll--2 { grid-column: 9 / span 4; margin-top: 22vh; } .coll--2 .coll__media { aspect-ratio: 4 / 5; } .coll--3 { grid-column: 2 / span 4; } .coll--3 .coll__media { aspect-ratio: 4 / 5; } .coll--4 { grid-column: 7 / span 6; margin-top: -14vh; } .coll--4 .coll__media { aspect-ratio: 6 / 5; } @media (max-width: 1023.98px) { .collections__grid { row-gap: var(--s-8); } .coll--1, .coll--2, .coll--3, .coll--4 { grid-column: 1 / -1; margin-top: 0; } .coll--2, .coll--4 { grid-column: 3 / -1; } .coll--3 { grid-column: 1 / span 10; } } .finale { position: relative; isolation: isolate; min-height: 100svh; display: grid; align-items: end; overflow: hidden; } .finale__media { position: absolute; inset: 0; z-index: -1; margin: 0; background: var(--media-bg); } .finale__parallax { position: absolute; inset: -12% 0; } .finale__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .finale__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 36 59 / 86%), rgb(0 36 59 / 52%) 48%, rgb(0 36 59 / 8%) 78%), linear-gradient(180deg, rgb(0 36 59 / 40%), transparent 30% 60%, rgb(0 36 59 / 80%)); } .finale__inner { display: grid; justify-items: start; gap: var(--s-6); padding-block: calc(var(--section) + var(--header-h)) var(--s-8); } .finale__title { font-size: var(--fs-display); line-height: 0.92; max-width: 13ch; } .finale__text { max-width: 48ch; color: var(--text-muted); font-size: var(--fs-lead); } .finale__actions { display: flex; flex-wrap: wrap; gap: 12px; } .finale__contacts { display: flex; flex-wrap: wrap; gap: var(--s-5) clamp(32px, 5vw, 88px); width: 100%; margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--line); } .finale__contacts a { display: grid; gap: 4px; font: 400 clamp(1.3rem, 1.7vw, 1.75rem)/1.1 var(--font-display); transition: color 0.3s; } .finale__contacts a:hover { color: var(--accent-text); } .finale__contacts span { font: 500 var(--fs-micro)/1 var(--font-text); color: var(--text-faint); letter-spacing: 0.03em; } @media (max-width: 767.98px) { .manifesto__text { font-size: clamp(1.65rem, 4.25vw, 5.1rem); } .manifesto__facts dd { font-size: 1.45rem; } .royal__name { font-size: 1.5rem; } .panel__name { font-size: clamp(1.55rem, 7vw, 2.8rem); } .feature__title { font-size: clamp(3.2rem, 14vw, 9rem); } .feature__spec dd { font-size: 1.45rem; } .craft__mobile-fig { font-size: clamp(3.8rem, 21vw, 10rem); } .stat__value { font-size: clamp(2.3rem, 5.6vw, 6.6rem); } .coll__title { font-size: 1.6rem; } .coll--1 .coll__title { font-size: 1.9rem; } } } @layer pages { .ahero { padding-bottom: var(--s-7); } .ahero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-6); align-items: end; margin-top: var(--s-7); } .ahero__title { grid-column: 1 / span 8; font-size: var(--fs-display); line-height: 0.86; letter-spacing: -0.03em; } .ahero__side { grid-column: 9 / -1; display: grid; gap: var(--s-5); padding-bottom: 0.8em; } .ahero__count { display: grid; gap: 4px; font-size: var(--fs-small); color: var(--text-muted); } .ahero__count span { font: 400 clamp(2.6rem, 3.6vw, 3.8rem)/1 var(--font-display); color: var(--text); letter-spacing: -0.02em; } .ahero__text { color: var(--text-muted); max-width: 44ch; } @media (max-width: 1023.98px) { .ahero__title, .ahero__side { grid-column: 1 / -1; } } .chero__eyebrow { font: 400 clamp(1.25rem, 1.6vw, 1.6rem)/1.2 var(--font-display); color: var(--text-muted); } .chero__title { font-size: clamp(3.8rem, 11.5vw, 13rem); line-height: 0.86; letter-spacing: -0.032em; } .chero__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-5) var(--s-8); margin-top: var(--s-4); } .chero__text { max-width: 56ch; color: var(--text-muted); } .chero__count { display: grid; justify-items: end; font-size: var(--fs-small); color: var(--text-muted); text-align: right; } .chero__count span { font: 400 clamp(2.6rem, 3.4vw, 3.6rem)/1 var(--font-display); color: var(--text); letter-spacing: -0.02em; } .chero__count small { margin-top: 4px; font-size: var(--fs-micro); color: var(--text-faint); } .chero--dark { position: relative; isolation: isolate; display: grid; min-height: min(94vh, 1000px); min-height: min(94svh, 1000px); overflow: hidden; } .chero__media { position: absolute; inset: 0; z-index: -1; margin: 0; overflow: hidden; background: var(--media-bg); } .chero__media img { width: 100%; height: 100%; object-fit: contain; padding-top: var(--header-h); } .chero__media .echo { transition: transform 2.4s var(--ease-out); } .js:not(.is-ready) .chero__media .echo { transform: scale(1.1); } .chero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 36 59 / 62%) 0%, rgb(0 36 59 / 8%) 26%, rgb(0 36 59 / 16%) 52%, rgb(0 36 59 / 88%) 100%); } @media (min-width: 1024px) { .chero--split { background: var(--ink-900); } .chero--split .chero__media { left: auto; width: 60%; } .chero--split .chero__media::after { background: linear-gradient(90deg, var(--ink-900) 0%, rgb(0 72 116 / 55%) 18%, rgb(0 72 116 / 0%) 45%), linear-gradient(180deg, rgb(0 36 59 / 55%), rgb(0 36 59 / 0%) 26% 70%, rgb(0 36 59 / 55%)); } .chero--split .chero__text { max-width: 44ch; } } .chero__inner { display: grid; grid-template-rows: auto 1fr; padding-top: calc(var(--header-h) + 22px); padding-bottom: clamp(36px, 6vh, 72px); } .chero__bottom { align-self: end; display: grid; gap: var(--s-3); } .chero--light { padding-bottom: var(--s-7); } .chero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-7); align-items: end; } .chero__copy { grid-column: 1 / span 7; display: grid; gap: var(--s-4); } .chero__copy .crumbs { margin-bottom: var(--s-6); } .chero__stage { position: relative; grid-column: 8 / -1; margin: 0; aspect-ratio: 1 / 1; max-height: 64vh; overflow: hidden; background: var(--media-bg, var(--stage)); } .chero__stage[data-fit="cutout"] { background: var(--stage); } .chero__stage img { width: 100%; height: 100%; object-fit: contain; } .chero__stage[data-fit="cutout"] img { padding: 12%; mix-blend-mode: multiply; } @media (max-width: 1023.98px) { .chero__copy, .chero__stage { grid-column: 1 / -1; } .chero__stage { grid-row: 1; aspect-ratio: 4 / 3; } .chero--light .chero__copy .crumbs { margin-bottom: var(--s-4); } } .cstrip { padding-block: var(--s-6); } .cstrip__track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .cstrip .cat-chip { min-width: 0; } .cstrip .cat-chip__name { white-space: normal; overflow-wrap: anywhere; } .cat-chip--all { grid-template-columns: minmax(0, 1fr) auto; min-height: 68px; padding: 8px 16px; background: transparent; } .cstrip .cat-chip.is-current { background: var(--invert-bg); border-color: var(--invert-bg); color: var(--invert-text); } .cstrip .cat-chip.is-current .cat-chip__count { color: inherit; opacity: 0.72; } @media (min-width: 1024px) { .cstrip__track { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .cstrip--many .cat-chip { grid-template-columns: minmax(0, 1fr) auto; min-height: 48px; padding: 8px 14px; gap: 10px; } .cstrip--many .cat-chip__media { display: none; } @media (min-width: 768px) { .cstrip--many .cstrip__track { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .cstrip--many .cstrip__track { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .cstrip--sub { margin-top: calc(-1 * var(--s-4)); padding-top: 0; } .cstrip--sub .cat-chip { grid-template-columns: minmax(0, 1fr) auto; min-height: 48px; padding: 8px 14px; gap: 10px; } .cstrip--sub .cat-chip__media { display: none; } @media (max-width: 767.98px) { .cstrip .cat-chip, .cat-chip--all { grid-template-columns: minmax(0, 1fr) auto; min-height: 48px; padding: 8px 12px; gap: 8px; } .cstrip .cat-chip__media { display: none; } } .catpick-btn { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 280px; height: 46px; padding: 0 14px 0 16px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r-pill); color: var(--text); text-align: left; white-space: nowrap; transition: border-color 0.4s var(--ease-out), background-color 0.4s, max-width 0.5s var(--ease-out), padding 0.5s var(--ease-out), margin 0.5s var(--ease-out), opacity 0.35s var(--ease-out), visibility 0s; } .is-box-seen .catpick-btn { max-width: 0; margin-left: calc(-1 * var(--bar-gap)); padding-inline: 0; border-width: 0; opacity: 0; visibility: hidden; transition-delay: 0s, 0s, 0s, 0s, 0s, 0s, 0.5s; } .catpick-btn:hover, .catpick-btn[aria-expanded="true"] { border-color: var(--text); background: var(--bg-raised); } .catpick-btn .icon { flex: none; width: 18px; height: 18px; } .catpick-btn__text { display: grid; min-width: 0; line-height: 1.15; } .catpick-btn__label { font-size: var(--fs-micro); color: var(--text-muted); } .catpick-btn__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9375rem; font-weight: 500; } .catpick-btn__chevron { margin-left: auto; transition: transform 0.5s var(--ease-out); } .catpick-btn[aria-expanded="true"] .catpick-btn__chevron { transform: rotate(180deg); } html:not(.js) .catpick-btn, .js-failed .catpick-btn { display: none; } .catpick { position: absolute; inset: 100% 0 auto; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-float); animation: fade-in 0.3s var(--ease-out); } .catpick .cstrip { padding-block: var(--s-5); } .catpick .cstrip--sub { margin-top: 0; padding-top: 0; } .catalog { position: relative; } .catalog__bar { position: sticky; top: var(--header-h); z-index: var(--z-sticky); background: color-mix(in srgb, var(--bg) 96%, transparent); border-block: 1px solid var(--line); transition: top 0.7s var(--ease-out); } .header-hidden .catalog__bar { top: 0; } .catalog__bar-inner { --bar-gap: var(--s-5); display: flex; flex-wrap: wrap; align-items: center; gap: 12px var(--bar-gap); min-height: 76px; padding-block: 12px; } .filter-btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px 0 16px; border-radius: var(--r-pill); background: var(--invert-bg); color: var(--invert-text); font-weight: 500; transition: background-color 0.4s var(--ease-out), color 0.4s; } .filter-btn:hover { background: var(--accent); color: var(--on-accent); } .filter-btn .icon { width: 18px; height: 18px; } .filter-btn__count { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--accent); color: var(--on-accent); font-size: 0.75rem; font-weight: 600; } .filter-btn:hover .filter-btn__count { background: var(--text-ink); color: var(--porcelain-50); } .catalog__search { display: flex; align-items: center; gap: 10px; flex: 1 1 180px; min-width: 0; max-width: 360px; height: 46px; border-bottom: 1px solid var(--line-strong); color: var(--text-muted); transition: border-color 0.3s; } .catalog__search:focus-within { border-color: var(--text); color: var(--text); } .catalog__search .icon { width: 18px; height: 18px; } .catalog__search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; color: var(--text); font-size: 0.9375rem; } .catalog__quick { display: flex; align-items: center; gap: 2px; padding-left: var(--s-4); border-left: 1px solid var(--line); } .catalog__quick-label { margin-right: 8px; font-size: var(--fs-micro); color: var(--text-faint); white-space: nowrap; } .quick-swatch { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; } .quick-swatch .swatch::after { inset: -5px; } .quick-swatch:hover .swatch::after { opacity: 0.35; transform: none; } .quick-swatch.is-on .swatch::after { opacity: 0.9; transform: none; } .catalog__count { margin-left: auto; font-size: var(--fs-small); color: var(--text-muted); white-space: nowrap; } .catalog__count strong { color: var(--text); font-weight: 600; } .catalog__count span { color: var(--text-faint); } .catalog__sort { position: relative; display: flex; align-items: center; } .catalog__sort select { height: 44px; padding: 0 26px 0 0; border: 0; background: none; appearance: none; font-weight: 500; font-size: 0.9375rem; cursor: pointer; color: var(--text); } .catalog__sort .icon { position: absolute; right: 0; width: 16px; height: 16px; pointer-events: none; } .catalog__view { display: flex; padding-left: var(--s-4); border-left: 1px solid var(--line); } .catalog__view button { display: grid; place-items: center; width: 40px; height: 40px; color: var(--text-faint); transition: color 0.3s; } .catalog__view button[aria-pressed="true"], .catalog__view button:hover { color: var(--text); } .catalog__view .icon { width: 19px; height: 19px; } @media (min-width: 1024px) and (max-width: 1439.98px) { .catalog__bar-inner { --bar-gap: 16px; } .catalog__search { flex-basis: 160px; } .catpick-btn { max-width: 220px; } } @media (min-width: 768px) and (max-width: 1279.98px) { .catalog__bar-inner { --bar-gap: 16px; row-gap: 0; } .catalog__bar-inner::after { content: ""; order: 6; flex-basis: 100%; } .filter-btn { order: 1; } .catpick-btn { order: 2; } .catalog__count { order: 3; } .catalog__sort { order: 4; } .catalog__view { order: 5; } .catalog__search { order: 7; margin-top: 12px; } .catalog__quick { order: 8; margin-top: 12px; } } @media (min-width: 768px) and (max-width: 1023.98px) { .catpick-btn { max-width: 200px; } } @media (max-width: 767.98px) { .catalog__bar { position: relative; top: 0; } .catalog__bar[data-dock] { position: sticky; top: calc(var(--header-h) - var(--bar-lead, 0px)); } .header-hidden .catalog__bar[data-dock] { top: calc(-1 * var(--bar-lead, 0px)); } .catalog__bar-inner { --bar-gap: 12px; gap: 10px var(--bar-gap); } .catalog__count { order: 1; margin-left: 0; } .catalog__sort { order: 2; margin-left: auto; } .catalog__view { order: 3; padding-left: 4px; border-left: 0; } .catalog__search { order: 5; flex-basis: 100%; max-width: none; } .catalog__quick { order: 6; flex-basis: 100%; padding-left: 0; border-left: 0; overflow-x: auto; } .filter-btn { order: 8; } .catpick-btn { order: 9; flex: 1 1 0; max-width: none; animation: fade-in 0.35s var(--ease-out); } .catpick-btn__icon { display: none; } .is-box-seen .catpick-btn { display: none; } } .catalog__body { padding-block: var(--s-7) var(--section); } .catalog__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--s-7); } .catalog__clear { margin-left: 8px; font-size: var(--fs-small); font-weight: 500; color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; } .catalog__grid.is-loading { pointer-events: none; } .catalog__more { display: grid; justify-items: center; gap: var(--s-4); margin-top: var(--s-9); } .catalog__progress-text { font-size: var(--fs-small); color: var(--text-muted); } .catalog__progress { position: relative; width: min(320px, 70%); height: 1px; margin-bottom: var(--s-4); background: var(--line); overflow: hidden; } .catalog__progress span { position: absolute; inset: 0; background: var(--text); transform-origin: 0 50%; transition: transform 0.8s var(--ease-out); } .catalog__error { grid-column: 1 / -1; } .filters-drawer .drawer__panel { width: min(500px, 100%); padding-bottom: 0; } .filters__body { flex: 1; padding-block: var(--s-3) var(--s-6); } .filters__skeleton { display: grid; gap: 12px; padding: 24px 0; border-bottom: 1px solid var(--line); } .filters__none, .filters__error { padding: 24px 0; color: var(--text-muted); } .filter-group { border-bottom: 1px solid var(--line); } .filter-group summary { display: flex; align-items: center; gap: 12px; padding: 22px 0; list-style: none; } .filter-group__title { font: 400 1.5rem/1.1 var(--font-display); } .filter-group__count { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--accent); color: var(--on-accent); font-size: 0.75rem; font-weight: 600; } .filter-group__icon { margin-left: auto; width: 18px; height: 18px; transition: transform 0.5s var(--ease-out); } .filter-group[open] .filter-group__icon { transform: rotate(45deg); } .filter-group__body { display: grid; padding-bottom: 22px; } .filter-group[open] .filter-group__body { animation: fade-up 0.5s var(--ease-out); } .filter-group__body--swatches { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 18px 8px; } .filter-option { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 0; cursor: pointer; font-size: 0.9375rem; transition: opacity 0.3s; } .filter-option:not(.filter-option--thumb) { grid-template-columns: auto minmax(0, 1fr) auto; } .filter-option input { position: absolute; opacity: 0; width: 1px; height: 1px; } .filter-option__box { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--line-strong); border-radius: var(--r-1); color: transparent; transition: background-color 0.3s, border-color 0.3s, color 0.3s; } .filter-option__box .icon { width: 13px; height: 13px; stroke-width: 2.4; } .filter-option input:checked ~ .filter-option__box { background: var(--text); border-color: var(--text); color: var(--bg); } .filter-option input:focus-visible ~ .filter-option__box { outline: 2px solid var(--focus); outline-offset: 3px; } .filter-option--radio .filter-option__box { border-radius: 50%; } .filter-option--radio input:checked ~ .filter-option__box { background: transparent; box-shadow: inset 0 0 0 4px var(--bg), inset 0 0 0 10px var(--text); } .filter-option__thumb { width: 42px; height: 42px; overflow: hidden; background: var(--media-bg, var(--stage)); } .filter-option__thumb img { width: 100%; height: 100%; object-fit: contain; } .filter-option__thumb[data-fit="cutout"] { background: var(--porcelain-200); } .filter-option__thumb[data-fit="cutout"] img { padding: 3px; mix-blend-mode: multiply; } .filter-option__label { line-height: 1.3; } .filter-option__count { font-size: var(--fs-micro); color: var(--text-faint); font-variant-numeric: tabular-nums; } .filter-option.is-empty { opacity: 0.4; } .filter-option:hover .filter-option__label { text-decoration: underline; text-underline-offset: 3px; } .filter-option--child { padding-left: 30px; } .filter-option--swatch { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 8px; padding: 4px 0; text-align: center; } .filter-option--swatch .filter-option__label { font-size: 0.8125rem; } .filter-option--swatch input:checked ~ .swatch::after { opacity: 0.8; transform: none; } .filter-option--swatch input:focus-visible ~ .swatch { outline: 2px solid var(--focus); outline-offset: 6px; } .filter-option--swatch:hover .swatch::after { opacity: 0.35; transform: none; } .filter-more { justify-self: start; margin-top: 10px; font-size: var(--fs-small); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } .filters__foot { position: sticky; bottom: 0; display: flex; align-items: center; gap: var(--s-5); margin: auto calc(-1 * clamp(22px, 3vw, 48px)) 0; padding: var(--s-5) clamp(22px, 3vw, 48px); background: var(--bg); border-top: 1px solid var(--line); } .filters__foot .btn { flex: 1; } .filters__clear { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .btn__text { white-space: nowrap; } .related-cats { border-top: 1px solid var(--line); } .related-cats__head { margin-bottom: var(--s-7); } .related-cats__title { font-size: var(--fs-h2); line-height: 1; } .slider--tiles { --item: 66vw; } @media (min-width: 640px) { .slider--tiles { --item: 36vw; } } @media (min-width: 1024px) { .slider--tiles { --item: calc((100% - 3 * var(--col-gap)) / 4.4); } } .ctile { display: grid; gap: 12px; align-content: start; } .ctile__media { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--media-bg, var(--stage)); } .ctile__media img { width: 100%; height: 100%; object-fit: contain; transition: transform 1.4s var(--ease-out); } .ctile__media[data-fit="cutout"] { background: var(--stage); } .ctile__media[data-fit="cutout"] img { padding: 14%; mix-blend-mode: multiply; } .ctile:hover .ctile__media .echo, .ctile:hover .ctile__media[data-fit="cutout"] img { transform: scale(1.05); } .ctile__name { font: 400 1.6rem/1.05 var(--font-display); } .ctile__count { font-size: var(--fs-small); color: var(--text-muted); } @media (max-width: 767.98px) { .chero__title { font-size: clamp(2.6rem, 11.5vw, 13rem); } .ahero__count span, .chero__count span { font-size: 2rem; } .ctile__name { font-size: 1.45rem; } } } @layer pages { .pdp-head { padding-bottom: var(--s-6); } .pdp-head__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-5) var(--s-8); margin-top: var(--s-6); } .pdp-head__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: var(--s-4); font-size: var(--fs-small); color: var(--text-muted); } .pdp-head__eyebrow a { transition: color 0.3s; } .pdp-head__eyebrow a:hover { color: var(--text); } .pdp-head__eyebrow span[aria-hidden] { color: var(--line-strong); } .pdp-head__title { font-size: clamp(3rem, 7.4vw, 8rem); line-height: 0.88; letter-spacing: -0.03em; max-width: 16ch; } .pdp-head__codes { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-7); padding-bottom: 0.7em; } .pdp-head__codes div { display: grid; gap: 4px; } .pdp-head__codes dt { font-size: var(--fs-micro); color: var(--text-faint); letter-spacing: 0.02em; } .pdp-head__codes dd { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; } [data-sku].is-changed { animation: fade-up 0.5s var(--ease-out); } @media (max-width: 1023.98px) { .pdp-head__grid { grid-template-columns: minmax(0, 1fr); } .pdp-head__codes { padding-bottom: 0; } } .stage { padding-bottom: var(--s-6); } .stage__viewport { position: relative; overflow: hidden; user-select: none; -webkit-user-select: none; height: clamp(420px, calc(100svh - var(--header-h) - 250px), 900px); background: var(--stage); } .stage__viewport--empty { display: grid; place-items: center; padding: var(--s-6); } .stage__slides { position: absolute; inset: 0; outline: none; } .stage__slides:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; } .stage__slide { position: absolute; inset: 0; margin: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; overflow: hidden; background: var(--media-bg); opacity: 0; visibility: hidden; transition: opacity 0.9s var(--ease-out), visibility 0s linear 0.9s; } .stage__slide[data-fit="cutout"] { background: var(--stage); padding: clamp(24px, 5%, 64px); } .stage__slide.is-active { z-index: 1; opacity: 1; visibility: visible; transition: opacity 0.9s var(--ease-out), visibility 0s; } .stage__slide.is-leaving { visibility: visible; } .stage__ambient { position: absolute; inset: -10%; width: 120%; height: 120%; max-width: none; object-fit: cover; filter: blur(46px) saturate(1.05) brightness(0.92); opacity: 0.9; } .stage__img { position: relative; width: 100%; height: 100%; max-width: calc(var(--nw) * 1.7); max-height: calc(var(--nh) * 1.7); object-fit: contain; transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1.05); transition: transform 1.3s var(--ease-out); } .stage__slide.is-active .stage__img { transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1); } .stage__slide[data-fit="cutout"] .stage__img { mix-blend-mode: multiply; } .stage__ui { position: absolute; inset: 0; z-index: 2; pointer-events: none; } .stage__ui > * { pointer-events: auto; } .stage__count { position: absolute; top: 22px; left: 24px; display: flex; gap: 8px; font-size: var(--fs-small); font-variant-numeric: tabular-nums; color: var(--text-ink); } .stage__count span + span { color: var(--stone-500); } [data-tone="dark"] .stage__count { color: var(--porcelain-50); } [data-tone="dark"] .stage__count span + span { color: rgb(255 255 255 / 60%); } .stage__expand { position: absolute; top: 16px; right: 16px; } .stage__arrows { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 8px; } .round-btn--solid { background: var(--porcelain-50); color: var(--text-ink); border-color: transparent; } .round-btn--solid:hover, .round-btn--solid:focus-visible { background: var(--text-ink); color: var(--porcelain-50); border-color: transparent; } .stage__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-6); margin-top: var(--s-4); } .stage__thumbs { display: flex; gap: 8px; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; } .stage__thumbs::-webkit-scrollbar { display: none; } .stage__thumb { position: relative; flex: none; width: 76px; height: 76px; background: var(--media-bg); opacity: 0.5; transition: opacity 0.4s var(--ease-out); } .stage__thumb::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px; background: var(--text); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.6s var(--ease-out); } .stage__thumb:hover { opacity: 0.85; } .stage__thumb.is-active { opacity: 1; } .stage__thumb.is-active::after { transform: scaleX(1); } .stage__thumb img { width: 100%; height: 100%; object-fit: cover; } .stage__thumb[data-fit="cutout"] { background: var(--stage); } .stage__thumb[data-fit="cutout"] img, .stage__thumb[data-fit="contain"] img, .stage__thumb[data-fit="cover"] img { object-fit: contain; } .stage__thumb[data-fit="cutout"] img { padding: 6px; mix-blend-mode: multiply; } .stage__caption { margin-left: auto; font-size: var(--fs-small); color: var(--text-muted); text-align: right; } .stage__note { display: flex; align-items: center; gap: 8px; width: 100%; font-size: var(--fs-small); color: var(--text-muted); } .stage__note .icon { width: 16px; height: 16px; } .stage__note a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 767.98px) { .stage > .wrap { padding-inline: 0; } .stage__viewport { height: auto; aspect-ratio: 1 / 1.05; } .stage__arrows { display: none; } .stage__foot { padding-inline: var(--gutter); } .stage__thumb { width: 60px; height: 60px; } } .pdp-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-8); padding-block: var(--s-8) var(--section-sm); } .pdp-buy { grid-column: 1 / span 4; } .pdp-buy__inner { position: sticky; top: calc(var(--header-h) + 28px); display: grid; gap: var(--s-6); transition: top 0.7s var(--ease-out); } .header-hidden .pdp-buy__inner { top: 28px; } .pdp-buy__lead { font: 400 clamp(1.5rem, 2vw, 2.05rem)/1.18 var(--font-display); letter-spacing: -0.01em; } .pdp-story { grid-column: 6 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-9); min-width: 0; } @media (max-width: 1023.98px) { .pdp-buy, .pdp-story { grid-column: 1 / -1; } .pdp-buy__inner { position: static; } } .variant-picker { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 14px; } .variant-picker__legend { float: left; width: 100%; display: flex; justify-content: space-between; gap: 12px; padding: 0 0 12px; font-size: var(--fs-small); color: var(--text-muted); border-bottom: 1px solid var(--line); } .variant-picker__legend strong { color: var(--text); font-weight: 500; text-align: right; } .variant-picker__swatches, .variant-picker__chips, .select-line { clear: both; } .variant-picker__swatches { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 4px; } .swatch-option { position: relative; display: inline-grid; cursor: pointer; padding: 4px; } .swatch-option input { position: absolute; opacity: 0; width: 1px; height: 1px; } .swatch-option input:checked + .swatch::after { opacity: 0.9; transform: none; } .swatch-option:hover .swatch::after { opacity: 0.4; transform: none; } .swatch-option input:focus-visible + .swatch { outline: 2px solid var(--focus); outline-offset: 7px; } .variant-picker__chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip-option { position: relative; cursor: pointer; } .chip-option input { position: absolute; opacity: 0; width: 1px; height: 1px; } .chip-option span { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); font-size: 0.875rem; font-weight: 500; transition: background-color 0.3s, color 0.3s, border-color 0.3s; } .chip-option:hover span { border-color: var(--text); } .chip-option input:checked + span { background: var(--text); color: var(--bg); border-color: var(--text); } .chip-option input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; } .select-line { position: relative; border-bottom: 1px solid var(--line-strong); } .select-line select { width: 100%; height: 50px; padding-right: 28px; border: 0; background: none; appearance: none; font-size: 1rem; font-weight: 500; color: var(--text); cursor: pointer; } .select-line .icon { position: absolute; right: 0; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); pointer-events: none; } .pdp-stock { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-raised); } .pdp-stock .stock { font-size: 1rem; } .pdp-stock__when { font-size: var(--fs-micro); color: var(--text-faint); padding-left: 16px; } .data-table .stock { font-size: var(--fs-small); white-space: nowrap; } .pdp-cta { display: grid; gap: 14px; } .pdp-cta .btn { width: 100%; justify-content: space-between; } .pdp-cta__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); } .pdp-cta__link { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; font-size: 0.9375rem; font-weight: 500; transition: background-color 0.3s; } .pdp-cta__link + .pdp-cta__link { border-left: 1px solid var(--line); } .pdp-cta__link:hover { background: var(--bg-raised); } .pdp-cta__link .icon { width: 18px; height: 18px; } .assurance { display: grid; gap: 12px; font-size: var(--fs-small); color: var(--text-muted); } .assurance li { display: flex; align-items: center; gap: 12px; } .assurance .icon { width: 18px; height: 18px; color: var(--text); } .assurance strong { color: var(--text); font-weight: 600; } .pdp-block__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: var(--s-5); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line-strong); } .pdp-block__title { font-size: var(--fs-h3); line-height: 1; } .pdp-block__count { font-size: var(--fs-small); color: var(--text-faint); font-variant-numeric: tabular-nums; } .pdp-block__note { margin-bottom: var(--s-5); font-size: var(--fs-small); color: var(--text-muted); } .highlights { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); column-gap: var(--col-gap); border-top: 1px solid var(--line); } @media (max-width: 639.98px) { .highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .highlight { display: grid; align-content: start; gap: 8px; padding: 26px 0; border-bottom: 1px solid var(--line); } .highlight .icon { width: 22px; height: 22px; color: var(--text-muted); margin-bottom: 8px; } .highlight__value { font: 400 clamp(1.5rem, 1.9vw, 1.9rem)/1.06 var(--font-display); letter-spacing: -0.01em; overflow-wrap: anywhere; } .highlight__label { font-size: var(--fs-small); color: var(--text-muted); } .prose { display: grid; gap: 1em; } .prose p { max-width: 64ch; font-size: 1.0625rem; line-height: 1.7; } .prose .note { display: flex; gap: 12px; font-size: 0.9375rem; color: var(--text-muted); } .prose .note .icon { width: 18px; height: 18px; margin-top: 3px; } .spec-groups { display: grid; border-top: 1px solid var(--line); } .spec-group { border-bottom: 1px solid var(--line); } .spec-group summary { display: flex; align-items: center; gap: 16px; padding: 22px 0; list-style: none; } .spec-group__index { font-size: var(--fs-micro); color: var(--text-faint); font-variant-numeric: tabular-nums; } .spec-group__title { font: 400 1.6rem/1.1 var(--font-display); } .spec-group__n { font-size: var(--fs-small); color: var(--text-faint); } .spec-group__icon { margin-left: auto; width: 18px; height: 18px; transition: transform 0.5s var(--ease-out); } .spec-group[open] .spec-group__icon { transform: rotate(45deg); } .spec-group .spec-list { padding: 0 0 24px; } .spec-group[open] .spec-list { animation: fade-up 0.6s var(--ease-out); } .spec-group .spec-list__row:first-child { border-top: 0; } .spec-group .spec-list__row:last-child { border-bottom: 0; } .table-enquire { display: inline-flex; font-size: var(--fs-small); font-weight: 600; } .set-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; } .set-item__link { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; background: var(--bg-raised); transition: background-color 0.3s; } .set-item__link:hover { background: var(--porcelain-0); } .set-item__media { display: grid; place-items: center; width: 64px; height: 64px; overflow: hidden; background: var(--media-bg, var(--stage)); color: var(--text-muted); } .set-item__media img { width: 100%; height: 100%; object-fit: cover; } .set-item__media[data-fit="cutout"] { background: var(--stage); } .set-item__media[data-fit="cutout"] img, .set-item__media[data-fit="contain"] img, .set-item__media[data-fit="cover"] img { object-fit: contain; } .set-item__media[data-fit="cutout"] img { padding: 5px; mix-blend-mode: multiply; } .set-item__name { display: block; font: 400 1.2rem/1.1 var(--font-display); } .set-item__name small { font: 500 var(--fs-micro)/1 var(--font-text); color: var(--text-muted); } .set-item__meta { display: block; margin-top: 3px; font-size: var(--fs-micro); color: var(--text-muted); } .set-item__qty { font-size: var(--fs-small); font-variant-numeric: tabular-nums; color: var(--text-muted); } .set-group { margin: var(--s-6) 0 var(--s-4); font: 600 1rem/1.3 var(--font-text); } .set-group span { font-weight: 400; color: var(--text-muted); } .packing { display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-8); } .packing li { display: grid; gap: 2px; font-size: var(--fs-small); color: var(--text-muted); } .packing__qty { font: 400 2.6rem/1 var(--font-display); color: var(--text); } .packing__qty small { margin-left: 6px; font: 500 0.8rem/1 var(--font-text); color: var(--text-muted); } .related { border-top: 1px solid var(--line); } .related__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-5); margin-bottom: var(--s-7); } .related__title { font-size: var(--fs-h2); line-height: 1; } .related__count { font-size: var(--fs-small); color: var(--text-muted); } .sticky-cta { position: fixed; z-index: var(--z-sticky); left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 20px; border-radius: var(--r-pill); background: var(--ink-900); color: var(--porcelain-50); box-shadow: var(--shadow-float); transform: translateY(160%); transition: transform 0.7s var(--ease-out); } .sticky-cta.is-visible { transform: none; } .sticky-cta__info { min-width: 0; } .sticky-cta__info strong { display: block; font: 400 1.2rem/1.05 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sticky-cta__info span { font-size: var(--fs-micro); color: rgb(255 255 255 / 60%); } @media (min-width: 1024px) { .sticky-cta { display: none; } } .pdp--unavailable .stage__viewport { filter: grayscale(1); opacity: 0.75; } .state--unavailable { padding-block: var(--s-6) var(--s-7); max-width: 760px; } @media (max-width: 767.98px), (max-width: 1023.98px) and (max-height: 540px) { .pdp { display: flex; flex-direction: column; } .stage { order: -1; padding-top: var(--header-h); padding-bottom: var(--s-3); } .stage__viewport--empty { aspect-ratio: auto; } .stage__viewport--empty .state { padding-block: var(--s-5); } .pdp-head.page-top { padding-top: var(--s-4); padding-bottom: var(--s-4); } .pdp-head > .wrap { display: flex; flex-direction: column; } .pdp-head__grid { order: -1; margin-top: 0; } .pdp-head .crumbs { order: 1; margin-top: var(--s-4); } .pdp-body { padding-top: var(--s-5); row-gap: var(--s-6); } } @media (max-width: 1023.98px) and (max-height: 540px) { .stage__viewport { height: max(240px, calc(100svh - var(--header-h) - 24px)); aspect-ratio: auto; } } @media (max-width: 767.98px) { .pdp-head__title { font-size: clamp(2.3rem, 7.4vw, 8rem); } .pdp-buy__lead { font-size: 1.35rem; } .highlight__value { font-size: 1.35rem; } .spec-group__title { font-size: 1.4rem; } .packing__qty { font-size: 2.2rem; } } } @layer pages { .xhero { padding-bottom: var(--s-8); } .xhero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-6); align-items: end; margin-top: var(--s-7); } .xhero__title { grid-column: 1 / span 9; font-size: var(--fs-display); line-height: 0.86; letter-spacing: -0.03em; } .xhero__text { grid-column: 10 / -1; padding-bottom: 0.8em; color: var(--text-muted); } @media (max-width: 1023.98px) { .xhero__title, .xhero__text { grid-column: 1 / -1; } } .index { position: relative; padding-bottom: var(--section-sm); } .index__list { border-top: 1px solid var(--line-strong); } .index__row { position: relative; border-bottom: 1px solid var(--line-strong); } .index__link { position: relative; z-index: 2; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 0.8fr) auto; align-items: center; gap: var(--s-5); padding: clamp(18px, 2.6vw, 34px) 0; } .index__num { font-size: var(--fs-micro); color: var(--text-faint); font-variant-numeric: tabular-nums; } .index__name { font: 400 clamp(2.6rem, 6.4vw, 7rem)/0.95 var(--font-display); letter-spacing: -0.025em; transition: transform 0.8s var(--ease-out), opacity 0.5s; } .index__tag { font: 400 clamp(1.1rem, 1.4vw, 1.4rem)/1.25 var(--font-display); color: var(--text-muted); transition: opacity 0.5s; } .index__count { display: grid; justify-items: end; font: 400 clamp(1.6rem, 2.2vw, 2.4rem)/1 var(--font-display); font-variant-numeric: tabular-nums; } .index__count small { font: 500 var(--fs-micro)/1.4 var(--font-text); color: var(--text-faint); } .index__thumb { display: none; } .index.is-hovering .index__row:not(.is-active) .index__name, .index.is-hovering .index__row:not(.is-active) .index__tag { opacity: 0.25; } .index__row.is-active .index__name { transform: translateX(24px); } .index__cats { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 0 0 var(--s-5) calc(3.5rem + var(--s-5)); margin-top: -8px; font-size: var(--fs-small); } .index__cats a { display: inline-flex; gap: 6px; color: var(--text-muted); transition: color 0.3s; } .index__cats a:hover { color: var(--text); } .index__cats span { color: var(--text-faint); font-size: var(--fs-micro); } .index__float { position: fixed; z-index: 1; left: 0; top: 0; width: clamp(240px, 22vw, 360px); aspect-ratio: 4 / 5; margin: calc(clamp(240px, 22vw, 360px) * -0.62) 0 0 calc(clamp(240px, 22vw, 360px) * -0.5); pointer-events: none; display: none; } .index__fig { position: absolute; inset: 0; margin: 0; overflow: hidden; background: var(--media-bg); clip-path: inset(50% 50% 50% 50%); transition: clip-path 0.8s var(--ease-out); } .index__fig img { width: 100%; height: 100%; object-fit: contain; } .index__fig .echo { transform: scale(1.25); transition: transform 1.2s var(--ease-out); } .index__fig.is-active { clip-path: inset(0); z-index: 1; } .index__fig.is-active .echo { transform: none; } @media (hover: hover) and (pointer: fine) and (min-width: 1024px) { .index__float { display: block; } } @media (max-width: 1023.98px), (hover: none) { .index__link { grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--s-4); } .index__num { display: none; } .index__name { font-size: clamp(2.2rem, 9vw, 3.6rem); } .index__tag { grid-column: 1; font-size: 1.05rem; } .index__count { display: none; } .index__thumb { display: block; grid-row: 1 / 3; grid-column: 2; width: clamp(84px, 24vw, 140px); aspect-ratio: 1 / 1; overflow: hidden; background: var(--media-bg); } .index__thumb img { width: 100%; height: 100%; object-fit: contain; } .index__cats { padding-left: 0; margin-top: 0; } } .named { border-top: 1px solid var(--line); } .named__head { display: grid; gap: var(--s-5); margin-bottom: var(--s-8); } .named__title { font-size: var(--fs-h1); line-height: 0.95; max-width: 14ch; } .slider--named { --item: 72vw; } @media (min-width: 640px) { .slider--named { --item: 40vw; } } @media (min-width: 1024px) { .slider--named { --item: calc((100% - 3 * var(--col-gap)) / 3.6); } } .ntile { display: grid; gap: 10px; align-content: start; } .ntile__media { position: relative; margin: 0 0 8px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--media-bg, var(--stage)); } .ntile__media img { width: 100%; height: 100%; object-fit: contain; transition: transform 1.4s var(--ease-out); } .ntile__media[data-fit="cutout"] { background: var(--stage); } .ntile__media[data-fit="cutout"] img { padding: 14%; mix-blend-mode: multiply; } .ntile:hover .ntile__media .echo, .ntile:hover .ntile__media[data-fit="cutout"] img { transform: scale(1.05); } .ntile__name { font: 400 clamp(1.7rem, 2.2vw, 2.3rem)/1 var(--font-display); letter-spacing: -0.015em; } .ntile__tag { color: var(--text-muted); font-size: 0.9375rem; } .ntile__count { font-size: var(--fs-small); color: var(--text-faint); } .directory { border-top: 1px solid var(--line); } .directory__head { display: grid; gap: var(--s-5); margin-bottom: var(--s-8); } .directory__title { font-size: var(--fs-h2); line-height: 1; } .directory__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--s-8) var(--col-gap); } .directory__type { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: var(--s-4); margin-bottom: var(--s-4); border-bottom: 1px solid var(--line-strong); font-size: 1.6rem; line-height: 1.1; } .directory__type span { font: 500 var(--fs-micro)/1 var(--font-text); color: var(--text-faint); } .directory__col ul { display: grid; gap: 8px; } .directory__col li { display: flex; justify-content: space-between; gap: 12px; font-size: 0.9375rem; } .directory__col li.is-child { padding-left: 16px; color: var(--text-muted); } .directory__col li span { font-size: var(--fs-micro); color: var(--text-faint); font-variant-numeric: tabular-nums; } .shero { padding-bottom: var(--s-6); } .shero__form { margin-top: var(--s-8); } .shero__label { display: block; margin-bottom: var(--s-4); font: 400 clamp(1.25rem, 1.6vw, 1.6rem)/1.2 var(--font-display); color: var(--text-muted); } .shero__field { position: relative; display: flex; align-items: center; gap: var(--s-4); border-bottom: 1px solid var(--line-strong); } .shero__input { flex: 1; min-width: 0; padding: 0 0 14px; border: 0; background: none; outline: none; font: 400 clamp(2.8rem, 8vw, 8rem)/1 var(--font-display); letter-spacing: -0.025em; color: var(--text); } .shero__input::placeholder { color: var(--text-faint); opacity: 0.55; } .shero__input::-webkit-search-cancel-button { display: none; } .shero__go { flex: none; margin-bottom: 14px; } .shero__line { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.9s var(--ease-out); } .shero__input:focus ~ .shero__line { transform: scaleX(1); } .shero__hint { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px; margin-top: var(--s-5); font-size: var(--fs-small); color: var(--text-muted); } .shero__hint a { display: inline-flex; align-items: baseline; gap: 6px; color: var(--text); font-weight: 500; } .shero__hint a span { font-weight: 400; color: var(--text-faint); font-size: var(--fs-micro); } .shero__hint a:hover { color: var(--accent-text); } .sresults { padding-block: var(--s-6) var(--section); } .sresults__head { margin-bottom: var(--s-5); font-size: 1.0625rem; color: var(--text-muted); } .sresults__head strong { font: 400 2rem/1 var(--font-display); color: var(--text); margin-right: 4px; } .sresults__groups { margin-bottom: var(--s-7); } .sresults__empty { max-width: 720px; } .sresults__start { display: grid; gap: var(--s-6); } .sfamilies { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--col-gap); } .sfamily { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: baseline; } .sfamily__media { position: relative; grid-column: 1 / -1; aspect-ratio: 1 / 1; overflow: hidden; background: var(--media-bg, var(--stage)); margin-bottom: 4px; } .sfamily__media img { width: 100%; height: 100%; object-fit: contain; transition: transform 1.2s var(--ease-out); } .sfamily:hover .sfamily__media .echo { transform: scale(1.06); } .sfamily__name { font: 400 1.5rem/1.05 var(--font-display); } .sfamily__count { font-size: var(--fs-micro); color: var(--text-faint); } .story-hero { position: relative; height: 210vh; background: var(--ink-950); --p: 0; } .story-hero__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; --e: clamp(0, var(--p) * 1.35, 1); } .story-hero__media { --t: 14vh; --r: 6vw; --b: 14vh; --l: 52vw; --ww: calc(100% - var(--e) * (var(--l) + var(--r))); --wh: calc(100% - var(--e) * (var(--t) + var(--b))); --echo-l: calc(var(--e) * var(--l) - 0.12 * var(--ww)); --echo-t: calc(var(--e) * var(--t) - 0.12 * var(--wh)); --echo-w: calc(1.24 * var(--ww)); --echo-h: calc(1.24 * var(--wh)); position: absolute; inset: 0; margin: 0; background: var(--media-bg); clip-path: inset(calc(var(--e) * var(--t)) calc(var(--e) * var(--r)) calc(var(--e) * var(--b)) calc(var(--e) * var(--l))); } .story-hero__media img { position: absolute; left: calc(var(--e) * var(--l)); top: calc(var(--e) * var(--t)); width: var(--ww); height: var(--wh); padding-top: calc(var(--header-h) * (1 - var(--e))); object-fit: contain; } .story-hero__media .echo { transform: scale(calc(1.08 - var(--e) * 0.08)); } .js:not(.is-ready) .story-hero__media .echo { transform: scale(1.18); } .js.is-ready .story-hero__media .echo { transition: transform 2.2s var(--ease-out); } .story-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 36 59 / 55%), rgb(0 36 59 / 5%) 35%, rgb(0 36 59 / 70%)); opacity: calc(1 - var(--e) * 0.6); } .story-hero__top { position: absolute; inset: calc(var(--header-h) + 18px) 0 auto; z-index: 2; opacity: calc(1 - var(--e) * 3); } .story-hero__title-wrap { position: absolute; inset: auto 0 clamp(36px, 7vh, 80px); z-index: 2; opacity: calc(1 - var(--e) * 2.2); transform: translateY(calc(var(--e) * -12vh)); } .story-hero__eyebrow { margin-bottom: var(--s-4); font: 400 clamp(1.2rem, 1.5vw, 1.5rem)/1.2 var(--font-display); color: var(--text-muted); } .story-hero__title { font-size: clamp(3.4rem, 9.6vw, 11rem); line-height: 0.88; letter-spacing: -0.03em; max-width: 12ch; } .story-hero__aside { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; pointer-events: none; } .story-hero__statement { --q: clamp(0, (var(--p) - 0.42) / 0.4, 1); width: min(44vw, 640px); font: 400 clamp(1.9rem, 3.3vw, 3.6rem)/1.12 var(--font-display); letter-spacing: -0.015em; opacity: clamp(0, (var(--p) - 0.3) * 6, 1); } .story-hero__statement .sw { opacity: clamp(0.12, calc(var(--q) * var(--n) * 1.1 - var(--i)), 1); } @media (max-width: 1023.98px) { .story-hero { height: 190vh; } .story-hero__media { --t: 8svh; --r: 6vw; --b: 50svh; --l: 6vw; } .story-hero__aside { align-items: flex-end; padding-bottom: 8svh; } .story-hero__statement { width: 100%; font-size: clamp(1.7rem, 6.4vw, 2.6rem); } } .calm .story-hero { height: auto; } .calm .story-hero__stage { position: relative; height: 100svh; } .calm .story-hero__aside { display: none; } .profile__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-8); } .profile__head { grid-column: 1 / span 6; display: grid; align-content: start; gap: var(--s-5); } .profile__title { font-size: var(--fs-h1); line-height: 0.95; } .profile__text { grid-column: 8 / -1; display: grid; gap: 1.2em; align-content: start; padding-top: 0.6em; color: var(--text-muted); font-size: 1.0625rem; line-height: 1.75; } .profile__first { color: var(--text); font-size: var(--fs-lead); line-height: 1.6; } .profile__first::first-letter { float: left; margin: 0.06em 0.12em 0 0; font: 400 4.4em/0.78 var(--font-display); color: var(--accent-text); } .profile__pics { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); margin-top: var(--s-6); } .profile__pic { position: relative; margin: 0; overflow: hidden; background: var(--media-bg); } .profile__pic--1 { grid-column: 1 / span 6; aspect-ratio: 4 / 5; } .profile__pic--2 { grid-column: 8 / span 4; aspect-ratio: 1 / 1; align-self: end; margin-bottom: -10vh; } .profile__parallax { position: absolute; inset: -10% 0; } .profile__pic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } @media (max-width: 1023.98px) { .profile__head, .profile__text { grid-column: 1 / -1; } .profile__pic--1 { grid-column: 1 / span 9; } .profile__pic--2 { grid-column: 6 / -1; margin: -18vw 0 0; grid-row: 2; } } .journey { position: relative; margin-top: var(--section-sm); } .journey__stage { position: relative; padding-block: var(--section-sm); overflow: hidden; } .journey__rail { display: grid; gap: var(--s-7); } .journey__intro { display: grid; gap: var(--s-5); align-content: center; padding-inline: var(--gutter); } .journey__title { font-size: var(--fs-h1); line-height: 0.95; max-width: 9ch; } .journey__hint { display: none; align-items: center; gap: 10px; font-size: var(--fs-small); color: var(--text-muted); } .journey__hint .icon { width: 18px; height: 18px; } .journey__list { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 380px); gap: var(--col-gap); overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--gutter); scrollbar-width: none; } .journey__list::-webkit-scrollbar { display: none; } .milestone { display: grid; align-content: start; gap: var(--s-4); scroll-snap-align: start; } .milestone__marker { font: 400 clamp(4.4rem, 9vw, 10rem)/0.9 var(--font-display); letter-spacing: -0.04em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgb(255 255 255 / 45%); transition: color 0.9s var(--ease-out), -webkit-text-stroke-color 0.9s; } .milestone.is-lit .milestone__marker, .calm .milestone__marker { color: var(--porcelain-50); -webkit-text-stroke-color: transparent; } .milestone__line { position: relative; display: block; height: 1px; background: var(--line); } .milestone__line i { position: absolute; left: 0; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform 0.7s var(--ease-out); } .milestone.is-lit .milestone__line i { transform: scale(1); } .milestone__title { font-size: 1.9rem; line-height: 1.05; } .milestone__text { color: var(--text-muted); max-width: 34ch; } .journey__progress { display: none; } @media (min-width: 1024px) { .journey.is-pinned .journey__stage { position: sticky; top: 0; height: 100vh; padding: 0; display: flex; align-items: center; } .journey.is-pinned .journey__rail { display: flex; align-items: center; gap: 0; padding-left: var(--gutter); will-change: transform; } .journey.is-pinned .journey__intro { flex: 0 0 min(520px, 36vw); padding: 0 5vw 0 0; } .journey.is-pinned .journey__hint { display: inline-flex; } .journey.is-pinned .journey__list { display: flex; gap: clamp(40px, 5vw, 96px); overflow: visible; padding: 0 var(--gutter) 0 0; } .journey.is-pinned .milestone { flex: 0 0 clamp(320px, 28vw, 460px); } .journey.is-pinned .milestone:nth-child(even) { transform: translateY(8vh); } .journey.is-pinned .journey__progress { display: block; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 6vh; height: 1px; background: var(--line); } .journey__progress span { position: absolute; inset: 0; background: var(--porcelain-50); transform-origin: 0 50%; transform: scaleX(0); } } .made { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100svh; } .made__media { position: relative; margin: 0; overflow: hidden; background: var(--media-bg); } .made__parallax { position: absolute; inset: -10% 0; } .made__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .made__body { display: grid; align-content: center; gap: var(--s-6); padding: var(--section) var(--gutter) var(--section) clamp(32px, 5vw, 96px); } .made__title { font-size: var(--fs-h1); line-height: 0.95; } .made__text { color: var(--text-muted); max-width: 46ch; } .made__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); margin-top: var(--s-4); } .made__fact { display: flex; flex-direction: column; gap: 8px; padding: var(--s-6) var(--s-5) var(--s-6) 0; border-bottom: 1px solid var(--line); } .made__fact:nth-child(even) { padding-left: var(--s-5); border-left: 1px solid var(--line); } .made__fact dd { order: -1; display: flex; align-items: baseline; gap: 8px; font: 400 clamp(2.8rem, 4.6vw, 5rem)/0.95 var(--font-display); letter-spacing: -0.03em; white-space: nowrap; } .made__fact dd small { font: 500 0.875rem/1 var(--font-text); letter-spacing: 0.02em; color: var(--accent-text); } .made__fact dt { font-size: var(--fs-small); color: var(--text-muted); } @media (max-width: 1023.98px) { .made { grid-template-columns: minmax(0, 1fr); } .made__media { aspect-ratio: 4 / 3; } .made__body { padding-top: var(--s-8); } } .vm__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); } .vm__item { position: relative; display: grid; align-content: end; gap: var(--s-4); min-height: 420px; padding: var(--s-7) var(--s-6) var(--s-6) 0; border-top: 1px solid var(--line-strong); overflow: hidden; } .vm__item + .vm__item { padding-left: var(--s-6); border-left: 1px solid var(--line); } .vm__word { position: absolute; top: 0.04em; left: -0.04em; font: 400 clamp(6rem, 13vw, 15rem)/0.8 var(--font-display); letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1px var(--line-strong); pointer-events: none; } .vm__item + .vm__item .vm__word { left: calc(var(--s-6) - 0.04em); } .vm__title { font-size: var(--fs-h3); } .vm__text { max-width: 46ch; color: var(--text-muted); font-size: var(--fs-lead); line-height: 1.55; } @media (max-width: 767.98px) { .vm__grid { grid-template-columns: minmax(0, 1fr); } .vm__item + .vm__item { padding-left: 0; border-left: 0; } .vm__item + .vm__item .vm__word { left: -0.04em; } .vm__item { min-height: 340px; } } .values { border-top: 1px solid var(--line); } .values__head { display: grid; gap: var(--s-5); margin-bottom: var(--s-8); } .values__title { font-size: var(--fs-h1); line-height: 0.95; } .values__list { border-top: 1px solid var(--line-strong); } .value { position: relative; display: grid; grid-template-columns: 3.5rem minmax(0, 0.9fr) minmax(0, 1fr) auto; align-items: center; gap: var(--s-5); padding: var(--s-6) 0; border-bottom: 1px solid var(--line-strong); transition: padding 0.6s var(--ease-out); } .value:hover { padding-left: var(--s-4); } .value__num { font-size: var(--fs-micro); color: var(--text-faint); } .value__title { font-size: clamp(2.2rem, 4vw, 4.2rem); line-height: 1; } .value__text { color: var(--text-muted); max-width: 46ch; } .value__icon { width: 30px; height: 30px; color: var(--text-faint); transition: color 0.4s, transform 0.6s var(--ease-out); } .value:hover .value__icon { color: var(--accent-text); transform: rotate(-8deg) scale(1.1); } @media (max-width: 767.98px) { .value { grid-template-columns: minmax(0, 1fr) auto; gap: 8px var(--s-4); } .value__num { display: none; } .value__text { grid-column: 1 / -1; } } .standards__head { display: grid; gap: var(--s-5); margin-bottom: var(--s-8); } .standards__title { font-size: var(--fs-h1); line-height: 0.95; } .standards__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); } .standard { display: grid; align-content: start; gap: var(--s-4); padding: var(--s-6) var(--s-5) var(--s-6) 0; } .standard + .standard { padding-left: var(--s-5); border-left: 1px solid var(--line); } .standard__icon { width: 28px; height: 28px; color: var(--accent-text); } .standard__title { font-size: clamp(1.8rem, 2.4vw, 2.6rem); line-height: 1; } .standard__text { color: var(--text-muted); font-size: 0.9375rem; } @media (max-width: 1023.98px) { .standards__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .standard:nth-child(3) { padding-left: 0; border-left: 0; } .standard:nth-child(n + 3) { border-top: 1px solid var(--line); } } @media (max-width: 639.98px) { .standards__list { grid-template-columns: minmax(0, 1fr); } .standard + .standard { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } } .warranty__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-7); } .warranty__head { grid-column: 1 / span 5; display: grid; align-content: start; gap: var(--s-6); } .warranty__title { font-size: var(--fs-h2); line-height: 1; } .warranty__tabs { flex-direction: column; gap: 6px; overflow: visible; padding: 0; } .warranty__tabs .tabs__tab { text-align: left; font-size: clamp(1.4rem, 2vw, 2rem); padding: 6px 0; } .warranty__tabs .tabs__tab::before { content: ""; display: inline-block; width: 0; height: 1px; margin-right: 0; vertical-align: middle; background: var(--accent); transition: width 0.5s var(--ease-out), margin 0.5s var(--ease-out); } .warranty__tabs .tabs__tab.is-active::before { width: 28px; margin-right: 14px; } .warranty__tabs .tabs__ink { display: none; } .warranty__panels { grid-column: 7 / -1; } .wlist { border-top: 1px solid var(--line-strong); } .wlist__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--s-5); padding: 18px 0; border-bottom: 1px solid var(--line); } .wlist__row dt { color: var(--text-muted); } .wlist__row dd { font: 400 1.6rem/1 var(--font-display); white-space: nowrap; } .wlist__row.is-none dd { font: 500 var(--fs-small)/1.4 var(--font-text); color: var(--text-faint); } .warranty__terms { display: grid; gap: 10px; margin-top: var(--s-6); padding-left: 1.1em; font-size: var(--fs-small); color: var(--text-muted); list-style: disc; } @media (max-width: 1023.98px) { .warranty__head, .warranty__panels { grid-column: 1 / -1; } .warranty__tabs { flex-direction: row; overflow-x: auto; gap: 22px; padding-bottom: 8px; } .warranty__tabs .tabs__tab { white-space: nowrap; font-size: 1.3rem; } .warranty__tabs .tabs__tab.is-active::before { width: 16px; margin-right: 8px; } } .network { position: relative; isolation: isolate; min-height: 92svh; display: grid; align-items: end; overflow: hidden; } .network__media { position: absolute; inset: 0; z-index: -1; margin: 0; background: var(--media-bg); } .network__parallax { position: absolute; inset: -12% 0; } .network__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .network__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 36 59 / 90%), rgb(0 36 59 / 60%) 50%, rgb(0 36 59 / 20%)); } .network__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; padding-block: calc(var(--section) + var(--header-h)) var(--section-sm); } .network__big { grid-column: 1 / span 6; font: 400 clamp(8rem, 22vw, 26rem)/0.78 var(--font-display); letter-spacing: -0.05em; color: rgb(255 255 255 / 7%); -webkit-text-stroke: 1px rgb(255 255 255 / 78%); } .network__big span { color: var(--accent); -webkit-text-stroke: 0; } .network__body { grid-column: 7 / -1; display: grid; gap: var(--s-5); } .network__title { font-size: var(--fs-h2); line-height: 1; } .network__text { color: var(--text-muted); max-width: 46ch; } .network__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); margin-top: var(--s-3); } @media (max-width: 1023.98px) { .network__big, .network__body { grid-column: 1 / -1; } .network__big { margin-bottom: var(--s-6); } } .contact-hero { padding-bottom: var(--s-8); } .contact-hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-7); align-items: stretch; } .contact-hero__copy { grid-column: 1 / span 7; display: grid; align-content: start; gap: var(--s-6); } .contact-hero__title { margin-top: var(--s-6); font-size: clamp(4.4rem, 14vw, 15rem); line-height: 0.82; letter-spacing: -0.04em; } .contact-hero__text { max-width: 46ch; color: var(--text-muted); font-size: var(--fs-lead); line-height: 1.55; } .ways { margin-top: var(--s-5); border-top: 1px solid var(--line-strong); } .way { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); padding: clamp(18px, 2vw, 26px) 0; border-bottom: 1px solid var(--line-strong); transition: padding 0.6s var(--ease-out); } .way:hover { padding-left: var(--s-4); } .way__label { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-small); color: var(--text-muted); } .way__label .icon { width: 18px; height: 18px; } .way__value { font: 400 clamp(1.6rem, 2.6vw, 2.8rem)/1.05 var(--font-display); letter-spacing: -0.015em; overflow-wrap: anywhere; } .way__go { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong); transition: background-color 0.4s var(--ease-out), color 0.4s, transform 0.6s var(--ease-out); } .way__go .icon { width: 18px; height: 18px; } .way:hover .way__go { background: var(--text); color: var(--bg); transform: rotate(45deg); } .contact-hero__media { position: relative; grid-column: 8 / -1; margin: 0; min-height: 560px; overflow: hidden; background: var(--media-bg); } .contact-hero__parallax { position: absolute; inset: -8% 0; } .contact-hero__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } @media (max-width: 1023.98px) { .contact-hero__copy, .contact-hero__media { grid-column: 1 / -1; } .contact-hero__media { min-height: 0; aspect-ratio: 4 / 3; } .way { grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--s-4); } .way__label, .way__value { grid-column: 1; } .way__go { grid-column: 2; grid-row: 1 / 3; } } .contact { border-top: 1px solid var(--line); } .contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-8); } .contact__aside { grid-column: 1 / span 4; } .contact__sticky { position: sticky; top: calc(var(--header-h) + 28px); display: grid; gap: var(--s-6); transition: top 0.7s var(--ease-out); } .header-hidden .contact__sticky { top: 28px; } .contact__big { font: 400 1.6rem/1.25 var(--font-display); margin-bottom: 8px; } .contact__address .flink { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: 500; } .contact__address .icon { width: 15px; height: 15px; } .contact__facts { display: grid; gap: var(--s-4); } .contact__facts div { display: grid; gap: 2px; } .contact__facts dt { font-size: var(--fs-micro); color: var(--text-faint); } .hours { padding: var(--s-5) 0; border-block: 1px solid var(--line); } .hours__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--s-3); font-weight: 600; } .hours__status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-micro); font-weight: 500; color: var(--text-muted); } .hours__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); } .hours__status.is-open::before { background: var(--success); box-shadow: 0 0 0 4px rgb(63 143 85 / 18%); } .hours__status.is-closed::before { background: var(--error); } .hours dl { display: grid; gap: 6px; font-size: var(--fs-small); } .hours dl div { display: flex; justify-content: space-between; gap: 16px; } .hours dt { color: var(--text-muted); } .contact__form { grid-column: 6 / -1; } .contact__form-head { display: grid; gap: var(--s-4); margin-bottom: var(--s-7); } .contact__title { font-size: var(--fs-h2); line-height: 1; } .contact__text { color: var(--text-muted); } .contact__done { display: grid; justify-items: start; gap: var(--s-5); padding-block: var(--s-6); } @media (max-width: 1023.98px) { .contact__aside, .contact__form { grid-column: 1 / -1; } .contact__aside { order: 2; } .contact__sticky { position: static; } } .mapband { padding-bottom: var(--section-sm); } .map { position: relative; height: clamp(380px, 56vh, 620px); margin-inline: var(--gutter); overflow: hidden; background: var(--porcelain-200); } .map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.5) contrast(1.05); } .map__placeholder { position: absolute; inset: 0; } .map__lines { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgb(0 72 116 / 14%); stroke-width: 1; } .map__road { stroke: rgb(0 72 116 / 22%); stroke-width: 6; stroke-linecap: round; } .map__pin { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--accent); } .map__pin span { position: absolute; inset: -14px; border-radius: 50%; border: 1px solid var(--accent); animation: pin-pulse 2.6s var(--ease-out) infinite; } @keyframes pin-pulse { from { transform: scale(0.4); opacity: 1; } to { transform: scale(2.2); opacity: 0; } } .map__card { position: absolute; left: var(--s-6); bottom: var(--s-6); display: grid; gap: 10px; width: min(420px, calc(100% - 2 * var(--s-6))); padding: var(--s-6); background: var(--porcelain-50); box-shadow: var(--shadow-lift); } .map__name { font: 400 1.6rem/1.1 var(--font-display); } .map__addr { font-size: var(--fs-small); color: var(--text-muted); } .map__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); margin-top: var(--s-3); } @media (max-width: 639.98px) { .map { margin-inline: 0; height: auto; min-height: 460px; } .map__card { left: var(--gutter); right: var(--gutter); bottom: var(--gutter); width: auto; } } .lost { min-height: 88svh; padding-bottom: var(--section-sm); } .lost__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-7); align-items: center; } .lost__copy { grid-column: 1 / span 6; display: grid; gap: var(--s-5); } .lost__code { font-size: var(--fs-small); color: var(--text-muted); } .lost__title { font-size: var(--fs-h1); line-height: 0.92; } .lost__text { color: var(--text-muted); max-width: 46ch; } .lost__search { display: flex; align-items: center; gap: var(--s-4); max-width: 520px; border-bottom: 1px solid var(--line-strong); } .lost__search input { flex: 1; min-width: 0; height: 64px; border: 0; background: none; outline: none; font: 400 1.6rem/1 var(--font-display); color: var(--text); } .lost__actions { margin-top: var(--s-3); } .lost__art { grid-column: 8 / -1; position: relative; margin: 0; display: grid; place-items: center; min-height: 420px; } .lost__num { display: flex; font: 400 clamp(8rem, 22vw, 24rem)/0.8 var(--font-display); letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1.5px var(--text-faint); } .lost__num span { color: var(--text); -webkit-text-stroke: 0; font-style: italic; } .lost__piece { position: absolute; right: 2%; bottom: -4%; width: 30%; aspect-ratio: 1 / 1; background: var(--stage); display: grid; place-items: center; transform: rotate(-10deg); box-shadow: var(--shadow-lift); } .lost__piece img { width: 80%; height: 80%; object-fit: contain; mix-blend-mode: multiply; transform: rotate(90deg); } @media (max-width: 1023.98px) { .lost__copy, .lost__art { grid-column: 1 / -1; } .lost__art { grid-row: 1; min-height: 260px; } } .ds-nav { margin-top: var(--s-7); } .ds { display: grid; gap: var(--section-sm); padding-bottom: var(--section); } .ds-block { display: grid; gap: var(--s-6); padding-top: var(--s-7); border-top: 1px solid var(--line-strong); } .ds-block__head { display: grid; gap: var(--s-4); } .ds-block__note { max-width: 70ch; color: var(--text-muted); font-size: 0.9375rem; } .ds-sub { font-size: 1.5rem; margin-top: var(--s-4); } .ds-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s-4); } .ds-swatch { display: grid; gap: 6px; font-size: var(--fs-small); } .ds-swatch span { height: 88px; border: 1px solid var(--line); } .ds-swatch code, .ds-label code, .ds-block code { font-size: var(--fs-micro); color: var(--text-faint); } .ds-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-4); } .ds-theme { display: grid; gap: var(--s-4); padding: var(--s-5); border: 1px solid var(--line); } .ds-theme__name { font: 400 1.6rem/1 var(--font-display); text-transform: capitalize; } .ds-theme__text { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .ds-type { display: grid; } .ds-type__row { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: var(--s-5); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); overflow: hidden; } .ds-type__row p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ds-label { display: grid; gap: 2px; font-size: var(--fs-small); color: var(--text-muted); } .ds-space { display: grid; gap: 10px; } .ds-space__row { display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: var(--s-4); } .ds-space__row span { height: 10px; background: var(--accent); } .ds-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); } .ds-grid span { height: 64px; display: grid; place-items: end center; padding-bottom: 6px; background: rgb(245 139 38 / 10%); font-size: var(--fs-micro); color: var(--accent-text); } .ds-motion { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-5); } .ds-ease { display: grid; gap: 8px; font-size: var(--fs-small); color: var(--text-muted); } .ds-ease__track { position: relative; height: 34px; border-bottom: 1px solid var(--line-strong); } .ds-ease__dot { position: absolute; left: 0; bottom: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--text); transition: left 1.4s; } .ds-ease:hover .ds-ease__dot { left: calc(100% - 12px); } .ds-reveal { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); align-items: end; } .ds-reveal__title { font-size: var(--fs-h2); line-height: 1; } .ds-reveal__pic { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--media-bg); } .ds-reveal__pic img { width: 100%; height: 100%; object-fit: contain; } .ds-reveal__pic[data-fit="cutout"] { background: var(--stage); } .ds-reveal__pic[data-fit="cutout"] img { padding: 10%; mix-blend-mode: multiply; } .ds-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .ds-row--dark { padding: var(--s-6); } .ds-form { max-width: 760px; } .ds-tabs { max-width: 420px; } .ds-states { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: var(--s-6); } .ds-state { display: grid; gap: var(--s-4); align-content: start; padding: var(--s-5); border: 1px solid var(--line); } .ds-state .state { padding-block: var(--s-4); } .ds-state .state__title { font-size: 2rem; } .ds-img-states { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); } .ds-img-states .pcard__media { display: block; } .ds-done { display: grid; gap: var(--s-4); justify-items: start; } .ds-404 { display: grid; gap: var(--s-4); justify-items: start; } .ds-404 .lost__num { font-size: 6rem; } .ds-404 p { font: 400 1.6rem/1.1 var(--font-display); } .ds-mark { width: 34px; height: 42px; } .ds-mark .mark__house { fill: var(--navy-700); } @media (max-width: 767.98px) { .ds-type__row { grid-template-columns: minmax(0, 1fr); } .ds-reveal { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 767.98px) { .index__name { font-size: clamp(1.85rem, 8vw, 3.6rem); } .ntile__name { font-size: 1.5rem; } .shero__input { font-size: clamp(2rem, 8vw, 8rem); } .sresults__head strong { font-size: 1.7rem; } .story-hero__title { font-size: clamp(2.6rem, 9.6vw, 11rem); } .milestone__marker { font-size: clamp(3.2rem, 9vw, 10rem); } .milestone__title { font-size: 1.6rem; } .made__fact dd { font-size: clamp(2.1rem, 4.6vw, 5rem); } .vm__word { font-size: clamp(4.4rem, 13vw, 15rem); } .value__title { font-size: clamp(1.7rem, 4vw, 4.2rem); } .standard__title { font-size: 1.55rem; } .network__big { font-size: clamp(5.5rem, 22vw, 26rem); } .contact-hero__title { font-size: clamp(2.6rem, 11.5vw, 15rem); } .way__value { font-size: 1.4rem; } .lost__num { font-size: clamp(5.5rem, 22vw, 24rem); } .lost { min-height: 0; } .vm__item { min-height: 0; padding-top: 80px; } } } @layer pages { .cms-head, .rtext__head, .figures__head, .vband__head, .gband__head, .voices__head, .pband__head { display: grid; gap: var(--s-5); margin-bottom: var(--s-8); } .cms-head__title, .rtext__head__title, .figures__head__title, .vband__head__title, .gband__head__title, .voices__head__title, .pband__head__title { font-size: var(--fs-h1); line-height: 0.95; max-width: 14ch; } .cms-head__text, .vband__head__text, .pband__head__text { max-width: 52ch; color: var(--text-muted); font-size: var(--fs-lead); } .rtext { border-top: 1px solid var(--line); } .rtext__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); } .rtext__head { grid-column: 1 / span 5; align-self: start; } .rtext__body { grid-column: 7 / -1; } .rtext__body:only-child { grid-column: 3 / span 8; } .rtext__body h3, .rtext__body h4, .rtext__body h5 { margin-top: 0.6em; font-size: var(--fs-h4); line-height: var(--lh-heading); } .rtext__body ul, .rtext__body ol { display: grid; gap: 0.5em; max-width: 64ch; padding-left: 1.2em; font-size: 1.0625rem; line-height: 1.7; } .rtext__body ul { list-style: none; padding-left: 0; } .rtext__body ul li { position: relative; padding-left: 1.4em; } .rtext__body ul li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 0.6em; height: 1px; background: var(--accent); } .rtext__body strong { font-weight: 600; } @media (max-width: 1023.98px) { .rtext__head, .rtext__body, .rtext__body:only-child { grid-column: 1 / -1; } } .imgtext { min-height: min(100svh, 920px); } .imgtext--right .made__media { order: 2; } .imgtext--right .made__body { padding-left: var(--gutter); padding-right: clamp(32px, 5vw, 96px); } .imgtext--light { border-top: 1px solid var(--line); } .imgtext__link { margin-top: var(--s-2); } .imgtext .made__text + .made__text { margin-top: calc(-1 * var(--s-3)); } @media (max-width: 1023.98px) { .imgtext--right .made__media { order: 0; } .imgtext--right .made__body { padding-left: var(--gutter); padding-right: var(--gutter); } } .figures { border-top: 1px solid var(--line); } .figures .stats { --cols: 4; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); margin-block: 0; } @media (max-width: 1023.98px) { .figures .stats { grid-template-columns: repeat(min(2, var(--cols)), minmax(0, 1fr)); } } .vband__frame { position: relative; margin: 0; aspect-ratio: var(--ratio, 16 / 9); overflow: hidden; background: var(--media-bg, var(--ink-900)); } .vband__video { display: block; width: 100%; height: 100%; object-fit: cover; } .vband__caption { margin-top: var(--s-4); font-size: var(--fs-small); color: var(--text-muted); } .gtile { margin: 0; } .gtile .ctile__media { aspect-ratio: 4 / 5; } @media (min-width: 1024px) { .slider--gallery { --item: calc((100% - 2 * var(--col-gap)) / 2.6); } } .voices { border-top: 1px solid var(--line); } .slider--voices { --item: 86vw; } @media (min-width: 768px) { .slider--voices { --item: 62vw; } } @media (min-width: 1024px) { .slider--voices { --item: calc((100% - var(--col-gap)) / 1.8); } } .voice { display: grid; align-content: start; gap: var(--s-5); margin: 0; padding-top: var(--s-6); border-top: 1px solid var(--line-strong); } .voice__mark { width: 40px; height: 40px; color: var(--accent); } .voice__quote { margin: 0; font: 400 var(--fs-h3)/1.12 var(--font-display); letter-spacing: var(--track-display); } .voice__by { display: grid; gap: 4px; font-size: var(--fs-small); } .voice__by span { color: var(--text-muted); } .finale--cta { min-height: min(86svh, 820px); } .finale--plain { min-height: 0; background: var(--bg); } .finale--plain .finale__inner { padding-block: var(--section); } .pband { border-top: 1px solid var(--line); } .pband__foot { margin-top: var(--s-7); } .site-nav__item { position: relative; } .site-nav .site-nav__sub { position: absolute; top: 100%; left: -18px; z-index: 2; display: grid; gap: 0; min-width: 240px; padding: 10px 0; margin-top: 10px; background: var(--porcelain-50); color: var(--text-ink); border: 1px solid var(--line); box-shadow: var(--shadow-float); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.3s var(--ease-out), transform 0.4s var(--ease-out), visibility 0s linear 0.4s; } .site-nav .site-nav__sub::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px; } .site-nav .has-sub:hover > .site-nav__sub, .site-nav .has-sub:focus-within > .site-nav__sub, .site-nav .has-sub.is-open > .site-nav__sub { opacity: 1; visibility: visible; transform: none; transition: opacity 0.3s var(--ease-out), transform 0.4s var(--ease-out), visibility 0s; } .site-nav .site-nav__sub .has-sub { position: relative; } .site-nav .site-nav__sub .site-nav__sub { top: -11px; left: 100%; margin: 0 0 0 4px; } .site-nav__link { display: grid; gap: 2px; padding: 9px 18px; font: 500 0.9375rem/1.2 var(--font-text); white-space: nowrap; transition: background-color 0.3s var(--ease-out), color 0.3s; } .site-nav__link small { font-weight: 400; font-size: var(--fs-micro); color: var(--text-muted); white-space: normal; } a.site-nav__link:hover { background: var(--porcelain-200); color: var(--accent-text); } .site-nav__link--head { color: var(--text-muted); font-size: var(--fs-small); } .site-nav .has-sub > .nav-link { padding-right: 14px; } .site-nav .has-sub > .nav-link::before { content: ""; position: absolute; right: 0; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.6; } .preview-mark { position: fixed; left: 50%; bottom: 14px; z-index: var(--z-toast); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: var(--r-pill); background: var(--ink-900); color: var(--porcelain-50); font: 500 var(--fs-micro)/1 var(--font-text); letter-spacing: 0.04em; box-shadow: var(--shadow-lift); text-decoration: none; } .preview-mark:hover { background: var(--ink-800); } .preview-mark::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .form__hp { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } @layer motion { .js [data-reveal] { transition: opacity 1.1s var(--ease-out), transform 1.3s var(--ease-out), clip-path 1.4s var(--ease-in-out); transition-delay: calc(var(--i, 0) * var(--stagger)); } .js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(42px); } .js [data-reveal="fade"]:not(.is-in) { transform: none; } .js [data-reveal="scale"]:not(.is-in) { transform: scale(0.94); } .js [data-reveal="clip"]:not(.is-in) { opacity: 1; transform: none; } .js [data-reveal="clip"]::after { content: ""; position: absolute; inset: -1px; z-index: 3; background: var(--bg); transform-origin: 50% 0; transition: transform 1.35s var(--ease-in-out); transition-delay: calc(var(--i, 0) * var(--stagger)); pointer-events: none; } .js [data-reveal="clip"].is-in::after { transform: scaleY(0); } .js [data-reveal="clip"] > img { transition: transform 2s var(--ease-out), opacity 0.9s var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger)); } .js [data-reveal="clip"]:not(.is-in) > .echo, .js [data-reveal="clip"][data-fit="cutout"]:not(.is-in) > img { transform: scale(1.22); } .js [data-reveal="line"] { transform-origin: 0 50%; } .js [data-reveal="line"]:not(.is-in) { opacity: 1; transform: scaleX(0); } .w { display: inline-block; vertical-align: top; overflow: hidden; padding: 0.1em 0.06em 0.14em; margin: -0.1em -0.06em -0.14em; } .w__i { display: inline-block; transition: transform 1.25s var(--ease-out); transition-delay: calc(min(var(--wi), 14) * 52ms + var(--delay, 0ms)); } .js [data-split]:not(.is-in) .w__i, .js:not(.is-ready) [data-split-now] .w__i { transform: translateY(112%); } @keyframes fade-in { from { opacity: 0; } } @keyframes fade-out { to { opacity: 0; } } @keyframes fade-up { from { opacity: 0; transform: translateY(24px); } } @keyframes rise { to { transform: none; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes shimmer { to { transform: translateX(100%); } } @keyframes draw { to { stroke-dashoffset: 0; } } @keyframes card-in { from { opacity: 0; transform: translateY(36px); } } @keyframes drawer-in { from { transform: translateX(100%); } } @keyframes drawer-out { to { transform: translateX(100%); } } @keyframes drawer-in-left { from { transform: translateX(-100%); } } @keyframes drawer-out-left { to { transform: translateX(-100%); } } @keyframes sheet-in { from { transform: translateY(100%); } } @keyframes sheet-out { to { transform: translateY(100%); } } @keyframes curtain-down { from { transform: scaleY(0); } } @keyframes curtain-up { to { transform: scaleY(0); transform-origin: 50% 0; } } @keyframes toast-in { from { opacity: 0; transform: translateY(18px) scale(0.96); } } @keyframes toast-out { to { opacity: 0; transform: translateY(10px); } } @keyframes lb-in { from { opacity: 0; transform: scale(0.96); } } @keyframes arrow-out-in { 0% { transform: none; } 45% { transform: translate(130%, -130%); } 46% { transform: translate(-130%, 130%); } 100% { transform: none; } } @keyframes mark-roof { from { opacity: 0; transform: translate(-10px, -14px); } to { opacity: 1; transform: none; } } @keyframes mark-house { from { opacity: 0; transform: translate(12px, -8px); } to { opacity: 1; transform: none; } } @keyframes mark-door { from { opacity: 0; transform: translate(0, 16px); } to { opacity: 1; transform: none; } } @keyframes loader-lift { to { transform: translateY(-100%); } } @keyframes loader-fallback { to { visibility: hidden; opacity: 0; } } @keyframes hero-light { from { transform: translate3d(-6%, -4%, 0) scale(1); } to { transform: translate3d(6%, 4%, 0) scale(1.15); } } @keyframes scroll-line { 0% { transform: scaleY(0); transform-origin: 50% 0; } 45% { transform: scaleY(1); transform-origin: 50% 0; } 55% { transform: scaleY(1); transform-origin: 50% 100%; } 100% { transform: scaleY(0); transform-origin: 50% 100%; } } @keyframes vt-old { to { transform: translateY(-7vh) scale(0.985); opacity: 0.3; } } @keyframes vt-new { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } } @keyframes vt-fade-out { to { opacity: 0; } } @view-transition { navigation: auto; } ::view-transition-old(root) { animation: vt-old 0.95s var(--ease-in-out) both; } ::view-transition-new(root) { animation: vt-new 0.95s var(--ease-in-out) both; } ::view-transition-group(site-header) { z-index: 20; } ::view-transition-group(cursor) { z-index: 30; animation: none; } ::view-transition-group(product-media), ::view-transition-group(category-media) { z-index: 10; animation-duration: 0.95s; animation-timing-function: var(--ease-in-out); } ::view-transition-old(product-media), ::view-transition-new(product-media), ::view-transition-old(category-media), ::view-transition-new(category-media) { height: 100%; object-fit: cover; animation-duration: 0.95s; } .calm [data-reveal], .js-failed [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; } .calm [data-reveal="clip"]::after, .js-failed [data-reveal="clip"]::after { display: none; } .calm [data-reveal] > img, .js-failed [data-reveal] > img { transform: none !important; } .calm .w__i, .js-failed .w__i { transform: none !important; } .js-failed .loader { display: none !important; } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } } }