*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --blue: #1a4b8c; --blue-mid: #2563b0; --blue-light: #e8f0fb; --green: #15803d; /* dark enough for 4.5:1 text contrast on --green-light */ --green-light: #dcfce7; --text: #1e2330; --muted: #5a6275; --border: #d4dae6; --white: #ffffff; --bg: #f7f9fc; --radius: 10px; --shadow: 0 4px 24px rgba(26,75,140,.10); --shadow-sm: 0 2px 8px rgba(26,75,140,.08); --amber: #b45309; /* dark enough for 4.5:1 text contrast on --amber-light */ --amber-light: #fef3c7; } html { scroll-behavior: smooth; } body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); line-height: 1.7; font-size: 16px; min-height: 100vh; display: flex; flex-direction: column; } /* Sticky-footer min-height is viewport-relative (100vh), which is exactly what makes it dangerous inside an iframe embed that resizes itself to fit its content: grow the iframe → 100vh grows → the flexed .page stretches to fill it → reported content height grows → iframe grows again, forever. The frame-ancestor guard adds this class to only when legitimately embedded in a trusted parent, so the sticky footer still works normally for direct/standalone viewing. */ html.zwco-embedded body { min-height: 0; } /* Form controls don't inherit the body font by default */ input, select, button { font-family: inherit; } /* Keyboard navigation — visible focus on links (controls have their own rings) */ a:focus-visible { outline: 3px solid rgba(37,99,176,.35); outline-offset: 2px; border-radius: 4px; } /* CONSULTATION PROMPT Modal invitation to book a consultation, shown once per session after the visitor has actually run a calculation (never before content, never repeatedly — see the trigger logic in calculator2.html). */ .consult-overlay { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 1rem; background: rgba(15,20,32,.55); } .consult-overlay[data-open="true"] { display: flex; } .consult-modal { position: relative; width: 100%; max-width: 30rem; max-height: 90vh; overflow-y: auto; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.75rem 1.5rem 1.5rem; text-align: center; } .consult-modal h2 { font-size: 1.15rem; font-weight: 700; color: var(--blue); margin-bottom: .6rem; line-height: 1.4; } .consult-modal p { font-size: .9rem; color: var(--text); line-height: 1.6; } .consult-actions { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.25rem; } .consult-actions .cta-btn { width: 100%; } .consult-dismiss { background: none; border: none; cursor: pointer; color: var(--muted); font-size: .85rem; font-weight: 600; min-height: 44px; border-radius: 7px; } .consult-dismiss:hover { color: var(--blue); background: var(--bg); } .consult-close { position: absolute; inset-inline-end: .5rem; top: .5rem; width: 44px; height: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--muted); font-size: 1.5rem; line-height: 1; border-radius: 8px; } .consult-close:hover { color: var(--text); background: var(--bg); } .consult-fineprint { font-size: .74rem !important; color: var(--muted) !important; margin-top: 1rem; line-height: 1.55 !important; } /* CONTACT CTA (shown after calculator results) */ .contact-cta { max-width: 900px; margin: 2rem auto 0; background: var(--blue-light); border: 1px solid #bfcfe8; border-radius: var(--radius); padding: 1.5rem 1.75rem; text-align: center; } .contact-cta p { color: var(--text); font-size: .95rem; margin-bottom: .75rem; } /* Not scoped to .contact-cta: the same button is reused in the consultation modal, and a scoped rule left it with no padding (a 27px-tall tap target) there. */ a.cta-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; background: var(--blue); color: var(--white); padding: .6rem 1.4rem; border-radius: 7px; text-decoration: none; font-weight: 600; font-size: .9rem; } a.cta-btn:hover { background: var(--blue-mid); } /* ── PWA APP SHELL: bottom tab bar ────────────────────────────── Shown on narrow screens and whenever the site is running as an installed app. Deliberately hidden inside the Wix iframe embed (the host page has its own navigation there), reusing the .zwco-embedded flag the frame-ancestor guard already sets. */ .app-tabbar { display: none; /* top:auto is load-bearing: the bare `nav` rule sets top:0 for the sticky header, and without resetting it a fixed element with both top:0 and bottom:0 stretches over the whole viewport. */ position: fixed; inset-inline: 0; top: auto; bottom: 0; z-index: 150; background: var(--white); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -2px 8px rgba(26,75,140,.08); } .app-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-height: 56px; padding: .4rem .2rem; text-decoration: none; color: var(--muted); font-size: .68rem; font-weight: 600; text-align: center; } .app-tab .tab-icon { font-size: 1.15rem; line-height: 1; } .app-tab[aria-current="page"] { color: var(--blue); } .app-tab:focus-visible { outline: 3px solid rgba(37,99,176,.35); outline-offset: -3px; border-radius: 6px; } @media (max-width: 820px) { .app-tabbar { display: flex; } body { padding-bottom: 64px; } } @media (display-mode: standalone) { .app-tabbar { display: flex; } body { padding-bottom: 64px; } } /* Higher specificity than the media rules above — no !important needed. */ html.zwco-embedded .app-tabbar { display: none; } html.zwco-embedded body { padding-bottom: 0; } /* ── Contact page options ── */ .contact-list { display: flex; flex-direction: column; gap: .6rem; } .contact-option { display: flex; align-items: center; gap: .9rem; min-height: 56px; padding: .85rem 1rem; border: 1.5px solid var(--border); border-radius: 8px; background: var(--white); text-decoration: none; color: var(--text); transition: border-color .2s, background .2s; } .contact-option:hover, .contact-option:focus-visible { border-color: var(--blue-mid); background: var(--blue-light); } .contact-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; } .contact-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; } .contact-text strong { font-size: .95rem; color: var(--blue); } .contact-sub { font-size: .8rem; color: var(--muted); } /* SKIP LINK */ .skip-link { position: absolute; top: -3rem; left: 1rem; z-index: 200; background: var(--blue); color: var(--white); padding: .6rem 1.1rem; border-radius: 6px; font-size: .9rem; font-weight: 600; text-decoration: none; transition: top .15s; } .skip-link:focus { top: 1rem; } /* NAV */ nav { background: var(--white); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 100; } .nav-inner { max-width: 960px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.5rem; } .nav-brand { font-weight: 700; font-size: 1.05rem; color: var(--blue); text-decoration: none; } .brand-by { font-size: .72rem; font-weight: 600; color: var(--muted); letter-spacing: .04em; white-space: nowrap; } /* At phone widths the back-link stays visible (no nav collapse on these pages), so hide the badge to keep the nav brand on one line. */ @media (max-width: 480px) { .brand-by { display: none; } } .back-link { text-decoration: none; color: var(--muted); font-size: .875rem; padding: .4rem .75rem; border-radius: 6px; border: 1px solid var(--border); transition: all .2s; } .back-link:hover { color: var(--blue); background: var(--blue-light); border-color: var(--blue-mid); } /* HERO */ .hero { background: linear-gradient(135deg, var(--blue) 0%, #0d2d5e 100%); color: var(--white); padding: 3rem 1.5rem 2.5rem; text-align: center; } .hero-badge { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 50px; padding: .3rem .95rem; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 1rem; color: rgba(255,255,255,.9); } .hero h1 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); font-weight: 800; line-height: 1.2; margin-bottom: .5rem; } .hero p { font-size: .95rem; color: rgba(255,255,255,.75); max-width: 480px; margin: 0 auto; } /* STEPS */ .steps-bar { background: var(--white); border-bottom: 1px solid var(--border); padding: .85rem 1.5rem; } .steps-inner { max-width: 960px; margin: 0 auto; display: flex; align-items: center; gap: .5rem; font-size: .82rem; } .step { display: flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 20px; font-weight: 600; } .step.done { color: var(--green); } .step.active { background: var(--blue); color: var(--white); } .step.pending{ color: var(--muted); } .step-num { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 800; } .step.done .step-num { background: var(--green-light); color: var(--green); } .step.active .step-num { background: rgba(255,255,255,.25); } .step.pending .step-num{ background: var(--border); color: var(--muted); } .step-sep { color: var(--border); font-size: 1rem; } /* PAGE */ .page { max-width: 960px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; flex: 1; } /* CARD / RESULT PANEL — shared shell so inputs and results read as one system */ .card, .track-section { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2.25rem 2.5rem; } .card { margin-bottom: 1.5rem; } .track-section { margin-top: 1.5rem; } @media (max-width: 580px) { .card, .track-section { padding: 1.5rem 1.25rem; } } .card-header, .track-section-header { padding-bottom: 1.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); } .card-header h2, .track-section-header h2 { font-size: 1.15rem; font-weight: 700; color: var(--blue); margin-bottom: .25rem; } .card-header p, .track-section-header p { font-size: .87rem; color: var(--muted); } /* FIELDS */ .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 2rem; } @media (max-width: 560px) { .fields { grid-template-columns: 1fr; } } .field { display: flex; flex-direction: column; gap: .4rem; } .field.full { grid-column: 1 / -1; } .field label { font-size: .84rem; font-weight: 600; color: var(--text); } .field select { width: 100%; border: 1.5px solid var(--border); border-radius: 7px; padding: .65rem .9rem; font-size: .94rem; color: var(--text); background: var(--white); outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 2.4rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%235a6275' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .85rem center; transition: border-color .2s, box-shadow .2s; } .field select:hover { border-color: var(--blue-mid); } .field select:focus { border-color: var(--blue-mid); box-shadow: 0 0 0 3px rgba(37,99,176,.12); } .field select.filled { border-color: #86efac; background-color: #f0fdf4; } /* INCOME INPUT */ .income-wrap { display: flex; align-items: stretch; border: 1.5px solid var(--border); border-radius: 7px; background: var(--white); overflow: hidden; transition: border-color .2s, box-shadow .2s; } .income-wrap:focus-within { border-color: var(--blue-mid); box-shadow: 0 0 0 3px rgba(37,99,176,.12); } .income-wrap.filled { border-color: #86efac; background-color: #f0fdf4; } .income-prefix { display: flex; align-items: center; padding: 0 .5rem 0 .9rem; color: var(--muted); font-size: .95rem; user-select: none; flex-shrink: 0; } .income-wrap input { border: none; outline: none; background: transparent; padding: .65rem .5rem .65rem .2rem; font-size: .94rem; color: var(--text); flex: 1; min-width: 0; } .income-wrap input::-webkit-inner-spin-button { opacity: .4; } /* BRACKET TABLE */ .bracket-table-wrap { grid-column: 1 / -1; overflow-x: auto; border-radius: 8px; border: 1px solid var(--border); } .bracket-table-wrap table { width: 100%; border-collapse: collapse; font-size: .88rem; } .bracket-table-wrap thead th { background: var(--blue); color: var(--white); padding: .6rem 1rem; text-align: left; font-size: .78rem; font-weight: 700; letter-spacing: .04em; } .bracket-table-wrap thead th:first-child { border-radius: 0; } .bracket-table-wrap tbody td { padding: .55rem 1rem; border-bottom: 1px solid var(--border); color: var(--text); } .bracket-table-wrap tbody tr:last-child td { border-bottom: none; } .bracket-table-wrap tbody tr:nth-child(even) { background: var(--bg); } /* slide-in */ @keyframes slideIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } /* TWO-COLUMN LAYOUT */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; } @media (max-width: 720px) { .two-col { grid-template-columns: 1fr; } } /* METRICS GRID — auto-fit keeps 2 or 3 metrics on one scannable row */ .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; margin-top: 1.5rem; animation: slideIn .2s ease; } .metric { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: .9rem 1rem; } .metric-label { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; } .metric-val { font-size: 1.25rem; font-weight: 800; color: var(--text); overflow-wrap: anywhere; min-width: 0; } .metric-val.accent { color: var(--blue); font-size: 1.45rem; } /* CHECKBOX ROW */ .checkbox-row { display: flex; align-items: center; gap: .55rem; font-size: .875rem; font-weight: 600; color: var(--text); cursor: pointer; margin-top: .75rem; } .checkbox-row input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; accent-color: var(--blue); } /* hint text below input */ .input-hint { font-size: .78rem; color: var(--muted); margin-top: .4rem; } .input-hint a { color: var(--blue); font-weight: 600; } /* INPUT TABLE */ .input-table { width: 100%; border-collapse: collapse; font-size: .9rem; } .input-table th { background: var(--blue); color: var(--white); padding: .55rem 1rem; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-align: center; } .input-table th:first-child { text-align: left; } .input-table td { padding: .5rem .75rem; border: 1px solid var(--border); vertical-align: middle; } .input-table tbody tr:nth-child(even) { background: var(--bg); } .input-row-label { font-weight: 600; font-size: .87rem; color: var(--text); white-space: nowrap; width: 220px; } .input-table input[type="text"] { width: 100%; border: 1.5px solid var(--border); border-radius: 6px; padding: .5rem .65rem; font-size: .9rem; color: var(--text); background: var(--white); outline: none; transition: border-color .2s, box-shadow .2s; } .input-table input[type="text"]:focus { border-color: var(--blue-mid); box-shadow: 0 0 0 3px rgba(37,99,176,.12); } .input-row-disabled { opacity: .4; } .input-row-disabled input { background: var(--bg); cursor: not-allowed; } .table-checkboxes { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2.5rem; align-items: center; margin-top: .9rem; } .table-checkboxes .checkbox-row { margin-top: 0; } /* TRACK COMPARISON SECTION (shell styles shared with .card above) */ .track-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } @media (max-width: 720px) { .track-cards { grid-template-columns: 1fr; } } .track-cards-2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 720px) { .track-cards-2 { grid-template-columns: 1fr; } } .track-card.track-ineligible { opacity: .55; } .track-card { border: 2px solid var(--border); border-radius: var(--radius); padding: 1.5rem 1.75rem; display: flex; flex-direction: column; gap: .6rem; } .track-card-name { display: flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .track-letter { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; background: var(--blue-light); color: var(--blue); font-size: .68rem; font-weight: 800; line-height: 1; } .track-letter-c { background: var(--amber-light); color: var(--amber); } .track-card-rate { font-size: 2rem; font-weight: 800; color: var(--text); line-height: 1.1; } .track-divider { border: none; border-top: 1px solid var(--border); margin: .25rem 0; } .track-result-row { display: flex; justify-content: space-between; align-items: baseline; font-size: .875rem; gap: .5rem; } .track-result-label { color: var(--muted); } .track-result-val { font-weight: 700; color: var(--text); } .track-badge-area { min-height: 1.75rem; margin-top: .25rem; } .track-verdict { margin-top: 1.25rem; font-size: .9rem; color: var(--muted); text-align: center; font-style: italic; overflow-wrap: anywhere; min-width: 0; } .badge { display: inline-block; padding: .25rem .65rem; border-radius: 20px; font-size: .75rem; font-weight: 700; letter-spacing: .03em; } .badge-recommended { background: var(--green-light); color: var(--green); border: 1px solid #86efac; } .badge-close { background: var(--bg); color: var(--muted); border: 1px solid var(--border); } .badge-warning { background: var(--amber-light); color: var(--amber); border: 1px solid #fcd34d; } .track-card.track-recommended { border-color: var(--green); background: #f7fdf9; box-shadow: 0 2px 12px rgba(22,163,74,.10); } .bl-note { font-size: .74rem; color: var(--amber); line-height: 1.4; background: var(--amber-light); border: 1px solid #fcd34d; border-radius: 6px; padding: .4rem .65rem; margin-top: .25rem; } /* Ownership flag badge */ .cg-flag { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 700; padding: .25rem .7rem; border-radius: 20px; margin-left: .5rem; } .cg-flag-yes { background: var(--green-light); color: var(--green); border: 1px solid #86efac; } .cg-flag-no { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; } .cg-flag-na { background: var(--bg); color: var(--muted); border: 1px solid var(--border); font-weight: 400; font-style: italic; } /* Foreign-owner notice box */ .foreign-notice { background: var(--amber-light); border: 1px solid #fcd34d; border-radius: var(--radius); padding: .9rem 1.1rem; margin-top: 1rem; font-size: .875rem; color: var(--text); line-height: 1.55; } .foreign-notice strong { color: var(--amber); } /* CG extras area below the input table */ .cg-extras { margin-top: 1.25rem; } /* OPTION GRID — two-column option fields that stack on small screens */ .opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 2rem; margin-top: 1.5rem; align-items: start; } @media (max-width: 560px) { .opt-grid { grid-template-columns: 1fr; } } /* MOBILE — keep input tables usable on ~375px screens */ @media (max-width: 580px) { .input-row-label { white-space: normal; width: 38%; min-width: 100px; } .input-table td { padding: .45rem .5rem; } .input-table input[type="text"] { padding: .6rem .55rem; } } /* FALLBACK */ .fallback { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 2.5rem; text-align: center; color: var(--muted); box-shadow: var(--shadow-sm); } .fallback p { margin-bottom: 1rem; } .fallback a { color: var(--blue-mid); text-decoration: none; font-weight: 600; } .fallback a:hover { text-decoration: underline; } /* FOOTER */ footer { background: var(--blue); color: rgba(255,255,255,.75); text-align: center; padding: 1.75rem 1.5rem; font-size: .84rem; } footer strong { color: var(--white); } footer a { color: var(--white); text-decoration: none; } footer a:hover { text-decoration: underline; } /* Full logo is dark multi-tone artwork — white card for contrast on the blue footer */ .footer-logo-full-link { display: inline-block; margin-top: 1.25rem; background: var(--white); padding: .6rem 1rem; border-radius: 10px; } .footer-logo-full { display: block; width: auto; height: auto; max-width: min(300px, 75vw); max-height: 110px; } /* ── Step-1 classifier page (calculator.html) — rules used only there ── */ .field[data-conditional] { animation: slideIn .18s ease; padding-left: .85rem; border-left: 3px solid var(--blue-light); } .btn-row { display: flex; justify-content: center; margin-top: 2rem; } .btn-next { padding: .8rem 3rem; font-size: 1rem; font-weight: 700; border: none; border-radius: 8px; background: var(--border); color: var(--muted); cursor: not-allowed; transition: background .2s, color .2s, box-shadow .2s, transform .15s; } .btn-next:not(:disabled) { background: var(--blue); color: var(--white); cursor: pointer; box-shadow: 0 4px 16px rgba(26,75,140,.28); } .btn-next:not(:disabled):hover { background: var(--blue-mid); transform: translateY(-1px); } .btn-next:not(:disabled):active { transform: none; box-shadow: none; } .btn-next:not(:disabled):focus-visible { outline: 3px solid rgba(37,99,176,.35); outline-offset: 2px; } @media (max-width: 580px) { .btn-next { width: 100%; } } /* Preserve calculator.html's original card spacing (it predates the Step-2 shell and renders slightly differently). Scoped to that page only so the Step-2 calculator keeps its own spacing. */ body.step1 .card { margin-bottom: 0; } body.step1 .card-header { margin-bottom: 1.75rem; }