@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/inter-400.woff2?v=2) format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/inter-600.woff2?v=2) format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/inter-700.woff2?v=2) format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(/static/fonts/inter-800.woff2?v=2) format('woff2')} @font-face{font-family:'Barlow';font-style:italic;font-weight:600;font-display:swap;src:url(/static/fonts/barlow-italic-600.woff2) format('woff2')} /* Playfair Display (OFL, Google Fonts) — museum-grade display serif for headings (owner, 2026-08-22; from fable.surrealium.world). Variable files: one covers the whole 400-800 weight range per style. */ @font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 800;font-display:swap;src:url(/static/fonts/playfair-latin.woff2) format('woff2')} @font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 800;font-display:swap;src:url(/static/fonts/playfair-italic-latin.woff2) format('woff2')} :root{ --display:'Playfair Display',Georgia,serif; --ink:#151515; --ink2:#3c3a36; --muted:#79756d; --line:#d5d2cc; --paper:#fdfcf8; --paper2:#f5f3ee; --card:#fff; --gold:#b8862f; --gold-2:#d4a94a; --gold-soft:#f6edd8; --cream:#f6efe2; --radius:18px; --radius-lg:26px; --wrap:1140px; --shadow:0 1px 3px rgba(20,18,12,.06); --shadow-lg:0 14px 34px rgba(20,18,12,.10); --ease:cubic-bezier(.2,.7,.2,1); } *{box-sizing:border-box} html{scroll-behavior:smooth;overflow-x:clip} /* No page ever scrolls sideways on mobile. `clip` (not hidden) keeps the sticky nav working. Any wide child — carousels, the press marquee, the hero polaroid — must scroll inside its OWN overflow container, never the body. */ body{margin:0;font-family:'Inter',-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;line-height:1.55; overflow-x:clip;max-width:100%} h1,h2,h3{font-family:var(--display);font-style:normal;font-weight:700;letter-spacing:0;line-height:1.14;margin:0} /* emphasis word inside a heading: the swash italic (the "Forever" look) */ h1 em,h2 em,h3 em,.disp-em{font-style:italic;font-weight:700} a{color:inherit;text-decoration:none} img{max-width:100%;display:block;-webkit-user-drag:none;user-select:none; -webkit-user-select:none;-webkit-touch-callout:none} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px} .serif{font-family:Georgia,serif} .muted{color:var(--muted)} .center{text-align:center} /* Trustpilot star strip (owner, 2026-08-22): the real green boxes with white stars, replacing the old gold ★ glyphs everywhere. One element, a repeating SVG tile (green box + gap), so it drops into static HTML and JS-built cards alike. Width = 5 tiles; height scales the tile. */ .stars,.tstars,.rstars{display:inline-block;height:15px;width:calc(15px * 5 * 1.14); vertical-align:middle;font-size:0;color:transparent;letter-spacing:0; background-repeat:repeat-x;background-position:left center; background-size:calc(15px * 1.14) 15px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27.4 24'%3E%3Crect width='24' height='24' fill='%2300b67a'/%3E%3Cpath d='M12 4l2.35 4.76 5.25.77-3.8 3.7.9 5.24L12 15.9l-4.7 2.47.9-5.24-3.8-3.7 5.25-.77z' fill='%23fff'/%3E%3C/svg%3E")} .stars.lg,.tstars.lg{height:19px;width:calc(19px * 5 * 1.14);background-size:calc(19px * 1.14) 19px} .stars.sm{height:13px;width:calc(13px * 5 * 1.14);background-size:calc(13px * 1.14) 13px} .dcard-rate{display:flex;align-items:center;gap:7px} /* Trustpilot wordmark (green star + name) + aggregate rating line, reusable */ .tplogo{display:inline-flex;align-items:center;gap:4px;font-weight:800;color:var(--ink);white-space:nowrap} .tplogo svg{flex:0 0 auto;width:1.05em;height:1.05em} .tprate{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:14px;color:var(--muted);line-height:1} .tprate b{color:var(--ink);font-weight:700} .pill{display:inline-flex;align-items:center;gap:6px;background:var(--gold-soft);color:#8a6417; font-weight:700;font-size:12.5px;padding:7px 14px;border-radius:999px;letter-spacing:.3px} /* nav */ .nav{position:sticky;top:0;z-index:80;background:rgba(250,248,244,.82);backdrop-filter:blur(12px); border-bottom:1px solid transparent;transition:.3s var(--ease)} .nav.scrolled{border-color:var(--line);box-shadow:0 6px 24px rgba(40,30,10,.06)} .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:43px} /* thinner header (owner, 2026-08-20, twice) */ .nav .brand img{height:27px!important} .nav .cart{padding:6px 12px;font-size:13px} .nav .links{display:flex;gap:26px;font-size:14.5px;font-weight:600} .nav .links a{color:var(--ink2)} .nav .links a:hover{color:var(--gold)} .nav .right{display:flex;align-items:center;gap:14px} .nav .navgal{color:var(--ink2);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap} .nav .navgal:hover{color:var(--gold)} .nav .cart{font-size:14px;border:1px solid var(--line);padding:9px 16px;border-radius:999px;background:#fff;font-weight:600} /* buttons */ .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px; border:0;border-radius:999px;background:#1a1a1a;color:#fdfcf8;font-weight:600;font-size:16px; padding:14px 40px;cursor:pointer;transition:.2s var(--ease);box-shadow:none} .btn:hover{opacity:.88} .btn.gold{background:#1a1a1a;box-shadow:none} .btn.block{display:flex;width:100%} .btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none} .btn.lg{padding:18px 36px;font-size:17px} .uf-browse{margin-top:10px} /* browse-all pill under the upload widget (home hero) */ /* reveal on scroll */ .reveal{opacity:0;transform:translateY(26px);transition:.7s var(--ease)} .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s} /* hero */ .hero{position:relative;overflow:hidden;padding:70px 0 40px; background:radial-gradient(1200px 500px at 80% -10%,var(--gold-soft),transparent 60%)} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center} .hero h1{font-size:clamp(34px,5vw,58px);margin:16px 0 14px} .hero h1 em{font-style:italic;color:var(--gold)} .hero .lead{font-size:19px;color:var(--ink2);margin:0 0 26px;max-width:40ch} .hero .cta-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap} .hero .trust{margin-top:22px;display:flex;align-items:center;gap:12px;color:var(--muted);font-size:14px} .avatars{display:flex} .avatars img{width:34px;height:34px;border-radius:999px;border:2px solid #fff;object-fit:cover;margin-left:-10px} .avatars img:first-child{margin-left:0} /* hero art card w/ floating badge + shimmer */ .art{position:relative} .art .frame{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);animation:floaty 6s ease-in-out infinite} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} .art .badge{position:absolute;left:-18px;bottom:34px;background:#fff;border-radius:16px;padding:12px 16px; box-shadow:var(--shadow);display:flex;gap:10px;align-items:center;animation:floaty 6s ease-in-out .8s infinite} .art .badge b{font-size:14px}.art .badge .stars{height:12px;width:calc(12px * 5 * 1.14);background-size:calc(12px * 1.14) 12px} .art .live{position:absolute;right:-14px;top:24px;background:#123a1e;color:#8ef0a8;font-size:12px;font-weight:700; padding:8px 13px;border-radius:999px;box-shadow:var(--shadow)} .art .live i{display:inline-block;width:7px;height:7px;border-radius:9px;background:#39d67a;margin-right:6px;animation:pulse 1.4s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(57,214,122,.6)}100%{box-shadow:0 0 0 9px rgba(57,214,122,0)}} /* marquee trust strip */ .marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;overflow:hidden;padding:16px 0} .marquee .track{display:flex;gap:60px;white-space:nowrap;animation:scrollx 26s linear infinite;color:var(--muted);font-weight:700;font-size:14px;letter-spacing:.4px} @keyframes scrollx{to{transform:translateX(-50%)}} /* sections */ .section{padding:74px 0} .section.alt{background:var(--paper2)} .eyebrow{text-align:center;color:var(--gold);font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:12.5px;margin-bottom:10px} .section h2{font-size:clamp(26px,3.6vw,40px);text-align:center;margin:0 auto 10px;max-width:20ch} .section .sub{text-align:center;color:var(--muted);margin:0 auto 40px;max-width:52ch;font-size:17px} /* steps */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;position:relative} .step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 24px;text-align:center;box-shadow:var(--shadow)} .step .n{width:44px;height:44px;border-radius:999px;background:linear-gradient(135deg,var(--gold-2),var(--gold)); color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:18px} .step h3{font-size:20px;margin-bottom:6px} /* before/after slider */ .ba{position:relative;max-width:520px;margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:3/4;cursor:ew-resize;user-select:none} .ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .ba .after{clip-path:inset(0 0 0 50%)} .ba .handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.4); touch-action:none} /* generous invisible touch column: a thumb never lands on a 3px line */ .ba .handle::before{content:"";position:absolute;top:0;bottom:0;left:-24px;right:-24px} .ba .handle::after{content:"⇄";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:44px;height:44px;background:#fff;border-radius:999px;display:flex;align-items:center;justify-content:center; box-shadow:var(--shadow);color:var(--ink);font-size:18px} .ba .tag{position:absolute;bottom:14px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:700;background:rgba(0,0,0,.55);color:#fff} .ba .tag.l{left:14px}.ba .tag.r{right:14px} /* gallery */ /* one horizontal row you scroll through — holds many designs */ .gallery{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory; padding:4px 4px 16px;-webkit-overflow-scrolling:touch;scrollbar-width:thin; scrollbar-color:var(--line) transparent} .gallery::-webkit-scrollbar{height:8px} .gallery::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px} .gallery .gcard{flex:0 0 auto;width:230px;scroll-snap-align:start} .gallery figure{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);position:relative} .gallery img{aspect-ratio:3/4;object-fit:cover;width:100%;transition:.5s var(--ease)} .gallery figure:hover img{transform:scale(1.06)} .gallery figcaption{position:absolute;left:12px;bottom:12px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px} /* stats */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center} .stats .num{font-family:'Barlow',sans-serif;font-style:italic;font-weight:600;font-size:clamp(30px,4vw,46px);color:var(--gold)} .stats .lbl{color:var(--muted);font-size:14px;margin-top:2px} /* testimonials */ .tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .tcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)} .tcard .head{display:flex;align-items:center;gap:12px;margin-bottom:10px} .tcard .head img{width:48px;height:48px;border-radius:999px;object-fit:cover} .tcard .who{font-weight:800} .tcard .verified{font-size:11.5px;color:#2b8a4a;font-weight:700} .tcard p{margin:6px 0 0} .tcard .ph{margin-top:14px;border-radius:12px;overflow:hidden} /* Square, anchored just above center: 16 of the 21 review photos are PORTRAIT — a 4/3 landscape box cropped half the image away and beheaded people on mobile (owner, 2026-08-22). Audited all 21 under this crop. */ .tcard .ph img{aspect-ratio:1/1;object-fit:cover;width:100%;object-position:50% 22%} /* moving reviews carousel */ .rcar{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .rcar .rtrack{display:flex;gap:18px;width:max-content;animation:rscroll 44s linear infinite} .rcar:hover .rtrack{animation-play-state:paused} @keyframes rscroll{to{transform:translateX(calc(-50% - 9px))}} .rmini{flex:0 0 330px;width:330px;background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:20px;box-shadow:var(--shadow)} .rmini .head{display:flex;align-items:center;gap:11px;margin-bottom:8px} .rmini .head img{width:44px;height:44px;border-radius:999px;object-fit:cover} .rmini .who{font-weight:800;font-size:15px} .rmini .verified{font-size:11px;color:#2b8a4a;font-weight:700} .rmini p{margin:8px 0 0;font-size:14.5px;color:var(--ink2)} /* guarantee band */ /* guarantee band — deep forest green, seal + signature (owner, 2026-08-22) */ .band{position:relative;overflow:hidden;background: radial-gradient(120% 140% at 12% 0%,rgba(0,182,122,.16),transparent 55%), linear-gradient(140deg,#123d2b 0%,#0c2c1f 55%,#15472f 100%); color:#eef3ec;border-radius:var(--radius-lg); padding:44px;display:grid;grid-template-columns:1.35fr 1fr;gap:30px;align-items:center; box-shadow:var(--shadow-lg);border:1px solid rgba(0,182,122,.22)} .band h2{color:#fff;text-align:left} .band>div>p{color:#cfe3d6 !important} .band .g-list{display:flex;gap:26px;flex-wrap:wrap;margin-top:14px;color:#bcd4c4;font-size:14.5px} .band .g-list b{color:#fff} .band .g-list .ico{color:#7fe0b3} /* the wax seal + autograph, stacked in the right column */ .g-seal{display:flex;flex-direction:column;align-items:center;gap:10px} .g-stamp{width:150px;height:auto;transform:rotate(-6deg);filter:drop-shadow(0 8px 14px rgba(0,0,0,.4))} .g-sign{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:6px} .g-autograph{width:200px;height:auto;margin-bottom:-2px} .g-sign .sig-name{font-family:var(--display);font-style:italic;font-weight:600;color:#f2e6c4;font-size:15px;letter-spacing:.02em} .g-sign .sig-role{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8fb7a0} .band .btn.gold{margin-top:18px} /* FAQ */ .faq{max-width:760px;margin:0 auto} .faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:2px 20px;margin-bottom:12px;box-shadow:var(--shadow)} .faq summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:700;display:flex;justify-content:space-between;align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--gold);font-size:22px;transition:.2s} .faq details[open] summary::after{transform:rotate(45deg)} .faq p{margin:0 0 18px;color:var(--ink2)} /* big CTA */ .cta-final{text-align:center;background:radial-gradient(700px 300px at 50% 0,var(--gold-soft),transparent 60%);padding:80px 0} /* footer */ .foot{background:#151515;color:#b9b0a2;padding:54px 0 30px;font-size:14px} .foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px} .foot h4{color:#fff;font-family:inherit;font-size:14px;margin:0 0 12px;letter-spacing:.04em} .foot a{display:block;color:#b9b0a2;padding:5px 0} .foot a:hover{color:var(--gold-2)} .foot .bar{border-top:1px solid #2a241d;margin-top:36px;padding-top:18px;display:flex;justify-content:space-between;align-items:center;gap:16px;color:#7c7367} /* links in the bar are inline (the block rule above is for the column footer) */ .foot .bar a{display:inline;padding:0;color:#b9b0a2} .foot .bar a:not(:last-child){margin-right:2px} /* ===== create / uploader ===== */ .pagepad{padding:40px 0 70px} .uploader{max-width:600px;margin:0 auto} .drop input,.up input{display:none} /* premium uploader */ .up{display:flex;flex-direction:column;align-items:center;text-align:center;cursor:pointer; border:1.5px solid var(--line);border-radius:20px;padding:38px 24px 30px; background:linear-gradient(180deg,#fffdf8,#f7f1e6);transition:.22s var(--ease);position:relative;overflow:hidden} .up:hover{border-color:var(--gold);box-shadow:inset 0 0 0 3px var(--gold-soft);transform:translateY(-2px)} .up .ring{width:74px;height:74px;border-radius:999px;display:flex;align-items:center;justify-content:center; background:radial-gradient(circle at 30% 30%,#fff,var(--gold-soft));box-shadow:0 8px 22px rgba(184,134,47,.22); font-size:30px;margin-bottom:14px} .up .t{font-family:'Barlow',sans-serif;font-style:italic;font-weight:600;font-size:21px;margin:0} .up .s{color:var(--muted);font-size:14px;margin-top:5px} .up .s b{color:var(--gold)} .up .ex{display:flex;align-items:center;gap:8px;margin-top:18px;color:var(--muted);font-size:12.5px} .up .ex img{width:38px;height:38px;border-radius:9px;object-fit:cover;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.12)} .up.filled{padding:18px} .up.filled .ring,.up.filled .ex{display:none} .twin{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px} .twin figure{margin:0;text-align:center} .twin .box{border-radius:14px;border:1px solid var(--line);background:#faf8f4;aspect-ratio:3/4;overflow:hidden;position:relative} .twin .box img{width:100%;height:100%;object-fit:cover} .twin figcaption{font-size:12.5px;color:var(--muted);margin-top:8px;font-weight:600} .scan{position:absolute;left:0;right:0;height:40%;background:linear-gradient(180deg,transparent,rgba(212,169,74,.5),transparent);animation:scan 1.5s linear infinite} @keyframes scan{0%{top:-40%}100%{top:100%}} .pbar{height:10px;background:var(--line);border-radius:8px;overflow:hidden;margin:18px 0 8px} .bar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-2),var(--gold));transition:width .3s; background-size:200% 100%;animation:shimmer 1.4s linear infinite} @keyframes shimmer{to{background-position:200% 0}} textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:11px;font:inherit;font-size:13.5px} .err{color:#c0392b;font-size:13px;margin-top:10px} /* ===== customize ===== */ .cz{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start} /* preview scrolls WITH the page (owner 2026-08-26): it used to be position:sticky, so while you scrolled the options the preview stayed pinned and the buy box slid past it — that differential motion read as "this part moves for no reason". relative = both columns move together; relative also keeps the positioning context .pacts/.stg-arrow need. */ .cz .stage{position:relative;top:0} .cz .stage img{width:100%;display:block} /* ---- realistic frames ---- */ .frameo{position:relative;padding:0;border:20px solid transparent;border-radius:3px; transition:.35s var(--ease); box-shadow:0 30px 60px rgba(30,20,5,.30),0 8px 20px rgba(30,20,5,.18)} .frameo::before{content:"";position:absolute;inset:-20px;border-radius:3px;pointer-events:none; box-shadow:inset 0 2px 3px rgba(255,255,255,.35),inset 0 -2px 4px rgba(0,0,0,.30)} .frameo::after{content:"";position:absolute;inset:-3px;pointer-events:none; box-shadow:0 0 0 1px rgba(0,0,0,.25),inset 0 3px 10px rgba(0,0,0,.28)} /* No passe-partout (owner, 2026-08-13): the canvas sits straight in the frame */ .frameo .matt{background:none;padding:0;box-shadow:none} .f-gold{background:linear-gradient(135deg,#f0d489,#b8862f 22%,#f7e5ac 47%,#966c1e 72%,#e3c377)} .f-black{border-image:url(/static/frame_black.png) 64 round} .f-oak{border-image:url(/static/frame_oak.png) 64 round} /* Dark Wood had a swatch and a card but no frame style, so choosing it rendered a frameless preview while the cart still charged for a frame. */ .f-darkwood{border-image:url(/static/frame_darkwood.png) 64 round} .f-none{background:none;border:0;padding:0;box-shadow:0 18px 44px rgba(30,20,5,.22)} .f-none::before,.f-none::after{display:none} .f-none .matt{padding:0;background:none;box-shadow:none} .opt-row{margin:0 0 20px} .opt-row label{font-weight:800;display:flex;justify-content:space-between;margin-bottom:10px} .chips{display:flex;gap:10px;flex-wrap:wrap} .chip{border:1px solid var(--line);background:#fff;border-radius:10px;padding:11px 16px;cursor:pointer;font-size:14px;font-weight:500;transition:.15s} .chip:hover{border-color:#151515} .chip.on{border:2px solid #151515;background:#fff;color:#151515;font-weight:600;padding:10px 15px} .price{font-family:'Inter',sans-serif;font-size:32px;font-weight:800;margin:6px 0 2px} .price s{color:var(--muted);font-size:19px;font-weight:400;margin-left:10px} /* "60% off applied" badge (owner 2026-08-28): solid green, white tick, gentle pulse + shine so the applied discount is unmissable next to the price */ .save{display:inline-flex;align-items:center;gap:7px;background:#1a8a4a;color:#fff; font-weight:800;font-size:13px;letter-spacing:.02em;padding:7px 14px;border-radius:999px; margin-left:10px;vertical-align:middle;position:relative;overflow:hidden; box-shadow:0 3px 10px rgba(26,138,74,.35);animation:savepulse 2.4s ease-in-out infinite} .save .tk{display:inline-flex;width:16px;height:16px;border-radius:50%;background:#fff; color:#1a8a4a;align-items:center;justify-content:center;font-size:10px;font-weight:900;flex:0 0 16px} .save::after{content:"";position:absolute;top:0;bottom:0;width:36%;left:-45%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.38),transparent); animation:saveshine 3.4s ease-in-out infinite} @keyframes savepulse{0%,100%{box-shadow:0 3px 10px rgba(26,138,74,.35)} 50%{box-shadow:0 3px 10px rgba(26,138,74,.35),0 0 0 7px rgba(26,138,74,.13)}} @keyframes saveshine{0%,55%{left:-45%}100%{left:125%}} @media(prefers-reduced-motion:reduce){.save{animation:none}.save::after{animation:none;display:none}} .urgency{color:#b8862f;font-weight:700;font-size:14px;margin:6px 0 14px} .trustrow{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin-top:14px} /* cart */ .cart-row{display:flex;gap:16px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow)} .cart-row img{width:90px;border-radius:10px} .summary{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-top:16px;box-shadow:var(--shadow)} .summary .line{display:flex;justify-content:space-between;padding:7px 0} .summary .total{font-weight:800;font-size:19px;border-top:1px solid var(--line);margin-top:8px;padding-top:12px} /* step indicator */ .stepper{display:flex;align-items:center;justify-content:center;margin:0 auto 26px;flex-wrap:wrap} .stepper .st{display:flex;align-items:center;gap:9px;color:var(--muted);font-weight:700;font-size:14px} .stepper .st .dot{width:28px;height:28px;border-radius:99px;border:2px solid var(--line);display:flex; align-items:center;justify-content:center;font-size:13px;background:#fff;transition:.3s} .stepper .st.done .dot{background:var(--gold);border-color:var(--gold);color:#fff} .stepper .st.active .dot{border-color:var(--ink);color:var(--ink);box-shadow:0 0 0 4px var(--gold-soft)} .stepper .st.active{color:var(--ink)} .stepper .sep{width:52px;height:2px;background:var(--line);margin:0 14px} .stepper .sep.done{background:var(--gold)} /* loading page */ .loadwrap{min-height:calc(100vh - 70px);display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;padding:50px 20px;background:radial-gradient(800px 400px at 50% 0,var(--gold-soft),transparent 60%)} .loadart{width:300px;max-width:78vw;aspect-ratio:3/4;border-radius:18px;overflow:hidden;position:relative; box-shadow:0 0 0 12px #f4e6c4,0 0 0 15px var(--gold),var(--shadow-lg);margin-bottom:30px} .loadart img{width:100%;height:100%;object-fit:cover;filter:saturate(.55) contrast(1.05);transition:filter 1s} .loadart.rev img{filter:none} .loadart .sheen{position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55),transparent 65%);animation:sheen 1.9s linear infinite} @keyframes sheen{to{transform:translateX(100%)}} .loadart .brushline{position:absolute;left:0;right:0;height:34%;background:linear-gradient(180deg,transparent,rgba(212,169,74,.35),transparent);animation:scan 1.6s linear infinite} .loadbar{width:min(420px,80vw);height:8px;background:var(--line);border-radius:8px;overflow:hidden;margin:4px 0 24px} .loadbar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-2),var(--gold));transition:width .4s} .phases{display:flex;flex-direction:column;gap:12px;text-align:left;min-width:min(340px,86vw)} .phase{display:flex;align-items:center;gap:12px;color:var(--muted);font-weight:600;transition:.3s;opacity:.5} .phase.on{color:var(--ink);opacity:1}.phase.done{opacity:1} .phase .pdot{width:24px;height:24px;border-radius:99px;border:2px solid var(--line);display:flex; align-items:center;justify-content:center;font-size:12px;flex:0 0 auto;transition:.3s} .phase.on .pdot{border-color:var(--gold);animation:pulse2 1.2s infinite} .phase.done .pdot{background:var(--gold);border-color:var(--gold);color:#fff} @keyframes pulse2{0%{box-shadow:0 0 0 0 rgba(184,134,47,.4)}100%{box-shadow:0 0 0 8px rgba(184,134,47,0)}} /* format cards + built-to-last + sticky bar (customize) */ .fmt{display:grid;grid-template-columns:1fr 1fr;gap:12px} .fmt .f{border:1px solid var(--line);border-radius:12px;padding:16px;cursor:pointer;text-align:center;font-weight:700;background:#fff;transition:.15s} .fmt .f.on{border:2px solid #151515;box-shadow:none;padding:15px} .fmt .f small{display:block;color:var(--muted);font-weight:500;margin-top:3px;font-size:12px} .best{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--gold);color:#fff;font-size:10px;font-weight:800;padding:3px 9px;border-radius:999px;letter-spacing:.3px;white-space:nowrap} .chip.size.on{color:#151515}.chip.size.on s{color:var(--muted)} .chip.size{position:relative;text-align:center;min-width:96px} .chip.size s{display:block;color:var(--muted);font-size:11px;font-weight:400} .built{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .built .b{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)} .built .b img{aspect-ratio:4/3;object-fit:cover;width:100%} .built .b .txt{padding:16px}.built .b h3{font-size:17px;margin-bottom:4px} .covered{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center} .covered .c .ic{font-size:26px}.covered .c b{display:block;margin:8px 0 3px} .stickybar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:#151515;color:#fff; transform:translateY(100%);transition:.4s var(--ease);box-shadow:0 -10px 30px rgba(0,0,0,.2)} .stickybar.show{transform:none} .stickybar .wrap{display:flex;align-items:center;justify-content:space-between;height:72px} .stickybar .info small{color:#b9b0a2;display:block;font-size:12px} /* the bar's button must stand out on the dark bar (owner, 2026-08-19): white with black text */ .stickybar .btn,.stickybar .btn.gold{background:#fff;color:#151515;border-color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.35)} .stickybar .btn:hover{background:#f3efe6;color:#000} @media(max-width:860px){ .built,.covered{grid-template-columns:1fr 1fr} .stepper .sep{width:30px;margin:0 8px}.stepper .st{font-size:12.5px} .hero-grid,.cz{grid-template-columns:1fr} .steps,.tgrid{grid-template-columns:1fr} .stats{grid-template-columns:1fr 1fr} .band,.foot .cols{grid-template-columns:1fr;gap:20px;text-align:center} .band h2{text-align:center}.band .g-list{justify-content:center} .nav .links{display:none} .cz .stage{position:relative;top:0} .section{padding:52px 0} } /* ===== mobile polish ===== */ @media(max-width:640px){ .wrap{padding:0 16px} .pagepad{padding:24px 0 60px} .section{padding:44px 0} .section .sub{font-size:15px;margin-bottom:26px} .nav .wrap{height:42px} /* phones: thinner header too (owner, 2026-08-20) */ .nav .brand img{height:26px!important} .nav .cart{padding:5px 11px;font-size:12.5px} /* hero */ .hero{padding:30px 0 22px} .hero-grid{gap:28px} .hero h1{font-size:36px} .hero .lead{font-size:16.5px} .cta-row{flex-direction:column;align-items:stretch} .cta-row .btn{width:100%} .hero .trust{flex-wrap:wrap;font-size:13px} .art{margin:0 6px} .art .frame{animation:none} .art .badge{left:6px;bottom:12px;padding:10px 12px;animation:none} .art .badge b{font-size:12.5px} .art .live{right:6px;top:10px;font-size:11px;padding:6px 10px} /* stepper */ .stepper{margin-bottom:20px} .stepper .st{font-size:11px;gap:5px} .stepper .st .dot{width:22px;height:22px;font-size:11px;border-width:1.5px} .stepper .sep{width:14px;margin:0 5px} /* buttons + type */ .btn.lg{padding:16px 22px;font-size:16px} .price{font-size:28px} .marquee .track{gap:34px;font-size:12.5px} /* uploader */ .up{padding:26px 16px 22px} .up .t{font-size:18px} .up .ex span{font-size:11.5px} .twin{grid-template-columns:1fr} /* customize */ .cz{gap:26px} .frameo{border-width:12px} .frameo::before{inset:-12px} .fmt{grid-template-columns:1fr} .chip{padding:10px 13px;font-size:13.5px} .chip.size{min-width:84px} .opt-row{margin-bottom:16px} .trustrow{gap:10px;font-size:12px} .urgency{font-size:13px} /* loading page */ .loadwrap{padding:34px 14px} .loadart{width:230px;margin-bottom:22px} .loadwrap h1{font-size:24px!important} .phases{min-width:0;width:100%;max-width:340px} .phase{font-size:14px} /* carousels/cards */ .rmini{flex:0 0 260px;width:260px;padding:16px} .gallery{gap:12px} .gallery .gcard{width:64vw;max-width:260px} .stats{gap:14px} .band{padding:26px 18px} .band h2{font-size:24px} .covered{gap:14px} .built{grid-template-columns:1fr} .faq summary{font-size:15px} /* sticky bar */ .stickybar .wrap{height:auto;padding:10px 0;gap:10px} .stickybar .info b{font-size:13px} .stickybar .info small{font-size:10.5px} .stickybar .btn{padding:12px 16px;font-size:14px;white-space:nowrap} /* cart */ .cart-row{flex-wrap:wrap} .cart-row img{width:72px} .foot{padding:40px 0 24px} .foot .bar{flex-direction:column;gap:6px;text-align:center} } /* ===== icon system + visual steps + payment chips ===== */ .ico{vertical-align:-3px;margin-right:6px;color:var(--gold);flex:0 0 auto} .marquee .track span{display:inline-flex;align-items:center} .trustrow span,.band .g-list span{display:inline-flex;align-items:center;gap:2px} .urgency{display:flex;align-items:center} .fmt .f .ico{margin-right:4px} .vsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .vstep{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)} .vstep .vimg{position:relative;overflow:hidden} .vstep .vimg img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:.5s var(--ease)} .vstep:hover .vimg img{transform:scale(1.05)} .vstep .vtag{position:absolute;left:12px;bottom:12px;background:rgba(20,16,12,.72);color:#fff; font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;backdrop-filter:blur(4px)} .vstep .vtxt{padding:20px 22px 22px} .vstep .vnum{display:inline-block;color:var(--gold);font-weight:800;font-size:17px; letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px} .vstep h3{font-size:26px;margin:0 0 7px} .vstep p{margin:0;font-size:17px} .cic{width:52px;height:52px;border-radius:999px;background:var(--gold-soft);display:flex; align-items:center;justify-content:center;margin:0 auto 4px} .cic .ico{margin:0;width:24px;height:24px} .paychips{display:flex;gap:6px;justify-content:center;flex-wrap:nowrap;margin-top:12px} .paychips span{border:1px solid var(--line);border-radius:8px;padding:6px 7px;background:#fff; display:inline-flex;align-items:center;justify-content:center;height:30px;min-width:0} .paychips svg{display:block;max-width:100%;height:auto} @media(max-width:640px){ .vsteps{grid-template-columns:1fr} } /* mobile sticky bar — compact single row */ @media(max-width:640px){ .stickybar .wrap{height:64px;padding:0 14px;gap:12px;flex-wrap:nowrap} .stickybar .info{min-width:0;flex:1} .stickybar .info b{font-size:12.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .stickybar .info small{display:none} .stickybar .btn{flex:0 0 auto;padding:12px 18px;font-size:14.5px;border-radius:12px} } /* refined marquee labels */ .marquee{padding:14px 0;background:transparent;border-color:var(--line)} .mlabel{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line); border-radius:999px;padding:9px 18px;font-size:12.5px;font-weight:700;color:var(--ink2); letter-spacing:.06em;text-transform:uppercase;box-shadow:0 2px 10px rgba(40,30,10,.05)} .mlabel .ico{margin-right:0} .marquee .track{gap:14px} /* press strip */ .press{padding:44px 0 30px;border-top:1px solid var(--line);background:#fff} .press .eyebrow{margin-bottom:20px} .ptrack-wrap{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .ptrack{display:flex;align-items:center;gap:64px;width:max-content;animation:scrollx 36s linear infinite} .ptrack img{height:24px;width:auto;filter:grayscale(1) brightness(.35) opacity(.55);transition:.2s} .ptrack img:hover{filter:grayscale(0) brightness(1) opacity(1)} @media(max-width:640px){.ptrack{gap:40px}.ptrack img{height:19px}.mlabel{padding:8px 14px;font-size:11px}} .press.herostrip{padding:26px 0 22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .press.herostrip .eyebrow{margin-bottom:16px} /* trustpilot widget */ .tp{display:flex;align-items:center;gap:12px;margin-top:2px} .tp-stars{display:flex;gap:3px} .tp-box{width:26px;height:26px;background:#00b67a;display:flex;align-items:center;justify-content:center} .tp-box.part{background:linear-gradient(90deg,#00b67a 70%,#d5d8dc 70%)} .tp-meta{display:flex;flex-direction:column;line-height:1.25} .tp-name{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:14px;color:var(--ink)} .tp-score{font-size:12.5px;color:var(--muted)} .tp-score b{color:var(--ink)} @media(max-width:640px){.tp-box{width:22px;height:22px}} /* frame swatch cards */ .fchips{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .fcard{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff; cursor:pointer;text-align:center;transition:.15s} .fcard:hover{border-color:#151515} .fcard img{width:100%;height:74px;object-fit:cover;display:block} .fcard .ft{padding:10px 6px 12px} .fcard .ft b{display:block;font-size:14.5px;font-weight:600} .fcard .ft small{color:var(--ink);font-weight:600;font-size:12.5px} /* frame prices in black (owner 2026-09-10) */ /* selected frame must be unmistakable (50+ customers): gold ring + filled label with a check */ .fcard.on{border:2px solid #b8862f;box-shadow:0 0 0 3px rgba(184,134,47,.28)} .fcard.on .ft{background:#b8862f} .fcard.on .ft b{color:#fff} .fcard.on .ft b::before{content:"✓ "} .fcard.on .ft small{color:var(--ink)} .fstar{position:absolute;top:8px;left:8px;width:26px;height:26px;border-radius:999px;background:#c9a54a; color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px} @media(max-width:640px){.fchips{grid-template-columns:1fr 1fr}} /* readability bump (60+ friendly) */ body{font-size:16.5px} .hero .lead{font-size:20px;line-height:1.6} .btn.lg{font-size:18px;padding:18px 42px} .muted{color:#6f6b63} .faq summary{font-size:16.5px} .step p,.vstep p{font-size:17px} /* collection grid */ .dgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 20px} .dcard{display:block;text-align:center;transition:.2s var(--ease)} .dcard:hover{transform:translateY(-4px)} /* Cards are photographed canvases now: the framed-on-wall look (frame, float gap, wall, shadow) is BAKED into static/m_.jpg by scripts/make_mockups.py. The CSS stays out of the way — no painted-on frame, ever again. */ .dframe{padding:0;border-radius:0;background:none;box-shadow:none} .dframe img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;background:#f4f2ed} .dframe.big{max-width:520px;padding:0;box-shadow:none} .dmeta{padding:12px 4px 0;display:flex;flex-direction:column;gap:2px} .dmeta b{font-size:15.5px} .dmeta small{font-size:12.5px} @media(max-width:900px){.dgrid{grid-template-columns:repeat(2,1fr);gap:20px 14px}} /* preview action buttons + modals */ .stage{position:relative} .pacts{position:absolute;left:0;right:0;bottom:74px;display:flex;gap:10px;justify-content:center;z-index:5} .pact{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line); border-radius:999px;padding:11px 20px;font-weight:600;font-size:14.5px;cursor:pointer; box-shadow:0 6px 18px rgba(20,18,12,.18)} .pact:hover{border-color:#151515} .modal{position:fixed;inset:0;background:rgba(20,18,14,.5);backdrop-filter:blur(3px);z-index:120; display:none;align-items:flex-start;justify-content:center;padding:8vh 16px 16px} .modal.open{display:flex} .mbox{background:#fdfcf8;border-radius:16px;max-width:560px;width:100%;box-shadow:0 30px 80px rgba(0,0,0,.3);overflow:hidden} .mhead{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#f2f0ea;font-weight:700} .mhead .x{cursor:pointer;font-size:20px;line-height:1;padding:2px 6px} .mbody{padding:18px 20px 20px} .mopt{display:flex;gap:14px;align-items:center;border:1px solid var(--line);border-radius:12px; padding:16px;cursor:pointer;background:#fff;margin-bottom:12px;transition:.15s} .mopt:hover{border-color:#151515} .mopt b{display:block;font-size:15.5px} .mopt small{color:var(--muted)} .mlabel{display:flex;align-items:center;gap:8px;font-weight:700;margin:2px 0 12px} .swrow{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;margin-bottom:14px} .sw{flex:0 0 128px;position:relative;border-radius:12px;overflow:hidden;cursor:pointer;border:2.5px solid transparent} .sw img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block} .sw span{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);color:#fff;font-size:11.5px; font-weight:600;padding:5px 6px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sw.on{border-color:#19c39c} .sw.on::after{content:"✓";position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:99px; background:#19c39c;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px} .mor{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;font-weight:700;margin:4px 0 12px} .mor::before,.mor::after{content:"";flex:1;height:1px;background:var(--line)} .minput{width:100%;border:1px solid var(--line);border-radius:12px;padding:13px 14px;font:inherit;font-size:14.5px;background:#fff} @media(max-width:640px){.pacts{bottom:60px}.pact{padding:10px 16px;font-size:13.5px}} /* ===== mobile customize: dense layout ===== */ @media(max-width:640px){ .pagepad{padding:16px 0 40px} .cz{gap:14px} .cz h1{font-size:24px!important;margin:6px 0 2px!important} .cz .pill{font-size:11px;padding:5px 10px} .tp{gap:8px}.tp-box{width:19px;height:19px}.tp-box svg{width:12px;height:12px} .tp-name{font-size:12.5px}.tp-score{font-size:11px} /* framed preview tighter */ .frameo{border-width:9px}.frameo::before{inset:-9px} .cz .stage p{margin-top:8px!important;font-size:11.5px!important} .pacts{bottom:44px;gap:8px}.pact{padding:8px 14px;font-size:12.5px} .stepper{flex-wrap:nowrap;gap:0;margin-bottom:12px} .stepper .st{font-size:11px;white-space:nowrap} .stepper .sep{width:16px;margin:0 4px} .stepper .dot{width:17px;height:17px;font-size:10px} .stage p.center{margin-top:10px!important;font-size:12px!important} /* option rows */ .cz div[style*="margin-top:26px"]{margin-top:10px!important} .opt-row{margin:0 0 12px} .opt-row label{margin-bottom:7px;font-size:14.5px} .chips{gap:7px} .chip{padding:8px 12px;font-size:13px;border-radius:9px} .chip.on{padding:7px 11px} .chip.size{flex:1;min-width:0;padding:7px 4px} .chip.size s{font-size:10.5px} .best{font-size:8.5px;padding:2px 7px;top:-8px} /* format: two compact cards side by side */ .fmt{grid-template-columns:1fr 1fr;gap:8px} .fmt .f{padding:10px 6px;font-size:13.5px;border-radius:10px} .fmt .f.on{padding:9px 5px} .fmt .f small{font-size:10px;margin-top:2px;line-height:1.3} .fmt .f .ico{width:14px;height:14px} /* frame swatches: 4 across, small */ .fchips{grid-template-columns:repeat(4,1fr);gap:7px} .fcard img{height:38px} .fcard .ft{padding:6px 2px 8px} .fcard .ft b{font-size:10.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fcard .ft small{font-size:9.5px} .fcard.on{border-width:2px;box-shadow:0 0 0 2px rgba(201,165,74,.15)} .fstar{width:18px;height:18px;font-size:10px;top:5px;left:5px} /* price + cta */ .price{font-size:24px;margin:2px 0 0} .price s{font-size:14px} /* phones: same line as the price, just slightly smaller (owner 2026-08-28) */ .save{font-size:12px;padding:6px 11px;margin-left:8px;gap:6px} .save .tk{width:14px;height:14px;font-size:9px;flex:0 0 14px} .urgency{font-size:11.5px;margin:4px 0 10px} .urgency .ico{width:13px;height:13px} .cz .btn.lg{padding:14px 20px;font-size:15.5px} .trustrow{gap:7px 12px;font-size:11px;margin-top:10px} .trustrow .ico{width:13px;height:13px} } /* ===== design corner tags + multi-upload ===== */ .dframe{position:relative} .dtag{position:absolute;top:10px;left:10px;background:rgba(21,21,21,.82);color:#fff; font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase; padding:4px 9px;border-radius:999px;pointer-events:none;backdrop-filter:blur(2px)} .dframe.big .dtag{top:16px;left:16px;font-size:12px;padding:5px 11px} .up.compact{padding:12px 16px;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 12px;text-align:left;justify-content:flex-start} .up.compact .ring{margin:0;flex:none} .up.compact .t{margin:0;font-size:14.5px} .up.compact .s{margin:0;font-size:12px} .up.compact .ring{width:38px;height:38px;min-width:38px;min-height:38px} .up.compact .s{flex-basis:100%;padding-left:50px} /* ===== collection filters ===== */ .filters{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 26px} .fbtn{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px; padding:9px 18px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit; transition:border-color .15s,background .15s} .fbtn:hover{border-color:#9a958c} .fbtn.on{background:#1a1a1a;border-color:#1a1a1a;color:#fff} .dbest{position:absolute;bottom:10px;left:10px;background:var(--gold-soft,#f4e9cf);color:#7a5b16; border:1px solid #e0cf9e;font-size:10.5px;font-weight:800;letter-spacing:.04em; padding:3px 8px;border-radius:999px;pointer-events:none} @media(max-width:640px){ .filters{gap:6px;margin-bottom:18px} .fbtn{padding:8px 13px;font-size:13px} } /* ===== hero v2: full-bleed image ===== */ .hero2{position:relative;overflow:hidden;min-height:520px;display:flex;align-items:flex-end} .hero2-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%} .hero2-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,13,10,.18) 0%,rgba(15,13,10,.32) 45%,rgba(15,13,10,.82) 100%)} .hero2-inner{position:relative;z-index:2;width:100%;padding-top:60px;padding-bottom:34px;color:#fff;text-align:center} .hero2-inner h1{color:#fff;font-size:clamp(30px,5vw,52px);margin:14px 0 8px;text-shadow:0 2px 18px rgba(0,0,0,.45)} .hero2-inner h1 em{color:#e8c979} .hero2-inner .lead{color:#f2ede4;font-size:clamp(15px,2vw,18px);margin:0 auto 18px;max-width:46ch;text-shadow:0 1px 10px rgba(0,0,0,.5)} .pill.glow{background:transparent;border:0;box-shadow:none;padding:0; color:#e8c979;font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase; text-shadow:0 1px 8px rgba(0,0,0,.5)} .hero2-cta{display:inline-block;min-width:min(420px,88%)} .hero2-trust{margin-top:12px;font-size:13.5px;color:#e9e2d4} .hero2-trust .tstars{color:#e8c979;letter-spacing:2px} @media(max-width:640px){ .hero2{min-height:72vh} .hero2-inner{padding-bottom:26px} } /* hero CTA: gold, stands out on the dark hero */ .btn.hero2-cta{background:linear-gradient(180deg,#f0d48a,#e0b45a);color:#241c08; box-shadow:0 6px 22px rgba(224,180,90,.35),inset 0 1px 0 rgba(255,255,255,.5); font-weight:800} .btn.hero2-cta:hover{background:linear-gradient(180deg,#f4dc9d,#e6bd67)} /* ===== hero: split layout on desktop, full-bleed image stays mobile-only ===== */ .hero2-art{display:none} @media(min-width:901px){ .hero2{min-height:0;align-items:center; background:radial-gradient(120% 160% at 78% 30%,#3a2d1e 0%,#241c12 48%,#15100a 100%)} .hero2-img,.hero2-shade{display:none} .hero2-inner{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:56px; text-align:left;padding:76px 24px 70px;max-width:1100px} .hero2-inner h1{font-size:clamp(38px,3.6vw,54px);margin:16px 0 12px} .hero2-inner .lead{margin:0 0 26px;max-width:44ch} .hero2-cta{min-width:0;padding:16px 34px} .hero2-trust{margin-top:14px} .hero2-art{display:block} .hero2-art .dframe.big{max-width:430px;margin-left:auto;transform:rotate(1.2deg); box-shadow:0 30px 60px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,232,200,.25), inset 4px 4px 8px rgba(255,225,185,.28),inset -4px -4px 8px rgba(30,18,8,.5)} } /* ===== before/after grid ===== */ .bagrid{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory; padding:4px 4px 18px;-webkit-overflow-scrolling:touch;scrollbar-width:thin; scrollbar-color:var(--line) transparent} .bagrid::-webkit-scrollbar{height:8px} .bagrid::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px} .bagrid .ba{flex:0 0 auto;max-width:none;margin:0;width:min(78vw,320px);scroll-snap-align:start} .ba .baname{position:absolute;top:12px;left:50%;transform:translateX(-50%);white-space:nowrap; background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px} @media(max-width:900px){.bagrid{grid-template-columns:1fr;max-width:520px}} /* ===== announcement bar ===== */ .annbar{background:#1a1a1a;color:#fff;text-align:center;padding:9px 16px; font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase} .annbar span{display:inline-block;transition:opacity .3s,transform .3s} .annbar span.out{opacity:0;transform:translateY(-6px)} @media(max-width:640px){.annbar{font-size:11px;padding:8px 12px;letter-spacing:.08em}} /* ===== announcement countdown ===== */ /* thinner bar (owner, 2026-08-19): one line of text, a compact countdown */ .annbar.cd{display:flex;align-items:center;justify-content:center;gap:16px;padding:5px 14px} .ann-txt{text-align:right;white-space:nowrap} .ann-txt b{display:inline;font-size:12px;letter-spacing:.12em} .ann-txt b::after{content:" · ";color:#8a857b;letter-spacing:0} .ann-txt span{display:inline;font-size:10.5px;letter-spacing:.08em;color:#d9d4c9;font-weight:600} .cdown{display:flex;align-items:center;gap:4px;background:#fff;color:#1a1a1a;border-radius:5px;padding:3px 8px} /* ≤400px: the nowrap text + countdown ran 380px wide in a 375px viewport and clipped "SUMMER SALE" to "UMMER SALE" (audit 2026-08-31) — tighten gap, padding and tracking, and drop the word WORLDWIDE (.ww, emitted by site.js) so even the longer "BACK TO SCHOOL" campaign name fits down to 360px-wide phones (measured 390px overflowing 375 with WORLDWIDE shown). */ .ann-txt i{font-style:normal} @media(max-width:400px){ .annbar.cd{gap:8px;padding:5px 8px} .ann-txt b{letter-spacing:.06em} .ann-txt span{letter-spacing:.04em} .ann-txt .ww{display:none} } .cdown i{font-style:normal;font-weight:800;font-size:12px;line-height:1;transform:translateY(-3px)} .cd-cell{text-align:center;min-width:24px} .cd-cell b{display:block;font-size:12.5px;line-height:1;font-variant-numeric:tabular-nums} .cd-cell small{display:block;font-size:7.5px;letter-spacing:.06em;color:#8a8578;margin-top:1px} @media(max-width:640px){ .annbar.cd{gap:10px;padding:4px 8px} .ann-txt b{font-size:10.5px;letter-spacing:.08em}.ann-txt span{font-size:9px;letter-spacing:.04em} .ann-txt b::after{content:" · "} .cdown{padding:2px 6px;gap:3px}.cd-cell{min-width:20px}.cd-cell b{font-size:11px}.cd-cell small{font-size:7px} } /* ===== product/design page template (F&T style) ===== */ .dpage{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start} .dhero{position:relative} .dhero img{width:100%;height:auto;border-radius:14px;display:block; box-shadow:var(--shadow)} /* design page: the hero sits in the REAL photographed-oak .frameo (same mitred border-image the customize preview uses — owner rejected the CSS gradient frame as fake, 2026-08-17) */ .dhero .frameo{display:block} .dhero .frameo .matt img{width:100%;height:auto;display:block;border-radius:1px} .dhero .dtag{top:12px;left:12px} /* size-guide: HTML/CSS frames over an EMPTY room photo — the portrait always fits perfectly by construction; the pill/ribbon are sticker layers on top. Frame widths are true to the print sizes against the 90in sofa (~0.84%/in). */ .sgfr{position:absolute;bottom:48%;background:#17150f;padding:.45%; box-shadow:0 14px 28px -10px rgba(30,22,12,.55)} .sgfr .sgp{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;background:#eee} /* the wall mockup mirrors the customer's frame choice (set by customize.html) */ #sizeMock.sg-none .sgfr{padding:0;background:none} #sizeMock.sg-oak .sgfr{background:url(/static/sw_oak.jpg) center/cover} #sizeMock.sg-darkwood .sgfr{background:url(/static/sw_darkwood.jpg) center/cover} #sizeMock.sg-black .sgfr{background:url(/static/sw_black.jpg) center/cover} .sgl{position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%); text-align:center;font-size:clamp(8px,1.45vw,12.5px);line-height:1.4; color:#151515;font-weight:600;white-space:nowrap} .sgl span{opacity:.85;font-weight:400;font-size:.85em} .sgstk{position:absolute;pointer-events:none} .sgline{position:absolute;left:13%;right:12.5%;top:73.5%; border-top:2px dashed rgba(21,21,21,.7)} .sgline span{position:absolute;left:50%;top:-1.8em;transform:translateX(-50%); font-size:clamp(8px,1.3vw,11.5px);letter-spacing:.05em;color:#151515; font-weight:600;white-space:nowrap} .dinfo .rline{display:flex;align-items:center;gap:10px;margin-bottom:6px} .rstars{height:18px;width:calc(18px * 5 * 1.14);background-size:calc(18px * 1.14) 18px} .rcount{color:var(--ink);font-weight:600;font-size:15px;text-decoration:underline;text-underline-offset:3px} .dinfo h1{font-size:clamp(32px,4vw,46px);margin:0 0 18px} .dinfo .up{border:1.5px dashed #b9b4ab;border-radius:14px;background:#fff} .dinfo .up:hover{border-color:#8d877c} .ticks{display:flex;gap:22px;flex-wrap:wrap;margin:16px 0 0;font-size:14.5px;font-weight:600} .ticks i{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px; border-radius:50%;background:#1a1a1a;color:#fff;font-size:10px;font-style:normal;margin-right:6px} .storylbl{margin:28px 0 8px;font-size:13px;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:#8d877c} .dstory{margin:0;max-width:56ch;font-size:16.5px;line-height:1.65;color:#3d3a35} .wchips{display:flex;gap:8px;flex-wrap:wrap} .wchip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line); border-radius:999px;padding:8px 14px;font-size:14px;font-weight:600;background:#fff;color:var(--ink)} .wchip svg{opacity:.85} @media(max-width:900px){ .dpage{grid-template-columns:1fr;gap:22px} .dinfo h1{font-size:30px;margin-bottom:12px} .ticks{gap:12px;font-size:13px} .dstory{font-size:15px} } /* extra angles of the same pet (design page) — refs, not extra subjects */ .angles{margin-top:14px;border:1px dashed var(--line);border-radius:var(--radius);padding:14px 14px 12px;background:#fff} .angles .ahead{font-weight:800;font-size:14.5px;display:flex;align-items:center;gap:8px} .angles .aopt{font-weight:600;font-size:11px;color:var(--ink2);border:1px solid var(--line);border-radius:999px;padding:1px 7px} .angles .anote{font-size:12.5px;color:var(--ink2);margin:5px 0 10px;line-height:1.45} .arow{display:flex;flex-wrap:wrap;gap:9px} .athumb{position:relative;width:66px;height:66px;border-radius:10px;overflow:hidden;border:1px solid var(--line)} .athumb img{width:100%;height:100%;object-fit:cover;display:block} .athumb .ax{position:absolute;top:2px;right:2px;width:19px;height:19px;border:0;border-radius:999px; background:rgba(0,0,0,.62);color:#fff;font-size:13px;line-height:19px;padding:0;cursor:pointer} .aadd{width:66px;height:66px;border:1px dashed var(--line);border-radius:10px;display:flex; flex-direction:column;align-items:center;justify-content:center;cursor:pointer;background:var(--paper)} .aadd input{display:none} .aadd span{font-size:19px;line-height:1;color:var(--ink2)} .aadd em{font-style:normal;font-size:9.5px;color:var(--ink2);margin-top:3px;text-align:center;padding:0 3px} .afull{font-size:12px;color:var(--ink2);align-self:center} ==================================================== Mobile audit fixes. These are LAST on purpose: this file has grown by appending, so several earlier mobile rules were being silently beaten by later desktop rules. Each fix below states which collision it resolves. ============================================================ */ /* A2: .btn.lg readability bump at ~line 483 sits outside any media query and beat the mobile rule, leaving desktop-sized CTAs on phones (and pushing the Edit modal's button off-screen). */ @media(max-width:640px){ .btn.lg{font-size:16px;padding:15px 22px} .hero2-cta{min-width:min(420px,92%)} /* A5: same pattern — later desktop rules killed these mobile sizes */ .hero .lead{font-size:16.5px;line-height:1.55} .faq summary{font-size:15.5px} /* A4: earlier rule was .stepper .st .dot (0,0,3,0) and beat the newer 17px rule, making the step row wider than the screen and scrolling /customize and /cart sideways. Match specificity. */ .stepper .st .dot{width:17px;height:17px;font-size:10px;border-width:1.5px} .stepper{flex-wrap:nowrap;gap:0;overflow:hidden} /* C: tap targets — all of these were under Apple's 44px guidance */ .mhead .x{padding:10px 14px;font-size:22px;line-height:1} .pact{padding:11px 16px;font-size:13px} .fbtn{padding:11px 15px;font-size:13.5px} .nav .cart{padding:10px 14px} .athumb .ax{width:26px;height:26px;font-size:15px;line-height:26px} .cart-row .rm{display:inline-block;padding:10px 4px;font-size:13px} /* D: nothing customer-facing should sit below 12px on a phone — this contradicted the deliberate 60+ readability decision */ .cd-cell small{font-size:10.5px} .ann-txt span{font-size:11.5px} .best{font-size:10px;padding:2px 8px;top:-9px} .fcard .ft b{font-size:12px} .fcard .ft small{font-size:11.5px} .chip.size s{font-size:12px} .fmt .f small{font-size:12px} .trustrow{font-size:12px} .urgency{font-size:12.5px} .tp-score{font-size:12px} .cz .pill{font-size:12px} /* B3: five payment badges were being squeezed ~6% narrower than drawn */ .paychips{flex-wrap:wrap} } /* A1 follow-up: keep the footer credit row a normal auto-height row */ .foot .bar{height:auto;background:none;overflow:visible;border-radius:0} .foot .bar a{color:inherit;text-decoration:underline} /* A3: the modal field labels share a class with the marquee trust pills, so they inherited a white pill, a border, a shadow and UPPERCASE. */ .mbox .mlabel{background:none;border:0;box-shadow:none;padding:0; text-transform:none;letter-spacing:0;font-size:14px;display:flex; align-items:center;gap:8px;font-weight:700;margin:2px 0 12px} /* G: the modals are position:fixed with no scrolling, so on a phone the Edit modal's "Create new version" button was unreachable below the fold. */ .modal{overflow-y:auto} .mbox{max-height:88vh;display:flex;flex-direction:column} .mbox .mbody{overflow-y:auto} ======= /* brush style picker (design page) */ .brushrow{display:flex;gap:10px;margin-top:8px} .brush{flex:1;border:2px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;background:#fff;transition:border-color .15s, box-shadow .15s} .brush img{width:100%;aspect-ratio:1;object-fit:cover;display:block} .brush .bl{font-size:12px;font-weight:800;text-align:center;padding:6px 4px} .brush.sel{border-color:#b8862f;box-shadow:0 0 0 3px rgba(184,134,47,.18)} /* /* FAQ group labels (2026-08-10) — appended last so nothing above overrides them */ .faq .faqg{font-family:Barlow,Inter,sans-serif;font-style:italic;font-weight:600; font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold); margin:30px 0 12px;padding:0 4px} .faq .faqg:first-child{margin-top:0} .faq details a{color:inherit;text-decoration:underline;text-underline-offset:3px} @media(max-width:560px){.faq .faqg{font-size:13.5px;margin:24px 0 10px}} /* ===== full-bleed scroll rows ===== The styles + before/after strips break out of the 1140px content column so they run edge-to-edge and reveal more cards. First card stays aligned with the section heading via the same left inset the .wrap uses. */ .section .gallery, .section .bagrid, .section .tgrid.tscroll, .dsec .tgrid.tscroll{ width:100vw; margin-left:calc(50% - 50vw); padding-left:24px; padding-right:24px; scroll-padding-left:24px; box-sizing:border-box; } /* ---- dual-take picker (customize) ---- */ .takes{margin:14px auto 0;max-width:520px} .takes-h{display:none} /* the 'Your paintings · N earlier paintings' line is gone (owner, 2026-08-19: too big a gap) */ .takes-row{display:flex;gap:10px;justify-content:center} .take{position:relative;flex:0 1 150px;aspect-ratio:3/4;border:2px solid var(--line);border-radius:10px;overflow:hidden;background:#efece6;padding:0;cursor:pointer;transition:border-color .2s,transform .2s} .take img{width:100%;height:100%;object-fit:cover;display:block} /* the soft red studio watermark every preview wears (pattern published by canvas3d on :root) */ .take::before{content:"";position:absolute;inset:0;z-index:1;background:var(--c3d-wm-img) center/92% auto repeat;mix-blend-mode:multiply;opacity:.6;pointer-events:none} .take.on{border-color:#b8862f;border-width:3px;box-shadow:0 0 0 3px #fff,0 0 0 6px #b8862f,0 6px 16px rgba(184,134,47,.35);transform:scale(1.04)} .take.on:hover{transform:scale(1.04)} /* the chosen painting wears a gold check (owner, 2026-08-19: the thin ring was easy to miss) */ .take.on::after{content:"✓";position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:#b8862f;color:#fff;font:700 14px/22px Inter,sans-serif;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.35)} .take:hover{transform:translateY(-2px)} .take .tk-lbl{position:absolute;left:0;right:0;bottom:0;padding:6px 4px;font-size:12px;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.6));text-align:center} .take.wait{cursor:default;display:flex;align-items:center;justify-content:center} .take.wait .tk-lbl{color:#4a4a4a;background:none;position:absolute;bottom:8px;font-weight:500} .tk-shim{position:absolute;inset:0;background:linear-gradient(110deg,#efece6 30%,#f8f6f1 50%,#efece6 70%);background-size:200% 100%;animation:tkshim 1.6s linear infinite} @keyframes tkshim{from{background-position:200% 0}to{background-position:-200% 0}} @media(max-width:480px){.take{flex-basis:44%}} /* Reviews as a single horizontal scrolling row (advertorials in one line) */ .tgrid.tscroll{display:flex;overflow-x:auto;gap:18px;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;padding:4px 2px 14px;scrollbar-width:thin} .tgrid.tscroll .tcard{flex:0 0 clamp(260px,78vw,320px);scroll-snap-align:start; opacity:1;transform:none} .tgrid.tscroll::-webkit-scrollbar{height:8px} .tgrid.tscroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px} @media(min-width:901px){.tgrid.tscroll{grid-template-columns:none}} /* design page: review strip + quality row (labels reuse .eyebrow) */ .dsec{margin:58px 0 0} .dsec .eyebrow{margin-bottom:16px} /* dual-take: when the takes strip is visible the Retry/Edit pills must NOT float over it (their absolute bottom:74px landed exactly on the thumbnails, so 'pick your favourite' taps hit Retry - audit 2026-08-17). Flow them below the strip instead. */ .stage.has-takes .pacts{position:static;margin-top:10px} .stage.has-takes .takes{margin-top:4px} /* customize strip: this order's takes + EVERY earlier painting, as a carousel with arrows (owner, 2026-08-19) — one row, swipe or tap the arrows to see the rest */ .takes{max-width:none;min-width:0;max-width:100%} .cz .stage{min-width:0} /* grid item: must be allowed to shrink, or the strip's content width stretches the whole column */ .takes-nav{display:flex;align-items:center;gap:6px;min-width:0;max-width:100%} .takes-row{flex:1 1 auto;min-width:0;display:flex;flex-wrap:nowrap;gap:12px;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:10px 8px;-webkit-overflow-scrolling:touch} .takes-row::-webkit-scrollbar{display:none} .take{flex:0 0 94px;scroll-snap-align:start} .take.prev{flex:0 0 83px;opacity:.92} .take.prev .tk-lbl{font-size:11px;font-weight:500} .tk-arrow{flex:0 0 34px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line,#d5d2cc);background:#fff;color:#2a2a2a;font:400 22px/1 Inter,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 0 2px;transition:opacity .2s;-webkit-tap-highlight-color:transparent} .tk-arrow:disabled{opacity:.25;cursor:default} .takes-nav.noscroll .tk-arrow{display:none} .takes-nav.noscroll .takes-row{justify-content:center} .takes-more{color:#777;font-weight:400} @media(max-width:480px){.take{flex-basis:83px}.take.prev{flex-basis:74px}.take .tk-lbl{font-size:10px;padding:5px 3px}} /* Perf (audit 2026-08-20): the sticky nav's live blur re-blurs on every scroll frame — a known mobile cost. On touch devices (most traffic) a near-opaque solid reads almost identically and costs nothing on scroll. */ @media (hover:none){ .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(250,248,244,.97)} } /* delivery-window line under the CTAs (dates filled by /api/eta) */ .shipline{display:flex;align-items:flex-start;gap:9px;background:#f6f4ef;border:1px solid #e7e4de;border-radius:12px;padding:12px 16px;font-size:14.5px;margin-top:10px} .shipline svg{flex:0 0 auto;color:#1a6b3c;margin-top:1px} .shipline b{font-weight:700;white-space:nowrap} .shipline .shipfree{color:#1a6b3c;font-weight:700} /* phones: a clean two-line strip — no dangling dot, no orphaned wrap */ @media(max-width:640px){ .shipline .shipdot{display:none} .shipline .shipfree{display:block;margin-top:2px} } /* ---- size-guide: tap to enlarge (50+ readability) + fullscreen viewer ---- */ #sizeMock{cursor:zoom-in} .sgzoom{position:absolute;left:10px;top:10px;display:flex;align-items:center;gap:6px; background:rgba(21,21,21,.72);color:#fff;font-size:12.5px;font-weight:600; padding:8px 13px;border-radius:99px;pointer-events:none} .sgzoom svg{display:block} #sgOverlay{position:fixed;inset:0;background:rgba(15,13,10,.97);z-index:2000;display:none;flex-direction:column} #sgOverlay.open{display:flex} .sgo-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;color:#fff} .sgo-bar b{font-size:17px} .sgo-close{background:#fff;color:#151515;border:0;border-radius:99px;font-size:15.5px;font-weight:700; padding:12px 22px;cursor:pointer} .sgo-scroll{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:6px 0 34px} .sgo-fig{position:relative;width:1350px;margin:0 auto;padding:0 14px} .sgo-fig .sgl{font-size:16px} .sgo-fig .sgline span{font-size:14px} #sgOverlay .sg-none .sgfr{padding:0;background:none} #sgOverlay .sg-oak .sgfr{background:url(/static/sw_oak.jpg) center/cover} #sgOverlay .sg-darkwood .sgfr{background:url(/static/sw_darkwood.jpg) center/cover} #sgOverlay .sg-black .sgfr{background:url(/static/sw_black.jpg) center/cover} @media(max-width:640px){ /* cm sub-labels collide between columns on phones; the enlarge view carries them */ .sgl span{display:none} .sgzoom{font-size:11px;padding:7px 11px} } /* ---- one-giant-button uploader (owner's pick, 2026-08-21) ---- */ .up.upbig,.dinfo .up.upbig{border:none;background:none;padding:10px 0 4px;overflow:visible} .up.upbig:hover{border:none;box-shadow:none;transform:none} .upbtn{width:100%;box-sizing:border-box;text-align:center;background:linear-gradient(180deg,#eed188,#dcae52); border-radius:20px;padding:20px 18px;box-shadow:0 12px 26px -10px rgba(184,134,47,.6);transition:.18s var(--ease)} .up.upbig:hover .upbtn{transform:translateY(-2px);box-shadow:0 16px 32px -10px rgba(184,134,47,.72)} .upbtn .t{font-family:'Barlow',sans-serif;font-style:italic;font-weight:700;font-size:20.5px;color:#151515; display:flex;align-items:center;justify-content:center;gap:9px;margin:0} .upbtn .t svg{flex:0 0 auto} .upbtn .s{color:#5c430f;font-weight:600;font-size:13px;margin-top:4px} .up.upbig .priv{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--muted);font-size:12.5px;margin-top:11px} /* filled: the zone becomes a photo tray, the button turns secondary */ .up.upbig.filled,.dinfo .up.upbig.filled{border:1.5px dashed #b9b4ab;border-radius:16px;background:#fff;padding:14px} .up.upbig.filled .upbtn{background:#fff;border:2px solid var(--gold);box-shadow:none;padding:11px 16px} .up.upbig.filled .upbtn .t{font-size:16px} .up.upbig.filled .upbtn .s,.up.upbig.filled .priv{display:none} @media(max-width:640px){ .upbtn .t{font-size:18px} .upbtn{padding:18px 14px} } /* ---- "The Gold Standard" upload (owner's pick 2026-09-02): black pill to upload, compact photo tiles side by side, Paint holds its place ---- */ .up1{position:relative;text-align:center} .up1 input[type=file],.up1>#thumb0{display:none!important} .up1.drag{outline:2.5px dashed var(--gold);outline-offset:6px;border-radius:14px} .up1 .tiles{display:flex;flex-wrap:wrap;gap:14px 18px;justify-content:center;padding:6px 0 0} .up1 .tiles:not(:empty){margin-bottom:14px} .ptile{position:relative;width:92px;display:flex;flex-direction:column;align-items:center;gap:5px;margin:0;padding:0} .ptile img{width:92px;height:92px;object-fit:cover;border-radius:16px;background:#eee;display:block; border:1px solid var(--line);box-shadow:0 6px 14px rgba(45,35,18,.10)} .ptile b{font-family:'Inter',sans-serif;font-size:12.5px;color:var(--ink);line-height:1.2} .ptile .pst{font-size:11.5px;font-weight:700;color:#8a857b;line-height:1.2;min-height:14px} .ptile .pst.ok{color:#268047}.ptile .pst.warn{color:#a06210} .ptile .px{position:absolute;top:-9px;right:-9px;width:26px;height:26px;padding:0;border:1px solid #ddd6ca;border-radius:50%; background:#fff;color:#8d8578;font:600 15px/1 'Inter',sans-serif;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.18);transition:border-color .15s,color .15s} .ptile .px:hover{border-color:#c87870;color:#9b342d} .upl{display:flex;width:100%;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:15px 18px; cursor:pointer;font:700 15.5px/1.2 'Inter',sans-serif;transition:transform .15s ease,box-shadow .15s ease,background .2s,color .2s,border-color .2s} .upl svg{width:19px;height:19px;flex:none} .upl.primary{background:var(--ink);color:#fff;border:1.5px solid var(--ink);box-shadow:0 10px 22px -10px rgba(0,0,0,.5)} .upl.primary:hover{transform:translateY(-1px)} .upl.secondary{background:#fff;color:var(--ink);border:1.5px solid var(--ink)} .upl.secondary:hover{background:#f7f5f0} .upl[disabled]{background:#fff;color:#268047;border-color:var(--line);cursor:default;box-shadow:none;transform:none} .upl-sub{text-align:center;color:var(--muted);font-size:12.5px;margin-top:9px;min-height:18px} .upl-warn{margin:10px auto 0;max-width:420px;padding:9px 14px;border-radius:12px;background:#fbe4e4;border:1px solid #efb8b8;color:#a11d1d;font-size:13.5px;font-weight:700;line-height:1.4} .upl-warn.info{background:#f4f1e8;border-color:#e2dccb;color:#5b4a1e} .ptile .pst.warn{color:#b32d2d} .dz-trust{display:flex;gap:18px;justify-content:center;margin-top:12px;color:#5c5340;font-size:13px;font-weight:600;flex-wrap:wrap} .dz-trust span{display:flex;align-items:center;gap:5px} /* ---- the dashed upload BOX (home hero, owner 2026-09-09, "make like this" from a competitor's screenshot): a dashed card on a fine dot pattern, a circled upload icon with a + badge, the title and one hint line; the Trustpilot line (.uf-tp) sits under the widget. Same ids and states as the black pill (primary / secondary / disabled), so upload-first.js drives it unchanged. ---- */ .upl.box,.upl.box.primary,.upl.box.secondary,.upl.box.full{flex-direction:column;gap:0;border-radius:18px;padding:26px 18px 22px; background-color:#fbfaf6;color:var(--ink);border:2px dashed #c6bfb0;box-shadow:none; background-image:radial-gradient(rgba(21,21,21,.11) 1px,transparent 1.3px);background-size:7px 7px} .upl.box.primary:hover,.upl.box.secondary:hover{transform:none;border-color:var(--gold);background-color:#fbf6ea} /* photos live INSIDE the window: room above for a tile's remove badge, the call to action under the tiles */ .upl.box.secondary,.upl.box.full{padding:22px 18px 16px} .upl.box .tiles{width:100%} .upl.box .ubx{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;margin:0;padding:0; background:none;border:0;color:inherit;font:inherit;cursor:pointer;border-radius:12px} .upl.box .ubx:focus-visible{outline:2px solid var(--gold);outline-offset:6px} .upl.box.full{background-image:none;background-color:#f7f5f0;border-style:solid;border-color:var(--line);cursor:default} .upl.box.full .ubx{color:#268047;cursor:default} .upl.box .ubx-ico{position:relative;display:flex;align-items:center;justify-content:center;width:64px;height:64px; border-radius:50%;background:#fff;border:1.5px solid #d8d2c6;box-shadow:0 4px 12px rgba(45,35,18,.10);margin-bottom:10px;color:var(--ink)} .upl.box .ubx-ico svg{width:28px;height:28px} .upl.box .ubx-ico i{position:absolute;top:-4px;right:-6px;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff; font:700 16px/18px 'Inter',sans-serif;font-style:normal;text-align:center;border:2px solid #fbfaf6} .upl.box.secondary .ubx-ico{width:46px;height:46px;margin-bottom:6px} .upl.box.secondary .ubx-ico svg{width:21px;height:21px} .upl.box.secondary .ubx-ico i{width:19px;height:19px;font-size:14px;line-height:15px;top:-3px;right:-5px} .upl.box.full .ubx-ico{display:none} .upl.box .ubx-t{font:800 18px/1.2 'Inter',sans-serif} .upl.box .ubx-s{font:500 13.5px/1.35 'Inter',sans-serif;color:var(--muted)} .up1.uf.drag{outline:none} .up1.uf.drag .upl.box{border-color:var(--gold);background-color:var(--gold-soft)} .uf-tp{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;font-size:14.5px;color:var(--ink2);line-height:1} .uf-tp b{color:var(--ink);font-weight:800;font-size:16px} /* the Paint button waits in place, grey, and turns gold with the first photo */ .btn.gold.off,.btn.gold.off:hover{background:#f6f4ee;border:1.5px solid var(--line);color:#b3ada2;box-shadow:none;cursor:default;transform:none} @media(prefers-reduced-motion:no-preference){ .ptile.pop{animation:tilepop .2s ease-out} @keyframes tilepop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} } /* ===== HERO 3 — compact centered (2026-08-22) — fits above the fold on mobile ===== */ .hero3{background:linear-gradient(180deg,#faf6ee 0%,#f4ecdd 100%);overflow:hidden} .hero3-inner{padding:16px 16px 18px;text-align:center;max-width:980px;margin:0 auto} .hero3-copy{max-width:640px;margin:0 auto} .hero3-copy .pill.glow{color:#b8862f;text-shadow:none;display:inline-block;font-size:11px;margin:0} .hero3 h1{font-family:var(--display);font-style:normal;font-weight:700;color:#151515; font-size:clamp(26px,7vw,42px);line-height:1.05;letter-spacing:0;margin:6px 0 6px;text-shadow:none} .hero3 h1 em{color:#b8862f;font-style:italic;font-weight:700} .hero3 .lead{color:#5c574d;font-size:15px;margin:0 auto 12px;max-width:44ch} .btn.hero3-cta{display:inline-block;width:100%;max-width:420px;padding:13px 26px;font-size:16px; background:linear-gradient(180deg,#eed389,#dcae4f);color:#2a1f06;font-weight:800; box-shadow:0 10px 26px rgba(184,134,47,.35),inset 0 1px 0 rgba(255,255,255,.5)} .btn.hero3-cta:hover{background:linear-gradient(180deg,#f2da97,#e2b656);color:#2a1f06} .hero3-checks{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:10px 0 0; font-size:13px;color:#5c574d;font-weight:600} .hero3-checks b{color:#1a6b3c} .hero3-strip{margin-top:12px;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory; padding:2px 0 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch} .hero3-strip::-webkit-scrollbar{display:none} .hero3-strip img{flex:0 0 auto;width:30vw;max-width:150px;aspect-ratio:3/4;object-fit:cover; border-radius:10px;scroll-snap-align:center;background:#f4f2ed;box-shadow:0 8px 20px rgba(50,38,18,.14)} @media(min-width:901px){ .hero3-inner{padding:34px 24px 30px} .hero3 h1{font-size:clamp(38px,3.6vw,52px)} .hero3 .lead{font-size:18px;margin:0 auto 18px} .hero3-cta{width:auto} .hero3-strip{justify-content:center;flex-wrap:nowrap;overflow-x:visible;margin-top:20px} .hero3-strip img{width:150px} } /* ===== Slide-in cart drawer (shared, owner 2026-09-07) ========================== The Cart link opens this collapsible drawer on EVERY page instead of the full /cart page. site.js injects the markup + logic; customize.html ships its own inline copy of these same classes (which wins there via a later