holding a label and an input. Unscoped, every one of those 13 groups drew a pill AND the input inside it drew its own box, so each field was two nested rounded outlines. The quote dialog already resets this by hand (SA-54); this fixes the cause. */ input.field{width:100%;border:1px solid var(--line);background:rgba(255,255,255,.76);border-radius:999px;padding:14px 18px;outline:none}input.field:focus{border-color:var(--sage)} /* Newsletter modal */ .modal-backdrop{position:fixed;inset:0;background:rgba(34,34,30,.58);z-index:100;display:none;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(2px)} .modal-backdrop.show{display:flex} .newsletter-modal{width:min(650px,100%);border-radius:30px;position:relative;overflow:hidden;padding:46px;background:var(--paper);box-shadow:0 28px 100px rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.65)} .newsletter-modal>*{position:relative;z-index:2}.newsletter-modal h2{font-size:2.75rem;max-width:420px}.newsletter-modal p{max-width:390px;margin:18px 0 22px}.modal-close{position:absolute;right:18px;top:18px;z-index:4;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.9);font-size:1.3rem} .modal-form{display:flex;gap:9px;max-width:450px}.privacy-note{font-size:.72rem;color:var(--muted);margin-top:14px} /* Footer */ .site-footer{padding:46px 0 22px;margin-top:54px;border-top:1px solid var(--line);background:var(--linen)} .footer-grid{display:grid;grid-template-columns:1.25fr repeat(3,.8fr) 1.15fr;gap:34px}.footer-logo{width:170px;margin-bottom:16px}.footer-grid h4{font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;margin:0 0 14px}.footer-grid a,.footer-grid p{font-size:.8rem;color:var(--muted);display:block;margin:0 0 8px}.socials{display:flex;gap:8px;margin-top:14px}.socials a,.socials span{width:32px;height:32px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--ink);font-size:.7rem}.footer-bottom{border-top:1px solid var(--line);margin-top:28px;padding-top:18px;display:flex;justify-content:space-between;gap:20px;font-size:.74rem;color:var(--muted)} /* Interior pages */ .page-hero{padding:56px 0 30px}.page-hero .box{position:relative}.page-hero .box>*{position:relative;z-index:1}.page-hero h1{max-width:760px}.page-hero p{max-width:650px;margin-top:18px;font-size:1.05rem} .category-chips{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0 34px}.chip{border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.55);padding:10px 14px;font-size:.76rem;font-weight:700}.chip:hover{background:var(--sage);color:#fff} .collection-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.collection-card{border-radius:24px;overflow:hidden;background:rgba(255,255,255,.72);border:1px solid var(--line);box-shadow:0 10px 24px rgba(60,55,43,.08)}.collection-card img{width:100%;aspect-ratio:1.35/1;object-fit:cover}.collection-card .pad{padding:16px}.collection-card h3{font-size:1.4rem;margin-bottom:6px}.collection-card p{font-size:.83rem;color:var(--muted);margin:0}.content-panel{border-radius:30px;padding:38px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:30px}.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.info-card{border-radius:24px;padding:26px;background:rgba(255,255,255,.68);border:1px solid var(--line)}.info-card h3{margin:10px 0}.info-card p{color:var(--muted);font-size:.9rem} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-grid .full{grid-column:1/-1}.form-input{width:100%;border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.78);padding:14px 15px;outline:none}.form-input:focus{border-color:var(--sage)}textarea.form-input{min-height:140px;resize:vertical}.form-status{margin-top:10px;font-size:.85rem;color:var(--sage-dark)} /* Visualizer */ .visualizer-main{padding:30px 0 68px}.steps{display:flex;justify-content:center;align-items:center;gap:38px;margin:10px 0 26px}.step{display:flex;align-items:center;gap:10px;min-width:170px}.step-no{width:44px;height:44px;border-radius:50%;background:var(--sage);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.05rem}.step .text b{display:block;font-size:.86rem}.step .text span{font-size:.8rem;color:var(--muted)}.step.active .text span{color:var(--sage-dark);font-weight:700}.step-line{width:80px;height:1px;background:rgba(110,129,80,.45)} .visualizer-panel{border-radius:30px;padding:24px}.preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.preview-box h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.22em;margin:0 0 12px}.preview-img{height:330px;border-radius:22px;overflow:hidden;position:relative;background:#ddd;border:1px solid var(--line)}.preview-img img,.preview-img canvas{width:100%;height:100%;object-fit:cover;display:block}.preview-meta{padding:12px 0 0}.preview-meta b{display:block;font-size:1.05rem}.preview-meta small{color:var(--muted)}.upload-control{position:absolute;left:12px;bottom:12px}.upload-control input{display:none} .wallpaper-options{display:flex;gap:8px;margin-top:10px}.wallpaper-dot{width:34px;height:34px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);overflow:hidden;padding:0}.wallpaper-dot img{width:100%;height:100%;object-fit:cover}.wallpaper-dot.selected{box-shadow:0 0 0 2px var(--sage)} .generate-panel{margin-top:18px;border-radius:28px;padding:30px;display:grid;grid-template-columns:1.2fr .8fr;gap:26px;align-items:center}.generation-row{display:grid;grid-template-columns:76px 1fr 110px;gap:18px;align-items:center}.progress-ring{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--sage) calc(var(--progress,0)*1%),#ded9cc 0);position:relative;font-weight:800}.progress-ring::after{content:"";position:absolute;inset:8px;background:#f7f2e8;border-radius:50%}.progress-ring span{position:relative;z-index:1}.gen-copy h1,.gen-copy h2{font-size:2.45rem;margin-bottom:10px}.progress-line{height:12px;border-radius:999px;background:#ded9cc;overflow:hidden;margin-top:20px}.progress-line span{display:block;height:100%;width:var(--progress,0%);background:var(--sage);border-radius:999px;transition:.35s}.time-note{font-size:.78rem;color:var(--muted)}.tip-box{border-radius:22px;background:rgba(255,255,255,.64);border:1px solid var(--line);padding:22px}.tip-box b{display:block;margin-bottom:8px} .wait-heading{text-align:center;font-family:var(--serif);font-size:2rem;margin:34px 0 18px}.wait-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.wait-card{border-radius:22px;padding:22px;background:rgba(255,255,255,.72);border:1px solid var(--line);min-height:185px;display:flex;flex-direction:column}.wait-card h4{margin:12px 0 6px}.wait-card p{font-size:.82rem;color:var(--muted);flex:1}.wait-card a{font-size:.82rem;font-weight:700;color:var(--sage-dark)} .visual-collections{margin-top:36px}.visual-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:12px}.visual-card{height:122px;border-radius:18px;overflow:hidden;position:relative}.visual-card img{width:100%;height:100%;object-fit:cover}.visual-card::after{content:"";position:absolute;inset:50% 0 0;background:linear-gradient(transparent,rgba(20,20,17,.75))}.visual-card span{position:absolute;z-index:2;left:10px;bottom:8px;color:white;font-weight:700;font-size:.75rem} .result-panel{display:none;margin-top:20px;border-radius:30px;padding:30px}.result-panel.show{display:block}.result-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:28px}.result-image{border-radius:24px;overflow:hidden;min-height:430px;background:#ddd}.result-image canvas{width:100%;height:auto;display:block}.result-actions{display:flex;flex-direction:column;justify-content:center}.result-actions h2{font-size:2.8rem;margin:10px 0 16px}.result-actions .btn{margin:5px 0;width:100%} /* Responsive */ @media(max-width:1050px){.main-nav{gap:14px}.header-actions{display:none}.hero{grid-template-columns:1fr}.hero-copy{padding:58px 38px}.hero-image{min-height:430px}.product-grid{grid-template-columns:repeat(3,1fr)}.product-card:nth-child(n+4){display:none}.bespoke{grid-template-columns:1fr 1fr}.feature-list{grid-column:1/-1}.style-grid{grid-template-columns:repeat(4,1fr)}.projects-grid{grid-template-columns:repeat(3,1fr)}.project-card:nth-child(n+4){display:none}.cta-band{grid-template-columns:1fr auto}.cta-band p{display:none}.footer-grid{grid-template-columns:1.4fr repeat(2,1fr)}.footer-grid>div:nth-child(4){display:none}.preview-grid{grid-template-columns:1fr}.wait-grid{grid-template-columns:repeat(2,1fr)}.visual-grid{grid-template-columns:repeat(4,1fr)}.collection-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:780px){.container{width:min(100% - 24px,1220px)}.header-inner{height:74px}.brand img{width:155px}.menu-toggle{display:grid}.main-nav{position:absolute;left:12px;right:12px;top:76px;background:var(--cream);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:16px;display:none;flex-direction:column;align-items:stretch}.main-nav.open{display:flex}.main-nav a{padding:11px 12px}.hero-copy{padding:46px 24px}.hero{border-radius:0 0 24px 24px}.hero-image{min-height:350px}.hero-badges{right:14px;top:45px}.hero-badge{width:125px;padding:12px}.product-float{margin-top:-42px}.product-grid{grid-template-columns:repeat(2,1fr)}.product-card:nth-child(3){display:none}.product-card img{height:145px}.bespoke{grid-template-columns:1fr;padding:26px}.sample-art{height:180px}.style-shell{padding:24px 18px}.style-grid{grid-template-columns:repeat(2,1fr)}.style-card:nth-child(n+7){display:none}.projects-grid{grid-template-columns:1fr 1fr}.project-card:nth-child(3){display:none}.cta-band{grid-template-columns:1fr;padding:28px}.cta-band .btn{justify-self:start}.newsletter-inline{grid-template-columns:1fr;padding:24px}.inline-form,.modal-form{flex-direction:column}.newsletter-modal{padding:36px 24px;background:var(--paper)}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}.footer-bottom{flex-direction:column}.page-hero .box{padding:36px 24px}.collection-grid{grid-template-columns:1fr 1fr}.two-col,.three-col{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.steps{gap:8px;justify-content:flex-start;overflow-x:auto}.step{min-width:145px}.step-line{width:24px}.visualizer-panel{padding:16px}.preview-img{height:270px}.generate-panel{grid-template-columns:1fr;padding:22px}.generation-row{grid-template-columns:64px 1fr}.time-note{grid-column:2}.gen-copy h1,.gen-copy h2{font-size:2rem}.wait-grid{grid-template-columns:1fr 1fr}.visual-grid{grid-template-columns:repeat(2,1fr)}.result-grid{grid-template-columns:1fr}.result-image{min-height:280px}.result-actions h2{font-size:2.3rem}} @media(max-width:500px){h1{font-size:2.65rem}.hero-actions{flex-direction:column;align-items:stretch}.product-card img{height:125px}.style-grid,.projects-grid,.collection-grid,.wait-grid{grid-template-columns:1fr}.product-grid{grid-template-columns:1fr}.product-card:nth-child(2){display:none}.style-card:nth-child(n+5){display:none}.project-card:nth-child(2){display:none}.footer-grid{grid-template-columns:1fr}.newsletter-modal h2{font-size:2.25rem}.preview-img{height:230px}.generation-row{grid-template-columns:1fr}.progress-ring{margin:auto}.time-note{grid-column:1;text-align:center}.visual-grid{grid-template-columns:1fr 1fr}} .sr-only{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} /* Standalone complete-site additions */ :focus-visible{outline:3px solid rgba(110,129,80,.42);outline-offset:3px} .top-note{background:var(--topnote-bg);color:var(--topnote-ink);font-size:.74rem}.top-note .container{display:flex;justify-content:space-between;gap:20px;padding:7px 0}.top-note a{opacity:.95} .nav-dropdown{position:relative}.nav-dropdown>button{font:inherit;font-weight:700;background:transparent;border:0;padding:10px 0;color:inherit}.nav-dropdown-panel{position:absolute;top:42px;left:-18px;width:260px;padding:14px;background:#faf7ef;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);display:none}.nav-dropdown:hover .nav-dropdown-panel,.nav-dropdown:focus-within .nav-dropdown-panel{display:grid}.nav-dropdown-panel a{padding:9px 10px;border-radius:11px}.nav-dropdown-panel a:hover{background:rgba(110,129,80,.09)} .breadcrumbs{font-size:.78rem;color:var(--muted);margin-bottom:18px}.breadcrumbs a:hover{color:var(--sage-dark)} .hero-note{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}.mini-stat{background:rgba(255,255,255,.66);border:1px solid var(--line);border-radius:18px;padding:13px 16px;min-width:160px}.mini-stat b{display:block;color:var(--sage-dark)}.mini-stat span{font-size:.76rem;color:var(--muted)} .split-feature{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}.feature-image{min-height:420px;border-radius:28px;overflow:hidden}.feature-image img{width:100%;height:100%;object-fit:cover}.feature-copy{padding:44px;border-radius:28px;display:flex;flex-direction:column;justify-content:center}.feature-copy h2{margin:10px 0 18px}.feature-copy p{color:var(--muted)} .list-clean{list-style:none;padding:0;margin:18px 0}.list-clean li{padding:9px 0 9px 28px;position:relative;border-bottom:1px solid var(--line)}.list-clean li::before{content:'✓';position:absolute;left:0;color:var(--sage-dark);font-weight:800} .card-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px} .gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.gallery-card{border-radius:22px;overflow:hidden;min-height:270px;position:relative}.gallery-card img{width:100%;height:100%;object-fit:cover;position:absolute}.gallery-card:nth-child(3n+1){grid-row:span 2;min-height:554px}.gallery-card .overlay{position:absolute;inset:auto 0 0;padding:18px;color:white;background:linear-gradient(transparent,rgba(20,20,17,.82));padding-top:70px}.gallery-card .overlay span{display:block;font-size:.75rem;opacity:.86} .shop-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 24px}.filter-select{border:1px solid var(--line);background:rgba(255,255,255,.72);border-radius:999px;padding:11px 16px}.product-shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.shop-card{border:1px solid var(--line);background:rgba(255,255,255,.70);border-radius:24px;overflow:hidden;box-shadow:0 10px 24px rgba(60,55,43,.07)}.shop-card img{aspect-ratio:1/1;width:100%;object-fit:cover}.shop-card .pad{padding:16px}.shop-card .tag{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--sage-dark);font-weight:800}.shop-card h3{font-size:1.35rem;margin:8px 0}.shop-card p{font-size:.84rem;color:var(--muted)} .artist-hero{display:grid;grid-template-columns:1fr .75fr;gap:24px}.artist-profile{border-radius:30px;padding:42px}.artist-profile h1{margin:8px 0 18px}.artist-profile p{max-width:680px}.artist-art{border-radius:30px;overflow:hidden;min-height:430px}.artist-art img{width:100%;height:100%;object-fit:cover} .contact-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:24px}.contact-panel{border-radius:30px;padding:34px}.contact-method{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line)}.contact-method:last-child{border:0}.contact-method b{display:block}.contact-method span{font-size:.82rem;color:var(--muted)} .notice{border-left:4px solid var(--sage);background:rgba(110,129,80,.08);padding:18px 20px;border-radius:0 16px 16px 0;margin:20px 0;font-size:.9rem} .accordion{display:grid;gap:12px}.accordion details{border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.62);padding:16px 20px}.accordion summary{cursor:pointer;font-weight:800}.accordion details p{margin:12px 0 0;color:var(--muted)} .article{max-width:850px}.article h2{font-size:2.1rem;margin:34px 0 14px}.article h3{font-size:1.45rem;margin:26px 0 10px}.article p,.article li{color:#4e4f48}.article a{text-decoration:underline;text-decoration-color:rgba(110,129,80,.45)} .category-cloud{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.category-tile{min-height:110px;border-radius:20px;padding:18px;background:var(--paper);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--serif);font-size:1.15rem}.category-tile:hover{background:var(--sage);color:white} .visualizer-start{border-radius:28px;padding:28px;margin:24px 0}.visualizer-start .btn{margin-top:8px}.generate-start{display:flex;justify-content:flex-start;margin-top:18px} .static-form-note{font-size:.76rem;color:var(--muted);margin-top:10px} .form-success{padding:12px 14px;background:rgba(110,129,80,.10);border-radius:14px;color:var(--sage-dark);display:none}.form-success.show{display:block} .site-map-list{columns:3;column-gap:30px}.site-map-list a{display:block;padding:6px 0} @media(max-width:1050px){.nav-dropdown{display:none}.gallery-grid{grid-template-columns:repeat(3,1fr)}.product-shop-grid{grid-template-columns:repeat(3,1fr)}.category-cloud{grid-template-columns:repeat(4,1fr)}.artist-hero,.contact-layout{grid-template-columns:1fr}.artist-art{min-height:350px}} @media(max-width:780px){.top-note{display:none}.split-feature{grid-template-columns:1fr}.gallery-grid{grid-template-columns:1fr 1fr}.gallery-card:nth-child(3n+1){grid-row:auto;min-height:270px}.product-shop-grid{grid-template-columns:1fr 1fr}.category-cloud{grid-template-columns:repeat(2,1fr)}.feature-copy{padding:28px}.site-map-list{columns:2}} @media(max-width:500px){.gallery-grid,.product-shop-grid,.category-cloud{grid-template-columns:1fr}.shop-toolbar{align-items:stretch;flex-direction:column}.site-map-list{columns:1}} /* v3 review corrections ------------------------------------------------ */ img{image-rendering:auto} .footer-social{display:flex;align-items:center;gap:10px;margin-top:18px;flex-wrap:wrap} .footer-social a{width:38px!important;height:38px!important;display:grid!important;place-items:center!important;border:1px solid rgba(52,55,44,.20)!important;border-radius:999px!important;color:var(--ink)!important;margin:0!important;background:rgba(255,255,255,.36);transition:.2s ease} .footer-social a:hover{transform:translateY(-2px);background:rgba(110,129,80,.12);border-color:rgba(83,104,58,.35)!important} .footer-social svg{width:18px;height:18px;display:block} .footer-bottom{position:relative;align-items:center;display:grid;grid-template-columns:1fr auto 1fr} .footer-bottom>span:last-child{text-align:right} .hosted-by{font-size:.68rem;letter-spacing:.02em;opacity:.72;text-align:center;font-style:italic} .featured-projects-section{padding-top:42px!important;padding-bottom:42px!important;overflow:hidden} .featured-heading{align-items:flex-end!important;margin-bottom:22px!important} .featured-heading h2{font-size:clamp(2rem,3.2vw,3.1rem);margin-top:5px} .home-projects{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important} .home-projects .project-card{min-height:0!important;aspect-ratio:1.18/1;border-radius:24px} .home-projects .project-card img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important} .home-projects .project-card:nth-child(1) img{object-position:center 52%} .home-projects .project-card:nth-child(2) img{object-position:center 50%} .home-projects .project-card:nth-child(3) img{object-position:center 48%} .home-projects .project-card:nth-child(4) img{object-position:center 44%} .home-projects .project-card::after{inset:42% 0 0;background:linear-gradient(transparent,rgba(17,18,15,.76))} .home-projects .caption{left:20px;bottom:18px}.home-projects .caption b{font-family:var(--serif);font-size:1.18rem;font-weight:400}.home-projects .caption span{font-size:.78rem;margin-top:3px;display:block} .product-card img{height:auto!important;aspect-ratio:4/3;object-fit:cover;object-position:center} .shop-card img{aspect-ratio:4/3!important;object-fit:cover;object-position:center} .collection-card img{object-position:center} .feature-image img,.gallery-card img{object-position:center} .style-card img{object-position:center} .category-hero-box{display:grid!important;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center;overflow:hidden} .category-hero-box>img{width:100%;height:300px;object-fit:cover;border-radius:24px;border:1px solid var(--line)} .related-categories{display:flex;gap:10px;flex-wrap:wrap}.related-categories a{padding:11px 16px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.55);font-size:.82rem}.related-categories a:hover{background:var(--sage);color:#fff} .floating-whatsapp{position:fixed;right:22px;bottom:22px;z-index:95;display:inline-flex;align-items:center;gap:9px;background:#25D366;color:white;border-radius:999px;padding:12px 17px 12px 13px;box-shadow:0 14px 36px rgba(26,93,55,.28);font-weight:800;font-size:.84rem;border:2px solid rgba(255,255,255,.82);transition:transform .2s ease,box-shadow .2s ease} .floating-whatsapp:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(26,93,55,.36)} .floating-whatsapp svg{width:25px;height:25px;display:block;flex:0 0 auto} @media(max-width:1050px){.home-projects{grid-template-columns:repeat(2,minmax(0,1fr))!important}.project-card:nth-child(n+4){display:block!important}.category-hero-box{grid-template-columns:1fr}.category-hero-box>img{height:260px}} @media(max-width:780px){.footer-bottom{grid-template-columns:1fr;text-align:center;gap:8px}.footer-bottom>span:last-child{text-align:center}.home-projects{grid-template-columns:1fr 1fr!important}.home-projects .project-card:nth-child(3),.home-projects .project-card:nth-child(4){display:block!important}.floating-whatsapp span{display:none}.floating-whatsapp{width:54px;height:54px;padding:0;justify-content:center;right:15px;bottom:15px}.floating-whatsapp svg{width:29px;height:29px}} @media(max-width:520px){.home-projects{grid-template-columns:1fr!important}.home-projects .project-card{aspect-ratio:1.35/1}.footer-social{justify-content:flex-start}.category-hero-box>img{height:220px}} /* v4 standalone shop -------------------------------------------------- */ .header-actions .icon-btn svg{width:22px;height:22px;display:block}.cart-icon-btn{position:relative}.cart-count{position:absolute;right:1px;top:1px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--sage-dark);color:#fff;font:700 10px/18px var(--sans);text-align:center} .shop-hero{padding:38px 0 18px}.shop-hero-card{border-radius:32px;padding:34px;display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;overflow:hidden}.shop-hero-card h1{margin:9px 0 18px}.shop-hero-card>img{width:100%;height:340px;object-fit:cover;object-position:center;border-radius:26px} .shop-controls{border-radius:24px;padding:18px 20px;display:flex;gap:20px;justify-content:space-between;align-items:end;margin-bottom:26px}.shop-search{flex:1;max-width:580px}.shop-search label{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;font-weight:800;margin-bottom:7px}.shop-filter-buttons{display:flex;gap:8px;flex-wrap:wrap}.shop-filter{border:1px solid var(--line);background:rgba(255,255,255,.6);padding:10px 15px;border-radius:999px;font-weight:700;color:var(--ink)}.shop-filter.active,.shop-filter:hover{background:var(--sage);border-color:var(--sage);color:#fff}.shop-result-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:22px}.shop-result-head h2{font-size:2.6rem;margin-top:5px} .catalog-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.catalog-card{border:1px solid var(--line);background:rgba(255,255,255,.70);border-radius:24px;overflow:hidden;box-shadow:0 10px 24px rgba(60,55,43,.07);display:flex;flex-direction:column}.catalog-image{display:block;overflow:hidden}.catalog-image img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center;transition:transform .35s ease}.catalog-card:hover .catalog-image img{transform:scale(1.025)}.catalog-body{padding:17px;display:flex;flex-direction:column;flex:1}.catalog-topline{display:flex;justify-content:space-between;gap:10px;align-items:center}.catalog-card .tag{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--sage-dark);font-weight:800}.quote-only{font-size:.68rem;padding:5px 8px;border-radius:999px;background:rgba(110,129,80,.11);color:var(--sage-dark);font-weight:800}.catalog-card h3{font-size:1.35rem;margin:10px 0 8px}.catalog-card p{font-size:.83rem;color:var(--muted);flex:1}.catalog-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}.text-link{font-size:.78rem;color:var(--sage-dark);font-weight:800}.product-price{font-size:.82rem}.was-price{text-decoration:line-through;color:var(--muted);font-weight:400;margin-right:4px}.shop-note{border-radius:28px;margin-top:34px;padding:32px;display:flex;align-items:center;justify-content:space-between;gap:28px}.shop-note h2{font-size:2.15rem;margin:7px 0 10px}.shop-note p{max-width:680px;color:var(--muted);margin:0} .product-detail-section{padding-top:42px}.product-detail{display:grid;grid-template-columns:1.08fr .92fr;gap:24px}.product-gallery,.product-info{border-radius:30px;padding:28px}.product-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center;border-radius:23px}.product-thumb-note{font-size:.76rem;color:var(--muted);padding:12px 4px 0}.product-info{display:flex;flex-direction:column;justify-content:center}.product-info h1{font-size:clamp(2.5rem,4.2vw,4.5rem);margin:10px 0 15px}.enquiry-badge{align-self:flex-start;padding:8px 12px;border-radius:999px;background:var(--sage-soft);color:var(--sage-dark);font-size:.78rem;font-weight:800;margin-bottom:17px}.detail-price{font-size:1.1rem;margin:2px 0 19px}.detail-price strong{font-size:1.65rem;color:var(--sage-dark)}.small-note{font-size:.75rem;color:var(--muted);margin-top:14px}.qty-row{margin:12px 0}.qty-row label{font-size:.8rem;font-weight:800}.qty-input{width:80px;margin-left:10px;padding:10px;border:1px solid var(--line);border-radius:14px;background:#fff} .cart-layout,.checkout-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.65fr);gap:24px;align-items:start}.cart-panel,.cart-summary,.checkout-form,.checkout-summary{border-radius:28px;padding:28px}.cart-row{display:grid;grid-template-columns:100px 1fr auto;gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}.cart-row img{width:100px;height:82px;object-fit:cover;border-radius:16px}.cart-row h3{font-size:1.25rem;margin-bottom:5px}.cart-row-meta{font-size:.8rem;color:var(--muted)}.cart-row-actions{display:flex;align-items:center;gap:10px}.cart-qty{width:64px;padding:8px;border:1px solid var(--line);border-radius:12px;background:#fff}.remove-cart{border:0;background:transparent;color:#8a5540;font-size:.78rem;text-decoration:underline}.cart-empty{display:none;text-align:center;padding:56px 20px}.cart-empty.show{display:block}.cart-summary,.checkout-summary{position:sticky;top:112px}.cart-summary h2,.checkout-summary h2{font-size:2.1rem;margin:8px 0 18px}.summary-line{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.summary-line.total{font-size:1.12rem;border-bottom:0}.cart-checkout-btn{width:100%;margin:16px 0 12px}.checkout-form h2{font-size:2.2rem;margin-bottom:20px}.checkout-item{display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}.checkout-item img{width:56px;height:48px;object-fit:cover;border-radius:10px}.checkout-item b{font-size:.78rem}.checkout-item span{font-size:.72rem;color:var(--muted)} @media(max-width:1050px){.catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.shop-hero-card,.product-detail{grid-template-columns:1fr}.shop-hero-card>img{height:300px}.cart-layout,.checkout-layout{grid-template-columns:1fr}.cart-summary,.checkout-summary{position:static}.main-nav{gap:18px}} @media(max-width:780px){.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.shop-controls,.shop-note{align-items:stretch;flex-direction:column}.shop-result-head{align-items:flex-start;flex-direction:column}.product-gallery,.product-info{padding:20px}.cart-row{grid-template-columns:74px 1fr}.cart-row img{width:74px;height:68px}.cart-row-actions{grid-column:2}.shop-hero-card{padding:24px}.shop-hero-card>img{height:240px}} @media(max-width:500px){.shop-filter-buttons{display:grid;grid-template-columns:1fr 1fr}.catalog-card h3{font-size:1.5rem}.shop-result-head h2{font-size:2.15rem}} /* Footer consultation button contrast fix */ .footer-grid a.btn.btn-primary{color:#fff;} .footer-grid a.btn.btn-primary:hover{color:#fff;} /* ── SA-22: the phone menu is a FULL-SCREEN sheet ──────────────────────────── * The export shipped a dropdown panel pinned under the header (absolute, 22px * radius, page showing all round it). Asked for fullscreen, and it is the * treatment V1 (SA-19), Marble House (MH-1) and the PBC site (PBC-1) all use: * the sheet covers the masthead, so it has to carry its own logo and a visible * way out or the browser's back button is the only reliable exit. */ .nav-head, .nav-foot { display: none; } @media (max-width: 1150px) { /* LOAD BEARING. `.site-header` sets `backdrop-filter: blur(14px)`, and a backdrop-filter makes an element the CONTAINING BLOCK for its position:fixed descendants. The sheet lives inside the header, so its `top: 0` resolved to the header's top rather than the viewport's and it opened 99px down, leaving the banners above it -- while still measuring 100dvh tall, so "does it cover the viewport" answered yes and the bug survived the first check. The blur is decorative and a phone header is opaque anyway. Same family as the SA-7 note that a transform on .stage opens a stacking context. */ .site-header { backdrop-filter: none; } .main-nav { position: fixed; inset: 0; left: 0; right: 0; top: 0; width: 100vw; height: 100dvh; max-height: none; border: 0; border-radius: 0; padding: 18px 22px 26px; background: var(--cream); display: none; flex-direction: column; align-items: stretch; overflow-y: auto; overscroll-behavior: contain; z-index: 90; /* SA-24: the desktop bar's `gap` is inherited by the column and was the hidden cost that made the sheet scroll -- 18px between eleven rows is 180px, more than the contact line and the logo together. The rows carry their own 44px height and a separating border, so the gap buys nothing here. Measured at 360x740: 832px of content in a 740px sheet, and 661 once this is zero. */ gap: 0; } .main-nav.open { display: flex; } /* The page must not scroll under an open sheet. */ body.nav-open { overflow: hidden; } /* The burger sits UNDER the sheet it opened, so hide it while open: the control that opened it must not float over the thing it opened (SA-19). */ body.nav-open .menu-toggle { visibility: hidden; } .nav-head { display: flex; align-items: center; justify-content: center; position: relative; padding: 6px 0 18px; margin-bottom: 6px; border-bottom: 1px solid var(--line); } .nav-head .nav-logo img { width: 140px; height: auto; } .nav-close { position: absolute; right: -8px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; color: var(--ink); } /* Nine items plus a logo and a contact line: at 15px padding the sheet was 109px over on a 390x844 phone and scrolled. 44px rows still clear the tap floor and the whole menu fits. */ .main-nav > a { width: 100%; text-align: center; padding: 11px 0; font-size: 1rem; min-height: 44px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--line); } /* The underline animation is a pointer affordance and reads as a strike through a centred row (the MH-1 bug), so the active item takes colour. */ .main-nav > a::after { display: none; } .main-nav > a.active { color: var(--sage-dark); } /* SA-96: the vertical rhythm here is TIGHT on purpose. Every row in this foot is a 44px tap target holding about 15px of text, so the white is mostly inside the targets and cannot be taken back without shrinking them, which this file never does. What CAN go is the space BETWEEN the rows, and it had accumulated in four separate places: 20px of padding here, 10px under the promises, the base `.social` margin of 14px, and the 4px gap between all of them. Tightened to 12/2/4, which takes 26px out of the stack and closes the two gaps that actually read as holes -- promises-to-phone and email-to-socials. */ .nav-foot { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: auto; padding-top: 12px; width: 100%; } /* `tel:` and `mailto:` here are standalone actions in a menu, not links inside a sentence, so WCAG 2.5.5's inline-text exemption does not cover them and they take the same 44px floor as everything else. */ .nav-foot a { min-height: 44px; display: flex; align-items: center; font-size: .95rem; color: var(--muted); border: 0; } /* SA-96: her email in the green from her logo, at her request. `--sage-dark` rather than the raw #637f43 measured off the file: that green is 4.52 on white, which clears the 4.5 floor for 15px text by nothing at all, and this is 6.16. It is also the green already directly above it on the promise marks (SA-86) and on the active nav item, so the foot uses one green rather than introducing a second. The PHONE stays `--muted` deliberately: she asked for the email, and making both green would leave nothing for the green to distinguish. */ .nav-foot a[href^="mailto:"] { color: var(--sage-dark); } /* ── SA-87: the three promises at the foot of the sheet ────────────────── * The claims a phone visitor otherwise never meets: `.hero-badges` is * display:none under 780px (SA-80) because it shared the hero's one grid * cell with the copy and landed on the headline. * * Three equal columns rather than a stack, because stacked they would push * the contact line off a 360x640 screen -- the sheet fits that size with * nothing to spare and SA-19 says so. The labels wrap to two lines and the * rows stay level because every column is 1fr. * * `minmax(0, 1fr)` and not `1fr`: a grid item's automatic minimum size is * its content's min-content width, so a long unbroken word would push the * track wider than the column and overflow the sheet. The SA-2 room-strip * trap, and SA-32 hit it again on the logo wall. */ .nav-promises { list-style: none; margin: 0 0 2px; padding: 14px 0 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; /* NO border-top. Every `.main-nav > a` already carries a border-bottom, so the last menu item draws the rule above this row -- adding one here put a SECOND line 20px below the first with an empty band between them, which reads as a stray blank row. Same family as the double rule SA-19 found under the masthead: check what the neighbour already draws. */ } .nav-promises li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; /* The charcoal of "smart" in her logo (SA-85), which is what she asked for. 6.90 on the sheet's white ground. */ color: var(--smart-grey); } .nav-promises li > span:last-child { font-size: .70rem; font-weight: 700; line-height: 1.3; } .nav-promises svg { display: block; } /* Her socials sit right under this and were `--muted` at 18px, which read as leftovers rather than as a row of links. Same charcoal, and big enough to see. SCOPED to the sheet: `.social` is also the page footer's row, and that one is not what she asked about. */ .nav-foot .social a { color: var(--smart-grey); } /* The base `.social` rule carries `margin: 14px 0 0`, which is right in the page footer and is a hole here on top of the 4px flex gap. Scoped, because that other row is not what she asked about (the SA-87 rule). */ .nav-foot .social { gap: 14px; margin-top: 4px; } /* The partial hardcodes width="18" height="18" as ATTRIBUTES, and CSS beats a presentation attribute -- so this is where the size is set, and setting the colour alone (which is all the first pass did) leaves them at 18px in a 44px target, still reading as leftovers. The tap target does not change. */ .nav-foot .social svg { width: 22px; height: 22px; } } /* ── SA-87b: the promises, and the viewport a REAL phone actually gives ─────── * The first version hid these under 830px of viewport height, measured at * 390x844. THAT IS THE DEVICE'S SCREEN, NOT ITS VIEWPORT: Safari's address bar * takes ~100px, so an iPhone 14 gives a page about 745px and a Pixel 7 about * 732. The guard therefore hid the row on essentially every real phone, and * the "96px of dead space" it was meant to fill does not exist either -- at * 745 the sheet needs 739 and fits with SIX pixels to spare. * * MEASURE A PHONE AT ITS VIEWPORT, NOT AT ITS SCREEN SIZE. 844, 896 and 932 * are marketing numbers; subtract the browser chrome before believing them. * * So the row costs 88px that the sheet does not have, and the sheet scrolls * ~80px to show it. That is a deliberate trade and not an oversight: the menu * already carries `overflow-y: auto; overscroll-behavior: contain`, every nav * item is still above the fold, and the partly-visible row is its own hint * that there is more below. What it costs is that the contact line now needs * a small scroll where it did not before. * * Below 700px only the PROMISES go (SA-95). This paragraph used to say the * whole foot went, promises included, and that was the fault Theresa reported: * every phone she owns is under 700, so her contact line and socials were * deleted on all of them. Navigation and contact both beat three claims. */ /* iOS zooms the whole page when a focused input is under 16px. Deliberately left at 780px when the MENU breakpoint moved to 1150px (SA-36): this is a phone-zoom fix, and forcing 16px inputs onto a 1100px desktop window is a different decision with no reason behind it. */ @media (max-width: 780px) { input:not([type=hidden]), select, textarea { font-size: 16px !important; } } /* A short screen, not a narrow one: a phone in landscape has this problem and a tall narrow one does not (the MH-1 rule, keyed on height). */ @media (max-width: 1150px) and (max-height: 700px) { .main-nav { padding: 10px 22px 16px; } .main-nav > a { padding: 2px 0; font-size: .95rem; } .nav-head { padding: 0 0 8px; margin-bottom: 2px; } .nav-head .nav-logo img { width: 118px; } /* SA-95: NOTHING IN THE FOOT IS HIDDEN HERE, and two rules have now been deleted from this spot. SA-19 dropped the whole `.nav-foot`, copying MH-1's drawer, so Theresa's phone number, email and socials vanished on every phone she owns -- an iPhone SE gives 553, a 13 mini 629, a Galaxy S22 691, all under this trim. SA-95 then dropped the PROMISES instead, which was the same mistake one size smaller: the row exists precisely so a phone visitor sees those three claims, because `.hero-badges` is hidden under 780px, and on her phones it showed them nowhere at all. Both rules existed because something had to go. Nothing does: this sheet carries `overflow-y: auto`, so the honest answer is to let it scroll. Measured with the promises on, every phone keeps all seven nav items above the fold and pays 74-88px more scroll for a foot you scroll to anyway (SE 212, 13 mini 136, S22 74). What remains here is the padding trim, which is what actually buys the room. Targets are never shrunk to make something fit. */ } /* SA-22: form fields. The export had no standalone form styling beyond the checkout, and the contact page needs it. */ .field { margin-bottom: 14px; } .field label { display: block; font-size: .82rem; font-weight: 700; margin-bottom: 6px; } .field input, .field textarea, .field select { width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: rgba(255,255,255,.75); color: var(--ink); } .field input:focus, .field textarea:focus { outline: 2px solid var(--sage); outline-offset: 1px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } .contact-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; align-items: start; } .contact-lines { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; } .contact-lines a { min-height: 44px; display: flex; align-items: center; font-weight: 700; } .split-feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; overflow: hidden; border-radius: var(--radius); } .split-feature img { height: 100%; object-fit: cover; } /* SA-62: the header's look now lives in ONE block at the foot of this file. This pair used to re-add the card padding and radius AFTER the base rule set them, at equal specificity, which is the collision the first attempt at this walked into. */ .page-hero h1 + p { margin-top: 12px; } .page-hero h1 { margin: 10px 0 12px; } .shop-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; } .chip { display: inline-flex; align-items: center; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.7); font-size: .82rem; font-weight: 700; } .chip.on, .chip:hover { background: var(--sage); color: #fff; border-color: var(--sage); } .catalog-card .meta { padding: 12px 4px 0; } .catalog-card .meta h3 { font-size: 1.15rem; } .catalog-card .acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 4px 0; } .link-arrow { font-weight: 700; font-size: .84rem; color: var(--sage-dark); } /* Any grid with more than one fraction needs a breakpoint in the same commit (the AG-3 rule). */ @media (max-width: 900px) { .contact-layout, .split-feature { grid-template-columns: 1fr; } .split-feature img { height: 260px; } } @media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } .page-hero .box { padding: 0 0 22px; } .catalog-card .acts .btn { width: 100%; justify-content: center; } } /* ── SA-22: what the audit measured, fixed ─────────────────────────────────── * Every number below came from walking all 11 pages at 1440 and 390, not from * judging the palette by eye. */ /* Her sage as a button ground puts white labels at 4.27:1, under the 4.5 small * text needs. --sage-dark is 6.16:1 and is already in her palette, so nothing * new is invented. Hover keeps the darker end. */ /* SA-62: she asked for one button treatment, white wording on charcoal. This block is what actually wins over the base rule above, so both moved together or the sage would have come straight back. */ .btn-primary { background: var(--charcoal); border-color: var(--charcoal); color: #fff; } .btn-primary:hover { background: var(--charcoal-dark); border-color: var(--charcoal-dark); } .chip.on, .chip:hover { background: var(--sage-dark); border-color: var(--sage-dark); } /* A caption laid straight on a photograph measured 1.36:1 on the project and * artist cards: unreadable, and it varies with whichever image is behind it. * A scrim under the text, graded so the top of the picture is untouched. * Tested against the LIGHTEST cover in her library, not the darkest (MH-1). */ .project-card { position: relative; overflow: hidden; } .project-card .caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 40px 18px 16px; color: #fff; background: linear-gradient(to top, rgba(20,22,17,.88) 0%, rgba(20,22,17,.72) 42%, rgba(20,22,17,0) 100%); } .project-card .caption b { color: #fff; display: block; } .project-card .caption span { color: rgba(255,255,255,.88); font-size: .82rem; } /* Her .cta-band is a DARK olive gradient with white copy. An earlier version of * this block repainted the paragraph in --muted on top of it, which is the * opposite of a fix: only the LAYOUT is overridden here, never the colours. */ .cta-band { grid-template-columns: 1fr auto; } /* Touch targets. The floor is a max-width rule, not a phone-only one: a tablet * is a touch device too. Inline links inside a sentence are exempt (WCAG * 2.5.5) and are left alone. */ @media (max-width: 1000px) { .btn, .btn-sm, .chip, .icon-btn { min-height: 44px; } .btn-sm { padding: 11px 16px; } .link-arrow { min-height: 44px; display: inline-flex; align-items: center; } } @media (max-width: 700px) { .cta-band { grid-template-columns: 1fr; } .cta-band .btn { width: 100%; } } /* 4.27:1 with white type, same as the buttons were. */ .pill { background: var(--sage-dark); } .chip.on, .chip:hover { color: #fff; } /* WhatsApp's own green puts white at 1.98:1. Their darker brand green clears * 4.5, and the mark is still unmistakably WhatsApp. */ .floating-whatsapp { background: #0f7c70; } /* --muted lands at 4.49:1 on the linen surface, a hair under the 4.5 that * 16px body copy needs. Measured, not adjusted by eye. */ :root { --muted: #67675e; } /* The footer link columns are stacked lists of navigation on a phone, not links inside a sentence, so the 44px floor applies to them too. */ @media (max-width: 1000px) { .footer-grid a { min-height: 44px; display: inline-flex; align-items: center; } .footer-social a { width: 44px; height: 44px; justify-content: center; } } /* The remaining measured targets. */ .icon-btn { width: 44px; height: 44px; } .demo-banner a { min-height: 44px; display: inline-flex; align-items: center; } /* A card title duplicates the picture link above it, so WCAG 2.5.5's equivalent-target exception would cover it -- but giving it a real hit area is cheaper than arguing, and a 21px title is a poor thumb target regardless. */ .catalog-card .meta h3 a { display: inline-flex; align-items: center; min-height: 44px; } /* .cta-band sets color:#fff for the band, and .cta-band .btn is a near-white pill -- so the button label was white on white at 1:1. */ .cta-band .btn { color: var(--ink); } /* The desktop nav row measured 38px. The header is 88px tall, so there is room for a proper target and no reason to leave one short. */ .main-nav > a { min-height: 44px; display: inline-flex; align-items: center; } /* A short word in an inline-flex link is narrower than 44px however tall it is, which is what left "Artists" under the floor while its longer neighbours passed. */ @media (max-width: 1000px) { .footer-grid a { min-width: 44px; } } /* WCAG 2.5.8 (AA) asks 24px of ANY pointer, and a footer column or an arrow link is a stacked navigation list, not a link inside a sentence, so the exemption does not cover it. A base floor at every width; the 44px touch floor above still applies under 1000px. */ .footer-grid a, .link-arrow { min-height: 32px; display: inline-flex; align-items: center; } .footer-social a { min-height: 0; } /* LAST ON PURPOSE. The base 32px floor above is declared at the same specificity as the touch floor, so whichever comes later wins: putting the base rule after the media query silently undid 44px on every phone. The same trap as the SA-13 hero CTA -- when a rule "does nothing", count the selectors AND check what comes after it. */ @media (max-width: 1000px) { .footer-grid a, .link-arrow, .btn, .btn-sm, .chip, .icon-btn { min-height: 44px; } .footer-grid a { min-width: 44px; } .footer-social a { width: 44px; height: 44px; min-height: 44px; } } /* SA-23: the information pages. One layout for all seven. */ .info-picture { width: 100%; height: clamp(220px, 34vw, 420px); object-fit: cover; border-radius: var(--radius); margin-bottom: 26px; } .info-body { padding: 34px 38px; border-radius: var(--radius); } .info-row { padding: 20px 0; border-bottom: 1px solid var(--line); } .info-row:last-child { border-bottom: 0; padding-bottom: 0; } .info-row:first-child { padding-top: 0; } .info-row h2 { font-size: clamp(1.3rem, 2vw, 1.7rem); margin-bottom: 8px; } .info-row p { margin: 0; color: var(--muted); max-width: 74ch; } @media (max-width: 640px) { .info-body { padding: 24px 20px; } } /* SA-23: the basket. */ .price-lg { font-family: var(--serif); font-size: 2rem; margin: 6px 0 14px; } .catalog-card .price { font-weight: 700; color: var(--sage-dark); } .cart-row { display: grid; grid-template-columns: 78px 1fr auto auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); } .cart-row.summary { grid-template-columns: 1fr auto; } .cart-row img { width: 78px; height: 66px; object-fit: cover; border-radius: 12px; } .cart-row small { display: block; } .cart-row-actions { display: flex; align-items: center; gap: 8px; } .cart-row-actions button { min-width: 34px; min-height: 34px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.7); } .cart-total { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; font-family: var(--serif); font-size: 1.4rem; } .cart-icon-btn { position: relative; } .cart-count { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; border-radius: 999px; background: var(--sage-dark); color: #fff; font-size: .68rem; font-weight: 700; display: grid; place-items: center; } @media (max-width: 640px) { .cart-row { grid-template-columns: 64px 1fr; } .cart-row img { width: 64px; height: 56px; } .cart-row-actions, .cart-row > strong:last-child { grid-column: 2; } } /* LAST: the touch floor, after the base rules (see the note further up). */ @media (max-width: 1000px) { .cart-row-actions button { min-width: 44px; min-height: 44px; } } /* The footer link columns are a LIST. Giving them inline-flex for the target floor made them flow into a paragraph -- "WallpaperVisualiserMy Room" -- so they are block-level flex instead, which keeps the height and the line break. */ .footer-grid > div > a { display: flex; width: fit-content; } .footer-logo { width: 170px; max-width: 60%; height: auto; } /* SA-23: the shared social partial and its visually-hidden labels. * * These belong in the BASE stylesheet, not in components.css: the footer is on * every page and components.css is only loaded by the pages that use the * compositor. Without them the socials rendered as a bulleted list with the * screen-reader labels showing -- "• Smart Art on Facebook" -- which is the * same class of fault as the undefined custom properties: a V1 partial included * in V2 without the CSS it depends on. */ .vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .social { display: flex; align-items: center; gap: 4px; list-style: none; margin: 14px 0 0; padding: 0; } .social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--muted); } .social a:hover { color: var(--sage-dark); background: rgba(110,129,80,.10); } /* ── SA-24: the shop grid, measured ──────────────────────────────────────────── * Three faults the audit found once the shop page was built out to match her * export. Declared at the END of the file, after the SA-22 touch block, because * a rule appended after a media query silently undoes it at equal specificity * -- the trap SA-22b already walked into once. */ /* Her sage puts a white label at 4.27:1. `--sage-dark` is 6.16 and is already hers, so this is the same swap SA-22b made for the buttons rather than a new colour. Hover keeps the lighter sage: it is a pointer state, not a label anyone has to read at rest. */ .shop-filter.active { background: var(--sage-dark); border-color: var(--sage-dark); } /* "Details ->" is a standalone call to action, not a link inside a sentence, so WCAG 2.5.5's inline exemption does not cover it and it needs a real box. It measured 64x19. Same reasoning as `.link-arrow` in V1 (SA-2). */ .text-link { display: inline-flex; align-items: center; min-height: 24px; } @media (max-width: 1000px) { /* The touch floor. A card's title link measured 330x42 -- two pixels under, which is exactly the kind of miss that only a measurement finds. */ .text-link { min-height: 44px; } .catalog-card h3 { padding: 2px 0; } .catalog-card > a > h3, .catalog-body > a { display: block; min-height: 44px; } } /* SA-24: the newsletter pop-up's close control measured 40x40, which is under the touch floor -- and it is the ONLY way out of a dialog that covers the page, so it is the last control that should be hard to hit. */ @media (max-width: 1000px) { .modal-close { width: 44px; height: 44px; } } /* ── SA-91: the range tiles moved onto the home band's component ───────────── * `.category-tile` and `.category-cloud` are rendered by NOTHING now. The SA-30 * block that lived here -- the cover , the `has-art` scrim SA-90 * rebalanced, the hover fill -- went with it, because the next person to tune a * scrim that styles no element would be tuning nothing (the SA-5 rule about ~90 * lines of dead CSS left behind by a layout change). * * Its base rules still sit in the converted export's minified lines near the * top of this file. Left alone deliberately: hand-editing a minified line to * remove one selector is how something else in it gets broken. */ /* SA-32: a product card's copy is an EXCERPT, whatever the client wrote. Her imported descriptions are full paragraphs, so the cards ran past 900px and the grid went ragged. Clamped in CSS rather than truncated on import, because the next client's text is not ours to shorten either -- and the whole description is still on the product page, one click away. */ .catalog-body p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } /* SA-32: with a was-price beside it the row no longer fits, and the tag was wrapping to two lines. The tag is two short words and should never wrap; the PRICE is what gets the remaining room. */ .catalog-topline { flex-wrap: wrap; } .catalog-topline .tag { white-space: nowrap; } .catalog-topline .price { white-space: nowrap; margin-left: auto; } /* SA-32: the price a product WAS. Muted and lighter than the live price, so the eye lands on what it costs today. */ .price .was, .price-lg .was { color: var(--muted); font-weight: 400; margin-right: 6px; font-size: .85em; text-decoration-thickness: 1px; } /* ── SA-34: an eyebrow INSIDE the dark band ─────────────────────────────────── * `.eyebrow` is `--sage-dark`, which is a dark green, and `.cta-band` is a dark * olive: putting one inside the other is the exact fault SA-22b recorded when a * `.cta-band` override repainted the paragraph in `--muted` on the same band. * White at .82 measures over 7 on that ground; the dark green measured 1.3. * * The band's own grid is `1.2fr 1fr auto` and expects THREE children. These * bands have two -- words, then buttons -- so they say so rather than leaving a * phantom middle column pulling the buttons off the right edge. */ .cta-band .eyebrow { color: rgba(255, 255, 255, .82); } .cta-band h2 { margin: 6px 0 8px; } .cta-band.two, .section-tight .cta-band { grid-template-columns: 1.5fr auto; } .cta-band .card-actions { display: flex; gap: 10px; flex-wrap: wrap; } .cta-band .btn.btn-primary { background: #fff; color: var(--charcoal); border-color: #fff; } @media (max-width: 900px) { .cta-band.two, .section-tight .cta-band { grid-template-columns: 1fr; } } /* ── SA-34: the menu grew a chevron ─────────────────────────────────────────── * A MENU LABEL MUST NEVER WRAP, AT ANY WIDTH. SA-27 hit "Wall / Panels" and * "My / Room" between 820 and 1200px and fixed it with `nowrap` -- but scoped * inside `@media (max-width: 1280px)`, because at 1440 the bar fitted anyway. * Adding the Artists chevron made it not fit, so the same two labels broke at * 1440 where no rule was watching. A conditional fix for an unconditional rule * only holds until something else on the bar changes width. * * The tighter gap stays bounded to the range that needs it, and stays BOUNDED * BELOW at 781px: the phone sheet sets `gap: 0` inside a max-width block, and * an unbounded rule appended after it would put the gap back between every row * of the sheet. */ .main-nav > a, .navgroup > a { white-space: nowrap; } @media (min-width: 781px) and (max-width: 1280px) { .navgroup { gap: 0; } .navgroup > a { font-size: .84rem; } .navgroup-toggle { padding: 2px; } } /* SA-34: `.lead` came across from V1 with the artists hero and had no rule here, which the SA-26 class guard caught before it shipped -- unstyled markup inherits legible colours and overflows nothing, so nothing else would have. It is a standfirst: one step up from body copy, one step down from the paragraph above it. */ .lead { font-size: 1.06rem; color: var(--muted); margin: 10px 0 0; max-width: 62ch; } /* ── SA-35: the About quote, the contact hours and the consultation card ───── */ .about-pull { max-width: 60ch; margin: 0 auto; text-align: left; } .contact-hours { display: flex; gap: 16px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); } .contact-hours .k { flex: 0 0 74px; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 3px; } .contact-hours .v { font-size: .92rem; } .contact-hours small { display: block; color: var(--muted); font-size: .82rem; } /* Nested inside the studio card, so it needs its own edge rather than a surface: two paper panels one inside the other read as a mistake. */ .consult-card { padding: 22px; border-radius: var(--radius-sm); margin-top: 22px; border: 1px solid var(--line); background: var(--linen); } .consult-card .pin { display: inline-block; background: var(--sage-dark); color: #fff; padding: 6px 14px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .consult-card p { margin: 14px 0 16px; color: var(--muted); font-size: .92rem; } @media (max-width: 900px) { .contact-hours { flex-direction: column; gap: 4px; } .contact-hours .k { flex: none; } } /* ── SA-34: the three print claims, and the price promise ─────────────────── */ .specs2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 26px; } .spec2 { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; } .spec2 .n { display: block; font-family: var(--serif); font-size: 1.5rem; color: var(--sage-dark); margin-bottom: 10px; } .spec2 h3 { font-size: 1.2rem; margin: 0 0 8px; } .spec2 p { color: var(--muted); margin: 0; font-size: .92rem; } .promise2 { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; padding: 38px; border-radius: var(--radius); align-items: center; } .promise2 h2 { margin: 8px 0 12px; } .promise2 > div > p { color: var(--muted); margin: 0; } .pull2 { margin: 0; padding-left: 22px; border-left: 3px solid var(--sage); font-family: var(--serif); font-size: 1.3rem; line-height: 1.5; } .pull2 cite { display: block; margin-top: 12px; font-family: var(--sans); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-style: normal; } @media (max-width: 900px) { .specs2 { grid-template-columns: 1fr; gap: 14px; } .promise2 { grid-template-columns: 1fr; gap: 26px; padding: 26px; } } /* ── SA-34: the Artists menu group ───────────────────────────────────────────── * V1 listed the artists by name in the nav and this design did not. A * hover/focus drop-down on a pointer device, and a tap-to-expand panel inside * the phone sheet -- `position: static` on the panel is the single declaration * that converts one into the other (SA-6). */ .navgroup { position: relative; display: inline-flex; align-items: center; gap: 2px; } .navgroup-toggle { border: 0; background: none; padding: 4px; cursor: pointer; color: inherit; display: inline-flex; align-items: center; line-height: 0; /* SA-56: measured at 22x22, two pixels under WCAG 2.5.8's 24px pointer minimum. It is the only control on the desktop header that was, and the fix costs nothing because the chevron is centred in it either way. The phone sheet's own 44px floor still wins there. */ justify-content: center; min-width: 24px; min-height: 24px; } .navgroup-toggle svg { transition: transform .18s; } .navgroup.open > .navgroup-toggle svg { transform: rotate(180deg); } .navdrop { position: absolute; top: 100%; left: -14px; z-index: 40; min-width: 232px; padding: 8px; display: none; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 14px 32px rgba(52, 48, 40, .14); } .navgroup:hover > .navdrop, .navgroup:focus-within > .navdrop, .navgroup.open > .navdrop { display: flex; } .navdrop a { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); font-size: .9rem; white-space: nowrap; } .navdrop a:hover { background: var(--linen); color: var(--sage-dark); } .navdrop a small { color: var(--muted); font-size: .72rem; } .navdrop a.all { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--sage-dark); } /* SA-36: raised with the sheet. Left at 780 it made the Artists row the one left-aligned item in a centred menu between 781 and 1150px -- the group is a

, so `.main-nav > a` never matched it. */ @media (max-width: 1150px) { /* Inside the sheet the group is a full-width row and the panel sits in the flow beneath it, so it pushes the rest of the menu down instead of floating over it. Hover is meaningless here, so ONLY `.open` shows it. */ .navgroup { display: flex; width: 100%; justify-content: center; } .navdrop { position: static; display: none; width: 100%; min-width: 0; border: 0; box-shadow: none; background: transparent; padding: 4px 0 0; } .navgroup:hover > .navdrop, .navgroup:focus-within > .navdrop { display: none; } .navgroup.open > .navdrop { display: flex; } .navdrop a { align-items: center; text-align: center; min-height: 44px; justify-content: center; } .navgroup-toggle { min-width: 44px; min-height: 44px; justify-content: center; } } /* ══ SA-34: V1's content, in V2's chrome ═════════════════════════════════════ * V1's artists page was a five-part editorial piece and V2's was three cards; * V1's case study was a hero, a facts table, the story and a gallery, and V2's * was one padded box. What went missing was not styling -- the BIOS, the rights * badges, the rights explainer, the client name, the year and the body copy. * * Everything below is that content given V2's surfaces (paper, linen, the serif * display face, the sage accent) rather than V1's brass-and-bone. */ /* ── The stats strip under the artists hero ────────────────────────────────── */ .ar2-stats { display: flex; flex-wrap: wrap; gap: 34px; padding: 0 4px 30px; border-bottom: 1px solid var(--line); } .ar2-stats div { display: flex; flex-direction: column; gap: 2px; } .ar2-stats b { font-family: var(--serif); font-size: 2rem; line-height: 1; } .ar2-stats span { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } /* ── One artist, picture beside words ──────────────────────────────────────── */ .ar2-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 44px 0; border-bottom: 1px solid var(--line); } .ar2-row:last-child { border-bottom: 0; } /* The alternation is the wide-screen enhancement, never something a small screen has to cope with (the SA-6 rule). */ .ar2-row:nth-child(even) .shot { order: 2; } .ar2-row .shot { display: block; border-radius: var(--radius); overflow: hidden; } .ar2-row .shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; } .ar2-row .copy h2 { margin: 12px 0 6px; font-size: clamp(1.6rem, 2.6vw, 2.2rem); } .ar2-row .copy h2 a { color: var(--ink); text-decoration: none; } .ar2-row .copy h2 a:hover { color: var(--sage-dark); } .ar2-row .tagline { color: var(--muted); margin: 0 0 16px; } /* A fact line: dates, origin, movement, separated rather than punctuated. */ .meta.ar2-meta, .ar2-row .meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 10px; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .ar2-row .meta span + span, .ar2-meta span + span { position: relative; } .ar2-row .meta span + span::before, .ar2-meta span + span::before { content: "·"; position: absolute; left: -10px; color: var(--line); } /* ── The rights badge ──────────────────────────────────────────────────────── */ /* Two states with DIFFERENT meanings, so they are told apart by more than colour: each carries its own word. Both measured on their own ground. */ .ar2-badge { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: .66rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; } .ar2-badge.pd { background: var(--sage-soft); color: var(--sage-dark); } .ar2-badge.lic { background: #f6e6cd; color: #7a5312; } /* ── The rights explainer ──────────────────────────────────────────────────── */ .ar2-explain { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; padding: 34px; border-radius: var(--radius); } .ar2-explain h3 { margin: 8px 0 10px; font-size: 1.35rem; } .ar2-explain p { color: var(--muted); margin: 0; font-size: .92rem; } /* ── An artist's own page ──────────────────────────────────────────────────── */ .ar2-lede { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px; align-items: start; } .ar2-cover { width: 100%; border-radius: var(--radius); margin: 0 0 22px; display: block; } .ar2-lede .bio p { margin: 0 0 16px; } .ar2-note { margin: 22px 0 0; padding: 18px 22px; border-left: 3px solid var(--sage); background: var(--linen); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-family: var(--serif); font-size: 1.1rem; line-height: 1.5; } .ar2-side { padding: 26px; border-radius: var(--radius); position: sticky; top: 96px; } .ar2-side h2 { font-size: 1.05rem; margin: 0 0 14px; } .ar2-side .rights { font-size: .85rem; color: var(--muted); margin: 0 0 16px; } .ar2-side dl { margin: 0 0 20px; } .ar2-side dl div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); } .ar2-side dl div:last-child { border-bottom: 0; } .ar2-side dt { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .ar2-side dd { margin: 0; font-size: .9rem; text-align: right; } .ar2-side .btn { width: 100%; text-align: center; } /* ── A gallery of pieces or photographs ────────────────────────────────────── */ .ar2-gallery { columns: 2 340px; column-gap: 16px; margin-top: 22px; } /* `columns: 2 148px` for a long set: "2 columns only if each can be 148px", and 200 does not fit twice in a 342px phone column, which is how Frans Smit's 28 paintings became a 14,801px page in V1. */ .ar2-gallery.dense { columns: 2 148px; } .ar2-gallery button { display: block; width: 100%; margin: 0 0 16px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; break-inside: avoid; border-radius: var(--radius-sm); overflow: hidden; } .ar2-gallery img { width: 100%; display: block; } .ar2-gallery .t { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 12px 10px; font-size: .78rem; color: #fff; text-align: left; background: linear-gradient(transparent, rgba(20, 20, 16, .78)); } /* ── Other artists ─────────────────────────────────────────────────────────── */ .ar2-others { margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--line); } .ar2-others .row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; } .ar2-others a { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 16px 10px 10px; } .ar2-others a:hover { border-color: var(--sage); } .ar2-others img { width: 54px; height: 54px; object-fit: cover; border-radius: 10px; } .ar2-others b { display: block; font-size: .92rem; } .ar2-others small { color: var(--muted); font-size: .74rem; } /* ── A case study ──────────────────────────────────────────────────────────── */ .pf2-hero { position: relative; } .pf2-hero > img { width: 100%; height: clamp(320px, 52vh, 560px); object-fit: cover; display: block; } /* The scrim reaches full strength where the CAPTION sits, not at the very bottom edge: a caption 34px above a gradient's end lies on whatever the photograph is doing there (the PBC-1 lesson). */ .pf2-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 20, 16, .82) 0%, rgba(20, 20, 16, .62) 34%, rgba(20, 20, 16, .06) 72%); } .pf2-hero .container { position: absolute; inset: auto 0 0 0; z-index: 1; } .pf2-hero-copy { padding: 0 0 34px; color: #fff; } .pf2-hero-copy h1 { color: #fff; margin: 6px 0 0; } .pf2-hero-copy .client { margin: 0; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .82); } .pf2-logo { display: inline-flex; background: #fff; border-radius: 12px; padding: 10px 14px; margin: 0 0 14px; } .pf2-logo img { height: 34px; width: auto; display: block; } .pf2-facts { display: flex; flex-wrap: wrap; gap: 12px 44px; margin: 0 0 30px; padding: 0 0 24px; border-bottom: 1px solid var(--line); } .pf2-facts div { display: flex; flex-direction: column; gap: 3px; } .pf2-facts dt { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .pf2-facts dd { margin: 0; font-size: .95rem; } .pf2-body { max-width: 68ch; margin: 0 0 30px; } .pf2-body .standfirst { font-size: 1.12rem; line-height: 1.62; } .pf2-body p { margin: 0 0 16px; } .pf2-nextprev { display: flex; justify-content: space-between; gap: 20px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); } .pf2-nextprev a { display: flex; flex-direction: column; gap: 3px; text-decoration: none; color: var(--ink); font-family: var(--serif); font-size: 1.1rem; } .pf2-nextprev a:hover { color: var(--sage-dark); } .pf2-nextprev a.next { text-align: right; } .pf2-nextprev small { font-family: var(--sans); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } @media (max-width: 900px) { /* Stacked: picture, then words, in that order for every row -- the alternation is what a wide screen gets, not something a phone unpicks. */ .ar2-row { grid-template-columns: 1fr; gap: 20px; padding: 30px 0; } .ar2-row:nth-child(even) .shot { order: 0; } .ar2-explain { grid-template-columns: 1fr; gap: 26px; padding: 26px; } .ar2-lede { grid-template-columns: 1fr; gap: 26px; } .ar2-side { position: static; } .ar2-stats { gap: 22px; } .ar2-stats b { font-size: 1.6rem; } .pf2-facts { gap: 12px 26px; } .pf2-nextprev { flex-direction: column; } .pf2-nextprev a.next { text-align: left; } } /* ── SA-32: the wall of companies ───────────────────────────────────────────── * Her own portfolio page is one even grid of client marks on white plates, and * that is the layout Theresa chose in SA-5. This page had been reusing * `.style-card`, which is her export's STYLE TILE: `aspect-ratio: 1/1.12` with * `object-fit: cover`, so every wide wordmark was cropped to its middle and the * wall read "evi", "A", "al", ".DM", "oda". Those same rules also hide every * card past the sixth on a tablet and past the fourth on a phone, so most of * her brands were not on the page at all below 1200px. * * A logo is not a photograph: it is CONTAINED, never cropped, and it needs * quiet room around it. * * SA-33: the orange band was too loud, so it is gone and the MARKS carry her * colour instead -- the green from her own logo, #637f43, measured off the file * (28.6% of its opaque pixels; the charcoal is 63.1% and the orange 1.7%). * * Recoloured at the IMAGE layer by scripts/tint_smartart_logos.py rather than * with a CSS filter, which is the standing rule here (MH-1, AG-1): a filter * fixes today's artwork and wrecks the correct one a client supplies next * month. `logo_tinted()` resolves the twin by name and falls back to the * original, so a mark with no twin still shows. * * The plates stay WHITE, and that is where the contrast comes from: her green * measures 4.52 on white against 3.71 on the linen ground. WCAG 1.4.11 asks 3:1 * of a graphical object, so the plate is what keeps the marks comfortably clear * rather than merely passing. */ .brand-band { background: transparent; color: var(--ink); padding: 46px 0 56px; margin-top: 8px; } .brand-band h2 { text-align: center; margin: 0; } .brand-band .brand-sub { text-align: center; max-width: 68ch; margin: 12px auto 0; font-size: .92rem; color: var(--ink); opacity: .78; text-wrap: balance; } /* SA-36: the closing note under the logo wall, carried back from V1. Quieter than .brand-sub above the wall -- it is a qualifier, not a lede, and it must read as an aside without dropping under 4.5:1. */ .brand-band .brand-note { text-align: center; max-width: 60ch; margin: 30px auto 0; font-size: .84rem; line-height: 1.65; color: var(--ink); opacity: .7; text-wrap: balance; } /* SA-36: the consultation link on a design page. */ .product-info .consult-link { margin: 14px 0 0; font-size: .9rem; } .product-info .consult-link a { color: var(--sage-dark); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; } .product-info .consult-link a:hover { color: var(--ink); } .brand-wall { display: grid; /* `minmax(0, 1fr)`, NOT `1fr`. A grid item's automatic minimum size is its content's min-content width, and a logo is a replaced element whose intrinsic width wins: `max-width: 100%` cannot constrain it, because the percentage resolves against the very column being sized. Four wide wordmarks pushed the wall 32px past the viewport and clipped the right-hand column off the orange band. Same trap as the SA-2 room strip. */ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 34px; } .brand-plate { background: #fff; border-radius: 20px; /* Wider than tall, because a wordmark is: a square plate wastes its width on nothing and shrinks the mark to fit the height it does not need. */ aspect-ratio: 3 / 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 22px 26px; text-align: center; min-width: 0; border: 1px solid var(--line, rgba(50, 50, 40, .10)); box-shadow: 0 6px 16px rgba(52, 48, 40, .07); text-decoration: none; color: var(--ink); } .brand-plate img { /* CONTAIN, and capped on BOTH axes: `max-width` alone lets a tall mark run out of the plate, and `object-fit` alone does nothing to an image that has no fixed box to fit into. */ max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .brand-plate .name { font-family: var(--serif); font-size: 1.05rem; line-height: 1.2; } .brand-plate .see { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sage-dark); } /* Only a plate that leads somewhere moves, and it says where without hover. */ @media (hover: hover) { .brand-plate.linked { transition: transform .18s, box-shadow .18s; } .brand-plate.linked:hover { transform: translateY(-3px); border-color: var(--sage); box-shadow: 0 12px 24px rgba(52, 48, 40, .14); } } .brand-plate.linked:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } @media (max-width: 1000px) { .brand-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 700px) { /* Two across on a phone, and EVERY brand still on the page -- the thing the borrowed style-card rules were quietly taking away. */ .brand-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .brand-plate { padding: 16px 18px; border-radius: 16px; } .brand-band { padding: 40px 0 46px; } } /* SA-25: the selected range. Her export needs no such state, because each of her category pages is a separate file; ours keeps the tiles on screen while a range is showing, so the current one has to say so. `--sage-dark` rather than the `--sage` her hover uses: white on `--sage` measures 4.27, and this is a resting state somebody has to read, not a pointer flourish. */ /* SA-25: the link beside a section heading ("Visualise your room", "All wallpaper") is a standalone navigation control, not a link inside a sentence, so WCAG 2.5.5's inline exemption does not cover it. It measured 111x25 on a phone. Declared after the other touch blocks on purpose. */ @media (max-width: 1000px) { .section-heading > a { display: inline-flex; align-items: center; min-height: 44px; } } /* ── SA-26: the two things V2 was rendering with V1's classes ───────────────── * Both looked "unstyled" for the same reason: the markup came from V1 and its * CSS lives in smartart.css, which this design must never load (the SA-4 rule). */ /* The preview and demo notices. Only a tap-target rule existed here, so they rendered as bare black text above the masthead, full-bleed and unstyled -- the first thing anyone sees on a preview link. */ .demo-banner { background: var(--sage-dark); color: #fff; font-size: .82rem; text-align: center; padding: 9px 20px; } .demo-banner + .demo-banner { border-top: 1px solid rgba(255,255,255,.18); } .demo-banner strong { font-weight: 700; } .demo-banner a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .demo-banner a { min-height: 44px; display: inline-flex; align-items: center; } /* The Google reviews band (SA-21). Her export has none, so this is her request in this design's vocabulary rather than a conversion: the score sits on a linen panel beside the copy, and the whole thing is inside a container -- which is what was actually missing, since `.shell` is V1's. */ .revband { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 34px; align-items: center; padding: 34px; border-radius: 30px; } /* SA-47: with the score switched off there is no left column to fill, and the copy landed in the 250px track with 866px of empty band beside it -- four words to a line under a heading, which reads as a broken section rather than as a deliberate one. The score is optional (SA-21 gave it its own switch), so the band has to be whole without it. */ .revband:not(:has(.revscore)) { grid-template-columns: minmax(0, 1fr); } /* SA-49: her Trustindex widget sits under the band. Trustindex styles its own contents, so this is only the room it stands in -- and a minimum height so the page does not jump when a third-party script finally paints. */ /* SA-50: her own reviews, in her customers' words. A grid rather than a slider: a slider hides most of what it holds and needs script to show it, and these are six short cards. */ .rev-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; margin-top: 30px; } .rev-card { margin: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .55); } .rev-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .rev-head img, .rev-initial { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--linen); } .rev-initial { display: grid; place-items: center; font-weight: 700; color: var(--muted); } .rev-head b { display: block; font-size: .88rem; } /* Darkened through the TOKEN, not replaced with a hex: --brass is her primary_color injected inline on , so a literal would stop following her brand the day she changes it (the SA-21 star-row lesson). */ .rev-stars { color: color-mix(in srgb, var(--brass) 88%, #000); font-size: .82rem; letter-spacing: .06em; } .rev-card blockquote { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--ink); /* Their words, not ours, so they are capped rather than trimmed on the way in: the whole review is one click away on Google (the SA-37 rule). */ display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; } .rev-reply { margin-top: 12px; padding-left: 12px; border-left: 3px solid var(--line); font-size: .82rem; color: var(--muted); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .rev-widget { margin-top: 28px; } .ti-widget:empty { min-height: 220px; } .revscore { text-align: center; padding: 24px 18px; border-radius: 22px; background: var(--linen); border: 1px solid var(--line); } .revmark { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid var(--line); font-family: var(--serif); font-size: 1.25rem; color: var(--sage-dark); } .revnum { font-family: var(--serif); font-size: 2.9rem; line-height: 1; margin: 12px 0 6px; color: var(--ink); } /* Darkened through the token, not replaced with a hex: `--brass` is her primary colour injected inline, so a literal would stop following her brand the day she changes it. The plain sage measured 4.13 on this tint (SA-21). */ .revstars { margin: 0; font-size: 1.05rem; letter-spacing: .16em; color: color-mix(in srgb, var(--sage-dark) 92%, #000); } .revcount { margin: 8px 0 0; font-size: .8rem; color: var(--muted); } .revcopy h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); margin: 8px 0 12px; } .revcopy p { color: var(--muted); max-width: 60ch; } .revcopy .card-actions { margin-top: 18px; } @media (max-width: 780px) { .revband { grid-template-columns: 1fr; gap: 22px; padding: 26px 22px; } } /* SA-27: eleven menu items wrapped the nav onto two lines inside a fixed-height header, anywhere from 820px to 1200px. The cost is the GAP, not the words: 240px of gap carrying 526px of text. Twelve gives every width in the band room for the logo, the menu and the three icons. Bounded BELOW at 781px on purpose. The phone sheet sets `gap: 0` and lives in a `max-width: 780px` block; an unbounded `max-width` rule appended after it would win at 390px and put 12px back between every row of the sheet, which is what made it scroll before. */ @media (min-width: 781px) and (max-width: 1280px) { .main-nav { gap: 12px; } /* And the labels themselves must not break mid-phrase. Measured at 900px, "Wall Panels" and "My Room" were each splitting over two lines inside the bar, which is what the two-row nav actually was -- not the row wrapping, the WORDS wrapping. */ .main-nav > a { white-space: nowrap; } } /* ══ SA-28: the WhatsApp button ══════════════════════════════════════════════ * It was a bolt-on: WhatsApp's own #25D366 (later a teal for contrast), a white * ring and a green-black shadow, sitting on her linen page looking like a * widget somebody installed. * * Her logo orange with INK on it, for the reason measured off the logo file: * #ffa038 is 2.03 under a white label and 7.31 under her ink. So the glyph and * the words are ink, and the orange does what it does in her logo -- a solid * mark, not type. The shadow is warm rather than green so it belongs to the * page, and the ring is a darker orange instead of white, which was the part * that made it read as pasted on. * * The glyph is unchanged and unmistakable, which is what carries the meaning; * the colour was never doing that work. */ .floating-whatsapp { background: #ffa038; color: #272823; border: 2px solid rgba(39, 40, 35, .10); box-shadow: 0 10px 26px rgba(120, 74, 20, .28); font-weight: 800; letter-spacing: .01em; } .floating-whatsapp:hover { background: #ffab4f; box-shadow: 0 16px 38px rgba(120, 74, 20, .34); } .floating-whatsapp:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } /* ── SA-36: the header did not fit, and the LOGO was the crumple zone ───────── * * Measured with twelve items. `.main-nav` is 774px (the labels are `nowrap`, * correctly) and `.header-actions` is 148px, both fixed. The brand was the only * flexible child, so it absorbed every shortfall on its own: * * 1280px logo 190 1100px logo 71 860px logo 5 * 1200px logo 171 900px logo 45 820px logo 0 * * At 900px her wordmark is a pale smudge and at 820px it is GONE, on a header * that still reports one row and no overflow -- so every earlier sweep passed. * A logo is identity, not slack. * * Her export switched to the burger at 780px, which left the whole 781-1150 * band showing a bar that does not fit, and it hid the cart, search and account * icons from 1050px down -- so a customer with something in their basket had no * way to reach it on a 1024px window, on a site whose shop is live. * * The bar needs 190 + 774 + 148 = 1112px of content inside a container that is * `100% - 48px`, so 1150px is where it stops fitting. That is the breakpoint, * derived rather than picked. (PBC-1 made exactly this mistake in the other * direction: a 1000px burger on a bar that needed ~1150.) */ .brand { flex: 0 0 auto; } .brand img { min-width: 113px; } @media (min-width: 781px) and (max-width: 1150px) { /* Show the burger, and let the sheet above do the rest. */ .menu-toggle { display: grid; } /* Her export hides these from 1050px down. The cart is not decoration. `margin-left: auto` because with the bar out of the flow the header is brand | actions | burger, and evenly spaced they read as three unrelated things with a hole in the middle. They belong together on the right. */ .header-actions { display: flex; margin-left: auto; } } /* SA-36: the BASKET must survive to the phone. Her export hides the whole actions group under 780px, which is defensible for search and the account icon and is not for the cart: the shop is live, and a customer holding two canvases had no way to reach them. The cart alone is 44px, which the phone header has. Search and account stay hidden -- both are reachable from the sheet and the footer, and a basket is not. */ @media (max-width: 780px) { .header-actions { display: flex; } .header-actions > *:not(.cart-icon-btn) { display: none; } } /* SA-47: the payment-method chooser on the checkout. It renders ONLY when the client has loaded credentials for a gateway, so on a bank-transfer-only shop none of this is on the page at all. `.field input` sets `width: 100%`, which turns a radio into a full-width bar. The override is scoped to (0,2,1) rather than left at (0,1,1) to match: at equal specificity this would depend on source order, and the SA-13 hero CTA and the SA-19 sheet links were both broken exactly that way by a rule appended later in the same file. */ .pay-choice { border: 0; padding: 0; margin: 0 0 14px; } .pay-choice legend { padding: 0; font-size: .82rem; font-weight: 700; margin-bottom: 6px; } .pay-choice .pay-option { display: flex; align-items: center; gap: 10px; /* A radio is a tap target, and 44px is this site's floor for one. */ min-height: 44px; margin: 0; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(255,255,255,.75); cursor: pointer; font-weight: 400; } .pay-choice .pay-option + .pay-option { margin-top: 8px; } .pay-choice .pay-option input { width: auto; min-width: 0; padding: 0; margin: 0; accent-color: var(--sage-dark); } .pay-choice .pay-option:focus-within { outline: 2px solid var(--sage); outline-offset: 1px; } /* SA-52: the catalogue pager. A 44px target either side even on a desktop -- these are the two controls that move somebody through 1,329 designs. */ .cat-pager { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; margin: 40px 0 8px; } .cat-pager a, .cat-pager .off { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1px solid var(--line); border-radius: 999px; font-size: .88rem; text-decoration: none; color: var(--ink); background: rgba(255, 255, 255, .55); } .cat-pager a:hover { border-color: var(--sage-dark); color: var(--sage-dark); } /* Present but plainly unavailable, rather than absent: a control that vanishes at the ends makes the row jump as you page. */ .cat-pager .off { opacity: .38; } .cat-pager .where { font-size: .85rem; color: var(--muted); } .cat-pager .where small { color: var(--muted); opacity: .8; } /* ── SA-53: every card shows the design ON A WALL ──────────────────────────── * * The catalogue was 1,329 swatches -- pictures of paper -- on a site whose * pitch is "see it on a wall before you print it". The room shot sits under * the swatch and the swatch lifts away. * * Inside `(hover: hover)` on purpose: a rule that does not match is never * fetched, so a phone downloads none of these (the SA-2 rule). A touch device * gets the swatch and a tap that follows the link, which is what it wants. */ .catalog-card .art { position: relative; overflow: hidden; } .catalog-card .art .flat { display: block; width: 100%; height: 100%; object-fit: cover; } @media (hover: hover) { .catalog-card .art.has-room { background-image: var(--room-full); /* A non-retina screen takes the 700px file where image-set is supported. */ background-image: image-set(var(--room-small) 1x, var(--room-full) 2x); background-size: cover; background-position: center; } .catalog-card .art.has-room .flat { transition: opacity .45s ease; } .catalog-card:hover .art.has-room .flat, .catalog-card:focus-within .art.has-room .flat { opacity: 0; } } /* The label reads BEFORE anything is hovered, so the card says it has more to show without demanding a pointer first. */ .catalog-card .art .peek { position: absolute; left: 10px; bottom: 10px; z-index: 2; background: rgba(28, 30, 24, .78); color: #fff; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; pointer-events: none; } @media (hover: hover) { .catalog-card .art .peek { opacity: .82; transition: opacity .3s; } .catalog-card:hover .art .peek { opacity: 0; } } /* Anything animating opacity gets the same courtesy the rest of the site does. */ @media (prefers-reduced-motion: reduce) { .catalog-card .art.has-room .flat, .catalog-card .art .peek { transition: none; } } /* -- SA-54: the quote dialog, in V2's own hand -------------------------------- `quote.js` is shared machinery, not branding: it builds a