* { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* Reserves the scrollbar's width whether or not it's actually showing, so toggling html.scroll-locked (every drawer/popup: cart, quick view, account) never changes the page's usable width. Without this, that width change nudges every percentage/vw-based centered element -- most visibly the featured carousel's cards, which visibly shifted a few px sideways the instant a drawer opened. */ scrollbar-gutter: stable; /* "proximity", not "mandatory" -- only pulls the featured carousel into frame when the user has already scrolled to a stop near it; never fights or traps a scroll gesture headed further down to the grid. */ scroll-snap-type: y proximity; } body { background: #000; color: #fff; font-family: 'Archivo', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: #E4DDCB; text-decoration: none; } a:hover { color: #fff; } ::selection { background: #E4DDCB; color: #000; } /* Applied to while a popup/panel (quick view, cart, account) is open, so the page underneath can't be scrolled at the same time. */ html.scroll-locked { overflow: hidden; } @keyframes shimmer { 0% { transform: translate(0,0); } 25% { transform: translate(-2%,1%); } 50% { transform: translate(1%,-2%); } 75% { transform: translate(-1%,-1%); } 100% { transform: translate(0,0); } } .grain-fx { position: absolute; inset: -40%; pointer-events: none; opacity: 0; transition: opacity .6s ease; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E"); mix-blend-mode: screen; } .relic-cell:hover .grain-fx { opacity: .16; animation: shimmer 1.2s steps(4) infinite; } .page { min-height: 100vh; min-height: 100svh; background: #000; position: relative; } .page-grain { position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: .05; mix-blend-mode: screen; background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22200%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.7%22 numOctaves=%222%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/%3E%3C/svg%3E'); } /* NAV */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 22px clamp(20px,5vw,64px); background: #000; } .nav-mark { font-size: 15px; font-weight: 800; letter-spacing: .42em; color: #fff; text-transform: uppercase; } /* HERO */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: 1fr; align-items: center; padding: 0 clamp(20px,5vw,64px); overflow: hidden; background: #000; } .fc-stars { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .fc-stars .star { position: absolute; top: var(--y); left: var(--x); width: var(--size); height: var(--size); border-radius: 50%; background: #fff; box-shadow: 0 0 4px 1px rgba(255,255,255,.65); opacity: var(--min-op); animation: star-twinkle var(--dur) ease-in-out var(--delay) infinite; } @keyframes star-twinkle { 0%, 100% { opacity: var(--min-op); transform: scale(.75); } 50% { opacity: var(--max-op); transform: scale(1.3); } } @media (prefers-reduced-motion: reduce) { .fc-stars .star { animation: none; opacity: .85; } } .hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(0,0,0,.75) 0%, rgba(0,0,0,.15) 22%, rgba(0,0,0,.15) 68%, rgba(0,0,0,.1) 100%); pointer-events: none; } .hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1440px; margin: 0 auto; padding-top: 14vh; padding-bottom: 8vh; } .hero-kicker { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: #E4DDCB; } .hero-headline { position: relative; margin-top: clamp(32px,8vh,96px); text-align: center; pointer-events: none; } .hero-headline h1 { position: relative; font-family: 'Pirata One', 'Archivo', serif; font-size: clamp(64px,17vw,260px); line-height: .9; font-weight: 400; letter-spacing: .01em; text-transform: uppercase; mix-blend-mode: difference; color: #fff; animation: title-float 6.5s ease-in-out infinite; } @keyframes title-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @media (prefers-reduced-motion: reduce) { .hero-headline h1 { animation: none; } } .hero-foot { display: flex; flex-wrap: wrap; gap: 24px; justify-content: flex-end; align-items: flex-end; margin-top: clamp(24px,5vh,56px); } .hero-copy { max-width: 34ch; font-size: clamp(15px,1.6vw,19px); line-height: 1.5; font-weight: 400; color: #cfcabd; } .cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; border: 1px solid #E4DDCB; color: #E4DDCB; padding: 16px 26px; transition: background .3s ease, color .3s ease; } .cta:hover { background: #E4DDCB; color: #000; } .scroll-cue { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); font-size: 10px; letter-spacing: .4em; text-transform: uppercase; color: #6a675e; } /* FEATURED CAROUSEL -- tablet/laptop only, see the .featured-carousel rule inside the mobile media query at the bottom of this file. Five cards sit in the DOM at all times; only three (offsets -1/0/1) are ever visible, the other two wait off-stage at 0 opacity so stepping never has to pop a fresh card in from nowhere. Positions are true points on a circle (see the per-offset transforms below) rather than a straight left/right fan, which is what makes stepping read as the stage turning, not sliding. Every card reads as a covered canvas by default (a rack of stretched, undisplayed studies); only the centered one is ever clickable, and opening it is a one-way reveal for the session -- .featured-carousel.is-open stays set once triggered, so browsing to the next specimen afterward swaps its content in already-open rather than replaying the animation. */ .featured-carousel { position: relative; max-width: 1600px; margin: 0 auto; padding: clamp(50px,9vh,110px) clamp(20px,5vw,64px) clamp(70px,11vh,120px); /* The magnetic pull target -- centers the whole composition in the viewport once a scroll gesture settles nearby, so it's never left half-cropped mid-section. */ scroll-snap-align: center; } /* Loading skeleton -- shown from first paint (needs no data), swapped for #fcComposition the moment initFeaturedCarousel has real items. Without this the section was simply absent while the live admin-config fetch was in flight, which read as "it's not there" rather than "it's loading". */ .fc-loading { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 18px; } .fc-loading[hidden] { display: none; } .fc-loading-canvas { width: clamp(230px,24vw,360px); aspect-ratio: 5/7; background: #fff; border: 1px solid rgba(0,0,0,.15); box-shadow: inset 0 0 0 6px rgba(0,0,0,.05), inset 0 2px 10px rgba(0,0,0,.12); display: flex; align-items: center; justify-content: center; } .fc-loading-bar { width: 160px; height: 9px; background: linear-gradient(90deg, rgba(228,221,203,.08), rgba(228,221,203,.24), rgba(228,221,203,.08)); background-size: 200% 100%; animation: fc-loading-shimmer 1.6s ease-in-out infinite; } @keyframes fc-loading-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .fc-loading-bar { animation: none; opacity: .5; } } /* Always a row -- .fc-info reserves its column width even while closed (just invisible), and .fc-stage compensates with a rightward transform so it still reads as centered. That means opening never snaps a layout mode; it only animates two transforms (stage: translateX+scale, info: opacity), so the "shrinks and moves left" motion stays genuinely smooth instead of a flex-direction jump cross-faded to hide the seam. */ .fc-composition { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: clamp(24px,5vw,64px); transition: gap 1.05s cubic-bezier(.65,0,.35,1), transform 1.05s cubic-bezier(.65,0,.35,1); } .featured-carousel.is-open .fc-composition { /* Tighter once open -- pulls .fc-info in closer to the (now bigger) photo instead of leaving it stranded out at the browsing-mode gap. flex-start + a flat padding-left, not centered + a transform: shift -- a centering-based shift's safe distance from .fc-back depends on .fc-stage/.fc-info's widths, which is exactly the kind of interacting clamp() math that kept quietly breaking at different viewport widths. A flat padding-left is safe from .fc-back (~96px wide, same content edge) regardless of viewport or how big the photo gets -- both this and .fc-back's own left offset come off the same section padding, so that part cancels out of the safety margin entirely. */ gap: clamp(8px,2vw,28px); justify-content: flex-start; padding-left: clamp(130px,11vw,170px); } .fc-composition[hidden] { display: none; } .fc-stage { position: relative; /* All its content (.fc-tilt, cards) is position:absolute, so as a flex item it has no in-flow content to size itself by width -- without an explicit width it collapses to 0, taking every card's percentage- based centering down with it. Matches the center card's own width; flanking cards spill outside this box, which is fine since nothing here clips overflow. */ width: clamp(230px,25vw,360px); flex-shrink: 0; height: clamp(340px,44vw,520px); perspective: 1500px; perspective-origin: 50% 50%; /* Leaves vertical page scroll to the browser; horizontal drags are read by script.js's own pointer listeners (tablet is touch-first). */ touch-action: pan-y; transition: transform 1.05s cubic-bezier(.65,0,.35,1), width 1.05s cubic-bezier(.65,0,.35,1), height 1.05s cubic-bezier(.65,0,.35,1); transform: translateX(calc((clamp(340px,40vw,560px) + clamp(24px,5vw,64px)) / 2)) scale(1); } .featured-carousel.is-open .fc-stage { /* Grows instead of receding once opened -- .fc-info no longer needs to steal space from it, so the specimen gets to read as the main event. A real width/height increase, not just a transform: scale -- scale only grows the *visual*, not the box .fc-composition's gap reserves, which let the enlarged photo paint straight over the title/price. */ transform: translateX(0) scale(1); width: clamp(320px,35vw,500px); height: clamp(480px,62vw,730px); } .fc-stage::before { /* soft museum-light pool staged beneath the centered specimen -- pulses slowly so the specimen never sits perfectly still. */ content: ''; position: absolute; left: 50%; top: 46%; width: clamp(280px,32vw,480px); height: clamp(160px,18vw,240px); transform: translate(-50%,-50%); background: radial-gradient(ellipse at center, rgba(228,221,203,.16) 0%, rgba(228,221,203,.05) 45%, transparent 75%); filter: blur(6px); pointer-events: none; z-index: 0; animation: fc-glow-pulse 4.2s ease-in-out infinite; } @keyframes fc-glow-pulse { 0%, 100% { opacity: .75; transform: translate(-50%,-50%) scale(.97); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.05); } } @media (prefers-reduced-motion: reduce) { .fc-stage::before { animation: none; } .fc-stage { transition: none; } } .fc-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .4s ease-out; } .fc-tilt.is-dragging { transition: none; } .fc-card { position: absolute; top: 50%; left: 50%; width: clamp(230px,25vw,360px); aspect-ratio: 5/7; transform-origin: center center; transition: transform .85s cubic-bezier(.65,0,.35,1), opacity .6s ease, filter .6s ease, width 1.05s cubic-bezier(.65,0,.35,1); will-change: transform, opacity; /* Lets .fc-card-cell's own hover-tilt (a flanking card only, see script.js) render as real 3D depth inside .fc-stage's perspective, instead of being flattened into this card's own 2D plane. */ transform-style: preserve-3d; } /* A specimen marked horizontal in admin -- wider and flatter than the vertical default, sized so its height still lands close to a vertical card's rather than shrinking down to fit the same width. */ .fc-card.is-horizontal { width: clamp(320px,36vw,520px); aspect-ratio: 7/5; } /* Matches .fc-stage's own open-state growth (same ~1.3x ratio) so the card genuinely fills its now-bigger box instead of the box growing around a photo that stayed the old size. */ .featured-carousel.is-open .fc-card[data-fc-offset="0"] { width: clamp(320px,35vw,500px); } .featured-carousel.is-open .fc-card[data-fc-offset="0"].is-horizontal { width: clamp(450px,50vw,730px); } .fc-card-cell { position: relative; width: 100%; height: 100%; background: #050505; border: 1px solid #17160f; overflow: hidden; perspective: 1100px; transition: border-color .3s ease, transform .25s ease-out; } /* Specimens with zero photos uploaded -- same white canvas-texture look the old cover gave every card, kept specifically for the genuinely- empty case so a card never just goes invisible against the cell's own near-black background. Static: nothing to flip to. */ .fc-card-placeholder { position: absolute; inset: 0; background: #fff; border: 1px solid rgba(0,0,0,.15); box-shadow: inset 0 0 0 6px rgba(0,0,0,.05), inset 0 2px 10px rgba(0,0,0,.12); } /* Wraps just the img (+ grain) so the flip on photo-swap (see script.js's render()) can animate independently of .fc-card's own coverflow position transform and .fc-card-cell's own hover-tilt transform -- stacking a third transform onto either of those would fight them instead of composing. Squashes to scaleX(0) at the midpoint (nothing to see -- edge-on) and swaps the src there, same beat as a true rotateY flip but without one: a real 3D rotation here sits nested three transformed levels deep (.fc-stage's perspective, .fc-card's own position transform, .fc-card-cell's hover-tilt), and .fc-card's position transform is frequently mid-animation (scaling .76 -> 1) at the exact moment this fires, which visibly warped the rotation into a plain grow/shrink instead of reading as a flip. A 2D scaleX is immune to all of that. */ .fc-flip-inner { position: relative; width: 100%; height: 100%; transition: transform .5s cubic-bezier(.7,0,.3,1); } .fc-flip-inner.is-flipping { transform: scaleX(0); } @media (prefers-reduced-motion: reduce) { .fc-flip-inner { transition: none; } } .fc-card-cell img { width: 100%; height: 100%; object-fit: contain; display: block; } .fc-card[data-fc-offset="0"] { transform: translate(-50%,-50%) translateZ(0) rotateY(0deg) scale(1); opacity: 1; z-index: 5; filter: brightness(1); cursor: pointer; } .fc-card[data-fc-offset="0"]:hover .fc-card-cell { border-color: #E4DDCB; } .fc-card[data-fc-offset="-1"] { transform: translate(-50%,-50%) translateX(-33vw) translateZ(-230px) rotateY(30deg) scale(.76); opacity: .42; z-index: 4; filter: brightness(.5); cursor: pointer; } .fc-card[data-fc-offset="1"] { transform: translate(-50%,-50%) translateX(33vw) translateZ(-230px) rotateY(-30deg) scale(.76); opacity: .42; z-index: 4; filter: brightness(.5); cursor: pointer; } .fc-card[data-fc-offset="-1"]:hover, .fc-card[data-fc-offset="1"]:hover { filter: brightness(.75); } /* The rack of flanking specimens is a browsing-mode read; once one is opened it should be the only thing on stage, so the flanks fade out with it (reusing .fc-card's own opacity transition) instead of sitting half-visible behind the enlarged photo. */ .featured-carousel.is-open .fc-card[data-fc-offset="-1"], .featured-carousel.is-open .fc-card[data-fc-offset="1"] { opacity: 0; pointer-events: none; } .fc-card:focus-visible { outline: none; } .fc-card:focus-visible .fc-card-cell { border-color: #E4DDCB; } .fc-card[data-fc-offset="-2"] { transform: translate(-50%,-50%) translateX(-20vw) translateZ(-600px) rotateY(60deg) scale(.56); opacity: 0; z-index: 1; pointer-events: none; } .fc-card[data-fc-offset="2"] { transform: translate(-50%,-50%) translateX(20vw) translateZ(-600px) rotateY(-60deg) scale(.56); opacity: 0; z-index: 1; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .fc-card { transition: opacity .3s ease; } } /* Title above, price below -- only for the centered card, and only while browsing (closed); once opened, .fc-info covers this same information at fuller size, so these would just be a redundant duplicate sitting right next to it. */ .fc-card-title, .fc-card-price { position: absolute; left: 0; right: 0; text-align: center; color: #fff; opacity: 0; pointer-events: none; transition: opacity .4s ease; } .fc-card-title { bottom: 100%; margin-bottom: 14px; font-family: 'Pirata One', 'Archivo', serif; font-size: clamp(20px,2.4vw,32px); line-height: 1; text-transform: uppercase; } .fc-card-price { top: 100%; margin-top: 14px; font-size: 15px; font-weight: 700; letter-spacing: .05em; color: #E4DDCB; } .fc-card[data-fc-offset="0"] .fc-card-title, .fc-card[data-fc-offset="0"] .fc-card-price { opacity: 1; } .featured-carousel.is-open .fc-card-title, .featured-carousel.is-open .fc-card-price { opacity: 0; } .fc-info { position: relative; z-index: 2; flex: 0 0 auto; width: clamp(340px,40vw,560px); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; text-align: left; /* Reserves its column width from the start (see .fc-stage's compensating transform above) but stays invisible and inert until the book has been opened. */ opacity: 0; pointer-events: none; transition: opacity .7s ease .35s; } .fc-info .eyebrow { margin-bottom: 0; } /* Pinned to the section's own top-left corner rather than tucked inside .fc-info -- that put it on the right, past the full-width photo, where it read as invisible. Styled like .fc-arrow (solid pill, real contrast) instead of dim uppercase text so it's unmistakable once the book opens. Hover inverts bone-on-transparent to black-on-bone, same move as the hero's .cta, so the two "go" controls read as one family. */ .fc-back { position: absolute; top: clamp(50px,9vh,110px); left: clamp(20px,5vw,64px); z-index: 3; display: inline-flex; align-items: center; gap: 6px; background: rgba(0,0,0,.5); border: 1px solid #E4DDCB; border-radius: 999px; padding: 11px 20px 11px 16px; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #E4DDCB; cursor: pointer; opacity: 0; pointer-events: none; /* No delay on opacity here -- this is the transition that governs closing (reverting from the .is-open rule below, which has its own delayed one for opening). position isn't animatable, so it's already snapped from sticky to this absolute spot the instant the class is removed; starting the fade immediately instead of after a .35s delay stops it sitting fully visible at the jumped position before disappearing -- that lingering jump was the "sputter". */ transition: opacity .3s ease, background-color .3s ease, color .3s ease; } .fc-back:hover { background: #E4DDCB; color: #000; } .featured-carousel.is-open .fc-info { opacity: 1; pointer-events: auto; margin-left: 28px; } /* Was pinned absolute over the section's top-left corner, which put it in the same rectangle the (now bigger, and shifted-left) photo occupies at most viewport widths -- only the widest breakpoint happened to clear it. Dropping it into normal flow, stacked above .fc-composition, makes an overlap with the photo geometrically impossible instead of dependent on these two pieces' sizing staying in sync by coincidence. */ .featured-carousel.is-open .fc-back { /* Sticky -- static (tried first) only ever rendered whichever single spot the section's top padding put it at; the fixed 72px nav (z-index 50) covers that spot at some scroll positions regardless of how much margin sits above it, and once scrolled further into a tall open panel, a static back control is gone entirely rather than staying reachable. Sticky keeps it pinned just under the nav at all times the panel's open. (Tried sticky once before, but paired with a centering transform on .fc-composition that let the photo's shift drift into this same fixed spot -- that's what the flex-start + flat padding-left above now rules out structurally.) */ position: sticky; top: 88px; z-index: 4; display: flex; width: fit-content; margin: 28px 0 28px; opacity: 1; pointer-events: auto; /* Delayed here (opening only) so it doesn't fade in before the stage has visibly started growing -- the base rule's own opacity transition (no delay) is what governs the reverse, closing. */ transition: opacity .7s ease .35s; } .fc-title { font-family: 'Pirata One', 'Archivo', serif; font-size: clamp(36px,4.4vw,70px); line-height: .95; font-weight: 400; text-transform: uppercase; letter-spacing: .01em; color: #fff; /* Locked to one line -- letting long titles wrap made this block taller or shorter per specimen, visibly bobbing everything below it. A long title instead gets shrunk to fit by fitFcTitle() in script.js; overflow stays hidden here only as a safety clip for a title so long even its minimum font size doesn't fit -- no text-overflow ellipsis, since a trailing "…" on a specimen's name read as a cut-off error message. */ white-space: nowrap; overflow: hidden; max-width: 100%; } .fc-arrow { flex-shrink: 0; width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); background: rgba(0,0,0,.45); color: #fff; font-size: 23px; line-height: 1; display: flex; align-items: center; justify-content: center; /* The ‹/› glyphs themselves sit visibly right-of-center in most fonts' own character box -- this pads the button's content box asymmetrically so flexbox's centering lands the glyph in the circle's true center. */ padding: 0 3px 0 0; cursor: pointer; font-family: inherit; transition: background-color .2s ease, border-color .2s ease, color .2s ease; } .fc-arrow:hover { background: rgba(0,0,0,.7); border-color: #E4DDCB; color: #E4DDCB; } .fc-arrow-row { display: flex; align-items: center; gap: 18px; margin-top: 8px; } /* Same dots as the quick-view modal's own image nav, just in a row with the arrows instead of overlaying a photo -- in flow here, not absolute, and sized up slightly to match this panel's bigger arrows. */ .fc-arrow-row .relic-media-dots { position: static; gap: 8px; } .fc-arrow-row .relic-media-dot { width: 8px; height: 8px; } /* Same same-specificity-vs-[hidden] fix as the quick-view modal's dots needed -- .relic-media-dots' own display:flex otherwise beats the UA stylesheet's [hidden]{display:none} and a single-photo specimen's dots row stays visibly flex (just empty) instead of collapsing. */ .fc-arrow-row .relic-media-dots[hidden] { display: none; } /* Bigger than .quick-view-price's shared base -- this panel has more room to itself than the quick-view modal it's borrowed from. */ .fc-price { margin-top: 0; font-size: 22px; } .fc-price.is-empty { visibility: hidden; } /* Only rendered (via the [hidden] attribute, toggled in script.js) for specimens that actually have one -- specimens without stay pixel-for- pixel identical to before this existed, no reserved gap left behind. */ .fc-blurb { font-size: 15px; max-width: 42ch; } .relic-credit-line { margin: 0; font-size: 13px; color: #cfcabd; } .relic-credit-label { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #7d7a70; } .fc-sizes { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } /* Bigger than the shared .size-btn base -- this panel has the width to spare (see .fc-info's own widening) that the quick-view modal doesn't. */ .fc-sizes .size-btn { min-width: 60px; padding: 15px 20px; font-size: 14px; } /* Bigger than .quick-view-add-to-cart's shared base, same reasoning as .fc-price/.fc-sizes above. */ .fc-add-to-cart { min-width: 280px; padding: 20px 28px; font-size: 14px; } /* INDEX HEADER */ .index-header { padding: clamp(60px,12vh,140px) clamp(20px,5vw,64px) clamp(30px,5vh,60px); max-width: 1600px; margin: 0 auto; } .index-header-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; border-bottom: 1px solid #23221e; padding-bottom: 28px; } .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: #E4DDCB; margin-bottom: 16px; } .index-title { font-size: clamp(34px,6vw,84px); line-height: .9; font-weight: 800; letter-spacing: -.03em; text-transform: uppercase; } .index-desc { max-width: 30ch; font-size: 13px; line-height: 1.6; color: #8f8b80; } .index-search-row { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: flex-end; /* Search left, sort pushed to the far right -- they're different jobs (narrowing vs reordering) and sitting them together read as one control. */ justify-content: space-between; gap: 16px 28px; } /* Matches the search field's underline treatment rather than looking like a form control -- they sit on one row and should read as one pair. */ .index-sort { background: none; border: none; border-bottom: 1px solid #33322b; color: #a8a498; font-family: inherit; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; padding: 10px 2px; cursor: pointer; transition: border-color .25s ease, color .25s ease; } .index-sort:hover { color: #E4DDCB; } .index-sort:focus { outline: none; border-color: #E4DDCB; color: #fff; } /* The list itself is drawn by the OS, which defaults to a light popup on a dark page -- ugly, and on some platforms unreadable. */ .index-sort option { background: #0c0b09; color: #E4DDCB; } @media (max-width: 560px) { /* Stacked, both full width -- side by side leaves each too narrow to read the longer option labels, and space-between would strand the sort at the right edge of its own row. */ .index-search-row { gap: 6px; justify-content: flex-start; } .index-search, .index-sort { max-width: none; width: 100%; } } .index-search { width: 100%; max-width: 360px; background: none; border: none; border-bottom: 1px solid #33322b; color: #fff; font-family: inherit; font-size: 13px; letter-spacing: .02em; padding: 10px 2px; transition: border-color .25s ease; } .index-search::placeholder { color: #6a675e; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; } .index-search:focus { outline: none; border-color: #E4DDCB; } .index-search::-webkit-search-cancel-button { filter: invert(.7); opacity: .7; cursor: pointer; } /* GRID */ .grid-section { max-width: 1600px; margin: 0 auto; padding: 0 clamp(20px,5vw,64px) clamp(60px,12vh,140px); } .grid-search-empty { font-size: 13px; color: #6a675e; padding: 40px 0; text-align: center; } .grid-search-empty[hidden] { display: none; } .grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: clamp(28px,3vw,56px); } .relic.is-search-hidden { display: none; } .relic-cell { position: relative; width: 100%; aspect-ratio: 4/5; background: #050505; border: 1px solid #17160f; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* A specimen marked horizontal in admin -- width still fills the grid column as normal, only the shape flips. */ .relic-cell.is-horizontal { aspect-ratio: 5/4; } .relic-no { position: absolute; top: 12px; left: 14px; font-size: 11px; font-weight: 700; letter-spacing: .24em; color: #E4DDCB; mix-blend-mode: difference; pointer-events: none; } .relic-media { position: absolute; inset: 0; } .relic-media img { width: 100%; height: 100%; /* contain, not cover -- uploaded photos aren't always the card's exact 4:5 shape, and cropping to fill it was cutting off real content (sleeves, edges) instead of just letterboxing on the dark background. */ object-fit: contain; display: block; /* Plain fade, no scale -- a quick, quiet dissolve between photos rather than any kind of zoom/shrink motion. */ transition: opacity .38s ease; } .relic-media img.is-changing { opacity: 0; } .relic-media-dots { position: absolute; z-index: 2; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; } .relic-media-dot { width: 6px; height: 6px; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); background: rgba(0,0,0,.4); padding: 0; cursor: pointer; } .relic-media-dot.is-active { background: #E4DDCB; border-color: #E4DDCB; } .relic-media-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); background: rgba(0,0,0,.45); color: #fff; font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; /* Same glyph-centering correction as .fc-arrow -- the ‹/› characters themselves sit right-of-center in most fonts' own character box. */ padding: 0 2px 0 0; cursor: pointer; opacity: 0; transition: opacity .2s ease, background-color .2s ease, border-color .2s ease; } .relic-media:hover .relic-media-arrow, .quick-view-media:hover .relic-media-arrow { opacity: 1; } .relic-media-arrow:hover { background: rgba(0,0,0,.7); border-color: #E4DDCB; color: #E4DDCB; } .relic-media-arrow--prev { left: 8px; } .relic-media-arrow--next { right: 8px; } /* Touch devices have no real :hover, so the opacity:0 default above would otherwise leave these arrows invisible (or stuck needing a first "hover" tap before a second tap registers as a click) on phones/tablets. */ @media (hover: none) { .relic-media-arrow { opacity: .9; } } .relic-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 16px; } .relic-meta h3 { font-size: clamp(17px,1.5vw,21px); font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; } .relic-meta-right { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; } .relic-meta .edition { font-size: 10px; font-weight: 600; letter-spacing: .2em; color: #6a675e; } .relic-price { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #E4DDCB; } .relic-price[hidden] { display: none; } /* Sits under the edition and price as another catalogue fact. Same small letterspaced treatment as .edition, but in the accent used elsewhere for things worth noticing, so it reads as a distinction rather than metadata. */ .relic-original { font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #c9a24b; text-align: right; white-space: nowrap; } .relic-original[hidden] { display: none; } .relic-tags { display: flex; gap: 18px; margin-top: 8px; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #7d7a70; } .relic-blurb { margin-top: 12px; max-width: 32ch; font-size: 13px; line-height: 1.55; color: #a09c90; } /* Admin-authored emphasis inside a blurb (==like this==) -- see siteconfig.js's renderBlurbText. Shared by every place a blurb renders (grid cards, quick view, the featured carousel panel). */ .blurb-glow { color: #ff3b3b; text-shadow: 0 0 6px rgba(255,59,59,.75), 0 0 16px rgba(255,59,59,.45); animation: blurb-glow-pulse 2.4s ease-in-out infinite; } @keyframes blurb-glow-pulse { 0%, 100% { text-shadow: 0 0 6px rgba(255,59,59,.75), 0 0 16px rgba(255,59,59,.45); } 50% { text-shadow: 0 0 10px rgba(255,59,59,.95), 0 0 24px rgba(255,59,59,.65); } } @media (prefers-reduced-motion: reduce) { .blurb-glow { animation: none; } } /* ABOUT */ .about { border-top: 1px solid #23221e; padding: clamp(70px,14vh,160px) clamp(20px,5vw,64px); max-width: 1200px; margin: 0 auto; text-align: center; } .about-lead { font-size: clamp(24px,4vw,52px); line-height: 1.12; font-weight: 700; letter-spacing: -.02em; color: #fff; max-width: 20ch; margin: 0 auto; } .about-copy { margin: 36px auto 0; max-width: 52ch; font-size: 14px; line-height: 1.7; color: #8f8b80; } /* FOOTER */ .footer { border-top: 1px solid #17160f; padding: 48px clamp(20px,5vw,64px); display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; } .footer-mark { /* Equal flex-grow with .footer-copy below is what actually centers .footer-links -- with space-between and only 3 items, the middle one sits wherever leaves the gaps on either side equal, which is only the true center when the two outer items are the same width. "Relics" is much shorter than the copyright line, so without this the links visibly drift left of center. */ flex: 1 1 0; font-size: 13px; font-weight: 800; letter-spacing: .4em; text-transform: uppercase; } .footer-links { /* Shrinkable and wrapping: this row grew from 4 links to 6 (Privacy and Cookie Preferences), which at flex:0 0 auto with no wrap measured 611px -- overflowing a 375px phone sideways. */ flex: 0 1 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; } .footer-links a, .footer-links button { color: #7d7a70; transition: color .3s ease; background: none; border: none; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; } .footer-links a:hover, .footer-links button:hover { color: #fff; } .footer-copy { flex: 1 1 0; text-align: right; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: #4d4a44; } .footer-admin { flex-basis: 100%; text-align: center; font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #4d4a44; transition: color .3s ease; } .footer-admin:hover { color: #E4DDCB; } .cookie-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: #0c0b09; border-top: 1px solid #33322b; padding: 18px clamp(20px,5vw,64px); display: flex; /* Stays a single wide strip -- the text wraps internally onto a second line within its own column (see min-width:0 below) rather than the whole button group dropping beneath it, which was making the bar taller instead of just staying long. Phones still stack (see the max-width:560px override) -- there's no room to stay side-by-side there. */ flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 24px; box-shadow: 0 -8px 24px rgba(0,0,0,.4); } .cookie-consent[hidden] { display: none; } .cookie-consent-text { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.55; color: #cfcabd; } .cookie-consent-text a { color: #E4DDCB; } .cookie-consent-actions { display: flex; gap: 10px; flex-shrink: 0; } .cookie-consent-btn { padding: 11px 22px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; background: #E4DDCB; color: #000; border: none; cursor: pointer; font-family: inherit; white-space: nowrap; } .cookie-consent-btn:hover { background: #fff; } .cookie-consent-btn-ghost { background: transparent; color: #cfcabd; border: 1px solid #33322b; } .cookie-consent-btn-ghost:hover { border-color: #E4DDCB; color: #fff; } @media (max-width: 560px) { .cookie-consent { flex-direction: column; align-items: stretch; } .cookie-consent-actions { justify-content: flex-end; } } /* reveal-on-scroll (progressively enhanced by script.js) */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1.1s cubic-bezier(.2,.6,.2,1), transform 1.1s cubic-bezier(.2,.6,.2,1); } /* Specimen cards rise a bit further and settle faster than the rest of the page's reveals -- snappier, staggered (transition-delay set per-card by script.js), closer to the cascading card-reveal look. Must come before [data-reveal].is-visible below: they share specificity, so source order decides the winner, and .is-visible needs to be the one that wins once a card is actually revealed (transform: translateY(0)). */ .relic[data-reveal] { transform: translateY(44px); transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1); } [data-reveal].is-visible { opacity: 1; transform: translateY(0); } .no-js [data-reveal] { opacity: 1; transform: none; } /* SPECIMEN QUICK VIEW */ .quick-view-backdrop { position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,.75); display: flex; align-items: center; justify-content: center; padding: 24px; } .quick-view-backdrop[hidden] { display: none; } .quick-view-card { position: relative; width: 100%; max-width: 980px; max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: #0a0a08; border: 1px solid #23221e; display: grid; grid-template-columns: 1.1fr 1fr; } /* Prev/next flank the frame as real flex siblings now, each in their own reserved column, instead of floating absolute on top of the photo -- "respective side, no overlap." Only the frame itself (not the arrows) gets clipped/aspect-ratio'd, and dots stay scoped to the frame so they overlay just the image, not the arrow columns beside it. */ .quick-view-media { position: relative; display: flex; flex-direction: column; background: #050505; } .quick-view-media-row { display: flex; align-items: center; gap: 6px; padding: 0 6px; } /* Dots used to sit absolute over the frame's own bottom edge -- moved below the row (frame + flanking arrows) instead so they don't overlay the photo, and sized up a bit since they're no longer squeezed into a 10px sliver at the image's edge. */ .quick-view-media .relic-media-dots { position: static; padding: 10px 0 8px; gap: 8px; } /* Same-specificity author display:flex above otherwise beats the UA stylesheet's [hidden]{display:none}, same issue .quick-view-price[hidden] already worked around -- without this, a single-photo specimen's [hidden] dots row stays visibly flex (just empty) instead of collapsing away. */ .quick-view-media .relic-media-dots[hidden] { display: none; } .quick-view-media .relic-media-dot { width: 9px; height: 9px; } .quick-view-media-frame { position: relative; flex: 1; min-width: 0; aspect-ratio: 4/5; overflow: hidden; } /* Higher specificity than both this and the mobile override below, so it wins at every viewport width without needing its own media query. */ .quick-view-media-frame.is-horizontal { aspect-ratio: 3/2; } .quick-view-media-frame img { width: 100%; height: 100%; object-fit: contain; display: block; /* Plain fade, no scale -- matches the grid card's dissolve rather than any kind of zoom/shrink motion. */ transition: opacity .38s ease; } .quick-view-media-frame img.is-changing { opacity: 0; } .quick-view-media-frame img[hidden] { display: none; } .quick-view-media-frame.quick-view-media--empty::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E"); opacity: .12; } /* No longer an absolute overlay on the photo, so no hover-to-reveal needed -- these are just always-visible flanking controls now. */ /* Bigger than the shared 28px base -- they're real flanking controls here now (not a tiny overlay hint), and 28px was a small target to land a click/tap on. Scoped to quick-view only, not the grid cards' hover-preview arrows sharing the base class. */ .quick-view-media .relic-media-arrow { position: static; transform: none; flex-shrink: 0; opacity: 1; width: 40px; height: 40px; font-size: 19px; padding: 0 3px 0 0; } /* Same same-specificity-vs-[hidden] issue as .relic-media-dots above -- was masked before by opacity:0 hiding a hidden-but-still-flex arrow anyway; making them opacity:1 unconditionally exposed it: a specimen with zero images showed both arrows despite prevBtn/nextBtn.hidden. */ .quick-view-media .relic-media-arrow[hidden] { display: none; } .quick-view-close { position: absolute; top: 12px; right: 12px; z-index: 5; width: 32px; height: 32px; background: rgba(0,0,0,.6); border: 1px solid #33322b; color: #fff; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: background-color .2s ease, border-color .2s ease, color .2s ease; } /* Same bone-invert as .fc-back/.cta/.size-btn. */ .quick-view-close:hover { background: #E4DDCB; color: #000; border-color: #E4DDCB; } .quick-view-info { padding: clamp(24px,4vw,40px); display: flex; flex-direction: column; gap: 14px; } .quick-view-edition { font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #6a675e; } .quick-view-info h3 { font-size: clamp(22px,3vw,32px); font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; } .quick-view-price { font-size: 16px; font-weight: 700; color: #E4DDCB; margin-top: -6px; } .quick-view-price[hidden] { display: none; } .quick-view-blurb { font-size: 14px; line-height: 1.6; color: #a09c90; } .quick-view-tags { display: flex; flex-wrap: wrap; gap: 14px; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #7d7a70; } .quick-view-sizes { margin-top: 8px; } .quick-view-sizes-label { font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #7d7a70; margin-bottom: 10px; } .quick-view-size-options { display: flex; flex-wrap: wrap; gap: 8px; } .size-btn { min-width: 44px; padding: 10px 14px; border: 1px solid #33322b; background: transparent; color: #cfcabd; font-size: 12px; font-weight: 700; letter-spacing: .08em; cursor: pointer; font-family: inherit; transition: background .2s ease, color .2s ease, border-color .2s ease; } /* Same bone-invert as .fc-back/.cta -- was border-only, easy to miss. */ .size-btn:hover { background: #E4DDCB; color: #000; border-color: #E4DDCB; } .size-btn.is-selected { background: #E4DDCB; color: #000; border-color: #E4DDCB; } .quick-view-size-error { font-size: 11px; color: #ff6b6b; margin-top: -4px; } /* Names the photo on screen, which is the colour being bought. Quiet by design -- it confirms a choice already made by looking, it doesn't ask the customer to make one. */ .quick-view-colour-code { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #a8a498; margin-top: -4px; } .quick-view-colour-code[hidden] { display: none; } .quick-view-add-to-cart { /* Pushes the button to the bottom of the info column instead of wherever the text content happens to end -- the column stretches to match the media image's height (grid default align-items: stretch), so this auto margin has real space to absorb on desktop's side-by-side layout. Harmless on the mobile stacked layout below, where the column has no extra height to push into. */ margin-top: auto; padding: 15px 20px; background: #E4DDCB; color: #000; border: none; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; font-family: inherit; transition: background .3s ease; } .quick-view-add-to-cart:hover { background: #fff; } .quick-view-add-to-cart.is-added { background: #6a675e; color: #fff; } /* NAV RIGHT (auth + cart) */ .nav-right { display: flex; align-items: center; gap: 22px; } .nav-auth { display: flex; align-items: center; } .nav-auth-btn { background: none; border: none; color: #E4DDCB; font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; cursor: pointer; font-family: inherit; } .nav-auth-btn:hover { color: #fff; } .nav-signin-btn { background: #E4DDCB; color: #000; padding: 8px 18px; } .nav-auth-btn.nav-signin-btn:hover { background: #fff; color: #000; } /* NAV CART */ .nav-cart { background: none; border: none; color: #E4DDCB; font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 8px; } .nav-cart:hover { color: #fff; } .nav-cart-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; background: #E4DDCB; color: #000; border-radius: 50%; font-size: 10px; font-weight: 700; letter-spacing: normal; } /* CART -- slide-in drawer from the right, separate from the centered quick-view modal */ .cart-backdrop { position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: opacity .25s ease; } .cart-backdrop.is-open { opacity: 1; pointer-events: auto; } .cart-panel { position: absolute; top: 0; right: 0; height: 100%; width: 100%; max-width: 420px; background: #0a0a08; border-left: 1px solid #23221e; display: flex; flex-direction: column; padding: clamp(20px,4vw,32px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.6,.2,1); } .cart-backdrop.is-open .cart-panel { transform: translateX(0); } .cart-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .cart-panel-header .quick-view-close { position: static; } .cart-title { font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #E4DDCB; } .cart-empty { font-size: 13px; color: #6a675e; } .cart-empty[hidden] { display: none; } .cart-subtotal { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding-top: 18px; border-top: 1px solid #23221e; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #E4DDCB; } .cart-subtotal[hidden] { display: none; } .cart-items { display: flex; flex-direction: column; gap: 18px; } .cart-item { display: flex; gap: 14px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid #17160f; } .cart-item-media { width: 56px; height: 70px; flex-shrink: 0; background: #050505; border: 1px solid #17160f; overflow: hidden; } .cart-item-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .cart-item-info { flex: 1; min-width: 0; } .cart-item-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; } .cart-item-size { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #7d7a70; margin-top: 4px; } .cart-item-price { font-size: 12px; font-weight: 700; color: #E4DDCB; margin-top: 4px; } .cart-item-qty { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 11px; } .cart-item-qty button { width: 20px; height: 20px; background: none; border: 1px solid #33322b; color: #cfcabd; cursor: pointer; font-size: 12px; line-height: 1; font-family: inherit; } .cart-item-qty button:hover { border-color: #E4DDCB; color: #E4DDCB; } .cart-item-remove { align-self: flex-start; background: none; border: none; color: #6a675e; font-size: 16px; line-height: 1; cursor: pointer; } .cart-item-remove:hover { color: #ff6b6b; } /* ACCOUNT (referral code + store credit) -- shares .cart-backdrop/.cart-panel with the cart drawer, only the content below the header is bespoke. */ .account-section { padding: 18px 0; border-bottom: 1px solid #17160f; } .account-label { font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #7d7a70; margin-bottom: 10px; } .account-credit { font-size: 26px; font-weight: 800; color: #E4DDCB; } .account-code-row { display: flex; align-items: center; gap: 10px; } .account-code { font-size: 18px; font-weight: 700; letter-spacing: .18em; color: #fff; background: #050505; border: 1px solid #17160f; padding: 8px 12px; flex: 1; } .account-copy-btn { background: none; border: 1px solid #33322b; color: #cfcabd; padding: 9px 14px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; font-family: inherit; } .account-copy-btn:hover { border-color: #E4DDCB; color: #E4DDCB; } .account-copy-btn.is-copied { border-color: #E4DDCB; color: #E4DDCB; } .account-hint { margin-top: 10px; font-size: 12px; line-height: 1.55; color: #8f8b80; } .account-redeem-row { display: flex; gap: 10px; } .account-redeem-input { flex: 1; background: #17160f; border: 1px solid #33322b; color: #fff; padding: 9px 10px; font-size: 13px; font-family: inherit; text-transform: uppercase; letter-spacing: .1em; } .account-redeem-input:focus { outline: none; border-color: #E4DDCB; } .account-redeem-btn { background: #E4DDCB; color: #000; border: none; padding: 9px 16px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; font-family: inherit; } .account-redeem-btn:hover:not(:disabled) { background: #fff; } .account-redeem-btn:disabled { opacity: .5; cursor: default; } .account-redeem-error { margin-top: 8px; font-size: 12px; color: #ff6b6b; } .account-redeem-error[hidden] { display: none; } .account-referred-note { margin-top: 18px; font-size: 12px; color: #6a675e; } .account-referred-note[hidden] { display: none; } /* Clerk's "Secured by Clerk" development-mode badge has no documented appearance.elements key (confirmed live -- `elements: { badge: {...} }` has no effect), so its text can only be reached via the class names clerk-js itself renders. Those are internal/hashed rather than the stable "cl-*" names Clerk documents for everything else, so this is pinned to what the current @clerk/clerk-js@latest build outputs and may silently stop matching (not break anything, just revert to Clerk's default cream-on-cream) after a future Clerk release. */ .cl-internal-i2orb6, .cl-internal-uf3377 { color: #000 !important; } /* mobile overrides -- kept last so they win the cascade regardless of where the rules they adjust are declared above */ @media (max-width: 560px) { /* Tablet/laptop-only feature -- the coverflow composition needs width the phone breakpoint doesn't have; the grid below is the phone path. */ .featured-carousel { display: none; } .nav-mark { font-size: 13px; letter-spacing: .3em; } .nav-right { gap: 10px; } .nav-auth-btn { font-size: 9px; } .nav-cart { font-size: 12px; gap: 6px; } .nav-cart-count { min-width: 20px; height: 20px; font-size: 11px; } .hero-kicker { flex-direction: column; align-items: flex-start; gap: 6px; } .hero-foot { margin-top: clamp(180px,26vh,240px); } .quick-view-backdrop { padding: 10px; } .quick-view-card { grid-template-columns: 1fr; max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); } .quick-view-media-frame { aspect-ratio: 4/3; } .quick-view-info { padding: 18px; gap: 10px; } .quick-view-close { top: 8px; right: 8px; width: 28px; height: 28px; } .cart-panel { padding: 16px; } /* The footer's three blocks (mark / links / copyright) are sized to center the links between the outer two on a wide screen; stacked on a phone that arithmetic just leaves the mark and copyright pinned to opposite edges, so center all three instead. */ .footer { justify-content: center; text-align: center; } .footer-mark, .footer-copy { flex: 0 0 100%; text-align: center; } .footer-links { gap: 16px 20px; } } /* ---------------------------------------------------------- checkout --- Second step inside the cart drawer, plus the confirmation card shown once the order actually exists in the database. */ .checkout-btn { width: 100%; margin-top: 16px; padding: 15px 20px; background: #E4DDCB; color: #000; border: none; font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: background .25s ease; } .checkout-btn:hover { background: #fff; } .checkout-btn[hidden] { display: none; } .checkout { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; } .checkout[hidden] { display: none; } .checkout-back { align-self: flex-start; background: none; border: none; padding: 0 0 4px; color: #7d7a70; font-family: inherit; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; } .checkout-back:hover { color: #fff; } .checkout-section-label { margin-top: 10px; font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #7d7a70; } .checkout input, .checkout textarea { width: 100%; background: #0c0b09; border: 1px solid #33322b; color: #fff; padding: 12px 13px; /* 16px keeps iOS from zooming the page in on focus. */ font-size: 16px; font-family: inherit; resize: vertical; } .checkout input:focus, .checkout textarea:focus { outline: none; border-color: #E4DDCB; } .checkout input::placeholder, .checkout textarea::placeholder { color: #55524a; } .checkout-row { display: flex; gap: 10px; } .checkout-row input { flex: 1; min-width: 0; } .checkout-pay-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; padding: 14px 16px; background: #0c0b09; border: 1px solid #33322b; color: #fff; font-family: inherit; text-align: left; cursor: pointer; transition: border-color .2s ease, background .2s ease; } .checkout-pay-btn:hover:not(:disabled) { border-color: #E4DDCB; background: #17160f; } .checkout-pay-btn:disabled { opacity: .4; cursor: default; } .checkout-pay-name { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .checkout-pay-note { font-size: 11px; color: #7d7a70; letter-spacing: .04em; } .checkout-error { font-size: 13px; line-height: 1.5; color: #ff6b6b; } .checkout-error[hidden] { display: none; } .order-done-card { position: relative; width: 100%; max-width: 460px; max-height: calc(100dvh - 40px); overflow-y: auto; background: #0c0b09; border: 1px solid #33322b; padding: 34px clamp(20px,4vw,34px); text-align: center; } .order-done-tick { width: 46px; height: 46px; margin: 0 auto 14px; border: 1px solid #E4DDCB; border-radius: 50%; color: #E4DDCB; font-size: 22px; line-height: 44px; } .order-done-card h3 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; margin-bottom: 18px; } .order-done-lead { margin-top: 18px; font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #7d7a70; } .order-done-ref-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; } .order-done-ref { font-family: 'Space Mono', monospace; font-size: 20px; letter-spacing: .1em; color: #E4DDCB; } .order-done-amount { margin-top: 12px; font-size: 15px; font-weight: 700; color: #fff; } .order-done-note { margin-top: 14px; font-size: 12px; line-height: 1.6; color: #a09c90; text-align: left; } .order-done-note[hidden] { display: none; } .bank-details { margin-top: 10px; border: 1px solid #23221e; text-align: left; } .bank-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #23221e; } .bank-row:last-child { border-bottom: none; } .bank-label { flex: 0 0 88px; font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #7d7a70; } .bank-value { flex: 1; min-width: 0; font-family: 'Space Mono', monospace; font-size: 13px; color: #fff; overflow-wrap: anywhere; } .copy-btn { flex-shrink: 0; background: transparent; border: 1px solid #33322b; color: #cfcabd; padding: 6px 11px; font-family: inherit; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: border-color .2s ease, color .2s ease; } .copy-btn:hover { border-color: #E4DDCB; color: #fff; } .copy-btn.is-copied { border-color: #E4DDCB; color: #E4DDCB; } .checkout-phone-row { display: flex; gap: 8px; } .checkout-phone-row select { flex: 0 0 auto; background: #0c0b09; border: 1px solid #33322b; color: #fff; padding: 12px 8px; font-family: inherit; font-size: 15px; cursor: pointer; } .checkout-phone-row select:focus { outline: none; border-color: #E4DDCB; } .checkout-phone-row input { flex: 1; min-width: 0; } .phone-nudge-card { width: 100%; max-width: 380px; background: #0c0b09; border: 1px solid #33322b; padding: 28px clamp(20px,4vw,30px); text-align: center; } .phone-nudge-card h3 { font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; } .phone-nudge-card p { font-size: 13px; line-height: 1.6; color: #a09c90; margin-bottom: 20px; } .checkout-hint { font-size: 11px; line-height: 1.5; color: #55524a; margin-top: -4px; } .checkout-credit { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid #33322b; background: #0c0b09; font-size: 13px; color: #E4DDCB; cursor: pointer; } .checkout-credit[hidden] { display: none; } .checkout-credit input { width: auto; flex: 0 0 auto; accent-color: #E4DDCB; } .checkout-totals { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid #23221e; } .checkout-total-row { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #a09c90; } .checkout-total-row[hidden] { display: none; } .checkout-total-due { font-size: 14px; font-weight: 700; color: #fff; }