children would stack full-width. Constrain them so the pre-init flash matches the grid rather than a tall column, then Slick takes over. */ .uc-slider:not(.slick-initialized) { display: flex; gap: 24px; overflow: hidden; } .uc-slider:not(.slick-initialized) > * { flex: 0 0 calc(33.333% - 16px); min-width: 0; } /* ---- Gutters between slides (the grids used gap; recreate it here) ---- */ /* align-items:stretch alone is not enough: Slick writes an inline height on .slick-track only with adaptiveHeight, and leaves each .slick-slide at its own content height otherwise. `height:auto` then lets a short card sit shorter than a tall one, and the loop clones — which enter the track at a different moment than the originals — end up measured against a different tallest sibling, which is what produced the jump on wrap. Forcing every slide (original and clone alike) to `height:auto !important` plus a stretch flex chain makes the tallest card in the *whole* track set the row height, so wrapping can never change it. */ .uc-slider .slick-track { display: flex !important; align-items: stretch; } .uc-slider .slick-slide { height: auto !important; margin: 0 12px; display: flex; align-items: stretch; transform: none !important; float: none; } /* When slidesToShow > 1 Slick wraps each slide's contents in an anonymous

. That wrapper must also stretch, or the card inside it collapses back to content height and the equal-height chain is broken one level down. */ .uc-slider .slick-slide > div { display: flex; flex-direction: column; align-items: stretch; width: 100%; min-width: 0; } /* Slick needs .slick-list to clip the track horizontally, otherwise every slide (and its infinite clones) shows at once and the carousel can't move. overflow MUST stay hidden â€” the -12px side margins reclaim the first/last slide's outer gutter, and the vertical padding gives the hover lift + shadow room inside the clipped box instead of switching overflow to visible. */ .uc-slider .slick-list { margin: 0 -12px; overflow: hidden; padding-block: 14px; } /* Cards inside a slide must fill the slide and shed any fixed flex width the rail layout gave them, so Slick controls the sizing. */ .uc-slider .slick-slide > .product-card, .uc-slider .slick-slide > .arrival-card, .uc-slider .slick-slide > .rail-card, .uc-slider .slick-slide > .testi-card { height: 100%; flex: 1 1 auto !important; /* override .rail-card flex:0 0 clamp(...) */ margin: 0; } /* The Best Sellers rail reads edge-to-edge on the page; add the section's original horizontal breathing room back onto the list. */ .uc-slider--edge { padding-inline: clamp(20px, 4vw, 56px); } /* ---- Dots ---- */ .uc-slider .slick-dots { position: static; margin-top: 36px; display: flex !important; justify-content: center; gap: 8.8px; } .uc-slider .slick-dots li { width: auto; height: auto; margin: 0; } .uc-slider .slick-dots li button { width: auto; height: auto; padding: 0; } .uc-slider .slick-dots li button:before { content: ""; position: static; display: block; width: 22px; height: 3px; border-radius: 999px; background: rgba(200, 204, 212, 0.22); opacity: 1; transition: background 0.4s var(--ease-luxe), width 0.4s var(--ease-luxe); } .uc-slider .slick-dots li.slick-active button:before { width: 40px; background: linear-gradient(90deg, var(--gold-deep), var(--gold-lite)); } .uc-slider .slick-dots li button:hover:before { background: rgba(201, 162, 39, 0.6); } /* Slick's loop clones are never tracked by GSAP/ScrollTrigger, so if a clone is made from a card that still carries the reveal state it stays at opacity:0 forever — a full-width but invisible slide, which is what read as "blank space" at the wrap from the last slide back to the first. Inside a slider the reveal animation has no purpose anyway (the cards arrive by sliding, not by scrolling into view), so hard-clear it for every slide and its descendants, clones included. */ .uc-slider .slick-slide [data-reveal], .uc-slider .slick-slide[data-reveal], .uc-slider .slick-cloned [data-reveal], .uc-slider .slick-cloned[data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; } /* ---- Disable Slick's built-in arrows (we use the .rail-btn header nav) ---- */ .uc-slider .slick-prev, .uc-slider .slick-next { display: none !important; } /* ---- Grab cursor while dragging ---- */ .uc-slider .slick-list { cursor: grab; } .uc-slider .slick-list:active { cursor: grabbing; } /* Focus ring on keyboard-focused slides shouldn't be clipped. */ .uc-slider .slick-slide:focus { outline: none; } .uc-slider .slick-slide:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; } /* ---- Reduced motion: dots still fine, autoplay is disabled in JS ---- */ /* ========================================== */ /* SECTION: RESPONSIVE STYLES */ /* ========================================== */ /* ========================================================================== ULTIMATE CHESS â€” responsive.css Breakpoint refinements. Base styles are mobile-safe; these tune the edges. Order: large â†’ small (plus a few min-width enhancements at the end). ========================================================================== */ /* ========================================================================== 3XL â€” ultra wide (1800px+) ========================================================================== */ /* ========================================================================== DESKTOP / LAPTOP (max 1280px) ========================================================================== */ /* ========================================================================== TABLET (max 1024px) ========================================================================== */ /* ========================================================================== SMALL TABLET / LARGE MOBILE (max 768px) ========================================================================== */ /* ========================================================================== MOBILE (max 600px) ========================================================================== */ /* ========================================================================== SMALL MOBILE (max 400px) ========================================================================== */ /* ========================================================================== ORIENTATION â€” short landscape phones ========================================================================== */ /* ========================================================================== INPUT CAPABILITY â€” hover-capable pointers only ========================================================================== */ /* ========================================================================== CHESSBOARD BACKDROP â€” section transparency The fixed board on body::before is only visible where the page lets it through, so the full-bleed section fills become translucent warm-dark washes instead of opaque charcoal. Cards, modals, header and menu keep their solid fills â€” they need to stay readable over the pattern. ========================================================================== */ /* Opacity raised and paired with a blur: the board still shows through as a warm texture, but square edges no longer cut across lines of type. The blur is what actually protects readability — it destroys the hard checker edge while keeping the tonal variation that makes the backdrop worth having. */ main > section.bg-charcoal, main > section.bg-ink, footer.bg-charcoal { background-color: rgb(20 12 6 / 0.88); } /* The blur is applied separately and NOT to sections holding a pinned scene: backdrop-filter makes an element the containing block for fixed/sticky descendants, which would unpin .hs-viewport / .ms-viewport exactly the way `overflow:hidden` on once did (see the note at the top of this file). Those two sections keep the opaque wash above, which is what carries the readability anyway — the blur is only edge-softening on top of it. */ main > section.bg-charcoal:not(:has(.hs-viewport)):not(:has(.ms-viewport)), main > section.bg-ink:not(:has(.hs-viewport)):not(:has(.ms-viewport)), footer.bg-charcoal { backdrop-filter: blur(6px); } /* Alternating sections sit slightly lighter, so scrolling reads as moving across the board rather than under one continuous sheet. */ main > section.bg-charcoal:nth-of-type(even) { background-color: rgb(30 18 9 / 0.86); } /* The travelling-piece softening must still win over the rules above. */ body.piece-travelling main > section.bg-charcoal { background-color: rgb(20 12 6 / 0.82); } /* Sub-panels that sit inside a section and previously relied on an opaque parent. These carry the smallest text on the page, so they go fully opaque — the board reads around them, never behind their copy. */ .product-card, .tile, .testi-card, .arrival-card { backdrop-filter: blur(12px); background-color: rgb(14 10 6 / 0.97); } /* The board is decorative; on reduced-transparency setups drop back to a flat warm dark so nothing competes with the copy. */ /* ========================================================================== PRINT ========================================================================== */ /* ========================================================================== RESPONSIVE / MEDIA QUERIES (largest breakpoint -> smallest) ========================================================================== */ @media (min-width: 1800px) { :root { --pad-x: 72px; --sec-y: 83.2px; } .section-title { font-size: clamp(54.4px, 4.4vw, 92.8px); } .collection-card { min-height: 368px; } } @media (max-width: 1280px) { .hs-figure { right: 80px; } .pt-28 { padding-top: 3rem !important; } .mobile-link span { font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; font-size: clamp(20.6px, 5vw, 26.4px); } .hs-slide { width: min(100%, 552px); } } @media (min-width: 1024px) { #siteHeader.is-solid > div { padding-top: 0.75rem; padding-bottom: 0.75rem; } .brand-layout { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-areas: "lead score" "ledger ledger"; gap: 4.5rem 4rem; align-items: start; } .brand-copy { font-size: 1.125rem; } .brand-ledger { grid-template-columns: repeat(4, minmax(0, 1fr)); } .brand-ledger > div { border-bottom: 0; } .brand-ledger > div + div { padding-left: 2.25rem; border-left: 1px solid rgba(255, 255, 255, 0.08); } .foot-grid { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); } .foot-brand { grid-column: auto; } .ms-inner { /* No top reservation: the heading now scrolls above the pinned viewport rather than overlaying it, so the columns own the full sticky screen and centre in it. */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* Symmetric gutters. The columns swap sides per material, so the frame has to look the same mirrored â€” an asymmetric pad would make every other material sit visibly off-centre. */ padding-inline: clamp(72px, 7vw, 128px); } /* ---- Alternation ---- Odd-indexed materials swap the columns: visual right, copy left. Grid column assignment is the only thing that changes â€” both columns keep their own styling, so nothing has to be duplicated per side. The value is a hard 0/1 written by JS at the seam midpoint, so the swap happens while both materials are mid-dissolve and is never seen as a jump. */ .ms-visual-col { grid-column: 1; grid-row: 1; } .ms-copy { grid-column: 2; grid-row: 1; } .ms-inner[data-side="1"] .ms-visual-col { grid-column: 2; } .ms-inner[data-side="1"] .ms-copy { grid-column: 1; } } @media (max-width: 991px) { .hs-figure { top: 30% !important; } /* .ms-inner / .ms-visual sizing for this range now lives in the "FIND YOUR MATERIAL â€” VISUAL VISIBILITY (max 1024px)" block below. The 78svh !important cap that used to sit here is what let the visual grow past the pinned viewport and get clipped, so it is deliberately gone. */ .foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; padding-bottom: 20px; align-items: start; } .brand-copy { max-width: 100%; } .hero-cinema .hero-text-front { font-size: 7vw; } .mb-14 { margin-bottom: 1.5rem; } } /* ========================================================================== TABLET (992px â€“ 1024px) â€” right-column visuals sit centred At this width the two-column desktop rules are still in force, but the About figure is bottom-anchored (`bottom:0`) and the material stack keeps its desktop caps, so both images drop low in the pinned frame instead of sitting beside their copy. Anchor them to the vertical middle instead. ========================================================================== */ @media (min-width: 992px) and (max-width: 1024px) { /* About â€” release the bottom anchor and centre on the stage. */ .hs-figure { top: 50%; bottom: auto; right: clamp(40px, 8vw, 96px); height: min(70svh, 620px); max-width: 44vw; object-position: center; /* The scrubbed transform on this element is written by JS as a full `transform` string, so the centring offset cannot live there â€” it would be overwritten on the first scroll frame. Margin does the same job and is untouched by the animation. */ margin-top: min(-35svh, -310px); mask-image: none; -webkit-mask-image: none; } /* Find your material â€” both columns share the pinned screen's middle. */ .ms-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; padding-inline: clamp(32px, 5vw, 64px); } .ms-visual { align-self: center; max-width: min(360px, 38vw, 48svh); max-height: 62svh; margin-block: auto; } } /* ========================================================================== "FIND YOUR MATERIAL" â€” VISUAL VISIBILITY (max 1024px) The pinned stage is `height:100svh; overflow:hidden`, so whatever the two rows do not fit inside that screen is simply clipped away. Below the desktop breakpoint `.ms-inner` falls back to its single-column default, and `.ms-panels` alone reserves clamp(496px,46svh,544px) plus the grid gap â€” more than a 1024x768 tablet has. The visual is the first row, so it was the part pushed past the clipped top edge and never seen. Note `.ms-visual-col` does not exist in the markup: `.ms-visual` is itself the grid item, so the column rules elsewhere in this file that target the wrapper never match. Everything here addresses `.ms-visual` directly. Two columns keep the visual beside the copy rather than stacked above it, and both rows are re-capped against svh so the pair actually fits. ========================================================================== */ @media (max-width: 1024px) { .ms-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 40px); padding-inline: clamp(20px, 4vw, 48px); } /* The visual is the grid item itself â€” centre it in its own row and cap it against the sticky screen so the stack, its halo and its ticks all land inside the clipped frame. */ .ms-visual { align-self: center; max-width: min(340px, 42vw, 44svh); max-height: 52svh; margin-inline: auto; } /* The copy column has to yield too: its reservation is what overflowed the screen in the first place, and at two columns it no longer needs to reserve for the desktop line lengths. */ .ms-panels { min-height: min(430px, 60svh); } .ms-panel { width: 100%; } } /* Below the two-column fallback the stage genuinely runs out of width, so the columns stack â€” and then the reservations have to come down again or the visual is clipped for the same reason as above. */ @media (max-width: 640px) { .ms-inner { grid-template-columns: minmax(0, 1fr); gap: clamp(12px, 3vw, 24px); } /* Banner mode: the visual sits above the copy and is bounded by height rather than width, because the copy â€” not the image â€” is what has to stay above the fold on a phone. */ .ms-visual { aspect-ratio: 1; max-width: min(300px, 60vw); max-height: 30svh; } .ms-panels { min-height: min(430px, 52svh); } } /* ========================================================================== "THE HOUSE" â€” COMPACT TABLET/MOBILE (max 1024px) Below the desktop breakpoint the layout stacks to a single column, so the section's desktop rhythm (3.5rem grid gap, 2.25rem ledger cells, 1.375rem hand names) turns into a very long scroll for what is a short amount of copy. Everything here tightens spacing and type only â€” no structural change, so the stacked order and the divider logic stay as they are. ========================================================================== */ @media (max-width: 1024px) { .brand-layout { gap: 2rem 0; } .brand-title { margin-top: 1.1rem; } .brand-copy { margin-top: 1.1rem; font-size: 0.9375rem; line-height: 1.65; } .brand-signature { margin-top: 1.35rem; } /* The score panel: smaller inset, tighter rows, smaller hand names. */ .brand-score { padding: 1.25rem 1.15rem 1.1rem; border-radius: 16px; } .brand-score-head { padding-bottom: 0.75rem; } .brand-hands li { padding: 0.5rem 0; gap: 0.85rem; } .bh-name { font-size: 1.125rem; } .brand-score-foot { padding-top: 0.75rem; font-size: 0.75rem; } /* Ledger cells lose most of their vertical padding â€” at two columns the numerals already have plenty of air from their own line-height. */ .brand-ledger > div { padding: 1.15rem 1rem 1rem 0; } .counter-num { font-size: clamp(30px, 4.4vw, 40px); } .counter-cap { margin-top: 6px; } } @media (min-width: 900px) { .foot-rail { grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr); } .foot-rail form { padding-bottom: 6px; } } @media (max-width: 880px) { .hs-figure { right: 43% !important; } .hs-copytext { font-size: clamp(14.28px, 1.3vw, 20.8px); } .hs-slide { width: 68%; } } @media (min-width: 768px) { .pillar-grid { grid-template-columns: repeat(3, 1fr); } .foot-bottom { flex-direction: row; justify-content: space-between; text-align: left; } /* #toTop is position:fixed at bottom-right and sits over this row once the page is scrolled to the end; reserve its width so the last legal link is never tucked underneath it. */ .foot-bottom .foot-legal { padding-right: 64px; } .section-title { font-size: clamp(24.6px, 7.4vw, 30.4px) !important; } } @media (max-width: 1280px) { :root { --sec-y: clamp(28.8px, 3.6vw, 51.2px); } .glow-orb { width: min(544px, 92vw); filter: blur(96px); } .collection-card { min-height: 304px; } } @media (max-width: 1024px) { /* Tighten the vertical rhythm between sections by 50% on tablet and below. */ :root { --pad-x: clamp(20px, 4vw, 36px); --sec-y: clamp(14.4px, 1.8vw, 25.6px); } .hero-chess-wrapper { width: 52%; right: auto; opacity: 0.28; } #hero.hero-ready .hero-chess-wrapper { animation: heroFadeInSoft 1s ease 0.5s forwards; } @keyframes heroFadeInSoft { to { opacity: 0.28; } } /* Hero sizing is owned by the .hero-container rules in animation.css. */ .hero-container { min-height: calc(100dvh - var(--header-h)); } .hero-content { padding: 56px 20px 96px; } .hero-container.hero-photo { min-height: 100dvh; } .hero-photo .hero-content { padding: calc(var(--header-h) + 40px) clamp(24px, 6vw, 48px) 104px; font-size: clamp(40px, 8.4vw, 84px); } .hero-cinema .hero-content { padding: calc(var(--header-h) + 32px) var(--hero-inset) clamp(88px, 10vh, 112px); font-size: clamp(40px, 8.6vw, 86px); } .hero-cinema .hero-col { max-width: none; } .hero-inner .hero-content { padding: calc(var(--header-h) + 30px) var(--hero-inset) clamp(44px, 6vh, 64px); font-size: clamp(36px, 7.4vw, 68px); } .hero-inner .hero-col { max-width: none; } #categories .tile { aspect-ratio: 4/3; min-height: 248px; } .uc-slider:not(.slick-initialized) > * { flex: 0 0 calc(50% - 12px); } /* Cards stop trying to span rows */ .collection-card, .collection-card.lg\:row-span-2 { min-height: 288px !important; } .product-media { aspect-ratio: 1/1; } .arrival-media { aspect-ratio: 4/3; } .tile { aspect-ratio: 16/10; } .timeline { padding-left: 25.6px; } .tl-dot { left: -32.8px; } .testi-quote { font-size: 15.2px; line-height: 1.75; } /* Disable 3D tilt on touch-first widths â€” it fights with scrolling */ [data-tilt] { transform: none !important; } } @media (max-width: 1023px) { .brand-title { max-width: none; } /* Slider arrows stay beside the section heading below the lg: breakpoint instead of dropping to their own row under it. The header wrappers use Tailwind's lg:flex-row / lg:justify-between, which stop applying here, so the row layout is re-stated on the nav's parent. */ .slider-nav { flex: 0 0 auto; } :is(div, header):has(> .slider-nav) { flex-direction: row; flex-wrap: nowrap; align-items: flex-end; justify-content: space-between; gap: 16px; } :is(div, header):has(> .slider-nav) > :not(.slider-nav) { min-width: 0; } /* Smaller tap targets so the pair doesn't crowd the headline. */ .rail-btn { width: 40px; height: 40px; font-size: 13px; } /* The piece flies above the copy at this width, so the text sits low. */ .hs-viewport { align-items: flex-end; } .hs-copy { padding-bottom: clamp(64px, 12vh, 112px); } /* Copy runs the full width here, so the figure retreats upward and dims rather than competing with the headline for the same pixels. */ .hs-figure { right: 50%; transform-origin: 50% 0; bottom: auto; top: 0; height: min(52svh, 460px); max-width: 74vw; margin-right: -37vw; opacity: 0; filter: brightness(0.72) contrast(1.02) saturate(0.86) drop-shadow(0 22px 44px rgba(0, 0, 0, 0.6)); mask-image: linear-gradient(180deg, #000 62%, transparent 96%); -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 96%); } .brand-copy { max-width: 100%; font-size: 0.8rem; } .brand-ledger { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, 0.1); } .ms-viewport { align-items: center; } .ms-inner { padding-block: clamp(24px, 4svh, 40px); align-content: center; } .ms-head { padding-block: clamp(22.4px, 3.6svh, 32px) clamp(11.2px, 2vh, 16px); } .ms-head .section-title { margin-top: 11.2px; font-size: clamp(28px, 7vw, 41.6px); } .ms-numerals { display: none; } .ms-rail { right: 16px; height: 22vh; } .ms-rail-ticks span { display: none; } .ms-grid { background-size: 54.4px 54.4px; } .ms-panel { width: 100%; } } @media (max-width: 1023px) and (max-height: 700px) { /* Short landscape. The type steps down so the copy fits the reduced height; the reservation is deliberately modest because above 640px the copy now sits in its own column rather than under the visual, so a tall floor here would push the whole grid past the pinned viewport and clip the image. */ .ms-panels { min-height: min(360px, 68svh); } .ms-title { font-size: clamp(22.4px, 5.6vw, 28.8px); } .ms-text { font-size: 12.64px; line-height: 1.55; margin-top: 11.2px; } .ms-features { margin-top: 12.8px; gap: 5.6px; } .ms-features li { font-size: 11.68px; padding-bottom: 5.6px; } .ms-actions { margin-top: 14.4px; } } @media (max-width: 768px) { :root { --sec-y: clamp(12.8px, 2.4vw, 19.2px); } /* The left-weighted veil assumes a wide frame; on narrow screens the copy spans the full width, so the grading flips to a vertical wash instead. */ .hero-photo .hero-bg-veil { background: linear-gradient( 180deg, rgba(4, 4, 6, 0.8) 0%, rgba(4, 4, 6, 0.6) 40%, rgba(4, 4, 6, 0.94) 100% ); } /* The rail needs frame width it no longer has; the copy takes the full measure and the grid coarsens so the verticals stay readable. */ .hero-cinema .hero-rail { display: none; } .hero-cinema .hero-grid-lines { background-size: 25% 100%; } .hero-cinema .hero-bg-veil { background: linear-gradient( 180deg, rgba(4, 4, 6, 0.7) 0%, rgba(4, 4, 6, 0.3) 32%, rgba(4, 4, 6, 0.92) 76%, rgba(4, 4, 6, 0.97) 100% ); } .hero-inner .hero-rail { display: none; } .hero-inner .hero-grid-lines { background-size: 25% 100%; } .hero-inner .hero-bg-veil { background: linear-gradient( 180deg, rgba(4, 4, 6, 0.74) 0%, rgba(4, 4, 6, 0.36) 34%, rgba(4, 4, 6, 0.93) 78%, rgba(4, 4, 6, 0.97) 100% ); } .hs-slides { min-height: clamp(272px, 36vh, 368px); } .hs-copytext { font-size: 16.8px; } /* Labels would crowd a phone frame â€” the lit dots carry the state alone. */ .hs-rail { right: 16px; height: 24vh; } .hs-rail-ticks span { display: none; } .hs-ring { width: min(94vmin, 416px); } .hs-grid { background-size: 54.4px 54.4px; opacity: 0.1; } .hs-figure { height: min(42svh, 340px); max-width: 86vw; margin-right: -43vw; } .ms-title { font-size: clamp(24.8px, 6.4vw, 33.6px); } .ms-text { font-size: 13.28px; margin-top: 13.6px; line-height: 1.65; } .ms-sub { margin-top: 9.6px; } .ms-features { margin-top: 16px; gap: 7.2px; } .ms-features li { font-size: 12.32px; padding-bottom: 7.2px; } .ms-actions { margin-top: 18.4px; } .ms-ticks { inset: -11.2px; } /* Type steps down here, so the copy is shorter than at tablet widths. The reservation only applies once the columns actually stack (<=640px); in the two-column range above that, the block near "VISUAL VISIBILITY" owns it, because a floor this tall there would clip the visual. */ @media (max-width: 640px) { .ms-panels { min-height: clamp(400px, 50svh, 448px); } } .section-title { font-size: clamp(29.6px, 7.4vw, 46.4px); line-height: 1.1; } .eyebrow { font-size: 9.28px; letter-spacing: 0.26em; } .eyebrow::before { width: 25.6px; } .float-piece { display: none !important; } /* Buttons go full-width so thumbs can reach them */ .btn-primary, .btn-ghost { width: 100%; padding: 16px 25.6px; font-size: 11.2px; } .hero-cta .btn-primary, .hero-cta .btn-ghost { width: 100%; } #cta .btn-primary, #cta .btn-ghost { width: 100%; max-width: 352px; } /* Rails / cards */ .rail-card { flex-basis: clamp(224px, 78vw, 288px); } .rail { scroll-padding-inline: var(--pad-x); } .promo-banner { border-radius: 22.4px; } .glass-card { border-radius: 21.6px; } .collection-card, .product-card, .tile, .rail-card { border-radius: 18.4px; } .rail-media { border-radius: 17.4px 17.4px 0 0; } /* Timeline */ .tl-item { padding-bottom: 44px; } .tl-title { font-size: clamp(18.4px, 5.4vw, 24.8px); } .tl-copy { font-size: 14.08px; } /* Too narrow to wrap text around â€” the figure leads the chapter instead. */ .tl-figure { float: none; display: block; width: 132px; margin: 0 0 16px; } /* Newsletter stacks */ #newsletterForm .luxe-input { text-align: center; } #toTop { bottom: 17.6px; right: 17.6px; width: 44.8px; height: 44.8px; } } @media (max-width: 767px) { .pillar { padding: 2.5rem 1.75rem 2rem; } .pillar-index { font-size: 3rem; top: 1.25rem; right: 1.5rem; } .hero-cinema .hero-content .hero-sub { max-width: 100%; width: 100%; } .hero-cinema .hero-content .hero-eyebrow { justify-content: center; margin: 0 0 clamp(18px, 2.4vh, 30px); letter-spacing: 0.36em; } /* ------------------------------------------------------------------ HERO — CENTRED ON PHONES The desktop hero is an editorial split: a left-weighted copy column balanced by the vertical caption rail down the right edge. That rail is already hidden below 768px, which leaves the copy hugging the left of an otherwise empty frame with nothing to counterweight it. Centring the column restores the balance on a single-column layout. The eyebrow and CTA are centred at every width already; what needs overriding here is `.hero-content`'s `text-align:left`, the headline's own left alignment, the sub's asymmetric margin, and the column's `15.5em` cap (which would otherwise sit the centred block off-centre). ------------------------------------------------------------------ */ .hero-cinema .hero-content { text-align: center; } .hero-cinema .hero-stage { flex-direction: column; align-items: center; justify-content: center; } /* The cap exists to hold a tight measure beside the rail. With the rail gone the column should take the full frame so the centred text is centred on the viewport, not within a narrow left-anchored box. */ .hero-cinema .hero-col { max-width: none; width: 100%; margin-inline: auto; } .hero-cinema .hero-title { text-align: center; } /* `margin:41.6px 16px 0` is a left/right pair, not a centring one — it holds the measure off the frame edge. `auto` centres the block while the inline padding keeps it clear of the projection gate. */ .hero-content .hero-sub { margin-inline: auto; padding-inline: 16px; } /* Both are flex rows that already centre their own children; this centres the boxes themselves now that the column is full-width. */ .hero-content .hero-eyebrow, .hero-content .hero-cta { justify-content: center; } /* ------------------------------------------------------------------ ABOUT + "FIND YOUR MATERIAL" — NO SCROLL SEQUENCE BELOW 768px js/heritage-scene.js and js/materials-scene.js both bail out at this same breakpoint, so on a phone neither stage is ever promoted and the static fallbacks below them are the sections. These rules are the backstop for the one case JS cannot cover: a viewport resized across 768px after load, where the stage is already live. Hiding the stage and forcing its fallback back on mirrors what the reduced-motion block does, and unpins the scrubbed viewports at the same time. ------------------------------------------------------------------ */ #heritageStage { display: none !important; } body.hs-live #heritageFallback { display: block !important; } #materialStage { display: none !important; } body.ms-live #materialFallback { display: block !important; } /* ------------------------------------------------------------------ ABOUT — CHAPTER CARDS The desktop treatment is a ruled timeline: a vertical hairline with a dot per chapter. That reads as one continuous ribbon, which needs a left gutter to work — and a gutter is expensive on a ~360px screen while carrying no meaning here (the chapters are themes, not dates). On mobile each chapter becomes a self-contained card instead: figure banded across the top, numeral in the corner, copy beneath. The stack reads as five discrete chapters, the figures get real presence rather than being shrunk to a 132px thumbnail, and the full column width goes to the text. Counter-based numerals replace the dots as the throughline. ------------------------------------------------------------------ */ #heritageFallback .timeline { padding-left: 0; border-left: 0; counter-reset: tl-chapter; display: grid; gap: 16px; grid-template-columns: 48% 48%; } .mb-14 { margin-bottom: 1rem !important; } #heritageFallback .tl-item { counter-increment: tl-chapter; position: relative; padding-bottom: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--slate2, #101014); } /* The dot belongs to the rule that no longer exists. */ #heritageFallback .tl-dot { display: none; } /* Desktop clears the figure's float; there is no float left to clear, and the leftover block adds a stray row to the card. */ #heritageFallback .tl-item::after { display: none; } /* Figure as a banded header. `cover` at a wide ratio crops to the piece rather than letterboxing a tall cut-out into a short box, and the mask feathers it into the card body so the seam never reads as a hard edge. */ #heritageFallback .tl-figure { float: none; display: block; width: 100%; height: clamp(132px, 34vw, 176px); margin: 0; object-fit: contain; object-position: center 38%; filter: brightness(0.82) contrast(1.06) saturate(0.9); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); } /* Chapter numeral, sat over the figure's top corner. Decorative — the eyebrow beneath still names the chapter for a screen reader. */ #heritageFallback .tl-item::before { content: counter(tl-chapter, decimal-leading-zero); position: absolute; top: 12px; right: 16px; z-index: 2; font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 11px; letter-spacing: 0.22em; color: var(--gold, #c9a227); opacity: 0.75; } /* Copy block. Sits in normal flow directly beneath the figure — no negative margin. An earlier revision pulled the text up into the figure's feathered tail, which put the copy underneath a later-painting image and clipped it inside the card's `overflow:hidden`. The mask already blends the seam on its own. */ #heritageFallback .tl-year { margin-top: 14px; padding: 0 18px; font-size: 9.28px; letter-spacing: 0.24em; } #heritageFallback .tl-title { margin-top: 9px; padding: 0 18px; font-size: clamp(20px, 5.6vw, 25px); line-height: 1.22; } #heritageFallback .tl-copy { margin-top: 10px; padding: 0 18px 20px; font-size: 14.4px; line-height: 1.7; } /* The heading band's desktop spacing (mb-20 / 5rem) is dead space here. `.mb-20` / `.mb-7` are Tailwind utilities from the CDN sheet, so these carry `!important` for the same reason as the grid override below. */ #heritageFallback .wrap > .mb-20 { margin-bottom: clamp(28px, 7vw, 40px) !important; } /* ------------------------------------------------------------------ FIND YOUR MATERIAL — TWO-UP CATEGORY GRID This is a six-item category menu, not a gallery. Full-width tiles turn it into six screens of scrolling to read six words. A two-up grid of portrait crops shows the whole set at once, which is what a menu is for, and portrait suits the standing-piece photography better than the desktop landscape ratio. ------------------------------------------------------------------ */ /* `!important` is deliberate: Tailwind is loaded from a CDN and injects its own sheet, so `sm:grid-cols-2` (min-width:640px) is live across 640-767px at equal specificity and would otherwise win on source order. */ #materialFallback .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } #categories .tile { aspect-ratio: 3/4; min-height: 0; border-radius: 14px; /* The borderless desktop presentation reads as floating plates at size; at thumbnail scale the tiles need an edge to separate from the bed. */ border: 1px solid var(--line); overflow: hidden; } /* `contain` letterboxes badly once a tile is this small — `cover` fills the crop. Less grayscale too: at thumbnail size the material is the only thing distinguishing one tile from the next, so the colour has to read. */ /* `!important` on the filter: the later `@media (hover:none)` block lifts every `.tile-img` to `grayscale(0) brightness(.86)` for touch, which matches every phone and would wash out the label against the veil. The un-greyed part of that intent is kept here, just darker. */ #categories .tile-img { object-fit: cover; filter: grayscale(0.2) brightness(0.7) !important; } /* A stronger veil: the label sits over a much smaller image here, so it needs its own ground to stay legible against a busy crop. */ #categories .tile-veil { background: linear-gradient(180deg, transparent 42%, rgba(5, 5, 6, 0.94)); } /* The label sits over the veil at the tile foot. `flex-wrap:wrap` lets the longest category ("Tournament") break rather than overflow a half-width tile, and the arrow is kept from shrinking so it never lands alone. */ #categories .tile-label { right: 0; flex-wrap: wrap; padding: 12px 12px 13px; font-size: clamp(14px, 3.9vw, 16.4px); line-height: 1.15; gap: 4px 6px; } #categories .tile-label i { font-size: 0.75em; flex: none; } #materialFallback .mb-7 { margin-bottom: clamp(24px, 6vw, 32px) !important; } } @media (max-width: 640px) { /* Tile sizing for this range now lives in the `max-width:767px` block with the rest of the one-per-row mobile grid — a `min-height` here would cascade over it and reintroduce the letterboxed short tile. */ .rail-btn { width: 34px; height: 34px; font-size: 11px; } :is(div, header):has(> .slider-nav) { gap: 12px; } .slider-nav { gap: 8px; } /* Menu type steps down with the viewport so six links plus the header still fit one screen without scrolling. */ .mobile-link { font-size: 10.4px; letter-spacing: 0.2em; padding-block: 12.8px; } .mobile-link span { font-size: clamp(22.4px, 6.2vw, 30.4px); } .uc-slider:not(.slick-initialized) > * { flex: 0 0 100%; } } @media (max-width: 600px) { .wrap { padding-inline: 20px; } .brand-ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, 0.1); } .section-pad { padding-block: clamp(11.2px, 2.6vw, 16px); } .section-title { font-size: clamp(23.6px, 4.4vw, 36.4px); line-height: 1.1; } .card-body { padding: 20px; } .card-copy { font-size: 12.8px; } .card-title { font-size: 21.6px; } .product-body { padding: 18.4px 17.6px 22.4px; } .product-name { font-size: 16px; } .product-price { font-size: 15.2px; } .rail-body { padding: 20px 20px 22.4px; gap: 8px; } .rail-body .product-name { font-size: 19.2px; } .rail-body .product-price { padding-top: 13px; font-size: 16px; } .arrival-card { border-radius: 20px; } .arrival-body { padding: 20px 20px 22px; gap: 11px; } .arrival-head { gap: 12px; } .arrival-head .product-name { font-size: 19.2px; } .arrival-head .product-price { font-size: 16px; } .arrival-body .product-cat { margin: 0; } .testi-card { padding: 22.4px; } /* Tighten the quote-to-footer gap, not .testi-foot's margin-top: that stays `auto` so the footer keeps pinning to the card foot at every width. */ .testi-quote { margin-bottom: 24px; } .testi-foot { padding-top: 19.2px; } .testi-avatar { width: 40px; height: 40px; } .promo-banner .btn-primary { width: 100%; } .counter-num { font-size: clamp(30.4px, 9vw, 41.6px); } .counter-cap { font-size: 8.96px; letter-spacing: 0.16em; } .social-dot { width: 36.8px; height: 36.8px; font-size: 8.96px; } .icon-btn { width: 38.4px; height: 38.4px; } /* Quick view is always visible on touch â€” hover never fires */ .quick-view { transform: translate(-50%, 0); opacity: 1; bottom: 14.4px; padding: 10.4px 19.2px; font-size: 9.28px; } } @media (max-width: 480px) { .hero-chess-wrapper { width: 75%; } .foot-social, .hero-inner .hero-content .hero-eyebrow { justify-content: center; } .hero-inner .hero-col, .hero-inner .hero-content .hero-sub { max-width: 100%; width: 100%; } .card-cta, .testi-foot { justify-content: center; } /* ---- Uniform control height ---- Buttons, inputs and selects each derive their height from their own padding (17.6px on .btn-primary/.btn-ghost, 14.4px on .btn-line, 16.8px on .luxe-input) and several are overridden per-page with Tailwind `!py-*` utilities. The result on a phone is a column of controls that all differ by a few pixels. Here every control is pinned to one height token and the vertical padding is dropped, so the height comes from the box rather than from whatever padding each control happened to carry. `!important` is unavoidable: the per-page overrides are Tailwind `!py-*` utilities, which are themselves `!important` and cannot be outranked by specificity alone. */ :root { --control-h: 46px; } .btn-primary, .btn-ghost, .btn-line, .btn-magnetic, .luxe-input, .ui-select, select.luxe-input, input.luxe-input { height: var(--control-h) !important; min-height: var(--control-h); padding-block: 0 !important; line-height: 1.1; } /* Inputs and selects need their text vertically centred once the padding that used to do it is gone. Buttons already centre via inline-flex. */ .luxe-input, .ui-select { display: flex; align-items: center; } /* A flex display on a text input is inert in most engines, so the centring above is belt-and-braces; this keeps the caret and value centred where it is ignored. */ input.luxe-input { display: block; line-height: var(--control-h); } /* The textarea is exempt — it is multi-line by definition and a fixed height would defeat it. `.luxe-input--area` is matched too: contact.html defines that modifier in a page-scoped