/* ========================================================================== SetupTeam — TV wall-mounting estimator Full-screen, one-question-per-screen. Scoped under .tve / .tve-fs so it cannot leak into any other page. Colours, fonts and radii reuse the site tokens (navy #0b1c33, gold #B08D57, Playfair Display, Plus Jakarta Sans). Mobile-first: base rules are phone-first, widened by min-width queries. ========================================================================== */ .tve, .tve-fs { --n:#0b1c33; --n2:#111829; --n3:#0f2747; --n4:#132844; --g:#B08D57; --g2:#C9A96E; --t1:#fff; --t2:#d5cec2; --t3:#9fb0c6; --body:#c3cad9; --gb:rgba(176,141,87,.24); --ok:#5cba88; --warn:#e8b465; --err:#e8887a; --r:10px; font-family:'Plus Jakarta Sans','Barlow',sans-serif; color:var(--t1); } .tve *,.tve *::before,.tve *::after, .tve-fs *,.tve-fs *::before,.tve-fs *::after{box-sizing:border-box;} /* ========================================================================== 1. The launch card that sits in the page ========================================================================== */ .tve-launch{ background:linear-gradient(150deg,#12294a 0%,#0b1c33 100%); border:1px solid var(--gb); border-radius:14px; padding:clamp(28px,6vw,48px); text-align:center; max-width:720px; margin:0 auto; } .tve-launch h3{ font-family:'Playfair Display',Georgia,serif; font-weight:900; font-size:clamp(1.5rem,4.5vw,2.1rem); line-height:1.2; color:var(--t1); margin:0 0 14px; } .tve-launch p{ font-size:clamp(1rem,2.6vw,1.12rem); line-height:1.75; color:var(--body); max-width:46ch; margin:0 auto 26px; } .tve-launch-meta{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px; margin-top:24px; font-size:.86rem; color:var(--t3); } .tve-launch-meta span{display:inline-flex;align-items:center;gap:7px;} .tve-launch-meta svg{width:15px;height:15px;color:var(--g);flex-shrink:0;} /* ========================================================================== 2. Full-screen shell ========================================================================== */ .tve-fs{ position:fixed; inset:0; z-index:9998; background:var(--n); display:none; flex-direction:column; overscroll-behavior:contain; } .tve-fs.is-open{display:flex;} /* Lock BOTH elements: on this site the scrolling element is , so locking only leaves the page scrollbar in place and the fixed shell ends up a scrollbar-width short of the viewport. */ html.tve-locked,body.tve-locked{overflow:hidden;height:100%;} /* Top bar — progress + exit */ .tve-top{ flex:0 0 auto; background:rgba(11,28,51,.98); border-bottom:1px solid rgba(176,141,87,.2); padding:calc(12px + env(safe-area-inset-top)) clamp(16px,4vw,32px) 12px; } .tve-top-row{ display:flex; align-items:center; gap:16px; max-width:1100px; margin:0 auto 11px; } .tve-top-label{ flex:1 1 auto; min-width:0; font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--g); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tve-top-count{flex:0 0 auto;font-size:.78rem;color:var(--t3);letter-spacing:.04em;} .tve-exit{ flex:0 0 auto; width:48px; height:48px; min-height:48px; margin:-11px -11px -11px 0; display:flex; align-items:center; justify-content:center; background:none; border:0; border-radius:8px; cursor:pointer; color:var(--t3); transition:color .2s,background .2s; } .tve-exit:hover{color:var(--t1);background:rgba(255,255,255,.06);} .tve-exit:focus-visible{outline:2px solid rgba(176,141,87,.85);outline-offset:2px;} .tve-exit svg{width:22px;height:22px;} .tve-prog-bar{ max-width:1100px; margin:0 auto; height:4px; background:rgba(176,141,87,.16); border-radius:3px; overflow:hidden; } .tve-prog-fill{ height:100%; background:var(--g); border-radius:3px; width:0; transition:width .4s cubic-bezier(.4,0,.2,1); } /* Scrolling body */ .tve-body{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:clamp(28px,7vw,56px) clamp(20px,5vw,32px) 32px; } .tve-inner{max-width:640px;margin:0 auto;} .tve-inner-wide{max-width:820px;} /* --- Desktop: step sidebar + content card ------------------------------- */ .tve-layout{display:block;} .tve-side{display:none;} @media(min-width:1024px){ .tve-body{padding-top:44px;} .tve-layout{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:56px; max-width:1120px; margin:0 auto; align-items:start; } .tve-side{ display:block; position:sticky; top:0; padding:6px 0 0; border-right:1px solid rgba(176,141,87,.16); } .tve-side-h{ font-size:.7rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase; color:var(--t3); margin:0 0 18px; } .tve-side-list{list-style:none;margin:0;padding:0 24px 0 0;} .tve-side-item{ display:flex; align-items:flex-start; gap:11px; padding:7px 0; font-size:.94rem; line-height:1.45; color:var(--t3); } .tve-side-dot{ flex-shrink:0; width:18px; height:18px; margin-top:1px; border-radius:50%; border:1.5px solid rgba(176,141,87,.32); display:flex; align-items:center; justify-content:center; } .tve-side-dot svg{width:10px;height:10px;color:#0b1c33;} .tve-side-item.is-done{color:var(--t2);} .tve-side-item.is-done .tve-side-dot{background:var(--g);border-color:var(--g);} .tve-side-item.is-now{color:var(--t1);font-weight:700;} .tve-side-item.is-now .tve-side-dot{border-color:var(--g);box-shadow:0 0 0 3px rgba(176,141,87,.16);} .tve-side-item.is-now .tve-side-dot::after{ content:''; width:8px; height:8px; border-radius:50%; background:var(--g); } .tve-side-sub{margin:2px 0 6px 29px;padding:0;list-style:none;} .tve-side-sub li{ font-size:.86rem; line-height:1.5; color:var(--t3); padding:3px 0 3px 14px; position:relative; } .tve-side-sub li::before{ content:''; position:absolute; left:0; top:11px; width:5px; height:5px; border-radius:50%; background:rgba(176,141,87,.3); } .tve-side-sub li.is-done::before{background:var(--g);} .tve-side-sub li.is-now{color:var(--t1);font-weight:600;} .tve-side-sub li.is-now::before{background:var(--g);box-shadow:0 0 0 3px rgba(176,141,87,.18);} /* Content sits left in its track rather than floating in the middle. */ .tve-inner{max-width:660px;margin:0;} .tve-inner-wide{max-width:760px;margin:0;} } /* Bottom action bar */ .tve-foot{ flex:0 0 auto; background:rgba(11,28,51,.98); border-top:1px solid rgba(176,141,87,.2); padding:14px clamp(20px,5vw,32px) calc(14px + env(safe-area-inset-bottom)); } .tve-foot-in{ display:flex; gap:12px; align-items:center; max-width:640px; margin:0 auto; } .tve-foot-in.tve-inner-wide{max-width:820px;} /* ========================================================================== 3. Typography inside a step ========================================================================== */ .tve-step{animation:tve-in .32s ease;} @keyframes tve-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){ .tve-step{animation:none;} .tve-fs *,.tve *{transition:none !important;} } .tve-eyebrow{ display:block; font-size:.75rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--g); margin-bottom:14px; } .tve-step h2{ font-family:'Playfair Display',Georgia,serif; font-weight:900; font-style:normal; font-size:clamp(1.75rem,6.2vw,2.6rem); line-height:1.18; letter-spacing:-.01em; color:var(--t1); margin:0 0 14px; } .tve-step h2 em{color:var(--g);font-style:normal;} .tve-step h2:focus{outline:none;} .tve-lede{ font-size:clamp(1.02rem,2.8vw,1.14rem); line-height:1.75; color:var(--body); margin:0 0 32px; max-width:52ch; } .tve-sub{ font-size:1rem; line-height:1.7; color:var(--t3); margin:0 0 22px; max-width:52ch; } /* ========================================================================== 4. Choice cards ========================================================================== */ .tve-opts{display:grid;grid-template-columns:1fr;gap:12px;} .tve-opts-2{grid-template-columns:repeat(2,1fr);} @media(min-width:620px){ .tve-opts-auto{grid-template-columns:repeat(2,1fr);} } .tve-opt{position:relative;display:block;} /* Transparent input stretched over the whole card rather than a 1x1 sliver: a 1x1 opacity:0 input gets dropped from the accessibility tree, and the card then has no exposed control at all. Full-size keeps it exposed AND is what receives the pointer. */ .tve-opt input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:2; } .tve-opt-box{ position:relative; z-index:1; display:flex; align-items:center; gap:16px; min-height:72px; padding:18px 20px; background:var(--n4); border:1.5px solid var(--gb); border-radius:var(--r); cursor:pointer; transition:border-color .18s,background .18s,transform .18s; } .tve-opt:hover .tve-opt-box{border-color:rgba(176,141,87,.55);background:#16304f;} .tve-opt input:checked + .tve-opt-box{ border-color:var(--g); background:rgba(176,141,87,.14); } .tve-opt input:focus-visible + .tve-opt-box{ outline:2px solid rgba(176,141,87,.85); outline-offset:3px; } .tve-opt-ico{flex-shrink:0;width:46px;height:36px;color:var(--g);} .tve-opt-ico svg{width:100%;height:100%;display:block;} .tve-opt-txt{min-width:0;} .tve-opt-t{ display:block; font-size:1.1rem; font-weight:600; color:var(--t1); line-height:1.4; } .tve-opt-d{ display:block; font-size:.95rem; color:var(--t3); line-height:1.62; margin-top:5px; } .tve-opt-flag{ display:inline-block; margin-top:8px; padding:3px 9px; border-radius:4px; background:rgba(232,180,101,.14); border:1px solid rgba(232,180,101,.36); font-size:.72rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--warn); } /* Short chip answers (Yes / No / Not sure) */ .tve-opts-chip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;} .tve-opts-chip .tve-opt-box{ min-height:64px; justify-content:center; text-align:center; padding:16px 12px; } .tve-opts-chip .tve-opt-t{font-size:1.02rem;} @media(max-width:400px){ .tve-opts-chip{grid-template-columns:1fr;} .tve-opts-chip .tve-opt-box{min-height:56px;} } /* ========================================================================== 5. Checkbox rows ========================================================================== */ .tve-check{ display:flex; align-items:flex-start; gap:15px; min-height:64px; padding:17px 20px; background:var(--n4); border:1.5px solid var(--gb); border-radius:var(--r); cursor:pointer; margin-bottom:11px; transition:border-color .18s,background .18s; } .tve-check:hover{border-color:rgba(176,141,87,.5);} .tve-check input{ flex-shrink:0; width:22px; height:22px; margin:2px 0 0; accent-color:var(--g); cursor:pointer; } .tve-check input:focus-visible{outline:2px solid rgba(176,141,87,.85);outline-offset:3px;} .tve-check:has(input:checked){border-color:var(--g);background:rgba(176,141,87,.12);} .tve-check-t{font-size:1.04rem;font-weight:600;color:var(--t1);line-height:1.45;} .tve-check-d{ display:block; font-size:.93rem; color:var(--t3); line-height:1.6; margin-top:5px; font-weight:400; } /* Nested follow-up under a ticked box */ .tve-sub-field{ margin:-4px 0 14px 20px; padding:16px 18px; border-left:2px solid var(--gb); border-radius:0 var(--r) var(--r) 0; background:rgba(255,255,255,.02); } /* ========================================================================== 6. Inputs ========================================================================== */ .tve-field{margin-bottom:20px;} .tve-field label,.tve-label{ display:block; font-size:1rem; font-weight:600; color:var(--t1); margin-bottom:9px; } .tve-input,.tve-textarea{ width:100%; min-height:58px; padding:16px 18px; background:var(--n2); border:1.5px solid var(--gb); border-radius:var(--r); color:var(--t1); font-family:inherit; font-size:1.06rem; line-height:1.4; transition:border-color .18s; -webkit-appearance:none; appearance:none; } .tve-textarea{min-height:130px;resize:vertical;padding-top:15px;} .tve-input:focus,.tve-textarea:focus{ outline:2px solid rgba(176,141,87,.85); outline-offset:2px; border-color:var(--g); } .tve-input::placeholder,.tve-textarea::placeholder{color:#7182a0;} .tve-input[aria-invalid="true"],.tve-textarea[aria-invalid="true"]{border-color:var(--err);} .tve-input-sm{max-width:190px;} /* Size question — quick-pick chips, then an exact-inches field */ .tve-size-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px;} .tve-size-chip{ min-width:74px; min-height:56px; padding:14px 18px; background:var(--n4); border:1.5px solid var(--gb); border-radius:var(--r); color:var(--t1); font-family:inherit; font-size:1.06rem; font-weight:700; cursor:pointer; transition:border-color .18s,background .18s,color .18s; } .tve-size-chip:hover{border-color:rgba(176,141,87,.55);background:#16304f;} .tve-size-chip:focus-visible{outline:2px solid rgba(176,141,87,.85);outline-offset:3px;} .tve-size-chip.is-on{background:var(--g);border-color:var(--g);color:#0b1c33;} .tve-or{ display:flex; align-items:center; gap:16px; margin:26px 0 20px; color:var(--t3); font-size:.9rem; } .tve-or::before,.tve-or::after{ content:''; flex:1 1 auto; height:1px; background:rgba(176,141,87,.2); } /* Size question */ .tve-size-row{display:flex;align-items:center;gap:14px;} .tve-size-row .tve-input{max-width:170px;font-size:1.5rem;font-weight:700;} .tve-size-unit{font-size:1.1rem;color:var(--t3);font-weight:500;} .tve-size-vis{ display:flex; align-items:center; gap:18px; margin-top:26px; padding:20px; background:rgba(255,255,255,.025); border:1px solid rgba(176,141,87,.14); border-radius:var(--r); } .tve-size-vis svg{flex-shrink:0;height:56px;width:auto;color:var(--g);} .tve-size-note{font-size:.97rem;color:var(--body);line-height:1.65;} .tve-err{ display:none; margin-top:10px; font-size:.95rem; color:var(--err); line-height:1.55; } .tve-err.is-shown{display:block;} /* ========================================================================== 7. Notices ========================================================================== */ .tve-note{ margin:22px 0 0; padding:18px 20px; border-radius:var(--r); background:rgba(176,141,87,.09); border:1px solid var(--gb); font-size:1rem; line-height:1.7; color:var(--t2); } .tve-note strong{color:var(--t1);font-weight:700;} .tve-note a{color:var(--g);} .tve-note-warn{background:rgba(232,180,101,.1);border-color:rgba(232,180,101,.38);} .tve-note-warn strong{color:var(--warn);} .tve-note-ok{background:rgba(92,186,136,.09);border-color:rgba(92,186,136,.34);} .tve-note-ok strong{color:var(--ok);} /* ========================================================================== 8. Summary cards ========================================================================== */ .tve-sum-card{ background:var(--n4); border:1px solid var(--gb); border-radius:var(--r); padding:20px 22px; margin-bottom:14px; } .tve-sum-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px; } .tve-sum-head h3{font-size:1.12rem;font-weight:700;color:var(--t1);margin:0;} .tve-sum-list{list-style:none;margin:0;padding:0;} .tve-sum-list li{ font-size:.98rem; color:var(--body); line-height:1.7; padding:4px 0 4px 18px; position:relative; } .tve-sum-list li::before{ content:''; position:absolute; left:0; top:14px; width:6px; height:6px; border-radius:50%; background:var(--g); } .tve-linkbtn{ background:none; border:0; padding:10px 6px; min-height:44px; color:var(--g); font-family:inherit; font-size:.95rem; font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:4px; } .tve-linkbtn:hover{color:var(--g2);} .tve-linkbtn:focus-visible{outline:2px solid rgba(176,141,87,.85);outline-offset:2px;border-radius:4px;} .tve-linkbtn-danger{color:var(--err);} /* ========================================================================== 9. Result ========================================================================== */ .tve-result-head{ background:linear-gradient(145deg,#153054 0%,#0b1c33 100%); border:1.5px solid var(--g); border-radius:14px; padding:clamp(26px,6vw,40px) clamp(20px,5vw,32px); margin-bottom:28px; text-align:center; } .tve-result-label{ display:block; font-size:.75rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--g); margin-bottom:14px; } .tve-result-range{ display:block; font-family:'Playfair Display',Georgia,serif; font-weight:900; font-size:clamp(2.4rem,10vw,3.6rem); line-height:1.04; color:var(--t1); } .tve-result-tax{ display:block; font-size:1.05rem; color:var(--t2); margin-top:10px; letter-spacing:.04em; } .tve-result-valid{ display:block; font-size:.92rem; color:var(--t3); line-height:1.6; margin-top:16px; max-width:40ch; margin-left:auto; margin-right:auto; } .tve-items{ border:1px solid var(--gb); border-radius:var(--r); overflow:hidden; margin-bottom:24px; } .tve-items-gt{ padding:13px 18px; background:rgba(176,141,87,.09); font-size:.76rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--g); } .tve-item{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; padding:14px 18px; background:var(--n4); border-top:1px solid rgba(176,141,87,.12); } .tve-item-l{font-size:1rem;color:var(--body);line-height:1.6;} .tve-item-v{ font-size:1rem; font-weight:700; color:var(--t1); white-space:nowrap; text-align:right; } .tve-item-was{ display:block; font-size:.86rem; font-weight:400; color:var(--t3); text-decoration:line-through; } .tve-item-free .tve-item-v{color:var(--ok);} .tve-item-pending .tve-item-v{ color:var(--warn); font-size:.88rem; font-weight:600; white-space:normal; max-width:160px; } .tve-pending-box{ margin-bottom:24px; padding:20px 22px; border-radius:var(--r); background:rgba(232,180,101,.1); border:1px solid rgba(232,180,101,.38); } .tve-pending-box h3{font-size:1.08rem;font-weight:700;color:var(--warn);margin:0 0 11px;} .tve-pending-box ul{margin:0;padding-left:20px;} .tve-pending-box li{font-size:.98rem;color:var(--t2);line-height:1.7;margin-bottom:7px;} /* ========================================================================== 10. Buttons ========================================================================== */ .tve-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:56px; padding:16px 30px; border-radius:var(--r); font-family:inherit; font-size:1.05rem; font-weight:700; letter-spacing:.01em; border:1.5px solid transparent; cursor:pointer; text-decoration:none; transition:background .2s,border-color .2s,color .2s,transform .2s; } .tve-btn:focus-visible{outline:2px solid rgba(176,141,87,.85);outline-offset:3px;} .tve-btn-primary{background:var(--g);color:#0b1c33;flex:1 1 auto;} .tve-btn-primary:hover{background:var(--g2);text-decoration:none;transform:translateY(-1px);} .tve-btn-primary[disabled]{opacity:.5;cursor:not-allowed;transform:none;} .tve-btn-ghost{background:transparent;color:var(--t2);border-color:var(--gb);flex:0 0 auto;} .tve-btn-ghost:hover{border-color:var(--g);color:var(--t1);background:rgba(176,141,87,.07);text-decoration:none;} .tve-btn-call{background:transparent;color:var(--g);border-color:var(--g);} .tve-btn-call:hover{background:rgba(176,141,87,.12);text-decoration:none;} .tve-btn-lg{min-height:62px;font-size:1.12rem;padding:18px 40px;} .tve-btn-block{width:100%;} .tve-actions{display:flex;flex-direction:column;gap:12px;margin-top:8px;} @media(min-width:620px){ .tve-actions{flex-direction:row;} .tve-actions .tve-btn{flex:1 1 0;} } .tve-secondary-row{margin-top:20px;text-align:center;} /* ========================================================================== 11. Contact form ========================================================================== */ .tve-form-grid{display:grid;grid-template-columns:1fr;gap:0;} @media(min-width:620px){ .tve-form-grid{grid-template-columns:1fr 1fr;gap:0 18px;} .tve-form-grid .tve-field-full{grid-column:1 / -1;} } .tve-drop{ border:1.5px dashed rgba(176,141,87,.45); border-radius:var(--r); padding:28px 20px; text-align:center; background:rgba(176,141,87,.05); transition:border-color .2s,background .2s; } .tve-drop.is-over{border-color:var(--g);background:rgba(176,141,87,.12);} .tve-drop p{font-size:.95rem;color:var(--t3);line-height:1.65;margin:12px 0 0;} .tve-filelist{list-style:none;margin:14px 0 0;padding:0;} .tve-filelist li{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 15px; background:var(--n2); border:1px solid var(--gb); border-radius:8px; margin-bottom:9px; font-size:.94rem; color:var(--t2); } .tve-honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;} /* ========================================================================== 12. Success ========================================================================== */ .tve-success{text-align:center;} .tve-success-ico{ width:76px; height:76px; margin:0 auto 24px; border-radius:50%; background:rgba(92,186,136,.14); border:1.5px solid rgba(92,186,136,.5); display:flex; align-items:center; justify-content:center; color:var(--ok); } .tve-success-ico svg{width:36px;height:36px;} .tve-ref{ display:inline-block; margin:18px 0 22px; padding:14px 26px; border-radius:var(--r); background:rgba(176,141,87,.12); border:1px solid var(--gb); font-size:1.2rem; font-weight:700; letter-spacing:.07em; color:var(--g); } /* ========================================================================== 13. Screen-reader only ========================================================================== */ .tve-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* --- Blocked-continue banner --------------------------------------------- * Sits directly above the action bar so the reason a Continue did nothing is always visible, not just announced to assistive tech. */ .tve-blocked{ display:none; padding:14px clamp(20px,5vw,32px); background:rgba(232,180,101,.14); border-top:1px solid rgba(232,180,101,.4); color:var(--warn); font-size:.98rem; font-weight:600; line-height:1.55; text-align:center; } .tve-blocked.is-shown{display:block;} @media(min-width:1024px){ .tve-blocked{text-align:left;} } /* --- Two-up option lists on desktop --------------------------------------- * Declared last on purpose: `.tve-opts` and `.tve-opts-dense` are both single class selectors, so source order decides. Placing this after the base `.tve-opts{grid-template-columns:1fr}` is what makes it win. */ @media(min-width:1024px){ .tve-opts.tve-opts-dense{grid-template-columns:repeat(2,1fr);} } /* --- Per-option price pills ----------------------------------------------- * The price consequence of a single choice, shown on the card itself. This is deliberately NOT a running total — the total appears only on the result screen. Borrowed as a pattern from guided quotes that label each answer with its own cost, which makes trade-offs legible without pre-empting the result. */ .tve-opt-price{ flex-shrink:0; margin-left:auto; align-self:center; padding:6px 12px; border-radius:999px; background:rgba(176,141,87,.14); border:1px solid rgba(176,141,87,.34); color:var(--g); font-size:.92rem; font-weight:700; white-space:nowrap; } .tve-opt-price-free{ background:rgba(92,186,136,.12); border-color:rgba(92,186,136,.34); color:var(--ok); font-size:.82rem; font-weight:600; } .tve-opt-price-review{ background:rgba(232,180,101,.12); border-color:rgba(232,180,101,.36); color:var(--warn); font-size:.78rem; font-weight:600; } .tve-check .tve-opt-price{margin-left:auto;} .tve-opt input:checked + .tve-opt-box .tve-opt-price{ background:rgba(176,141,87,.26); border-color:var(--g); } .tve-pricecap{ margin-top:16px; font-size:.88rem; line-height:1.6; color:var(--t3); } /* Keep the pill from crushing the label on narrow phones. */ @media(max-width:420px){ .tve-opt-box{flex-wrap:wrap;} .tve-opt-price{margin-left:62px;margin-top:4px;} .tve-opt-ico + .tve-opt-txt{flex:1 1 100%;} } /* Three buttons in the footer on the optional step. */ .tve-foot-in .tve-btn-ghost[data-act="skip-extras"]{flex:0 1 auto;} @media(max-width:520px){ .tve-foot-in{flex-wrap:wrap;} .tve-foot-in .tve-btn[data-act="back"]{flex:1 1 40%;} .tve-foot-in .tve-btn[data-act="skip-extras"]{flex:1 1 50%;} .tve-foot-in .tve-btn-primary{flex:1 1 100%;} } /* ========================================================================== INLINE CARD LAYOUT (supersedes the full-screen overlay) The overlay is gone: it required marking the page inert, and inert inheritance made the estimator unclickable. An inline card has no focus trap, no scroll lock and no stacking context to get wrong. These rules come last so they win over the earlier shell rules. ========================================================================== */ .tve-card{ max-width:820px; margin:0 auto; background:var(--n2); border:1px solid var(--gb); border-radius:16px; overflow:hidden; box-shadow:0 18px 50px rgba(0,0,0,.28); } .tve-cardhead{ display:flex; align-items:center; justify-content:center; gap:10px; padding:15px 20px; background:linear-gradient(135deg,#16304f 0%,#0f2747 100%); border-bottom:1px solid var(--gb); font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--g); } .tve-cardhead svg{width:18px;height:18px;flex-shrink:0;} .tve-cardfoot{ max-width:820px; margin:16px auto 0; text-align:center; font-size:.95rem; color:var(--t3); } .tve-cardfoot a{color:var(--g);} /* Reset the shell-era flex/scroll assumptions for the inline card. */ .tve-card .tve-top{position:static;background:none;border-bottom:1px solid rgba(176,141,87,.16);padding:16px clamp(18px,4vw,28px) 14px;} .tve-card .tve-top-row{max-width:none;margin:0 0 10px;} .tve-card .tve-prog-bar{max-width:none;} .tve-card .tve-body{ flex:none; overflow:visible; padding:clamp(24px,5vw,36px) clamp(18px,4vw,32px) 8px; } .tve-card .tve-inner, .tve-card .tve-inner-wide{max-width:none;margin:0;} .tve-card .tve-foot{ position:static; background:none; border-top:1px solid rgba(176,141,87,.16); padding:16px clamp(18px,4vw,28px) 20px; margin:20px 0 0; } .tve-card .tve-foot-in{max-width:none;margin:0;} .tve-card .tve-foot-in:empty{display:none;} .tve-card .tve-foot:has(.tve-foot-in:empty){display:none;} /* ---- How many TVs -------------------------------------------------------- */ .tve-counts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;} @media(min-width:620px){.tve-counts{grid-template-columns:repeat(6,1fr);}} .tve-count{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:84px; padding:14px 8px; background:var(--n4); border:1.5px solid var(--gb); border-radius:var(--r); color:var(--t1); font-family:inherit; cursor:pointer; transition:border-color .18s,background .18s,transform .12s; } .tve-count:hover{border-color:rgba(176,141,87,.55);background:#16304f;} .tve-count:active{transform:scale(.97);} .tve-count:focus-visible{outline:2px solid rgba(176,141,87,.85);outline-offset:3px;} .tve-count.is-on{background:var(--g);border-color:var(--g);color:#0b1c33;} .tve-count-n{font-family:'Playfair Display',Georgia,serif;font-weight:900;font-size:1.7rem;line-height:1;} .tve-count-l{font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.8;} .tve-count-more .tve-count-n{font-size:1.35rem;} /* ---- Size: slider + live readout ---------------------------------------- */ .tve-size-readout{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:18px; } .tve-size-num{ font-family:'Playfair Display',Georgia,serif; font-weight:900; font-size:clamp(2.8rem,11vw,4rem); line-height:1; color:var(--g); } .tve-size-in{font-size:1.05rem;color:var(--t3);font-weight:500;} .tve-size-tier{ margin-left:auto; align-self:center; padding:7px 16px; border-radius:999px; background:rgba(176,141,87,.14); border:1px solid rgba(176,141,87,.34); font-size:.92rem; font-weight:700; color:var(--g); white-space:nowrap; } .tve-range{ -webkit-appearance:none; appearance:none; width:100%; height:38px; background:transparent; cursor:pointer; margin:0; } .tve-range:focus-visible{outline:2px solid rgba(176,141,87,.85);outline-offset:4px;border-radius:8px;} .tve-range::-webkit-slider-runnable-track{ height:8px; border-radius:99px; background:linear-gradient(to right,var(--g) 0,var(--g) var(--pct,0%),rgba(176,141,87,.2) var(--pct,0%),rgba(176,141,87,.2) 100%); } .tve-range::-moz-range-track{height:8px;border-radius:99px;background:rgba(176,141,87,.2);} .tve-range::-moz-range-progress{height:8px;border-radius:99px;background:var(--g);} .tve-range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:30px; height:30px; margin-top:-11px; border-radius:50%; background:var(--g); border:3px solid var(--n2); box-shadow:0 2px 10px rgba(0,0,0,.45); } .tve-range::-moz-range-thumb{ width:24px; height:24px; border-radius:50%; background:var(--g); border:3px solid var(--n2); box-shadow:0 2px 10px rgba(0,0,0,.45); } .tve-range-ends{ display:flex; justify-content:space-between; font-size:.82rem; color:var(--t3); margin-top:-4px; } .tve-size-note{font-size:.97rem;line-height:1.65;color:var(--body);margin:14px 0 0;} /* ---- Booking calendar on the result screen ------------------------------ */ .tve-cal{ margin-top:26px; padding:22px; border-radius:var(--r); background:var(--n4); border:1px solid var(--gb); } .tve-cal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;} .tve-cal-head h3{font-size:1.12rem;font-weight:700;color:var(--t1);margin:0;} .tve-cal-nav{display:flex;gap:8px;} .tve-cal-arrow{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:transparent; border:1px solid var(--gb); border-radius:8px; color:var(--t2); cursor:pointer; transition:border-color .18s,color .18s; } .tve-cal-arrow:hover{border-color:var(--g);color:var(--t1);} .tve-cal-arrow:focus-visible{outline:2px solid rgba(176,141,87,.85);outline-offset:2px;} .tve-cal-arrow svg{width:18px;height:18px;} .tve-cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;} .tve-cal-day{ display:flex; flex-direction:column; align-items:center; gap:2px; min-height:62px; padding:9px 2px; background:var(--n2); border:1.5px solid var(--gb); border-radius:8px; color:var(--t1); font-family:inherit; cursor:pointer; transition:border-color .18s,background .18s; } .tve-cal-day:hover:not(.is-off){border-color:rgba(176,141,87,.55);} .tve-cal-day:focus-visible{outline:2px solid rgba(176,141,87,.85);outline-offset:2px;} .tve-cal-day.is-on{background:var(--g);border-color:var(--g);color:#0b1c33;} .tve-cal-day.is-off{opacity:.3;cursor:not-allowed;} .tve-cal-dow{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.75;} .tve-cal-dom{font-size:1.1rem;font-weight:700;line-height:1;} .tve-cal-slots{margin-top:18px;} .tve-cal-sub{font-size:.9rem;color:var(--t3);margin:0 0 10px;} .tve-cal-slotgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;} @media(min-width:520px){.tve-cal-slotgrid{grid-template-columns:repeat(3,1fr);}} .tve-cal-slot{ min-height:52px; padding:13px 8px; background:var(--n2); border:1.5px solid var(--gb); border-radius:8px; color:var(--t1); font-family:inherit; font-size:1rem; font-weight:600; cursor:pointer; transition:border-color .18s,background .18s; } .tve-cal-slot:hover:not(.is-off){border-color:rgba(176,141,87,.55);} .tve-cal-slot:focus-visible{outline:2px solid rgba(176,141,87,.85);outline-offset:2px;} .tve-cal-slot.is-on{background:var(--g);border-color:var(--g);color:#0b1c33;} .tve-cal-slot.is-off{opacity:.32;cursor:not-allowed;text-decoration:line-through;} .tve-cal-msg{font-size:.95rem;line-height:1.65;color:var(--t3);margin:8px 0 0;} .tve-cal-msg a{color:var(--g);} /* --- Contrast + cascade corrections -------------------------------------- * The gold price pill measured 3.96:1 unchecked and 3.09:1 when selected — both under WCAG AA 4.5:1 for 14.7px/700 text, and the SELECTED option was the least readable thing on screen. Selection is already carried by the card border, so the pill drops its tinted fill and uses the lighter gold. */ .tve-opt-price{ background:var(--n2); border-color:rgba(176,141,87,.45); color:var(--g2); } .tve-opt input:checked + .tve-opt-box .tve-opt-price{ background:var(--n2); border-color:var(--g); color:var(--g2); } /* Let the pill yield before the label does, so option cards stop going ragged. */ .tve-opt-price{min-width:0;} /* At narrow widths the icon was being orphaned on its own row. */ @media(max-width:420px){ .tve-opt-ico + .tve-opt-txt{flex:1 1 calc(100% - 62px);} .tve-opt-price{margin-left:0;flex-basis:100%;text-align:center;} } /* Card radius follows the site token rather than inventing a new one. */ .tve-card{border-radius:8px;} /* --- Result-screen extras + the honest caveat ---------------------------- */ .tve-extras{ margin-top:26px; padding:20px 22px; border-radius:8px; background:var(--n4); border:1px solid var(--gb); } .tve-extras h3{font-size:1.08rem;font-weight:700;color:var(--t1);margin:0 0 4px;} .tve-extras-sub{font-size:.93rem;color:var(--t3);line-height:1.6;margin:0 0 14px;} .tve-extras .tve-check{background:var(--n2);} .tve-disclaimer{ display:flex; gap:14px; align-items:flex-start; margin-top:24px; padding:20px 22px; border-radius:8px; background:rgba(232,180,101,.09); border:1px solid rgba(232,180,101,.36); } .tve-disclaimer svg{width:24px;height:24px;flex-shrink:0;color:var(--warn);margin-top:1px;} .tve-disclaimer strong{display:block;color:var(--warn);font-size:1.02rem;font-weight:700;margin-bottom:6px;} .tve-disclaimer p{font-size:.96rem;line-height:1.7;color:var(--t2);margin:0;} /* Size cards carry no icon, so let the label use the full width. */ .tve-opts .tve-opt-box:not(:has(.tve-opt-ico)){gap:12px;} /* ========================================================================== CARD PRESENTATION — compact, scannable, two-up option grid. Modelled on the layout the owner picked out: coloured header strip, card title, "Step N of M" + percentage, small question label, tight two-column buttons with the price under the label, full-width Back. SetupTeam palette, not the reference's blue. Appended last on purpose — source order settles the single-class conflicts. ========================================================================== */ .tve-card{ max-width:760px; margin:0 auto; background:linear-gradient(180deg,#101f36 0%,#0c1a2f 100%); border:1px solid rgba(176,141,87,.28); border-radius:14px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.42); } /* Header strip */ .tve-cardhead{ display:flex; align-items:center; justify-content:center; gap:11px; padding:16px 20px; background:linear-gradient(135deg,#B08D57 0%,#9a7a48 100%); border-bottom:none; font-family:'Plus Jakarta Sans','Barlow',sans-serif; font-size:.95rem; font-weight:700; letter-spacing:.02em; text-transform:none; color:#0b1c33; } .tve-cardhead svg{width:20px;height:20px;color:#0b1c33;} /* Progress */ .tve-card .tve-top{ background:none; border-bottom:none; padding:12px clamp(18px,4vw,28px) 0; } .tve-card .tve-top-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; max-width:none; margin:0 0 9px; } .tve-top-label{ font-family:'Plus Jakarta Sans','Barlow',sans-serif; font-size:.92rem; font-weight:500; letter-spacing:0; text-transform:none; color:var(--t3); white-space:nowrap; overflow:visible; } .tve-top-count{font-size:.92rem;font-weight:600;color:var(--t3);letter-spacing:0;} .tve-card .tve-prog-bar{max-width:none;height:6px;background:rgba(255,255,255,.07);border-radius:99px;} .tve-prog-fill{background:var(--g);border-radius:99px;} /* Body */ .tve-card .tve-body{ flex:none; overflow:visible; padding:22px clamp(18px,4vw,28px) 6px; } /* Question label — compact, not a display headline */ .tve-step h2{ font-family:'Plus Jakarta Sans','Barlow',sans-serif; font-size:1.16rem; font-weight:700; line-height:1.4; letter-spacing:0; color:var(--t1); margin:0 0 16px; } .tve-step h2 em{color:var(--g);font-style:normal;} .tve-eyebrow{display:none;} .tve-lede{ font-size:.95rem; line-height:1.65; color:var(--t3); margin:-8px 0 18px; max-width:60ch; } /* Two-up option grid */ .tve-opts, .tve-opts-2, .tve-opts-auto, .tve-opts-dense, .tve-opts-chip{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; } .tve-opt input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2;margin:0;} .tve-opt-box{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:74px; padding:15px 12px; background:rgba(255,255,255,.03); border:1px solid rgba(176,141,87,.22); border-radius:10px; text-align:center; cursor:pointer; transition:border-color .16s,background .16s,transform .1s; } .tve-opt:hover .tve-opt-box{border-color:rgba(176,141,87,.6);background:rgba(176,141,87,.07);} .tve-opt-box:active{transform:scale(.985);} .tve-opt input:checked + .tve-opt-box{ border-color:var(--g); background:rgba(176,141,87,.16); box-shadow:inset 0 0 0 1px var(--g); } .tve-opt input:focus-visible + .tve-opt-box{outline:2px solid rgba(176,141,87,.9);outline-offset:3px;} .tve-opt-ico{display:none;} .tve-opt-txt{min-width:0;width:100%;} .tve-opt-t{ display:block; font-family:'Plus Jakarta Sans','Barlow',sans-serif; font-size:1rem; font-weight:700; color:var(--t1); line-height:1.3; } .tve-opt-d{ display:block; font-size:.82rem; color:var(--t3); line-height:1.45; margin-top:3px; } .tve-opt-flag{ display:inline-block; margin-top:5px; padding:2px 8px; border-radius:99px; background:rgba(176,141,87,.16); border:none; font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--g2); } /* Price sits UNDER the label, like the reference */ .tve-opt-price{ display:block; margin:3px 0 0; padding:0; background:none; border:none; border-radius:0; font-size:.95rem; font-weight:700; color:var(--g2); white-space:nowrap; } .tve-opt-price-free{background:none;border:none;color:var(--t3);font-size:.82rem;font-weight:500;} .tve-opt-price-review{background:none;border:none;color:var(--warn);font-size:.78rem;font-weight:600;white-space:normal;} .tve-opt input:checked + .tve-opt-box .tve-opt-price{background:none;border:none;color:var(--g2);} /* Full-width options where two-up would look wrong */ .tve-opts-full{grid-template-columns:1fr;} .tve-opts-full .tve-opt-box{flex-direction:row;justify-content:flex-start;text-align:left;gap:12px;} /* How-many-TVs picker inherits the same look */ .tve-counts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;} @media(min-width:560px){.tve-counts{grid-template-columns:repeat(6,1fr);}} .tve-count{ min-height:74px; padding:14px 8px; background:rgba(255,255,255,.03); border:1px solid rgba(176,141,87,.22); border-radius:10px; } .tve-count:hover{border-color:rgba(176,141,87,.6);background:rgba(176,141,87,.07);} .tve-count.is-on{background:var(--g);border-color:var(--g);color:#0b1c33;} .tve-count-n{font-family:'Plus Jakarta Sans','Barlow',sans-serif;font-weight:800;font-size:1.5rem;} .tve-count-l{font-size:.72rem;} /* Footer: full-width Back */ .tve-card .tve-foot{ position:static; background:none; border-top:none; padding:4px clamp(18px,4vw,28px) 24px; margin:14px 0 0; } .tve-card .tve-foot-in{display:flex;gap:12px;max-width:none;margin:0;} .tve-card .tve-foot-in .tve-btn{flex:1 1 0;} .tve-btn{ min-height:54px; padding:15px 24px; border-radius:10px; font-family:'Plus Jakarta Sans','Barlow',sans-serif; font-size:1rem; font-weight:700; } .tve-btn-ghost{ background:rgba(255,255,255,.03); color:var(--t2); border:1px solid rgba(176,141,87,.22); } .tve-btn-ghost:hover{border-color:var(--g);color:var(--t1);background:rgba(176,141,87,.07);} /* Line under the card */ .tve-cardfoot{ max-width:760px; margin:18px auto 0; text-align:center; font-size:.95rem; color:var(--t3); } .tve-cardfoot a{color:var(--g2);text-decoration:none;font-weight:600;} .tve-cardfoot a:hover{text-decoration:underline;} /* Phone */ @media(max-width:480px){ .tve-step h2{font-size:1.06rem;} .tve-opt-box{min-height:70px;padding:13px 10px;} .tve-opt-t{font-size:.95rem;} .tve-opts-full .tve-opt-box{flex-direction:column;text-align:center;} } /* --- Cascade: the page stylesheet's TYPE selectors outrank ours ----------- * Moving the page CSS into cured `.nca-s2 *` (equal specificity, source order decides) but cannot cure `.nca-s2 p`, which is (0,1,1) and beats every single-class rule here no matter the order. These are scoped to (0,2,1) so the estimator owns its own paragraphs again. */ .tve p, .tve-card p{ font-family:'Plus Jakarta Sans','Barlow',sans-serif; font-size:1rem; line-height:1.6; color:var(--t3); margin:0; } .tve p.tve-lede, .tve-card p.tve-lede{font-size:.95rem;line-height:1.65;color:var(--t3);margin:-8px 0 18px;} .tve p.tve-label, .tve-card p.tve-label{font-size:1rem;font-weight:600;color:var(--t1);margin:0 0 9px;} .tve p.tve-sub, .tve-card p.tve-sub{font-size:.93rem;line-height:1.6;color:var(--t3);margin:0 0 16px;} .tve p.tve-extras-sub,.tve-card p.tve-extras-sub{font-size:.93rem;line-height:1.6;color:var(--t3);margin:0 0 14px;} .tve p.tve-cal-sub, .tve-card p.tve-cal-sub{font-size:.9rem;color:var(--t3);margin:0 0 10px;} .tve p.tve-cal-msg, .tve-card p.tve-cal-msg{font-size:.95rem;line-height:1.65;color:var(--t3);margin:8px 0 0;} .tve p.tve-size-note, .tve-card p.tve-size-note{font-size:.95rem;line-height:1.6;color:var(--body);margin:14px 0 0;} .tve-card .tve-disclaimer p{font-size:.96rem;line-height:1.7;color:var(--t2);margin:0;} .tve-card p a{border-bottom:none;} .tve-cardfoot{font-size:.95rem;color:var(--t3);} .tve-cardfoot a{border-bottom:none;} /* --- Calendar: day strip must clear 44px on a phone ---------------------- * A 7-column grid inside a 375px card produced 26px-wide days. Below 560px it becomes a horizontal snap track, matching the site's carousel convention: native scrolling, snap points, no touch-action, no JS in the gesture path. */ @media(max-width:559px){ .tve-cal-days{ display:flex; overflow-x:scroll; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; gap:8px; } .tve-cal-days::-webkit-scrollbar{display:none;} .tve-cal-day{flex:0 0 58px;scroll-snap-align:center;min-height:66px;} } /* Disabled slots were 2.85:1 — readable enough to be understood as "taken". */ .tve-cal-slot.is-off, .tve-cal-slot[disabled]{opacity:.55;} .tve-cal-note{font-size:.86rem;line-height:1.55;color:var(--t3);margin:10px 0 0;} .tve-cal-hint{font-size:.9rem;line-height:1.55;color:var(--g2);margin:12px 0 0;font-weight:600;} /* --- Section heading above the card -------------------------------------- * Sits directly over the calculator, so it is deliberately smaller than the canonical section H2 and carries tighter spacing — the point of this page is the card, not the heading above it. Scoped to two classes so the page's own `.nca-s2 h2` cannot outrank it. */ .nca-s2 h2.tve-sectionh, .tve-sectionh{ font-family:'Playfair Display',Georgia,serif; font-weight:900; font-style:normal; font-size:clamp(1.5rem,4vw,2.1rem); line-height:1.18; letter-spacing:-.01em; color:#fff; max-width:none; margin:0 0 22px; text-align:center; } .nca-s2 h2.tve-sectionh em, .tve-sectionh em{color:#B08D57;font-style:normal;} /* The calculator is the first thing under the hero, so this section does not need the full 88px top padding the prose sections use. */ .nca-s2 section#tve-start{padding-top:clamp(30px,5vw,44px);} /* The step question is an H3 (subordinate to the section H2) but must look exactly as the H2 styling did — this is presentation only. */ .tve-step h3.tve-qh, .nca-s2 .tve-step h3.tve-qh{ font-family:'Plus Jakarta Sans','Barlow',sans-serif; font-size:1.16rem; font-weight:700; line-height:1.4; letter-spacing:0; color:var(--t1); margin:0 0 16px; } .tve-step h3.tve-qh em, .nca-s2 .tve-step h3.tve-qh em{color:var(--g);font-style:normal;} @media(max-width:480px){.tve-step h3.tve-qh{font-size:1.06rem;}} /* --- Result screen: action first ----------------------------------------- */ .tve-actions-top{margin:22px 0 8px;} /* Extras collapsed behind a single tappable row rather than a 753px wall. */ .tve-extras{ margin-top:22px; padding:0; border-radius:10px; background:rgba(255,255,255,.03); border:1px solid rgba(176,141,87,.22); } .tve-extras-sum{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; min-height:56px; cursor:pointer; list-style:none; font-size:.95rem; line-height:1.45; color:var(--t2); } .tve-extras-sum::-webkit-details-marker{display:none;} .tve-extras-sum span{ flex-shrink:0; font-weight:700; color:var(--g2); font-size:.92rem; white-space:nowrap; } .tve-extras[open] .tve-extras-sum{border-bottom:1px solid rgba(176,141,87,.18);} .tve-extras .tve-check{margin:0 14px 10px;background:rgba(0,0,0,.18);} .tve p.tve-extras-sub,.tve-card p.tve-extras-sub{padding:12px 18px 0;margin:0 0 6px;} /* Caveat: reassurance, not a hazard warning. Detail behind a disclosure. */ .tve-disclaimer{ background:rgba(255,255,255,.03); border:1px solid rgba(176,141,87,.22); padding:18px 20px; } .tve-disclaimer svg{color:var(--t3);} .tve-disclaimer strong{color:var(--t1);font-size:.98rem;} .tve-disc-more{margin-top:10px;} .tve-disc-more summary{ cursor:pointer; list-style:none; min-height:32px; display:flex; align-items:center; font-size:.88rem; font-weight:600; color:var(--g2); } .tve-disc-more summary::-webkit-details-marker{display:none;} .tve-card .tve-disc-more p{margin-top:8px;font-size:.9rem;color:var(--t3);} /* The step question is the one thing to read first. */ .tve-step h3.tve-qh, .nca-s2 .tve-step h3.tve-qh{ font-family:'Playfair Display',Georgia,serif; font-weight:900; font-size:clamp(1.55rem,5.2vw,2rem); line-height:1.2; margin:0 0 14px; } @media(max-width:480px){.tve-step h3.tve-qh{font-size:1.55rem;}} /* --- Equal-height option cards ------------------------------------------- * Cards in a row were sizing to their own text, so a two-line description made one card visibly taller than its neighbours. Equal rows + stretch makes every container in a step the same height whatever the copy length. */ .tve-opts-even{grid-auto-rows:1fr;align-items:stretch;} .tve-opts-even .tve-opt{height:100%;} .tve-opts-even .tve-opt-box{height:100%;justify-content:center;} /* Three-up bracket row; stacks on the narrowest phones. */ .tve-opts-3{grid-template-columns:repeat(3,1fr);} @media(max-width:600px){.tve-opts-3{grid-template-columns:1fr;}} /* Size cards: name, range, starting price — three tight lines. */ .tve-opt-size .tve-opt-t{font-size:1.05rem;} .tve-opt-size .tve-opt-d{font-size:.9rem;color:var(--t3);margin-top:4px;} .tve-opt-size .tve-opt-price{margin-top:6px;font-size:1rem;} /* Keep the "most common" flag from stretching a card taller than its row. */ .tve-opts-even .tve-opt-flag{margin-top:6px;} /* ========================================================================== PRICE PILL — final word. Earlier layers left flex-era rules behind (margin-left:auto, margin-left:62px inside a max-width:420px block, flex-basis:100%). The card is a centred column now, so those pushed the price out of its container on a phone. Declared last, and every stale property is explicitly reset. ========================================================================== */ .tve-opt-box .tve-opt-price, .tve-check .tve-opt-price{ display:block; margin:6px 0 0; padding:0; max-width:100%; flex:0 0 auto; align-self:auto; background:none; border:none; text-align:center; white-space:normal; overflow-wrap:anywhere; font-size:.95rem; font-weight:700; color:var(--g2); } @media(max-width:420px){ .tve-opt-box .tve-opt-price, .tve-check .tve-opt-price{margin-left:0;margin-right:0;flex-basis:auto;} } /* Checkbox rows stay horizontal, so the price sits at the end of the row. */ .tve-check .tve-opt-price{margin:0 0 0 auto;text-align:right;white-space:nowrap;} /* Nothing inside a card may exceed it. */ .tve-opt-box,.tve-check{overflow:hidden;} .tve-opt-box > *{max-width:100%;min-width:0;} .tve-opt-t,.tve-opt-d{overflow-wrap:anywhere;} /* --- Cross-sell chips on the contact step -------------------------------- * Deliberately lighter than the option cards: this is an optional aside, not a question standing between the customer and the submit button. */ .tve-chips{display:flex;flex-wrap:wrap;gap:9px;} .tve-chip{ position:relative; display:inline-flex; align-items:center; min-height:46px; padding:11px 16px; border-radius:99px; background:rgba(255,255,255,.03); border:1px solid rgba(176,141,87,.24); color:var(--t2); font-size:.92rem; font-weight:600; line-height:1.3; cursor:pointer; transition:border-color .16s,background .16s,color .16s; } .tve-chip input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer;} .tve-chip:hover{border-color:rgba(176,141,87,.55);color:var(--t1);} .tve-chip.is-on{background:rgba(176,141,87,.16);border-color:var(--g);color:var(--g2);} .tve-chip.is-on span::before{content:'\2713\00a0';font-weight:700;} .tve-chip:has(input:focus-visible){outline:2px solid rgba(176,141,87,.85);outline-offset:3px;}