/* ══════════════════════════════════════════════════════════════════════ THE CALL OF COLORS — shared design system Extracted from the /painting landing page (_partials/painting-landing.html) so every page under laurariondet.com/painting (originals gallery + piece pages, print shop gallery + piece pages) shares one consistent brand: warm cream, joyful accent colors, Bricolage Grotesque + Cormorant Garamond + Public Sans. This is a separate visual system from the main portfolio's dark theme (styles.css) — painting/prints pages load THIS file instead, not /styles.css. ══════════════════════════════════════════════════════════════════════ */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--tcc-bg);color:var(--tcc-ink);font-family:'Public Sans',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:var(--tcc-ink);text-decoration:none} a:hover{color:var(--tcc-pink)} ::selection{background:var(--tcc-yellow);color:var(--tcc-ink)} img{max-width:100%} ul{list-style:none;margin:0;padding:0} @keyframes tcc-pulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.85;transform:scale(1.25)}} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} :root{ --tcc-bg: #faf3e4; --tcc-surface: #f3ebda; --tcc-ink: #2a2118; --tcc-text: #5a5040; --tcc-muted: #8a8073; --tcc-faint: #a7a29a; --tcc-border: rgba(42,33,24,.12); --tcc-pink: #EF579F; --tcc-pink-shadow: rgba(184,47,110,.6); --tcc-sky: #6ECFF6; --tcc-lime: #C3D82D; --tcc-orange: #F68A32; --tcc-yellow: #FEEF49; --tcc-font-display: 'Bricolage Grotesque', sans-serif; --tcc-font-body: 'Public Sans', sans-serif; --tcc-font-serif: 'Cormorant Garamond', serif; /* ── type scale ── static sizes for UI/body text, fluid clamp() sizes for section headings. Every font-size in this file should reference one of these — new one-off values here mean the scale needs a new step, not a new magic number at the call site. */ --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 19px; --fs-lg: 24px; --fs-xl: 32px; --fs-h2: clamp(28px, 4vw, 40px); --fs-h1: clamp(34px, 6vw, 52px); --fs-hero: clamp(44px, 7vw, 88px); color-scheme: light; } /* ── dark mode ── same brand accents, ink/bg/surface flipped. Applies automatically to OS-dark visitors (unless they've explicitly picked light here), or explicitly via [data-theme] once someone uses the toggle in the navbar (js/site.js writes the attribute + localStorage). */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --tcc-bg: #2b2129; --tcc-surface: #362a33; --tcc-ink: #f5ecd9; --tcc-text: #d9cdb5; --tcc-muted: #a89b83; --tcc-faint: #7d715c; --tcc-border: rgba(245,236,217,.14); --tcc-sunwash-opacity: .03; color-scheme: dark; } } :root[data-theme="dark"]{ --tcc-bg: #2b2129; --tcc-surface: #362a33; --tcc-ink: #f5ecd9; --tcc-text: #d9cdb5; --tcc-muted: #a89b83; --tcc-faint: #7d715c; --tcc-border: rgba(245,236,217,.14); --tcc-sunwash-opacity: .03; color-scheme: dark; } body{transition:background-color .25s ease,color .25s ease} /* min-height:100vh + flex column so .foot lands at the bottom of the viewport on short pages (margin-top:auto below) instead of floating right under the content, while still flowing normally on long pages. */ .page{max-width:100vw;min-height:100vh;display:flex;flex-direction:column} .wrap{max-width:1200px;margin:0 auto;padding-left:clamp(20px,4vw,40px);padding-right:clamp(20px,4vw,40px)} .sunwash{position:fixed;inset:0;background:var(--tcc-yellow);opacity:var(--tcc-sunwash-opacity, .12);pointer-events:none;z-index:1} /* ── scroll reveal (paired with js/site.js IntersectionObserver) ── soft, pleasant entrances: fade plus a little settling motion, eased like something coming gently to rest. Default is fade + slide up; add a modifier class alongside .reveal for variety. */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)} .reveal.visible{opacity:1;transform:none} .reveal--fade{transform:none} .reveal--scale{transform:scale(.96)} .reveal--scale.visible{transform:scale(1)} .reveal--left{transform:translateX(-28px)} .reveal--left.visible{transform:none} .reveal--right{transform:translateX(28px)} .reveal--right.visible{transform:none} /* ── stagger: direct children of these grids/rows cascade in one after another ── */ .art-grid>.reveal:nth-child(1),.foot-grid>.reveal:nth-child(1){transition-delay:.03s} .art-grid>.reveal:nth-child(2),.foot-grid>.reveal:nth-child(2){transition-delay:.09s} .art-grid>.reveal:nth-child(3),.foot-grid>.reveal:nth-child(3){transition-delay:.15s} .art-grid>.reveal:nth-child(4),.foot-grid>.reveal:nth-child(4){transition-delay:.21s} .art-grid>.reveal:nth-child(5),.foot-grid>.reveal:nth-child(5){transition-delay:.27s} .art-grid>.reveal:nth-child(6){transition-delay:.33s} .art-grid>.reveal:nth-child(7){transition-delay:.39s} .art-grid>.reveal:nth-child(8){transition-delay:.45s} .art-grid>.reveal:nth-child(n+9){transition-delay:.5s} /* ── type helpers ── */ .kicker{font-family:var(--tcc-font-serif);font-style:italic;font-size:var(--fs-md);letter-spacing:.05em;color:var(--tcc-orange)} .h-display{font-family:var(--tcc-font-display);font-weight:800;letter-spacing:-.025em;line-height:1;margin:0} /* ── tag pills (Notion "Tags" multi-select, stable color per word) ── */ .pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;justify-content:center} .pill{font-size:var(--fs-sm);font-weight:600;letter-spacing:.02em;color:var(--pc,var(--tcc-ink));background:color-mix(in srgb, var(--pc,var(--tcc-ink)) 14%, transparent);padding:5px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--pc,var(--tcc-ink)) 35%, transparent)} .pill-row--sm{justify-content:flex-start;margin-top:8px} .pill-row--sm .pill{font-size:var(--fs-xs);padding:4px 10px} /* ── buttons ── */ .btn{display:inline-block;font-family:var(--tcc-font-body);font-size:var(--fs-base);font-weight:600;padding:15px 32px;border-radius:999px;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s cubic-bezier(.34,1.56,.64,1),background .2s ease,color .2s ease,border-color .2s ease} .btn--pink{background:var(--tcc-pink);color:#fff;box-shadow:0 4px 0 var(--tcc-pink-shadow)} .btn--pink:hover{color:#fff;transform:translateY(-6px) rotate(-2deg);box-shadow:0 18px 30px -8px rgba(239,87,159,.6),0 4px 0 var(--tcc-pink-shadow)} .btn--pink:active{transform:translateY(1px) scale(.95);box-shadow:0 2px 0 var(--tcc-pink-shadow)} .btn--outline{border:1.6px solid var(--tcc-ink);color:var(--tcc-ink);background:transparent} .btn--outline:hover{transform:translateY(-6px) rotate(2deg);background:var(--tcc-ink);color:var(--tcc-bg);box-shadow:0 18px 30px -10px rgba(42,33,24,.4)} .btn--outline:active{transform:translateY(1px) scale(.95)} .btn--outline.tint-sky:hover{transform:translateY(-5px) rotate(-2deg);background:var(--tcc-sky);border-color:var(--tcc-sky);color:#2a2118;box-shadow:0 16px 26px -10px rgba(110,207,246,.7)} .btn--outline.tint-lime:hover{transform:translateY(-5px) rotate(1.5deg);background:var(--tcc-lime);border-color:var(--tcc-lime);color:#2a2118;box-shadow:0 16px 26px -10px rgba(195,216,45,.7)} /* ── nav / topbar ── */ .topbar{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--tcc-bg) 86%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--tcc-border)} .topbar-in{display:flex;align-items:center;justify-content:space-between;padding-top:20px;padding-bottom:20px;gap:20px} .brand{font-family:var(--tcc-font-serif);font-style:italic;font-weight:600;font-size:var(--fs-lg);letter-spacing:.01em;display:flex;align-items:baseline;gap:14px;min-width:0} .topnav{display:flex;align-items:center;gap:26px;font-size:calc(var(--fs-sm) + 1px);font-weight:600;letter-spacing:.01em;flex:none} .topnav a{display:inline-block;transition:transform .2s cubic-bezier(.34,1.56,.64,1),color .2s ease} .topnav a:not(.nav-cta):hover{transform:translateY(-3px) rotate(-2deg);color:var(--tcc-pink)} .topnav a:not(.nav-cta):active{transform:translateY(1px) scale(.94)} .topnav a.nav-cta{position:relative;display:inline-flex;align-items:center;background:var(--tcc-yellow);color:#2a2118;border:1.6px solid var(--tcc-yellow);padding:9px 20px;border-radius:999px;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease} .topnav a.nav-cta:hover{color:#2a2118;transform:translateY(-4px) rotate(-3deg);box-shadow:0 12px 22px -6px rgba(254,239,73,.6)} .topnav a.nav-cta:active{transform:translateY(1px) scale(.92)} /* envelope that peeks out from under the CTA on hover, "Mail Club" jittering as it drops in */ .nav-cta-mail{position:absolute;top:100%;left:50%;z-index:-1;display:flex;align-items:center;gap:6px;padding:7px 14px 7px 12px;border-radius:0 0 16px 16px;background:var(--tcc-yellow);color:#2a2118;font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;white-space:nowrap;opacity:0;pointer-events:none;transform:translate(-50%,-12px);box-shadow:0 10px 18px -10px rgba(42,33,24,.35);transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .25s ease} .nav-cta-mail svg{width:15px;height:15px;flex:none} .nav-cta:hover .nav-cta-mail{opacity:1;transform:translate(-50%,6px)} .nav-cta:hover .nav-cta-mail-text{display:inline-block;animation:navMailJitter .45s ease-in-out infinite} @keyframes navMailJitter{0%,100%{transform:rotate(-2deg)}25%{transform:rotate(1.5deg)}50%{transform:rotate(-1deg)}75%{transform:rotate(2deg)}} @media (prefers-reduced-motion:reduce){.nav-cta:hover .nav-cta-mail-text{animation:none}} /* ── dark mode toggle button ── */ .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;border-radius:50%;border:1.4px solid var(--tcc-border);background:var(--tcc-surface);color:var(--tcc-ink);cursor:pointer;padding:0;transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .2s ease,border-color .2s ease} .theme-toggle:hover{transform:translateY(-3px) rotate(-10deg);background:var(--tcc-yellow);border-color:var(--tcc-yellow);color:#2a2118} .theme-toggle:active{transform:translateY(1px) scale(.92)} .theme-toggle-icon{width:17px;height:17px} .theme-toggle-icon--moon{display:none} :root[data-theme="dark"] .theme-toggle-icon--sun{display:none} :root[data-theme="dark"] .theme-toggle-icon--moon{display:block} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .theme-toggle-icon--sun{display:none} :root:not([data-theme="light"]) .theme-toggle-icon--moon{display:block} } /* ── currency picker (js/currency.js) ── */ .currency-select{position:relative;flex:none} .currency-toggle{display:flex;align-items:center;gap:6px;font-family:var(--tcc-font-body);font-size:var(--fs-sm);font-weight:600;letter-spacing:.02em;color:var(--tcc-ink);background:var(--tcc-surface);border:1.4px solid var(--tcc-border);padding:8px 12px;border-radius:999px;cursor:pointer;transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .2s ease,border-color .2s ease} .currency-toggle:hover{background:var(--tcc-yellow);border-color:var(--tcc-yellow);color:#2a2118} .currency-toggle svg{width:9px;height:6px;flex:none;transition:transform .2s ease} .currency-toggle[aria-expanded="true"] svg{transform:rotate(180deg)} .currency-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:130px;background:var(--tcc-bg);border:1.4px solid var(--tcc-border);border-radius:14px;box-shadow:0 16px 34px -18px rgba(42,33,24,.5);padding:6px;list-style:none;margin:0} .currency-menu[hidden]{display:none} .currency-menu li{padding:9px 12px;font-size:var(--fs-sm);font-weight:600;letter-spacing:.02em;border-radius:9px;cursor:pointer;color:var(--tcc-text);transition:background .15s ease,color .15s ease} .currency-menu li:hover{background:var(--tcc-surface);color:var(--tcc-ink)} .currency-menu li[aria-selected="true"]{color:var(--tcc-pink)} /* prices that switch currency client-side — no layout shift on update, just a quick crossfade so the number change reads as intentional, not a glitch */ .tcc-price{transition:opacity .15s ease} .tcc-price.is-updating{opacity:.35} /* ══════════════════ PIECE DETAIL PAGE (art + print) ══════════════════ */ .art-page{position:relative;padding:60px 20px 90px;display:flex;justify-content:center} /* min-width:0 — .art is a flex item of .art-page; without it, a flex item's default min-width:auto is its content's min-content size, so a deeply nested photo at its native (large) intrinsic size stops the whole page from shrinking below that width on narrow viewports. */ .art{width:100%;min-width:0;max-width:1360px;display:flex;flex-direction:column;gap:44px;position:relative;z-index:2} .art-greeting{text-align:center;max-width:42ch;margin:0 auto;font-family:var(--tcc-font-serif);font-style:italic;font-size:var(--fs-h2);line-height:1.6;color:var(--tcc-text)} .art-greeting-name{font-style:normal;font-weight:600;color:var(--tcc-pink)} /* ── product layout: media left, purchase + details right ── minmax(0,…) — not plain 1fr — on every grid track: a grid item's default min-width:auto derives from its content's intrinsic size, so a large photo can blow out the track past 100% even though the img is width:100%. minmax(0,…) removes that automatic minimum and lets the image shrink to fit. */ .art-product{display:grid;grid-template-columns:minmax(0,1fr);gap:36px;align-items:start} .art-media{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;max-width:100%;overflow:hidden} .art-info{display:flex;flex-direction:column;gap:22px;min-width:0} @media (min-width:840px){ .art-product{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:52px} } @media (min-width:1024px){ .art-media{position:sticky;top:112px} } .art-photo{margin:0;width:100%} /* Native ratio, no crop — the image dictates its own height; everything else (info column, page) flexes around whatever size it turns out to be. */ .art-photo img{width:100%;height:auto;display:block;border-radius:16px;box-shadow:0 20px 50px -24px rgba(42,33,24,.45)} .art-photo-placeholder{width:100%;aspect-ratio:4/5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;border-radius:16px;box-shadow:0 20px 50px -24px rgba(42,33,24,.45);background:var(--tcc-surface);border:1px solid var(--tcc-border);color:var(--tcc-faint)} .art-photo-placeholder svg{width:38%;height:auto} .art-photo-placeholder span{font-size:var(--fs-2xs);letter-spacing:.1em;text-transform:uppercase;color:var(--tcc-muted)} .art-photo figcaption{margin-top:14px;text-align:center;font-size:var(--fs-sm);letter-spacing:.03em;color:var(--tcc-muted)} /* ── gallery media: thumbnail rail + big main image (2+ photos) ── */ .art-gallery-media{display:flex;gap:16px;align-items:flex-start} .art-thumbs{display:flex;flex-direction:column;gap:10px;flex:0 0 76px} .art-thumb{padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:none;line-height:0;cursor:pointer;opacity:.55;transition:opacity .2s ease,border-color .2s ease} .art-thumbs .art-thumb img{width:100%;height:76px;object-fit:cover;display:block} .art-thumb:hover{opacity:.85} .art-thumb.is-active{opacity:1;border-color:var(--tcc-pink)} .art-main{position:relative;flex:1;min-width:0} .art-carousel-track{display:flex;align-items:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:16px;box-shadow:0 20px 50px -24px rgba(42,33,24,.45);scrollbar-width:none;-ms-overflow-style:none} .art-carousel-track::-webkit-scrollbar{display:none} .art-carousel-slide{flex:0 0 100%;scroll-snap-align:start} .art-carousel-slide img{width:100%;height:auto;display:block} .art-carousel-btn{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:color-mix(in srgb, var(--tcc-bg) 92%, transparent);border:1px solid var(--tcc-border);display:flex;align-items:center;justify-content:center;font-size:var(--fs-md);line-height:1;color:var(--tcc-ink);cursor:pointer;padding:0;transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .2s ease} .art-carousel-btn:hover{background:var(--tcc-bg);transform:translateY(-50%) scale(1.08)} .art-carousel-btn--prev{left:12px} .art-carousel-btn--next{right:12px} @media (max-width:720px){ .art-gallery-media{flex-direction:column;align-items:stretch} .art-thumbs{flex-direction:row;flex:0 0 auto;overflow-x:auto;order:2} .art-thumbs .art-thumb{flex:0 0 56px} .art-thumbs .art-thumb img{height:56px} .art-main{order:1;min-width:0} } /* ── "watch it being painted" — a standalone link below the media, not overlaid on it ── */ .art-watch-link{display:inline-flex;align-items:center;gap:9px;margin-top:14px;font-size:var(--fs-sm);font-weight:600;color:var(--tcc-ink);background:var(--tcc-surface);border:1px solid var(--tcc-border);padding:9px 18px 9px 9px;border-radius:999px;transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .2s ease} .art-watch-link:hover{color:var(--tcc-ink);background:var(--tcc-yellow);transform:translateY(-3px) rotate(-1deg)} .art-watch-icon{width:22px;height:22px;border-radius:50%;background:var(--tcc-ink);color:var(--tcc-bg);display:flex;align-items:center;justify-content:center;flex-shrink:0} .art-watch-icon svg{width:10px;height:10px;margin-left:1px} .art-info .art-header{text-align:left} .art-info .pill-row{justify-content:flex-start} .art-header .art-status{margin-bottom:10px} .art-info .art-status{align-self:flex-start} .art-eyeline{font-family:var(--tcc-font-serif);font-style:italic;font-size:var(--fs-base);letter-spacing:.03em;color:var(--tcc-orange);margin-bottom:20px} .art-title{margin:40px 0 20px;font-family:var(--tcc-font-display);font-weight:800;letter-spacing:-.02em;font-size:var(--fs-h1);line-height:1.02;color:var(--tcc-ink)} /* .art-info's flex gap already puts 22px above the buy button; top it up to 40px here — the same gap the status pill sits above the title. */ .art-header + .art-actions{margin-top:18px} .art-sub{margin-top:4px;font-size:var(--fs-sm);letter-spacing:.02em;color:var(--tcc-text)} /* status pill */ .art-status{align-self:center;display:inline-flex;align-items:center;gap:9px;padding:10px 20px;border-radius:999px;border:1.4px solid var(--tcc-border);font-size:var(--fs-sm);font-weight:600;letter-spacing:.01em} .art-status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} .art-status--available{background:rgba(195,216,45,.14);color:#6b7a10;border-color:rgba(195,216,45,.5)} .art-status--available .art-status-dot{background:var(--tcc-lime);animation:tcc-pulse 2.6s ease-in-out infinite} .art-status--sold{background:rgba(239,87,159,.1);color:var(--tcc-pink);border-color:rgba(239,87,159,.35)} .art-status--sold .art-status-dot{background:var(--tcc-pink)} .art-status--reserved{background:rgba(246,138,50,.12);color:#a1560f;border-color:rgba(246,138,50,.4)} .art-status--reserved .art-status-dot{background:var(--tcc-orange)} .art-status--wip{background:var(--tcc-surface);color:var(--tcc-muted);border-color:var(--tcc-border)} .art-status--wip .art-status-dot{background:var(--tcc-muted)} .art-status--archived{background:var(--tcc-surface);color:var(--tcc-faint);border-color:var(--tcc-border)} .art-status--archived .art-status-dot{background:var(--tcc-faint)} :root[data-theme="dark"] .art-status--available{color:#d7ea6e} :root[data-theme="dark"] .art-status--reserved{color:#ffb066} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .art-status--available{color:#d7ea6e} :root:not([data-theme="light"]) .art-status--reserved{color:#ffb066} } /* note from the studio */ .art-note{border-top:1px solid var(--tcc-border);border-bottom:1px solid var(--tcc-border);padding:36px 0} .art-note-mark{font-size:calc(var(--fs-xs) + 1px);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tcc-orange);margin-bottom:18px} .art-note p{font-family:var(--tcc-font-serif);font-size:calc(var(--fs-md) + 1px);font-style:normal;font-weight:500;line-height:1.7;color:var(--tcc-ink);margin:0 0 18px} .art-note p:last-child{margin-bottom:0} .art-note .art-sign{font-family:var(--tcc-font-serif);font-style:italic;font-weight:600;font-size:var(--fs-md);color:var(--tcc-pink);margin-top:6px} /* actions */ .art-actions{display:flex;flex-direction:column;gap:12px;align-items:flex-start} .art-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:320px;padding:16px 24px;text-decoration:none;font-family:var(--tcc-font-body);font-size:var(--fs-base);font-weight:600;border-radius:999px;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s cubic-bezier(.34,1.56,.64,1),background .2s ease,color .2s ease} .art-btn-icon{font-size:var(--fs-xs)} .art-btn--video{background:var(--tcc-ink);color:var(--tcc-bg)} .art-btn--video:hover{transform:translateY(-4px) rotate(-1.5deg);box-shadow:0 16px 30px -12px rgba(42,33,24,.5)} .art-btn--buy{background:var(--tcc-pink);color:#fff;box-shadow:0 4px 0 var(--tcc-pink-shadow)} .art-btn--buy:hover{color:#fff;transform:translateY(-4px) rotate(-1.5deg);box-shadow:0 16px 28px -10px rgba(239,87,159,.6),0 4px 0 var(--tcc-pink-shadow)} .art-btn--buy:active{transform:translateY(1px) scale(.97);box-shadow:0 2px 0 var(--tcc-pink-shadow)} .art-btn--disabled{background:var(--tcc-surface);color:var(--tcc-muted);border:1.4px solid var(--tcc-border);cursor:default} .art-btn--outline{background:transparent;color:var(--tcc-ink);border:1.4px solid var(--tcc-ink)} .art-btn--outline:hover{color:var(--tcc-bg);background:var(--tcc-ink);transform:translateY(-4px) rotate(-1.5deg);box-shadow:0 16px 30px -12px rgba(42,33,24,.4)} .art-btn--outline:active{transform:translateY(1px) scale(.97)} /* payment trust badges — shown under the buy button */ .trust-badges{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:6px} .trust-badges-label{font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tcc-muted);margin:0} .trust-badges-row{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px} .trust-badge{color:var(--tcc-muted)} .trust-badge svg{width:46px;height:31px;display:block} .trust-badges-note{font-size:var(--fs-sm);color:var(--tcc-muted);margin:0} /* no dead ends — more pieces / prints */ .art-more{text-align:center;padding:40px 26px;background:var(--tcc-surface);border:1px solid var(--tcc-border);border-radius:16px} .art-more h2{font-family:var(--tcc-font-display);font-weight:800;letter-spacing:-.02em;font-size:var(--fs-h2);line-height:1.12;color:var(--tcc-ink);margin:0 0 12px} .art-more p{font-size:var(--fs-base);line-height:1.65;color:var(--tcc-text);margin:0 0 20px} .art-more-link{font-size:var(--fs-sm);font-weight:600;color:var(--tcc-pink);text-decoration:none;border-bottom:1.4px solid var(--tcc-pink);padding-bottom:2px;transition:opacity .25s ease} .art-more-link:hover{opacity:.65} .art-more-list{display:flex;flex-direction:column;gap:10px} .art-more-list a{font-family:var(--tcc-font-display);font-weight:700;font-size:var(--fs-md);color:var(--tcc-ink);text-decoration:none;transition:color .25s ease} .art-more-list a:hover{color:var(--tcc-pink)} /* cross-link to a print's original painting — glassmorphic: the original's own photo, blurred, behind a frosted "visit" chip. --orig-photo is set inline per piece; when absent the ::before has nothing to paint and it reads as a plain sky-blue tinted glass card (border matches the sky-blue tag color). */ .art-original-cta{position:relative;display:flex;align-items:center;justify-content:center;min-height:140px;padding:28px 24px;border-radius:16px;border:1.5px solid var(--tcc-sky);overflow:hidden;isolation:isolate} .art-original-cta::before{content:'';position:absolute;inset:-24px;background-image:var(--orig-photo,none);background-size:cover;background-position:center;filter:blur(22px) saturate(1.25);z-index:-2} .art-original-cta::after{content:'';position:absolute;inset:0;background:rgba(110,207,246,.3);z-index:-1} .art-original-cta-link{position:relative;display:inline-block;background:color-mix(in srgb, var(--tcc-bg) 82%, transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--tcc-ink);font-family:var(--tcc-font-display);font-weight:700;font-size:var(--fs-base);padding:12px 26px;border-radius:999px;box-shadow:0 10px 24px -12px rgba(42,33,24,.4);transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease} .art-original-cta-link:hover{color:var(--tcc-ink);transform:translateY(-3px);box-shadow:0 14px 28px -10px rgba(42,33,24,.5)} /* "you might like" — small related-pieces carousel */ .art-related h2{font-family:var(--tcc-font-display);font-weight:800;letter-spacing:-.02em;font-size:var(--fs-h2);line-height:1.12;color:var(--tcc-ink);margin:0 0 20px} .art-related-empty{font-size:var(--fs-base);line-height:1.65;color:var(--tcc-text);margin:0 0 12px} .art-related-wrap{position:relative} .art-related-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;padding:2px 2px 6px} .art-related-track::-webkit-scrollbar{display:none} .art-related-card{flex:0 0 220px;scroll-snap-align:start;display:flex;flex-direction:column;gap:8px} /* Native ratio, no crop — matches the main photo's treatment; only the placeholder (no real image to size from) keeps a fixed box. */ .art-related-photo{border-radius:12px;overflow:hidden;box-shadow:0 10px 26px -16px rgba(42,33,24,.4)} .art-related-photo img{width:100%;height:auto;display:block;transition:transform .4s cubic-bezier(.2,.8,.2,1)} .art-related-card:hover .art-related-photo img{transform:scale(1.05)} .art-related-placeholder{width:100%;aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;background:var(--tcc-surface);border:1px solid var(--tcc-border);color:var(--tcc-faint)} .art-related-placeholder svg{width:44%;height:auto} .art-related-title{font-family:var(--tcc-font-display);font-weight:700;font-size:var(--fs-sm);line-height:1.25;color:var(--tcc-ink);transition:color .2s ease} .art-related-card:hover .art-related-title{color:var(--tcc-pink)} .art-related-price{font-size:var(--fs-xs);color:var(--tcc-muted)} .art-related-wrap .art-carousel-btn{top:112px} @media (max-width:600px){ .art-related-card{flex:0 0 168px} .art-related-wrap .art-carousel-btn{display:none} } /* socials */ .art-socials{text-align:center} .art-socials-label{font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tcc-muted);margin-bottom:14px} .contact-links{display:flex;justify-content:center} .contact-link{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:600;color:var(--tcc-ink);transition:color .2s ease} .contact-link:hover{color:var(--tcc-pink)} .contact-link-icon{font-size:var(--fs-sm)} /* ══════════════════ GALLERY PAGES (originals index + prints index) ══════════════════ */ .art-gallery-page{position:relative;padding:60px clamp(24px,8vw,100px) 90px;display:flex;justify-content:center} .art-gallery{width:100%;max-width:1700px;display:flex;flex-direction:column;gap:48px;position:relative;z-index:2} .art-gallery-head{text-align:center} .art-gallery-intro{max-width:50ch;margin:14px auto 0;font-size:var(--fs-base);line-height:1.65;color:var(--tcc-text)} .art-gallery-count{margin-top:14px;font-size:var(--fs-sm);font-weight:600;letter-spacing:.02em;color:var(--tcc-muted)} .art-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 24px} .art-card{display:flex;flex-direction:column;gap:14px;text-decoration:none} .art-card-photo{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 16px 40px -22px rgba(42,33,24,.4);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease} .art-card-photo img, .art-card-placeholder{width:100%;aspect-ratio:5/7;display:block} .art-card-photo img{object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)} .art-card-placeholder{display:flex;align-items:center;justify-content:center;background:var(--tcc-surface);border:1px solid var(--tcc-border);color:var(--tcc-faint)} .art-card-placeholder svg{width:42%;height:auto} .art-card:hover .art-card-photo{transform:translateY(-6px);box-shadow:0 22px 46px -20px rgba(42,33,24,.5)} .art-card:hover .art-card-photo img{transform:scale(1.04)} .art-tag{position:absolute;top:12px;left:12px;z-index:3;font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:5px 10px;border-radius:999px} .art-tag--available{background:var(--tcc-lime);color:var(--tcc-ink)} .art-tag--sold{background:var(--tcc-pink);color:#fff} .art-tag--reserved{background:var(--tcc-orange);color:#fff} .art-tag--wip{background:var(--tcc-yellow);color:var(--tcc-ink)} .art-tag--archived{background:rgba(42,33,24,.55);color:#fff} .art-card-body{text-align:left} .art-card-title{font-family:var(--tcc-font-display);font-weight:700;font-size:var(--fs-md);line-height:1.15;color:var(--tcc-ink);transition:color .25s ease} .art-card:hover .art-card-title{color:var(--tcc-pink)} .art-card-sub{margin-top:4px;font-size:var(--fs-sm);color:var(--tcc-muted)} /* ── print-only bits (reuse everything above) ── */ .print-ratio img, .print-ratio .art-photo-placeholder, .print-ratio .art-card-placeholder{aspect-ratio:17/22} /* 8.5″ × 11″ */ .print-price{margin-top:10px;font-family:var(--tcc-font-display);font-weight:700;font-size:var(--fs-md);color:var(--tcc-ink)} .print-ship{text-align:center;font-size:var(--fs-sm);line-height:1.8;color:var(--tcc-muted)} /* ══════════════════ FOOTER ══════════════════ Same bg/ink/border tokens as .topbar — no inversion — so the footer reads as the same surface as the header, just at the bottom of the page. margin-top:auto is what pins it to the viewport bottom on short pages (paired with .page's flex column above). */ .foot{background:var(--tcc-bg);color:var(--tcc-ink);border-top:1px solid var(--tcc-border);position:relative;z-index:2;margin-top:auto} .foot-in{padding-top:64px;padding-bottom:36px} .foot-grid{display:grid;grid-template-columns:1.3fr .95fr .85fr 1fr 1.05fr;gap:36px;padding-bottom:36px} .foot-grid>.reveal{min-width:0} .foot-brand{font-family:var(--tcc-font-serif);font-style:italic;font-weight:600;font-size:var(--fs-lg);margin-bottom:14px} .foot-tag{font-size:var(--fs-base);line-height:1.6;color:var(--tcc-text);margin:0;max-width:34ch} .foot-h{font-size:var(--fs-sm);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tcc-muted);margin-bottom:16px} .foot-col{display:flex;flex-direction:column;gap:11px;font-size:var(--fs-base)} .foot-note{font-size:var(--fs-base);line-height:1.55;color:var(--tcc-text);margin:0 0 14px} .foot-signup{display:flex;gap:10px;flex-wrap:wrap} .foot-signup-input{flex:1 1 100px;min-width:0;padding:11px 16px;border-radius:999px;border:1.4px solid var(--tcc-border);background:var(--tcc-surface);color:var(--tcc-ink);font-family:var(--tcc-font-body);font-size:var(--fs-sm)} .foot-signup-input::placeholder{color:var(--tcc-muted)} .foot-signup-input:focus{outline:none;border-color:var(--tcc-pink)} .join-btn{display:inline-block;background:var(--tcc-pink);color:#fff;font-family:var(--tcc-font-body);font-size:var(--fs-sm);font-weight:600;padding:11px 20px;border:none;border-radius:999px;cursor:pointer;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s cubic-bezier(.34,1.56,.64,1)} .join-btn:hover{color:#fff;transform:translateY(-4px) rotate(-3deg);box-shadow:0 12px 22px -6px rgba(239,87,159,.7)} .join-btn:active{transform:translateY(1px) scale(.92)} /* Newsletter / product-waitlist signup forms (js/subscribe.js) — shared by the footer form above, /painting/mail-club/, and the per-print "notify me" form build.js generates for draft-status prints. */ .subscribe-honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none} .subscribe-status{margin:8px 0 0;font-size:var(--fs-xs);color:var(--tcc-muted);min-height:1.2em} .subscribe-status.is-success{color:#6b7a10} .subscribe-status.is-error{color:var(--tcc-pink)} .subscribe-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center;width:100%;max-width:380px} .subscribe-input{flex:1 1 180px;min-width:0;padding:14px 20px;border-radius:999px;border:1.4px solid var(--tcc-border);background:var(--tcc-surface);color:var(--tcc-ink);font-family:var(--tcc-font-body);font-size:var(--fs-sm)} .subscribe-input::placeholder{color:var(--tcc-muted)} .subscribe-input:focus{outline:none;border-color:var(--tcc-pink)} .subscribe-optin{display:flex;align-items:center;gap:8px;font-size:var(--fs-xs);color:var(--tcc-muted);width:100%} .foot-checkout{display:flex;flex-direction:column;align-items:center;gap:12px;padding-bottom:32px;border-bottom:1px solid var(--tcc-border);text-align:center} .foot-checkout .trust-badges-row{justify-content:center} .foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:22px;flex-wrap:wrap;gap:10px;font-size:var(--fs-sm);color:var(--tcc-muted)} /* social icon row — same pill/circle treatment as the header's theme toggle */ .foot-socials{display:flex;gap:10px;margin-top:16px} .foot-social{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--tcc-surface);border:1.4px solid var(--tcc-border);color:var(--tcc-ink);transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .2s ease,border-color .2s ease} .foot-social:hover{background:var(--tcc-yellow);border-color:var(--tcc-yellow);color:#2a2118;transform:translateY(-3px) rotate(-4deg)} .foot-social:active{transform:translateY(1px) scale(.92)} .foot-social svg{width:18px;height:18px} /* ── responsive ── */ @media (max-width:900px){ .art-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:720px){ .topnav .hide-sm{display:none} .topnav{gap:16px} .foot-grid{grid-template-columns:1fr 1fr} } @media (max-width:600px){ .art-page,.art-gallery-page{padding-top:48px} .art-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px 16px} .art-card-title{font-size:var(--fs-base)} .foot-grid{grid-template-columns:1fr} } /* ══════════════════ LANDING PAGE (/painting/) ══════════════════ Merged from _partials/painting-landing.html's former inline