:root{ /* "overcast travel" palette — a cool, quiet dusk/fog base instead of the warm cream + terracotta combination most generated storefronts default to. --clay stays the name of the primary accent (and --clay-dark its hover-darken) so the dashboard's existing Appearance color editor, which targets these variable names directly, keeps working unchanged — only the default values moved, to dusk-blue instead of orange. */ --cream:#e6e8e2; --paper:#f5f6f2; --sand:#dce0d9; --sage:#6e7f82; --moss:#3e4c6b; --moss-dark:#2f3b54; --forest:#1a2027; --clay:#3e4c6b; --clay-dark:#2f3b54; --brass:#6a5c3c; --brass-light:#c9bfa6; --ink:#242b32; --ink-soft:#5b6570; --line:rgba(26,32,39,0.10); --line-strong:rgba(26,32,39,0.16); /* meaning-only accent — low stock, likes, unread/new badges, error text. Deliberately a different hue from --clay so status marks stay legible as "different from a button," not exposed in the dashboard's color editor so it stays consistent regardless of what accent an owner picks. */ --ember:#9c4a36; --radius:16px; --radius-lg:24px; --shadow:0 12px 32px rgba(26,32,39,0.09); --shadow-lg:0 24px 60px rgba(26,32,39,0.16); --ease:cubic-bezier(.22,.61,.36,1); --font-heading:'Archivo',system-ui,sans-serif; --font-body:'Newsreader',system-ui,serif; /* customizable "corner style" — overridden per data-corners value on */ --radius-btn:30px; --radius-card:24px; --radius-img:14px; --radius-chip:20px; /* customizable spacing "density" — overridden per data-density value on */ --section-pad:96px; --grid-gap:30px; } body[data-corners="sharp"]{--radius-btn:10px;--radius-card:10px;--radius-img:6px;--radius-chip:8px} body[data-corners="soft"]{--radius-btn:16px;--radius-card:16px;--radius-img:10px;--radius-chip:12px} body[data-corners="pill"]{--radius-btn:30px;--radius-card:24px;--radius-img:14px;--radius-chip:20px} body[data-density="cozy"]{--section-pad:60px;--grid-gap:20px} body[data-density="comfortable"]{--section-pad:108px;--grid-gap:34px} body[data-density="roomy"]{--section-pad:132px;--grid-gap:40px} *{box-sizing:border-box} [hidden]{display:none !important} /* number inputs' native up/down spinner arrows are unstyleable OS chrome that never matches the design system — hidden everywhere; the raffle amount field gets its own custom +/- stepper instead (see .raffle-amount-stepper), others just stay directly typable. */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} input[type="number"]{-moz-appearance:textfield} /* a clear, on-brand keyboard-focus ring everywhere (buttons, links, cards…) instead of each browser's own default — :focus-visible means it only shows for keyboard/programmatic focus, not every mouse click. Form fields keep their own separate focus treatment (see .field input:focus below), which already gives an equally clear, more contextual highlight. */ :focus-visible{outline:2px solid var(--clay);outline-offset:2px} /* "skip to content" link — invisible until a keyboard user tabs to it, so they can jump past the header nav straight to the page's actual content instead of tabbing through it every time. */ .skip-link{ position:absolute;top:-100px;left:12px;z-index:2100; background:var(--forest);color:#fdf9ee;padding:10px 18px;border-radius:8px; font-family:var(--font-heading);font-weight:600;font-size:0.9rem;text-decoration:none; transition:top .15s ease; } .skip-link:focus{top:12px} html{scroll-behavior:smooth} body{ margin:0; background:var(--cream); color:var(--ink); font-family:var(--font-body); line-height:1.6; -webkit-font-smoothing:antialiased; font-size:16px; } h1,h2,h3{ font-family:var(--font-heading); font-weight:600; color:var(--forest); margin:0 0 0.4em; letter-spacing:-0.02em; } a{color:inherit} img{max-width:100%;display:block} .wrap{max-width:1120px;margin:0 auto;padding:0 28px} /* subtle film-grain ambient texture, fixed over the whole page */ .grain{ position:fixed;inset:0;pointer-events:none;z-index:2000;opacity:0.02;mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* thin progress bar across the very top, fills in as the visitor scrolls down the page */ .scroll-progress{ position:fixed;top:0;left:0;height:3px;width:0%;z-index:2001;pointer-events:none; background:linear-gradient(90deg,var(--clay),var(--brass)); transition:width .1s linear; } /* kicker / eyebrow labels for a more editorial, professional feel */ .kicker{ display:inline-block;font-family:var(--font-body);font-size:0.74rem;font-weight:600; letter-spacing:0.16em;text-transform:uppercase;color:var(--brass);margin-bottom:10px; } /* header */ .site-header{position:sticky;top:0;z-index:50;background:rgba(250,247,240,0.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .header-row{display:flex;align-items:center;justify-content:space-between;padding:18px 28px} .brand{font-family:var(--font-heading);font-size:1.4rem;font-weight:600;text-decoration:none;color:var(--forest);letter-spacing:-0.02em} .nav{display:flex;gap:26px;align-items:center} .nav a{position:relative;text-decoration:none;font-size:0.92rem;color:var(--ink-soft);transition:color .15s ease} .nav a::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:2px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)} .nav a:hover{color:var(--forest)} .nav a:hover::after{transform:scaleX(1)} .nav a.nav-dash::after{display:none} .nav-dash{border:1px solid var(--line-strong);padding:7px 14px;border-radius:var(--radius-chip);font-size:0.82rem !important} .header-actions{display:flex;align-items:center;gap:10px} .cart-btn{position:relative;background:none;border:1px solid var(--line-strong);width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--forest);transition:border-color .15s ease, transform .15s ease} .cart-btn:hover{border-color:var(--brass);transform:translateY(-1px)} #cartCount{position:absolute;top:-4px;right:-4px;background:var(--ember);color:#fff;font-size:0.65rem;min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;font-weight:600} @keyframes cartCountPop{0%{transform:scale(1)}35%{transform:scale(1.45)}100%{transform:scale(1)}} #cartCount.pop{animation:cartCountPop .4s var(--ease)} @media (prefers-reduced-motion: reduce){#cartCount.pop{animation:none}} .nav-toggle{display:none;background:none;border:1px solid var(--line-strong);width:42px;height:42px;border-radius:50%;align-items:center;justify-content:center;cursor:pointer;color:var(--forest);flex-shrink:0} /* collapse the nav into a dropdown menu on narrow screens so it can never overflow */ @media (max-width:760px){ .nav-toggle{display:flex} .site-header{position:sticky} .nav{ position:absolute;top:100%;left:0;right:0;background:var(--cream); flex-direction:column;align-items:flex-start;gap:0; max-height:0;overflow:hidden;padding:0 28px; border-bottom:1px solid var(--line); transition:max-height .3s var(--ease), padding .3s var(--ease); } .nav.open{max-height:280px;padding:14px 28px 22px} .nav a{padding:11px 0;width:100%} .nav a::after{display:none} } /* hero — full-bleed, supports an optional looping video or a crossfading photo slideshow */ .hero{ position:relative; display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left; padding:150px 48px 120px; min-height:92vh; background: radial-gradient(60% 50% at 20% 10%, rgba(110,127,130,0.18), transparent 60%), radial-gradient(50% 40% at 85% 20%, rgba(62,76,107,0.16), transparent 60%), var(--sand); overflow:hidden; color:var(--forest); } .hero.has-bg{color:#fdfbf5} .hero-media{position:absolute;inset:-40px -2%;z-index:0;will-change:transform} .hero-bg{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transform:scale(1); transition:opacity 2.2s ease-in-out, transform 9.5s linear; will-change:opacity, transform; } .hero-bg.visible{opacity:1} .hero-bg.kenburns{transform:scale(1.12)} .hero-video.visible{transform:scale(1)} @media (prefers-reduced-motion: reduce){ .hero-bg{transition:opacity 1.2s ease} .hero-bg.kenburns{transform:scale(1)} } .hero-scrim{ position:absolute;inset:0;z-index:1; background:linear-gradient(180deg, rgba(20,24,15,0.4) 0%, rgba(20,24,15,0.38) 45%, rgba(20,24,15,0.8) 100%); } .hero.has-bg .hero-scrim{cursor:pointer} /* soft cursor-following spotlight — an On.com-style light touch, not a gimmick */ .hero-glow{ position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0; background:radial-gradient(360px circle at var(--gx,50%) var(--gy,30%), rgba(255,255,255,0.14), transparent 62%); transition:opacity .4s ease; } .hero:hover .hero-glow{opacity:1} @media (hover:none), (prefers-reduced-motion: reduce){.hero-glow{display:none}} .hero-copy{position:relative;z-index:2;transition:transform .35s ease-out;max-width:820px} /* the one deliberately loud typographic moment on the site — the wide "Expanded" cut used only here, everywhere else falls back to plain Archivo since expanded widths read poorly at smaller sizes (card titles, sidebar labels, etc.) */ .hero-copy h1{font-family:'Archivo Expanded',var(--font-heading);font-size:clamp(2.5rem,6.4vw,5.2rem);font-weight:700;max-width:820px;margin:0 0 28px;line-height:1.04;letter-spacing:-0.01em;color:var(--forest)} /* h1 sets its own color globally, so the hero needs an explicit override here to actually turn cream over a dark photo/video background — inheritance alone won't beat that rule */ .hero.has-bg .hero-copy h1{color:#fdfbf5} /* horizon rule — a thin structural line under the headline, standing in for the distance/ travel motif instead of decoration; the same device recurs as the scroll-progress bar */ .hero-rule{width:100%;max-width:320px;height:1px;background:currentColor;opacity:0.35;margin:0 0 28px} .hero-cta-row{display:flex;gap:14px;justify-content:flex-start;flex-wrap:wrap} /* Full-bleed video/photo storytelling section — a cinematic break between the catalog and gallery, big centered quote-style text over the owner's own footage. Structurally similar to the hero (absolute-positioned media + scrim under relative text) but its own, simpler section rather than reusing .hero, since it has no nav/CTA content to lay out. */ .story-section{position:relative;min-height:64vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--forest)} .story-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .story-scrim{position:absolute;inset:0;background:linear-gradient(180deg, rgba(20,24,15,0.55) 0%, rgba(20,24,15,0.35) 45%, rgba(20,24,15,0.65) 100%)} .story-content{position:relative;z-index:1;max-width:900px;padding:80px 24px;text-align:center} .story-text{ font-family:var(--font-heading);font-weight:700;color:#fdfbf5;margin:0; font-size:clamp(1.5rem,3.6vw,2.6rem);line-height:1.35;letter-spacing:-0.01em; } /* kinetic headline — each word masks in on a stagger instead of a flat fade */ .kinetic-word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:0.08em} .kinetic-word-inner{display:inline-block;transform:translateY(112%);transition:transform .85s var(--ease)} .kinetic-heading.kinetic-in .kinetic-word-inner{transform:translateY(0)} @media (prefers-reduced-motion: reduce){ .kinetic-word-inner{transition:none;transform:translateY(0)} } /* the artist photo, repositioned out of the centered spotlight into a small corner mark — just the photo, ringed with a slow-spinning gradient so it reads as a living brand mark rather than a static thumbnail */ .hero-avatar{ position:absolute;left:28px;bottom:28px;z-index:3; display:flex;align-items:center;justify-content:center; width:60px;height:60px;text-decoration:none; opacity:0;transform:translateY(14px); transition:opacity .7s var(--ease) .55s, transform .7s var(--ease) .55s; } .hero-avatar.in{opacity:1;transform:translateY(0)} .hero-avatar::before{ content:'';position:absolute;inset:-5px;border-radius:50%; background:conic-gradient(from 0deg, var(--brass-light), var(--clay), var(--brass), var(--brass-light)); -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); animation:heroAvatarSpin 7s linear infinite; filter:drop-shadow(0 2px 10px rgba(20,24,15,0.35)); } .hero-avatar:hover::before{animation-duration:2.4s} .hero-avatar .hero-photo-wrap{ position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden; border:2px solid rgba(255,255,255,0.9);box-shadow:var(--shadow); background:linear-gradient(160deg,var(--moss),var(--forest)); transition:transform .3s var(--ease); } .hero-avatar:hover .hero-photo-wrap{transform:scale(1.06)} .hero-photo{width:100%;height:100%;object-fit:cover;display:block} @keyframes heroAvatarSpin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion: reduce){.hero-avatar::before{animation:none}} @media (max-width:640px){ .hero-avatar{left:18px;bottom:18px;width:50px;height:50px} } /* animated scroll cue — a soft cascading double-chevron instead of a scroll-mouse icon */ .hero-scroll-cue{ position:absolute;left:50%;bottom:32px;transform:translateX(-50%);z-index:3; width:26px;height:26px;padding:0;border:none;background:none;cursor:pointer; color:#fdfbf5;opacity:0.85;transition:opacity .2s ease,transform .25s var(--ease); } .hero-scroll-cue:hover{opacity:1;transform:translateX(-50%) translateY(3px)} .hero-scroll-cue svg{width:100%;height:100%;overflow:visible} .hero:not(.has-bg) .hero-scroll-cue{color:var(--forest)} .cue-chevron{animation:cueChevron 1.8s ease-in-out infinite;transform-origin:center} .cue-chevron-1{animation-delay:0s} .cue-chevron-2{animation-delay:.22s} @keyframes cueChevron{ 0%{opacity:0;transform:translateY(-5px)} 35%{opacity:1;transform:translateY(0)} 65%{opacity:1;transform:translateY(2px)} 100%{opacity:0;transform:translateY(7px)} } @media (prefers-reduced-motion: reduce){ .cue-chevron{animation:none;opacity:0.9} .hero-scroll-cue{display:none} } @media (max-width:640px){.hero{min-height:82vh;padding:130px 24px 100px}.hero-rule{max-width:180px}} .btn{ position:relative;overflow:hidden; display:inline-flex;align-items:center;gap:8px;padding:14px 30px;border-radius:var(--radius-btn);text-decoration:none; font-family:var(--font-body);font-weight:600;font-size:0.94rem;border:1px solid transparent;cursor:pointer; transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s ease; } .btn::before{ content:'';position:absolute;top:0;left:-60%;width:40%;height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,0.4),transparent); transform:skewX(-20deg);transition:left .6s ease;pointer-events:none; } .btn:hover{transform:translateY(-2px)} .btn:hover::before{left:130%} .btn:active{transform:translateY(0) scale(0.98)} .btn-primary{background:var(--forest);color:#fdf9ee;box-shadow:0 8px 20px rgba(26,32,39,0.25);transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s ease} .btn-primary:hover{background:var(--moss-dark);box-shadow:0 12px 28px rgba(26,32,39,0.32)} .btn-block{width:100%;text-align:center;justify-content:center} .btn-outline{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.5);color:inherit;backdrop-filter:blur(6px)} .hero .btn-outline:hover{background:rgba(255,255,255,0.18)} .about .btn-outline, .section .btn-outline{border-color:var(--line-strong);color:var(--ink);background:transparent} .about .btn-outline:hover, .section .btn-outline:hover{background:var(--paper)} /* sections */ .section{padding:var(--section-pad) 0} .section-head{max-width:640px;margin:0 auto 44px} .section-head.center{text-align:center;margin-left:auto;margin-right:auto} .section-title{font-size:clamp(1.9rem,3.7vw,2.9rem);margin-bottom:10px} .section-sub{color:var(--ink-soft);margin:0 0 34px;max-width:560px;font-size:1.02rem} /* small, low-key legal/shipping note — present but not competing with real section copy */ .legal-disclaimer{color:var(--ink-soft);opacity:0.75;font-size:0.8rem;margin:0 0 30px;max-width:560px} .legal-disclaimer a{color:inherit;text-decoration:underline;text-underline-offset:2px} .legal-disclaimer-footer{margin:36px auto 0;max-width:560px;text-align:center} /* true fine print under each product — smaller and quieter than .legal-disclaimer, sits at the bottom of the card body so it never competes with the actual product details above it */ .print-fine-print{margin:10px 0 0;font-size:0.7rem;color:var(--ink-soft);opacity:0.65;line-height:1.5} .print-fine-print a{color:inherit;text-decoration:underline;text-underline-offset:2px} .section-head .section-sub{margin-bottom:0} /* Section-level fade-up on scroll used to run identically on every section on every page — the single most common "generated page" motion tell, so it stays off here (.reveal is still applied throughout the markup, it just renders at rest). Grids and a couple of editorial moments get their own, different treatments below instead of the same fade. */ .reveal{opacity:1;transform:none;transition:none} /* staggered reveal for grid children (catalog cards, gallery photos, prints) — each item announces itself as you scroll to it, a content-connected motion distinct from "the whole section slides up" */ .stagger > *{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease), transform .5s var(--ease)} .stagger > *.in{opacity:1;transform:translateY(0)} /* a curtain-style wipe for section headings — reserved for a couple of spots, not every section, so it reads as a considered moment rather than a repeated default */ .reveal-clip{clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease)} .reveal-clip.in{clip-path:inset(0 0 0% 0)} /* a small scale-in for the pull-quote — its own distinct, one-off moment */ .reveal-scale{transform:scale(0.94);transition:transform .6s var(--ease)} .reveal-scale.in{transform:scale(1)} @media (prefers-reduced-motion: reduce){ .stagger > *{transition:none;opacity:1;transform:none} .reveal-clip{transition:none;clip-path:none} .reveal-scale{transition:none;transform:none} } /* featured-release spotlight — an asymmetric editorial-style banner for the newest release */ .spotlight{padding:56px 0 20px} .spotlight-wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center} .spotlight-media{position:relative} .spotlight-media::before{ content:'';position:absolute;top:-12%;left:-14%;width:60%;height:60%; background:radial-gradient(circle, rgba(155,143,114,0.18), transparent 70%); pointer-events:none;z-index:0; } .spotlight-media img{ position:relative;z-index:1;width:100%;aspect-ratio:1/1;object-fit:cover;cursor:pointer; border-radius:var(--radius-card);box-shadow:var(--shadow-lg); transform:rotate(-2deg);transition:transform .45s var(--ease); } .spotlight-media:hover img{transform:rotate(0deg) scale(1.02)} .spotlight-badge{ position:absolute;top:-14px;left:24px;z-index:2;background:var(--clay);color:#fff; font-family:var(--font-body);font-weight:700;font-size:0.72rem;letter-spacing:0.08em; text-transform:uppercase;padding:8px 16px;border-radius:var(--radius-chip);box-shadow:var(--shadow); } .spotlight-title{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:6px} .spotlight-artist{color:var(--ink-soft);font-weight:600;margin:0 0 16px} .spotlight-desc{color:var(--ink-soft);margin:0 0 28px;max-width:440px;white-space:pre-wrap} .spotlight-actions{display:flex;gap:14px;flex-wrap:wrap} @media (max-width:820px){ .spotlight-wrap{grid-template-columns:1fr;gap:32px} .spotlight-media img{transform:none} } /* animated stats bar — a bold contrasting band between the gallery and about sections */ .stats-bar{ position:relative;color:#fdfbf5; background:linear-gradient(135deg, var(--clay-dark), var(--clay)); padding:84px 0 100px; clip-path:polygon(0 4%, 100% 0, 100% 96%, 0 100%); margin:-40px 0; } .stats-row{display:flex;justify-content:center;gap:70px;flex-wrap:wrap;text-align:center} .stat{display:flex;flex-direction:column;gap:6px} .stat-num{font-family:var(--font-heading);font-size:clamp(2.2rem,5vw,3.4rem);font-weight:600;color:#fff} .stat-label{font-size:0.8rem;letter-spacing:0.09em;text-transform:uppercase;color:rgba(255,255,255,0.78);font-weight:600} @media (max-width:640px){.stats-row{gap:38px}} /* Email signup band — a compact, full-bleed strip (own accent color so it reads as its own ask, not another form) sitting between the contact form and the footer. */ .signup-band{background:linear-gradient(135deg, var(--brass), var(--brass-light));padding:56px 0;text-align:center} .signup-wrap{display:flex;align-items:center;justify-content:center;gap:36px;flex-wrap:wrap;max-width:860px} .signup-copy{text-align:left;max-width:360px} .signup-title{font-family:var(--font-heading);font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:600;color:#fff;margin:0 0 6px} .signup-sub{color:rgba(255,255,255,0.88);font-size:0.92rem;margin:0} .signup-form{display:flex;gap:10px;flex-wrap:wrap} .signup-form input[type=email]{width:260px;max-width:100%;padding:12px 16px;border-radius:var(--radius-btn);border:1px solid rgba(255,255,255,0.4);background:rgba(255,255,255,0.94);font-family:var(--font-body);font-size:0.95rem} .signup-form input[type=email]:focus-visible{outline:2px solid #fff;outline-offset:2px} .signup-band .signup-msg{max-width:860px;margin:14px auto 0;padding:0 20px} .signup-band .signup-msg.ok{color:#fff;font-weight:600} .signup-band .signup-msg.err{color:#fff5f0;font-weight:600} @media (max-width:720px){ .signup-wrap{flex-direction:column;text-align:center} .signup-copy{text-align:center} .signup-form{justify-content:center} } /* pull-quote pulled from a real visitor comment on a gallery photo */ .quote-section{text-align:center;padding-top:110px} .quote-wrap{max-width:720px} .quote-mark{width:36px;height:36px;color:var(--brass);margin:0 auto 16px;display:block;opacity:0.85} .quote-text{font-family:var(--font-heading);font-size:clamp(1.25rem,2.6vw,1.6rem);font-weight:500;color:var(--forest);line-height:1.45;margin:0 0 14px} .quote-text::before,.quote-text::after{content:'"'} .quote-meta{color:var(--ink-soft);font-size:0.88rem;font-weight:600} /* loading skeletons — shown in catalog/gallery/prints grids as static markup already in the HTML, so they're visible from first paint and get wiped the moment each page's JS replaces them with real content (or the "nothing here yet" empty state) once its fetch resolves. */ @keyframes skeleton-shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}} .skeleton-block{ background:linear-gradient(90deg,var(--sand) 25%,var(--paper) 37%,var(--sand) 63%); background-size:800px 100%;animation:skeleton-shimmer 1.6s ease-in-out infinite; border-radius:var(--radius-img); } @media (prefers-reduced-motion: reduce){.skeleton-block{animation:none}} /* the grids these sit in use .stagger (see reveal-on-scroll rules above) which starts direct children at opacity:0 until scrolled into view — skeletons need to be visible immediately regardless, so they explicitly opt back in here. */ .skeleton-card,.skeleton-gf-hero,.skeleton-gf-rest{opacity:1;transform:none} .skeleton-card{background:var(--paper);border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--line)} .skeleton-card .skeleton-media{aspect-ratio:1/1;border-radius:0} .skeleton-card .skeleton-body{padding:16px;display:flex;flex-direction:column;gap:10px} .skeleton-line{height:12px} .skeleton-line.w30{width:30%} .skeleton-line.w40{width:40%} .skeleton-line.w60{width:60%} .skeleton-gf-hero{min-height:440px} .skeleton-gf-rest{display:grid;grid-template-columns:1fr 1fr;gap:16px} .skeleton-gf-rest .skeleton-block{min-height:130px} @media (max-width:860px){.skeleton-gf-hero{min-height:280px}} /* catalog */ .catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--grid-gap)} .card{ background:var(--paper);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow); border:1px solid var(--line);display:flex;flex-direction:column; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s ease; } .card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--line-strong)} .card-media{position:relative;aspect-ratio:1/1;width:100%;overflow:hidden;background:linear-gradient(160deg,var(--sand),var(--moss))} .card-cover{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)} .card:hover .card-cover{transform:scale(1.06)} .card-carousel-dots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:6px;z-index:2} .card-carousel-dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.55);cursor:pointer;transition:background .15s ease,transform .15s ease} .card-carousel-dots span.active{background:#fff;transform:scale(1.25)} .card-carousel-nav{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:rgba(20,24,15,0.4);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .15s ease;z-index:2;font-size:0.9rem} .card-media:hover .card-carousel-nav{opacity:1} .card-carousel-nav.prev{left:10px} .card-carousel-nav.next{right:10px} /* Drag-to-compare slider for lamp products (lit vs. unlit photo of the same shot). Fills whatever positioned ancestor it's placed in — .card-media on product cards, or a sized frame div in the lightbox — via position:absolute;inset:0. */ .compare-slider{position:absolute;inset:0;overflow:hidden;cursor:ew-resize;touch-action:none;user-select:none} .compare-slider .compare-base,.compare-slider .compare-on-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none} .compare-overlay{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 50% 0 0)} .compare-divider{position:absolute;top:0;bottom:0;left:50%;width:2px;background:rgba(255,255,255,0.9);transform:translateX(-50%);pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,0.18)} .compare-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,0.28);color:var(--forest)} .compare-handle svg{width:16px;height:16px} .compare-label{position:absolute;bottom:10px;font-size:0.66rem;letter-spacing:0.08em;text-transform:uppercase;background:rgba(10,10,8,0.55);color:#fff;padding:3px 9px;border-radius:20px;pointer-events:none;z-index:1} .compare-label-off{left:10px} .compare-label-on{right:10px} .compare-slider-frame{position:relative;width:100%;aspect-ratio:4/3;max-height:78vh;border-radius:8px;overflow:hidden;background:var(--sand)} .card-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1} .card-kicker{font-size:0.7rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--brass);font-weight:700} .card-title{font-family:var(--font-heading);font-size:1.15rem;color:var(--forest);margin:0} .card-artist{color:var(--ink-soft);font-size:0.88rem;margin:0} .card-row{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:12px} .card-price{font-weight:700;color:var(--forest)} .icon-btn{ display:inline-flex;align-items:center;justify-content:center;gap:6px; background:var(--cream);border:1px solid var(--line-strong);border-radius:var(--radius-chip); padding:9px 15px;font-size:0.82rem;cursor:pointer;color:var(--ink);font-family:var(--font-body);font-weight:600; transition:background .15s ease, border-color .15s ease, color .15s ease; } .icon-btn:hover{background:var(--sand)} .icon-btn.play.is-playing{background:var(--moss);border-color:var(--moss);color:#fff} .add-btn{background:var(--forest);color:#fdf9ee;border:none} .add-btn:hover{background:var(--moss-dark)} .empty-state{ display:flex;flex-direction:column;align-items:center;gap:14px; padding:48px 24px;text-align:center;color:var(--ink-soft); } .empty-state svg{color:var(--line-strong)} .empty-state p{margin:0;font-size:0.95rem} .empty-state a{color:inherit;font-weight:600;text-decoration:underline} /* Etsy shop preview — reuses the same .card look as the music catalog so it reads as part of the same site rather than a bolted-on widget; each card is a plain link out to the listing. */ .etsy-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:calc(var(--grid-gap) + 10px);margin-bottom:28px} /* Each listing sits in an organic, slowly-morphing blob instead of a square tile — the shape is pure border-radius keyframe animation (no SVG/clip-path needed), staggered per-card via nth-child duration/delay offsets so the grid doesn't pulse in unison. Photo, scrim and text all live inside the blob's own bounds so nothing needs a separate white body underneath. */ .etsy-card{ position:relative;display:block;aspect-ratio:1/1;overflow:hidden; text-decoration:none;color:#fff;cursor:pointer; background:linear-gradient(160deg,var(--sand),var(--moss)); border-radius:42% 58% 65% 35% / 45% 45% 55% 55%; animation:etsy-blob-morph 15s ease-in-out infinite; transition:transform .35s var(--ease); } .etsy-card:nth-child(2n){animation-duration:18s;animation-delay:-5s} .etsy-card:nth-child(3n){animation-duration:12s;animation-delay:-9s} .etsy-card:nth-child(4n){animation-duration:21s;animation-delay:-3s} .etsy-card:hover{transform:scale(1.045)} .etsy-card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)} .etsy-card:hover .etsy-card-img{transform:scale(1.08)} .etsy-card-scrim{position:absolute;inset:0;background:linear-gradient(to top, rgba(10,10,8,0.75) 0%, rgba(10,10,8,0.12) 48%, transparent 68%)} .etsy-card-info{position:absolute;left:14%;right:14%;bottom:14%;text-align:center} .etsy-card-title{font-family:var(--font-heading);font-size:1rem;line-height:1.3;margin:0 0 4px;color:#fff} .etsy-card-price{font-size:0.82rem;font-weight:700;color:var(--brass-light)} @keyframes etsy-blob-morph{ 0%,100%{border-radius:42% 58% 65% 35% / 45% 45% 55% 55%} 25%{border-radius:58% 42% 35% 65% / 55% 62% 38% 45%} 50%{border-radius:50% 50% 32% 68% / 62% 40% 60% 38%} 75%{border-radius:38% 62% 60% 40% / 42% 58% 42% 58%} } @media (prefers-reduced-motion: reduce){ .etsy-card{animation:none;border-radius:50% 50% 45% 55% / 55% 45% 55% 45%} } .etsy-visit-btn{display:block;width:max-content;margin:0 auto} /* 3D Prints homepage teaser — read-only cards (no stepper/swatches/add-to-cart, that's all on the dedicated page), the whole card just links through. */ .prints-preview-section .prints-grid{margin-bottom:28px} .prints-preview-card{text-decoration:none;color:inherit;display:flex;flex-direction:column} .prints-preview-card .card-kicker{display:block;margin-bottom:4px} .prints-preview-link{display:block;width:max-content;margin:0 auto} /* second photo crossfades in on hover, mirroring the "give it a second look" cue on real product/listing cards — a plain hover-zoom alone reads static for a shop teaser. */ .card-hover-alt{position:absolute;inset:0;opacity:0;transition:opacity .35s var(--ease)} .card:hover .card-hover-alt{opacity:1} /* 3D Prints shop — its own page (3d-prints.html), same card system as everything else. */ .nav a.active{color:var(--forest);font-weight:600} .nav a.active::after{transform:scaleX(1)} /* gives the 3D-prints page's intro the same ambient depth as the home hero, instead of dropping straight into a flat product grid on plain cream */ #printsIntro{ background: radial-gradient(55% 60% at 15% 0%, rgba(110,127,130,0.16), transparent 60%), radial-gradient(45% 45% at 90% 10%, rgba(62,76,107,0.14), transparent 60%), var(--sand); } .prints-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--grid-gap);margin-bottom:28px} /* Shared "spotlight" list/row pattern — each item gets its own full-width row (a big image/3D-viewer paired with a large title and details), alternating sides down the page, instead of a grid of small cards. Editorial, one-item-at-a-time treatment used by both the 3D Prints shop and the homepage's music releases, so the two feel like one design system rather than two bespoke layouts. */ .spotlight-list{display:flex;flex-direction:column;gap:clamp(64px,9vw,120px);margin:12px 0 48px} .spotlight-row{display:flex;align-items:center;gap:clamp(32px,5vw,72px)} .spotlight-row:nth-child(even){flex-direction:row-reverse} .spotlight-row .card-media{ flex:1 1 48%;max-width:560px;border-radius:var(--radius-img);box-shadow:var(--shadow-lg); transition:transform .35s var(--ease), box-shadow .35s var(--ease); } .spotlight-row:hover .card-media{box-shadow:var(--shadow-lg),0 0 0 1px var(--line-strong)} .spotlight-row:hover .card-cover{transform:scale(1.03)} .spotlight-row .card-body{flex:1 1 48%;padding:0;gap:16px} .spotlight-row .card-kicker{font-size:0.8rem} .spotlight-row .card-title{font-family:var(--font-heading);font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:700;color:var(--forest);margin:0} .spotlight-row .print-spec-desc,.spotlight-row .card-desc{font-size:1rem;line-height:1.65;max-width:440px;color:var(--ink-soft)} .spotlight-row .print-fact-row{margin-top:6px} .spotlight-row .card-row{margin-top:6px} /* without the old .card-row wrapper, the play button is a lone child of the flex-column .card-body, which stretches it full-width by default — sized to content instead. */ .spotlight-row .track-play-btn{align-self:flex-start;margin-top:4px;width:44px;height:44px} .spotlight-row .track-play-btn .track-play-icon{font-size:0.9rem} @media (max-width:860px){ .spotlight-row,.spotlight-row:nth-child(even){flex-direction:column;gap:24px} .spotlight-row .card-media,.spotlight-row .card-body{flex:1 1 auto;width:100%;max-width:none} } /* product-tag treatment for 3D prints — sharper corners and a perforated-looking divider read as a physical goods listing, distinct from the music ledger and the photo gallery */ .print-card{border-radius:4px} .print-card .card-media{border-radius:0} .print-card .card-body{border-top:1px dashed var(--line-strong)} .print-spec-desc{margin:0;font-size:0.86rem;color:var(--ink-soft);line-height:1.5;white-space:pre-wrap} .card-desc{margin:0;font-size:0.86rem;color:var(--ink-soft);line-height:1.5;white-space:pre-wrap} /* clamps to a single line — the spotlight row is meant to be a hook, not the full pitch; the complete description lives in the release modal opened by clicking through. */ .card-desc-clamp{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} .print-fact-row{display:flex;gap:20px;margin-top:auto} .print-fact{display:flex;flex-direction:column;gap:2px} .print-fact-label{font-size:0.68rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-soft)} .print-fact-value{font-family:var(--font-heading);font-weight:600;color:var(--forest)} .print-fact-value.low{color:var(--ember)} .print-view-photos-link{ align-self:flex-start;background:none;border:none;padding:0;margin-top:-2px; font-family:var(--font-body);font-size:0.82rem;font-weight:600;color:var(--brass);cursor:pointer; border-bottom:1px solid transparent;transition:border-color .15s ease; } .print-view-photos-link:hover{border-bottom-color:var(--brass)} .print-card-actions{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding-top:12px} .print-card-actions .qty-stepper{align-self:flex-start} .qty-stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius-chip);overflow:hidden} .qty-stepper button{background:none;border:none;width:28px;height:28px;font-size:1rem;cursor:pointer;color:var(--forest)} .qty-stepper button:hover{background:var(--sand)} .qty-stepper span{min-width:22px;text-align:center;font-weight:600;font-size:0.9rem} .print-add-btn{flex:1} .print-stock-note{font-size:0.78rem;color:var(--ink-soft);margin:0} .print-stock-note.low{color:var(--ember)} .cart-row .ci-qty{display:flex;align-items:center;gap:8px;margin-top:4px} .cart-row .ci-detail{font-size:0.78rem;color:var(--ink-soft);margin-top:2px} .shipping-block{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin-top:20px} .shipping-block.pending{background:var(--cream);border-color:var(--brass-light)} /* Interactive 3D model viewer on a print's product card — fills the same media slot a plain cover photo would use, so cards with and without a model line up identically in the grid. */ .card-model{width:100%;height:100%;--poster-color:transparent} .print-color-swatches{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0} .color-swatch{width:26px;height:26px;border-radius:50%;border:2px solid var(--line-strong);cursor:pointer;padding:0} .color-swatch.selected{border-color:var(--forest);box-shadow:0 0 0 2px var(--cream),0 0 0 3px var(--forest)} .print-custom-text{width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius-chip);font:inherit;background:var(--paper)} /* Dashboard: 3D model upload + color builder (shared look between the add-product form and each product's edit cell). */ .model-preview{margin:6px 0} .field-hint.ok{color:var(--moss-dark)} .field-hint.err{color:var(--ember)} .print-colors-list{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0} .print-color-chip{display:inline-flex;align-items:center;gap:6px;background:var(--sand);border:1px solid var(--line);border-radius:var(--radius-chip);padding:4px 8px 4px 6px;font-size:0.82rem} .print-color-chip .swatch-dot{width:14px;height:14px;border-radius:50%;display:inline-block;border:1px solid var(--line-strong)} .print-color-chip .chip-remove{background:none;border:none;cursor:pointer;color:var(--ink-soft);font-size:0.95rem;line-height:1;padding:0 0 0 2px} .print-color-add{display:flex;align-items:center;gap:8px;margin-top:6px} .print-color-add input[type="color"]{width:36px;height:32px;padding:0;border:1px solid var(--line);border-radius:8px;background:none;cursor:pointer} .print-color-add input[type="text"]{flex:1;padding:6px 10px;border:1px solid var(--line);border-radius:8px;font:inherit} .shipping-block h4{margin:0 0 8px;font-family:var(--font-heading);color:var(--forest);font-size:1rem} .shipping-block p{margin:2px 0;font-size:0.92rem;color:var(--ink-soft)} /* Raffle */ .raffle-card{ display:grid;grid-template-columns:340px 1fr;gap:36px;background:var(--paper); border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow); } .raffle-media{position:relative;background:linear-gradient(160deg,var(--sand),var(--sage))} .raffle-media img{width:100%;height:100%;min-height:280px;object-fit:cover;display:block} .raffle-body{padding:30px 30px 30px 0} .raffle-progress-wrap{margin-bottom:26px} .raffle-progress-track{height:14px;border-radius:999px;background:var(--sand);overflow:hidden} .raffle-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--clay),var(--brass));border-radius:999px;transition:width .5s var(--ease)} @media (prefers-reduced-motion: reduce){.raffle-progress-fill{transition:none}} .raffle-progress-labels{display:flex;justify-content:space-between;margin-top:8px;font-size:0.85rem;color:var(--ink-soft)} .raffle-progress-labels strong{color:var(--forest);font-size:1.05rem} .raffle-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:22px} .raffle-method{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:16px} .raffle-method-head{display:flex;align-items:center;gap:10px;margin-bottom:4px} .raffle-method-icon{ width:30px;height:30px;flex-shrink:0;border-radius:50%; display:flex;align-items:center;justify-content:center; background:var(--sand);color:var(--forest); } .raffle-method-icon svg{width:15px;height:15px} .raffle-method h3{margin:0;font-size:1.02rem;color:var(--forest);white-space:nowrap} .raffle-method .btn-outline{margin-bottom:8px} .raffle-method-buy .raffle-method-icon{background:rgba(244,239,226,0.16);color:#f4efe2} .raffle-input-sm{ display:block;width:100%;margin-bottom:8px;padding:8px 10px;border:1px solid var(--line-strong); border-radius:8px;font-family:var(--font-body);font-size:0.85rem;background:var(--paper); } .raffle-buy-row{display:flex;align-items:center;gap:8px;margin-bottom:10px} .raffle-dollar{font-weight:700;color:var(--forest)} .raffle-amount-stepper{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden;background:var(--paper)} .raffle-amount-stepper input[type="number"]{width:44px;padding:8px 2px;border:none;background:none;font-family:var(--font-body);text-align:center} .raffle-amount-btn{background:none;border:none;width:28px;height:34px;font-size:1rem;cursor:pointer;color:var(--forest);flex-shrink:0} .raffle-amount-btn:hover{background:var(--sand)} .raffle-entries-preview{font-size:0.82rem;color:var(--ink-soft);margin-left:4px} .raffle-method-buy{background:var(--forest);border-color:var(--forest)} .raffle-method-buy h3,.raffle-method-buy .field-hint{color:#f4efe2} .raffle-method-buy .raffle-dollar{color:#f4efe2} .raffle-method-buy .raffle-entries-preview{color:var(--brass-light)} .raffle-feed{border-top:1px solid var(--line);padding-top:16px} .raffle-feed-title{font-size:0.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin:0 0 10px} .raffle-feed ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} .raffle-feed li{font-size:0.86rem;color:var(--ink)} .raffle-feed-time{color:var(--ink-soft);font-size:0.78rem;margin-left:6px} .raffle-charity-note{ background:var(--cream);border:1px solid var(--line);border-radius:var(--radius); padding:10px 16px;margin-bottom:22px;font-size:0.9rem;color:var(--ink); } .raffle-charity-note a{color:var(--clay);font-weight:600} /* Best Friends Animal Society charity tie-in — the link sits right under the section's sub-copy */ .bfs-section .section-head #bfsCharityLink{display:inline-flex;margin-top:16px} @media (max-width:860px){ .raffle-card{grid-template-columns:1fr} .raffle-media img{min-height:200px} .raffle-body{padding:24px} .raffle-methods{grid-template-columns:1fr} } /* small animated "now playing" equalizer bars — used in the mini player and on whichever track row / preview button is actively playing */ .track-eq{display:inline-flex;align-items:flex-end;gap:2px;width:14px;height:13px;flex-shrink:0} .track-eq span{width:3px;background:currentColor;border-radius:1px;animation:eqBounce 0.9s ease-in-out infinite} .track-eq span:nth-child(1){animation-delay:-0.6s} .track-eq span:nth-child(2){animation-delay:-0.3s} .track-eq span:nth-child(3){animation-delay:0s} @keyframes eqBounce{0%,100%{height:3px}50%{height:13px}} @media (prefers-reduced-motion: reduce){.track-eq span{animation:none;height:8px}} /* clickable card cover — cursor alone signals it, no hover hint overlay */ .card-media{cursor:pointer} /* Add-to-cart quick confirmation pulse */ @keyframes addPulse{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}} .just-added{animation:addPulse .35s var(--ease)} /* release detail modal — opened from a catalog card or the spotlight banner cover; shows every track in an album with its own individually-playable row */ .release-modal{ position:fixed;inset:0;background:rgba(15,18,11,0.92);z-index:210;display:flex;align-items:center;justify-content:center; opacity:0;pointer-events:none;transition:opacity .2s ease;padding:24px; } .release-modal.open{opacity:1;pointer-events:auto} .release-modal-content{ display:flex;max-width:920px;width:100%;max-height:86vh;background:var(--paper);border-radius:var(--radius-card); overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,0.5); } .release-modal-media{flex:0 0 42%;position:relative;overflow:hidden;background:linear-gradient(160deg,var(--sand),var(--moss))} .release-modal-media-bg{ position:absolute;inset:-24px;background-size:cover;background-position:center; filter:blur(32px) saturate(1.2) brightness(0.7);transform:scale(1.15); } .release-modal-media > img{ position:relative;z-index:1;width:100%;height:100%;min-height:280px; object-fit:contain;object-position:center; filter:drop-shadow(0 16px 34px rgba(0,0,0,0.45)); } /* thumbnail strip for a release's additional photos — only shown when there are any */ .release-modal-thumbs{ position:absolute;left:0;right:0;bottom:14px;z-index:2; display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:0 14px; } .release-modal-thumb{ width:40px;height:40px;flex-shrink:0;padding:0;border-radius:6px;overflow:hidden;cursor:pointer; border:2px solid rgba(255,255,255,0.4);background:none;opacity:0.75;transition:opacity .15s ease,border-color .15s ease; } .release-modal-thumb img{width:100%;height:100%;object-fit:cover;display:block} .release-modal-thumb:hover{opacity:1} .release-modal-thumb.active{opacity:1;border-color:#fff} .release-modal-panel{flex:1;min-width:0;padding:32px 34px;overflow-y:auto} .release-modal-panel h3{font-size:1.6rem;margin:6px 0 4px} .release-modal-artist{color:var(--ink-soft);font-weight:600;margin:0 0 14px} .release-modal-desc{color:var(--ink-soft);margin:0 0 22px;white-space:pre-wrap} .release-modal-close{position:absolute;top:24px;right:32px;background:none;border:none;color:#fff;font-size:2rem;cursor:pointer;line-height:1;z-index:2} .release-modal-add{margin-top:22px} .track-list{display:flex;flex-direction:column;border-top:1px solid var(--line)} .track-row-item{ display:flex;align-items:center;gap:14px;padding:12px 4px;border-bottom:1px solid var(--line); transition:background .15s ease; } .track-row-item:hover{background:var(--cream)} .track-row-item.is-playing{background:var(--sand)} .track-play-btn{ flex-shrink:0;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line-strong);background:var(--paper); display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--forest);transition:background .15s ease,border-color .15s ease; } .track-play-btn:hover{border-color:var(--brass)} .track-play-btn .track-play-icon{font-size:0.72rem} .track-play-btn .track-eq{display:none} .track-play-btn.is-playing{background:var(--moss);border-color:var(--moss);color:#fff} .track-play-btn.is-playing .track-play-icon{display:none} .track-play-btn.is-playing .track-eq{display:inline-flex} .track-row-num{width:18px;flex-shrink:0;color:var(--ink-soft);font-size:0.82rem;text-align:right} .track-row-title{flex:1;min-width:0;font-weight:600;font-size:0.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .track-row-duration{color:var(--ink-soft);font-size:0.82rem;flex-shrink:0} @media (max-width:760px){ .release-modal-content{flex-direction:column;overflow-y:auto} .release-modal-media img{min-height:220px} .release-modal-panel{padding:24px} } /* checkout/buy button loading state — a small spinner instead of just dimming the button and leaving it looking frozen while the request is in flight */ .btn.is-loading{opacity:0.85;pointer-events:none;position:relative;color:transparent !important} .btn.is-loading::after{ content:'';position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px; border:2px solid rgba(253,249,238,0.35);border-top-color:#fdf9ee;border-radius:50%; animation:btnSpin .6s linear infinite; } @keyframes btnSpin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion: reduce){.btn.is-loading::after{animation:none}} /* full-bleed editorial photo moment — one large statement image as a page break */ .feature-photo{position:relative;height:78vh;min-height:420px;max-height:760px;overflow:hidden;margin:0} .feature-photo img{ width:100%;height:100%;object-fit:cover;transform:scale(1.08); transition:transform 1.4s var(--ease); } .feature-photo.in img{transform:scale(1);animation:featureDrift 18s ease-in-out 1.4s infinite} @keyframes featureDrift{ 0%,100%{transform:scale(1) translate3d(0,0,0)} 50%{transform:scale(1.08) translate3d(-1.4%,-1.1%,0)} } .feature-photo-scrim{ position:absolute;inset:0; background:linear-gradient(0deg,rgba(15,18,11,0.65) 0%,rgba(15,18,11,0.05) 45%,transparent 70%); } .feature-photo-caption{position:absolute;left:0;right:0;bottom:0;padding:48px 6vw;color:#fdfbf5} .feature-photo-caption .kicker{color:var(--brass-light)} .feature-photo-caption p{ font-family:var(--font-heading);font-weight:600;letter-spacing:-0.01em; font-size:clamp(1.4rem,3.2vw,2.2rem);max-width:640px;margin:0;line-height:1.25; } @media (max-width:640px){ .feature-photo{height:56vh} .feature-photo-caption{padding:32px 24px} } @media (prefers-reduced-motion: reduce){ .feature-photo img, .feature-photo.in img{transition:none;transform:scale(1);animation:none} } /* second full-bleed break — bolder, with a signature color-grade on the photo so the site's earthy palette shows up in a big, confident way rather than only in accents */ .feature-break{position:relative;height:68vh;min-height:380px;max-height:640px;overflow:hidden;margin:0} .feature-break img{ width:100%;height:100%;object-fit:cover;transform:scale(1.08); transition:transform 1.4s var(--ease); filter:saturate(1.1) contrast(1.12) brightness(0.85) hue-rotate(4deg); } .feature-break.in img{transform:scale(1);animation:featureBreakDrift 20s ease-in-out 1.4s infinite} @keyframes featureBreakDrift{ 0%,100%{transform:scale(1) translate3d(0,0,0)} 50%{transform:scale(1.09) translate3d(1.5%,1%,0)} } .feature-break-scrim{ position:absolute;inset:0; background:linear-gradient(120deg, rgba(47,59,84,0.6), rgba(156,74,54,0.35)); mix-blend-mode:multiply; } .feature-break-content{ position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center; justify-content:center;text-align:center;gap:20px;color:#fdfbf5;padding:24px; } .feature-break-content .kicker{color:var(--brass-light)} .feature-break-content p{ font-family:var(--font-heading);font-weight:600;letter-spacing:-0.015em; font-size:clamp(1.7rem,3.6vw,2.8rem);max-width:680px;margin:0;line-height:1.18; } @media (max-width:640px){.feature-break{height:52vh}} @media (prefers-reduced-motion: reduce){ .feature-break img, .feature-break.in img{transition:none;transform:scale(1);animation:none} } /* travel photo gallery */ .gallery{background:var(--forest);color:#f4efe2;position:relative;overflow:hidden} .gallery .kicker{color:var(--brass-light)} .gallery .section-title{color:#fdfbf5} .gallery .section-sub{color:rgba(244,239,226,0.72)} .gallery .btn-outline{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.5);color:#f4efe2} .gallery .btn-outline:hover{background:rgba(255,255,255,0.18)} .gallery .wrap{position:relative;z-index:1} /* Full-bleed rotating background behind the whole gallery section — the same slow crossfade treatment as the intro/hero photo slideshow, so the section reads as "alive" instead of flat. Only rotates through the most-liked pool (the same curated set the spotlight above draws from), not the whole gallery, and stays dimmed behind a scrim so text/content on top of it stays readable. */ .gallery-ambient{position:absolute;inset:0;z-index:0;overflow:hidden} .gallery-bg{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transform:scale(1); transition:opacity 2.2s ease-in-out, transform 11s linear; filter:saturate(0.85) brightness(0.55); } .gallery-bg.visible{opacity:1} .gallery-bg.kenburns{transform:scale(1.14)} .gallery-bg-scrim{ position:absolute;inset:0; background:linear-gradient(180deg, rgba(15,18,11,0.72), rgba(15,18,11,0.86) 45%, rgba(15,18,11,0.94) 100%); } @media (prefers-reduced-motion: reduce){ .gallery-bg{transition:opacity 1.2s ease} .gallery-bg.kenburns{transform:scale(1)} } /* auto-scrolling "living" strip of photos above the grid — the visible motion Joy asked for */ .gallery-marquee{ overflow:hidden;margin:0 0 34px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); } .marquee-track{display:flex;gap:14px;width:max-content;animation:marqueeScroll 42s linear infinite} .gallery-marquee:hover .marquee-track{animation-play-state:paused} .marquee-item{width:150px;height:96px;border-radius:var(--radius-img);overflow:hidden;flex-shrink:0;cursor:pointer} .marquee-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)} .marquee-item:hover img{transform:scale(1.08)} @keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion: reduce){.marquee-track{animation:none}} @media (max-width:600px){.marquee-item{width:104px;height:70px}} /* Curated "featured + most-liked" spotlight — replaces the old piled-up photo grid with one big statement shot (whichever photo has the most likes) plus a handful of runner-ups, so the section stays compact instead of dumping every photo on screen. The full collection is still reachable via "Browse all", which opens the lightbox and its existing prev/next navigation. */ /* Real photo aspect ratios instead of uniform cropped tiles — the hero stays a deliberate, singular full-bleed crop (an editorial choice), but the supporting photos flow as a masonry column so each keeps its own natural shape instead of being forced square-ish. */ .gallery-featured{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;margin-bottom:26px;transition:opacity .42s ease} .gallery-featured.is-shuffling{opacity:0} @media (prefers-reduced-motion: reduce){.gallery-featured{transition:none}} .gallery-featured.single{grid-template-columns:1fr} .gf-item{position:relative;border-radius:var(--radius-img);overflow:hidden;cursor:pointer} .gf-item img{display:block;transition:transform .6s var(--ease)} .gf-item:hover img{transform:scale(1.06)} .gf-scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,0.5));opacity:0;transition:opacity .25s ease;pointer-events:none} .gf-item:hover .gf-scrim{opacity:1} .gf-hero{min-height:440px} .gf-hero img{width:100%;height:100%;object-fit:cover} .gf-rest{column-count:2;column-gap:16px;height:100%} .gf-rest .gf-item{width:100%;margin-bottom:16px;break-inside:avoid} .gf-rest .gf-item img{width:100%;height:auto;object-fit:unset} .gallery-browse-all,.bfs-browse-all{display:block;margin:0 auto;text-align:center} .gallery-empty{color:rgba(244,239,226,0.6)} .gallery-empty svg{color:rgba(244,239,226,0.25)} /* The backdrop is the current photo itself, sharp and filled in behind the same photo shown as the contained foreground image (its URL comes in via the --lb-bg custom property, set in JS whenever the shown photo changes) — instead of a flat black background. Avoids the stark "black bars" look for photos whose aspect ratio doesn't match the lightbox frame. */ .lightbox{position:fixed;inset:0;background:#14140f;z-index:200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s ease;padding:24px;overflow:hidden} .lightbox::before{ content:'';position:absolute;inset:0; background-image:var(--lb-bg,none);background-size:cover;background-position:center; } .lightbox::after{content:'';position:absolute;inset:0;background:rgba(10,10,8,0.4)} .lightbox.open{opacity:1;pointer-events:auto} .lightbox-content{position:relative;z-index:1;display:flex;gap:0;max-width:1000px;width:100%;max-height:86vh;background:var(--forest);border-radius:12px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,0.5)} .lightbox-content img{flex:1 1 60%;min-width:0;max-height:86vh;object-fit:contain;background:transparent} .lightbox-panel{flex:0 0 320px;display:flex;flex-direction:column;padding:20px;color:#f4efe2;overflow-y:auto} /* single-image zoom variant of the lightbox — used by the 3D-prints product photo viewer, which has no likes/comments panel, just the photo and a caption bar */ .lightbox-content-simple{position:relative;z-index:1;max-width:860px;flex-direction:column;background:transparent} .lightbox-content-simple img{flex:none;width:100%;max-height:78vh;object-fit:contain} .print-lightbox-caption{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 22px;color:#f4efe2;background:var(--forest);font-size:0.88rem;font-weight:600} .print-lightbox-caption .print-lightbox-count{color:rgba(244,239,226,0.55);font-weight:500} .lightbox-actions-row{display:flex;gap:10px;align-self:flex-start;flex-wrap:wrap} .like-btn{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.25);color:#f4efe2;border-radius:20px;padding:9px 16px;cursor:pointer;font-family:var(--font-body);font-weight:600;font-size:0.9rem;align-self:flex-start;transition:background .15s ease,color .15s ease} .like-btn:hover{background:rgba(255,255,255,0.18)} .like-btn.liked{background:var(--ember);border-color:var(--ember);color:#fff} .like-btn.liked svg{fill:#fff} .like-btn:disabled{cursor:default} /* share button shares .like-btn's pill styling; .copied is a brief confirmation state after the clipboard-copy fallback (desktop browsers without the native share sheet) */ .share-btn.copied{background:var(--moss);border-color:var(--moss)} .download-photo-btn{ display:inline-flex;align-items:center;gap:8px;background:var(--moss);border:1px solid var(--moss);color:#fff; border-radius:var(--radius-chip);padding:9px 16px;cursor:pointer;font-family:var(--font-body);font-weight:600;font-size:0.86rem; align-self:flex-start;margin-top:10px;text-decoration:none;transition:background .15s ease; } .download-photo-btn:hover{background:var(--moss-dark)} .download-photo-btn.is-buy{background:var(--clay);border-color:var(--clay)} .download-photo-btn.is-buy:hover{background:var(--clay-dark,var(--clay));filter:brightness(0.92)} /* small, low-key link inviting an optional donation — never a hard sell */ .charity-link{ display:inline-flex;align-items:center;gap:7px;font-size:0.82rem;font-weight:600; text-decoration:none;align-self:flex-start;margin-top:10px; font-family:var(--font-body);border-bottom:1px solid transparent;transition:border-color .15s ease; } .charity-link:hover{border-bottom-color:currentColor} .lightbox-panel .charity-link{color:var(--brass-light)} .cart-charity-link{ align-self:stretch;justify-content:center;margin:0 0 14px;padding:9px 10px; border-radius:10px;background:var(--cream);color:var(--forest);border:1px dashed var(--line-strong); } .cart-charity-link:hover{border-color:var(--brass);border-bottom:1px dashed var(--brass)} .comment-list{margin-top:18px;display:flex;flex-direction:column;gap:12px;max-height:220px;overflow-y:auto;padding-right:4px} .comment-row{border-bottom:1px solid rgba(255,255,255,0.12);padding-bottom:10px} .comment-row .c-name{font-weight:600;font-size:0.85rem;color:var(--brass-light)} .comment-row .c-text{font-size:0.86rem;color:rgba(244,239,226,0.88);margin:2px 0 0} .comment-empty{font-size:0.85rem;color:rgba(244,239,226,0.55)} .comment-form{margin-top:16px;display:flex;flex-direction:column;gap:8px} .comment-form input,.comment-form textarea{ background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.25);border-radius:8px;color:#fdfbf5; padding:9px 11px;font-family:var(--font-body);font-size:0.85rem; } .comment-form textarea{min-height:64px;resize:vertical} .comment-form input::placeholder,.comment-form textarea::placeholder{color:rgba(244,239,226,0.45)} .lightbox-close{position:absolute;top:24px;right:32px;z-index:2;background:none;border:none;color:#fff;font-size:2rem;cursor:pointer;line-height:1} .lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.12);border:none;color:#fff;width:46px;height:46px;border-radius:50%;font-size:1.3rem;cursor:pointer;z-index:2} .lightbox-nav.prev{left:24px} .lightbox-nav.next{right:24px} @media (max-width:760px){ .lightbox-content{flex-direction:column;overflow-y:auto} .lightbox-content img{max-height:46vh} .lightbox-panel{flex:none} } /* gallery grid like badge */ .g-like-badge{ position:absolute;bottom:10px;left:10px;z-index:2;display:flex;align-items:center;gap:5px; background:rgba(15,18,11,0.55);color:#fff;border:none;border-radius:14px;padding:5px 10px;font-size:0.75rem;cursor:pointer; font-family:var(--font-body);font-weight:600;backdrop-filter:blur(4px); } .g-like-badge.liked{background:var(--ember)} /* contact form */ .contact-form{display:flex;flex-direction:column} .contact .field label{color:var(--forest)} @media (max-width:720px){ .gallery-featured{grid-template-columns:1fr;gap:12px} .gf-hero{min-height:280px} .gf-rest{column-gap:12px} .gf-rest .gf-item{margin-bottom:12px} } /* Best Friends Society — corkboard-style polaroid wall, deliberately looser and more candid than the curated travel gallery above it. */ .bfs-section{background:var(--paper)} .bfs-wall{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:6px 2px;padding:28px 12px 12px;margin-bottom:22px} .bfs-item{ width:200px;flex:0 0 auto;cursor:pointer;transition:transform .35s var(--ease),z-index 0s; position:relative; } .bfs-item:nth-child(6n+1){transform:rotate(-4deg)} .bfs-item:nth-child(6n+2){transform:rotate(3deg)} .bfs-item:nth-child(6n+3){transform:rotate(-2deg)} .bfs-item:nth-child(6n+4){transform:rotate(4deg)} .bfs-item:nth-child(6n+5){transform:rotate(-3deg)} .bfs-item:nth-child(6n+6){transform:rotate(2deg)} .bfs-item:hover{transform:rotate(0deg) scale(1.08) translateY(-6px);z-index:3} .bfs-frame{ position:relative;background:var(--paper);padding:10px 10px 34px;border-radius:4px; box-shadow:var(--shadow);border:1px solid var(--line);overflow:hidden; } .bfs-item:hover .bfs-frame{box-shadow:var(--shadow-lg)} .bfs-frame img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;border-radius:2px} .bfs-caption{ position:absolute;left:0;right:0;bottom:8px;text-align:center;font-family:var(--font-body); font-style:italic;font-size:0.78rem;color:var(--ink-soft);padding:0 10px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .bfs-frame .g-like-badge{bottom:38px;left:16px} @media (prefers-reduced-motion: reduce){ .bfs-item, .bfs-item:hover{transition:none} } @media (max-width:720px){ .bfs-item{width:130px} .bfs-wall{gap:4px 0} } /* about */ .about{background:var(--paper);position:relative;overflow:hidden} .about::before{ content:'';position:absolute;top:-8%;right:-8%;width:380px;height:380px; background:radial-gradient(circle, rgba(110,127,130,0.16), transparent 70%); pointer-events:none;z-index:0; } .about-wrap{position:relative;z-index:1;display:grid;grid-template-columns:220px 1fr;gap:48px;align-items:start} .about-photo-wrap{transition:transform .4s var(--ease)} .about-photo-wrap:hover{transform:rotate(-1.5deg) scale(1.03)} .about-photo{width:220px;height:220px;border-radius:var(--radius-card);object-fit:cover;background:linear-gradient(160deg,var(--moss),var(--forest));box-shadow:var(--shadow);animation:aboutFloat 7s ease-in-out infinite} @keyframes aboutFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} @media (prefers-reduced-motion: reduce){.about-photo{animation:none}} .bio-text{color:var(--ink-soft);max-width:600px;white-space:pre-wrap;font-size:1.03rem} .links{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px} .links a{ width:42px;height:42px;border-radius:50%;flex-shrink:0; display:flex;align-items:center;justify-content:center; border:1.5px solid var(--line-strong);color:var(--forest);background:var(--paper); transition:transform .18s var(--ease), border-color .18s ease, background .18s ease; } .links a svg{width:19px;height:19px} .links a:hover{border-color:var(--brass);background:var(--sand);transform:translateY(-3px)} @media (max-width:640px){ .about-wrap{grid-template-columns:1fr;text-align:center} .about-photo{margin:0 auto} .links{justify-content:center} } /* footer */ .footer{padding:56px 0 100px;color:var(--ink-soft);font-size:0.85rem;border-top:1px solid var(--line)} .footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap;padding-bottom:32px;border-bottom:1px solid var(--line)} .footer-brand-name{display:inline-block;font-family:var(--font-heading);font-size:1.3rem;font-weight:700;color:var(--forest);text-decoration:none} .footer-tagline{margin:6px 0 0;max-width:280px;font-size:0.9rem} .footer-links{margin-top:16px} .footer-links a{width:36px;height:36px} .footer-links a svg{width:16px;height:16px} .footer-nav{display:flex;gap:28px;flex-wrap:wrap;padding-top:4px} .footer-nav a{color:var(--ink-soft);text-decoration:none;font-size:0.92rem;transition:color .15s ease} .footer-nav a:hover{color:var(--forest)} .footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:22px} .footer-top-btn{ width:36px;height:36px;border-radius:50%;flex-shrink:0; display:flex;align-items:center;justify-content:center; border:1.5px solid var(--line-strong);color:var(--forest);background:var(--paper);cursor:pointer; transition:transform .18s var(--ease), border-color .18s ease, background .18s ease; } .footer-top-btn:hover{border-color:var(--brass);background:var(--sand);transform:translateY(-3px)} @media (max-width:640px){ .footer-top{flex-direction:column;align-items:flex-start;gap:24px} .footer-bottom{flex-direction:row} } /* mini player — a custom scrubbable bar instead of the browser's native