/** Shopify CDN: Minification failed Line 16:3 Unexpected "=" **/ /* ========================================================= AUVART — Hidden Memory Art (Shopify Horizon port) All rules are scoped under .auvart-section so they never collide with Horizon's own header/footer/theme styles. Design tokens are declared on .auvart-section instead of :root. DESIGN PASS 01 — 2026-07-25 Changes are grouped under the original section headings. Every original selector is preserved; nothing renamed or removed. New rules are marked /* + NEW */ /* and changed values marked /* ~ was: ... */ ========================================================= */ .auvart-section{ --ink:#1A1A2E; --ink-deep:#0F0F1E; --ink-soft:#20203A; --bone:#F4EFE6; --copper:#8C5A3C; --copper-bright:#B87A52; --sage:#9AA896; --cream:#E8DFC9; --violet:#6B5876; /* + NEW — extra night tones so the dark run reads as one continuous sky instead of alternating ink / ink-deep blocks (which was invisible anyway) */ --ink-void:#08080F; --ink-0:#0B0B16; --ink-1:#12122A; --ink-2:#191930; --ink-3:#17172C; --ink-4:#101020; --copper-dim:#5A3A26; --serif:"Playfair Display", "Didot", "Bodoni 72", serif; --editorial:"Cormorant Garamond", "Playfair Display", serif; --sans:"Inter", -apple-system, "Helvetica Neue", sans-serif; --mono:"JetBrains Mono", ui-monospace, monospace; --ease:cubic-bezier(.22,.61,.36,1); --ease-slow:cubic-bezier(.65,.05,.36,1); --ease-out:cubic-bezier(.22,1,.36,1); --container:1240px; --gutter: clamp(20px, 4vw, 64px); /* ========================================================= + NEW — FLUID TYPE SCALE The old file hard-coded a different clamp() at every call site, which is why the page had no real hierarchy: everything landed in the same 40–72px band. One scale, used everywhere. ========================================================= */ --step--2: clamp(9.5px, 0.52rem + 0.08vw, 11px); /* micro label / eyebrow */ --step--1: clamp(11.5px, 0.66rem + 0.14vw, 13px); /* small UI, pills, meta */ --step-0: clamp(14.5px, 0.85rem + 0.2vw, 17px); /* body */ --step-1: clamp(17px, 0.95rem + 0.45vw, 21px); /* lede */ --step-2: clamp(21px, 1.05rem + 0.9vw, 29px); /* h3 / card title */ --step-3: clamp(28px, 1.1rem + 2.2vw, 48px); /* small display h2 */ --step-4: clamp(36px, 1.1rem + 4vw, 78px); /* display h2 */ --step-5: clamp(46px, 0.9rem + 5.6vw, 104px); /* hero + closing CTA */ /* + NEW — OPTICAL TRACKING Letter-spacing has to shrink as type grows. The old file used .18em on a 108px heading, which is a poster-template tell. Large serif display wants slightly NEGATIVE tracking; only small caps want wide tracking. */ --track-micro: .40em; --track-label: .22em; --track-body: .005em; --track-display:-.012em; --track-caps: .05em; /* + NEW — SPACING RHYTHM Sections used to all be ~140–200px tall padding, so the page had one uniform beat. Three tiers give the page a cadence. */ --pad-tight: clamp(64px, 8vw, 104px); --pad-base: clamp(88px, 11vw, 150px); --pad-loose: clamp(112px, 15vw, 200px); /* + NEW — STARFIELD Eight tiled radial-gradient layers. Applied as a background-image on dark sections (NOT a pseudo-element) so it can never paint over content and needs no markup change. Sefa's note: "genel arkaplan çok sade". */ --stars: radial-gradient(1.5px 1.5px at 12% 18%, rgba(244,239,230,.75), transparent 56%), radial-gradient(1.1px 1.1px at 78% 9%, rgba(244,239,230,.48), transparent 56%), radial-gradient(1px 1px at 43% 63%, rgba(232,223,201,.42), transparent 56%), radial-gradient(1.9px 1.9px at 88% 74%, rgba(184,122,82,.55), transparent 56%), radial-gradient(1px 1px at 61% 33%, rgba(244,239,230,.34), transparent 56%), radial-gradient(1.2px 1.2px at 27% 87%, rgba(244,239,230,.40), transparent 56%), radial-gradient(1px 1px at 96% 44%, rgba(154,168,150,.34), transparent 56%), radial-gradient(1.4px 1.4px at 6% 55%, rgba(244,239,230,.44), transparent 56%); --stars-size: 723px 723px, 541px 541px, 647px 647px, 883px 883px, 461px 461px, 701px 701px, 607px 607px, 821px 821px; /* + NEW — horizon glow: a very wide, very low copper ellipse anchored to the bottom edge of dark sections. Reads as light bleeding up off a gallery floor. */ --horizon: radial-gradient(ellipse 120% 55% at 50% 108%, rgba(184,122,82,.13), transparent 68%); position:relative; background:var(--ink); color:var(--bone); font-family:var(--sans); font-weight:300; font-size:var(--step-0); /* ~ was: inherited */ line-height:1.6; /* ~ was: 1.55 */ letter-spacing:var(--track-body); -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; } .auvart-section *{box-sizing:border-box} .auvart-section ::selection{background:var(--copper);color:var(--bone)} /* + NEW — anchor-linked jumps (nav → #auvart-faq) must clear the sticky header */ .auvart-section[id]{scroll-margin-top:96px} @media (max-width:760px){ .auvart-section[id]{scroll-margin-top:72px} } /* ---------- TYPOGRAPHY PRIMITIVES ---------- */ /* THE CENTRAL CHANGE OF THIS PASS. .display used to be: 900 weight, uppercase, .18em tracking — applied to every h2 on the site. Ultra-bold + uppercase + wide tracking at 72px is the single most "stock template" typographic move there is, and it flattened all ten sections into the same voice. Now: Playfair at 500, mixed case, optically tight. The character comes from the serif itself and from the italic Cormorant accent word beside it. TO REVERT to the old look, change only these two lines: --display-case: uppercase; --display-weight: 900; --display-track: .18em; */ .auvart-section{ --display-case:none; --display-weight:500; --display-track:var(--track-display); } .auvart-section .display{ font-family:var(--serif);font-weight:var(--display-weight); /* ~ was: 900 */ text-transform:var(--display-case); /* ~ was: uppercase */ letter-spacing:var(--display-track); /* ~ was: .18em */ line-height:1.02; /* ~ was: .98 */ font-size:var(--step-4); /* + NEW default */ } .auvart-section .display.italic{ font-style:italic;text-transform:none;letter-spacing:.005em; /* ~ was: .02em */ font-weight:400; /* ~ was: 700 */ font-family:var(--editorial); color:var(--copper-bright); /* + NEW — the accent word now always carries the copper */ font-size:1.06em; /* + NEW — Cormorant runs optically small next to Playfair */ } /* keep accent words whole (Horizon global overflow-wrap breaks them mid-word) */ .auvart-section h1,.auvart-section h2,.auvart-section .display{overflow-wrap:normal;word-break:keep-all} .auvart-section .display.italic,.auvart-section h1 .it,.auvart-section h2 .it{display:inline-block;overflow-wrap:normal;word-break:keep-all} .auvart-section .eyebrow{ font-family:var(--sans);text-transform:uppercase; letter-spacing:var(--track-micro); /* ~ was: .42em */ font-size:var(--step--2); /* ~ was: clamp(11px,1.2vw,13px) */ font-weight:500; color:var(--copper-bright); /* ~ was: var(--copper) — was too dim to read at .5 opacity */ display:block;text-align:center;width:100%; opacity:.72; /* ~ was: .5 */ margin-bottom:8px; } .auvart-section .eyebrow .dot{display:inline-block;width:3px;height:3px;background:var(--copper);border-radius:50%;margin:0 10px;vertical-align:middle} .auvart-section .lede{ font-family:var(--editorial);font-style:italic;font-weight:300; font-size:var(--step-1); /* ~ was: clamp(18px,1.6vw,24px) */ color:rgba(244,239,230,.72);line-height:1.55;letter-spacing:.005em; } .auvart-section .divider-copper{display:block;height:1px;width:64px;background:linear-gradient(90deg,transparent,var(--copper),transparent);margin:28px auto;opacity:.9} .auvart-section .divider-copper.left{margin-left:0;margin-right:auto;background:linear-gradient(90deg,var(--copper),transparent)} /* + NEW — small caps label, used for the hero micro-trust line and section meta */ .auvart-section .microline{ font-family:var(--sans);font-size:var(--step--2);font-weight:400; letter-spacing:var(--track-label);text-transform:uppercase; color:rgba(244,239,230,.5); } .auvart-section .microline .sep{display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--copper-bright);margin:0 12px;vertical-align:middle;opacity:.8} /* reusable button */ .auvart-section .btn{ display:inline-flex;align-items:center;gap:14px; font-family:var(--sans);font-size:var(--step--1);font-weight:400;text-transform:uppercase; letter-spacing:var(--track-label); /* ~ was: .32em */ padding:17px 32px;border:1px solid var(--copper);color:var(--bone);background:transparent; text-decoration:none;cursor:pointer;position:relative;overflow:hidden; transition:color .45s var(--ease), background .45s var(--ease), border-color .45s var(--ease); } .auvart-section .btn::before{content:"";position:absolute;inset:0;background:var(--copper);transform:translateY(101%);transition:transform .5s var(--ease);z-index:-1} .auvart-section .btn:hover::before{transform:translateY(0)} .auvart-section .btn:hover{color:var(--bone);border-color:var(--copper-bright)} /* ~ was: letter-spacing:.38em — the text used to shift on hover, which jitters the layout */ .auvart-section .btn.filled{background:var(--copper);color:var(--bone);border-color:var(--copper)} .auvart-section .btn.filled::before{background:var(--ink-deep)} .auvart-section .btn .arrow{display:inline-block;width:18px;height:1px;background:currentColor;position:relative;transition:width .45s var(--ease)} .auvart-section .btn .arrow::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-right:1px solid currentColor;border-top:1px solid currentColor;transform:rotate(45deg)} .auvart-section .btn:hover .arrow{width:28px} /* layout shell */ .auvart-section .container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)} /* ---------- MOTION PRIMITIVES ---------- */ /* Audit item 8: 22ms per-letter stagger + 8–12px blur over 1.1–1.6s meant fast scrolling landed on sections that were still blank. Retimed to the audit's own recommendation: ~9ms stagger, 3px blur, 650–850ms. */ .auvart-section .split-char{ display:inline-block; transform:translateY(52%); /* ~ was: translateY(110%) rotate(2deg) */ opacity:0;filter:blur(3px); /* ~ was: blur(8px) */ transition:transform .72s var(--ease-out), opacity .6s var(--ease-out), filter .72s var(--ease-out); /* ~ was: 1.1s / .9s / 1.1s */ will-change:transform, opacity, filter; } .auvart-section .split-char.reveal{transform:translateY(0);opacity:1;filter:blur(0)} /* keep letter-split words unbreakable: chars are inline-blocks, so without this wrapper the browser may wrap mid-word (e.g. "steps." -> "s / teps.") */ .auvart-section .split-word{display:inline-block;white-space:nowrap} .auvart-section .fade-up{ opacity:0;transform:translate3d(0,24px,0); /* ~ was: 42px */ transition:opacity .78s var(--ease-out), transform .78s var(--ease-out); /* ~ was: 1.2s */ will-change:transform, opacity; } .auvart-section .fade-up.in-view, .auvart-section .fade-up.in{opacity:1;transform:none;will-change:auto} .auvart-section .fade-up.d2{transition-delay:.07s} /* ~ was: .12s */ .auvart-section .fade-up.d3{transition-delay:.13s} /* ~ was: .22s */ .auvart-section .fade-up.d4{transition-delay:.19s} /* ~ was: .32s */ .auvart-section .fade-up.d5{transition-delay:.26s} /* ~ was: .44s */ /* + NEW — body copy and cards never blur. Blur on 15px text is unreadable mush for the ~700ms it's on screen, and it costs a full-size filter repaint. */ .auvart-section p.fade-up, .auvart-section .lede.fade-up, .auvart-section .style-card, .auvart-section .pillar, .auvart-section .size-row, .auvart-section .faq-grid details{filter:none !important} /* + NEW — anchor-jump escape hatch: JS adds .auv-instant to a section targeted by #hash so its content is on screen immediately, no reveal wait. */ .auvart-section.auv-instant .fade-up{opacity:1 !important;transform:none !important;transition:none !important} .auvart-section.auv-instant .split-char{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important} @media (prefers-reduced-motion: reduce){ .auvart-section .split-char{transform:none !important;opacity:1 !important;filter:none !important;transition:none !important} .auvart-section .fade-up{opacity:1 !important;transform:none !important;transition:none !important} .auvart-section .hero-video, .auvart-section .hero-poster, .auvart-section .hero-inner{transform:none !important} .auvart-section .hero-scene, .auvart-section .hero-memory{transform:none !important} } /* ========================================================= HERO ========================================================= Rewritten this pass. The brief: keep it FULL-BLEED and cinematic (the split hero was rejected), make scroll actually change the scene, and get the CTA inside the first viewport. How it works: - .auvart-hero-wrapper (Shopify's outer section tag) is given extra height by JS, and .hero sticks to the top inside it. So the hero pins while you scroll ~1.1 extra viewports, and the scene changes during the pin. - JS writes --hero-p (0 → 1) on the section. Everything below reads that. - At p=0 you see the canvas. As p climbs, the hidden photograph inside the canvas becomes legible — the product's own mechanic, used as the opening scene rather than described in a paragraph. - JS adds .hero-pinned only after confirming sticky actually engages, so if any Horizon ancestor clips overflow the hero degrades to a normal 100vh hero with no blank gap. ========================================================= */ /* NOTE: .auvart-hero-wrapper is Shopify's own section tag (schema "class"), which sits OUTSIDE .auvart-section — so these two rules cannot be scoped. The class name is unique to this theme, so there is no collision risk. */ .auvart-hero-wrapper{position:relative} .auvart-hero-wrapper.hero-pinned{height:210vh;height:210svh} .auvart-hero-wrapper.hero-pinned > .auvart-section.hero{position:sticky;top:0} .auvart-section.hero{ --hero-p:0; /* + NEW — scroll progress, written by JS */ min-height:100vh;min-height:100svh;height:100vh;height:100svh; overflow:hidden;display:flex;align-items:flex-end; /* ~ was: align-items:center — content now sits on a baseline, not floating dead-centre */ justify-content:flex-start; /* ~ was: center */ background: radial-gradient(ellipse 70% 50% at 50% 40%, rgba(140,90,60,.12), transparent 60%), radial-gradient(ellipse 50% 60% at 80% 80%, rgba(107,88,118,.1), transparent 60%), var(--ink); } /* + NEW — every moving background layer lives in one wrapper so a single transform drives the whole scene instead of transforming four siblings. */ .auvart-section .hero-scene{ position:absolute;inset:0;z-index:0;overflow:hidden; transform:scale(calc(1 + var(--hero-p) * .07)); transform-origin:52% 46%; will-change:transform; } .auvart-section .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;z-index:0;opacity:1;background:#0a0a14} .auvart-section .hero-poster{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center center;background-color:#0a0a14} .auvart-section.hero-has-video .hero-video{display:block} .auvart-section.hero-has-video .hero-poster{display:none} .auvart-section.hero-has-video.no-video .hero-video{display:none} .auvart-section.hero-has-video.no-video .hero-poster{display:block} @media (max-width:760px){ .auvart-section.hero-has-video .hero-video{display:none} .auvart-section.hero-has-video .hero-poster{display:block} } @media (prefers-reduced-motion: reduce){ .auvart-section.hero-has-video .hero-video{display:none} .auvart-section.hero-has-video .hero-poster{display:block} } /* + NEW — THE REVEAL. The hidden photograph surfacing out of the canvas. A radial mask whose radius is driven by scroll progress: at p=0 nothing, at p=1 the memory is legible across the centre of the frame. */ .auvart-section .hero-memory{ position:absolute;inset:0;z-index:1; background-size:cover;background-position:center 42%; opacity:calc(var(--hero-p) * .92); -webkit-mask-image:radial-gradient(ellipse 60% 55% at 52% 46%, #000 calc(var(--hero-p) * 62%), rgba(0,0,0,.35) calc(var(--hero-p) * 62% + 14%), transparent calc(var(--hero-p) * 62% + 34%)); mask-image:radial-gradient(ellipse 60% 55% at 52% 46%, #000 calc(var(--hero-p) * 62%), rgba(0,0,0,.35) calc(var(--hero-p) * 62% + 14%), transparent calc(var(--hero-p) * 62% + 34%)); filter:saturate(.86) contrast(1.04); will-change:opacity; } .auvart-section .hero-overlay{ position:absolute;inset:0;z-index:2;pointer-events:none; background: radial-gradient(ellipse 55% 45% at 50% 55%, rgba(10,10,20,.45), transparent 70%), radial-gradient(ellipse 80% 60% at 50% 50%, rgba(184,122,82,.08), transparent 65%), linear-gradient(90deg, rgba(10,10,20,.78) 0%, rgba(10,10,20,.28) 34%, rgba(10,10,20,0) 62%, rgba(10,10,20,.45) 100%), /* ~ was: symmetric — now weighted left so the left-anchored type always has contrast */ linear-gradient(180deg, rgba(10,10,20,.62) 0%, rgba(10,10,20,0) 26%, rgba(10,10,20,.18) 52%, rgba(10,10,20,.92) 100%); } /* + NEW — animated starfield, hero only (background-image starfield elsewhere) */ .auvart-section .starfield{ position:absolute;inset:-10%;z-index:2;pointer-events:none; background-image:var(--stars); background-size:var(--stars-size); opacity:calc(.34 + var(--hero-p) * .3); animation:auv-drift 90s linear infinite; will-change:transform; } @keyframes auv-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-2.4%,1.6%,0)}} @media (prefers-reduced-motion: reduce){.auvart-section .starfield{animation:none}} /* mist: no filter blur (an 80px blur on a full-viewport animated layer is a big GPU cost); the soft look comes from a wider gradient falloff instead */ .auvart-section .mist{position:absolute;inset:0;background:radial-gradient(circle at 70% 35%, rgba(184,122,82,.09) 0%, rgba(184,122,82,.035) 35%, transparent 70%);pointer-events:none;z-index:2;animation:auv-mist-float 15s ease-in-out infinite alternate;will-change:transform,opacity} @keyframes auv-mist-float{from{transform:scale(1) translate(0,0);opacity:.4}to{transform:scale(1.1) translate(2%,1%);opacity:.8}} .auvart-section .grain{position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");opacity:.07;pointer-events:none;z-index:2} /* ~ was: .045 — Sefa's note that the background reads flat */ .auvart-section .vignette{position:absolute;inset:0;background:radial-gradient(ellipse 100% 70% at 50% 60%, transparent 38%, rgba(15,15,30,.78) 92%);z-index:2;pointer-events:none} /* HERO CONTENT — asymmetric, baseline-anchored, left rail. This is the "asymmetry where it earns its keep" answer: the scene still owns the full viewport (no split, no card), but the type is set on a left column like a gallery wall label rather than centred like a landing page. */ .auvart-section .hero-inner{ position:relative;z-index:3; text-align:left; /* ~ was: center */ padding:0 var(--gutter) clamp(56px,8vh,104px); /* ~ was: 120px var(--gutter) 80px */ max-width:min(58ch, 62vw); /* ~ was: 1100px centred */ margin:0; /* ~ was: 0 auto */ width:100%; transform:translate3d(0, calc(var(--hero-p) * -6vh), 0); opacity:calc(1 - var(--hero-p) * .55); will-change:transform,opacity; } @media (max-width:900px){ .auvart-section .hero-inner{max-width:none;padding-bottom:clamp(88px,14vh,132px)} } /* the second logo mark inside the hero is off by default now (audit item 9: ornaments repeat too much). Setting exists, renders only if switched on. */ .auvart-section .hero-logo{margin:0 0 24px;width:84px;height:84px;filter:drop-shadow(0 0 22px rgba(184,122,82,.32));animation:auv-floating 6s ease-in-out infinite;display:flex;align-items:center;justify-content:flex-start} /* ~ was: 160px, centred */ @keyframes auv-floating{0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)}} .auvart-section .hero-logo img{width:84px;height:84px;display:block;object-fit:contain} /* ~ was: 160px */ .auvart-section.hero h1{ font-family:var(--serif); font-weight:500; /* ~ was: 900 */ text-transform:none; /* ~ was: uppercase */ font-size:var(--step-5); /* ~ was: clamp(44px,7.2vw,108px) — oversized, pushed the CTA below the fold */ letter-spacing:var(--track-display); /* ~ was: .08em */ line-height:1.0; color:var(--bone); margin:18px 0 0; /* ~ was: 28px auto 0 */ text-wrap:balance; } .auvart-section.hero h1 .it{font-style:italic;font-weight:400;text-transform:none;letter-spacing:.005em;font-family:var(--editorial);color:var(--copper-bright);font-size:1.08em} /* ~ was: font-weight:700 */ .auvart-section.hero h1 .word{display:inline-block;overflow:hidden;vertical-align:bottom} .auvart-section.hero h1 .word > span{ display:inline-block;transform:translateY(105%); filter:blur(4px); /* ~ was: 12px */ opacity:0; transition:transform .9s var(--ease-out), filter .9s var(--ease-out), opacity .8s var(--ease-out); /* ~ was: 1.4s / 1.6s / 1.4s */ /* THE BUG FIX (audit item 1). Delay used to come from .word:nth-child(N). The markup contains a
, which occupies a child slot — so "secret." (child 7) matched no rule at all and fired at delay 0, appearing BEFORE the words above it. Delay now comes from --word-index, which Liquid stamps on each word. */ transition-delay:calc(.18s + var(--word-index, 0) * .085s); } .auvart-section.hero.loaded h1 .word > span{transform:translateY(0);filter:blur(0);opacity:1} /* nth-child rules deliberately removed — see --word-index above. ~ was: .word:nth-child(1..6) > span { transition-delay: .2s … .95s } */ .auvart-section .hero-sub{margin-top:22px;max-width:52ch;opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease) .72s, transform .8s var(--ease) .72s} /* ~ was: delay 1.2s */ .auvart-section.hero.loaded .hero-sub{opacity:1;transform:none} .auvart-section .hero-sub .divider-copper{margin:0 0 18px} /* + NEW — left-aligned in the new composition */ .auvart-section .hero-sub .lede{font-size:var(--step-1);color:rgba(244,239,230,.8)} .auvart-section .hero-eyebrow{ font-family:var(--sans);text-transform:uppercase; letter-spacing:var(--track-micro);font-size:var(--step--2);font-weight:500; color:var(--copper-bright);opacity:.85; /* ~ was: var(--copper) at .7 */ display:flex;align-items:center; /* + NEW — left rail alignment */ } .auvart-section .hero-eyebrow::before{content:"";width:34px;height:1px;background:var(--copper);margin-right:16px;opacity:.8} /* + NEW — the rule that anchors the block to the left edge */ .auvart-section .hero-eyebrow .dot{display:inline-block;width:3px;height:3px;background:var(--copper);border-radius:50%;margin:0 10px;vertical-align:middle} /* CTA row — now horizontal and inside the first viewport. It used to be flex-direction:column with the five trust pills stacked underneath, which is what pushed the buttons off screen. */ .auvart-section .hero-cta-row{ margin-top:34px; /* ~ was: 48px */ display:flex;flex-direction:row; /* ~ was: column */ align-items:center;justify-content:flex-start; /* ~ was: center */ flex-wrap:wrap;gap:14px 18px; /* ~ was: 24px */ opacity:0;transition:opacity .8s var(--ease) .9s /* ~ was: delay 1.5s */ } .auvart-section.hero.loaded .hero-cta-row{opacity:1} @media (max-width:560px){ .auvart-section .hero-cta-row{gap:12px} .auvart-section .hero-cta-row .btn{flex:1 1 100%;justify-content:center} } /* Trust pills: kept as selectors (schema settings untouched) but restyled from five bordered chips into one quiet micro-line — audit item 9. */ .auvart-section .hero-trust{ width:100%;display:flex;flex-wrap:wrap; justify-content:flex-start; /* ~ was: center */ align-items:center;gap:0;margin-top:16px; /* ~ was: gap:10px, margin-top:6px */ } .auvart-section .trust-pill{ padding:0;border:0;border-radius:0;background:none;backdrop-filter:none; /* ~ was: 9px 14px, 1px border, 999px radius, blur(10px) */ font-family:var(--sans);font-size:var(--step--2); letter-spacing:var(--track-label);text-transform:uppercase; color:rgba(244,239,230,.52); } .auvart-section .trust-pill + .trust-pill::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--copper-bright);margin:0 14px;vertical-align:middle;opacity:.85} .auvart-section .trust-pill-price{color:var(--copper-bright)} .auvart-section .trust-pill-price strong{font-weight:600} /* + NEW — scroll cue, bottom-right. Tells the visitor the scene responds to scroll, and doubles as the progress readout of the pinned reveal. */ .auvart-section .hero-cue{ position:absolute;right:var(--gutter);bottom:clamp(56px,8vh,104px);z-index:3; display:flex;flex-direction:column;align-items:flex-end;gap:12px; opacity:calc((1 - var(--hero-p) * 1.6) * 1); transition:opacity .4s var(--ease); pointer-events:none; } .auvart-section .hero-cue .cue-label{ font-family:var(--sans);font-size:var(--step--2);letter-spacing:var(--track-label); text-transform:uppercase;color:rgba(244,239,230,.45);writing-mode:vertical-rl; } .auvart-section .hero-cue .cue-track{width:1px;height:74px;background:rgba(244,239,230,.16);position:relative;overflow:hidden} .auvart-section .hero-cue .cue-fill{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--copper-bright);transform:scaleY(var(--hero-p));transform-origin:top} .auvart-section .hero-cue .cue-track::after{content:"";position:absolute;left:0;top:0;width:100%;height:26px;background:linear-gradient(180deg,transparent,var(--copper-bright));will-change:transform,opacity;animation:auv-cue 2.4s var(--ease) infinite} @keyframes auv-cue{0%{transform:translateY(-26px);opacity:0}25%{opacity:1}100%{transform:translateY(74px);opacity:0}} @media (max-width:900px){.auvart-section .hero-cue{display:none}} @media (prefers-reduced-motion: reduce){.auvart-section .hero-cue .cue-track::after{animation:none}} /* hero marquee — kept, but it now sits above the fold-out gradient and reads as a gallery caption rail rather than a ticker banner */ .auvart-section .marquee-strip{position:absolute;bottom:0;left:0;right:0;z-index:3;padding:14px 0;border-top:1px solid rgba(140,90,60,.22);overflow:hidden;background:linear-gradient(180deg,transparent,rgba(8,8,15,.72));opacity:calc(1 - var(--hero-p) * .8)} .auvart-section .marquee-track{display:flex;gap:64px;white-space:nowrap;animation:auv-marquee 46s linear infinite} /* ~ was: 38s */ .auvart-section .marquee-item{font-family:var(--editorial);font-style:italic;font-size:var(--step--1);letter-spacing:.06em;color:rgba(244,239,230,.5)} /* ~ was: var(--serif), .2em tracking */ .auvart-section .marquee-item .sep{display:inline-block;width:4px;height:4px;background:var(--copper);border-radius:50%;margin:0 28px;vertical-align:middle;transform:rotate(45deg)} @keyframes auv-marquee{to{transform:translateX(-50%)}} @media (prefers-reduced-motion: reduce){.auvart-section .marquee-track{animation:none}} /* ========================================================= REVEAL SLIDER ========================================================= */ .auvart-section.reveal-section{ padding:var(--pad-base) 0; /* ~ was: 140px 0 160px */ background-color:var(--ink-0); background-image:var(--stars), var(--horizon), linear-gradient(180deg, var(--ink-void) 0%, var(--ink-0) 22%, var(--ink-1) 100%); /* + NEW starfield + continuous tonal descent */ background-size:var(--stars-size), 100% 100%, 100% 100%; background-repeat:repeat,no-repeat,no-repeat; } .auvart-section.reveal-section::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 50% at 50% 50%, rgba(140,90,60,.07), transparent 70%)} .auvart-section .reveal-head{text-align:center;margin-bottom:52px;position:relative;z-index:2} .auvart-section .reveal-head h2{font-size:var(--step-4);color:var(--bone)} /* ~ was: clamp(40px,6vw,80px) */ .auvart-section .reveal-head .lede{max-width:52ch;margin:20px auto 0} .auvart-section .reveal-actions{display:flex;justify-content:space-between;align-items:center;gap:20px;max-width:1280px;margin:0 auto 16px;color:rgba(244,239,230,.72);padding:0 20px;position:relative;z-index:2} @media (max-width:900px){.auvart-section .reveal-actions{flex-direction:column;align-items:flex-start}} .auvart-section .reveal-helper{display:inline-flex;align-items:center;gap:12px;font-size:var(--step--2);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--copper-bright)} .auvart-section .reveal-helper::before{content:"";width:36px;height:1px;background:var(--copper)} .auvart-section .reveal-reset{background:transparent;border:1px solid rgba(184,122,82,.4);color:var(--bone);padding:10px 16px;text-transform:uppercase;letter-spacing:var(--track-label);font-size:var(--step--2);cursor:pointer;transition:all .3s var(--ease)} .auvart-section .reveal-reset:hover{background:rgba(184,122,82,.12);border-color:var(--copper-bright)} .auvart-section .reveal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1400px;margin:0 auto;padding:0 20px;position:relative;z-index:2} @media (max-width:1100px){.auvart-section .reveal-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:600px){.auvart-section .reveal-grid{grid-template-columns:1fr}} .auvart-section .reveal-stage{position:relative;width:100%;margin:0 auto;aspect-ratio:1/1;overflow:hidden;background:#111;box-shadow:0 15px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(140,90,60,.15);--peel:50%;user-select:none;cursor:ew-resize} .auvart-section .reveal-stage:focus-within{box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(140,90,60,.18), 0 0 0 3px rgba(184,122,82,.22)} .auvart-section .reveal-base{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;pointer-events:none} .auvart-section .reveal-top-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:2;pointer-events:none;clip-path:inset(0 calc(100% - var(--peel,50%)) 0 0);-webkit-clip-path:inset(0 calc(100% - var(--peel,50%)) 0 0);will-change:clip-path} .auvart-section .reveal-divider{position:absolute;top:0;bottom:0;left:var(--peel);width:2px;transform:translateX(-50%);background:linear-gradient(180deg, rgba(184,122,82,0), rgba(184,122,82,.9) 18%, rgba(184,122,82,.9) 82%, rgba(184,122,82,0));box-shadow:0 0 30px rgba(184,122,82,.55);z-index:5;pointer-events:none} .auvart-section .reveal-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;background:var(--copper-bright);box-shadow:0 0 15px rgba(184,122,82,.8), 0 0 0 6px rgba(184,122,82,.15);pointer-events:none} .auvart-section .reveal-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:6;margin:0;padding:0;-webkit-appearance:none;appearance:none;background:transparent;display:block} .auvart-section .reveal-range::-webkit-slider-thumb{-webkit-appearance:none;width:100%;height:100%;cursor:ew-resize;opacity:0} .auvart-section .reveal-range::-moz-range-thumb{width:100%;height:100%;cursor:ew-resize;opacity:0;border:none;background:transparent} .auvart-section .reveal-range:focus-visible{outline:none} .auvart-section .frame-corner{position:absolute;width:22px;height:22px;border:1px solid rgba(244,239,230,.45);z-index:7} .auvart-section .frame-corner.tl{top:14px;left:14px;border-right:none;border-bottom:none} .auvart-section .frame-corner.tr{top:14px;right:14px;border-left:none;border-bottom:none} .auvart-section .frame-corner.bl{bottom:14px;left:14px;border-right:none;border-top:none} .auvart-section .frame-corner.br{bottom:14px;right:14px;border-left:none;border-top:none} .auvart-section .reveal-side{position:absolute;top:12px;z-index:7;font-family:var(--sans);font-size:8px;letter-spacing:.35em;text-transform:uppercase;color:rgba(244,239,230,.85);padding:4px 8px;border:1px solid rgba(244,239,230,.18);backdrop-filter:blur(8px);background:rgba(15,15,30,.35);pointer-events:none} .auvart-section .reveal-side.left{left:12px} .auvart-section .reveal-side.right{right:12px;color:var(--copper-bright);border-color:rgba(184,122,82,.4)} /* ========================================================= PROCESS (how) ========================================================= */ .auvart-section.how{ padding:var(--pad-base) 0; /* ~ was: 180px 0 — audit item 3: the section ate too much height */ background-color:var(--ink-1); background-image:var(--stars), var(--horizon), linear-gradient(180deg, var(--ink-1) 0%, var(--ink-2) 100%); background-size:var(--stars-size), 100% 100%, 100% 100%; background-repeat:repeat,no-repeat,no-repeat; } .auvart-section .how .container, .auvart-section.how .container{position:relative;z-index:2} .auvart-section .how-head{text-align:center;margin-bottom:64px} /* ~ was: 100px */ .auvart-section .how-head h2{margin:0 auto;font-size:var(--step-4);max-width:16ch} /* ~ was: clamp(40px,5.5vw,72px), 720px */ .auvart-section .how-head .lede{margin:20px auto 0;max-width:46ch} /* ~ was: 28px auto 0, 480px */ .auvart-section .how-track{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:40px} .auvart-section .how-track::before{content:"";position:absolute;top:46px;left:6%;right:6%;height:1px;background:linear-gradient(90deg,transparent,rgba(140,90,60,.4),rgba(140,90,60,.4),transparent)} .auvart-section .how-step{position:relative;padding-top:100px} .auvart-section .how-step .num{position:absolute;top:0;left:0;width:92px;height:92px;border:1px solid var(--copper);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:26px;color:var(--copper-bright);font-weight:400;font-style:italic;background:var(--ink-1)} /* ~ was: font-weight:700, background:var(--ink) */ .auvart-section .how-step .num::after{content:"";position:absolute;inset:-6px;border:1px dashed rgba(140,90,60,.25);border-radius:50%;animation:auv-spin 40s linear infinite} @keyframes auv-spin{to{transform:rotate(360deg)}} .auvart-section .how-step .icon{margin:0 0 24px;color:var(--copper-bright);width:68px;height:68px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(184,122,82,.14),rgba(184,122,82,.04));border:1px solid rgba(184,122,82,.35);position:relative;display:flex;align-items:center;justify-content:center} .auvart-section .how-step .icon::before,.auvart-section .how-step .icon::after{display:none} .auvart-section .how-step .icon svg{width:30px;height:30px;opacity:.9} .auvart-section .how-step h3{font-family:var(--serif);font-weight:500;font-size:var(--step-2);text-transform:none;letter-spacing:var(--track-display);margin-bottom:12px;line-height:1.18} /* ~ was: 700 / 26px / uppercase / .12em */ .auvart-section .how-step p{color:rgba(244,239,230,.7);font-size:var(--step-0);max-width:34ch} @media (max-width:900px){ .auvart-section .how-track{display:flex;flex-direction:column;gap:40px;align-items:stretch} .auvart-section .how-track::before{display:none} .auvart-section .how-step{padding-top:0;text-align:center;max-width:340px;margin:0 auto} .auvart-section .how-step .num{position:static;display:block;margin:0 auto 16px} .auvart-section .how-step h3{font-size:20px;letter-spacing:0;margin-bottom:10px;text-align:center;white-space:normal;overflow:visible;text-overflow:clip} .auvart-section .how-step p{font-size:14px;line-height:1.5;text-align:center;margin:0 auto;max-width:300px} .auvart-section .how-step .icon{margin:0 auto 20px;width:64px;height:64px} } /* ========================================================= STYLE FAMILIES (scroller with repeatable cards) ========================================================= */ .auvart-section.styles-section{ padding:var(--pad-base) 0; /* ~ was: 160px 0 180px */ overflow:hidden; background-color:var(--ink-deep); background-image:var(--stars), var(--horizon), linear-gradient(180deg, var(--ink-2) 0%, var(--ink-deep) 55%, var(--ink-0) 100%); background-size:var(--stars-size), 100% 100%, 100% 100%; background-repeat:repeat,no-repeat,no-repeat; } .auvart-section .styles-head{text-align:center;padding:0 var(--gutter);margin-bottom:52px;max-width:var(--container);margin-left:auto;margin-right:auto;position:relative;z-index:2} .auvart-section .styles-head h2{font-size:var(--step-4)} .auvart-section .styles-meta{margin-top:18px;font-size:var(--step--2);text-transform:uppercase;letter-spacing:var(--track-label);color:rgba(244,239,230,.5)} .auvart-section .styles-meta span{color:var(--copper-bright)} .auvart-section .styles-scroller{display:flex;gap:20px;padding:36px var(--gutter) 56px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;position:relative;z-index:2} .auvart-section .styles-scroller::-webkit-scrollbar{display:none} .auvart-section .styles-scroller.dragging{cursor:grabbing} .auvart-section .styles-scroller .style-card-link{display:block;flex:0 0 clamp(280px,30vw,440px);scroll-snap-align:center} .auvart-section .styles-scroller .style-card-link .style-card{flex:none;width:100%} .auvart-section .style-card{ flex:0 0 clamp(280px,30vw,440px);aspect-ratio:3/4;position:relative;scroll-snap-align:center; background:var(--ink);border:1px solid rgba(140,90,60,.25);overflow:hidden; transition:transform .6s var(--ease-out), box-shadow .6s var(--ease-out), border-color .6s var(--ease-out); } .auvart-section .style-card:hover{transform:translateY(-10px);box-shadow:0 30px 80px rgba(0,0,0,.5), 0 0 60px rgba(184,122,82,.15);border-color:rgba(184,122,82,.6)} .auvart-section .style-card .cover{position:absolute;inset:0} .auvart-section .style-card .style-image{position:absolute;inset:0;z-index:1;background-size:cover;background-position:center;filter:saturate(.95) brightness(.9);transform:scale(1);transition:transform 1.1s var(--ease-out), filter .6s var(--ease)} .auvart-section .style-card:hover .style-image{filter:saturate(1) brightness(1)} .auvart-section .style-card .tex{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg, transparent 38%, rgba(8,8,15,.88) 100%)} .auvart-section .style-card .meta{position:absolute;left:22px;right:22px;bottom:22px;display:flex;justify-content:space-between;align-items:flex-end;color:var(--cream);z-index:3} .auvart-section .style-meta-block{align-items:flex-end} .auvart-section .style-card .name{font-family:var(--serif);font-weight:500;text-transform:none;letter-spacing:var(--track-display);font-size:var(--step-2)} /* ~ was: 900 / uppercase / .22em / 22px */ .auvart-section .style-card .sub{font-family:var(--editorial);font-style:italic;color:rgba(232,223,201,.72);font-size:var(--step--1);margin-top:4px;max-width:32ch;line-height:1.45} .auvart-section .style-card .sub em{font-style:italic} .auvart-section .style-card .roman{font-family:var(--serif);font-weight:400;font-style:italic;font-size:var(--step--1);letter-spacing:.12em;color:var(--copper-bright);opacity:.85} .auvart-section .style-card .corner-star{position:absolute;top:18px;left:18px;color:var(--copper-bright);opacity:.35;z-index:3;transition:opacity .5s var(--ease)} /* ~ was: .8 — audit item 9, ornament thinning */ .auvart-section .style-card:hover .corner-star{opacity:.9} .auvart-section .style-kicker{font-size:var(--step--2);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--copper-bright);margin-bottom:10px;font-family:var(--sans);font-style:normal;opacity:.9} .auvart-section .style-best{margin-top:12px;color:rgba(244,239,230,.6);font-size:var(--step--1);letter-spacing:.02em;max-width:34ch;line-height:1.5;font-family:var(--sans)} .auvart-section .style-card .cover::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,");mix-blend-mode:overlay;opacity:.7} @media (max-width:700px){.auvart-section .style-best{max-width:none}} /* ========================================================= SIZES (static pricing display) ========================================================= */ .auvart-section.sizes{padding:var(--pad-tight) 0;background:var(--cream);color:var(--ink)} /* ~ was: 110px 0 */ .auvart-section.sizes::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml;utf8,");mix-blend-mode:multiply;opacity:.55} .auvart-section.sizes .container{position:relative;z-index:2} .auvart-section .sizes-head{text-align:center;margin-bottom:44px} .auvart-section .sizes-head h2{color:var(--ink);font-size:var(--step-4)} .auvart-section .sizes-head h2 .display.italic{color:var(--copper)} /* + NEW — copper-bright is too light on cream */ .auvart-section .sizes-head .lede{color:rgba(26,26,46,.72);max-width:48ch;margin:18px auto 0} .auvart-section .sizes-head .eyebrow{color:var(--copper);opacity:.9} .auvart-section .size-studio{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:start} @media (max-width:900px){.auvart-section .size-studio{grid-template-columns:1fr;gap:40px}} .auvart-section .size-wall{position:relative;aspect-ratio:4/3;overflow:hidden} .auvart-section .size-wall img{width:100%;height:100%;object-fit:cover;display:block} .auvart-section .size-pricing-head{display:flex;flex-direction:column;gap:6px;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid rgba(26,26,46,.12)} .auvart-section .size-pricing-eyebrow{font-family:var(--sans);font-size:var(--step--2);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--copper);font-weight:500} .auvart-section .size-pricing-badge{display:inline-flex;align-self:flex-start;padding:6px 12px;background:rgba(140,90,60,.12);border:1px solid rgba(140,90,60,.4);color:var(--copper);font-family:var(--sans);font-size:var(--step--2);letter-spacing:var(--track-label);text-transform:uppercase;font-weight:500;margin-bottom:4px} .auvart-section .size-pricing-from{font-family:var(--serif);font-size:var(--step-0);letter-spacing:.02em;color:var(--ink)} .auvart-section .size-pricing-from strong{font-weight:500;color:var(--copper);font-size:var(--step-2);font-style:italic;margin-left:6px} .auvart-section .size-pricing-note{font-family:var(--editorial);font-style:italic;color:rgba(26,26,46,.7);font-size:var(--step-0);line-height:1.55} .auvart-section .size-format-legend{display:flex;gap:18px;margin-bottom:14px;font-family:var(--sans);font-size:var(--step--2);letter-spacing:var(--track-label);text-transform:uppercase;color:rgba(26,26,46,.7)} .auvart-section .size-format-legend span{display:inline-flex;align-items:center;gap:7px} .auvart-section .size-format-legend .swatch{width:10px;height:10px;border:1px solid var(--copper)} .auvart-section .size-format-legend .swatch.print{background:var(--copper)} .auvart-section .size-list{display:flex;flex-direction:column;gap:8px} .auvart-section .size-row{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px 16px;border:1px solid rgba(26,26,46,.15);background:rgba(255,255,255,.3);transition:all .35s var(--ease)} .auvart-section .size-row:hover{background:rgba(255,255,255,.55);border-color:rgba(140,90,60,.4)} .auvart-section .size-row .tag{font-family:var(--serif);font-weight:500;font-style:italic;font-size:var(--step--1);color:var(--copper);letter-spacing:.08em;padding:3px 9px;border:1px solid rgba(184,122,82,.4)} .auvart-section .size-row .label{font-family:var(--serif);font-weight:500;text-transform:none;letter-spacing:var(--track-display);font-size:var(--step-0)} /* ~ was: 700 / uppercase / .16em */ .auvart-section .size-row .space{display:block;font-family:var(--editorial);font-style:italic;font-size:var(--step--1);margin-top:2px;opacity:.72;letter-spacing:.02em} .auvart-section .size-row .prices{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right} .auvart-section .size-row .price-canvas{font-family:var(--serif);font-weight:500;font-size:var(--step-0);color:var(--copper)} .auvart-section .size-row .price-print{font-family:var(--sans);font-size:var(--step--1);letter-spacing:.04em;color:rgba(26,26,46,.65)} .auvart-section .size-note{margin-top:28px;font-family:var(--editorial);font-style:italic;color:rgba(26,26,46,.72);font-size:var(--step-0);display:flex;align-items:center;gap:12px;line-height:1.55} .auvart-section .size-note::before{content:"";width:24px;height:1px;background:var(--copper);flex:none} .auvart-section .size-help-card{margin-top:18px;background:rgba(255,255,255,.52);border:1px solid rgba(26,26,46,.08);padding:18px 20px;display:flex;flex-direction:column;gap:8px;color:rgba(26,26,46,.78);font-size:var(--step--1);line-height:1.55} .auvart-section .size-help-card strong{font-family:var(--serif);font-weight:500;text-transform:none;letter-spacing:var(--track-display);font-size:var(--step-0);color:var(--ink)} /* ========================================================= STORY ========================================================= */ .auvart-section.story{padding:0;background:var(--ink);overflow:hidden} .auvart-section .story-grid{display:grid;grid-template-columns:1fr 1fr;min-height:46vh} @media (max-width:900px){.auvart-section .story-grid{grid-template-columns:1fr}} .auvart-section .story-left{background:var(--cream);color:var(--ink);padding:clamp(36px,5vw,64px) clamp(28px,4vw,72px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;position:relative} /* ~ was: centred — the origin story is body copy, it reads better ranged left */ .auvart-section .story-left::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,");mix-blend-mode:multiply;opacity:.55;pointer-events:none} .auvart-section .story-left > *{position:relative;z-index:2} .auvart-section .story-left .eyebrow{text-align:left;color:var(--copper)} /* + NEW */ .auvart-section .story-left h2{font-size:var(--step-3);color:var(--ink);margin-bottom:22px} .auvart-section .story-left h2 .display.italic{color:var(--copper)} .auvart-section .story-left p{font-family:var(--editorial);font-style:italic;font-size:var(--step-1);line-height:1.6;color:rgba(26,26,46,.84);max-width:46ch} .auvart-section .story-left p em{font-style:italic} .auvart-section .story-left .sig{margin-top:36px;display:flex;align-items:center;gap:16px} .auvart-section .story-left .sig-line{width:40px;height:1px;background:var(--copper)} .auvart-section .story-left .sig-text{font-family:var(--serif);font-weight:400;font-style:italic;color:var(--copper);font-size:var(--step-0)} .auvart-section .story-right{position:relative;overflow:hidden;min-height:46vh; background-color:var(--ink-deep); background-image:var(--stars), radial-gradient(ellipse 70% 70% at 50% 50%, rgba(184,122,82,.14), transparent 70%), linear-gradient(180deg, var(--ink-0), var(--ink-deep)); background-size:var(--stars-size), 100% 100%, 100% 100%; background-repeat:repeat,no-repeat,no-repeat; } .auvart-section .story-right canvas{position:absolute;inset:0;width:100%;height:100%} .auvart-section .story-right .glyph{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:var(--bone);z-index:2} .auvart-section .story-right .glyph .big-star{display:inline-block;width:56px;height:56px;margin-bottom:14px;filter:drop-shadow(0 0 18px rgba(184,122,82,.5))} .auvart-section .story-right .glyph .big-star img{width:100%;height:100%;object-fit:contain;display:block} .auvart-section .story-right .glyph .latin{font-family:var(--editorial);font-style:italic;letter-spacing:.2em;color:rgba(244,239,230,.62);font-size:var(--step--1);text-transform:uppercase} .auvart-section .story-right .glyph .name{font-family:var(--serif);font-weight:500;text-transform:none;letter-spacing:var(--track-display);font-size:var(--step-2);margin-top:6px} /* ~ was: 900 / uppercase / .26em */ .auvart-section .story-right .glyph .coords{margin-top:10px;font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:rgba(154,168,150,.6);line-height:1.8} /* ========================================================= GUARANTEE ========================================================= */ .auvart-section.guarantee{ padding:var(--pad-tight) 0;text-align:center; /* ~ was: 52px 0 60px */ background-color:var(--ink); background-image:var(--stars), var(--horizon), linear-gradient(180deg, var(--ink-deep) 0%, var(--ink-3) 100%); background-size:var(--stars-size), 100% 100%, 100% 100%; background-repeat:repeat,no-repeat,no-repeat; } .auvart-section.guarantee::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 50% 60% at 50% 50%, rgba(140,90,60,.08), transparent 70%)} .auvart-section.guarantee .container{position:relative;z-index:2;max-width:1000px} .auvart-section .wax-seal{width:72px;height:72px;margin:0 auto 20px;perspective:800px;animation:auv-float 6s ease-in-out infinite} /* ~ was: 92px — the seal is one of four repeating ornaments; shrunk, not deleted */ @keyframes auv-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} .auvart-section .seal-disc{position:relative;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 40% 35%, #B87A52 0%, #8C5A3C 60%, #5a3a26 100%);box-shadow:0 18px 40px rgba(0,0,0,.5), inset 0 -6px 18px rgba(0,0,0,.4), inset 0 6px 12px rgba(255,220,180,.2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px} .auvart-section .seal-disc::before{content:"";position:absolute;inset:5px;border-radius:50%;border:1px dashed rgba(244,239,230,.25)} .auvart-section .seal-mark{width:42%;height:42%;object-fit:contain;filter:brightness(0) invert(1) opacity(.9);margin-top:3px} .auvart-section .seal-caption{font-family:var(--sans);font-weight:500;letter-spacing:.28em;font-size:6px;color:var(--bone);opacity:.85} .auvart-section.guarantee h2{font-size:var(--step-3);line-height:1.14;max-width:20ch;margin:0 auto} /* ~ was: clamp(24px,2.8vw,36px) / 680px */ .auvart-section.guarantee .lede{max-width:48ch;margin:14px auto 0;font-size:var(--step-0)} .auvart-section .pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:32px;max-width:1100px;margin-left:auto;margin-right:auto} .auvart-section .pillar{padding:20px 14px;border:1px solid rgba(140,90,60,.18);text-align:center;transition:all .4s var(--ease);display:flex;flex-direction:column;align-items:center} .auvart-section .pillar:hover{border-color:rgba(184,122,82,.5);background:rgba(140,90,60,.05)} .auvart-section .pillar .icon{width:40px;height:40px;margin-bottom:12px;color:var(--copper-bright);display:flex;align-items:center;justify-content:center;background:rgba(184,122,82,.05);border:1px solid rgba(184,122,82,.2);border-radius:50%} .auvart-section .pillar .icon svg{width:24px;height:24px} .auvart-section .pillar h4{font-family:var(--serif);font-weight:500;text-transform:none;letter-spacing:var(--track-display);font-size:var(--step-0);margin-bottom:6px;color:var(--bone)} /* ~ was: 700 / uppercase / .18em / 12.5px */ .auvart-section .pillar p{color:rgba(244,239,230,.62);font-size:var(--step--1);max-width:24ch;margin:0 auto;line-height:1.5} @media (max-width:950px){.auvart-section .pillars{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){ .auvart-section .pillars{grid-template-columns:repeat(2,1fr);gap:8px} .auvart-section .pillar{padding:14px 8px} .auvart-section .pillar h4{font-size:13px;letter-spacing:0;margin-bottom:4px} .auvart-section .pillar p{font-size:11px;line-height:1.35} } /* ========================================================= TESTIMONY (empty shell, marquee track) ========================================================= */ .auvart-section.testimony{ padding:var(--pad-base) 0;overflow:hidden; /* ~ was: 140px 0 120px */ background-color:var(--ink-deep); background-image:var(--stars), var(--horizon), linear-gradient(180deg, var(--ink-3) 0%, var(--ink-4) 100%); background-size:var(--stars-size), 100% 100%, 100% 100%; background-repeat:repeat,no-repeat,no-repeat; } .auvart-section.testimony .container{position:relative;z-index:2} .auvart-section .testimony-head{text-align:center;margin-bottom:56px} .auvart-section .testimony-head h2{font-size:var(--step-3)} .auvart-section .testimony-head .lede{max-width:48ch;margin:18px auto 0} .auvart-section .testimony-track{display:flex;gap:22px;padding:0 var(--gutter);overflow:hidden;position:relative;margin-top:22px} .auvart-section .testimony-track::before,.auvart-section .testimony-track::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:3;pointer-events:none} .auvart-section .testimony-track::before{left:0;background:linear-gradient(90deg,var(--ink-3),transparent)} .auvart-section .testimony-track::after{right:0;background:linear-gradient(270deg,var(--ink-3),transparent)} .auvart-section .testimony-row{display:flex;gap:22px;flex-shrink:0;animation:auv-scrollX 80s linear infinite} .auvart-section .testimony-row.reverse{animation-direction:reverse} @keyframes auv-scrollX{to{transform:translateX(-50%)}} .auvart-section .bubble{flex:0 0 clamp(300px,28vw,390px);min-height:168px;padding:26px 26px 24px;background:rgba(244,239,230,.045);border:1px solid rgba(244,239,230,.09);border-radius:2px;font-family:var(--editorial);font-style:italic;color:rgba(244,239,230,.82);font-size:var(--step-1);line-height:1.55;position:relative} /* ~ was: border-radius:8px — rounded bubbles were the one un-gallery shape on the page */ .auvart-section .bubble p{max-width:36ch} .auvart-section .bubble.gold{background:rgba(184,122,82,.1);border-color:rgba(184,122,82,.25);color:var(--bone)} .auvart-section .bubble .author{display:block;margin-top:18px;font-family:var(--sans);font-style:normal;font-size:var(--step--2);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--copper-bright)} .auvart-section .testimony-empty{text-align:center;font-family:var(--editorial);font-style:italic;color:rgba(244,239,230,.5);font-size:var(--step-1);max-width:48ch;margin:0 auto;padding:40px 0} @media (prefers-reduced-motion: reduce){.auvart-section .testimony-row,.auvart-section .testimony-row.reverse{animation:none}} /* ========================================================= FAQ ========================================================= */ .auvart-section.faq{background:var(--cream);color:var(--ink);padding:var(--pad-base) 0} /* ~ was: 150px 0 */ .auvart-section.faq::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml;utf8,");mix-blend-mode:multiply;opacity:.45} .auvart-section.faq .container{position:relative;z-index:2} .auvart-section .faq-head{text-align:center;margin-bottom:48px} .auvart-section .faq-head h2{font-size:var(--step-4);color:var(--ink)} .auvart-section .faq-head h2 .display.italic{color:var(--copper)} .auvart-section .faq-head .lede{color:rgba(26,26,46,.72);max-width:56ch;margin:18px auto 0} .auvart-section .faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;align-items:start} @media (max-width:900px){.auvart-section .faq-grid{grid-template-columns:1fr}} .auvart-section .faq-col{display:flex;flex-direction:column;gap:12px} .auvart-section .faq-grid details{background:rgba(255,255,255,.48);border:1px solid rgba(26,26,46,.08);border-left:1px solid rgba(26,26,46,.08);padding:18px 20px;width:100%;transition:border-color .35s var(--ease), background .35s var(--ease)} .auvart-section .faq-grid details:hover{background:rgba(255,255,255,.66)} .auvart-section .faq-grid details[open]{border-left:1px solid var(--copper);background:rgba(255,255,255,.7)} /* + NEW — open state reads as a marked entry, not just a taller box */ .auvart-section .faq-grid summary{list-style:none;cursor:pointer;font-family:var(--serif);font-weight:500;font-size:var(--step-0);letter-spacing:.005em;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:20px} .auvart-section .faq-grid summary::-webkit-details-marker{display:none} .auvart-section .faq-grid summary::after{content:'+';font-family:var(--sans);font-size:18px;font-weight:300;color:var(--copper);flex:none;transition:transform .3s var(--ease)} .auvart-section .faq-grid details[open] summary::after{content:'\2212'} .auvart-section .faq-grid details p{margin-top:12px;color:rgba(26,26,46,.74);font-size:var(--step--1);line-height:1.65;max-width:52ch} /* ========================================================= CTA (Begin yours) ========================================================= */ .auvart-section.cta, .auvart-section.commission{ padding:var(--pad-loose) 0;text-align:center;overflow:hidden; /* ~ was: 200px 0 220px */ background-color:var(--ink-void); background-image:var(--stars), radial-gradient(ellipse 70% 60% at 50% 42%, rgba(184,122,82,.14), transparent 68%), linear-gradient(180deg, var(--ink-4) 0%, var(--ink-void) 100%); background-size:var(--stars-size), 100% 100%, 100% 100%; background-repeat:repeat,no-repeat,no-repeat; } .auvart-section.cta::before, .auvart-section.commission::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 50% 50%, rgba(140,90,60,.08), transparent 70%)} .auvart-section.cta .container, .auvart-section.commission .container{position:relative;z-index:2} .auvart-section.cta h2, .auvart-section.commission h2{font-size:var(--step-5);line-height:1.0} /* ~ was: clamp(56px,9vw,140px) — 140px with slow blur-in was the weak close the audit flagged */ .auvart-section.cta h2 .it, .auvart-section.commission h2 .it{font-family:var(--editorial);font-style:italic;font-weight:400;text-transform:none;letter-spacing:.005em;color:var(--copper-bright);font-size:1.08em} .auvart-section.cta .lede, .auvart-section.commission .lede{margin:26px auto 0;max-width:46ch} .auvart-section .cta-row{margin-top:40px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap} .auvart-section .cta-row .btn.filled{padding:21px 44px;font-size:var(--step--1)} /* + NEW — the button was small next to a 140px headline */ .auvart-section .cta-note, .auvart-section.commission .note{margin-top:38px;font-family:var(--editorial);font-style:italic;color:rgba(244,239,230,.62);font-size:var(--step-0);display:flex;align-items:center;justify-content:center;gap:14px} .auvart-section .cta-note::before,.auvart-section .cta-note::after, .auvart-section.commission .note::before,.auvart-section.commission .note::after{content:"";width:32px;height:1px;background:var(--copper)} @media (max-width:700px){ .auvart-section.cta, .auvart-section.commission{padding:var(--pad-base) 0} .auvart-section.cta h2, .auvart-section.commission h2{font-size:clamp(44px,15vw,84px)} } /* small-screen parity with source site */ @media (max-width:700px){ .auvart-section .hero-trust{gap:0;margin-top:14px} .auvart-section .trust-pill{width:auto;text-align:left} /* ~ was: width:100% — full-width stacked chips ate the viewport */ .auvart-section .trust-pill + .trust-pill::before{margin:0 10px} .auvart-section .bubble{flex-basis:82vw;min-height:190px} .auvart-section .size-studio{grid-template-columns:1fr;gap:24px} .auvart-section .size-wall{aspect-ratio:1/1} } /* pause looping animations while offscreen (toggled by IntersectionObserver in auvart-theme.js) */ .auvart-section .auv-anim-paused, .auvart-section .auv-anim-paused *{animation-play-state:paused !important} /* focus hygiene */ .auvart-section a:focus-visible, .auvart-section button:focus-visible, .auvart-section summary:focus-visible{outline:2px solid rgba(184,122,82,.6);outline-offset:3px} /* ========================================================= STYLE PICKER (dedicated page, grid variant of style cards) ========================================================= */ .auvart-section .style-picker-section{padding:var(--pad-base) 0} .auvart-section .style-picker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:20px var(--gutter) 0;max-width:var(--container);margin:0 auto;position:relative;z-index:2} .auvart-section .style-picker-grid .style-card{width:100%;flex:none} .auvart-section .style-card-link{display:block;text-decoration:none;color:inherit} .auvart-section .style-card--nolink{opacity:.5;cursor:default} .auvart-section .style-picker-cta{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:var(--step--2);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--copper-bright);margin-top:6px;opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease)} .auvart-section .style-picker-cta .arrow{display:inline-block;width:14px;height:1px;background:currentColor;position:relative} .auvart-section .style-picker-cta .arrow::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-right:1px solid currentColor;border-top:1px solid currentColor;transform:rotate(45deg)} .auvart-section .style-card-link:hover .style-picker-cta{opacity:1;transform:none} .auvart-section .style-card-link:hover .style-card{transform:translateY(-10px);box-shadow:0 30px 80px rgba(0,0,0,.5), 0 0 60px rgba(184,122,82,.15);border-color:rgba(184,122,82,.6)} @media (max-width:1000px){.auvart-section .style-picker-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.auvart-section .style-picker-grid{grid-template-columns:1fr;gap:20px}.auvart-section .style-picker-section{padding:var(--pad-tight) 0}} /* --- DELIVERY 02 EK CSS --- */ /* ============================================================================ AUVART — auvart-theme.css EKLENTİSİ (design pass 02, 2026-07-25) NASIL EKLENECEK --------------- Önce `delivery-01/assets--auvart-theme.css` dosyasını `assets/auvart-theme.css` olarak yapıştır. Sonra BU dosyanın tamamını onun EN SONUNA ekle. Neden ayrı: 600 satırlık dosyayı her turda baştan yazmak, tek karakterlik bir transkripsiyon hatasıyla çalışan CSS'i bozma riski taşıyor. Ek olarak vermek sıfır riskli, ve aşağıdaki başlıklar ana dosyanın bölüm yapısını birebir takip ediyor — böylece hangi kuralın nereye ait olduğu kaybolmuyor. Bu dosyadaki her kural, üstteki dosyada tanımlı token'ları (--step-*, --track-*, --stars, --pad-*) kullanır. Tek başına yapıştırılırsa çalışmaz. ============================================================================ */ /* ========================================================= PROCESS (how) — pass 02 eklentisi İkon + daire + bağlantı çizgisi deseni bırakıldı; yerine "kanıt plakası" geldi. Üç plaka bilerek eşit değil. ========================================================= */ /* eski desenin kalıntılarını kapat */ .auvart-section .how-track::before{display:none} /* ~ was: bağlantı çizgisi */ .auvart-section .how-step{padding-top:0} /* ~ was: 100px (dairenin yeri) */ .auvart-section .how-step .icon{display:none} /* ikon artık render edilmiyor, kalan CSS susturuldu */ .auvart-section .how-track{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3.4vw,56px); align-items:start; } /* asimetri: ortadaki aşağı kayar, üçüncüsü hafif yukarı. Üç eşit kutu yan yana — bu section'ı şablon gibi gösteren tam olarak buydu. */ .auvart-section .how-step--2{margin-top:clamp(28px,5vw,88px)} .auvart-section .how-step--3{margin-top:clamp(8px,1.6vw,28px)} .auvart-section .how-plate{ position:relative;margin:0 0 22px;overflow:hidden; background:linear-gradient(160deg, var(--ink-2), var(--ink-deep)); border:1px solid rgba(140,90,60,.22); transition:border-color .6s var(--ease), transform .7s var(--ease-out); } .auvart-section .how-step:hover .how-plate{border-color:rgba(184,122,82,.5);transform:translateY(-6px)} .auvart-section .how-plate--portrait{aspect-ratio:4/5} .auvart-section .how-plate--square{aspect-ratio:1/1} .auvart-section .how-plate--landscape{aspect-ratio:4/3} .auvart-section .how-plate--tall{aspect-ratio:3/4.6} .auvart-section .how-plate__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92) brightness(.94);transition:transform 1.2s var(--ease-out), filter .6s var(--ease)} .auvart-section .how-step:hover .how-plate__img{transform:scale(1.04);filter:saturate(1) brightness(1)} /* görselsiz hâl — placeholder döneminde de kasıtlı görünsün diye tasarlandı */ .auvart-section .how-plate.is-empty{ background: var(--stars), radial-gradient(ellipse 90% 70% at 50% 118%, rgba(184,122,82,.16), transparent 68%), linear-gradient(160deg, var(--ink-2) 0%, var(--ink-void) 100%); background-size:var(--stars-size), 100% 100%, 100% 100%; background-repeat:repeat,no-repeat,no-repeat; } .auvart-section .how-plate__ghost{ position:absolute;left:0;right:0;top:50%;transform:translateY(-54%); text-align:center;font-family:var(--serif);font-style:italic;font-weight:400; font-size:clamp(84px,11vw,168px);line-height:1; color:rgba(184,122,82,.16); -webkit-user-select:none;user-select:none; } .auvart-section .how-plate__rule{position:absolute;left:14%;right:14%;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(184,122,82,.4),transparent)} /* ince iç çerçeve — plakayı "asılmış" gösteren detay */ .auvart-section .how-plate__edge{position:absolute;inset:10px;border:1px solid rgba(244,239,230,.1);pointer-events:none} .auvart-section .how-plate__caption{ position:absolute;left:0;right:0;bottom:0;padding:34px 18px 14px; font-family:var(--sans);font-size:var(--step--2);letter-spacing:var(--track-label); text-transform:uppercase;color:rgba(244,239,230,.72); background:linear-gradient(180deg,transparent,rgba(8,8,15,.86)); } .auvart-section .how-step__body{display:flex;flex-direction:column;gap:8px} /* .num: 92px daire değil, artık küçük bir sıra numarası */ .auvart-section .how-step .num{ position:static;width:auto;height:auto;border:0;border-radius:0;background:none; display:inline-flex;align-items:center;gap:12px; font-family:var(--mono);font-style:normal;font-weight:400; font-size:var(--step--2);letter-spacing:.22em; color:var(--copper-bright);opacity:.85; } .auvart-section .how-step .num::after{ content:"";position:static;inset:auto;border:0;border-radius:0;animation:none; display:inline-block;width:26px;height:1px;background:var(--copper);opacity:.6; } .auvart-section .how-step h3{margin-bottom:2px} .auvart-section .how-step p{max-width:36ch} .auvart-section .how-footnote{ margin:clamp(40px,5vw,72px) auto 0;max-width:52ch;text-align:center; font-family:var(--editorial);font-style:italic;font-size:var(--step-0); color:rgba(244,239,230,.6); } @media (max-width:900px){ .auvart-section .how-track{grid-template-columns:1fr;gap:44px} .auvart-section .how-step--2,.auvart-section .how-step--3{margin-top:0} .auvart-section .how-step{max-width:420px;margin-left:auto;margin-right:auto;text-align:left} .auvart-section .how-step h3{text-align:left} .auvart-section .how-step p{text-align:left;margin:0;max-width:none} .auvart-section .how-step .num{justify-content:flex-start} } /* ========================================================= REVEAL SLIDER — pass 02 eklentisi 4 aynı slider yerine 1 büyük sahne + 3 senaryo thumbnail'ı. ========================================================= */ .auvart-section .reveal-main{max-width:1240px;margin:0 auto;padding:0 var(--gutter);position:relative;z-index:2} .auvart-section .reveal-stage--lead{ aspect-ratio:16/10; /* ~ was: 1/1 dört küçük karede */ box-shadow:0 40px 110px rgba(0,0,0,.6), 0 0 0 1px rgba(140,90,60,.22); } @media (max-width:760px){.auvart-section .reveal-stage--lead{aspect-ratio:4/5}} /* büyük sahnede köşe işaretleri ve etiketler biraz daha nefes alsın */ .auvart-section .reveal-stage--lead .frame-corner{width:28px;height:28px} .auvart-section .reveal-stage--lead .reveal-side{font-size:9px;top:16px} .auvart-section .reveal-stage--lead .reveal-side.left{left:16px} .auvart-section .reveal-stage--lead .reveal-side.right{right:16px} .auvart-section .reveal-examples{ max-width:1240px;margin:26px auto 0;padding:0 var(--gutter); display:flex;align-items:center;gap:22px;flex-wrap:wrap;position:relative;z-index:2; } .auvart-section .reveal-examples__label{ font-family:var(--sans);font-size:var(--step--2);letter-spacing:var(--track-label); text-transform:uppercase;color:rgba(244,239,230,.45);flex:none; } .auvart-section .reveal-examples__row{display:flex;gap:12px;flex-wrap:wrap} .auvart-section .reveal-thumb{ display:flex;align-items:center;gap:12px;padding:8px 16px 8px 8px; background:rgba(244,239,230,.04);border:1px solid rgba(244,239,230,.1); color:rgba(244,239,230,.7);cursor:pointer; transition:border-color .4s var(--ease), background .4s var(--ease), color .4s var(--ease); } .auvart-section .reveal-thumb:hover{border-color:rgba(184,122,82,.5);color:var(--bone)} .auvart-section .reveal-thumb.is-active{ border-color:var(--copper-bright);background:rgba(184,122,82,.1);color:var(--bone); } .auvart-section .reveal-thumb__art{ width:46px;height:46px;flex:none;background-size:cover;background-position:center; filter:saturate(.9) brightness(.92);transition:filter .4s var(--ease); } .auvart-section .reveal-thumb.is-active .reveal-thumb__art, .auvart-section .reveal-thumb:hover .reveal-thumb__art{filter:saturate(1) brightness(1)} .auvart-section .reveal-thumb__name{ font-family:var(--sans);font-size:var(--step--2);letter-spacing:var(--track-label); text-transform:uppercase;white-space:nowrap; } @media (max-width:640px){ .auvart-section .reveal-examples{flex-direction:column;align-items:flex-start;gap:12px} .auvart-section .reveal-examples__row{width:100%} .auvart-section .reveal-thumb{flex:1 1 auto} } /* ========================================================= STYLE FAMILIES — pass 02 eklentisi Scroller'ın sonundaki "hepsini gör" kartı. ========================================================= */ .auvart-section .style-explore{ flex:0 0 clamp(220px,20vw,300px);aspect-ratio:3/4;scroll-snap-align:center; display:flex;align-items:center;justify-content:center;text-decoration:none; border:1px solid rgba(184,122,82,.35); background: var(--stars), radial-gradient(ellipse 90% 70% at 50% 112%, rgba(184,122,82,.2), transparent 66%), linear-gradient(180deg, var(--ink-2), var(--ink-void)); background-size:var(--stars-size), 100% 100%, 100% 100%; background-repeat:repeat,no-repeat,no-repeat; transition:border-color .6s var(--ease-out), transform .6s var(--ease-out); } .auvart-section .style-explore:hover{border-color:var(--copper-bright);transform:translateY(-10px)} .auvart-section .style-explore__inner{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:0 26px} .auvart-section .style-explore__count{ font-family:var(--serif);font-style:italic;font-weight:400; font-size:clamp(44px,4.6vw,68px);line-height:1;color:var(--copper-bright); } .auvart-section .style-explore__label{ font-family:var(--sans);font-size:var(--step--2);letter-spacing:var(--track-label); text-transform:uppercase;color:rgba(244,239,230,.78);max-width:16ch;line-height:1.7; } .auvart-section .style-explore__arrow{ display:inline-block;width:26px;height:1px;background:var(--copper-bright);position:relative; transition:width .5s var(--ease); } .auvart-section .style-explore__arrow::after{ content:"";position:absolute;right:0;top:-3px;width:7px;height:7px; border-right:1px solid var(--copper-bright);border-top:1px solid var(--copper-bright);transform:rotate(45deg); } .auvart-section .style-explore:hover .style-explore__arrow{width:44px} /* ========================================================= STORY — pass 02 eklentisi Sağ panel artık boş koyu dikdörtgen değil, çizilmiş bir takımyıldız. ========================================================= */ .auvart-section .story-right{display:flex;align-items:center;justify-content:center;padding:clamp(24px,3vw,48px)} .auvart-section .story-constellation{ position:relative;z-index:1;width:100%;height:100%;max-height:clamp(340px,44vw,540px); overflow:visible; } .auvart-section .cst-orbits ellipse{ fill:none;stroke:rgba(184,122,82,.16);stroke-width:1;stroke-dasharray:2 9; transform-origin:320px 268px; animation:auv-orbit 220s linear infinite; } .auvart-section .cst-orbits ellipse:nth-child(2){animation-duration:340s;animation-direction:reverse;stroke:rgba(244,239,230,.07)} @keyframes auv-orbit{to{transform:rotate(360deg)}} .auvart-section .cst-links line{ stroke:rgba(184,122,82,.3);stroke-width:.75; stroke-dasharray:1 4; opacity:0; animation:auv-link-in .9s var(--ease-out) forwards; animation-delay:calc(.15s + var(--i) * .07s); } @keyframes auv-link-in{to{opacity:1}} .auvart-section .cst-star circle{ fill:var(--bone); animation:auv-twinkle 5.5s ease-in-out infinite; animation-delay:calc(var(--i) * .45s); } .auvart-section .cst-star text{ fill:rgba(244,239,230,.6); font-family:var(--sans);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase; transition:fill .4s var(--ease); } .auvart-section .cst-star:hover circle{fill:var(--copper-bright)} .auvart-section .cst-star:hover text{fill:var(--bone)} @keyframes auv-twinkle{0%,100%{opacity:.5}50%{opacity:1}} .auvart-section .cst-core__dot{fill:var(--copper-bright);filter:drop-shadow(0 0 10px rgba(184,122,82,.9))} .auvart-section .cst-core__ring{fill:none;stroke:rgba(184,122,82,.55);stroke-width:1;transform-origin:320px 268px;will-change:transform,opacity;animation:auv-pulse 4.5s ease-in-out infinite} @keyframes auv-pulse{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.375);opacity:.2}} .auvart-section .cst-core__label{ fill:var(--bone);font-family:var(--serif);font-weight:500;font-size:15px;letter-spacing:.24em; } .auvart-section .cst-core__sub{ fill:rgba(184,122,82,.85);font-family:var(--editorial);font-style:italic;font-size:13px;letter-spacing:.06em; } @media (prefers-reduced-motion: reduce){ .auvart-section .cst-orbits ellipse, .auvart-section .cst-star circle, .auvart-section .cst-core__ring{animation:none} .auvart-section .cst-links line{opacity:1;animation:none} } /* koordinat bloğu ortadan alt-sol köşeye taşındı — diyagramın önünü kapatmıyor */ .auvart-section .story-right .glyph{ position:absolute;top:auto;left:clamp(20px,3vw,40px);bottom:clamp(20px,3vw,36px); transform:none;text-align:left;z-index:3; display:flex;align-items:flex-end;gap:14px; } .auvart-section .story-right .glyph .big-star{width:30px;height:30px;margin-bottom:0;flex:none} .auvart-section .story-right .glyph .latin{font-size:var(--step--2);letter-spacing:.18em} .auvart-section .story-right .glyph .name{font-size:var(--step--1);margin-top:3px;letter-spacing:.04em} .auvart-section .story-right .glyph .coords{margin-top:5px;font-size:8.5px;letter-spacing:.14em;max-width:34ch} @media (max-width:640px){ .auvart-section .story-right .glyph{position:static;margin-top:16px;padding:0 20px 24px} .auvart-section .story-right{flex-direction:column;justify-content:flex-start} } /* ========================================================= FOOTER (auvart-footer.liquid — pass 02'de eklendi) Sayfa on bölüm boyunca kurulan dili son ekranda bırakmıyor. ========================================================= */ .auvart-section.auvart-footer{ padding:clamp(64px,7vw,104px) 0 clamp(28px,3vw,40px); background-color:var(--ink-void); background-image:var(--stars), linear-gradient(180deg, var(--ink-void) 0%, #05050B 100%); background-size:var(--stars-size), 100% 100%; background-repeat:repeat,no-repeat; border-top:1px solid rgba(184,122,82,.16); } .auvart-section.auvart-footer .container{position:relative;z-index:2} .auvart-section .af-top{ display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:clamp(28px,3.4vw,64px);align-items:start; } @media (max-width:1000px){.auvart-section .af-top{grid-template-columns:1fr 1fr;row-gap:48px}} @media (max-width:640px){.auvart-section .af-top{grid-template-columns:1fr;row-gap:38px}} .auvart-section .af-brand{display:flex;flex-direction:column;gap:16px;max-width:38ch} .auvart-section .af-mark{display:inline-block;width:40px;height:40px;opacity:.9;transition:opacity .4s ease} .auvart-section .af-mark:hover{opacity:1} .auvart-section .af-mark img{width:100%;height:100%;object-fit:contain;display:block} .auvart-section .af-manifesto{ font-family:var(--editorial);font-style:italic;font-size:var(--step-1); line-height:1.55;color:rgba(244,239,230,.8);margin:0; } .auvart-section .af-origin{ font-family:var(--sans);font-size:var(--step--1);line-height:1.7; color:rgba(244,239,230,.42);margin:0; } .auvart-section .af-nav{display:contents} .auvart-section .af-col{display:flex;flex-direction:column;gap:14px} .auvart-section .af-col__title{ font-family:var(--sans);font-size:var(--step--2);font-weight:500; letter-spacing:var(--track-label);text-transform:uppercase; color:var(--copper-bright);opacity:.85;margin:0; } .auvart-section .af-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px} .auvart-section .af-col a{ font-family:var(--sans);font-size:var(--step--1);color:rgba(244,239,230,.68); text-decoration:none;position:relative;width:fit-content; transition:color .35s var(--ease); } .auvart-section .af-col a::after{ content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--copper-bright); transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease); } .auvart-section .af-col a:hover{color:var(--bone)} .auvart-section .af-col a:hover::after{transform:scaleX(1)} .auvart-section .af-signup{display:flex;flex-direction:column;gap:14px} .auvart-section .af-signup__text{ font-family:var(--sans);font-size:var(--step--1);line-height:1.65; color:rgba(244,239,230,.5);margin:0;max-width:34ch; } .auvart-section .af-form__row{ display:flex;align-items:stretch; border-bottom:1px solid rgba(244,239,230,.2); transition:border-color .4s var(--ease); } .auvart-section .af-form__row:focus-within{border-color:var(--copper-bright)} .auvart-section .af-form__row input{ flex:1;min-width:0;background:transparent;border:0;outline:none; padding:12px 0;color:var(--bone); font-family:var(--sans);font-size:var(--step-0); } .auvart-section .af-form__row input::placeholder{color:rgba(244,239,230,.34)} .auvart-section .af-form__row button{ background:none;border:0;cursor:pointer;color:var(--copper-bright); display:inline-flex;align-items:center;gap:10px;padding:0 0 0 16px; font-family:var(--sans);font-size:var(--step--2);letter-spacing:var(--track-label); text-transform:uppercase;transition:color .35s var(--ease); } .auvart-section .af-form__row button:hover{color:var(--bone)} .auvart-section .af-form__row button .arrow{display:inline-block;width:16px;height:1px;background:currentColor;position:relative;transition:width .4s var(--ease)} .auvart-section .af-form__row button .arrow::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-right:1px solid currentColor;border-top:1px solid currentColor;transform:rotate(45deg)} .auvart-section .af-form__row button:hover .arrow{width:26px} .auvart-section .af-form__msg{margin:10px 0 0;font-family:var(--sans);font-size:var(--step--1)} .auvart-section .af-form__msg.is-ok{color:var(--sage)} .auvart-section .af-form__msg.is-err{color:#D08B7A} .auvart-section .af-rule{ height:1px;margin:clamp(44px,5vw,72px) 0 24px; background:linear-gradient(90deg,transparent,rgba(184,122,82,.3) 18%,rgba(184,122,82,.3) 82%,transparent); } .auvart-section .af-bottom{ display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap; font-family:var(--sans);font-size:var(--step--2);letter-spacing:.06em; color:rgba(244,239,230,.36); } .auvart-section .af-policies,.auvart-section .af-social{ list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:18px;flex-wrap:wrap; } .auvart-section .af-policies a,.auvart-section .af-social a{color:inherit;text-decoration:none;transition:color .35s var(--ease)} .auvart-section .af-policies a:hover,.auvart-section .af-social a:hover{color:var(--copper-bright)} .auvart-section .af-social a{display:inline-flex;align-items:center} .auvart-section .af-social__text a{letter-spacing:var(--track-label);text-transform:uppercase} @media (max-width:760px){ .auvart-section .af-bottom{flex-direction:column;align-items:flex-start;gap:14px} } /* --- DELIVERY 03 EK CSS --- */ /* ============================================================================ AUVART — auvart-theme.css EKLENTİSİ 3 (design pass 03, 2026-07-25) Koleksiyon sayfası: banner + Horizon ürün grid'inin kaplanması. NASIL EKLENECEK --------------- `assets/auvart-theme.css` dosyasının EN SONUNA ekle (delivery-01 + delivery-02 EK-CSS'ten sonra). >>> BU DOSYA CANLI DOM'DAN DOĞRULANDI (2026-07-25) <<< İlk taslakta `body.template-collection` kullanmıştım. Canlı sitede kontrol ettim: bu tema body'ye template class'ı EKLEMİYOR — hem anasayfada hem koleksiyonda body class'ı `page-width-narrow card-hover-effect-none`. Yani o seçicilerin hiçbiri eşleşmezdi. Hepsi `body:has(.product-grid-container)` ile değiştirildi. Aşağıdaki class isimlerinin tamamı canlı sayfadan okundu, tahmin değil: results-list.product-grid-container → ürün ızgarası .product-card / .product-card__content / .product-card__link .product-card h3.h4 → kart başlığı (şu an 13.8px Inter) .price__regular > span.price → fiyat (şu an $1.00) .facets-block-wrapper → filtreler sorting-filter-component.sorting-filter → sıralama .product-media__image → kart görseli ============================================================================ */ /* ========================================================= A. COLLECTION BANNER (auvart-collection-banner.liquid) ========================================================= */ .auvart-section.collection-banner{ position:relative; isolation:isolate; overflow:hidden; padding:clamp(52px,4vw,64px) 0 20px; color:var(--bone); background-color:var(--ink-deep); background-image: var(--stars), radial-gradient(circle at 77% 42%,rgba(184,122,82,.15),transparent 23%), radial-gradient(ellipse 72% 90% at 18% 22%,rgba(77,62,111,.22),transparent 62%), linear-gradient(145deg,#0b0b1b 0%,#17162b 52%,#111126 100%); background-size:var(--stars-size),100% 100%,100% 100%,100% 100%; background-repeat:repeat,no-repeat,no-repeat,no-repeat; } .auvart-section.collection-banner::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.42; background: linear-gradient(90deg,transparent 0 8%,rgba(244,239,230,.04) 8% calc(8% + 1px),transparent calc(8% + 1px) 92%,rgba(244,239,230,.04) 92% calc(92% + 1px),transparent calc(92% + 1px)), linear-gradient(180deg,transparent 0 82%,rgba(244,239,230,.04) 82% calc(82% + 1px),transparent calc(82% + 1px)); } .auvart-section.collection-banner::after{ content:""; position:absolute; width:clamp(320px,42vw,680px); aspect-ratio:1; right:-19%; bottom:-72%; z-index:-1; border:1px solid rgba(184,122,82,.11); border-radius:50%; box-shadow:0 0 100px rgba(184,122,82,.05) inset; } .collection-banner__layout{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(250px,.55fr); column-gap:clamp(36px,5vw,72px); row-gap:12px; align-items:center; max-width:1080px; } .collection-banner__copy{max-width:820px} .collection-banner__copy .eyebrow{ margin:0 0 clamp(14px,1.5vw,20px); color:rgba(244,239,230,.5); } .collection-banner__title{ margin:0; font-family:var(--serif); font-weight:400; font-size:clamp(50px,5.5vw,82px); line-height:.84; letter-spacing:-.055em; text-wrap:balance; } .collection-banner__title span, .collection-banner__title em{display:block} .collection-banner__title em{ margin-top:.2em; padding-left:.48em; font-family:var(--editorial); font-weight:400; font-style:italic; font-size:.64em; line-height:.98; letter-spacing:-.035em; color:#c99068; } .collection-banner__lede{ max-width:57ch; margin:clamp(18px,2vw,24px) 0 0; font-family:var(--sans); font-size:clamp(14px,1.1vw,16.5px); line-height:1.75; color:rgba(244,239,230,.68); } .collection-banner__cta{ display:inline-grid; grid-template-columns:auto minmax(44px,76px) auto; align-items:center; gap:14px; margin-top:14px; padding:12px 0; font-family:var(--sans); font-size:11px; font-weight:600; line-height:1; letter-spacing:.2em; text-transform:uppercase; color:var(--bone); text-decoration:none; } .collection-banner__cta-line{ width:100%; height:1px; background:linear-gradient(90deg,rgba(201,144,104,.45),#c99068); transition:transform .45s cubic-bezier(.22,1,.36,1); transform-origin:left center; } .collection-banner__cta-arrow{ font-size:16px; font-weight:400; color:#c99068; transition:transform .45s cubic-bezier(.22,1,.36,1); } .collection-banner__cta:hover .collection-banner__cta-line{transform:scaleX(1.18)} .collection-banner__cta:hover .collection-banner__cta-arrow{transform:translate(3px,-3px)} .collection-banner__art{ position:relative; justify-self:end; display:grid; place-items:center; width:min(18vw,220px); aspect-ratio:1; } .collection-banner__orbit{ position:absolute; border:1px solid rgba(201,144,104,.28); border-radius:50%; } .collection-banner__orbit--outer{ inset:3%; transform:rotate(-22deg) scaleY(.58); } .collection-banner__orbit--inner{ inset:20%; border-color:rgba(244,239,230,.12); transform:rotate(38deg) scaleX(.62); } .collection-banner__orbit--outer::after{ content:""; position:absolute; top:48%; right:-4px; width:7px; height:7px; border-radius:50%; background:#c99068; box-shadow:0 0 18px rgba(201,144,104,.8); } .collection-banner__star{ position:absolute; top:13%; right:15%; font-size:18px; color:#c99068; } .collection-banner__index{ font-family:var(--serif); font-size:clamp(60px,5.6vw,82px); font-weight:400; line-height:.8; letter-spacing:-.06em; color:rgba(244,239,230,.9); } .collection-banner__index-label{ position:absolute; top:68%; font-family:var(--sans); font-size:9px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:rgba(244,239,230,.42); } .collection-banner__footer{ grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:clamp(8px,1.5vw,18px); padding-top:14px; border-top:1px solid rgba(244,239,230,.1); font-family:var(--sans); font-size:9px; line-height:1.5; letter-spacing:.17em; text-transform:uppercase; color:rgba(244,239,230,.4); } .collection-banner__footer p{margin:0} .collection-banner__folio{white-space:nowrap;color:rgba(201,144,104,.7)} @media(max-width:760px){ .auvart-section.collection-banner{ padding:42px 0 14px; background-image: var(--stars), radial-gradient(circle at 82% 50%,rgba(184,122,82,.12),transparent 28%), linear-gradient(155deg,#0b0b1b 0%,#17162b 58%,#111126 100%); } .auvart-section.collection-banner::before{background:none} .collection-banner__layout{grid-template-columns:1fr;gap:14px} .collection-banner__copy .eyebrow{margin-bottom:14px} .collection-banner__title{font-size:clamp(44px,12.8vw,56px);line-height:.86} .collection-banner__title em{padding-left:.25em;font-size:.6em} .collection-banner__lede{max-width:38ch;margin-top:14px;font-size:12.5px;line-height:1.58} .collection-banner__cta{margin-top:8px;font-size:9px} .collection-banner__art{ justify-self:end; width:min(31vw,118px); margin:-48px 3vw -12px 0; } .collection-banner__index{font-size:48px} .collection-banner__index-label{top:69%;font-size:7px} .collection-banner__footer{align-items:flex-end;margin-top:0;padding-top:10px;font-size:7px} .collection-banner__footer p{max-width:28ch} } @media(prefers-reduced-motion:reduce){ .collection-banner__cta-line, .collection-banner__cta-arrow{transition:none} } /* V43: gallery-style desktop navigation */ @media(min-width:750px){ #header-component .menu-list__link-title{ font-family:"Playfair Display",Didot,serif; font-size:14px; font-weight:500; line-height:1; letter-spacing:.135em; text-transform:uppercase; color:rgba(244,239,230,.88); text-shadow:0 1px 14px rgba(244,239,230,.04); transition:color .32s ease,letter-spacing .32s ease; } #header-component .menu-list__link:hover .menu-list__link-title{ color:#c99068; letter-spacing:.17em; } #header-component .menu-list__list-item--shop .menu-list__link-title{ font-style:normal; letter-spacing:.11em; } #header-component .menu-list__list-item--shop .menu-list__link::before, #header-component .menu-list__list-item--shop .menu-list__link::after{ font-family:"Cormorant Garamond","Playfair Display",serif; font-size:12px; font-style:italic; color:rgba(201,144,104,.72); } #header-component .menu-list__list-item--shop .menu-list__link::before{content:"\2726";margin-right:8px} #header-component .menu-list__list-item--shop .menu-list__link::after{content:""} } /* ========================================================= B. HORIZON KOLEKSİYON GRID'İ — canlı class'lara göre Sadece kozmetik: renk, tipografi, kenarlık, boşluk. display / grid-template / position hiçbir yerde değişmiyor, yani filtre ve sepet JS'i etkilenmiyor. ========================================================= */ /* --- sayfa zemini -------------------------------------------------------- body zaten rgb(26,26,46). Koleksiyon sayfasına, banner'ın bittiği tondan devam eden yumuşak bir iniş veriyoruz. */ body:has(.product-grid-container) .content-for-layout{ background: radial-gradient(ellipse 110% 36% at 50% 0%, rgba(184,122,82,.07), transparent 62%), linear-gradient(180deg, #1A1A2E 0%, #12122A 100%); } /* --- stok "Products" başlığı -------------------------------------------- Canlıda class'sız bir

, 51px Playfair. Banner eklendikten sonra gereksiz — ekran okuyucuya bırakıp görsel olarak kaldırıyoruz. Banner yoksa bu kural devreye girmez, baÅŸlık yerinde kalır. */ body:has(#auvart-collection-banner):has(.product-grid-container) .shopify-section:not(.auvart-collection-banner-wrapper) h1{ position:absolute !important; width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap; } /* --- ürün kartı ---------------------------------------------------------- */ body:has(.product-grid-container) #ResultsList > div{ box-sizing:border-box; padding-inline:clamp(10px,1.6vw,22px); } body:has(.product-grid-container) .product-card{ position:relative; display:block; padding:7px; border:1px solid rgba(184,122,82,.34); background: linear-gradient(#c99068,#c99068) left 3px top 3px / 17px 1px no-repeat, linear-gradient(#c99068,#c99068) left 3px top 3px / 1px 17px no-repeat, linear-gradient(#c99068,#c99068) right 3px top 3px / 17px 1px no-repeat, linear-gradient(#c99068,#c99068) right 3px top 3px / 1px 17px no-repeat, linear-gradient(#c99068,#c99068) left 3px bottom 3px / 17px 1px no-repeat, linear-gradient(#c99068,#c99068) left 3px bottom 3px / 1px 17px no-repeat, linear-gradient(#c99068,#c99068) right 3px bottom 3px / 17px 1px no-repeat, linear-gradient(#c99068,#c99068) right 3px bottom 3px / 1px 17px no-repeat, linear-gradient(155deg,rgba(39,35,58,.98),rgba(18,18,39,.98)); box-shadow:0 16px 46px rgba(4,4,14,.2),inset 0 0 0 1px rgba(244,239,230,.025); transition:border-color .55s cubic-bezier(.22,1,.36,1), box-shadow .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1); } body:has(.product-grid-container) .product-card::before{ content:""; position:absolute; inset:3px; z-index:5; border:1px solid rgba(244,239,230,.045); pointer-events:none; } body:has(.product-grid-container) .product-card:hover{ border-color:rgba(201,144,104,.7); box-shadow:0 22px 56px rgba(4,4,14,.34),0 0 32px rgba(184,122,82,.06); transform:translateY(-6px); } .product-card .product-media__image{ filter:saturate(.94) brightness(.93); transition:filter .6s ease, transform 1.1s cubic-bezier(.22,1,.36,1); } .product-card:hover .product-media__image{ filter:saturate(1) brightness(1); transform:scale(1.03); } /* kart içeriÄŸine nefes ver — ÅŸu an görselin dibine yapışık */ body:has(.product-grid-container) .product-card .product-card__content{ gap:0 !important; padding:0 !important; } body:has(.product-grid-container) .product-card .product-card__content > .card-gallery{ position:relative; overflow:hidden; margin:0 !important; border:1px solid rgba(201,144,104,.34); box-shadow:inset 0 0 0 4px rgba(10,10,24,.42); } body:has(.product-grid-container) .product-card .product-card__content > .card-gallery::after{ content:""; position:absolute; inset:5px; z-index:6; border:1px solid rgba(244,239,230,.16); box-shadow:inset 0 0 22px rgba(4,4,14,.12); pointer-events:none; } body:has(.product-grid-container) .product-card .product-card__content > a.contents .text-block{ position:relative; margin-top:7px !important; padding:14px 10px 4px !important; border-top:1px solid rgba(184,122,82,.22); } body:has(.product-grid-container) .product-card .product-card__content > a.contents .text-block::before{ content:"\2726"; position:absolute; top:-6px; left:10px; padding:0 5px; background:#19172b; color:#c99068; font-family:serif; font-size:8px; line-height:12px; } body:has(.product-grid-container) .product-card .product-card__content > product-price{ padding:0 10px 10px !important; } @media(max-width:749px){ body:has(.product-grid-container) #ResultsList > div{padding-inline:10px} body:has(.product-grid-container) .product-card{padding:5px} body:has(.product-grid-container) .product-card .product-card__content > .card-gallery::after{inset:4px} body:has(.product-grid-container) .product-card .product-card__content > a.contents .text-block{ margin-top:5px !important; padding:12px 7px 3px !important; } body:has(.product-grid-container) .product-card .product-card__content > product-price{ padding:0 7px 8px !important; } } /* --- kart baÅŸlığı -------------------------------------------------------- Denetim maddesi: "tiny card titles". Canlıda h3.h4, 13.8px Inter 400. Playfair 500 / ~20px'e çıkıyor — anasayfadaki .style-card .name ile aynı ses. */ .product-card h3.h4, .product-card .text-block p{ font-family:"Playfair Display", Didot, serif !important; font-weight:500 !important; font-size:clamp(16px,1.25vw,20px) !important; letter-spacing:-.008em !important; line-height:1.22 !important; text-transform:none !important; color:#F4EFE6 !important; margin-block:10px 4px !important; } /* --- fiyat --------------------------------------------------------------- NOT: bu kart ÅŸu an "$1.00" gösteriyor. Bunu CSS düzeltemez — gerçek fiyat girilmeden koleksiyon sayfası premium okunmaz. */ .product-card .price, .product-card .price__regular{ font-family:"Inter", sans-serif; font-size:12px; letter-spacing:.14em; color:#B87A52; } .product-card .price__sale .price{color:rgba(244,239,230,.55)} /* --- filtreler ve sıralama ----------------------------------------------- */ .facets-block-wrapper, .sorting-filter{ font-family:"Inter", sans-serif; } .facets-block-wrapper button, .facets-block-wrapper summary, .facets-block-wrapper label, .sorting-filter button, .sorting-filter summary{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(244,239,230,.62); transition:color .3s ease, border-color .3s ease; } .facets-block-wrapper button:hover, .facets-block-wrapper summary:hover, .sorting-filter button:hover{color:#F4EFE6} .facets-block-wrapper [class*="facets__"], .facets-block-wrapper details{border-color:rgba(140,90,60,.26)} /* --- ızgara kabı ---------------------------------------------------------- */ .product-grid-container{background:transparent} /* --- odak hijyeni --------------------------------------------------------- */ body:has(.product-grid-container) a:focus-visible, body:has(.product-grid-container) button:focus-visible{ outline:2px solid rgba(184,122,82,.6); outline-offset:3px; } /* ========================================================= AUVART v12 — final header + background polish ========================================================= */ #header-component{ --auv-ease:cubic-bezier(.22,.61,.36,1); --auv-nav-font-size:11.5px; --auv-nav-track:.18em; --auv-nav-pad-y:11px; --auv-nav-pad-x:14px; --auv-header-row-min:76px; } #header-component .header__row, #header-component[transparent] .header__row, #header-component[data-sticky-state='inactive'] .header__row, #header-component[data-sticky-state='active'] .header__row{ min-height:var(--auv-header-row-min); align-items:center; } #header-component .menu-list{ --menu-horizontal-gap:18px; align-items:center; } #header-component .menu-list__link{ font-size:var(--auv-nav-font-size); line-height:1; letter-spacing:var(--auv-nav-track); } #header-component .menu-list__link-title{ padding:var(--auv-nav-pad-y) var(--auv-nav-pad-x); border-radius:999px; border:1px solid transparent; background:transparent; box-shadow:inset 0 0 0 1px transparent; transition:background-color .35s var(--auv-ease),border-color .35s var(--auv-ease),box-shadow .35s var(--auv-ease),color .35s var(--auv-ease),transform .35s var(--auv-ease); } #header-component .menu-list__link-title::after{content:none} #header-component .menu-list__list-item:hover .menu-list__link-title, #header-component .menu-list__list-item:focus-within .menu-list__link-title{ background:rgba(184,122,82,.10); border-color:rgba(184,122,82,.24); box-shadow:inset 0 0 0 1px rgba(244,239,230,.04); transform:translateY(-1px); } #header-component .menu-list__link--active .menu-list__link-title, #header-component .menu-list__link[aria-current='page'] .menu-list__link-title{ background:linear-gradient(180deg,rgba(184,122,82,.18),rgba(184,122,82,.08)); border-color:rgba(184,122,82,.36); box-shadow:inset 0 0 0 1px rgba(244,239,230,.05); } #header-component .menu-list:where(:has(.menu-list__list-item:hover)) .menu-list__link{color:rgba(244,239,230,.68)} #header-component .menu-list .menu-list__list-item:where(:hover,:focus-within) .menu-list__link, #header-component .menu-list__link--active, #header-component .menu-list__link[aria-current='page']{color:#F4EFE6} #header-component[data-sticky-state='active']{ background-color:rgba(11,11,22,.86); -webkit-backdrop-filter:blur(18px) saturate(1.07); backdrop-filter:blur(18px) saturate(1.07); } #header-component .language-selector, #header-component .localization-form{display:flex;align-items:center} #header-component .language-selector .localization-form__select, #header-component .localization-form__select{ appearance:none; -webkit-appearance:none; background:rgba(255,255,255,.04); color:#F4EFE6; border:1px solid rgba(184,122,82,.24); border-radius:999px; padding:10px 34px 10px 14px; font-family:'Inter',-apple-system,sans-serif; font-size:10.5px; font-weight:400; letter-spacing:.18em; text-transform:uppercase; line-height:1; } #header-component .language-selector .localization-form__select:hover, #header-component .localization-form__select:hover{ border-color:rgba(184,122,82,.40); background:rgba(184,122,82,.08); } #header-component .language-selector .svg-wrapper.icon-caret, #header-component .localization-selector .svg-wrapper.icon-caret{right:12px} .auvart-section.reveal-section::after, .auvart-section.how::after, .auvart-section.styles-section::after, .auvart-section.story-right::after, .auvart-section.guarantee::after, .auvart-section.auvart-footer::after{ content:""; position:absolute; inset:0; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:220px 220px; mix-blend-mode:soft-light; opacity:.16; } .auvart-section.how{ background-image:var(--stars),radial-gradient(ellipse 72% 50% at 50% 8%,rgba(184,122,82,.08),transparent 60%),var(--horizon),linear-gradient(180deg,var(--ink-1) 0%,var(--ink-2) 100%); } .auvart-section.styles-section{ background-image:var(--stars),radial-gradient(ellipse 68% 54% at 16% 22%,rgba(184,122,82,.08),transparent 62%),var(--horizon),linear-gradient(180deg,var(--ink-2) 0%,var(--ink-deep) 55%,var(--ink-0) 100%); } @media (max-width:989px){ #header-component{ --auv-nav-font-size:10.5px; --auv-nav-track:.14em; --auv-nav-pad-y:9px; --auv-nav-pad-x:11px; --auv-header-row-min:68px; } #header-component .menu-list{--menu-horizontal-gap:10px} } /* ========================================================= AUVART — PRE-PUBLISH POLISH - Slightly smaller main header logo/wordmark - Footer address/powered-by/social expansion - Smoother section transitions - Denser subtle star-dust background ========================================================= */ /* denser fine star-dust, keeping the same palette */ .auvart-section{ --stars: radial-gradient(1.5px 1.5px at 12% 18%, rgba(244,239,230,.78), transparent 56%), radial-gradient(1.1px 1.1px at 78% 9%, rgba(244,239,230,.50), transparent 56%), radial-gradient(1px 1px at 43% 63%, rgba(232,223,201,.44), transparent 56%), radial-gradient(1.9px 1.9px at 88% 74%, rgba(184,122,82,.58), transparent 56%), radial-gradient(1px 1px at 61% 33%, rgba(244,239,230,.36), transparent 56%), radial-gradient(1.2px 1.2px at 27% 87%, rgba(244,239,230,.42), transparent 56%), radial-gradient(1px 1px at 96% 44%, rgba(154,168,150,.34), transparent 56%), radial-gradient(1.4px 1.4px at 6% 55%, rgba(244,239,230,.46), transparent 56%), radial-gradient(0.9px 0.9px at 20% 11%, rgba(244,239,230,.34), transparent 58%), radial-gradient(0.8px 0.8px at 33% 27%, rgba(244,239,230,.26), transparent 58%), radial-gradient(1px 1px at 58% 14%, rgba(232,223,201,.24), transparent 58%), radial-gradient(0.9px 0.9px at 72% 22%, rgba(244,239,230,.22), transparent 58%), radial-gradient(0.8px 0.8px at 81% 37%, rgba(244,239,230,.18), transparent 58%), radial-gradient(1px 1px at 17% 68%, rgba(184,122,82,.22), transparent 58%), radial-gradient(0.8px 0.8px at 37% 79%, rgba(244,239,230,.18), transparent 58%), radial-gradient(0.9px 0.9px at 66% 83%, rgba(244,239,230,.20), transparent 58%); --stars-size: 723px 723px, 541px 541px, 647px 647px, 883px 883px, 461px 461px, 701px 701px, 607px 607px, 821px 821px, 389px 389px, 421px 421px, 503px 503px, 467px 467px, 591px 591px, 533px 533px, 439px 439px, 575px 575px; box-shadow: inset 0 64px 100px -104px rgba(244,239,230,.05), inset 0 -78px 108px -112px rgba(184,122,82,.14); } /* smooth out hard section cuts */ .auvart-section + .shopify-section .auvart-section, .shopify-section + .shopify-section .auvart-section{ margin-top:-1px; } .auvart-section.reveal-section, .auvart-section.how, .auvart-section.styles-section, .auvart-section.story-right, .auvart-section.guarantee, .auvart-section.faq, .auvart-section.cta, .auvart-section.commission, .auvart-section.auvart-footer{ background-position:center center; } /* footer meta row */ .auvart-section .af-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; color:rgba(244,239,230,.60); font-family:var(--sans); font-size:var(--step--2); letter-spacing:.04em; } .auvart-section .af-meta__sep{ color:rgba(184,122,82,.50); } .auvart-section .af-address, .auvart-section .af-powered, .auvart-section .af-powered a{ color:inherit; text-decoration:none; } .auvart-section .af-powered a:hover{ color:var(--copper-bright); } .auvart-section .af-social{ gap:14px; } .auvart-section .af-social a{ min-height:18px; } .auvart-section .af-social svg{ width:16px; height:16px; } #header-component .header-logo{ width:auto; max-width:170px; min-width:0; flex:0 1 auto; } #header-component .header-logo__image-container--original, #header-component .header-logo__image-container--inverse{ max-width:100%; transform:none!important; } #header-component .header-logo__image{ width:auto!important; height:auto!important; max-width:170px; max-height:42px; object-fit:contain; } #header-component .header__row{ min-height:62px; align-items:center; } @media (min-width:990px) and (max-width:1180px){ #header-component .header-logo, #header-component .header-logo__image{max-width:155px;max-height:39px} #header-component .header__columns--three{column-gap:10px} #header-component .menu-list__link{padding-inline:9px} } @media (max-width:989px){ #header-component .header-logo, #header-component .header-logo__image{max-width:145px;max-height:36px} #header-component .header__row{min-height:56px} } /* AUVART FINAL: tactile, accessible Style families browsing */ .auvart-section.styles-section{ overflow:hidden; background: radial-gradient(ellipse 62% 42% at 92% 12%,rgba(184,122,82,.10),transparent 72%), radial-gradient(ellipse 58% 48% at 8% 88%,rgba(111,105,139,.11),transparent 72%), var(--stars),var(--ink); background-size:auto,auto,var(--stars-size),auto; } .auvart-section .styles-controls{ width:min(100% - 48px,1440px); margin:28px auto 16px; display:grid; grid-template-columns:minmax(0,1fr) minmax(100px,240px) auto; align-items:center; gap:18px; } .auvart-section .styles-hint{ color:rgba(244,239,230,.58); font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase; } .auvart-section .styles-progress{ position:relative; height:1px; overflow:hidden; background:rgba(244,239,230,.16); } .auvart-section .styles-progress__bar{ position:absolute; inset:0 auto 0 0; width:0; background:linear-gradient(90deg,var(--copper),var(--ivory)); transition:width .25s ease; } .auvart-section .styles-nav{display:flex;gap:8px} .auvart-section .styles-nav button{ width:42px;height:42px;padding:0; display:grid;place-items:center; border:1px solid rgba(244,239,230,.22); border-radius:999px; color:var(--ivory); background:rgba(15,15,30,.38); cursor:pointer; transition:border-color .25s ease,background .25s ease,transform .25s ease,opacity .25s ease; } .auvart-section .styles-nav button:hover:not(:disabled){ border-color:rgba(184,122,82,.75); background:rgba(184,122,82,.12); transform:translateY(-2px); } .auvart-section .styles-nav button:disabled{opacity:.28;cursor:default} .auvart-section .styles-nav button:focus-visible, .auvart-section .styles-scroller:focus-visible{ outline:2px solid var(--copper-bright); outline-offset:4px; } .auvart-section .styles-stage{position:relative} .auvart-section .styles-stage:before, .auvart-section .styles-stage:after{ content:""; position:absolute;z-index:4;top:0;bottom:0;width:clamp(18px,4vw,72px); pointer-events:none; } .auvart-section .styles-stage:before{left:0;background:linear-gradient(90deg,var(--ink),transparent)} .auvart-section .styles-stage:after{right:0;background:linear-gradient(270deg,var(--ink),transparent)} .auvart-section .styles-scroller{ scroll-behavior:smooth; scroll-padding-inline:clamp(24px,5vw,80px); overscroll-behavior-inline:contain; cursor:grab; } .auvart-section .styles-scroller.dragging{cursor:grabbing;scroll-behavior:auto;user-select:none} .auvart-section .style-card{ --tilt-x:0deg; --tilt-y:0deg; --lift:0px; transform:perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--lift)); transform-style:preserve-3d; transition:transform .22s ease,border-color .3s ease,box-shadow .3s ease; will-change:transform; } @media (hover:hover) and (pointer:fine){ .auvart-section .style-card:hover{ --lift:-5px; border-color:rgba(184,122,82,.52); box-shadow:0 30px 70px rgba(0,0,0,.30); } } .auvart-section.sizes, .auvart-section.faq{ box-shadow:inset 0 110px 140px -150px rgba(184,122,82,.20),inset 0 -110px 140px -150px rgba(111,105,139,.22); } @media (max-width:749px){ .auvart-section .styles-controls{ width:min(100% - 28px,1440px); grid-template-columns:1fr auto; margin-top:20px; } .auvart-section .styles-hint{display:none} .auvart-section .styles-progress{min-width:110px} } @media (prefers-reduced-motion:reduce){ .auvart-section .styles-scroller{scroll-behavior:auto} .auvart-section .style-card{transform:none!important;transition:none} .auvart-section .styles-progress__bar{transition:none} } .auvart-section .reveal-main{ width:min(100%,760px); max-width:760px; } .auvart-section .reveal-stage--lead{ aspect-ratio:1/1; } .auvart-section .reveal-examples{ max-width:760px; } .auvart-section .styles-scroller{ gap:16px; padding-inline:var(--gutter); scroll-snap-type:x proximity; } .auvart-section .styles-scroller .style-card-link, .auvart-section .styles-scroller > .style-card{ flex:0 0 clamp(230px,21.5vw,340px); scroll-snap-align:start; } .auvart-section .styles-scroller .style-card-link .style-card, .auvart-section .styles-scroller > .style-card{ width:100%; aspect-ratio:1/1; } .auvart-section .style-card .meta{ left:18px; right:18px; bottom:17px; } .auvart-section .style-card .name{ font-size:clamp(20px,1.55vw,28px); } .auvart-section .style-card .sub, .auvart-section .style-best{ font-size:clamp(10px,.72vw,13px); line-height:1.35; } .auvart-section .style-best{ margin-top:8px; } @media (max-width:989px){ .auvart-section .styles-scroller .style-card-link, .auvart-section .styles-scroller > .style-card{ flex-basis:clamp(230px,38vw,310px); } } @media (max-width:599px){ .auvart-section .reveal-main{ width:min(100%,520px); } .auvart-section .reveal-stage--lead{ aspect-ratio:1/1; } .auvart-section .styles-scroller .style-card-link, .auvart-section .styles-scroller > .style-card{ flex-basis:78vw; } } .auvart-section{ --stars: radial-gradient(1.6px 1.6px at 7% 13%,rgba(244,239,230,.70),transparent 60%), radial-gradient(1px 1px at 16% 36%,rgba(244,239,230,.38),transparent 60%), radial-gradient(1.3px 1.3px at 24% 72%,rgba(184,122,82,.48),transparent 60%), radial-gradient(.9px .9px at 32% 22%,rgba(244,239,230,.34),transparent 60%), radial-gradient(1.5px 1.5px at 41% 86%,rgba(232,223,201,.46),transparent 60%), radial-gradient(.8px .8px at 49% 47%,rgba(244,239,230,.30),transparent 60%), radial-gradient(1.2px 1.2px at 58% 11%,rgba(154,168,150,.38),transparent 60%), radial-gradient(1px 1px at 65% 64%,rgba(244,239,230,.36),transparent 60%), radial-gradient(1.7px 1.7px at 74% 31%,rgba(184,122,82,.48),transparent 60%), radial-gradient(.9px .9px at 82% 79%,rgba(244,239,230,.32),transparent 60%), radial-gradient(1.2px 1.2px at 91% 18%,rgba(244,239,230,.46),transparent 60%), radial-gradient(.8px .8px at 97% 56%,rgba(232,223,201,.30),transparent 60%), radial-gradient(.8px .8px at 12% 91%,rgba(244,239,230,.26),transparent 60%), radial-gradient(1px 1px at 37% 58%,rgba(184,122,82,.32),transparent 60%), radial-gradient(.9px .9px at 69% 93%,rgba(244,239,230,.28),transparent 60%), radial-gradient(1px 1px at 87% 48%,rgba(244,239,230,.32),transparent 60%); --stars-size: 389px 389px,313px 313px,457px 457px,337px 337px, 503px 503px,281px 281px,421px 421px,359px 359px, 487px 487px,329px 329px,443px 443px,299px 299px, 371px 371px,409px 409px,347px 347px,463px 463px; } .auvart-section .reveal-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; max-width:1460px; } .auvart-section .reveal-grid .reveal-stage{ aspect-ratio:1/1; } @media (max-width:1050px){ .auvart-section .reveal-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:560px){ .auvart-section .reveal-grid{grid-template-columns:1fr} } .auvart-section.sizes .container{ max-width:1080px; } .auvart-section .sizes-head{ margin-bottom:34px; } .auvart-section .sizes-head h2{ font-size:clamp(48px,4.8vw,74px); } .auvart-section .sizes-head .lede{ max-width:46ch; color:rgba(26,26,46,.86); font-size:clamp(16px,1.15vw,19px); font-weight:500; line-height:1.55; } .auvart-section .size-studio{ grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:38px; } .auvart-section .size-row, .auvart-section .size-row .label, .auvart-section .size-row .prices{ color:rgba(26,26,46,.92); } .auvart-section .size-row .space, .auvart-section .size-pricing-note, .auvart-section .size-note{ color:rgba(26,26,46,.72); font-weight:500; } .auvart-section .style-card .style-photo{ position:absolute; inset:0; z-index:2; background-size:cover; background-position:center; opacity:0; transform:none; transition:opacity .42s var(--ease); } @media (hover:hover) and (pointer:fine){ .auvart-section .style-card:hover .style-photo, .auvart-section .style-card-link:focus-visible .style-photo{ opacity:1; transform:none; } .auvart-section .style-card:hover .style-image, .auvart-section .style-card-link:focus-visible .style-image{ opacity:0; } } .auvart-section .style-card .style-image{ transition:opacity .42s var(--ease),transform 1.1s var(--ease-out),filter .6s var(--ease); } .auvart-section .af-signup__contact{ margin-top:20px; padding-top:18px; border-top:1px solid rgba(244,239,230,.12); display:grid; gap:14px; } .auvart-section .af-signup__address{ margin:0; color:rgba(244,239,230,.68); font-family:var(--sans); font-size:12px; font-style:normal; line-height:1.55; max-width:42ch; } .auvart-section .af-signup__contact .af-social{ display:flex; align-items:center; justify-content:flex-start; gap:14px; margin:0; } .auvart-section .af-signup__contact .af-social a, .auvart-section .af-signup__contact .af-social span{ width:32px; height:32px; display:grid; place-items:center; border:1px solid rgba(244,239,230,.16); border-radius:999px; color:rgba(244,239,230,.76); } .auvart-section .af-signup__contact .af-social a:hover{ color:var(--copper-bright); border-color:rgba(184,122,82,.62); } .auvart-section .af-signup__contact .af-social__pending{ opacity:.45; } /* AUVART final readability and responsive polish */ .auvart-section .style-card .sub, .auvart-section .style-best{ font-size:clamp(12.5px,.78vw,14px); line-height:1.48; } .auvart-section .style-card .sub{color:rgba(244,239,230,.82)} .auvart-section .style-best{color:rgba(244,239,230,.76)} .auvart-section .reveal-side, .auvart-section .reveal-stage--lead .reveal-side{ font-size:clamp(10px,.68vw,11px); letter-spacing:.22em; } .auvart-section .styles-hint, .auvart-section .styles-meta{ font-size:clamp(11.5px,.72vw,13px); color:rgba(244,239,230,.72); } .auvart-section.style-picker-section{ padding-block:clamp(88px,10vw,150px); } .auvart-section.style-picker-section .style-picker-grid{align-items:stretch} .auvart-section.style-picker-section .style-card-link{height:100%} .auvart-section.sizes .sizes-head .display{font-size:clamp(42px,5vw,64px)} @media (max-width:640px){ .auvart-section .size-row{ grid-template-columns:auto minmax(0,1fr); align-items:start; row-gap:10px; } .auvart-section .size-row .prices{ grid-column:2 / -1; justify-self:start; text-align:left; } .auvart-section .size-wall img{ aspect-ratio:4/3; object-fit:contain; } } /* Final footer consent readability */ .af-signup__consent { margin: 12px 0 0; max-width: 38rem; color: rgba(245, 241, 234, .68); font-size: clamp(12px, .74vw, 13px); line-height: 1.55; } .af-signup__consent a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } /* AUVART MOBILE QA — 2026-07-26 */ /* Fluid, device-agnostic mobile pass: 320px phones through compact tablets. */ @media (max-width: 749px) { html { -webkit-text-size-adjust: 100%; } /* Keep the real header compact and prevent its transparent layer from creating an oversized visual gap above the first section. */ body { --header-height: 58px; } #header-component, #header-component[transparent] { min-height: 0; } #header-component .header__row, #header-component[transparent] .header__row, #header-component[data-sticky-state='inactive'] .header__row, #header-component[data-sticky-state='active'] .header__row { min-height: 56px; height: auto; } #header-component .header__columns { min-height: 56px; padding-block: 8px; } #header-component .header-logo { width: min(42vw, 156px); max-width: 156px; height: auto; } #header-component .header-logo__image { width: 100% !important; max-width: 156px; max-height: 38px; height: auto !important; } #header-component .header-actions__action, #header-component .menu-drawer-container .header__icon--summary { min-width: 44px; min-height: 44px; } /* The transparent header can sit over the hero, but hero copy always clears it. */ .auvart-section.hero { min-height: max(680px, 100svh); height: max(680px, 100svh); } .auvart-section .hero-inner { max-width: 100%; padding: calc(var(--header-group-height, 96px) + env(safe-area-inset-top, 0px) + 28px) clamp(18px, 5.5vw, 28px) max(46px, env(safe-area-inset-bottom, 0px)); } .auvart-section.hero h1 { font-size: clamp(43px, 14vw, 68px); line-height: .98; max-width: 9ch; } .auvart-section .hero-trust { max-width: 100%; flex-wrap: wrap; } /* Styles: native iOS/Android horizontal panning wins on touch devices. */ .auvart-section .styles-scroller { overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: clamp(16px, 5vw, 24px); padding: 20px clamp(16px, 5vw, 24px) 42px; gap: clamp(12px, 3.5vw, 16px); cursor: auto; } .auvart-section .styles-scroller .style-card-link, .auvart-section .styles-scroller > .style-card { flex: 0 0 clamp(252px, 78vw, 336px); scroll-snap-align: start; touch-action: pan-x pan-y; -webkit-user-drag: none; } .auvart-section .styles-scroller img, .auvart-section .styles-scroller .style-image { -webkit-user-drag: none; user-select: none; pointer-events: none; } .auvart-section .styles-controls { width: calc(100% - clamp(28px, 8vw, 40px)); grid-template-columns: minmax(0, 1fr) auto; gap: 14px; margin: 18px auto 8px; } .auvart-section .styles-nav button { width: 44px; height: 44px; } /* Find the fit: one clean column, with format copy below each size. */ .auvart-section.sizes { padding: clamp(60px, 16vw, 86px) 0; overflow: hidden; } .auvart-section.sizes .container { width: 100%; max-width: 560px; padding-inline: clamp(16px, 5vw, 26px); } .auvart-section .sizes-head { text-align: left; margin-bottom: 30px; } .auvart-section .sizes-head .eyebrow { text-align: left; } .auvart-section .sizes-head h2 { font-size: clamp(44px, 13vw, 64px); line-height: .98; margin-top: 12px !important; } .auvart-section .sizes-head .lede { margin: 16px 0 0; max-width: 36ch; font-size: clamp(17px, 4.6vw, 20px); line-height: 1.5; } .auvart-section .size-studio { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; width: 100%; } .auvart-section .size-wall { width: 100%; aspect-ratio: 4 / 3; } .auvart-section .size-pricing-head { margin-bottom: 18px; } .auvart-section .size-format-legend { flex-wrap: wrap; gap: 8px 16px; line-height: 1.45; } .auvart-section .size-list { gap: 10px; } .auvart-section .size-row { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; align-items: start; gap: 8px 12px; width: 100%; padding: 16px 14px; } .auvart-section .size-row .tag { grid-row: 1 / span 2; min-width: 40px; text-align: center; padding: 4px 7px; } .auvart-section .size-row > div:nth-child(2) { min-width: 0; } .auvart-section .size-row .label { font-size: clamp(18px, 5.2vw, 22px); line-height: 1.15; } .auvart-section .size-row .space { margin-top: 5px; font-size: clamp(14px, 4vw, 17px); line-height: 1.45; overflow-wrap: anywhere; } .auvart-section .size-row .prices { grid-column: 2 / -1; display: block !important; min-width: 0; text-align: left !important; align-items: flex-start !important; } .auvart-section .size-row .prices span { display: block; font-family: var(--sans); font-size: clamp(13px, 3.7vw, 15px); line-height: 1.4; letter-spacing: .01em; color: rgba(26,26,46,.72); overflow-wrap: normal; word-break: normal; } .auvart-section .size-row .prices span:empty { display: none; } .auvart-section .size-note, .auvart-section .size-help-card { font-size: 15px; line-height: 1.5; } /* Mobile drawer: denser editorial rhythm, full canvas, visible Shop action. */ .menu-drawer { width: 100vw; max-width: none; height: 100dvh; border-right: 0; background: radial-gradient(circle at 88% 12%, rgba(184,122,82,.12), transparent 34%), #111126; } .menu-drawer__navigation-container { grid-template-rows: auto auto; align-content: start; } .menu-drawer__navigation { padding-top: clamp(18px, 7vh, 56px); } .menu-drawer__menu { padding-inline: clamp(24px, 8vw, 40px); } .menu-drawer__menu > .menu-drawer__list-item { min-height: 0; margin-bottom: 8px; } .menu-drawer__menu-item--mainlist { min-height: 0; padding: 13px 4px; font-size: clamp(27px, 8.6vw, 38px); line-height: 1.05; letter-spacing: -.015em; } .menu-drawer__list-item--shop { margin-block: 5px 14px; } .menu-drawer__list-item--shop > .menu-drawer__menu-item, .menu-drawer__list-item--shop > accordion-custom > details > .menu-drawer__menu-item { padding: 15px 18px; color: #0f0f1e; background: linear-gradient(135deg, #c8895e, #b87a52); border: 1px solid rgba(244,239,230,.18); border-radius: 999px; box-shadow: 0 14px 34px rgba(0,0,0,.2); } .menu-drawer__list-item--shop .menu-drawer__menu-item-text::after { content: " →"; font-family: var(--font-body--family); font-size: .58em; vertical-align: middle; } .menu-drawer__localization { margin-top: 24px; padding: 20px clamp(24px, 8vw, 40px) max(24px, env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(244,239,230,.10); } .menu-drawer__close-button { min-width: 48px; min-height: 48px; } /* Cart drawer: readable hierarchy and no oversized close control. */ cart-drawer .cart-drawer__dialog, cart-drawer-component .cart-drawer__dialog { width: min(100vw, 460px); } cart-drawer .dialog-close-button, cart-drawer-component .dialog-close-button { width: 52px; height: 52px; min-width: 52px; min-height: 52px; } .cart-items__property { font-size: clamp(13px, 3.8vw, 15px); line-height: 1.45; overflow-wrap: anywhere; } } @media (max-width: 360px) { #header-component .header-logo, #header-component .header-logo__image { max-width: 132px; } .auvart-section .styles-scroller .style-card-link, .auvart-section .styles-scroller > .style-card { flex-basis: 82vw; } .menu-drawer__menu-item--mainlist { font-size: clamp(25px, 8.5vw, 31px); } } @media (min-width: 750px) and (max-width: 989px) { .auvart-section .size-studio { grid-template-columns: minmax(0, 1fr) !important; max-width: 720px; margin-inline: auto; } .auvart-section .styles-scroller { -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; } } /* AUVART DESKTOP BALANCE — 2026-07-26 Compact Find the fit and let the four reveal panels use the available canvas. */ @media (min-width: 990px) { .auvart-section.reveal-section > .container { max-width: 1500px; padding-inline: clamp(24px, 3vw, 46px); } .auvart-section .reveal-grid { width: 100%; max-width: 1408px; gap: clamp(16px, 1.35vw, 22px); padding-inline: 0; } .auvart-section .reveal-actions { width: 100%; max-width: 1408px; padding-inline: 0; } .auvart-section.sizes { padding-block: clamp(54px, 5.5vw, 78px); } .auvart-section.sizes .container { max-width: 1180px; } .auvart-section.sizes .sizes-head { margin-bottom: 28px; } .auvart-section.sizes .sizes-head .display { font-size: clamp(46px, 4.4vw, 66px); } .auvart-section.sizes .sizes-head .lede { margin-top: 12px; max-width: 54ch; font-size: clamp(15px, 1vw, 18px); line-height: 1.48; } .auvart-section .size-studio { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(34px, 4vw, 58px); align-items: center; } .auvart-section .size-wall { aspect-ratio: 4 / 3; } .auvart-section .size-pricing-head { gap: 4px; margin-bottom: 14px; padding-bottom: 12px; } .auvart-section .size-format-legend { flex-wrap: wrap; gap: 8px 18px; margin-bottom: 10px; } .auvart-section .size-row { gap: 12px; padding: 11px 14px; } .auvart-section .size-note { margin-top: 16px; } .auvart-section .size-help-card { margin-top: 12px; padding: 13px 16px; gap: 4px; } } /* AUVART HEADER NAV — 2026-07-26 Center the desktop navigation and make Shop the clear action. */ @media (min-width: 990px) { #header-component { --auv-nav-font-size: 13px; --auv-nav-track: .14em; --auv-nav-pad-y: 12px; --auv-nav-pad-x: 16px; } #header-component .header__column--center { justify-content: center; } #header-component .header__column--center .header-menu { width: max-content; } #header-component .menu-list { --menu-horizontal-gap: 8px; } #header-component .menu-list__link-title { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; } #header-component .menu-list__list-item--shop .menu-list__link-title { color: #C8895E; background: rgba(184,122,82,.10); border-color: rgba(184,122,82,.30); box-shadow: inset 0 0 0 1px rgba(244,239,230,.04); } #header-component .menu-list__list-item--shop:hover .menu-list__link-title, #header-component .menu-list__list-item--shop:focus-within .menu-list__link-title { color: #F4EFE6; background: linear-gradient(180deg, rgba(200,137,94,.30), rgba(184,122,82,.14)); border-color: rgba(200,137,94,.66); } } /* AUVART DESKTOP HEADER RECOVERY — 2026-07-26 */ @media (min-width: 990px) { #header-component { --auv-nav-font-size: 15px; --auv-nav-track: .10em; --auv-nav-pad-y: 12px; --auv-nav-pad-x: 14px; } #header-component .header__column--center { min-width: 0; justify-content: center; overflow: visible; } #header-component .header__column--center .header-menu, #header-component .header__column--center .header-menu__inner { width: auto; min-width: max-content; max-width: none; overflow: visible; } #header-component .header__column--center .menu-list { --menu-horizontal-gap: 0; width: auto; overflow: visible; } #header-component .header__column--center .menu-list__list { display: flex; grid-template-columns: none; align-items: center; width: auto; gap: clamp(20px, 2.1vw, 36px); } #header-component .header__column--center .menu-list__list-item:not([slot='more']) { display: flex; flex: 0 0 auto; justify-content: center; width: auto; } #header-component .menu-list__link { flex: 0 0 auto; font-size: var(--auv-nav-font-size); font-weight: 700; white-space: nowrap; } #header-component .menu-list__link-title { min-height: 44px; padding: var(--auv-nav-pad-y) var(--auv-nav-pad-x); font-weight: 700; } #header-component .menu-list__list-item--shop .menu-list__link-title { color: #0F0F1E; background: linear-gradient(135deg, #C8895E, #B87A52); border-color: rgba(244,239,230,.28); box-shadow: 0 8px 24px rgba(140,90,60,.24); } #header-component .menu-list__list-item--shop:hover .menu-list__link-title, #header-component .menu-list__list-item--shop:focus-within .menu-list__link-title { color: #0F0F1E; background: linear-gradient(135deg, #D69A70, #C8895E); border-color: rgba(244,239,230,.48); transform: translateY(-1px); } } /* AUVART FINAL DESKTOP HEADER SPACING + LOGO — 2026-07-26 */ @media (min-width: 990px) { #header-component .header__column--center { min-width: max-content; justify-content: center; } #header-component .header__column--center .menu-list__list { display: flex; align-items: center; width: max-content; gap: clamp(34px, 3.6vw, 64px); } #header-component .header__column--center .menu-list__list-item:not([slot='more']) { flex: 0 0 auto; } #header-component .menu-list__link-title { padding-inline: 10px; } #header-component .header-logo, #header-component .header-logo__image { max-width: 230px; max-height: 56px; } #header-component .header-logo__image { width: auto !important; height: auto !important; } } @media (min-width: 1400px) { #header-component .header__column--center .menu-list__list { gap: 68px; } } /* V44: mathematically centered active Shop pill */ @media (min-width: 990px) { #header-component .menu-list__list-item--shop .menu-list__link::before, #header-component .menu-list__list-item--shop .menu-list__link::after { margin: 0 !important; } #header-component .menu-list__list-item--shop .menu-list__link::before { content: "\2726" !important; position: absolute; top: -8px; left: 50%; display: block !important; font-family: "Cormorant Garamond", "Playfair Display", serif; font-size: 8px; font-style: normal; line-height: 1; color: rgba(201, 144, 104, .82); transform: translateX(-50%); pointer-events: none; } #header-component .menu-list__list-item--shop .menu-list__link::after { content: none !important; display: none !important; } #header-component .menu-list__list-item--shop .menu-list__link { position: relative; display: flex; width: 76px; height: 44px; padding: 0 !important; align-items: center; justify-content: center; line-height: 1 !important; } #header-component .menu-list__list-item--shop .menu-list__link-title { display: flex; width: 76px; height: 44px; min-height: 44px; box-sizing: border-box; padding: 0 !important; align-items: center; justify-content: center; font-weight: 500; font-style: normal; line-height: 1 !important; text-align: center; color: #f4efe6 !important; } } /* AUVART RESPONSIVE HERO HEADER CLEARANCE — 2026-07-28 */ @media (min-width: 901px) { .auvart-section.hero { align-items: stretch; } .auvart-section.hero .hero-inner { align-self: stretch; display: flex; flex-direction: column; justify-content: center; min-height: 0; max-width: min(58ch, 62vw); padding: calc(var(--header-group-height, 96px) + clamp(20px, 3.5vh, 42px)) var(--gutter) clamp(28px, 4.5vh, 58px); } .auvart-section.hero h1 { font-size: clamp(52px, min(5.8vw, 10.2vh), 92px); line-height: 0.97; margin-top: clamp(10px, 2vh, 18px); } .auvart-section.hero[lang^="tr"] h1 { max-width: 11ch; font-size: clamp(49px, min(5.4vw, 9.6vh), 86px); } .auvart-section.hero .hero-sub { margin-top: clamp(14px, 2.4vh, 22px); } .auvart-section.hero .hero-cta-row { margin-top: clamp(20px, 3.3vh, 34px); } } @media (min-width: 901px) and (max-height: 760px) { .auvart-section.hero .hero-inner { padding-top: calc(var(--header-group-height, 96px) + 16px); padding-bottom: 20px; } .auvart-section.hero h1 { font-size: clamp(48px, min(5.2vw, 9.2vh), 76px); } .auvart-section.hero[lang^="tr"] h1 { font-size: clamp(46px, min(4.9vw, 8.7vh), 70px); } .auvart-section.hero .hero-sub { margin-top: 12px; } .auvart-section.hero .hero-sub .divider-copper { margin-bottom: 12px; } .auvart-section.hero .hero-sub .lede { font-size: clamp(15px, 2.1vh, 18px); line-height: 1.45; } .auvart-section.hero .hero-cta-row { margin-top: 18px; } .auvart-section.hero .hero-cta-row .btn { padding: 13px 24px; } .auvart-section.hero .hero-trust { margin-top: 10px; } } /* AUVART MOBILE HERO + MOMENTUM + ANNOUNCEMENT FIX — 2026-07-28 */ @media (max-width: 749px) { .auvart-section.hero .hero-eyebrow { display: none !important; } .auvart-section .styles-scroller, .auvart-section .styles-scroller .style-card-link, .auvart-section .styles-scroller > .style-card { touch-action: auto; } .auvart-section .styles-scroller { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scroll-behavior: auto !important; scroll-snap-type: none !important; } .announcement-bar__slider { justify-content: center; } .announcement-bar__slides { width: 100% !important; max-width: none !important; padding-inline: 6px; margin-inline: auto; } .announcement-bar__text { display: flex; width: 100%; align-items: center; justify-content: center; text-align: center; white-space: nowrap; font-size: clamp(7px, 2.05vw, 9px) !important; line-height: 1 !important; letter-spacing: 0.08px !important; font-weight: 700; } } /* AUVART V16 MOBILE TRUE-CENTER LOGO + ANNOUNCEMENT CENTER — 2026-07-28 */ .announcement-bar__slider { justify-content: center !important; } .announcement-bar__slides { width: 100% !important; max-width: none !important; margin-inline: auto !important; } .announcement-bar__text { display: flex; width: 100%; align-items: center; justify-content: center; text-align: center !important; } @media (max-width: 749px) { header .header__row--top { position: relative !important; } header .header-logo { position: absolute !important; left: 50% !important; top: 50% !important; inset-block-start: 50% !important; transform: translate(-50%, -50%) !important; margin: 0 !important; z-index: 2; } } /* AUVART V16 STABLE MOBILE HEADER GRID + WELCOME10 — 2026-07-28 */ .announcement-bar__text { color: #b87a52 !important; text-shadow: 0 0 12px rgba(184, 122, 82, 0.18); } @media (max-width: 749px) { header .header__columns { display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; align-items: center !important; } header .header__column--left { display: contents !important; } header .header__drawer { grid-area: 1 / 1 !important; justify-self: start; } header .header-logo { grid-area: 1 / 2 !important; justify-self: center; position: relative !important; left: auto !important; top: auto !important; inset: auto !important; inset-block-start: auto !important; transform: none !important; margin: 0 !important; z-index: 2; } header .header__column--center { display: none !important; } header .header__column--right { display: flex !important; align-items: center !important; justify-content: flex-end !important; grid-area: 1 / 3 !important; justify-self: stretch; min-width: 0; } } /* AUVART WIZARD STEP 1 VISUAL UPGRADE — 2026-07-29 (Format cards, Size price/scale, price chip) */ .auvart-wizard variant-picker fieldset { display: flex; flex-wrap: wrap; gap: 10px; border: none; padding: 0; margin: 0 0 18px; } .auvart-wizard variant-picker fieldset[data-auvart-decorated] label, .auvart-wizard variant-picker fieldset:has([data-auvart-decorated]) label { position: relative; } .auvart-wizard variant-picker fieldset:has(.auvart-format-thumb) label { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; min-width: 148px; flex: 1 1 148px; height: 128px; padding: 14px 16px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(184, 122, 82, 0.35); background: #1a1a2e; cursor: pointer; } .auvart-format-thumb { position: absolute; inset: 0; z-index: 0; } .auvart-wizard variant-picker fieldset:has(.auvart-format-thumb) label .variant-option__button-label__text, .auvart-wizard variant-picker fieldset:has(.auvart-format-thumb) label .variant-option__button-label__pill, .auvart-wizard variant-picker fieldset:has(.auvart-format-thumb) label .auvart-format-price { position: relative; z-index: 1; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65); } .auvart-wizard variant-picker fieldset:has(.auvart-format-thumb) label .variant-option__button-label__text { font-family: 'Playfair Display', serif; font-size: 1rem; color: #f4efe6; } .auvart-format-price { display: block; font-size: 0.72rem; letter-spacing: 0.03em; color: #e8dfc9; opacity: 0.85; margin-top: 2px; } .auvart-format-thumb.is-canvas { background: repeating-linear-gradient(45deg, rgba(232, 223, 201, 0.10) 0 2px, transparent 2px 6px), repeating-linear-gradient(-45deg, rgba(232, 223, 201, 0.08) 0 2px, transparent 2px 6px), linear-gradient(160deg, #2a2440, #1a1a2e); } .auvart-format-thumb.is-framed-canvas { background: linear-gradient(160deg, #2a2440, #1a1a2e); box-shadow: inset 0 0 0 9px #0f0f1e, inset 0 0 0 11px #8c5a3c; } .auvart-format-thumb.is-fine-art-print { background: radial-gradient(rgba(244, 239, 230, 0.07) 1px, transparent 1px) 0 0 / 6px 6px, linear-gradient(160deg, #221f33, #141225); } .auvart-wizard variant-picker fieldset:has(.auvart-size-scale) label { display: flex; align-items: center; gap: 10px; } .auvart-size-scale { flex: 0 0 auto; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; } .auvart-size-scale span { display: block; background: rgba(184, 122, 82, 0.55); border: 1px solid rgba(232, 223, 201, 0.4); width: var(--auvart-scale-w, 14px); height: var(--auvart-scale-h, 14px); } .auvart-size-price { margin-left: auto; font-size: 0.78rem; opacity: 0.75; white-space: nowrap; } .auvart-wizard__progress:has(.auvart-wizard__price-chip) { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 14px; } .auvart-wizard__progress:has(.auvart-wizard__price-chip) .auvart-wizard__progress-track { flex: 1 1 100%; order: 3; } .auvart-wizard__price-chip { margin-left: auto; font-family: 'Playfair Display', serif; font-size: 1.05rem; color: #b87a52; white-space: nowrap; } .auvart-wizard__price-chip:empty { display: none; } @media (max-width: 480px) { .auvart-wizard variant-picker fieldset:has(.auvart-format-thumb) label { min-width: 120px; height: 108px; } } /* ========================================================= AUVART WIZARD -- FORMAT SELECTION FIX (2026-07-29) Root cause: Horizon's native pill-selection CSS for variant-option__button-label relies on sibling/order-based :has() selectors and a sliding-highlight transition that gets desynced once our thumb/price decoration is injected. Clicking Format DID already update input:checked, price and the variant URL correctly -- only the rendered highlight was wrong (stuck/duplicated borders). This block re-derives the selected look purely from the live :checked state so it can never desync again, and hides Horizon's own transitional pseudo-elements inside this fieldset so they cannot paint a stray border on the wrong card. ========================================================= */ .auvart-wizard variant-picker fieldset:has(.auvart-format-thumb) label { transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease; } .auvart-wizard variant-picker fieldset:has(.auvart-format-thumb) label::before, .auvart-wizard variant-picker fieldset:has(.auvart-format-thumb) label::after { display: none !important; } /* AUVART WIZARD -- HIDE NATIVE PICKER FLASH (2026-07-29) The wizard mounts ~1-2s after page load (it waits for the photo-upload / options app embeds to be ready), so visitors briefly saw plain native Shopify buttons before the wizard swapped in. Hide them until .auvart-ready lands on the section. Safety net: if the JS init ever fails, this reveals the native picker again on its own after 3.5s so the buy box is never permanently hidden. */ .product-information:not(.auvart-ready) .product-details variant-picker, .product-information:not(.auvart-ready) .product-details .buy-buttons-block { opacity: 0; animation: auvart-fallback-reveal 0s 3.5s forwards; } @keyframes auvart-fallback-reveal { to { opacity: 1; } } .auvart-wizard variant-picker fieldset:has(.auvart-format-thumb) label .variant-option__button-label__pill { display: none !important; } /* AUVART WIZARD -- RELIABLE SELECTION CLASS (2026-07-30, fixes stale :has() repaint) */ .auvart-wizard variant-picker fieldset:has(.auvart-format-thumb) label.auvart-selected { border-color: #B87A52 !important; background: rgba(184, 122, 82, 0.16) !important; box-shadow: 0 0 0 1px rgba(184, 122, 82, 0.55) inset; } .auvart-wizard variant-picker fieldset:has(.auvart-format-thumb) label:not(.auvart-selected) { border-color: rgba(184, 122, 82, 0.35) !important; background: rgb(26, 26, 46) !important; box-shadow: none !important; } /* AUVART WIZARD V17 CUSTOMER-FACING REVISION — 2026-07-30 */ .auvart-wizard { overflow: hidden; } .auvart-wizard__eyebrow { display: block; margin-bottom: 7px; color: #c98a5f; font-family: 'Inter', sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .auvart-wizard__progress { align-items: center; flex-wrap: wrap; } .auvart-wizard__stepper { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; width: 100%; order: 4; margin-top: 4px; } .auvart-wizard__stepper-item { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; color: rgba(244, 239, 230, 0.48); font-family: 'Inter', sans-serif; font-size: 0.68rem; white-space: nowrap; } .auvart-wizard__stepper-dot { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: 0 0 22px; border: 1px solid rgba(244, 239, 230, 0.24); border-radius: 50%; font-size: 0.66rem; } .auvart-wizard__stepper-item.is-current, .auvart-wizard__stepper-item.is-complete { color: #f4efe6; } .auvart-wizard__stepper-item.is-current .auvart-wizard__stepper-dot, .auvart-wizard__stepper-item.is-complete .auvart-wizard__stepper-dot { border-color: #b87a52; background: #b87a52; color: #1a1a2e; font-weight: 800; } .auvart-wizard variant-picker .auvart-format-fieldset { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px !important; width: 100%; } .auvart-wizard variant-picker .auvart-format-fieldset legend, .auvart-wizard variant-picker .auvart-size-fieldset legend { grid-column: 1 / -1; width: 100%; } .auvart-wizard variant-picker .auvart-format-fieldset label { min-width: 0 !important; width: 100%; height: auto !important; aspect-ratio: 1 / 1; justify-content: flex-end !important; padding: 18px !important; border-radius: 18px !important; isolation: isolate; } .auvart-wizard variant-picker .auvart-format-fieldset label::after { content: ''; display: block !important; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, transparent 28%, rgba(8, 8, 20, 0.18) 52%, rgba(8, 8, 20, 0.93) 100%); pointer-events: none; } .auvart-wizard variant-picker .auvart-format-fieldset .auvart-format-thumb { background-position: center; background-repeat: no-repeat; background-size: cover; transform: scale(1.01); transition: transform 0.35s ease; } .auvart-wizard variant-picker .auvart-format-fieldset label:hover .auvart-format-thumb, .auvart-wizard variant-picker .auvart-format-fieldset label.auvart-selected .auvart-format-thumb { transform: scale(1.045); } .auvart-format-thumb.is-canvas { background-image: url('/cdn/shop/files/auvart-format-canvas-placeholder-v1.png?v=1785441914&width=420') !important; } .auvart-format-thumb.is-framed-canvas { background-image: url('/cdn/shop/files/auvart-format-framed-canvas-placeholder-v1.png?v=1785441932&width=420') !important; box-shadow: none !important; } .auvart-format-thumb.is-fine-art-print { background-image: url('/cdn/shop/files/auvart-format-fine-art-print-placeholder-v1.png?v=1785441961&width=420') !important; } .auvart-wizard variant-picker .auvart-format-fieldset label > :not(input):not(.auvart-format-thumb) { position: relative; z-index: 2; } .auvart-wizard variant-picker .auvart-format-fieldset .variant-option__button-label__text { font-size: clamp(0.98rem, 1.8vw, 1.16rem) !important; line-height: 1.15; } .auvart-format-description { display: block; margin-top: 5px; color: rgba(244, 239, 230, 0.76); font-family: 'Inter', sans-serif; font-size: 0.69rem; line-height: 1.35; } .auvart-format-price { margin-top: 7px; color: #f4efe6; font-weight: 700; opacity: 1; } .auvart-wizard variant-picker .auvart-size-fieldset { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px !important; width: 100%; } .auvart-wizard variant-picker .auvart-size-fieldset label { display: grid !important; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px; min-width: 0; min-height: 66px; padding: 12px 14px !important; border: 1px solid rgba(244, 239, 230, 0.14); border-radius: 14px; background: rgba(32, 32, 58, 0.86); } .auvart-wizard variant-picker .auvart-size-fieldset label.auvart-selected { border-color: #b87a52; background: rgba(184, 122, 82, 0.14); } .auvart-wizard variant-picker .auvart-size-fieldset .auvart-size-scale { grid-row: 1 / 3; } .auvart-wizard variant-picker .auvart-size-fieldset .auvart-size-price { grid-column: 3; grid-row: 1 / 3; align-self: center; color: #f4efe6; font-weight: 700; opacity: 1; } .auvart-size-meta { grid-column: 2; grid-row: 2; color: rgba(244, 239, 230, 0.56); font-family: 'Inter', sans-serif; font-size: 0.66rem; line-height: 1.25; } .auvart-choice-group > span { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .auvart-choice-group label { display: flex !important; min-width: 0; min-height: 82px !important; flex-wrap: wrap; align-content: center; gap: 8px; border: 1px solid rgba(244, 239, 230, 0.14) !important; background: rgba(32, 32, 58, 0.9) !important; color: #f4efe6 !important; } .auvart-choice-group label.auvart-choice-selected { border-color: #b87a52 !important; background: rgba(184, 122, 82, 0.18) !important; box-shadow: 0 0 0 1px rgba(184, 122, 82, 0.48) inset; } .auvart-choice-note { display: block; width: 100%; margin-left: 70px; color: rgba(244, 239, 230, 0.6); font-size: 0.68rem; font-weight: 400; } .auvart-frame-swatch { width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid rgba(244, 239, 230, 0.34); border-radius: 50%; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28); } .auvart-frame-swatch.is-dark { background: #17161a; } .auvart-frame-swatch.is-light { background: #eee7d9; } .auvart-frame-swatch.is-wood { background: linear-gradient(135deg, #c49a69, #8d6542); } .auvart-frame-swatch.is-walnut { background: linear-gradient(135deg, #6b4633, #2f1c17); } .auvart-wizard__summary { gap: 0 !important; overflow: hidden; border: 1px solid rgba(244, 239, 230, 0.1); } .auvart-wizard__summary-row { min-height: 44px; padding-block: 10px; } .auvart-wizard__summary-thumb { width: 54px; height: 54px; } @media screen and (max-width: 760px) { .auvart-wizard__stepper { display: flex; overflow-x: auto; justify-content: flex-start; padding-bottom: 3px; scrollbar-width: none; } .auvart-wizard__stepper::-webkit-scrollbar { display: none; } .auvart-wizard__stepper-item { flex: 0 0 auto; } .auvart-wizard__stepper-name { display: none; } .auvart-wizard variant-picker .auvart-format-fieldset { grid-template-columns: 1fr !important; } .auvart-wizard variant-picker .auvart-format-fieldset label { aspect-ratio: 16 / 7; min-height: 145px; } .auvart-wizard variant-picker .auvart-size-fieldset { grid-template-columns: 1fr !important; } .auvart-choice-group > span { grid-template-columns: 1fr !important; } .auvart-choice-note { margin-left: 0; } } @media (prefers-reduced-motion: reduce) { .auvart-wizard *, .auvart-wizard *::before, .auvart-wizard *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* AUVART WIZARD V18 STABILITY AND ACCESSIBILITY — 2026-07-30 */ .product-information:not(.auvart-ready) .product-details variant-picker, .product-information:not(.auvart-ready) .product-details .buy-buttons-block { opacity: 1 !important; animation: none !important; pointer-events: auto !important; } .auvart-wizard { container-type: inline-size; } .auvart-wizard__stepper { list-style: none; margin: 12px 0 0; padding: 0; } .auvart-wizard__error { margin: 16px 0 0; padding: 12px 14px; border: 1px solid rgba(196, 82, 82, 0.7); border-radius: 8px; background: rgba(196, 82, 82, 0.1); color: #f2c9c9; font-size: 0.92rem; line-height: 1.45; } .auvart-wizard__error[hidden] { display: none !important; } .auvart-wizard input:focus-visible + .variant-option__button-label, .auvart-wizard input:focus-visible + label, .auvart-wizard label:has(input:focus-visible) { outline: 2px solid #e2a477; outline-offset: 3px; } @container (max-width: 560px) { .auvart-wizard .auvart-format-fieldset { grid-template-columns: 1fr !important; } .auvart-wizard .auvart-format-fieldset label { min-height: 150px !important; aspect-ratio: 16 / 7 !important; } .auvart-wizard .auvart-format-fieldset .variant-option__button-label__text, .auvart-wizard .auvart-format-description, .auvart-wizard .auvart-format-price { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } } @media (prefers-reduced-motion: reduce) { .auvart-wizard *, .auvart-wizard *::before, .auvart-wizard *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* AUVART WIZARD V19.1 INSTANT-NAV RACE FIX — 2026-08-01 html.auvart-wizard-product is set server-side in layout/theme.liquid — present in the very first HTML byte for wizard product pages, no JS timing dependency. Mirrors the existing loading-state appearance (native picker visible, buy button hidden) as the DEFAULT, closing the gap where Shopify's instant-nav page transitions could paint the raw buy button for ~1-2s before the JS-added auvart-wizard-loading class caught up. The existing wizard init/retry/fallback logic in scripts.liquid guarantees auvart-wizard-loaded or auvart-wizard-fallback lands within ~6.5s worst case, so the buy box can never get stuck hidden. */ html.auvart-wizard-product:not(.auvart-wizard-loaded):not(.auvart-wizard-fallback) .product-information .product-details { visibility: hidden !important; } html.auvart-wizard-product:not(.auvart-wizard-loaded):not(.auvart-wizard-fallback) .product-information .product-details .buy-buttons-block { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; animation: none !important; } /* Explicitly re-hide variant-picker even though it's already inside the hidden product-details above — snippets/auvart-wizard-progressive-boot-v1 forces it visible during .auvart-wizard-loading with a selector that only depends on the JS-added class, so it can punch through before that class lands (CSS visibility lets a descendant re-declare itself visible inside a hidden ancestor). This selector keys off the always-present server marker instead, so it wins immediately regardless of JS timing. */ html.auvart-wizard-product:not(.auvart-wizard-loaded):not(.auvart-wizard-fallback) .product-information .product-details variant-picker { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* AUVART WIZARD V19 UX REBUILD — 2026-07-31 */ html.auvart-wizard-loading .product-information .product-details variant-picker, html.auvart-wizard-loading .product-information .product-details .buy-buttons-block { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; animation: none !important; } html.auvart-wizard-loading .product-information .product-details { position: relative; min-height: 430px; } html.auvart-wizard-loading .product-information .product-details::before { content: ''; display: block; width: 100%; min-height: 360px; border: 1px solid rgba(244, 239, 230, 0.1); border-radius: 18px; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.05) 40%, transparent 60%) 0 0 / 220% 100%, rgba(30, 30, 52, 0.82); animation: auvart-wizard-skeleton 1.2s ease-in-out infinite; } @keyframes auvart-wizard-skeleton { to { background-position: -220% 0, 0 0; } } .auvart-wizard variant-picker .auvart-format-fieldset { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; } .auvart-wizard variant-picker .auvart-format-fieldset label { width: 100% !important; min-width: 0 !important; min-height: 0 !important; aspect-ratio: 1 / 1 !important; padding: 10px !important; border-radius: 12px !important; } .auvart-wizard .auvart-format-fieldset .auvart-format-description { display: none !important; } .auvart-wizard .auvart-format-fieldset .variant-option__button-label__text { font-size: clamp(0.72rem, 2.5cqw, 0.96rem) !important; line-height: 1.05 !important; white-space: normal !important; } .auvart-wizard .auvart-format-fieldset .auvart-format-price { margin-top: 4px !important; font-size: clamp(0.62rem, 2.1cqw, 0.78rem) !important; white-space: normal !important; } .auvart-wizard__format-notice { margin: 4px 0 0; padding: 18px; border: 1px solid rgba(184, 122, 82, 0.34); border-radius: 14px; background: rgba(184, 122, 82, 0.09); color: rgba(244, 239, 230, 0.88); line-height: 1.55; } .auvart-wizard__nav { position: sticky; bottom: 0; z-index: 5; padding-top: 12px; padding-bottom: max(10px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(26,26,46,0), #1a1a2e 24%); } .auvart-wizard__error:not([hidden]) { position: sticky; bottom: 68px; z-index: 6; box-shadow: 0 8px 24px rgba(0,0,0,0.3); } @container (max-width: 560px) { .auvart-wizard .auvart-format-fieldset { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; } .auvart-wizard .auvart-format-fieldset label { width: 100% !important; min-height: 0 !important; aspect-ratio: 1 / 1 !important; padding: 8px !important; } } @media screen and (max-width: 760px) { .auvart-wizard variant-picker .auvart-format-fieldset { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .auvart-wizard variant-picker .auvart-format-fieldset label { min-height: 0 !important; aspect-ratio: 1 / 1 !important; } } @media (prefers-reduced-motion: reduce) { html.auvart-wizard-loading .product-information .product-details::before { animation: none !important; } } .auvart-wizard__info-card[open] { padding-bottom: 16px; } .auvart-wizard__info-card summary { min-height: 44px; padding: 14px 16px; color: #f4efe6; font-weight: 700; cursor: pointer; } .auvart-wizard__info-card[open] summary { margin-bottom: 4px; } .auvart-wizard__info-card > ul, .auvart-wizard__info-card > p, .auvart-wizard__info-card > .auvart-wizard__photo-examples { margin-inline: 16px; } .auvart-wizard__upload-trigger { display: inline-flex; align-items: center; justify-content: center; min-width: 140px; min-height: 46px; margin: 14px 0; padding: 10px 18px; border: 1px solid #b87a52; border-radius: 999px; background: #b87a52; color: #161527; font-weight: 700; cursor: pointer; } .auvart-wizard__upload-trigger:hover { background: #ca8c63; } .auvart-wizard__native-file { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* AUVART photo preview circle (2026-08-01) — large circular crop guide for Step 2 "Your photo" */ .auvart-wizard__preview { display: flex; gap: 18px; align-items: flex-start; margin: 14px 0; padding: 16px; border-radius: 16px; border: 1px solid rgba(184, 122, 82, 0.22); background: rgba(244, 239, 230, 0.03); } .auvart-wizard__preview:not(.is-visible) { display: none; } .auvart-wizard__preview-circle { flex: none; width: 128px; height: 128px; border-radius: 50%; overflow: hidden; border: 2px solid #b87a52; box-shadow: 0 0 0 4px rgba(184, 122, 82, 0.14); background: #12122a; } .auvart-wizard__preview-thumb { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; } .auvart-wizard__preview-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .auvart-wizard__preview-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #f4efe6; } .auvart-wizard__preview-check { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #9aa896; color: #12122a; font-size: 11px; line-height: 1; } .auvart-wizard__preview-name { color: rgba(244, 239, 230, 0.62); font-size: 0.82rem; word-break: break-word; } .auvart-wizard__preview-tip { margin: 4px 0 0; color: rgba(244, 239, 230, 0.72); font-size: 0.82rem; line-height: 1.45; } .auvart-wizard__preview-change { align-self: flex-start; margin-top: 6px; padding: 0; border: 0; background: none; color: #b87a52; font-weight: 700; font-size: 0.82rem; text-decoration: underline; cursor: pointer; } @media (min-width: 520px) { .auvart-wizard__preview-circle { width: 160px; height: 160px; } } .auvart-wizard__upload-trigger[hidden] { display: none; } /* ===== 2026-08-07 yildiz arka plan + wizard gorsel buyutme ===== */ body { background-image: radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,.50) 50%, transparent 52%), radial-gradient(1px 1px at 62% 9%, rgba(255,255,255,.36) 50%, transparent 52%), radial-gradient(1.6px 1.6px at 84% 41%, rgba(255,255,255,.44) 50%, transparent 52%), radial-gradient(1px 1px at 27% 64%, rgba(255,255,255,.30) 50%, transparent 52%), radial-gradient(1.4px 1.4px at 46% 87%, rgba(255,255,255,.40) 50%, transparent 52%), radial-gradient(1px 1px at 91% 74%, rgba(255,255,255,.26) 50%, transparent 52%), radial-gradient(1px 1px at 6% 49%, rgba(255,255,255,.28) 50%, transparent 52%), radial-gradient(1.2px 1.2px at 73% 57%, rgba(255,255,255,.33) 50%, transparent 52%), radial-gradient(1px 1px at 38% 31%, rgba(255,255,255,.24) 50%, transparent 52%); background-size: 560px 560px; background-repeat: repeat; } .auvart-choice-group--visibility > span { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important; } .auvart-choice-group--visibility .auvart-io-thumb { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; } .auvart-wizard__preview-circle { width: 190px !important; height: 190px !important; } .section-background.color-scheme-1 { background-color: transparent !important; } body { background-image: radial-gradient(2.5px 2.5px at 21% 33%, rgba(255,255,255,1) 0%, rgba(255,255,255,.35) 38%, transparent 70%), radial-gradient(2.5px 2.5px at 74% 12%, rgba(255,244,230,.98) 0%, rgba(255,244,230,.32) 38%, transparent 70%), radial-gradient(3px 3px at 47% 78%, rgba(220,232,255,1) 0%, rgba(220,232,255,.35) 38%, transparent 70%), radial-gradient(2.5px 2.5px at 88% 57%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.30) 38%, transparent 70%), radial-gradient(2.5px 2.5px at 8% 88%, rgba(255,250,240,.95) 0%, rgba(255,250,240,.30) 38%, transparent 70%), radial-gradient(1.8px 1.8px at 9% 62%, rgba(255,255,255,.90) 50%, transparent 52%), radial-gradient(1.6px 1.6px at 36% 8%, rgba(255,246,234,.80) 50%, transparent 52%), radial-gradient(1.8px 1.8px at 58% 41%, rgba(255,255,255,.85) 50%, transparent 52%), radial-gradient(1.6px 1.6px at 81% 88%, rgba(220,230,255,.82) 50%, transparent 52%), radial-gradient(1.7px 1.7px at 66% 66%, rgba(255,255,255,.76) 50%, transparent 52%), radial-gradient(1.6px 1.6px at 14% 24%, rgba(255,255,255,.80) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 92% 30%, rgba(255,255,255,.72) 50%, transparent 52%), radial-gradient(1.6px 1.6px at 44% 95%, rgba(255,255,255,.78) 50%, transparent 52%), radial-gradient(1.2px 1.2px at 5% 15%, rgba(255,255,255,.62) 50%, transparent 52%), radial-gradient(1px 1px at 27% 52%, rgba(255,255,255,.52) 50%, transparent 52%), radial-gradient(1.2px 1.2px at 43% 22%, rgba(255,255,255,.58) 50%, transparent 52%), radial-gradient(1px 1px at 61% 84%, rgba(255,255,255,.48) 50%, transparent 52%), radial-gradient(1.2px 1.2px at 78% 35%, rgba(255,255,255,.55) 50%, transparent 52%), radial-gradient(1px 1px at 92% 73%, rgba(255,255,255,.50) 50%, transparent 52%), radial-gradient(1px 1px at 33% 95%, rgba(255,255,255,.45) 50%, transparent 52%), radial-gradient(1.2px 1.2px at 52% 6%, rgba(255,255,255,.56) 50%, transparent 52%), radial-gradient(1px 1px at 70% 48%, rgba(255,255,255,.44) 50%, transparent 52%), radial-gradient(1px 1px at 18% 71%, rgba(255,255,255,.50) 50%, transparent 52%), radial-gradient(1.2px 1.2px at 86% 12%, rgba(255,255,255,.54) 50%, transparent 52%), radial-gradient(1px 1px at 4% 40%, rgba(255,255,255,.46) 50%, transparent 52%), radial-gradient(70% 48% at 14% 8%, rgba(126,112,198,.13) 0%, transparent 64%), radial-gradient(64% 44% at 88% 66%, rgba(84,134,190,.12) 0%, transparent 64%); background-size: 900px 900px, 900px 900px, 900px 900px, 900px 900px, 900px 900px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 340px 340px, 340px 340px, 340px 340px, 340px 340px, 340px 340px, 340px 340px, 340px 340px, 340px 340px, 340px 340px, 340px 340px, 340px 340px, 340px 340px, 100% 100%, 100% 100%; background-repeat: repeat; } .auv-box { border: 1px solid rgba(255,255,255,.10); border-radius: 14px; background: rgba(255,255,255,.04); padding: 18px 20px; margin: 20px 0; } .auv-box--style p { margin: 0 0 10px; } .auv-box--style p:last-child { margin-bottom: 0; } .auv-star em { opacity: .68; font-size: .92em; font-style: italic; } .auv-made { opacity: .68; font-size: .92em; margin: 16px 0; } .auv-box--materials h3 { margin: 0 0 12px; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; opacity: .62; font-weight: 600; } .auv-box--materials ul { margin: 0; padding-left: 1.1em; } .auv-box--materials li { margin: 0 0 9px; font-size: .92em; line-height: 1.55; opacity: .85; } .auv-box--materials li:last-child { margin-bottom: 0; } main.content-for-layout { background-image: radial-gradient(110% 36% at 50% 0%, rgba(184,122,82,.07), rgba(0,0,0,0) 62%), linear-gradient(rgba(18,18,42,0) 0%, rgba(18,18,42,.5) 100%) !important; } @media screen and (max-width: 519px) { .auvart-choice-group--visibility > span { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media screen and (max-width: 519px) { .announcement-bar__text { font-size: 11.5px !important; letter-spacing: 0.04em !important; } .auvart-footer .af-nav a { display: inline-block !important; padding-block: 11px !important; } } .auvart-wizard__price-chip { display: none !important; } .auvart-wizard__nav { align-items: center !important; gap: 14px; } .auv-nav-price { order: 1; margin-right: auto; font-size: 1.75rem; font-weight: 600; line-height: 1.1; letter-spacing: 0.01em; white-space: nowrap; } .auvart-wizard__nav .auvart-wizard__btn--back { order: 0; } .auvart-wizard__nav .auvart-wizard__btn--next { order: 2; } @media screen and (max-width: 519px) { .auv-nav-price { font-size: 1.4rem; } } /* AUVART V26 — smaller style gallery on wizard product pages */ @media screen and (min-width: 1000px) { html.auvart-wizard-product .product-information__media, html.auvart-wizard-route .product-information__media { display: block; width: 100%; max-width: 560px; min-width: 0; margin-inline: auto; justify-self: center; } } /* AUVART V27 — final product-page polish */ @media screen and (min-width: 1000px) { html.auvart-wizard-product .product-information__media, html.auvart-wizard-route .product-information__media { box-sizing: border-box; margin-top: 30px; padding: 14px; border: 1px solid rgba(184, 122, 82, 0.34); border-radius: 20px; background: linear-gradient(145deg, rgba(35, 31, 48, 0.72), rgba(12, 12, 21, 0.66)); box-shadow: 0 22px 58px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.035); } } rte-formatter.auvart-style-story { display: block; box-sizing: border-box; width: 100%; margin: 14px 0 0; padding: 18px 20px; border: 1px solid rgba(184, 122, 82, 0.34); border-radius: 14px; background: linear-gradient(145deg, rgba(31, 27, 42, 0.78), rgba(15, 14, 24, 0.72)); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18); } rte-formatter.auvart-style-story p:first-child { margin-top: 0; } rte-formatter.auvart-style-story p:last-child { margin-bottom: 0; } .auvart-placement-editor__bespoke-preview { box-sizing: border-box; width: 100%; margin-top: 12px; padding: 12px; border: 1px solid rgba(184, 122, 82, 0.28); border-radius: 12px; background: rgba(12, 12, 21, 0.5); } .auvart-placement-editor__bespoke-preview.is-visible { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } @media screen and (max-width: 749px) { rte-formatter.auvart-style-story { padding: 16px; } } /* Proof Confirmation Luxury Gallery Styling */ .auv-proof-confirmation { max-width: 820px; margin: 30px auto 60px; padding: clamp(32px, 5vw, 54px); background: rgba(26, 26, 46, 0.75); border: 1px solid rgba(184, 122, 82, 0.32); border-radius: 20px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); text-align: center; position: relative; } .auv-proof-confirmation::before { content: "✓"; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin: 0 auto 20px; border-radius: 50%; background: rgba(184, 122, 82, 0.15); border: 1px solid rgba(184, 122, 82, 0.45); color: var(--copper-bright, #B87A52); font-size: 26px; font-weight: bold; } .auv-proof-confirmation h2 { font-family: var(--serif, 'Playfair Display', serif); font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 400; color: var(--bone, #F4EFE6); margin: 0 0 16px; line-height: 1.2; } .auv-proof-confirmation p { font-family: var(--sans, 'Inter', sans-serif); font-size: clamp(0.95rem, 1.1vw, 1.05rem); color: rgba(244, 239, 230, 0.85); line-height: 1.7; max-width: 620px; margin: 0 auto 20px; } .auv-proof-confirmation hr { border: none; height: 1px; background: linear-gradient(90deg, transparent, rgba(184, 122, 82, 0.4), transparent); margin: 36px 0; }