/* TBHW concept landing page — вантажиться тільки з tpl-concept-landing.php. */ /* 1. Tokens and base */ .tbhw-concept { --ink: #111111; --deep: #000000; --teal: #222222; --teal-soft: #f0f0f0; --paper: #f5f5f5; --white: #ffffff; --amber: #ce1126; --amber-deep: #9e0c1d; --brick: #8a0f1e; --line: #e0e0e0; --muted: #666666; --display: "Zilla Slab", Georgia, serif; --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; } .tbhw-concept *, .tbhw-concept *::before, .tbhw-concept *::after { box-sizing: border-box; } html:has(body.tbhw-concept) { scroll-behavior: smooth; } body.tbhw-concept { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } .tbhw-concept [hidden] { display: none !important; } .tbhw-concept img { max-width: 100%; height: auto; display: block; } .tbhw-concept h1, .tbhw-concept h2, .tbhw-concept h3, .tbhw-concept h4, .tbhw-concept h5 { font-weight: 700; } .tbhw-concept :focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 4px; } .tbhw-concept .wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; overflow-wrap: break-word; } /* 2. Header, masthead */ /* Рекламне розкриття — перший елемент , над хедером (порт з макета v39). */ .tbhw-concept .addisc { background: #e8edec; border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--muted); text-align: center; padding: 8px 16px; line-height: 1.55; } .tbhw-concept .topbar { background: var(--white); border-bottom: 1px solid var(--line); } .tbhw-concept .topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 62px; } .tbhw-concept .brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--ink); text-decoration: none; } /* Логотип 210x54; висота 38px лишає по 12px згори й знизу в топбарі (min-height: 62px). */ .tbhw-concept .brand img { display: block; width: auto; height: 38px; } @media (max-width: 640px) { .tbhw-concept .brand img { height: 32px; } } /* `.mark` — фолбек, коли theme_mod з логотипом порожній (див. tpl-concept-landing.php). */ .tbhw-concept .brand .mark { width: 29px; height: 29px; border-radius: 7px; background: var(--deep); display: grid; place-items: center; flex: none; } .tbhw-concept .brand .mark span { display: block; width: 12px; height: 12px; border: 2.5px solid var(--amber); border-radius: 2px; } .tbhw-concept .topbar-call a { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 15px; color: var(--deep); text-decoration: none; white-space: nowrap; } .tbhw-concept .topbar-call .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 10px; } @media (max-width: 640px) { .tbhw-concept .topbar-call .lbl { display: none; } } .tbhw-concept h1 { font-family: var(--display); font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -.02em; margin: 20px 0 14px; } .tbhw-concept .dek { font-size: 17.5px; color: var(--muted); margin: 0 0 22px; max-width: 62ch; line-height: 1.6; } /* 3. Section nav */ .tbhw-concept .secnav { position: sticky; top: var(--navtop, 0px); z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); margin: 0 0 26px; max-width: 100%; } .tbhw-concept .secnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0; } @media (max-width: 1000px) { .tbhw-concept .secnav ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .tbhw-concept .secnav ul::-webkit-scrollbar { display: none; } } .tbhw-concept .secnav a { display: inline-block; font-size: 12.5px; font-weight: 500; color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; padding: 11px 11px 8px; white-space: nowrap; transition: color .15s, border-color .15s; } .tbhw-concept .secnav a:hover { color: var(--deep); } .tbhw-concept .secnav a.is-here { color: var(--ink); border-bottom-color: var(--amber); font-weight: 600; } .tbhw-concept [id^="p-"], .tbhw-concept #compare, .tbhw-concept #reviews, .tbhw-concept #cost, .tbhw-concept #savings, .tbhw-concept #coverage, .tbhw-concept #testing, .tbhw-concept #worth, .tbhw-concept #faqs, .tbhw-concept #method { scroll-margin-top: calc(var(--navtop, 0px) + 58px); } /* 4. Layout and sections */ .tbhw-concept .layout { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 38px; align-items: start; padding: 8px 0 20px; } .tbhw-concept .col-main, .tbhw-concept .col-rail { min-width: 0; max-width: 100%; } .tbhw-concept .col-rail { position: sticky; top: 16px; } .tbhw-concept .sec { padding: 34px 0; } .tbhw-concept .sec .wrap { padding: 0; max-width: none; } .tbhw-concept .sec-card { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 34px 30px; margin: 0 0 8px; } .tbhw-concept .sec-head { max-width: 72ch; margin-bottom: 24px; } .tbhw-concept .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); margin: 0 0 13px; } .tbhw-concept .sec-head h2 { font-family: var(--display); font-size: clamp(25px, 3.3vw, 34px); line-height: 1.16; letter-spacing: -.015em; margin: 0 0 11px; } .tbhw-concept .sec-head p { margin: 0; color: var(--muted); font-size: 16px; } .tbhw-concept .sub-h { font-family: var(--display); font-size: 22px; margin: 42px 0 18px; } .tbhw-concept .sub-h--flush { margin-bottom: 0; } .tbhw-concept .prose { font-size: 16.5px; max-width: 80ch; margin: 0 0 14px; } .tbhw-concept .prose:last-child { margin-bottom: 0; } .tbhw-concept .src { font-size: 11.5px; color: var(--muted); margin: 11px 0 0; font-family: var(--mono); line-height: 1.65; max-width: 98ch; } .tbhw-concept .src a { color: inherit; } @media (max-width: 1000px) { .tbhw-concept .sec-card { padding: 26px 20px; } .tbhw-concept .layout { grid-template-columns: minmax(0, 1fr); gap: 22px; } .tbhw-concept .col-rail { position: static; top: auto; order: -1; } } .tbhw-concept .feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 14px; } @media (max-width: 900px) { .tbhw-concept .feat { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .tbhw-concept .feat { grid-template-columns: minmax(0, 1fr); } } .tbhw-concept .fcard { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; position: relative; } .tbhw-concept .fcard .tag { font-family: var(--mono); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; color: var(--teal); background: var(--teal-soft); padding: 4px 8px; border-radius: 5px; align-self: flex-start; margin-bottom: 13px; } .tbhw-concept .logo { height: 38px; display: flex; align-items: center; margin-bottom: 14px; } .tbhw-concept .logo img { max-height: 38px; max-width: 170px; width: auto; object-fit: contain; object-position: left; } .tbhw-concept .logo .fb { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--deep); line-height: 1.2; } .tbhw-concept .fspec { display: grid; gap: 6px; margin-bottom: 14px; font-size: 12.5px; } .tbhw-concept .fspec div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dotted var(--line); padding-bottom: 5px; } .tbhw-concept .fspec .k { color: var(--muted); } .tbhw-concept .fspec .v { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--deep); white-space: nowrap; } .tbhw-concept .fcta { margin-top: auto; } .tbhw-concept .fcta button { width: 100%; background: var(--deep); color: var(--white); border: 0; border-radius: 8px; padding: 11px; font-family: var(--body); font-size: 14px; font-weight: 600; cursor: pointer; } .tbhw-concept .fcta button:hover { background: var(--teal); } .tbhw-concept .promo { display: block; text-align: center; font-size: 12px; line-height: 1.5; min-height: 18px; color: var(--ink); margin-top: 9px; font-weight: 600; } .tbhw-concept .is-top { border: 1px solid var(--amber) !important; box-shadow: 0 0 0 1px var(--amber); position: relative; } .tbhw-concept .is-top .tag, .tbhw-concept .is-top .p-tag { color: var(--ink) !important; background: #ededed !important; } .tbhw-concept .topflag { position: absolute; top: -11px; left: 18px; background: var(--ink); color: #ffffff; font-family: var(--mono); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; font-weight: 600; padding: 4px 10px; border-radius: 5px; } /* Tables */ .tbhw-concept .table-wrap { background: var(--white); border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; max-width: 100%; } .tbhw-concept .sec-card .table-wrap { background: var(--paper); } .tbhw-concept table { width: 100%; border-collapse: collapse; max-width: 100%; } .tbhw-concept thead th { background: var(--ink); color: var(--white); text-align: left; padding: 13px 16px; font-family: var(--mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; font-weight: 500; } .tbhw-concept tbody td { padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: middle; } .tbhw-concept tbody tr:last-child td { border-bottom: 0; } .tbhw-concept tbody tr:nth-child(even) { background: rgba(0, 0, 0, .018); } .tbhw-concept tbody tr.is-toprow { background: #f7f7f7 !important; box-shadow: inset 3px 0 0 var(--amber); } .tbhw-concept .tlogo { display: flex; align-items: center; } .tbhw-concept .p-name { font-weight: 600; font-size: 14.5px; display: block; } .tbhw-concept .p-tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--teal); } .tbhw-concept .num { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--deep); white-space: nowrap; } .tbhw-concept .tbl-cta { display: inline-flex; align-items: center; justify-content: center; background: var(--deep); color: var(--white); padding: 8px 14px; border-radius: 7px; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; border: 0; font-family: var(--body); text-decoration: none; } .tbhw-concept .tbl-cta:hover, .tbhw-concept .tbl-cta:focus { background: var(--teal); color: var(--white); text-decoration: none; } .tbhw-concept #compare .tlogo > span { min-width: 0; } .tbhw-concept #compare td, .tbhw-concept #compare th { padding: 12px 8px; } .tbhw-concept #compare .p-name { font-size: 14px; } @media (min-width: 800px) { .tbhw-concept #compare table { table-layout: fixed; min-width: 622px; } /* Ширини підібрані так, щоб найдовший вміст кожної колонки вміщався без виїзду на сусідню: заголовок «Customer rating» переноситься у два рядки (72px), «$5–$73 per plan» — теж (96px). */ .tbhw-concept #compare th:nth-child(2) { width: 72px; } .tbhw-concept #compare th:nth-child(3) { width: 96px; } .tbhw-concept #compare th:nth-child(4) { width: 96px; } .tbhw-concept #compare th:nth-child(5) { width: 92px; } .tbhw-concept #compare th:nth-child(6) { width: 106px; } /* Довгі назви (American Residential Warranty, 2-10 Home Buyers Warranty) переносяться на другий рядок, а не обрізаються трикрапкою. break-word — страховка від задовгого слова. */ .tbhw-concept #compare .p-name, .tbhw-concept #compare .p-tag { overflow-wrap: break-word; } .tbhw-concept #compare .p-tag { display: block; } /* Переносити дозволено ТІЛЬКИ колонці Monthly — там єдине багатослівне значення «$5–$73 per plan», яке інакше лізе на Service fee (розрив лягає після «per», діапазон лишається цілим). Решта .num тримає nowrap: інакше en dash стає точкою розриву і «$100–$150» у Service fee ламається навпіл на «$100–» / «$150». */ .tbhw-concept #compare tbody td:nth-child(3) { white-space: normal; } .tbhw-concept #compare .c-guar { white-space: nowrap; } } @media (max-width: 799px) { .tbhw-concept #compare .c-guar { display: none; } .tbhw-concept #compare .p-tag { display: none; } } @media (max-width: 560px) { .tbhw-concept #compare .c-score { display: none; } } .tbhw-concept .rev { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 26px 26px 24px; margin-bottom: 18px; position: relative; } .tbhw-concept .rev-top { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 20px; } .tbhw-concept .rev-id .tag { font-family: var(--mono); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; color: var(--teal); background: var(--teal-soft); padding: 4px 8px; border-radius: 5px; display: inline-block; margin-bottom: 10px; } .tbhw-concept .rev-id h3 { font-family: var(--display); font-size: 24px; margin: 0; font-weight: 700; } .tbhw-concept .rev-score { text-align: center; flex: none; } .tbhw-concept .rev-score .v { font-size: 33px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.03em; color: var(--deep); line-height: 1; } .tbhw-concept .rev-score .l { font-family: var(--mono); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-top: 4px; } .tbhw-concept .rev .logo { margin-bottom: 12px; height: 34px; } .tbhw-concept .rev .logo img { max-height: 34px; max-width: 190px; } .tbhw-concept .spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; margin-bottom: 20px; } .tbhw-concept .spec div { background: var(--white); padding: 11px 13px; } .tbhw-concept .spec .k { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } .tbhw-concept .spec .v { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 14px; color: var(--deep); } /* Рядок визнання під .spec: перебиває .rev p (15px + margin-bottom), бо це виноска, не абзац. */ .tbhw-concept .recog { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.55; max-width: 84ch; } .tbhw-concept .rev h4 { font-family: var(--mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 20px 0 9px; font-weight: 500; } .tbhw-concept .rev p { margin: 0 0 12px; font-size: 15px; max-width: 84ch; } .tbhw-concept .bestfor { background: var(--teal-soft); border-left: 3px solid var(--teal); padding: 12px 15px; font-size: 14.5px; margin: 14px 0; } .tbhw-concept .offer { background: #f7f7f7; border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: 11px; padding: 16px 18px; margin: 16px 0; } .tbhw-concept .offer h5 { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin: 0 0 8px; font-weight: 600; } .tbhw-concept .offer p { margin: 0 0 9px; font-size: 14.5px; } .tbhw-concept .offer .fine { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.6; border-top: 1px solid rgba(0, 0, 0, .14); padding-top: 9px; } .tbhw-concept .plans { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .tbhw-concept .plans li { font-size: 14px; display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px dotted var(--line); } .tbhw-concept .plans li:last-child { border-bottom: 0; } .tbhw-concept .plans .pr { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--deep); white-space: nowrap; } .tbhw-concept .pc { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 14px 0; } @media (max-width: 560px) { .tbhw-concept .pc { grid-template-columns: 1fr; gap: 16px; } } .tbhw-concept .pc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .tbhw-concept .pc li { font-size: 13.5px; line-height: 1.55; padding-left: 17px; position: relative; } .tbhw-concept .pc li::before { position: absolute; left: 0; font-family: var(--mono); font-weight: 600; } .tbhw-concept .pc .up li::before { content: "+"; color: var(--teal); } .tbhw-concept .pc .down li::before { content: "\2212"; color: #8a8a8a; } .tbhw-concept .pc h5 { font-family: var(--mono); font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; margin: 0 0 8px; font-weight: 500; } .tbhw-concept .pc .up h5 { color: var(--teal); } .tbhw-concept .pc .down h5 { color: #6a6a6a; } .tbhw-concept .addons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .tbhw-concept .addons span { font-size: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 4px 11px; color: var(--muted); } .tbhw-concept .rev-foot { display: flex; justify-content: flex-end; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); } .tbhw-concept .rgo { display: inline-flex; align-items: center; justify-content: center; background: var(--amber); color: #ffffff; border: 0; border-radius: 8px; padding: 12px 26px; font-family: var(--body); font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; } .tbhw-concept .rgo:hover, .tbhw-concept .rgo:focus { background: var(--amber-deep); color: #fff; text-decoration: none; } /* Stats, regions, tips */ .tbhw-concept .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } @media (max-width: 1000px) { .tbhw-concept .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 420px) { .tbhw-concept .stats { gap: 9px; } .tbhw-concept .stat { padding: 15px 12px; } .tbhw-concept .stat .v { font-size: 25px; } } .tbhw-concept .stat { background: var(--white); border: 1px solid var(--line); border-radius: 11px; padding: 19px 17px; } .tbhw-concept .sec-card .stat { background: var(--paper); } .tbhw-concept .stat .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; } .tbhw-concept .stat .v { font-size: 29px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.025em; color: var(--deep); line-height: 1; } .tbhw-concept .stat .s { font-size: 12.5px; color: var(--muted); margin-top: 6px; line-height: 1.5; } .tbhw-concept .tip { background: var(--teal-soft); border: 1px solid var(--teal); border-radius: 11px; padding: 17px 19px; margin-top: 20px; } .tbhw-concept .tip h4 { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin: 0 0 8px; font-weight: 600; } .tbhw-concept .tip p { margin: 0; font-size: 14.5px; max-width: 88ch; } .tbhw-concept .region { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 14px; margin-top: 24px; } .tbhw-concept .reg { background: var(--white); border: 1px solid var(--line); border-radius: 11px; padding: 18px; } .tbhw-concept .sec-card .reg { background: var(--paper); } .tbhw-concept .reg h4 { font-family: var(--display); font-size: 17px; margin: 0 0 8px; font-weight: 600; } .tbhw-concept .reg p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.6; } /* Coverage lists */ .tbhw-concept .covered { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } @media (max-width: 760px) { .tbhw-concept .covered { grid-template-columns: 1fr; gap: 24px; } } .tbhw-concept .covered h3 { font-family: var(--display); font-size: 19px; margin: 0 0 13px; display: flex; align-items: center; gap: 10px; } .tbhw-concept .covered h3 .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .tbhw-concept .dot-yes { background: #1e8e3e; } .tbhw-concept .dot-no { background: var(--amber); } .tbhw-concept .covered ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; } .tbhw-concept .covered li { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 10px 13px; font-size: 14px; } .tbhw-concept .sec-card .covered li { background: var(--paper); } .tbhw-concept .covered li b { display: block; font-size: 12.5px; color: var(--muted); font-weight: 400; margin-top: 2px; } /* Lessons, FAQs, weights, related */ .tbhw-concept .lessons { display: grid; gap: 14px; } .tbhw-concept .lesson { background: var(--white); border: 1px solid var(--line); border-radius: 11px; padding: 20px 22px; } .tbhw-concept .sec-card .lesson { background: var(--paper); } .tbhw-concept .lesson h4 { font-family: var(--display); font-size: 18px; margin: 0 0 7px; font-weight: 600; } .tbhw-concept .lesson p { margin: 0; font-size: 14.5px; color: var(--muted); max-width: 86ch; } .tbhw-concept .faq { display: grid; gap: 9px; max-width: 900px; } .tbhw-concept details { background: var(--white); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .tbhw-concept .sec-card details { background: var(--paper); } .tbhw-concept details[open] { border-color: var(--teal); } .tbhw-concept summary { padding: 16px 19px; cursor: pointer; font-weight: 600; font-size: 15.5px; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; } .tbhw-concept summary::-webkit-details-marker { display: none; } .tbhw-concept summary::after { content: "+"; font-family: var(--mono); font-size: 18px; color: var(--teal); flex: none; } .tbhw-concept details[open] summary::after { content: "\2212"; } .tbhw-concept details p { margin: 0; padding: 0 19px 18px; color: var(--muted); font-size: 14.5px; max-width: 78ch; } .tbhw-concept .weights { display: grid; gap: 10px; max-width: 900px; } .tbhw-concept .wrow { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 15px 18px; } .tbhw-concept .sec-card .wrow { background: var(--paper); } .tbhw-concept .wrow-top { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 7px; } .tbhw-concept .wrow h4 { font-family: var(--display); font-size: 17px; margin: 0; font-weight: 600; } .tbhw-concept .wrow .pct { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); font-size: 15px; } .tbhw-concept .wbar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; margin-bottom: 9px; } .tbhw-concept .wbar i { display: block; height: 100%; background: var(--teal); } .tbhw-concept .wrow p { margin: 0; font-size: 13.5px; color: var(--muted); max-width: 86ch; } .tbhw-concept .more { font-size: 15.5px; line-height: 2; } .tbhw-concept .more a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 1px; } .tbhw-concept .more a:hover { border-bottom-color: var(--amber); color: var(--amber-deep); } .tbhw-concept .more .sep { color: var(--muted); padding: 0 11px; } /* Key takeaways box */ .tbhw-concept .keybox { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 24px 24px 20px; margin: 8px 0; } .tbhw-concept .keygrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 26px; } .tbhw-concept .keybox h3 { font-family: var(--display); font-size: 19px; margin: 0 0 12px; } .tbhw-concept .keybox ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .tbhw-concept .keybox li { font-size: 15px; line-height: 1.6; padding-left: 19px; position: relative; } .tbhw-concept .keybox li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); } .tbhw-concept .keybox li b { font-weight: 600; } /* End CTA and footer */ .tbhw-concept .endcta { background: var(--ink); color: var(--white); text-align: center; border-radius: 14px; padding: 44px 30px; margin-top: 8px; } .tbhw-concept .endcta .wrap { max-width: none; padding: 0; } .tbhw-concept .endcta h2 { font-family: var(--display); font-size: clamp(24px, 3.5vw, 34px); margin: 0 0 11px; } .tbhw-concept .endcta p { color: #bdbdbd; margin: 0 0 24px; font-size: 16px; } .tbhw-concept .endcta .btn-go { width: auto; padding: 14px 32px; } @media (max-width: 1000px) { .tbhw-concept .endcta { padding: 36px 22px; } } .tbhw-concept footer { background: #000000; color: #8a8a8a; padding: 38px 0 44px; font-size: 12.5px; margin-top: 30px; } .tbhw-concept footer .wrap { display: grid; gap: 16px; } .tbhw-concept footer .disc { max-width: 98ch; line-height: 1.75; } .tbhw-concept footer a { color: #bdbdbd; } .tbhw-concept footer b { color: #ededed; } /* 5. Buttons shared with the quote card */ /* .btn is used on elements — the CTAs are real links to ?company=…"e=1. */ .tbhw-concept .btn { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; padding: 13px 20px; cursor: pointer; font-family: var(--body); font-weight: 600; font-size: 15px; line-height: 1; transition: background .18s; text-decoration: none; } .tbhw-concept .btn-go { background: var(--amber); color: #ffffff; } .tbhw-concept .btn-go:hover, .tbhw-concept .btn-go:focus { background: var(--amber-deep); color: var(--white); text-decoration: none; } .tbhw-concept .btn-go .arw { display: inline-block; margin-left: 7px; animation: tbhw-arrow 1.6s ease-in-out infinite; } @keyframes tbhw-arrow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } } @keyframes tbhw-edge { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } /* 6. Overlays */ .tbhw-concept .ov { position: fixed; inset: 0; z-index: 200; background: rgba(255, 255, 255, .985); overflow-y: auto; display: none; } .tbhw-concept .ov.is-open { display: block; } /* Scroll lock is a body class set by PHP, so the overlay opens without a flash. */ body.tbhw-quote-open { overflow: hidden; } .tbhw-concept .ov-inner { max-width: 960px; margin: 0 auto; padding: 34px 20px 70px; } .tbhw-concept .ov-inner--cmp { max-width: 760px; } .tbhw-concept .ov-inner--exit { max-width: 640px; } .tbhw-concept .ov-close { position: absolute; top: 18px; right: 20px; background: #ededed; color: var(--ink); border: 1px solid var(--line); width: 38px; height: 38px; border-radius: 50%; font-size: 20px; cursor: pointer; line-height: 1; z-index: 2; } .tbhw-concept .ov-close:hover { background: #dedede; } .tbhw-concept .ov-head { text-align: center; margin-bottom: 32px; } .tbhw-concept .ov-head h2 { font-family: var(--display); font-size: clamp(26px, 4vw, 38px); color: var(--ink); margin: 0 0 10px; line-height: 1.12; } .tbhw-concept .ov-head p { color: var(--muted); font-size: 16.5px; margin: 0 auto; max-width: 60ch; } .tbhw-concept .ov-cta { background: #f7f7f7; border: 1px solid var(--line); border-radius: 14px; padding: 30px 26px; text-align: center; } .tbhw-concept .ov-cta h3 { font-family: var(--display); font-size: 24px; color: var(--ink); margin: 0 0 9px; } .tbhw-concept .ov-cta p { color: var(--muted); font-size: 15.5px; margin: 0 0 20px; } .tbhw-concept .ov-cta .fine { font-size: 11.5px; line-height: 1.6; margin: 16px 0 0; } .tbhw-concept .ov-btns { display: flex; flex-wrap: wrap; gap: 11px; justify-content: center; } .tbhw-concept .ov-btns a, .tbhw-concept .ov-btns button { font-family: var(--body); font-weight: 600; font-size: 15px; padding: 14px 26px; border-radius: 8px; border: 0; cursor: pointer; text-decoration: none; } .tbhw-concept .ov-btns .primary { background: var(--amber); color: #ffffff; } .tbhw-concept .ov-btns .primary:hover { background: var(--amber-deep); } .tbhw-concept .ov-btns .ghost { background: transparent; color: var(--ink); border: 1px solid #cfcfcf; } .tbhw-concept .ov-btns .ghost:hover { background: #ededed; } .tbhw-concept .ov-fine { font-size: 11.5px; color: var(--muted); line-height: 1.6; margin: 16px auto 0; max-width: 58ch; text-align: center; } /* 7. Quote card shell */ .tbhw-concept .quote { background: var(--white); border-radius: 12px; overflow: hidden; box-shadow: 0 14px 34px rgba(0, 0, 0, .16); border: 1px solid var(--line); } .tbhw-concept .qhead { background: var(--ink); color: var(--white); padding: 15px 22px 0; position: relative; overflow: hidden; } .tbhw-concept .qhead::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--amber); animation: tbhw-edge 2.8s ease-in-out infinite; } .tbhw-concept .quote.touched .qhead::after { animation: none; opacity: 1; } .tbhw-concept .qhead h2 { font-family: var(--display); font-size: 18px; font-weight: 600; margin: 0 0 3px; } .tbhw-concept .qhead .sub { margin: 0 0 13px; font-size: 13px; color: #9a9a9a; } body.tbhw-concept .qbody { padding: 20px 22px 22px; } .tbhw-concept .consent { font-size: 11px; line-height: 1.55; color: var(--muted); border-top: 1px solid var(--line); padding-top: 11px; margin: 14px 0 0; } .tbhw-concept .consent a { color: var(--teal); } body.tbhw-concept .qbody .hint { margin: 0; font-size: 13px; color: var(--muted); } @media (prefers-reduced-motion: reduce) { html:has(body.tbhw-concept) { scroll-behavior: auto; } .tbhw-concept .qhead::after, .tbhw-concept .btn-go .arw, .tbhw-concept .quote .gform_wrapper .gfield, .tbhw-concept .quote .gform_wrapper .ginput_complex > span { animation: none !important; } .tbhw-concept * { transition-duration: .001ms !important; } } /* 8. Gravity Forms overrides body.tbhw-concept .qbody .gform_wrapper { margin: 0; } body.tbhw-concept .qbody .gform_wrapper form { margin: 0; } body.tbhw-concept .qbody .gform_heading { display: none; } /* Field grid */ body.tbhw-concept .qbody .gform_wrapper .gform_fields { grid-column-gap: 10px; grid-row-gap: 12px; } body.tbhw-concept .qbody .gform_wrapper .gfield { margin: 0; padding: 0; } /* Labels: GF hides them per-field via hidden_label; keep the visible ones on-brand. */ body.tbhw-concept .qbody .gform_wrapper .gfield_label { display: block; font-family: var(--body); font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-bottom: 6px; padding: 0; } body.tbhw-concept .qbody .gform_wrapper legend.gfield_label { float: none; width: auto; } body.tbhw-concept .qbody .gform_wrapper .gfield_required { color: var(--brick); } body.tbhw-concept .qbody .gform_wrapper .gfield_required_text { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; } /* Text-like controls */ body.tbhw-concept .qbody .gform_wrapper input[type="text"], body.tbhw-concept .qbody .gform_wrapper input[type="email"], body.tbhw-concept .qbody .gform_wrapper input[type="tel"], body.tbhw-concept .qbody .gform_wrapper input[type="number"], body.tbhw-concept .qbody .gform_wrapper select, body.tbhw-concept .qbody .gform_wrapper textarea { width: 100%; padding: 12px 13px; border: 1.5px solid var(--line); border-radius: 8px; font-family: var(--body); font-size: 16px; line-height: 1.3; color: var(--ink); background: #fafafa; transition: border-color .15s, box-shadow .15s; box-shadow: none; min-height: 0; } /* Однакові 48px для інпутів, селектів і кнопки кроку 1, незалежно від метрик шрифту. */ body.tbhw-concept .qbody .gform_wrapper input[type="text"], body.tbhw-concept .qbody .gform_wrapper input[type="email"], body.tbhw-concept .qbody .gform_wrapper input[type="tel"], body.tbhw-concept .qbody .gform_wrapper input[type="number"], body.tbhw-concept .qbody .gform_wrapper select { height: 48px; padding-top: 0; padding-bottom: 0; } body.tbhw-concept .qbody .gform_wrapper select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-size: 11px; padding-right: 34px; } body.tbhw-concept .qbody .gform_wrapper input:focus, body.tbhw-concept .qbody .gform_wrapper select:focus, body.tbhw-concept .qbody .gform_wrapper textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0, 0, 0, .10); background: var(--white); } body.tbhw-concept .qbody .gform_wrapper input::placeholder, body.tbhw-concept .qbody .gform_wrapper textarea::placeholder { color: #9a9a9a; opacity: 1; } /* Sub-label */ body.tbhw-concept .qbody .gform_wrapper .gform-field-label--type-sub { position: static !important; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; font-family: var(--body); font-size: 12px; /* !important: theme.min.css GF вантажиться після цього файлу і пінить свої 400/700. */ font-weight: 500 !important; letter-spacing: 0; color: var(--muted); margin: 0 0 6px; padding: 0; } /* Email і Phone */ body.tbhw-concept .qbody .gform_wrapper #field_1_2 .gfield_label, body.tbhw-concept .qbody .gform_wrapper #field_1_3 .gfield_label { position: static !important; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; font-family: var(--body); font-size: 12px; font-weight: 500 !important; /* see the sub-label note above */ letter-spacing: 0; color: var(--muted); margin: 0 0 6px; padding: 0; } /* Порядок полів кроку 2 задає DOM (tbhw_concept_reorder_fields у inc/concept-landing.php). CSS `order` тут НЕ використовувати: на Tab він не впливає, тому розводить порядок фокуса з версткою — саме через це фокус стрибав Email → Phone → Address. */ body.tbhw-concept .qbody .gform_wrapper #field_1_2 .gfield_required, body.tbhw-concept .qbody .gform_wrapper #field_1_3 .gfield_required { display: none; } /* Complex fields (name, address) */ body.tbhw-concept .qbody .gform_wrapper .ginput_complex { gap: 10px; } body.tbhw-concept .qbody .gform_wrapper .ginput_complex span { padding: 0; display: flex; flex-direction: column-reverse; } body.tbhw-concept .qbody .gform_wrapper #field_1_9 .ginput_complex { margin-left: 0; margin-right: 0; } body.tbhw-concept .qbody .gform_wrapper #field_1_9 .ginput_complex span.address_zip { flex: 1 1 100%; width: 100%; max-width: 100%; } body.tbhw-concept .quote[data-tbhw-step="1"] .qbody { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 9px; align-items: start; } body.tbhw-concept .quote[data-tbhw-step="1"] .qbody > .step-chrome { grid-column: 1 / -1; } body.tbhw-concept .quote[data-tbhw-step="1"] .qbody > .wiz-nav { margin: 26px 0 0; } body.tbhw-concept .quote[data-tbhw-step="1"] .qbody > .wiz-nav .btn-row--one { margin: 0; } body.tbhw-concept .quote[data-tbhw-step="1"] .qbody > .wiz-nav .btn-go { height: 48px; padding-top: 0; padding-bottom: 0; } body.tbhw-concept .quote[data-tbhw-step="1"]:not(.is-docked) .qbody > .gform_wrapper.gform_validation_error { display: contents; } body.tbhw-concept .quote[data-tbhw-step="1"]:not(.is-docked) .qbody .gform_wrapper.gform_validation_error .gform_validation_errors { grid-column: 1 / -1; } @media (max-width: 380px) { body.tbhw-concept .quote[data-tbhw-step="1"] .qbody { display: block; } body.tbhw-concept .quote[data-tbhw-step="1"] .qbody > .wiz-nav { margin: 12px 0 0; } body.tbhw-concept .quote[data-tbhw-step="1"] .qbody > .wiz-nav .btn-go { height: auto; padding: 13px 20px; } } /* Chrome autofill: keep the mockup's field colours instead of the default blue. */ body.tbhw-concept .qbody .gform_wrapper input:-webkit-autofill, body.tbhw-concept .qbody .gform_wrapper input:-webkit-autofill:hover { -webkit-box-shadow: 0 0 0 40px #fafafa inset; -webkit-text-fill-color: var(--ink); caret-color: var(--ink); } body.tbhw-concept .qbody .gform_wrapper input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 3px rgba(0, 0, 0, .10), 0 0 0 40px var(--white) inset; -webkit-text-fill-color: var(--ink); } @media (max-width: 560px) { body.tbhw-concept .qbody .gform_wrapper .gfield--width-third, body.tbhw-concept .qbody .gform_wrapper .gfield--width-quarter, body.tbhw-concept .qbody .gform_wrapper .gfield--width-half { grid-column: span 12; } } /* Radio groups rendered as selectable chips, echoing the concept .pick control. */ body.tbhw-concept .qbody .gform_wrapper .gfield_radio, body.tbhw-concept .qbody .gform_wrapper .gfield_checkbox { display: flex; flex-wrap: wrap; gap: 8px; } body.tbhw-concept .qbody .gform_wrapper .gchoice { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 9px; background: #fafafa; transition: border-color .15s, background .15s; flex: 0 1 auto; } /* Inside a third-width column, one chip per line keeps the groups aligned. */ body.tbhw-concept .qbody .gform_wrapper .gfield--width-third .gchoice { flex: 1 1 100%; } @media (max-width: 560px) { body.tbhw-concept .qbody .gform_wrapper .gfield--width-third .gchoice { flex: 0 1 auto; } } body.tbhw-concept .qbody .gform_wrapper .gchoice:hover { border-color: var(--teal); } body.tbhw-concept .qbody .gform_wrapper .gchoice:has(input:checked) { border-color: var(--teal); background: var(--teal-soft); } body.tbhw-concept .qbody .gform_wrapper .gchoice input[type="radio"], body.tbhw-concept .qbody .gform_wrapper .gchoice input[type="checkbox"] { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--teal); cursor: pointer; } body.tbhw-concept .qbody .gform_wrapper .gchoice label { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--ink); cursor: pointer; max-width: none; line-height: 1.35; } /* Phone field — gp-advanced-phone-field wraps the input in intl-tel-input. */ body.tbhw-concept .qbody .gform_wrapper .iti { width: 100%; display: block; } body.tbhw-concept .qbody .gform_wrapper .iti__selected-country { background: transparent; border: 0; border-radius: 8px 0 0 8px; } body.tbhw-concept .qbody .gform_wrapper .iti__country-container { z-index: 3; } body.tbhw-concept .qbody .gform_wrapper .iti__dropdown-content { font-size: 14px; } body.tbhw-concept .iti--container .iti__dropdown-content { font-size: 14px; } body.tbhw-concept .iti--container .iti__country-list { overflow-y: auto; } /* Validation */ body.tbhw-concept .qbody .gform_wrapper .gform_validation_errors { background: #fdf2f3; border: 1px solid var(--brick); border-radius: 9px; box-shadow: none; padding: 12px 14px; margin: 0 0 14px; } body.tbhw-concept .qbody .gform_wrapper .gform_validation_errors > h2 { font-family: var(--body); font-size: 13.5px; font-weight: 600; color: var(--brick); margin: 0; padding: 0; line-height: 1.5; } body.tbhw-concept .qbody .gform_wrapper .gform_validation_errors > h2 .gform-icon { display: none; } /* background-color, not background — the select keeps its arrow background-image. */ body.tbhw-concept .qbody .gform_wrapper .gfield_error input, body.tbhw-concept .qbody .gform_wrapper .gfield_error select, body.tbhw-concept .qbody .gform_wrapper .gfield_error textarea { border-color: var(--brick); background-color: #fafafa; } body.tbhw-concept .qbody .gform_wrapper .gfield_error .gfield_label { color: var(--brick); } body.tbhw-concept .qbody .gform_wrapper .gfield_validation_message, body.tbhw-concept .qbody .gform_wrapper .validation_message { background: transparent; border: 0; border-left: 2px solid var(--brick); border-radius: 0; padding: 2px 0 2px 9px; margin: 6px 0 0; font-size: 12px; font-weight: 500; color: var(--brick); } body.tbhw-concept .qbody .gform_wrapper .gfield_error { background: transparent; border: 0; padding: 0; } body.tbhw-concept .qbody .gform_wrapper .gform_footer { margin: 16px 0 0; padding: 0; display: flex; align-items: center; } body.tbhw-concept .qbody .gform_wrapper .gform_footer input[type="submit"] { background: var(--amber) !important; color: #ffffff !important; border: 0; border-radius: 8px; padding: 15px 20px; flex: 1 1 100%; width: auto; font-family: var(--body); font-weight: 600; font-size: 16px; line-height: 1; cursor: pointer; transition: background .18s; margin: 0; } body.tbhw-concept .qbody .gform_wrapper .gform_footer input[type="submit"]:hover { background: var(--amber-deep) !important; } body.tbhw-concept .qbody .gform_wrapper .gform_footer input[type="submit"]:disabled { opacity: .65; cursor: default; } body.tbhw-concept .qbody .gform_wrapper .gform_ajax_spinner { margin-left: 10px; vertical-align: middle; } /* AJAX confirmation message, if a confirmation ever returns text instead of a redirect. */ body.tbhw-concept .qbody .gform_confirmation_message { font-size: 15px; color: var(--ink); padding: 6px 0; } /* The reCAPTCHA v3 badge container must stay in the DOM but takes no space. */ body.tbhw-concept .qbody .gform_wrapper .ginput_recaptchav3 { margin: 0; } /* 9. Wizard rail and step chrome */ .tbhw-concept .rail { display: grid; grid-template-columns: repeat(3, 1fr); } .tbhw-concept .rail-step { display: block; width: 100%; background: transparent; border: 0; text-align: center; cursor: pointer; padding: 9px 4px 11px; border-top: 3px solid rgba(255, 255, 255, .16); font-family: var(--body); font-size: 12px; font-weight: 500; letter-spacing: .01em; color: #8a8a8a; transition: color .25s, border-color .25s; } .tbhw-concept .rail-step.is-on { border-top-color: var(--amber); color: #ffffff; font-weight: 600; } .tbhw-concept .rail-step.is-done { border-top-color: #5a5a5a; color: #b0b0b0; } .tbhw-concept .rail-step:disabled { cursor: default; opacity: .55; } .tbhw-concept .rail-step:not(:disabled):hover { color: #fff; } .tbhw-concept .step-chrome h3 { font-family: var(--display); font-size: 16.5px; margin: 0 0 3px; font-weight: 600; } /* Відступ підпис → перше поле кроку. Правило .qbody .hint (секція 7) має вищу специфічність через `body` і занулює margin — тому перебиваємо тут, і лише margin: font-size навмисно лишається 13px звідти, як зараз і рендериться. */ body.tbhw-concept .qbody .step-chrome .hint { margin-bottom: 14px; } .tbhw-concept .wiz-nav .btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 2px; } .tbhw-concept .wiz-nav .btn-row--one { grid-template-columns: 1fr; } /* Крок 2: кнопки відокремлені від останнього ряду полів (базові 2px там замалі). */ body.tbhw-concept .quote[data-tbhw-step="2"] .wiz-nav .btn-row { margin-top: 18px; } .tbhw-concept .btn-back { background: transparent; color: var(--muted); padding: 13px 4px; font-size: 13.5px; text-decoration: underline; } /* Micro-step бар: завжди в розмітці, показує його тільки docked-режим (секція 12). */ .tbhw-concept .mnav { display: none; } /* 10. Wizard step gating over Gravity Forms fields */ /* Step gating: the card's data-tbhw-step decides which real GF fields show. */ body.tbhw-concept .quote .gform_wrapper .gfield { display: none; } body.tbhw-concept .quote[data-tbhw-step="1"] .gform_wrapper #field_1_9 { display: block; } body.tbhw-concept .quote[data-tbhw-step="2"] .gform_wrapper #field_1_1, body.tbhw-concept .quote[data-tbhw-step="2"] .gform_wrapper #field_1_4, body.tbhw-concept .quote[data-tbhw-step="2"] .gform_wrapper #field_1_2, body.tbhw-concept .quote[data-tbhw-step="2"] .gform_wrapper #field_1_3 { display: block; } body.tbhw-concept .qbody .gform_wrapper .gform_footer { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); margin: 0; padding: 0; border: 0; } /* Address (field 4): лишився сам street — City і State приховані через tbhw_concept_field_overrides() в inc/concept-landing.php (там же чек-ліст відкату). Повертати їх — повертати і двоколонкову сітку: `grid-template-columns: 1fr 1fr` плюс `.address_line_1 { grid-column: 1 / -1 }`, щоб street ішов на всю ширину. */ body.tbhw-concept .qbody .gform_wrapper #field_1_4 .ginput_complex { display: grid; grid-template-columns: 1fr; gap: 10px; } /* Email (field 2) and phone (field 3) share a row on step 2. */ body.tbhw-concept .qbody .gform_wrapper #field_1_2, body.tbhw-concept .qbody .gform_wrapper #field_1_3 { grid-column: span 6; } @media (max-width: 430px) { body.tbhw-concept .qbody .gform_wrapper #field_1_2, body.tbhw-concept .qbody .gform_wrapper #field_1_3 { grid-column: span 12; } } body.tbhw-concept .quote .gfield.tbhw-bad input, body.tbhw-concept .quote .gfield.tbhw-bad select, body.tbhw-concept .quote .gfield.tbhw-bad textarea { border-color: var(--brick); background-color: #fafafa; } body.tbhw-concept .quote .tbhw-err { background: transparent; border: 0; border-left: 2px solid var(--brick); border-radius: 0; padding: 2px 0 2px 9px; margin: 6px 0 0; font-size: 12px; font-weight: 500; color: var(--brick); } /* 11. Provider pickers */ .tbhw-concept .pickers { display: grid; gap: 8px; margin-bottom: 13px; max-height: 222px; overflow-y: auto; padding-right: 10px; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgba(17, 17, 17, .32) var(--line); } .tbhw-concept .pickers::-webkit-scrollbar { width: 7px; height: 7px; } .tbhw-concept .pickers::-webkit-scrollbar-track { background: var(--line); border-radius: 4px; } .tbhw-concept .pickers::-webkit-scrollbar-thumb { background: rgba(17, 17, 17, .32); border-radius: 4px; } .tbhw-concept .pickers::-webkit-scrollbar-thumb:hover { background: rgba(17, 17, 17, .5); } .tbhw-concept .pick { display: flex; gap: 11px; align-items: center; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 9px; cursor: pointer; background: #fafafa; } .tbhw-concept .pick:hover { border-color: var(--teal); } .tbhw-concept .pick input { width: 17px; height: 17px; accent-color: var(--teal); flex: none; cursor: pointer; } .tbhw-concept .pick.is-sel { border-color: var(--teal); background: var(--teal-soft); } .tbhw-concept .pick.is-lock { cursor: default; border-color: var(--teal); background: var(--teal-soft); } .tbhw-concept .pick.is-lock:hover { border-color: var(--teal); } .tbhw-concept .pick.is-lock input { pointer-events: none; accent-color: var(--teal); } .tbhw-concept .pick .nm { font-weight: 600; font-size: 14.5px; display: block; letter-spacing: -.005em; } .tbhw-concept .pick .mt { font-family: var(--body); font-size: 11.5px; color: var(--muted); display: block; margin-top: 1px; } .tbhw-concept .quote.in-modal .pickers { max-height: none; scrollbar-gutter: auto; } /* 12. Sticky and docked card */ @media (min-width: 1001px) { .tbhw-concept .col-rail { max-height: calc(100vh - 24px); } .tbhw-concept .quote { display: flex; flex-direction: column; max-height: calc(100vh - 24px); } .tbhw-concept .qinner { display: flex; flex-direction: column; flex: 1; min-height: 0; } .tbhw-concept .qbody { overflow-y: auto; min-height: 0; } } .tbhw-concept .quote.is-docked { position: fixed; top: 0; left: 0; right: 0; z-index: 60; border-radius: 0; border: 0; box-shadow: 0 8px 26px rgba(0, 0, 0, .24); border-bottom: 3px solid var(--amber); background: var(--ink); } .tbhw-concept .quote.is-docked .qinner { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .tbhw-concept .quote.is-docked .qhead { padding: 10px 0 0; background: transparent; } .tbhw-concept .quote.is-docked .qhead h2, .tbhw-concept .quote.is-docked .qhead .sub { display: none; } .tbhw-concept .quote.is-docked .qbody { padding: 14px 20px 16px; background: var(--white); margin: 0 -20px; max-height: 52vh; overflow-y: auto; } .tbhw-concept .quote.is-docked .step-chrome h3 { font-size: 15px; } .tbhw-concept .quote.is-docked .step-chrome .hint { display: none; } .tbhw-concept .quote.is-docked:not([data-tbhw-mstep="8"]) .consent { display: none; } .tbhw-concept .quote.is-docked .rail-step { font-size: 9px; padding: 7px 2px 8px; } .tbhw-concept .quote.is-docked.is-final .qbody { max-height: calc(100vh - 48px); } .tbhw-concept .quote.is-docked.is-final .pickers { max-height: none; scrollbar-gutter: auto; } @keyframes tbhw-mstep-in { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } } body.tbhw-concept .quote.is-docked[data-tbhw-mstep] .qbody { display: flex; flex-direction: column; /* Крок 1 задає .qbody гридом з align-items: start (секція 9). Тут display стає flex, але align-items успадковується з того правила, а у flex-колонці це вирівнювання по ГОРИЗОНТАЛІ — воно стискало .gform_wrapper і .mnav до ширини вмісту, через що поле ZIP не було на всю ширину, а Next не діставав правого краю. */ align-items: stretch; height: 172px; max-height: none; padding: 8px 20px 10px; overflow: hidden; overscroll-behavior: contain; } body.tbhw-concept .quote.is-docked[data-tbhw-mstep] .gform_wrapper { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; } body.tbhw-concept .quote.is-docked[data-tbhw-mstep] .step-chrome, body.tbhw-concept .quote.is-docked[data-tbhw-mstep] .wiz-nav, body.tbhw-concept .quote.is-docked[data-tbhw-mstep] .gform_wrapper .gform_validation_errors { display: none; } body.tbhw-concept .quote.is-docked[data-tbhw-mstep] .gform_wrapper .gfield_validation_message, body.tbhw-concept .quote.is-docked[data-tbhw-mstep] .gform_wrapper .validation_message { background: transparent; border: 0; border-left: 2px solid var(--brick); border-radius: 0; padding: 2px 0 2px 9px; margin: 6px 0 0; font-size: 12px; font-weight: 500; color: var(--brick); } body.tbhw-concept .quote.is-docked[data-tbhw-mstep] .mnav { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: none; margin-top: 8px; } body.tbhw-concept .quote.is-docked[data-tbhw-mstep] .mnav .btn { height: 40px; padding-top: 0; padding-bottom: 0; font-size: 14px; } body.tbhw-concept .quote.is-docked[data-tbhw-mstep] .mnav .btn-go { padding-left: 20px; padding-right: 20px; } body.tbhw-concept .quote.is-docked[data-tbhw-mstep] .mnav .btn-back { padding-left: 6px; padding-right: 6px; } body.tbhw-concept .quote.is-docked[data-tbhw-mstep] .mnav .btn-back:disabled { opacity: .45; cursor: default; } body.tbhw-concept .quote.is-docked[data-tbhw-mstep] .gform_wrapper #field_1_9, body.tbhw-concept .quote.is-docked[data-tbhw-mstep] .gform_wrapper #field_1_1, body.tbhw-concept .quote.is-docked[data-tbhw-mstep] .gform_wrapper #field_1_4, body.tbhw-concept .quote.is-docked[data-tbhw-mstep] .gform_wrapper #field_1_2, body.tbhw-concept .quote.is-docked[data-tbhw-mstep] .gform_wrapper #field_1_3 { display: none; } body.tbhw-concept .quote.is-docked[data-tbhw-mstep="1"] .gform_wrapper #field_1_9, body.tbhw-concept .quote.is-docked[data-tbhw-mstep="2"] .gform_wrapper #field_1_1, body.tbhw-concept .quote.is-docked[data-tbhw-mstep="3"] .gform_wrapper #field_1_1, body.tbhw-concept .quote.is-docked[data-tbhw-mstep="4"] .gform_wrapper #field_1_4, body.tbhw-concept .quote.is-docked[data-tbhw-mstep="5"] .gform_wrapper #field_1_2, body.tbhw-concept .quote.is-docked[data-tbhw-mstep="6"] .gform_wrapper #field_1_3 { display: block; } body.tbhw-concept .quote.is-docked[data-tbhw-mstep="2"] .gform_wrapper #field_1_1 .ginput_complex > span.name_last, body.tbhw-concept .quote.is-docked[data-tbhw-mstep="3"] .gform_wrapper #field_1_1 .ginput_complex > span.name_first { display: none; } body.tbhw-concept .quote.is-docked[data-tbhw-mstep] .gform_wrapper .ginput_complex, body.tbhw-concept .quote.is-docked[data-tbhw-mstep] .gform_wrapper #field_1_4 .ginput_complex { display: block; margin-left: 0; margin-right: 0; } body.tbhw-concept .quote.is-docked[data-tbhw-mstep] .gform_wrapper .ginput_complex > span { width: 100%; max-width: 100%; flex: 1 1 100%; margin: 0; } body.tbhw-concept .quote.is-docked[data-tbhw-mstep] .gform_wrapper .gf_clear_complex { display: none; } body.tbhw-concept .quote.is-docked[data-tbhw-mstep] .gform_wrapper #field_1_2, body.tbhw-concept .quote.is-docked[data-tbhw-mstep] .gform_wrapper #field_1_3 { grid-column: 1 / -1; } body.tbhw-concept .quote.is-docked[data-tbhw-mstep] .gform_wrapper .gfield, body.tbhw-concept .quote.is-docked[data-tbhw-mstep] .gform_wrapper .ginput_complex > span { animation: tbhw-mstep-in .18s ease; } body.tbhw-concept .quote.is-docked[data-tbhw-mstep="7"] .qbody { height: auto; max-height: 210px; } body.tbhw-concept .quote.is-docked[data-tbhw-mstep="7"] .pickers { display: flex; flex-wrap: nowrap; gap: 8px; flex: none; max-height: none; margin-bottom: 0; padding-bottom: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-gutter: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; } body.tbhw-concept .quote.is-docked[data-tbhw-mstep="7"] .pick { flex: 0 0 auto; width: 168px; scroll-snap-align: start; } body.tbhw-concept .quote.is-docked[data-tbhw-mstep="7"] .pick > span { min-width: 0; } body.tbhw-concept .quote.is-docked[data-tbhw-mstep="7"] .pick .nm, body.tbhw-concept .quote.is-docked[data-tbhw-mstep="7"] .pick .mt { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } body.tbhw-concept .quote.is-docked[data-tbhw-mstep="8"] .qbody { height: auto; max-height: 45vh; overflow-y: auto; } body.tbhw-concept .quote.is-docked[data-tbhw-mstep="8"] .pickers { display: none; } .tbhw-concept .quote.in-modal { position: static; max-height: none; box-shadow: none; } .tbhw-concept .quote.in-modal .qbody { overflow: visible; max-height: none; } .tbhw-concept #cmpFormHost, .tbhw-concept #regFormHost, .tbhw-concept #exitFormHost { max-width: 430px; margin: 0 auto; } /* 13. Overlay option cards, comparison table, success screen */ .tbhw-concept .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 30px; } @media (max-width: 720px) { .tbhw-concept .opts { grid-template-columns: 1fr; } } .tbhw-concept .opts--single { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto 30px; } .tbhw-concept .opt { background: var(--white); border: 1px solid var(--line); border-radius: 13px; padding: 24px 22px; display: flex; flex-direction: column; } .tbhw-concept .opt.hi { border-color: var(--ink); border-width: 2px; background: #fafafa; } .tbhw-concept .opt .lbl { font-family: var(--mono); font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 11px; } .tbhw-concept .opt.hi .lbl { color: var(--ink); font-weight: 600; } .tbhw-concept .opt h4 { font-family: var(--display); font-size: 21px; color: var(--ink); margin: 0 0 9px; line-height: 1.2; } .tbhw-concept .opt p { color: var(--muted); font-size: 14.5px; margin: 0 0 14px; line-height: 1.6; } .tbhw-concept .opt ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 7px; } .tbhw-concept .opt li { color: var(--ink); font-size: 13.5px; padding-left: 17px; position: relative; line-height: 1.5; } .tbhw-concept .opt li::before { content: "+"; position: absolute; left: 0; font-family: var(--mono); font-weight: 600; color: var(--teal); } .tbhw-concept .opt.hi li::before { color: var(--amber); } .tbhw-concept .opt .go { margin-top: auto; border: 0; border-radius: 8px; padding: 13px; font-family: var(--body); font-weight: 600; font-size: 15px; cursor: pointer; width: 100%; } .tbhw-concept .opt .go.a { background: var(--ink); color: #fff; } .tbhw-concept .opt .go.a:hover { background: #333333; } .tbhw-concept .opt .go.b { background: var(--amber); color: #ffffff; } .tbhw-concept .opt .go.b:hover { background: var(--amber-deep); } .tbhw-concept .opt .fine { font-size: 11.5px; color: var(--muted); margin: 11px 0 0; line-height: 1.6; } /* Comparison table (used inside overlays, distinct from the on-page .table-wrap table). */ .tbhw-concept .cmptbl { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 28px; } .tbhw-concept .cmptbl th, .tbhw-concept .cmptbl td { padding: 13px 14px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--line); } .tbhw-concept .cmptbl tr:last-child th, .tbhw-concept .cmptbl tr:last-child td { border-bottom: 0; } .tbhw-concept .cmptbl thead th { background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; vertical-align: middle; } .tbhw-concept .cmptbl thead th.anchor { background: var(--ink); border-bottom: 3px solid var(--amber); } .tbhw-concept .cmptbl thead th small { display: block; font-weight: 400; font-size: 11px; color: #b0b0b0; margin-top: 3px; } .tbhw-concept .cmptbl tbody th { width: 34%; font-weight: 500; color: var(--muted); font-size: 13px; background: #fafafa; } .tbhw-concept .cmptbl td { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); } .tbhw-concept .cmptbl td.anchor { background: #f7f7f7; box-shadow: inset 3px 0 0 var(--amber); } .tbhw-concept .cmptbl td.note, .tbhw-concept .cmptbl td.anchor.note { font-weight: 400; font-size: 13px; color: var(--muted); line-height: 1.5; } @media (max-width: 560px) { .tbhw-concept .cmptbl th, .tbhw-concept .cmptbl td { padding: 10px 9px; font-size: 13px; } .tbhw-concept .cmptbl tbody th { width: 32%; font-size: 12px; } } /* Success screen */ .tbhw-concept .ov-flag { background: #f0f0f0; color: var(--muted); border: 1px solid var(--line); font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; text-align: center; padding: 8px 14px; border-radius: 7px; margin-bottom: 26px; font-weight: 600; line-height: 1.5; } .tbhw-concept .ov-head .ok { width: 56px; height: 56px; border-radius: 50%; background: #1e8e3e; color: #fff; display: grid; place-items: center; margin: 0 auto 16px; font-size: 27px; } .tbhw-concept .ov-sent { background: #f7f7f7; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin-bottom: 38px; } .tbhw-concept .ov-sent h4 { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 11px; font-weight: 600; } .tbhw-concept .ov-sent ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .tbhw-concept .ov-sent li { background: var(--white); border: 1px solid var(--line); color: var(--ink); font-size: 13.5px; padding: 6px 13px; border-radius: 20px; } .tbhw-concept .ov-band { text-align: center; margin-bottom: 24px; } .tbhw-concept .ov-band .eyebrow { color: var(--muted); margin-bottom: 11px; } .tbhw-concept .ov-band h3 { font-family: var(--display); font-size: clamp(22px, 3.2vw, 30px); color: var(--ink); margin: 0 0 9px; } .tbhw-concept .ov-band p { color: var(--muted); font-size: 15.5px; margin: 0 auto; max-width: 62ch; } .tbhw-concept .vids { margin-bottom: 34px; } .tbhw-concept .ov-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000000; } .tbhw-concept .ov-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .tbhw-concept .vids .src { margin-top: 8px; } /* 14. Card done state */ .tbhw-concept .tbhw-done { text-align: center; padding: 8px 4px 4px; } .tbhw-concept .tbhw-done-ok { width: 48px; height: 48px; border-radius: 50%; background: #1e8e3e; color: #fff; display: grid; place-items: center; margin: 0 auto 12px; font-size: 24px; } .tbhw-concept .tbhw-done h3 { font-family: var(--display); font-size: 20px; margin: 0 0 8px; font-weight: 600; } .tbhw-concept .tbhw-done p { font-size: 13.5px; color: var(--muted); margin: 0 0 4px; } .tbhw-concept .quote.is-done .rail, .tbhw-concept .quote.is-done .step-chrome, .tbhw-concept .quote.is-done .wiz-nav, .tbhw-concept .quote.is-done .mnav, .tbhw-concept .quote.is-done .pickers, .tbhw-concept .quote.is-done .consent { display: none !important; }