/* Avenue Design Company: the full site. Loaded after assets/kit/kit.css. The first half is shared with the launch page (clients/avenue/launch/css/launch.css); keep the two in step. Palette is read off the storefront: cream stucco, black awning and lettering, topiary green, roof-tile clay. Scroll scenes are pure functions of --p (kit.js). */ @font-face { font-family: 'Gambetta'; src: url('../assets/fonts/gambetta/gambetta-variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Gambetta'; src: url('../assets/fonts/gambetta/gambetta-variableitalic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: 'Hanken Grotesk'; src: url('../assets/fonts/hanken-grotesk/hanken-grotesk-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } :root { --ink: #1a1917; --ink-2: #26241f; --stucco: #e7dece; --paper: #f6f1e7; --moss: #4a5a43; --moss-deep: #37442f; --sage: #b8c7af; --clay: #a8563a; --soft: #5d574d; --serif: 'Gambetta', 'Iowan Old Style', Georgia, serif; --sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --pad: clamp(20px, 3.4vw, 56px); --nav-h: 64px; --ease: cubic-bezier(.2, .7, .2, 1); } html { scroll-padding-top: var(--nav-h); } body { font-family: var(--sans); font-size: 17px; line-height: 1.6; font-weight: 400; color: var(--ink); background: var(--stucco); } h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -.015em; text-wrap: balance; } h2 { font-size: clamp(36px, min(4.6vw, 8.4vh), 72px); line-height: 1.02; } h2 em, h1 em { font-style: italic; } h3 { font-size: clamp(24px, 2.1vw, 32px); line-height: 1.12; } p { margin: 0; } a { color: inherit; } .wrap { width: min(100% - 2 * var(--pad), 1360px); margin-inline: auto; } .label { font-size: 14px; font-weight: 600; letter-spacing: .01em; color: var(--moss); margin-bottom: 14px; } .label--sage { color: var(--sage); } .note { font-size: 14px; color: var(--soft); } /* ── Buttons ───────────────────────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border-radius: 999px; border: 1.5px solid transparent; font-size: 16px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); } .btn:hover { transform: translateY(-2px); } .btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; } .btn--small { min-height: 40px; padding: 0 18px; font-size: 15px; } .btn--moss { background: var(--moss); color: var(--paper); } .btn--moss:hover { background: var(--moss-deep); } .btn--paper { background: var(--paper); color: var(--ink); } .btn--paper:hover { background: #fff; } .btn--ink { background: var(--ink); color: var(--paper); } .btn--ink:hover { background: #000; } .btn--line { border-color: rgba(246, 241, 231, .45); color: var(--paper); } .btn--line:hover { border-color: var(--paper); } .btn--line-ink { border-color: rgba(26, 25, 23, .4); color: var(--ink); } .btn--line-ink:hover { border-color: var(--ink); } /* ── Nav ───────────────────────────────────────────────────────────────────────────────────── */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h); padding: 0 var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--paper); background: rgba(26, 25, 23, 0); transition: background-color .3s var(--ease); } .nav.is-solid { background: var(--ink); } .nav__tel-word { display: none; } .nav__brand { font-family: var(--serif); font-size: 26px; line-height: 1; text-decoration: none; letter-spacing: -.01em; } .nav__brand em { font-style: italic; } .nav__logo { display: block; height: 40px; width: auto; } .nav__links { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); font-size: 15px; font-weight: 500; } .nav__links a:not(.btn) { text-decoration: none; opacity: .86; } .nav__links a:not(.btn):hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; } /* ── Hero: the storefront in its own arch, the store's line split around it ─────────────────── */ .hero { --arch-w: min(30vw, calc((100svh - var(--nav-h) - 84px) * 9 / 16)); position: relative; min-height: max(100svh, 600px); padding: calc(var(--nav-h) + 20px) var(--pad) 0; display: grid; grid-template-columns: 1fr var(--arch-w) 1fr; grid-template-rows: 1fr 1fr; column-gap: clamp(22px, 3vw, 48px); background: var(--ink); color: var(--paper); overflow: hidden; } .hero__h { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: subgrid; align-items: end; padding-bottom: clamp(12px, 2.4vh, 26px); font-size: clamp(48px, min(7.6vw, 16vh), 136px); line-height: .92; letter-spacing: -.025em; } .hero__a { grid-column: 1; text-align: right; } .hero__b { grid-column: 3; text-align: left; color: var(--sage); } .hero__arch { grid-column: 2; grid-row: 1 / span 2; align-self: end; width: 100%; aspect-ratio: 9 / 16; border-radius: 999px 999px 0 0; background: var(--ink-2); z-index: 1; box-shadow: 0 0 0 5px rgba(246, 241, 231, .1); } /* the ringed arch of the LandingHero source */ .hero__left { grid-column: 1; grid-row: 2; justify-self: end; text-align: right; max-width: 30ch; padding-top: clamp(10px, 2vh, 22px); } .hero__sub { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; color: rgba(246, 241, 231, .8); } .hero__ctas { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 22px; } .hero__sub { text-wrap: pretty; } .hero__arch img { transition: transform 2.4s var(--ease); } html.motion-ok:not(.is-ready) .hero__arch img { transform: scale(1.07); } .hero__right { grid-column: 3; grid-row: 2; padding-top: clamp(10px, 2vh, 22px); display: grid; gap: clamp(14px, 2.4vh, 22px); align-content: start; justify-items: start; } .hero__facts { margin: 0; display: grid; gap: 10px; } .hero__facts dt, .facts dt { font-size: 14px; font-weight: 600; color: var(--sage); } .hero__facts dd { margin: 0; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.35; } /* the CTA card of the LandingHero source: a solid block, small label over a serif line, an arrow in a circle */ .cta-card { position: relative; display: grid; gap: 4px; width: min(100%, 340px); padding: clamp(16px, 2.4vh, 22px) 76px clamp(16px, 2.4vh, 22px) 22px; background: var(--moss); color: var(--paper); text-decoration: none; transition: background-color .3s var(--ease), transform .3s var(--ease); } .cta-card:hover { background: var(--moss-deep); transform: translateY(-2px); } .cta-card__label { font-size: 14px; font-weight: 600; color: var(--sage); } .cta-card__title { font-family: var(--serif); font-size: clamp(22px, 1.9vw, 28px); line-height: 1.1; } .cta-card__go { position: absolute; right: 18px; top: 50%; width: 42px; height: 42px; margin-top: -21px; display: grid; place-items: center; border-radius: 50%; background: rgba(26, 25, 23, .28); transition: transform .3s var(--ease); } .cta-card:hover .cta-card__go { transform: translate3d(3px, -3px, 0); } /* entrance: only under motion-ok and before is-ready (the kit contract) */ .hero__arch, .hero__a, .hero__b, .hero__left, .hero__right { transition: opacity .9s var(--ease), transform .9s var(--ease); } .hero__left, .hero__right { transition-delay: .18s; } html.motion-ok:not(.is-ready) .hero__arch { opacity: 0; transform: translate3d(0, 40px, 0); } html.motion-ok:not(.is-ready) .hero__a { opacity: 0; transform: translate3d(24px, 0, 0); } html.motion-ok:not(.is-ready) .hero__b { opacity: 0; transform: translate3d(-24px, 0, 0); } html.motion-ok:not(.is-ready) .hero__left, html.motion-ok:not(.is-ready) .hero__right { opacity: 0; } /* ── The wall: four pictures of the floor, edge to edge; the one under the pointer opens ───────── After 21st.dev "Hover Expand Gallery": flex-basis is what animates, on its 620 ms curve. */ .wall { background: var(--ink); color: var(--paper); padding-bottom: clamp(18px, 2.4vw, 30px); } .hx { list-style: none; margin: 0; padding: 0; display: flex; height: min(72vh, 46vw); min-height: 320px; overflow: hidden; } .hx__panel { flex: 1 1 0; min-width: 0; transition: flex-grow .62s cubic-bezier(.32, .72, 0, 1), opacity .7s var(--ease), transform .7s var(--ease); transition-delay: 0s, var(--d, 0s), var(--d, 0s); } .hx__panel.is-open { flex-grow: 1.9; } .hx__btn { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--ink-2); overflow: hidden; } .hx__btn img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) brightness(.82); transition: filter .62s var(--ease), transform 1.2s var(--ease); } .hx__panel.is-open .hx__btn img { filter: none; transform: scale(1.03); } .hx__btn:focus-visible { outline-offset: -4px; } .hx__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-top: clamp(14px, 1.8vw, 22px); } .hx__cap b { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 1.9vw, 28px); } .hx__cap span { color: rgba(246, 241, 231, .72); font-size: 16px; } [data-reveal] { transition-delay: var(--d, 0s); } @media (prefers-reduced-motion: reduce) { .hx__panel { transition: none; } } /* ── The statement: the store's own description, lit word by word as it scrolls ───────────────── After 21st.dev "Text Reveal" (Magic UI). kit.js writes --p on the section; launch.js splits the words. */ .say-scene { background: var(--stucco); padding-block: clamp(56px, 8vw, 120px); } .say { font-family: var(--serif); font-size: clamp(30px, min(4.8vw, 9vh), 84px); line-height: 1.12; letter-spacing: -.015em; max-width: 34ch; text-wrap: balance; } html.motion-ok .say-scene { height: 190vh; padding-block: 0; } html.motion-ok .say-scene__stage { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); display: grid; align-content: center; } .say.is-split .say__w { opacity: clamp(.2, calc(var(--p) * (var(--n) + 4) - var(--i)), 1); } /* ── The studio: three steps, each under its own arch ─────────────────────────────────────── */ .studio { background: var(--paper); padding-block: clamp(56px, 7vw, 100px); } .studio__stage { display: grid; gap: clamp(28px, 4vw, 48px); grid-template-columns: repeat(3, 1fr); } .studio__head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 40px; } .studio__head h2 { max-width: 15ch; } .step { display: grid; gap: 18px; align-content: start; } .studio .step figure { aspect-ratio: 4 / 5; border-radius: 999px 999px 0 0; } /* numbered circles on one connector line, after 21st.dev "How It Works Steps" */ .step__text { position: relative; display: grid; gap: 8px; padding-top: 44px; } .step__text::before { content: ''; position: absolute; left: 0; right: calc(-1 * clamp(28px, 4vw, 48px)); top: 22px; height: 1px; background: rgba(26, 25, 23, .2); } .step:last-child .step__text::before { right: 0; } .step__n { position: absolute; left: 0; top: 0; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(26, 25, 23, .28); background: var(--paper); font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1; color: var(--clay); } .step__text p { color: var(--soft); max-width: 40ch; } /* ── The floor: an uneven two-column board of what the store carries ─────────────────────────── */ .floor { background: var(--ink); color: var(--paper); padding-block: clamp(56px, 7vw, 104px); } .floor__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: start; } .floor__col { display: grid; gap: clamp(36px, 5vw, 72px); } .floor__head { padding-top: clamp(0px, 4vw, 60px); } .floor__head h2 { max-width: 14ch; } .floor__lede { margin-top: 20px; max-width: 44ch; color: rgba(246, 241, 231, .76); } .floor__pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 32px); } .tile { margin: 0; } .tile__media { aspect-ratio: 3 / 4; overflow: hidden; position: relative; background: var(--ink-2); } /* tiles lift and zoom on hover and open larger, after 21st.dev "Masonry Lightbox" */ .tile__open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; } .tile__open > img, .tile__open > video { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transition: transform .7s var(--ease); } .tile__open:hover > img, .tile__open:hover > video, .tile__open:focus-visible > img, .tile__open:focus-visible > video { transform: scale(1.05); } .tile__open:focus-visible { outline-offset: -4px; } .tile__open:disabled { cursor: default; } .tile__media { transition: transform .4s var(--ease); } .tile:hover .tile__media { transform: translate3d(0, -3px, 0); } html.is-locked { overflow: hidden; } .lightbox { padding: 0; border: 0; background: transparent; color: var(--paper); max-width: none; max-height: none; overflow: visible; } .lightbox::backdrop { background: rgba(14, 13, 12, .82); backdrop-filter: blur(14px); } .lightbox__frame { background: var(--ink-2); } .lightbox__frame img, .lightbox__frame video { display: block; width: auto; height: auto; max-width: min(90vw, 620px); max-height: 78vh; } .lightbox__cap { width: 0; min-width: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding-top: 12px; max-width: min(90vw, 620px); } .lightbox__cap b { font-family: var(--serif); font-weight: 400; font-size: 24px; } .lightbox__cap span { color: rgba(246, 241, 231, .78); font-size: 16px; } .lightbox__close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(14, 13, 12, .55); color: #fff; } .lightbox__close:hover { background: rgba(14, 13, 12, .8); } .lightbox[open] { animation: lightbox-in .32s var(--ease); } @keyframes lightbox-in { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.98); } } .tile--tall .tile__media { aspect-ratio: 9 / 14; border-radius: 999px 999px 0 0; } .tile--square .tile__media { aspect-ratio: 1 / 1; } .tile figcaption { padding-top: 14px; } .tile figcaption p { color: rgba(246, 241, 231, .7); font-size: 16px; margin-top: 4px; max-width: 40ch; } /* ── Visit: the storefront photograph bleeds to the edge ────────────────────────────────────── */ .visit { background: var(--stucco); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } .visit .visit__photo { min-height: 100%; aspect-ratio: auto; } .visit__photo img { position: absolute; inset: 0; } .visit__body { padding: clamp(56px, 8vw, 120px) var(--pad) clamp(56px, 8vw, 110px) clamp(28px, 6vw, 96px); } .facts { margin: clamp(24px, 3vw, 40px) 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 18px clamp(24px, 4vw, 56px); } .facts dt { color: var(--moss); } .facts dd { margin: 2px 0 0; font-size: 19px; line-height: 1.4; } .facts dd span { color: var(--soft); font-size: 16px; } .facts a { text-decoration: none; border-bottom: 1px solid rgba(26, 25, 23, .35); } .visit__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; } .visit__map { display: block; width: 100%; aspect-ratio: 16 / 8; border: 0; margin-top: clamp(24px, 3vw, 40px); background: #d9d2c4; } /* ── Consult ───────────────────────────────────────────────────────────────────────────────── */ .consult { background: var(--moss); color: var(--paper); padding-block: clamp(56px, 7vw, 104px); } .consult__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; } .consult__lede { margin-top: 20px; max-width: 40ch; font-size: 19px; color: rgba(246, 241, 231, .86); } .consult__facts { margin: clamp(28px, 4vw, 48px) 0 0; padding-top: 24px; border-top: 1px solid rgba(246, 241, 231, .28); display: grid; gap: 16px; max-width: 40ch; } .consult__facts dt { font-size: 14px; font-weight: 600; color: var(--sage); } .consult__facts dd { margin: 2px 0 0; font-size: 19px; } /* the form sits in a card, two short fields side by side, after 21st.dev "Contact Form" */ .form { display: grid; gap: 18px; padding: clamp(22px, 3vw, 36px); background: var(--paper); color: var(--ink); border-radius: 6px; box-shadow: 0 24px 60px -30px rgba(14, 13, 12, .55); } .consult .form, .finds .form { box-shadow: none; } /* on the green and ink grounds the shadow is darker than the ground and only smudges; the paper card stands on its own */ .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .field { display: grid; gap: 6px; } .field label { font-size: 15px; font-weight: 600; } .field label span { font-weight: 400; color: var(--soft); } .field input, .field textarea { width: 100%; padding: 13px 15px; border-radius: 8px; border: 1.5px solid rgba(26, 25, 23, .22); background: #fff; color: var(--ink); font-size: 17px; } .field textarea { resize: vertical; min-height: 120px; } .field input::placeholder, .field textarea::placeholder { color: #8a8478; } .field input:focus, .field textarea:focus { border-color: var(--moss); } .form .btn { justify-self: start; } .form .btn:disabled { opacity: .6; cursor: progress; } .form > p:only-child { padding: 12px 0 12px 22px; border-left: 2px solid var(--moss); max-width: 30ch; line-height: 1.3; } .form:has(> p:only-child) { min-height: 260px; align-content: center; } .form-note { font-size: 15px; color: var(--ink); } .form-note a { color: var(--ink); } /* ── Go-live additions (this block is shared with launch.css; keep the two in step) ───────────────── Focus ring: clay suits the light grounds; on ink, moss and photographs it turns paper, and the light form cards get clay back. */ .nav :focus-visible, .hero :focus-visible, .xhero :focus-visible, .phero :focus-visible, .doors :focus-visible, .lwheel :focus-visible, .floor :focus-visible, .finds :focus-visible, .consult :focus-visible, .foot :focus-visible, .lightbox :focus-visible, .pv__head :focus-visible { outline-color: var(--paper); } .form :focus-visible { outline-color: var(--clay); } /* the submit button and the link to the privacy note sit side by side */ .form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; } .form__privacy { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--soft); text-underline-offset: 4px; } .form__privacy:hover { color: var(--ink); } /* the privacy note (privacy.html): a dark head under the nav, then a plain reading column */ .pv__head { background: var(--ink); color: var(--paper); padding: calc(var(--nav-h) + clamp(28px, 5vw, 72px)) 0 clamp(36px, 5vw, 72px); } .pv__head h1 { max-width: 16ch; font-size: clamp(40px, min(5.2vw, 9.6vh), 86px); line-height: 1; letter-spacing: -.022em; } .pv__lede { margin-top: 18px; max-width: 50ch; font-size: clamp(17px, 1.35vw, 20px); color: rgba(246, 241, 231, .82); } .pv__body { background: var(--paper); padding-block: clamp(48px, 6vw, 96px); } .pv__col { max-width: 62ch; display: grid; gap: clamp(24px, 3vw, 36px); } .pv__col h2 { margin-bottom: 8px; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; } .pv__col p { color: var(--soft); } .pv__col a { color: var(--ink); text-underline-offset: 4px; } /* ── Footer ────────────────────────────────────────────────────────────────────────────────── */ .foot { background: var(--ink); color: rgba(246, 241, 231, .78); padding-block: 44px; font-size: 15px; } .foot__grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: end; } .foot__brand { font-family: var(--serif); font-size: 30px; color: var(--paper); line-height: 1; margin-bottom: 10px; } .foot__brand em { font-style: italic; } .foot__brand img { display: block; width: 132px; height: auto; } .foot__links { text-align: right; } .foot__links p:first-child a { display: inline-block; padding: 12px 0; margin-left: 22px; } .foot__credit { margin-top: 8px; opacity: .7; } /* ── Narrower laptops and tablets ──────────────────────────────────────────────────────────── */ @media (max-width: 1100px) { .hero { column-gap: 22px; } .facts { grid-template-columns: 1fr 1fr; } } /* ── Phones and small tablets: one column ──────────────────────────────────────────────────── */ @media (max-width: 899px) { .nav__links a:not(.btn):not(.nav__tel) { display: none; } .nav__links { gap: 8px; } .nav__tel { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid rgba(246, 241, 231, .45); font-weight: 600; opacity: 1 !important; } .nav__tel-num { display: none; } .nav__tel-word { display: inline; } .nav__brand { font-size: 23px; } .nav__logo { height: 34px; } .hero { display: block; min-height: 0; padding-bottom: 0; } .hero__h { display: block; padding: 8px 0 22px; font-size: clamp(46px, 13.4vw, 88px); } .hero__a, .hero__b { text-align: left; } .hero__a br, .hero__b br { display: none; } .hero__b { display: block; } .hero__left { text-align: left; max-width: none; padding-top: 0; } .hero__ctas { justify-content: flex-start; margin-top: 18px; } .hero__right { padding-top: 22px; } .cta-card { width: 100%; } .hero__facts { grid-template-columns: 1fr 1fr; gap: 12px 20px; } .hero .hero__arch { width: min(62vw, 340px); margin: 0 0 22px; aspect-ratio: 4 / 5; --focus: 50% 14%; } .hero .btn { padding: 0 18px; } .hero__right { padding-bottom: 40px; } .hx { display: grid; grid-template-columns: 1fr 1fr; height: auto; } .hx__panel { aspect-ratio: 4 / 5; } .hx__btn img { filter: none; } .hx__panel.is-open .hx__btn { outline: 3px solid var(--sage); outline-offset: -3px; } .say { max-width: none; font-size: clamp(32px, 9.4vw, 44px); } html.motion-ok .say-scene { height: 160vh; } .step__text::before { right: 0; } .form__row { grid-template-columns: 1fr; } .studio__stage { grid-template-columns: 1fr; } .studio .step figure { aspect-ratio: 1 / 1; --focus: 50% 60%; } .studio__head { display: block; } .studio__head .btn { margin-top: 20px; } .floor__grid { grid-template-columns: 1fr; } .floor__col:first-child { order: 2; } .visit { grid-template-columns: 1fr; } .visit .visit__photo { aspect-ratio: 4 / 5; min-height: 0; } .visit__body { padding: 48px var(--pad) 56px; } .visit__map { aspect-ratio: 4 / 3; } .consult__grid { grid-template-columns: 1fr; } .foot__links { text-align: left; } .foot__links p:first-child a { margin: 0 22px 0 0; } } @media (max-width: 520px) { .btn { white-space: normal; text-align: center; } .hero__facts { grid-template-columns: 1fr; } .facts { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════════════════════════════════════════════ The full site. Everything above is shared with the launch page (clients/avenue/launch); what follows is what the four pages add: the site nav, the two doors, the clip carousel, the story rows, the inner-page hero, the shop and the ideas page. ══════════════════════════════════════════════════════════════════════════════════════════════ */ /* the names the pano-room and scene-card kit pieces read */ :root { --bg: var(--paper); --surface: #fff; --ink-soft: var(--soft); --accent: var(--moss); --gold: #a98b4f; --line: rgba(26, 25, 23, .12); } /* ── Site nav ──────────────────────────────────────────────────────────────────────────────── */ .nav__links a.is-active { opacity: 1; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; } .nav__bag { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid rgba(246, 241, 231, .45); background: none; color: var(--paper); font-size: 15px; font-weight: 600; } .nav__bag b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 13px; } @media (max-width: 899px) { .nav--site .nav__links { gap: 2px; font-size: 15px; } .nav--site .nav__links a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; padding: 0 7px; } .nav--site .nav__links .btn { display: none; } .nav--site .nav__brand { font-size: 21px; white-space: nowrap; } .nav--site .nav__logo { height: 30px; } .nav__bag { position: fixed; right: 16px; bottom: 16px; z-index: 55; min-height: 48px; padding: 0 20px; background: var(--ink); box-shadow: 0 10px 30px -10px rgba(14, 13, 12, .6); } } @media (max-width: 380px) { .nav--site .nav__links a:not(.btn) { padding: 0 5px; font-size: 14px; } .nav--site .nav__brand { font-size: 19px; } .nav--site .nav__logo { height: 26px; } } /* ── The two doors ───────────────────────────────────────────────────────────────────────────── After 21st.dev "Hover Expand Gallery": two panels, the one under the pointer grows on the same curve. */ .doors { display: flex; height: min(80vh, 54vw); min-height: 420px; background: var(--ink); color: var(--paper); overflow: hidden; } .door { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; text-decoration: none; background: var(--ink-2); transition: flex-grow .62s cubic-bezier(.32, .72, 0, 1); } .door:hover, .door:focus-visible { flex-grow: 1.5; } .door + .door { border-left: 1px solid rgba(246, 241, 231, .3); } .door video, .door img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); } .door:hover video, .door:hover img { transform: scale(1.04); } .doors:hover .door:not(:hover) video, .doors:focus-within .door:not(:focus-visible) video { filter: grayscale(.7) brightness(.8); } .door video { transition: transform 1.6s var(--ease), filter .5s var(--ease); } .door::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(26, 25, 23, .1) 30%, rgba(26, 25, 23, .86)); } .door__text { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: clamp(22px, 3.4vw, 52px); display: grid; gap: 6px; } /* a dark ramp behind the words only (the photograph stays clear above it), so the label and line read at AA on the lightest frames */ .door__text::before { content: ''; position: absolute; z-index: -1; inset: -110px 0 0; pointer-events: none; background: linear-gradient(rgba(26, 25, 23, 0), rgba(26, 25, 23, .68) calc(110px + clamp(22px, 3.4vw, 52px))); } .door__label { font-size: 14px; font-weight: 600; color: var(--sage); } .door__title { font-family: var(--serif); font-size: clamp(40px, min(5.4vw, 10vh), 88px); line-height: 1; letter-spacing: -.02em; } .door__line { max-width: 34ch; color: rgba(246, 241, 231, .84); } .door__go { margin-top: 12px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); color: var(--ink); transition: transform .3s var(--ease); } .door:hover .door__go { transform: translate3d(4px, -4px, 0); } .door:focus-visible { outline-offset: -4px; } @media (prefers-reduced-motion: reduce) { .door { transition: none; } } /* ── A look around the store: clips in a snap carousel ────────────────────────────────────────── After 21st.dev "Snap Carousel" by ddoemonn: a track that snaps slide by slide with the next one peeking in, bar indicators and a pair of arrow buttons. Here the browser's own scroll snapping does the physics. */ .reel { background: var(--ink); color: var(--paper); padding-block: clamp(56px, 7vw, 104px); overflow: hidden; } .reel__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 48px; margin-bottom: clamp(26px, 3.4vw, 44px); } .reel__lede { max-width: 40ch; color: rgba(246, 241, 231, .76); } .snap { --edge: max(var(--pad), calc((100vw - 1360px) / 2)); } .snap__track { list-style: none; margin: 0; padding: 4px var(--edge); display: flex; gap: clamp(12px, 1.4vw, 20px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); scrollbar-width: none; overscroll-behavior-x: contain; } .snap__track::-webkit-scrollbar { display: none; } .snap__track:focus-visible { outline: 2px solid var(--sage); outline-offset: -2px; } .snap__slide { flex: 0 0 clamp(210px, 21vw, 300px); scroll-snap-align: start; } .snap__slide figure { margin: 0; } .snap__media { aspect-ratio: 9 / 16; overflow: hidden; background: var(--ink-2); border-radius: 4px; } .snap__media video, .snap__media img { width: 100%; height: 100%; object-fit: cover; } .snap__slide figcaption { padding-top: 12px; display: grid; gap: 2px; } .snap__slide figcaption b { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.15; } .snap__slide figcaption span { color: rgba(246, 241, 231, .7); font-size: 15px; line-height: 1.4; } .snap__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: clamp(20px, 2.4vw, 32px); } .snap__dots { display: flex; gap: 4px; } .snap__dots i { display: block; width: 22px; height: 4px; border-radius: 2px; background: var(--paper); opacity: .26; transform: scaleX(.4); transform-origin: left; transition: opacity .3s var(--ease), transform .3s var(--ease); } .snap__dots i.is-on { opacity: 1; transform: none; } .snap__arrows { display: flex; gap: 8px; } .snap__arrows button { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgba(246, 241, 231, .45); background: none; color: var(--paper); transition: border-color .25s var(--ease), opacity .25s var(--ease); } .snap__arrows button:hover { border-color: var(--paper); } .snap__arrows button:disabled { opacity: .35; cursor: default; } html:not(.js) .snap__bar { display: none; } /* ── Story rows ──────────────────────────────────────────────────────────────────────────────── After 21st.dev "Alternating Rows With Stats" by olewandowski1: picture and text swap sides row by row, each row closes on one figure, hairlines between rows. */ .rows { background: var(--paper); padding-block: clamp(28px, 4vw, 56px); } .rows--stucco { background: var(--stucco); } .rows__head { padding-block: clamp(28px, 4vw, 56px) clamp(8px, 1vw, 16px); } .row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 104px); align-items: center; padding-block: clamp(40px, 5.4vw, 80px); } .row + .row { border-top: 1px solid rgba(26, 25, 23, .16); } .row:nth-of-type(even) .row__media { order: -1; } .row .row__media { aspect-ratio: 5 / 4; } .row__text { display: grid; gap: 16px; justify-items: start; max-width: 520px; } .row__text .label { margin: 0; } .row__text h3 { font-size: clamp(30px, min(3.4vw, 6.4vh), 52px); line-height: 1.04; } .row__text > p:not(.label):not(.note) { color: var(--soft); font-size: clamp(17px, 1.3vw, 19px); max-width: 44ch; } .row__stats { width: 100%; margin: 6px 0 0; padding-top: 18px; border-top: 1px solid rgba(26, 25, 23, .16); display: flex; flex-wrap: wrap; gap: 10px clamp(22px, 3vw, 44px); } .row__stats div { display: flex; align-items: baseline; gap: 8px; } .row__stats dt { order: 2; font-size: 15px; color: var(--soft); } .row__stats dd { margin: 0; font-family: var(--serif); font-size: clamp(28px, 2.6vw, 38px); line-height: 1; } /* ── Inner-page hero ─────────────────────────────────────────────────────────────────────────── After 21st.dev "Editorial Hero" by felipemenezes098: a short tagline low on the left, the serif headline, copy and buttons on the right, one wide picture underneath. */ .phero { background: var(--ink); color: var(--paper); padding-top: calc(var(--nav-h) + clamp(28px, min(4.6vw, 7vh), 72px)); } .phero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px; } .phero__tag { grid-column: 1 / span 4; align-self: end; max-width: 26ch; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.45; color: var(--sage); } .phero__main { grid-column: 6 / -1; display: grid; gap: clamp(16px, 2vw, 26px); justify-items: start; } .phero h1 { font-size: clamp(40px, min(5.2vw, 9.6vh), 86px); line-height: 1; letter-spacing: -.022em; } .phero h1 em.nowrap { white-space: nowrap; } /* an italic phrase never breaks across lines, so roman and italic never share the second line */ .phero__lede { max-width: 50ch; font-size: clamp(17px, 1.35vw, 20px); color: rgba(246, 241, 231, .82); } .phero__ctas { display: flex; flex-wrap: wrap; gap: 10px; } .phero .phero__media { margin-top: clamp(28px, min(4vw, 6vh), 60px); aspect-ratio: 9 / 4; background: var(--ink-2); } .phero__main, .phero__tag, .phero__media { transition: opacity .9s var(--ease), transform .9s var(--ease); } html.motion-ok:not(.is-ready) .phero__main, html.motion-ok:not(.is-ready) .phero__tag { opacity: 0; transform: translate3d(0, 14px, 0); } html.motion-ok:not(.is-ready) .phero__media { opacity: 0; transform: translate3d(0, 24px, 0); } /* ── Studio: a numbered list that swaps one large picture ─────────────────────────────────────── After 21st.dev "lumina-interactive-list": 01 to 03 down the left, a hairline under the current one, the featured picture crossfading on the right. No WebGL and no timer. */ .picks { background: var(--ink); color: var(--paper); padding-block: clamp(56px, 7vw, 104px); } .picks__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 104px); align-items: center; } .picks__list { list-style: none; margin: clamp(28px, 4vw, 52px) 0 0; padding: 0; } .picks__item { position: relative; width: 100%; display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 2.4vw, 32px); align-items: baseline; padding: clamp(18px, 2.2vw, 28px) 0; border: 0; border-top: 1px solid rgba(246, 241, 231, .2); background: none; color: inherit; text-align: left; opacity: .55; transition: opacity .4s var(--ease); } .picks__list li:last-child .picks__item { border-bottom: 1px solid rgba(246, 241, 231, .2); } .picks__item::after { content: ''; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: var(--paper); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); } .picks__item.is-on { opacity: 1; } .picks__item.is-on::after { transform: none; } .picks__n { font-size: 15px; font-weight: 600; color: var(--sage); font-variant-numeric: tabular-nums; } .picks__body { display: grid; gap: 6px; } .picks__body b { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, min(3.2vw, 6vh), 48px); line-height: 1.05; letter-spacing: -.015em; } .picks__body > span { color: rgba(246, 241, 231, .78); max-width: 44ch; } .picks__item:focus-visible { outline: 2px solid var(--sage); outline-offset: 4px; } .picks__stage { position: relative; aspect-ratio: 4 / 5; max-height: 78vh; justify-self: end; width: 100%; background: var(--ink-2); overflow: hidden; } .picks__stage figure { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease); } .picks__stage figure img { transform: scale(1.05); transition: transform 1.6s var(--ease); } .picks__stage figure.is-on { opacity: 1; } .picks__stage figure.is-on img { transform: none; } /* ── Reviews: two ways out and no figures (the Facebook numbers were a dated snapshot) ───────────── */ .reviews { background: var(--stucco); padding-block: clamp(40px, 4.6vw, 64px); } .reviews__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px clamp(28px, 5vw, 80px); align-items: center; } .reviews h2 { max-width: 22ch; font-size: clamp(32px, 3.5vw, 52px); } .reviews__side { display: grid; gap: 14px; justify-items: start; } .reviews__lede { color: var(--soft); max-width: 44ch; } .reviews__links { display: flex; flex-wrap: wrap; gap: 10px; } .reviews__quotes[hidden] { display: none; } .reviews + .visit { border-top: 1px solid rgba(26, 25, 23, .16); } /* ── Shop: the house line ────────────────────────────────────────────────────────────────────── After 21st.dev "Product Card" by deltacomponents: a picture well, name on the left and the figure on the right underneath, the picture lifting on hover. */ .shelf { background: var(--paper); padding-block: clamp(56px, 7vw, 104px); } .shelf__layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 6vw, 96px); align-items: center; } .shelf__photo { margin: 0; aspect-ratio: 4 / 5; border-radius: clamp(18px, 2vw, 28px); overflow: hidden; background: var(--ink-2); } .shelf__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; } .shelf__body { display: grid; gap: 16px; align-content: center; } .shelf__body h2 { font-size: clamp(36px, 4.6vw, 68px); line-height: 1; letter-spacing: -.02em; } .shelf__lede { color: var(--soft); max-width: 46ch; } .shelf__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } .plist { list-style: none; margin: clamp(8px, 1.4vw, 20px) 0 0; padding: 0; border-top: 1px solid rgba(26, 25, 23, .16); } .prow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px clamp(14px, 2vw, 28px); padding: clamp(14px, 1.6vw, 20px) 0; border-bottom: 1px solid rgba(26, 25, 23, .16); } .prow h3 { font-size: clamp(21px, 1.9vw, 28px); line-height: 1.12; } .prow .pcard__price { white-space: nowrap; } .shelf__note { margin-top: 24px; } /* Offers switch. (shop.html) hides the example rows and their note, the bag button and the bag drawer; the photograph, the heading and the one-of-a-kind board stay. Set it to "on" (or drop it) once the store's own names and prices are in. CSS only, so it holds with scripts off; js/avenue.js also skips the bag while it is "off". .offers-on spans hold wording that is true only with the bag open; .offers-off spans hold the wording for the shut bag. */ .offers-off { display: none; } body[data-offers="off"] .offers-off { display: inline; } body[data-offers="off"] :is(.offers-on, .plist, .shelf__note, .nav__bag, .drawer, .scrim) { display: none !important; } /* with the rows hidden the section is one photograph and a short text column: a squarer picture and less air keep it from looking empty */ body[data-offers="off"] .shelf { padding-block: clamp(40px, 5vw, 72px); } body[data-offers="off"] .shelf__photo { aspect-ratio: 1 / 1; } /* ── Shop: one-of-a-kinds, on the same lightbox board as the launch page ─────────────────────── */ .finds { background: var(--ink); color: var(--paper); padding-block: clamp(56px, 7vw, 104px); } .finds__head { display: grid; gap: 16px; max-width: 60ch; margin-bottom: clamp(28px, 4vw, 48px); } .finds__head p:not(.label) { color: rgba(246, 241, 231, .78); } .board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 36px) clamp(14px, 1.8vw, 26px); } .board .tile .tile__media { aspect-ratio: 4 / 5; border-radius: clamp(14px, 1.6vw, 22px); } .board .tile figcaption { padding-top: 12px; } .board .tile figcaption h3 { font-size: 22px; } .finds__ask { margin-top: clamp(28px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 5vw, 80px); align-items: start; } .finds__ask h3 { font-size: clamp(28px, 3vw, 44px); } .finds__ask > div { display: grid; gap: 16px; justify-items: start; } .finds__ask > div p { color: rgba(246, 241, 231, .78); max-width: 40ch; } /* ── A closing strip ───────────────────────────────────────────────────────────────────────── */ .strip { background: var(--stucco); padding-block: clamp(40px, 5vw, 72px); } .strip__grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; } .strip h2 { font-size: clamp(30px, 3.4vw, 52px); } .strip p { color: var(--soft); margin-top: 8px; max-width: 48ch; } .strip__ctas { display: flex; flex-wrap: wrap; gap: 10px; } .strip--moss { background: var(--moss-deep); color: var(--paper); } /* seasonal offer: its own ground between the dark list and the beige reviews band */ .strip--moss p { color: rgba(246, 241, 231, .78); } .strip--moss .label { color: var(--sage); } /* the seasonal strip's picture: an arch like the studio steps, left of the words; on phones it sits above them */ .strip__photo { flex: 0 0 clamp(160px, 15vw, 230px); aspect-ratio: 4 / 5; margin: 0; overflow: hidden; border-radius: 999px 999px 0 0; background: var(--ink-2); } .strip__photo + .strip__text { flex: 1 1 260px; } @media (max-width: 899px) { .strip__photo { flex-basis: clamp(160px, 46vw, 220px); } } /* ── Bag drawer ────────────────────────────────────────────────────────────────────────────── */ .drawer { position: fixed; inset: 0 0 0 auto; width: min(430px, 92vw); background: var(--paper); z-index: 90; transform: translateX(102%); visibility: hidden; transition: transform .45s var(--ease), visibility 0s .45s; display: flex; flex-direction: column; } .drawer.is-open { transform: none; visibility: visible; transition: transform .45s var(--ease); } .drawer__body { display: flex; flex-direction: column; height: 100%; } .drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 22px 24px; border-bottom: 1px solid var(--line); } .drawer__head h3 { font-size: 28px; } .drawer__close { min-height: 44px; padding: 0 6px; background: none; border: 0; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; } .drawer__items { flex: 1; overflow: auto; padding: 10px 24px; } .drawer__pad { padding: 30px 24px; overflow-y: auto; display: grid; gap: 16px; align-content: start; } .drawer__pad p { color: var(--soft); } .drawer .form { padding: 0; background: none; box-shadow: none; } .drawer .btn { width: 100%; } .cart-line { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); } .cart-line img { width: 64px; height: 80px; object-fit: cover; border-radius: 6px; } .cart-line h4 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 20px; } .cart-line small { color: var(--soft); font-size: 14px; } .cart-line .example-pill { display: inline; } .cart-line button { min-height: 44px; background: none; border: 0; color: var(--clay); font-weight: 600; font-size: 15px; } .drawer__foot { padding: 20px 24px; border-top: 1px solid var(--line); } .drawer__total { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 14px; } .drawer__note { font-size: 14px; color: var(--soft); margin-top: 10px; } .scrim { position: fixed; inset: 0; background: rgba(26, 25, 23, .5); z-index: 80; opacity: 0; pointer-events: none; transition: opacity .4s; } .scrim.is-on { opacity: 1; pointer-events: auto; } /* ── Ideas: the concept room and the concept stack ─────────────────────────────────────────── */ .intro { background: var(--paper); padding-block: clamp(48px, 6vw, 88px) clamp(28px, 3vw, 40px); } .intro__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px clamp(28px, 6vw, 96px); align-items: end; } .intro p:not(.label) { color: var(--soft); max-width: 52ch; } .pr { display: block; } /* The concept room's pins: the label hangs off the dot instead of widening the pin, so the dot sits on the point the pin was authored for. (The kit's flex pin centres dot and label together on that point, which pushed every dot half a label's width to the left, off the object it names.) */ .pr .spot { justify-content: center; } .pr .spot__label { position: absolute; top: 50%; left: calc(50% + 14px); translate: 0 -50%; } .lbstack__scene { position: relative; height: 92svh; overflow: hidden; background: var(--ink); padding: 0; } .lbstack__mover { position: absolute; left: 50%; top: 50%; aspect-ratio: 4096 / 2294; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%) scale(1.08); transition: transform 1.4s cubic-bezier(.22, 1, .36, 1); } .lbstack__scene.is-in .lbstack__mover, html:not(.js) .lbstack__mover { transform: translate(-50%, -50%) scale(1); } .lbstack__mover img { width: 100%; height: 100%; object-fit: cover; display: block; } .lbstack__scene .spot__label { opacity: 1; transform: none; } .lbstack__scene::after { content: ''; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(transparent, rgba(26, 25, 23, .7)); pointer-events: none; } .lbstack__tag { position: absolute; left: var(--pad); bottom: clamp(24px, 4vw, 44px); color: var(--paper); z-index: 2; display: grid; gap: 6px; justify-items: start; opacity: 0; transform: translateY(14px); transition: opacity .8s .25s, transform .8s .25s; } .lbstack__scene.is-in .lbstack__tag, html:not(.js) .lbstack__tag { opacity: 1; transform: none; } /* a dark ramp behind the words only, fading out to the right; the picture stays clear everywhere else */ .lbstack__tag::before { content: ''; position: absolute; z-index: -1; inset: -44px -80px calc(-1 * clamp(24px, 4vw, 44px)) calc(-1 * var(--pad)); pointer-events: none; background: linear-gradient(rgba(26, 25, 23, 0), rgba(26, 25, 23, .05) 8px, rgba(26, 25, 23, .2) 17px, rgba(26, 25, 23, .45) 26px, rgba(26, 25, 23, .68) 36px, rgba(26, 25, 23, .76) 44px); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 240px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 240px), transparent); } .lbstack__tag .label { margin: 0; } .lbstack__tag h3 { font-size: clamp(32px, 4vw, 60px); } .lbstack__tag a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-underline-offset: 5px; } .lbstack__pill { position: absolute; right: var(--pad); top: calc(var(--nav-h) + 16px); z-index: 2; font-size: 14px; font-weight: 600; color: var(--paper); background: rgba(26, 25, 23, .62); padding: 8px 14px; border-radius: 999px; } .lbstack__gap { height: 4px; background: var(--ink); } @media (prefers-reduced-motion: reduce) { .lbstack__mover { transform: translate(-50%, -50%); transition: none; } .lbstack__tag { opacity: 1; transform: none; transition: none; } } @media (max-width: 899px) { .doors { flex-direction: column; height: auto; min-height: 0; } .door { flex: none; aspect-ratio: 1 / 1; } .door + .door { border-left: 0; border-top: 1px solid rgba(246, 241, 231, .3); } .door:hover, .door:focus-visible { flex-grow: 0; } .snap__slide { flex-basis: 62vw; } .row { grid-template-columns: 1fr; gap: 24px; } .row:nth-of-type(even) .row__media, .row .row__media { order: -1; } .row .row__media { aspect-ratio: 1 / 1; } .phero__grid { display: flex; flex-direction: column-reverse; gap: 18px; } .phero__tag { max-width: none; font-size: 16px; } .phero h1 { font-size: clamp(40px, 11.4vw, 64px); } .phero .phero__media { aspect-ratio: 4 / 3; } .reviews__grid, .intro__grid, .finds__ask, .picks__grid { grid-template-columns: 1fr; } .picks__stage { order: -1; aspect-ratio: 1 / 1; } .picks__item { opacity: 1; } .shelf__layout { grid-template-columns: 1fr; } .shelf__photo { aspect-ratio: 4 / 5; max-height: 70svh; } .pcard__price { text-align: right; } .board { grid-template-columns: 1fr 1fr; } .lbstack__scene { height: 78svh; } /* the label hangs off the dot instead of widening the pin, so the dot is the anchor; js/avenue.js (fitPins) puts the label on the side with room (.is-flip = to the left) and eases a dot that sits at the very edge of the picture back inside it */ .lbstack__scene .spot { justify-content: center; margin-left: var(--nudge, 0px); } .lbstack__scene .spot__label { position: absolute; top: 50%; left: calc(50% + 14px); translate: 0 -50%; width: max-content; max-width: var(--lw, 150px); white-space: normal; line-height: 1.25; padding: 5px 8px; } .lbstack__scene .spot.is-flip .spot__label { left: auto; right: calc(50% + 14px); text-align: right; } /* in the room the pins slide with the drag, so the label sits under its dot, centred and short, and stays on screen until the dot itself leaves */ .pr .spot__label { top: calc(50% + 14px); left: 50%; translate: -50% 0; width: max-content; max-width: 132px; white-space: normal; text-align: center; line-height: 1.25; } } /* a