/* Stock Tank Life — configurator styles Locked brand tokens. Do not substitute. */ :root{ --pink:#FF6492; --pink-dk:#E8497A; --teal:#4FDCD1; --teal-dk:#1F9C93; --ink:#141210; --ink-70:rgba(20,18,16,.70); --ink-52:rgba(20,18,16,.52); --ink-14:rgba(20,18,16,.14); --ink-08:rgba(20,18,16,.08); --cream:#F4EBE0; --cream-lt:#FFF7EE; --white:#FFFDFA; --r-lg:20px; --r-md:14px; --r-sm:9px; --shadow-1:0 1px 0 rgba(20,18,16,.06), 0 2px 8px rgba(20,18,16,.05); --shadow-2:0 2px 0 rgba(20,18,16,.08), 0 10px 26px -12px rgba(20,18,16,.28); --pad:clamp(16px,4.2vw,34px); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--cream-lt); color:var(--ink); font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; font-feature-settings:"tnum" 0; } .app{max-width:920px;margin:0 auto;padding:0 var(--pad) 0} h1,h2,h3,.display{ font-family:Anton,Impact,"Arial Narrow",sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:.012em; line-height:.96; margin:0; } .hand{ font-family:Caveat,cursive; font-size:1.22rem; line-height:1.25; color:var(--teal-dk); margin:.5rem 0 0; } .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} /* ---------- masthead ---------- */ .masthead{ display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center;justify-content:space-between; padding:12px 0 10px;border-bottom:2px solid var(--ink-08); } .brand{display:flex;align-items:center;gap:11px;color:var(--ink)} .mark{width:34px;height:34px;flex:0 0 auto;display:block} .wordmark{display:block;width:auto;height:19px;max-width:100%;object-fit:contain;flex:0 0 auto;margin-bottom:3px} @media (max-width:520px){.mark{width:30px;height:30px}.wordmark{height:17px}} .brandtext{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1} .brandtext strong{ font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase; font-size:1.16rem;letter-spacing:.02em; } .brandtext em{font-style:normal;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-52)} .proof{margin:0;font-size:.76rem;letter-spacing:.01em;color:var(--ink-70)} /* ---------- intro (compressed: the first question must be visible on load) ---------- */ .intro{padding:12px 0 10px} .intro h1{font-size:clamp(1.18rem,4.6vw,1.9rem);line-height:1.08} .intro h1 span{color:var(--pink)} .promise{margin:5px 0 0;font-size:.86rem;color:var(--ink-70);max-width:60ch} /* Once you are past the first question the header collapses out of the way. */ .deep .intro,.deep .proof{display:none} .deep .masthead{padding:10px 0 8px} /* ---------- progress ---------- */ .progress{position:sticky;top:0;z-index:20;background:var(--cream-lt);padding:8px 0 8px} .progress-t{ display:flex;gap:10px;align-items:baseline;justify-content:space-between;margin:0 0 6px; font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:var(--ink-52); } .progress-t #pg-title{color:var(--ink);letter-spacing:.04em;text-align:right;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .progress-track{height:5px;border-radius:999px;background:var(--ink-08);overflow:hidden} .progress-fill{height:100%;width:4%;border-radius:999px;background:var(--teal-dk);transition:width .3s cubic-bezier(.22,.7,.28,1)} .embedded .progress{position:static} /* ---------- wizard shell ---------- */ .wizard{display:block;padding:10px 0 0} .wizcol{min-width:0;max-width:720px;margin:0 auto} .rail{display:none} @media (min-width:1080px){ .wizard{display:grid;grid-template-columns:250px minmax(0,1fr);gap:34px;align-items:start} .rail{display:block;position:sticky;top:64px} .wizcol{margin:0} } .rail-h{margin:0 0 10px;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--ink-52)} .rail-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px} .rl > button,.rl > .rl-s{ display:flex;flex-direction:column;gap:2px;width:100%;text-align:left; background:none;border:0;border-left:3px solid var(--ink-08); padding:8px 10px;font:inherit;color:var(--ink-52);border-radius:0 var(--r-sm) var(--r-sm) 0; } .rl > button{cursor:pointer} .rl > button:hover{background:var(--cream);color:var(--ink)} .rl > button:focus-visible{outline:3px solid var(--teal-dk);outline-offset:-2px} .rl.done > button{border-left-color:var(--teal);color:var(--ink-70)} .rl.cur > button,.rl.cur > .rl-s{border-left-color:var(--pink);color:var(--ink);background:var(--white)} .rl-t{font-size:.85rem;font-weight:600;line-height:1.25} .rl-v{font-size:.78rem;color:var(--ink-52);line-height:1.3} .rl.cur .rl-t{color:var(--ink)} /* Piece group header in the rail. The accent bar continues down the steps that belong to it, so the rail shows structure rather than one flat queue. */ .rl-grp{ display:flex;flex-direction:column;gap:0; margin:12px 0 3px;padding:5px 10px; border-left:3px solid var(--acc,var(--pink));background:var(--cream); border-radius:0 var(--r-sm) var(--r-sm) 0; } .rl-grp:first-child{margin-top:0} .rg-n{font-family:Anton,Impact,sans-serif;font-size:.9rem;line-height:1.15;letter-spacing:.01em} .rg-d{font-size:.72rem;color:var(--ink-52);line-height:1.25} .rl.sub > button,.rl.sub > .rl-s{margin-left:9px;border-left-color:var(--acc-w,var(--ink-08))} .rl.sub.done > button{border-left-color:var(--teal)} .rl.sub.cur > button,.rl.sub.cur > .rl-s{border-left-color:var(--acc,var(--pink))} .rl-grp[data-accent="1"],.rl[data-accent="1"]{--acc:var(--pink);--acc-w:rgba(255,100,146,.3)} .rl-grp[data-accent="2"],.rl[data-accent="2"]{--acc:var(--teal-dk);--acc-w:rgba(31,156,147,.3)} .rl-grp[data-accent="3"],.rl[data-accent="3"]{--acc:#9A6410;--acc-w:rgba(154,100,16,.3)} .rl-grp[data-accent="4"],.rl[data-accent="4"]{--acc:#5A46C8;--acc-w:rgba(90,70,200,.3)} /* ---------- steps ---------- */ .steps{display:flex;flex-direction:column;gap:16px;padding:0} .step{ background:var(--white); border:2px solid var(--ink-08); border-radius:var(--r-lg); padding:clamp(18px,3.4vw,28px); box-shadow:var(--shadow-1); } .step,.estwrap{animation:reveal .3s cubic-bezier(.22,.7,.28,1) both} @keyframes reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.step,.estwrap{animation:none}} .step-head{margin-bottom:6px} .eyebrow{ margin:0 0 8px;font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;font-weight:600; color:var(--teal-dk); } .step-title{font-size:clamp(1.24rem,3.4vw,1.68rem)} .step-title:focus-visible{outline:3px solid var(--teal-dk);outline-offset:4px} .step-head .sub{margin:.42rem 0 0;color:var(--ink-70);font-size:.92rem;max-width:60ch} .step-body{margin-top:18px} /* running summary of the item being configured */ .chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0} .chip{ font-size:.74rem;font-weight:600;line-height:1.2;padding:4px 9px;border-radius:999px; background:var(--cream);color:var(--ink-70); } .chiprm{ font:inherit;font-size:.74rem;font-weight:600;line-height:1.2;padding:4px 2px; background:none;border:0;border-bottom:1px solid var(--ink-08);color:var(--ink-52);cursor:pointer; } .chiprm:hover{color:var(--pink-dk);border-bottom-color:var(--pink)} .chiprm:focus-visible{outline:3px solid var(--teal-dk);outline-offset:2px} /* Was --ink-52 at 11.8px, which measured about 3.5:1 and read as disabled rather than actionable. --ink-70 clears 4.5:1 on both cream surfaces. */ .chiprm{color:var(--ink-70)} .chiprm.armed{color:var(--pink-dk);border-bottom-color:var(--pink-dk);font-weight:600} /* ---------- sticky nav ---------- */ /* The bar is sticky at the viewport bottom, so it floats over whatever is above it in flow. `--navh` reserves matching space under the step so the last option card can always be scrolled clear of the bar instead of sitting behind it. */ .navbar{position:sticky;bottom:0;z-index:19;margin-top:14px;padding-bottom:10px;background:linear-gradient(to bottom,rgba(255,247,238,0),var(--cream-lt) 42%)} .steps{--navh:56px;padding-bottom:var(--navh)} @media (min-width:1080px){ .steps{--navh:64px} } @media print{ .steps{padding-bottom:0} } .embedded .navbar{position:static;background:none} .navbar-in{display:flex;flex-direction:column;gap:8px;padding-top:10px} .navwhy{margin:0;font-size:.84rem;font-weight:600;color:var(--pink-dk)} .navrow{display:flex;gap:10px;align-items:center} .navrow #navback{flex:0 0 auto} .btn-next{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:10px} .nb-sum{font-family:Anton,Impact,sans-serif;font-size:1.06rem;letter-spacing:.02em;white-space:nowrap;flex:0 0 auto} /* No margin of its own — .btn-next is a flex row with gap:10px, so spacing comes from there. */ .nb-sep{opacity:.55;font-weight:400;letter-spacing:normal} @media (min-width:600px){.btn-next{flex:0 0 auto;margin-left:auto;min-width:230px}} /* At 320 the label and the price together came to about half a pixel more than the content box, so a four-figure total wrapped the button onto two lines while a smaller one fitted. Trimming the side padding and the gap buys back the room. */ /* Scoped to .navrow so it outranks the later `.btn{padding:12px 22px}` rule — at equal specificity that one wins on source order. */ @media (max-width:360px){ .navrow .btn-next{padding-left:13px;padding-right:13px;gap:7px} .navrow .btn-next .nb-sum{font-size:1rem} } /* ---------- option cards ---------- */ /* stretch + height:100% on the card itself, so two cards sharing a row match height without forcing every row in the grid to the tallest row (which grid-auto-rows:1fr would do). */ /* 268px, not 228px: material cards carry a photo behind a 46px radio gutter, so a 230px column left the name about 80px and shattered "Galvanized" mid-word. */ .cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));align-items:stretch} .cards.wide{grid-template-columns:repeat(auto-fit,minmax(272px,1fr))} .cards.tight{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} .card{position:relative;display:block;min-height:44px;height:100%} .card input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none} .card .face{ display:flex;flex-direction:column;gap:6px;height:100%; padding:15px 16px 15px 46px; background:var(--cream-lt); border:2px solid var(--ink-14); border-radius:var(--r-md); cursor:pointer; transition:background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease; } .card .face:hover{background:var(--white);border-color:rgba(20,18,16,.3)} .card .face::before{ content:"";position:absolute;left:16px;top:17px;width:20px;height:20px; border:2px solid var(--ink-14);background:var(--white); border-radius:50%;transition:all .16s ease; } .card.check .face::before{border-radius:6px} .card input:checked + .face{ background:#FFEFF4;border-color:var(--pink); box-shadow:inset 0 0 0 2px var(--pink), var(--shadow-1); transform:translateY(-1px); } .card input:checked + .face::before{ background:var(--pink);border-color:var(--pink); box-shadow:inset 0 0 0 3.5px var(--white); } .card.check input:checked + .face::before{ box-shadow:none; background:var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.2 3.2L13 4.8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat; } .card input:focus-visible + .face{outline:3px solid var(--teal-dk);outline-offset:2px} .card input:disabled + .face{opacity:.5;cursor:not-allowed;background:var(--cream)} .card input:disabled + .face:hover{border-color:var(--ink-14);background:var(--cream)} /* The face is a column of text; when a photo is present it becomes a row with the photo on the left and that same column beside it. */ .c-body{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 auto} .card .face.hasshot{flex-direction:row;align-items:flex-start;gap:13px} .c-shot{ flex:0 0 auto;width:74px;height:74px;border-radius:10px;overflow:hidden; background:var(--cream);border:1px solid var(--ink-08); display:flex;align-items:center;justify-content:center; } .c-shot img{width:100%;height:100%;object-fit:cover;display:block} .c-shot.ph svg{width:40px;height:40px;fill:none;stroke:var(--ink-52);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .card input:checked + .face .c-shot{border-color:var(--pink)} .card input:checked + .face .c-shot.ph svg{stroke:var(--pink-dk)} /* `min-width:0` on the label is what lets a long name shrink instead of shoving the price past the card's right edge. Without it a flex item refuses to go below its content width and the price is clipped — which is exactly what happened on every phone between 381 and 430 pixels wide. */ .c-top{display:flex;gap:10px;align-items:baseline;justify-content:space-between} /* break-word, not anywhere: `anywhere` split ordinary words like "Galvanized" across lines. */ .c-name{font-weight:600;font-size:1rem;line-height:1.28;min-width:0;overflow-wrap:break-word} .c-price{ flex:0 0 auto;max-width:100%;font-family:Anton,Impact,sans-serif;font-size:1.12rem;line-height:1; font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;letter-spacing:.01em; } .c-price i{font-family:Inter,sans-serif;font-style:normal;font-size:.62em;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-52);margin-right:.35em} .c-price.free{font-family:Inter,sans-serif;font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-dk)} /* How many people fit. Sits directly under the size number, so the icon reads as a caption on the number rather than as another option chip. The bust is filled, not stroked — a 14px outlined silhouette turns to mush. */ .c-cap{ display:inline-flex;align-items:center;gap:5px;align-self:flex-start; font-size:.9rem;font-weight:700;color:var(--ink-70);line-height:1; font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1; } .c-cap svg{flex:0 0 auto;fill:currentColor;stroke:none;opacity:.85} .c-cap b{font-weight:700} .card input:checked ~ .face .c-cap{color:var(--ink)} /* "optional" next to a form label. Quiet on purpose: it removes an objection, it is not a feature of the field. */ .opt{ display:inline-block;margin-left:7px;padding:2px 7px;border-radius:999px; font-size:.66rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase; color:var(--ink-52);background:var(--ink-08);vertical-align:middle; } .c-note{font-size:.85rem;color:var(--ink-70);margin:0} .c-tag{ display:inline-flex;align-items:center;gap:5px;align-self:flex-start; font-size:.7rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase; padding:3px 8px;border-radius:999px;background:rgba(79,220,209,.28);color:var(--teal-dk); } .c-tag.warn{background:rgba(255,100,146,.16);color:var(--pink-dk)} .c-tag.lock{background:var(--ink-08);color:var(--ink-52)} .c-size{font-family:Anton,Impact,sans-serif;font-size:1.9rem;line-height:1;letter-spacing:.01em;min-width:0} /* Size cards are narrow by design. Stacking the price under the number is the only layout that survives a two-column grid at 150px per column. */ .cards.tight .c-top{flex-direction:column;align-items:flex-start;gap:3px} .cards.tight .c-price{font-size:1.02rem} /* ---------- piece context banner ---------- */ .pbanner{ display:flex;align-items:center;gap:12px; margin:0 0 16px;padding:11px 13px; background:var(--cream);border-radius:var(--r-sm); border-left:5px solid var(--acc,var(--pink)); } .pbanner .pb-shot{ flex:0 0 auto;width:52px;height:52px;border-radius:8px;overflow:hidden; background:var(--white);border:1px solid var(--ink-08); display:flex;align-items:center;justify-content:center; } .pbanner .pb-shot img{width:100%;height:100%;object-fit:cover;display:block} .pbanner .pb-shot.ph svg{width:32px;height:32px;fill:none;stroke:var(--acc,var(--pink-dk));stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .pb-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto} .pb-kick{ font-size:.66rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase; color:var(--acc-dk,var(--pink-dk)); } .pb-name{font-family:Anton,Impact,sans-serif;font-size:1.22rem;line-height:1.1;letter-spacing:.01em} .pb-det{font-size:.82rem;color:var(--ink-70);line-height:1.3;overflow-wrap:anywhere} .pb-rm{flex:0 0 auto} /* One accent per piece, so "which one am I on" is answered before you read. */ .pbanner[data-accent="1"]{--acc:var(--pink);--acc-dk:var(--pink-dk)} .pbanner[data-accent="2"]{--acc:var(--teal);--acc-dk:var(--teal-dk)} .pbanner[data-accent="3"]{--acc:#F2A93B;--acc-dk:#9A6410} .pbanner[data-accent="4"]{--acc:#8E7CF0;--acc-dk:#5A46C8} /* The whole-order page is deliberately inverted — it cannot be mistaken for a piece. */ .pbanner.order{ background:var(--ink);border-left-color:var(--teal); --acc:var(--teal);--acc-dk:var(--teal); } .pbanner.order .pb-name{color:var(--white)} .pbanner.order .pb-det{color:rgba(255,253,250,.72)} .pbanner.order .pb-shot{background:rgba(255,253,250,.08);border-color:rgba(255,253,250,.18)} /* size / material sub-blocks */ .sublabel{ font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-52); margin:0 0 10px;font-weight:600; } .subblock + .subblock{margin-top:22px;padding-top:22px;border-top:2px dashed var(--ink-08)} /* A notice can sit between the size cards and a folded-in question. Without this the folded-in question is flush against the notice and reads as part of it. */ .notice + .subblock{margin-top:24px;padding-top:22px;border-top:2px dashed var(--ink-08)} /* Sits under a sublabel when a sub-block is really a question folded into this page, e.g. the tub temperature choice on the size step. Pulled up tight to the label it belongs to, and given the same measure as the step subtitle. */ .subnote{margin:-4px 0 12px;font-size:.92rem;line-height:1.5;color:var(--ink-70);max-width:56ch} .notice{ display:flex;gap:10px;margin:16px 0 0;padding:13px 15px; background:var(--cream);border-left:4px solid var(--teal);border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:.88rem;color:var(--ink-70); } .notice.pink{border-left-color:var(--pink)} .notice strong{color:var(--ink)} /* ---------- zip ---------- */ .ziprow{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end} .field{display:flex;flex-direction:column;gap:6px} .field label{font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-52);font-weight:600} .field input,.field textarea{ font-family:inherit;font-size:1rem;color:var(--ink);background:var(--cream-lt); border:2px solid var(--ink-14);border-radius:var(--r-sm);padding:12px 14px;min-height:48px; transition:border-color .16s ease,background .16s ease; } .field input:focus,.field textarea:focus{outline:none;border-color:var(--teal-dk);background:var(--white)} .field input:focus-visible,.field textarea:focus-visible{outline:3px solid rgba(79,220,209,.5);outline-offset:1px} .field.zip input{width:9.5ch;font-family:Anton,Impact,sans-serif;font-size:1.5rem;letter-spacing:.06em;font-variant-numeric:tabular-nums} .field.err input{border-color:var(--pink)} .fielderr{font-size:.84rem;color:var(--pink-dk);margin:0} .zipres{margin:18px 0 0} .zipres .win{ display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline; background:rgba(79,220,209,.2);border-radius:var(--r-md);padding:14px 16px; } .zipres .win b{font-size:1rem} .zipres .win span{font-size:.88rem;color:var(--ink-70)} .zipres .surcharge{ background:var(--cream);border-radius:var(--r-md);padding:14px 16px; } .zipres .surcharge .line{display:flex;justify-content:space-between;gap:14px;font-weight:600} .zipres .surcharge .line .num{font-family:Anton,Impact,sans-serif;font-size:1.16rem} .zipres .surcharge p{margin:6px 0 0;font-size:.86rem;color:var(--ink-70)} .oo{background:var(--cream);border-radius:var(--r-md);padding:clamp(16px,3vw,22px)} .oo h3{font-size:1.3rem;margin-bottom:8px} .oo p{color:var(--ink-70);font-size:.94rem;margin:0 0 14px} /* ---------- buttons ---------- */ .btn{ font-family:Inter,sans-serif;font-size:.95rem;font-weight:600;letter-spacing:.01em; min-height:48px;padding:12px 22px;border-radius:999px;border:2px solid transparent; cursor:pointer;transition:transform .14s ease,background .16s ease,box-shadow .16s ease; } .btn:focus-visible{outline:3px solid var(--teal-dk);outline-offset:2px} .btn-primary{background:var(--pink);color:#fff;box-shadow:0 2px 0 var(--pink-dk)} .btn-primary:hover{background:var(--pink-dk);transform:translateY(-1px)} .btn-primary:disabled{background:var(--ink-14);color:var(--ink-52);box-shadow:none;cursor:not-allowed;transform:none} .btn-dark{background:var(--ink);color:var(--cream-lt)} .btn-dark:hover{transform:translateY(-1px)} .btn-ghost{background:transparent;color:inherit;border-color:currentColor;opacity:.9} .btn-ghost:hover{opacity:1;background:rgba(255,255,255,.1)} .btn-outline{background:var(--white);color:var(--ink);border-color:var(--ink-14)} .btn-outline:hover{border-color:var(--ink);transform:translateY(-1px)} .btn-sm{min-height:40px;padding:8px 16px;font-size:.85rem} .btnrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px} .spinner{ display:inline-block;width:15px;height:15px;vertical-align:-2px;margin-right:8px; border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%; animation:spin .7s linear infinite; } @keyframes spin{to{transform:rotate(360deg)}} /* ---------- pending / estimate ---------- */ .pending{ background:var(--cream);border:2px dashed var(--ink-14);border-radius:var(--r-lg); padding:clamp(18px,3.4vw,28px); } .pending h2{font-size:1.4rem} .pending p{color:var(--ink-70);margin:.6rem 0 0;font-size:.95rem} .pending ul{margin:.8rem 0 0;padding-left:1.1rem;color:var(--ink-70);font-size:.93rem} .est{ background:var(--ink);color:var(--cream-lt); border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-2); } .est-top{padding:clamp(20px,4vw,34px)} .est-kicker{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,235,224,.6);margin:0} .est-big{ font-family:Anton,Impact,sans-serif;font-size:clamp(2.6rem,11vw,4.6rem);line-height:.94; font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;margin:.34rem 0 0;letter-spacing:.005em; } .est-big.range{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.16em} .est-big .to{font-size:.38em;color:rgba(244,235,224,.55);padding:0 .1em;font-family:Inter,sans-serif;text-transform:lowercase;letter-spacing:.02em} .est-say{margin:14px 0 0;color:rgba(244,235,224,.82);font-size:1rem;max-width:52ch} .est-conf{ display:inline-flex;align-items:center;gap:8px;margin-top:16px; font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase; padding:6px 13px;border-radius:999px; } .est-conf.firm{background:var(--teal);color:var(--ink)} .est-conf.range{background:rgba(255,100,146,.9);color:#fff} .est-why{background:rgba(244,235,224,.09);padding:clamp(18px,3.4vw,28px);border-top:1px solid rgba(244,235,224,.14)} .est-why h3{font-size:1.08rem;color:var(--cream-lt)} .est-why ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:11px} .est-why li{font-size:.92rem;color:rgba(244,235,224,.82)} .est-why li b{display:block;color:var(--cream-lt);font-size:.95rem} .est-fix{ margin:18px 0 0;padding:14px 16px;background:rgba(79,220,209,.16); border-radius:var(--r-sm);font-size:.92rem;color:rgba(244,235,224,.9); } .est-fix b{color:var(--teal)} .est-fix-act{display:block;margin-top:10px} .panel{ background:var(--white);border:2px solid var(--ink-08);border-radius:var(--r-lg); padding:clamp(18px,3.4vw,28px); } .panel h2{font-size:clamp(1.28rem,3.4vw,1.6rem)} .panel h3{font-size:1.05rem;margin-top:0} .panel + .panel{margin-top:16px} .lines{margin:18px 0 0} .lgroup{margin-top:18px} .lgroup:first-child{margin-top:0} .lgroup > .lg-t{ font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-52); font-weight:600;padding-bottom:7px;border-bottom:2px solid var(--ink-08); } .line{ display:flex;gap:12px;align-items:baseline;justify-content:space-between; width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--ink-08); padding:12px 6px;font:inherit;color:inherit;cursor:pointer;border-radius:var(--r-sm); transition:background .14s ease; } .line:hover{background:var(--cream)} .line:focus-visible{outline:3px solid var(--teal-dk);outline-offset:-2px} .line-l{display:flex;flex-direction:column;gap:2px;min-width:0} .line-l .nm{font-weight:500} .line-l .ed{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-52)} .line .amt{ flex:0 0 auto;font-family:Anton,Impact,sans-serif;font-size:1.1rem; font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1; } .line.static{cursor:default} .line.static:hover{background:none} .tot{ display:flex;justify-content:space-between;gap:14px;align-items:baseline; margin-top:18px;padding-top:16px;border-top:3px solid var(--ink); } .tot .lbl{font-family:Anton,Impact,sans-serif;font-size:1.3rem;text-transform:uppercase} .tot .amt{font-family:Anton,Impact,sans-serif;font-size:2rem;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} .checklist{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} .checklist li{display:flex;gap:10px;align-items:flex-start;font-size:.94rem} .checklist li::before{ content:"";flex:0 0 auto;width:18px;height:18px;margin-top:2px;border-radius:50%; background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 8.4l3 3L12.6 5' fill='none' stroke='%23141210' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; } .exlist{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} .exlist li{display:flex;gap:10px;align-items:flex-start;font-size:.93rem;color:var(--ink-70)} .exlist li::before{content:"";flex:0 0 auto;width:18px;height:2px;margin-top:11px;background:var(--ink-14)} .disclaimer{ margin:18px 0 0;padding:15px 17px;background:var(--cream);border-radius:var(--r-md); font-size:.93rem;font-weight:600; } /* ---------- submit ---------- */ .form{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:18px} .form .field{min-width:0} .form .field input,.form .field textarea{width:100%} .form .full{grid-column:1/-1} .form .trio{grid-column:1/-1;display:grid;gap:14px;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)} @media (max-width:520px){.form .trio{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.form .trio .field:first-child{grid-column:1/-1}} .form textarea{min-height:88px;resize:vertical} .formnote{font-size:.86rem;color:var(--ink-70);margin:14px 0 0} .sent{background:rgba(79,220,209,.2);border-radius:var(--r-md);padding:clamp(18px,3.4vw,26px)} .sent h3{font-size:1.35rem} .sent p{margin:.7rem 0 0;font-size:.96rem;color:var(--ink-70)} .toast{ margin:12px 0 0;font-size:.86rem;font-weight:600;color:var(--teal-dk); } .foot{padding:32px 0 40px;margin-top:26px;border-top:2px solid var(--ink-08);color:var(--ink-52);font-size:.82rem} .foot p{margin:0 0 6px} .foot .fine{max-width:70ch} /* ---------- mobile ---------- */ @media (max-width:640px){ .cards,.cards.wide{grid-template-columns:1fr} .cards.tight{grid-template-columns:repeat(auto-fit,minmax(132px,1fr))} .card .face{padding:14px 14px 14px 44px} .card .face.hasshot{gap:11px} .c-shot{width:62px;height:62px} .c-shot.ph svg{width:34px;height:34px} .pbanner{gap:10px;padding:10px 11px} .pbanner .pb-shot{width:46px;height:46px} .pb-name{font-size:1.1rem} .btnrow .btn{width:100%} .field.zip input{width:100%} .ziprow{gap:10px} .ziprow .btn{width:100%} .proof{font-size:.7rem} .step{padding:16px 15px} } @media (max-width:380px){ .cards.tight{grid-template-columns:1fr} } /* [hidden] must win over the component display rules below (.btn is inline-flex). */ [hidden]{display:none !important} .printmeta{display:none} /* Sits under the estimate summary, on screen and on the printed or saved PDF. Someone reading a saved estimate a week later needs a way to reach us on the page itself. */ .contactline{ margin:8px 0 0;font-size:.9rem;color:var(--ink-70); } .contactline a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:2px solid var(--pink)} .contactline a:hover{color:var(--pink-dk)} /* "Learn more" out to the main site, offered on a build's selection page. */ .lmore{margin:14px 0 0;font-size:.94rem} .lmore a{ display:inline-flex;align-items:center;gap:6px; color:var(--ink);font-weight:600;text-decoration:none; border-bottom:2px solid var(--teal);padding-bottom:1px; } .lmore a:hover{color:var(--teal-dk);border-bottom-color:var(--teal-dk)} .lmore .lm-i{font-size:.85em;line-height:1} @media (max-width:430px){ .est-big.range{flex-direction:column;align-items:flex-start;row-gap:0} .est-big .to{padding:0;line-height:1.35} } /* ---------- print ---------- */ @media print{ body{background:#fff} .deep .intro{display:block !important} .masthead .proof,.intro .promise,.progress,.rail,.navbar,.scene,.step,.pending, .answerpanel,.submitwrap,.foot .fine,.noprint{display:none !important} .wizard{display:block} .wizcol{max-width:none} .sr-title{display:none} .app{max-width:none;padding:0} .intro{padding:10px 0} .intro h1{font-size:2rem;color:#000} .intro h1 span{color:#000} .est{background:#fff;color:#000;box-shadow:none;border:2px solid #000} .est-kicker,.est-say,.est-why li{color:#333} .est-why{background:#f4f4f4;border-top:1px solid #000} .est-why h3,.est-why li b{color:#000} .est-conf{border:1px solid #000;background:#fff !important;color:#000 !important} .est-fix{background:#f4f4f4;color:#000} .panel{border:1px solid #000;box-shadow:none;break-inside:avoid} #step-estimate{display:block !important} .line-l .ed{display:none} .line{padding:8px 0} .printmeta{display:block;margin:0 0 4px;font-size:.8rem;color:#444} /* The phone number has to survive the print, and a colored underline does not. */ .contactline{color:#000;font-size:.9rem} .contactline a{color:#000;border-bottom:none;text-decoration:none} } /* ---------------------------------------------------------------- multi-item UI */ /* "Add another" controls under the build grid */ .addrow{ display:flex; flex-wrap:wrap; gap:8px 14px; margin:14px 0 0; } .addmore{ font:inherit; font-size:.875rem; font-weight:600; color:var(--teal-dk); background:none; border:0; border-bottom:2px solid rgba(31,156,147,.35); padding:4px 2px; min-height:32px; cursor:pointer; border-radius:2px; } .addmore:hover{ color:var(--ink); border-bottom-color:var(--ink); } .addmore:focus-visible{ outline:3px solid var(--teal-dk); outline-offset:2px; } /* Items in this order, with the Remove control (build step and review only) */ .ilist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; } /* Grid, not wrapping flex: a long item label used to push Remove onto its own line while a short one kept it inline, so the buttons down the list did not line up with each other. */ /* Three columns, not two: the accent dot is its own child, and with two tracks it stole the text column and pushed Remove onto a second row. */ .ilrow{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:8px 10px; align-items:center; background:var(--cream-lt); border:2px solid var(--ink-08); border-radius:var(--r-sm); padding:10px 12px; } .ilrow .il-t{ font-size:.9rem; color:var(--ink-70); } /* The same colour that marks this piece's banner and rail section, so the order list, the question pages and the rail all agree on which piece is which. */ .ilrow .il-n{ width:10px;height:10px;border-radius:3px; background:var(--acc,var(--pink)); } .ilrow .il-n[data-accent="1"]{--acc:var(--pink)} .ilrow .il-n[data-accent="2"]{--acc:var(--teal-dk)} .ilrow .il-n[data-accent="3"]{--acc:#9A6410} .ilrow .il-n[data-accent="4"]{--acc:#5A46C8} .ilrow .il-t b{ color:var(--ink); margin-right:6px; } .ilrow .btn{ min-height:36px; padding:6px 14px; font-size:.8rem; } /* Review list — every answer with its actual value */ .panelsub{ margin:.4rem 0 0; font-size:.9rem; color:var(--ink-70); } .answers .line{ border-bottom:1px solid var(--ink-08); align-items:center; } .answers .ansq{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--ink-52); } .answers .nm{ font-weight:500; } .answers .ed{ flex:0 0 auto; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--teal-dk); font-weight:600; } .sr-title{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* Credit lines on the itemized list (the multi-item discount row) */ .line .amt.credit{ color:#1c7b74; } /* ------------------------------------------------------------------ photo drop */ .dropnote{font-size:.9rem;line-height:1.45;color:var(--ink-70);margin:0 0 10px;max-width:52ch} .drop{ display:flex;align-items:center;gap:14px;flex-wrap:wrap; padding:16px 18px;border:2px dashed var(--ink-14);border-radius:var(--r-md); background:var(--cream-lt);transition:border-color .16s ease,background .16s ease; } .drop.over{border-color:var(--teal-dk);background:#fff} /* Visually hidden but still laid out. NOT display:none -- Safari on iOS will not open a file picker for a display:none input, so the photo field depends on this. */ .vh{ position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0; clip-path:inset(50%);overflow:hidden;white-space:nowrap; } /* This is a