/* =========================================================================== Skin: d — Blue Haven-style layout, built for SMS traffic. Mobile-first: SMS clicks are ~all phone, so this is designed at 375px and scaled up, not the other way round. Design tokens are the variant's `theme` block (see _app/config/variants/d.php) so a colour test needs no new stylesheet. =========================================================================== */ :root { --primary: #0C4A6E; /* navy — buttons, progress, links */ --primary-dark: #083651; /* pressed / hover */ --secondary: #0C4A6E; /* CTA (engine reads --secondary) */ --muted-cta: #8FA9BC; /* CTA before the step is valid */ --surface: #F9FAFB; /* header bar */ --border: #E5E7EB; --input-border: #D1D5DB; --text: #0F172A; --text-light: #4B5563; --white: #ffffff; --red: #dc3545; --green: #28a745; } * { box-sizing: border-box; } html, body { margin: 0; background: var(--white); color: var(--text); /* System stack, matching the reference. No web font request at all. */ font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; } /* Footer sits at the bottom of the viewport on short steps, and below the content on long ones — the reference does this and it stops the legal links floating mid-screen on the ZIP step. */ body { min-height: 100dvh; display: flex; flex-direction: column; } .page-wrapper { flex: 1 0 auto; display: flex; flex-direction: column; } .main-wrapper { flex: 1 0 auto; display: flex; flex-direction: column; } /* ---- header --------------------------------------------------------------- */ #navigation { display: flex; align-items: center; justify-content: space-between; /* logo left, phone right */ gap: 12px; min-height: 57px; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--border); } #navigation .logo img { max-height: 32px; width: auto; display: block; } /* Phone as a text link with an icon, not a filled button. Ringba still swaps the number — the tel: href and .callbtn class are unchanged. */ #navigation .callbtn { display: inline-flex; align-items: center; gap: 8px; background: none; color: var(--primary); font-weight: 700; font-size: 17px; text-decoration: none; /* Renders 32px tall to match the reference's 57px header, but the vertical padding is cancelled by an equal negative margin so the tap target is still ~56px. Matching their layout should not cost a thumb-sized target on the one control that phones a live agent. */ min-height: 32px; padding: 12px 2px; margin: -12px 0; } #navigation .callbtn::before { content: ""; width: 20px; height: 20px; flex: 0 0 20px; background-color: currentColor; -webkit-mask: var(--icon-phone) center/contain no-repeat; mask: var(--icon-phone) center/contain no-repeat; } /* ---- progress ------------------------------------------------------------- */ #formarea { position: relative; /* anchor for the back button */ flex: 1 0 auto; width: 100%; max-width: 640px; margin: 0 auto; padding: 24px 16px 32px; } .progress-container { display: flex; align-items: center; gap: 14px; margin-bottom: 41px; /* No transition here on purpose: padding-left triggers reflow, and an animated layout property depends on frames being produced. */ } /* Room for the back arrow, only once there is a step to go back to. The engine toggles .funnel-has-back on . */ body.funnel-has-back .progress-container { padding-left: 52px; } .progress-bar { flex: 1 1 auto; height: 6px; background: var(--border); border-radius: 999px; overflow: hidden; } .progress-fill { height: 100%; width: 20%; background: var(--primary); border-radius: 999px; transition: width 260ms cubic-bezier(.4,0,.2,1); } /* Start / Finish labels are dropped; only the percentage is kept, on the right. */ .progress-steps { display: contents; } .progress-steps .progress-step { display: none; } .progress-steps .progress-step:nth-child(2) { display: block; order: 3; font-size: 14px !important; font-weight: 700; color: var(--primary) !important; padding-top: 0 !important; white-space: nowrap; } /* ---- question card -------------------------------------------------------- */ .question-card { text-align: center; } .node { display: none; } .question-text { font-size: 30px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 32px; color: var(--text); } /* Most questions render an empty .question-description; its margins still applied and pulled the field label 13px up the page. */ .question-description:empty { display: none; } /* Also carried a negative top margin from the earlier spacing. It only shows on questions that have a subhead (e.g. "Save an additional 20%"), so it was not visible in the screenshots — it would have pulled that line up into the headline. The gap above comes from .question-text's 32px bottom margin. */ .question-description { font-size: 16px; color: var(--text-light); margin: 0 0 24px; } .question-number { display: none; } /* Icon above the headline. Each question sets --q-icon in its own markup. */ .node[data-icon]::before { content: ""; display: block; width: 48px; height: 48px; margin: 0 auto 16px; background-color: var(--primary); -webkit-mask: var(--q-icon) center/contain no-repeat; mask: var(--q-icon) center/contain no-repeat; } /* ---- option buttons: two-up pill grid ------------------------------------- */ .options-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 8px; } /* Questions whose answers are long (insurance companies, coverage levels) opt into a single column via data-cols="1". */ .node[data-cols="1"] .options-container { grid-template-columns: 1fr; } .option-button { appearance: none; width: 100%; min-height: 56px; padding: 15px 14px; border: 2px solid var(--input-border); border-radius: 999px; background: var(--white); color: var(--text); font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; } .option-button:hover { border-color: var(--primary); } /* Immediate feedback on touch, so a tap never feels ignored. */ .option-button:active { transform: scale(.985); } .option-button.selected, .option-button:active { border-color: var(--primary); background: var(--primary); color: var(--white); } /* Make brand logos optional — the spec removes them from the make step. */ .option-button img { display: none; } /* ---- typed inputs --------------------------------------------------------- */ .field-label { display: block; text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--text-light); margin: 0 0 8px; } .text-input { width: 100%; /* 16px minimum stops iOS zooming on focus, which does not reverse. */ font-size: 18px; min-height: 56px; padding: 12px 16px; border: 2px solid var(--input-border); border-radius: 8px; background: var(--white); color: var(--text); margin-bottom: 0; font-family: inherit; } .text-input::placeholder { color: #9CA3AF; } .text-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(12,74,110,.12); } /* City/state resolved from the ZIP, shown under the address field. This carried margin-top:-12px to cancel the input's old 18px bottom margin. When that margin went to 0 the negative pull remained and dragged the text up into the field. Spacing is positive-only now so it cannot overlap again. The bh override renders this div with no inline styles, so no !important is needed here — unlike the shared partial, which inlines its own. */ .locationprefill { text-align: left; font-size: 16px; font-weight: 400; line-height: 1.4; color: var(--text-light); padding: 0; margin: 8px 0 0; } .locationprefill:empty { display: none; } /* Same leftover as .locationprefill had: margin-top:-10px was cancelling the input's old 18px bottom margin. With that margin now 0, the negative pull put the error text on top of the field border. Positive spacing only. */ .errorCode { display: none; text-align: left; color: var(--red); font-size: 14px; line-height: 1.4; margin: 8px 0 0; padding: 0; } /* ---- actions -------------------------------------------------------------- */ .continue-button { appearance: none; width: 100%; min-height: 60px; margin-top: 24px; padding: 16px 24px; border: none; border-radius: 999px; background: var(--secondary); color: var(--white); font: inherit; font-size: 18px; font-weight: 700; cursor: pointer; transition: background-color .2s; } .continue-button:hover:not(:disabled) { background: var(--primary-dark); } .continue-button:disabled { background: var(--muted-cta); cursor: not-allowed; } /* The back arrow moves up beside the progress bar. It is positioned by .progress-container via a wrapper the engine does not know about, so it is pulled out of .action-buttons with absolute positioning instead. .action-buttons must NOT be positioned, or it becomes the containing block for the back button and the arrow lands next to the CTA instead of the progress bar. #formarea is the intended anchor. */ /* Pulled out of .action-buttons and parked on the progress row. Absolute against #formarea, so it scrolls with the page rather than floating. */ .back-button { position: absolute; top: 16px; left: 16px; /* centres the 36px circle on the 6px bar */ width: 36px; height: 36px; min-width: 36px; min-height: 36px; /* beats the 44px floor in app.css */ flex: 0 0 36px; margin: 0; padding: 0; border: 1px solid var(--input-border); border-radius: 50%; background: var(--white); color: var(--primary); font-size: 0; /* hide the "← Back" label, keep the control */ line-height: 1; cursor: pointer; z-index: 5; } .back-button::before { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: var(--icon-back) center/contain no-repeat; mask: var(--icon-back) center/contain no-repeat; } /* ---- TCPA ----------------------------------------------------------------- */ /* Unboxed, below the CTA, navy links — matching the reference's treatment. The WORDING is ours and is not styled away: see _app/partials/tcpa.php. */ /* Hidden until the final step, where the engine shows it — same contract as c.css. Without this default it renders from step 1 and adds ~400px of legal text under the ZIP field. */ .tcpa-language { display: none; margin-top: 20px; } .tcpa-language > div { border: none !important; background: none !important; padding: 0 !important; margin: 0 !important; text-align: left; } .tcpa-language p { font-size: 13px; line-height: 1.55; color: var(--text-light); margin: 0; } .tcpa-language a { color: var(--primary) !important; text-decoration: underline; } /* "Your information is secure" padlock row — the spec drops the trust badges. */ .tcpa-language .question-description { display: none; } /* ---- results / loading ---------------------------------------------------- */ .results-container { display: none; text-align: center; } #progress-container { width: 60%; height: 8px; background: var(--border); border-radius: 999px; margin: 18px auto; overflow: hidden; } #progress-bar { height: 100%; width: 30%; background: var(--primary); border-radius: 999px; } /* ---- content + footer ----------------------------------------------------- */ /* "Fast and Secure" band is removed by the spec. */ #contentarea { display: none; } .footer4_component { flex: 0 0 auto; padding: 32px 16px; background: var(--white); } .footer4_bottom-wrapper { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; font-size: 12px; color: var(--text-light); text-align: center; } .footer4_legal-link { color: var(--text-light); text-decoration: underline; } .footer4_credit-text { color: #9CA3AF; } /* ---- saving spinner ------------------------------------------------------- */ .saving-indicator { display: none; align-items: center; justify-content: center; padding: 12px 0; } .saving-spinner { width: 26px; height: 26px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: bh-spin .8s linear infinite; } @keyframes bh-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .progress-fill { transition: none; } .saving-spinner { animation: none; } #progress-bar { width: 100%; } } /* ---- wider screens -------------------------------------------------------- */ @media (min-width: 700px) { .question-text { font-size: 34px; } #formarea { padding-top: 26px; } }