/* longislandpropertytax.com
* Cool coastal palette — cedar gray, navy, sea-glass green.
* Clean SaaS structure (Linear/Stripe), Long Island visual identity.
*/
@import url('https://rsms.me/inter/inter.css');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');
/* ============================================================
Tokens
============================================================ */
:root {
/* Cool coastal surfaces */
--bg: #f5f4f0;
--surface: #eceae3;
--surface-2: #e2dfd5;
--surface-elevated: #ffffff;
--hero-glow: rgba(45, 106, 81, 0.10);
/* Borders */
--border: #d8d4c8;
--border-strong: #a8a497;
--divider: #e6e3da;
/* Text — slate */
--text: #18202b;
--text-secondary: #44505d;
--text-muted: #79808a;
--text-faint: #b3b8be;
--text-inverse: #ffffff;
/* Brand mark — Atlantic navy */
--brand-mark: #0b2545;
--navy: #0b2545;
--navy-2: #143257;
/* Accent — sea-glass green */
--accent: #2d6a51;
--accent-hover: #235641;
--accent-bg: #ecf5ef;
--accent-text: #235641;
/* Semantic */
--positive: #2d6a51;
--positive-bg: #ecf5ef;
--warning: #6b4a18;
--warning-bg: #f4ecd8;
--negative: #8a2424;
--negative-bg: #f7e7e3;
--info: #1d4e89;
--info-bg: #e7eef7;
/* Type */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 0.9375rem;
--text-md: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.375rem;
--text-2xl: 1.75rem;
--text-3xl: 2.25rem;
--text-4xl: 3rem;
--text-5xl: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
/* Spacing */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
--space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
--space-32: 128px;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 10px;
--radius-xl: 12px;
--radius-2xl: 16px;
--radius-full: 9999px;
--shadow-xs: 0 1px 2px rgba(11,37,69,0.04);
--shadow-sm: 0 1px 3px rgba(11,37,69,0.06), 0 1px 2px rgba(11,37,69,0.04);
--shadow-md: 0 4px 12px rgba(11,37,69,0.06), 0 2px 4px rgba(11,37,69,0.04);
--shadow-lg: 0 12px 32px rgba(11,37,69,0.08);
--content-narrow: 640px;
--content-default: 1120px;
--content-wide: 1280px;
--transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* ============================================================
Reset
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
min-height: 100dvh;
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: 1.55;
color: var(--text);
background: var(--bg);
font-feature-settings: 'cv11', 'ss01', 'ss03';
}
img, svg, picture { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, h5 { font-weight: 600; line-height: 1.15; letter-spacing: -0.025em; color: var(--text); }
p, li { line-height: 1.55; }
a { color: var(--text); text-decoration: none; transition: var(--transition); }
button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; transition: var(--transition); }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: white; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
/* ============================================================
Layout
============================================================ */
.container { width: 100%; max-width: var(--content-default); margin-inline: auto; padding-inline: var(--space-6); }
.container-wide { max-width: var(--content-wide); }
.container-narrow { max-width: var(--content-narrow); }
/* ============================================================
Nav
============================================================ */
.nav {
position: sticky;
top: 0;
z-index: 50;
background: color-mix(in oklab, var(--bg) 85%, transparent);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid var(--border);
}
.nav__inner {
display: flex; align-items: center; justify-content: space-between;
height: 60px;
}
.nav__brand {
display: inline-flex; align-items: center; gap: 10px;
font-weight: 600; font-size: 15px; color: var(--text);
letter-spacing: -0.01em; white-space: nowrap; flex-shrink: 0;
}
.nav__brand:hover { color: var(--text); }
.nav__brand-mark {
width: 26px; height: 26px;
color: var(--brand-mark);
flex-shrink: 0;
}
@media (max-width: 480px) {
.nav__brand-text { font-size: 13px; }
}
.nav__links { display: flex; align-items: center; gap: 4px; font-size: 14px; }
.nav__link {
color: var(--text-muted); font-weight: 500;
padding: 8px 12px; border-radius: 6px;
white-space: nowrap;
}
.nav__link:hover { color: var(--text); background: var(--surface-2); }
.nav__link.is-active { color: var(--text); background: var(--surface-2); }
/* ============================================================
Hero
============================================================ */
.hero {
padding: var(--space-24) 0 var(--space-16);
background:
radial-gradient(ellipse 80% 50% at 50% 0%, var(--hero-glow) 0%, transparent 70%),
var(--bg);
position: relative;
overflow: hidden;
}
@media (max-width: 640px) { .hero { padding: var(--space-16) 0 var(--space-10); } }
.hero__pill {
display: inline-flex; align-items: center; gap: var(--space-2);
padding: 4px 12px 4px 8px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-full);
font-size: var(--text-xs);
color: var(--text-secondary);
margin-bottom: var(--space-8);
font-weight: 500;
font-family: var(--font-mono);
}
.hero__pill__dot {
width: 6px; height: 6px;
background: var(--accent);
border-radius: 50%;
box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.5 } }
.hero__title {
font-size: var(--text-5xl);
line-height: 1.02;
letter-spacing: -0.04em;
font-weight: 600;
color: var(--text);
margin-bottom: var(--space-5);
max-width: 18ch;
}
.hero__title em {
font-style: normal;
color: var(--accent);
}
.hero__sub {
font-size: var(--text-lg);
color: var(--text-secondary);
max-width: 56ch;
line-height: 1.5;
margin-bottom: var(--space-10);
}
/* ============================================================
Search
============================================================ */
.search { position: relative; max-width: 640px; margin-bottom: var(--space-6); }
.search__field {
display: flex; align-items: center;
background: var(--surface-elevated);
border: 1px solid var(--border-strong);
border-radius: var(--radius-lg);
padding: 4px 4px 4px 16px;
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
.search__field:focus-within {
border-color: var(--text);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--text) 12%, transparent);
}
.search__icon { width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; margin-right: var(--space-3); }
.search__input {
flex: 1; border: none; outline: none; background: transparent;
padding: 12px 0; font-size: var(--text-md); color: var(--text); min-width: 0;
}
.search__input::placeholder { color: var(--text-faint); }
.search__btn {
background: var(--text); color: var(--bg);
padding: 8px 16px; border-radius: 7px;
font-weight: 500; font-size: 14px; white-space: nowrap;
height: 36px; display: inline-flex; align-items: center; gap: 6px;
}
.search__btn:hover { opacity: 0.9; }
.search__suggestions {
position: absolute;
top: calc(100% + 6px); left: 0; right: 0;
background: var(--surface-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
overflow: hidden;
z-index: 10;
display: none;
}
.search__suggestions.is-open { display: block; }
.search__suggestion {
display: block;
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--divider);
cursor: pointer;
}
.search__suggestion:last-child { border-bottom: none; }
.search__suggestion:hover { background: var(--surface); }
.search__suggestion__addr { font-size: 14px; color: var(--text); font-weight: 500; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.search__suggestion__meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.search__suggestion__tag {
display: inline-block;
font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
padding: 2px 6px; border-radius: 999px;
background: #fef3e2; color: #8a4b08; border: 1px solid #fadeb4;
}
.search__suggestion--banner {
font-size: 12px;
font-weight: 600;
color: #8a4b08;
background: #fef3e2;
letter-spacing: 0.01em;
cursor: default;
padding-top: 8px;
padding-bottom: 8px;
}
.search__suggestion--banner:hover { background: #fef3e2; }
.search__chips {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
margin-top: var(--space-5);
}
.search__chips__label { font-size: var(--text-xs); color: var(--text-muted); margin-right: var(--space-1); }
.search__chip {
cursor: pointer;
font-size: var(--text-xs);
padding: 4px 12px;
background: var(--surface-2);
border: 1px solid var(--border);
color: var(--text-secondary);
border-radius: var(--radius-full);
font-weight: 500;
transition: var(--transition);
}
.search__chip:hover {
background: var(--surface-elevated);
border-color: var(--text);
color: var(--text);
}
/* ============================================================
Hero stats
============================================================ */
.hero-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1px;
margin-top: var(--space-16);
background: var(--border);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
overflow: hidden;
}
.hero-stat {
background: var(--bg);
padding: var(--space-5) var(--space-6);
}
.hero-stat__value {
font-family: var(--font-mono);
font-size: var(--text-xl);
font-weight: 500;
color: var(--text);
letter-spacing: -0.02em;
margin-bottom: var(--space-1);
line-height: 1.1;
}
.hero-stat__label {
font-size: var(--text-xs);
color: var(--text-muted);
font-weight: 500;
}
/* ============================================================
Sections
============================================================ */
.section {
padding-block: var(--space-20);
border-top: 1px solid var(--border);
}
.section--alt { background: var(--surface); }
.section__header { margin-bottom: var(--space-12); }
.section__eyebrow {
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
font-weight: 600;
margin-bottom: var(--space-3);
}
.section__title {
font-size: var(--text-3xl);
letter-spacing: -0.025em;
font-weight: 600;
margin-bottom: var(--space-3);
max-width: 24ch;
}
.section__sub {
font-size: var(--text-lg);
color: var(--text-secondary);
max-width: 60ch;
}
/* ============================================================
Result page
============================================================ */
.result {
display: none;
border-top: 1px solid var(--border);
padding-block: var(--space-16);
background: var(--surface);
}
.result.is-visible { display: block; }
.result__crumbs {
display: flex; gap: var(--space-2); font-size: var(--text-xs);
color: var(--text-muted); margin-bottom: var(--space-3);
font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em;
}
.result__crumbs > * + *::before { content: "/"; margin-right: var(--space-2); color: var(--text-faint); }
/* Make breadcrumbs look like links (Fix #7) */
.result__crumbs a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 120ms ease, border-color 120ms ease;
}
.result__crumbs a:hover {
color: var(--text);
border-bottom-color: var(--text-muted);
}
.result__title {
font-size: var(--text-2xl);
font-weight: 600;
letter-spacing: -0.025em;
margin-bottom: var(--space-4);
}
.result__meta {
display: flex; flex-wrap: wrap; gap: var(--space-4);
font-size: var(--text-sm); color: var(--text-muted);
margin-bottom: var(--space-10);
padding-bottom: var(--space-6);
border-bottom: 1px solid var(--border);
}
.result__meta > div { display: flex; gap: var(--space-2); align-items: center; }
.result__meta strong { color: var(--text); font-weight: 500; }
.confidence-badge {
display: inline-flex; align-items: center; gap: var(--space-1);
padding: 2px 8px; font-size: var(--text-xs); font-weight: 500;
border-radius: var(--radius-sm);
}
.confidence-badge--high { background: var(--positive-bg); color: var(--positive); }
.confidence-badge--medium { background: var(--warning-bg); color: var(--warning); }
.confidence-badge--low { background: var(--negative-bg); color: var(--negative); }
/* Bill card */
.bill-card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
overflow: hidden;
margin-bottom: var(--space-12);
box-shadow: var(--shadow-sm);
}
@media (max-width: 720px) { .bill-card { grid-template-columns: 1fr; } }
.bill-card__pane { background: var(--surface-elevated); padding: var(--space-8); }
.bill-card__pane--accent {
background: var(--navy);
color: var(--text-inverse);
}
.bill-card__label {
font-size: var(--text-xs); text-transform: uppercase;
letter-spacing: 0.06em; font-weight: 600;
margin-bottom: var(--space-4);
color: var(--text-muted);
}
.bill-card__pane--accent .bill-card__label { color: rgba(255,255,255,0.6); }
.bill-card__amount {
font-family: var(--font-mono);
font-size: var(--text-4xl);
font-weight: 500;
letter-spacing: -0.025em;
line-height: 1;
margin-bottom: var(--space-3);
}
.bill-card__sub {
font-size: var(--text-sm);
line-height: 1.5;
color: var(--text-secondary);
}
.bill-card__pane--accent .bill-card__sub { color: rgba(255,255,255,0.78); }
.bill-card__delta {
display: inline-flex; align-items: center; gap: var(--space-2);
font-size: var(--text-sm); font-weight: 500;
margin-top: var(--space-4);
padding: 6px 12px;
border-radius: var(--radius-md);
background: rgba(255,255,255,0.1);
color: white;
border: 1px solid rgba(255,255,255,0.2);
font-family: var(--font-mono);
}
.sale-input {
margin-top: var(--space-5);
display: flex; gap: var(--space-2); align-items: center;
font-size: var(--text-sm); color: rgba(255,255,255,0.85);
}
.sale-input input {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.2);
border-radius: var(--radius-md);
padding: 8px 12px;
color: white;
width: 140px;
font-family: var(--font-mono);
font-size: var(--text-sm);
}
.sale-input input::placeholder { color: rgba(255,255,255,0.4); }
.sale-input input:focus { outline: 2px solid rgba(255,255,255,0.4); outline-offset: 1px; }
/* Breakdown */
.breakdown { margin-bottom: var(--space-16); }
.breakdown__row {
display: grid;
grid-template-columns: 220px 1fr 130px;
align-items: center;
gap: var(--space-6);
padding: var(--space-4) var(--space-2);
border-bottom: 1px solid var(--divider);
cursor: pointer;
transition: var(--transition);
border-radius: var(--radius-md);
}
.breakdown__row:last-child { border-bottom: none; }
.breakdown__row:hover { background: var(--surface-elevated); }
.breakdown__label { font-weight: 500; font-size: var(--text-base); }
.breakdown__bar {
height: 4px; background: var(--surface-2);
border-radius: var(--radius-full); overflow: hidden; position: relative;
}
.breakdown__bar__fill {
position: absolute; inset: 0;
background: var(--navy);
width: var(--pct, 0%);
border-radius: var(--radius-full);
transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.breakdown__amount {
font-family: var(--font-mono);
font-size: var(--text-sm);
font-weight: 500;
text-align: right;
}
.breakdown__amount span {
display: block; color: var(--text-muted);
font-weight: 400; font-size: var(--text-xs);
}
.breakdown__explainer {
grid-column: 1 / -1;
font-size: var(--text-sm); color: var(--text-secondary);
margin-top: var(--space-3);
padding: var(--space-4);
background: var(--surface-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-md);
display: none;
max-width: 80ch;
line-height: 1.55;
}
.breakdown__row.is-expanded .breakdown__explainer { display: block; }
@media (max-width: 720px) {
.breakdown__row { grid-template-columns: 1fr auto; }
.breakdown__bar { grid-column: 1 / -1; order: 3; }
}
/* Cards */
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-4);
margin-bottom: var(--space-16);
}
.card {
background: var(--surface-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-5);
transition: var(--transition);
}
.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.card__title { font-weight: 600; font-size: var(--text-md); margin-bottom: var(--space-2); letter-spacing: -0.01em; }
.card__amount {
font-family: var(--font-mono);
font-size: var(--text-xl);
font-weight: 600;
letter-spacing: -0.02em;
color: var(--positive);
margin-bottom: var(--space-3);
}
.card__meta {
font-size: var(--text-xs); color: var(--text-muted);
text-transform: uppercase; letter-spacing: 0.06em;
font-weight: 600; margin-bottom: var(--space-3);
}
.card__body { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.5; }
.card__body em { font-style: normal; color: var(--text-muted); display: block; margin-top: var(--space-2); }
.card__link {
display: inline-flex; align-items: center; gap: 4px;
margin-top: var(--space-3);
font-size: var(--text-sm); font-weight: 500;
color: var(--accent-text);
}
.card__link:hover { color: var(--accent-hover); }
/* Compare table */
.compare-table {
background: var(--surface-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
margin-bottom: var(--space-16);
}
.compare-row {
display: grid;
grid-template-columns: 1fr auto auto;
gap: var(--space-4);
align-items: center;
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--divider);
}
.compare-row:last-child { border-bottom: none; }
.compare-row__name { font-weight: 500; font-size: var(--text-sm); }
.compare-row__bill { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-sm); }
.compare-row__delta {
font-family: var(--font-mono);
font-size: var(--text-xs);
padding: 2px 8px;
border-radius: var(--radius-sm);
font-weight: 500;
min-width: 90px;
text-align: right;
}
.compare-row__delta--up { background: var(--negative-bg); color: var(--negative); }
.compare-row__delta--down { background: var(--positive-bg); color: var(--positive); }
.compare-row__delta--neutral { background: var(--surface-2); color: var(--text-muted); }
/* FAQ */
.faq { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__q {
display: flex; justify-content: space-between; align-items: center;
width: 100%; text-align: left;
padding: var(--space-5) 0;
font-weight: 600; font-size: var(--text-md);
letter-spacing: -0.01em; color: var(--text);
}
.faq__q__icon {
flex-shrink: 0;
margin-left: var(--space-4);
transition: transform 200ms ease;
color: var(--text);
background: var(--surface-soft, var(--surface));
border-radius: 999px;
width: 28px;
height: 28px;
padding: 5px;
box-sizing: border-box;
}
.faq__q:hover .faq__q__icon { background: var(--border); }
.faq__item.is-open .faq__q__icon { transform: rotate(180deg); color: var(--accent-text, var(--accent)); }
.faq__a {
display: none;
padding: 0 0 var(--space-5);
color: var(--text-secondary);
max-width: 72ch;
font-size: var(--text-base);
line-height: 1.6;
}
.faq__item.is-open .faq__a { display: block; }
/* Provenance */
.provenance {
background: var(--surface-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-5);
margin-top: var(--space-12);
font-size: var(--text-xs);
color: var(--text-muted);
line-height: 1.6;
}
.provenance ul { padding-left: var(--space-5); margin-top: var(--space-2); list-style: none; }
.provenance li::before { content: "—"; margin-right: var(--space-2); color: var(--text-faint); }
.provenance a { color: var(--text-secondary); text-decoration: underline; text-decoration-color: var(--border-strong); }
.provenance a:hover { color: var(--text); }
/* District grid */
.district-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-2);
}
.district {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-4);
background: var(--surface-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-md);
cursor: pointer;
transition: var(--transition);
}
.district:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.district__name { font-weight: 500; font-size: var(--text-sm); color: var(--text); }
.district__county { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.district__bill {
font-family: var(--font-mono);
font-size: var(--text-sm);
font-weight: 500;
color: var(--text);
text-align: right;
}
.district__bill__label {
display: block;
font-size: var(--text-xs);
color: var(--text-muted);
font-family: var(--font-sans);
font-weight: 400;
margin-top: 2px;
}
.district-tabs {
display: inline-flex;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 2px;
margin-bottom: var(--space-6);
font-size: var(--text-sm);
}
.district-tab {
padding: 6px 16px;
border-radius: var(--radius-sm);
font-weight: 500;
color: var(--text-muted);
cursor: pointer;
}
.district-tab.is-active {
background: var(--surface-elevated);
color: var(--text);
box-shadow: var(--shadow-xs);
}
/* Facts grid */
.facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-6);
}
.fact {
padding: var(--space-6);
background: var(--surface-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
}
.fact__num {
font-family: var(--font-mono);
font-size: var(--text-2xl);
font-weight: 500;
letter-spacing: -0.025em;
color: var(--navy);
margin-bottom: var(--space-3);
}
.fact__title { font-size: var(--text-md); font-weight: 600; margin-bottom: var(--space-2); }
.fact__body { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.55; }
/* Footer — single compact strip */
.footer {
border-top: 1px solid var(--border);
padding-block: 20px;
background: var(--surface);
}
.footer__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.footer__brand { font-size: 14px; }
.footer__links {
display: flex;
flex-wrap: wrap;
gap: 4px 18px;
font-size: 13px;
}
.footer__links a {
color: var(--text-muted);
white-space: nowrap;
padding: 2px 0;
}
.footer__links a:hover { color: var(--text); }
.footer__legal {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--border);
font-size: 11px;
color: var(--text-muted);
display: flex;
flex-wrap: wrap;
gap: 6px 8px;
align-items: baseline;
line-height: 1.5;
}
.footer__legal__sep { color: var(--border); }
@media (max-width: 640px) {
.footer__top { gap: 14px; }
.footer__links { gap: 4px 14px; font-size: 12px; }
.footer__legal__sep { display: none; }
}
/* ============================================================
Additional components (added in Phase 4)
============================================================ */
/* Inline disclaimer below the bill card */
.inline-disclaimer {
margin-bottom: var(--space-12);
padding: 12px 16px;
background: var(--surface-2);
border-left: 3px solid var(--text-muted);
border-radius: 0 6px 6px 0;
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: 1.5;
}
.inline-disclaimer a { color: var(--accent-text); text-decoration: underline; }
.inline-disclaimer a:hover { color: var(--accent-hover); }
/* Result section titles */
.result__section-title {
font-size: var(--text-xl);
font-weight: 600;
letter-spacing: -0.02em;
margin-bottom: 8px;
margin-top: var(--space-12);
}
.result__section-sub {
color: var(--text-secondary);
font-size: var(--text-md);
margin-bottom: var(--space-6);
max-width: 70ch;
}
/* CTA strip — partner placement */
.cta-strip {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-6);
align-items: center;
padding: var(--space-5) var(--space-6);
background: var(--surface-elevated);
border: 1px solid var(--border-strong);
border-radius: var(--radius-lg);
margin-bottom: var(--space-10);
}
@media (max-width: 720px) {
.cta-strip { grid-template-columns: 1fr; }
}
.cta-strip__eyebrow {
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
font-weight: 600;
margin-bottom: 6px;
}
.cta-strip__title {
font-size: var(--text-lg);
font-weight: 600;
letter-spacing: -0.015em;
margin-bottom: 4px;
}
.cta-strip p {
color: var(--text-secondary);
font-size: var(--text-sm);
max-width: 60ch;
line-height: 1.5;
}
.cta-strip__btn {
background: var(--text);
color: var(--bg);
padding: 10px 20px;
border-radius: 8px;
font-weight: 500;
font-size: var(--text-sm);
white-space: nowrap;
text-decoration: none;
transition: var(--transition);
}
.cta-strip__btn:hover { opacity: 0.9; }
.cta-strip__btn--accent {
background: var(--accent);
color: white;
}
.cta-strip__btn--accent:hover { background: var(--accent-hover); }
.cta-strip--grievance { border-left: 3px solid var(--negative); }
.cta-strip--mortgage { border-left: 3px solid var(--info); background: var(--info-bg); }
.cta-strip--realtor { border-left: 3px solid var(--accent); }
/* Result page email capture */
.result-email-capture {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-6);
align-items: center;
padding: var(--space-6) var(--space-8);
background: var(--navy);
color: white;
border-radius: var(--radius-xl);
margin-bottom: var(--space-12);
}
@media (max-width: 720px) {
.result-email-capture { grid-template-columns: 1fr; }
}
.result-email-capture h3 {
font-size: var(--text-lg);
color: white;
margin-bottom: 4px;
letter-spacing: -0.015em;
}
.result-email-capture p {
color: rgba(255,255,255,0.78);
font-size: var(--text-sm);
max-width: 60ch;
line-height: 1.5;
}
.result-email-capture__form {
display: flex;
gap: 8px;
}
.result-email-capture__form input {
padding: 10px 14px;
border-radius: 6px;
border: 1px solid rgba(255,255,255,0.2);
background: rgba(255,255,255,0.08);
color: white;
font-size: var(--text-sm);
width: 240px;
}
.result-email-capture__form input::placeholder { color: rgba(255,255,255,0.5); }
.result-email-capture__form input:focus { outline: 2px solid rgba(255,255,255,0.4); }
.result-email-capture__form button {
padding: 10px 18px;
border-radius: 6px;
background: white;
color: var(--navy);
font-weight: 600;
font-size: var(--text-sm);
}
.result-email-capture__form button:hover { background: var(--bg); }
/* Hero email capture */
.email-signup {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-12);
align-items: center;
padding: var(--space-10);
background: var(--surface-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
}
@media (max-width: 720px) {
.email-signup { grid-template-columns: 1fr; }
}
.email-signup__form {
display: grid;
gap: 8px;
}
.email-signup__form input,
.email-signup__form select {
padding: 12px 14px;
border-radius: 8px;
border: 1px solid var(--border-strong);
font-size: var(--text-md);
background: var(--bg);
}
.email-signup__form button {
padding: 12px 24px;
background: var(--text);
color: var(--bg);
border-radius: 8px;
font-weight: 500;
font-size: var(--text-md);
}
.email-signup__form button:hover { opacity: 0.9; }
.email-signup__note {
font-size: var(--text-xs);
color: var(--text-muted);
margin-top: 4px;
}
.email-signup__note a { text-decoration: underline; color: var(--text-muted); }
.signup-success {
padding: 16px;
background: var(--positive-bg);
color: var(--positive);
border-radius: 8px;
font-weight: 500;
font-size: var(--text-sm);
}
/* Footer signup */
.footer__signup {
display: flex;
gap: 6px;
}
.footer__signup input {
flex: 1;
padding: 8px 12px;
border-radius: 6px;
border: 1px solid var(--border-strong);
font-size: 13px;
background: var(--bg);
}
.footer__signup button {
padding: 8px 14px;
background: var(--text);
color: var(--bg);
border-radius: 6px;
font-weight: 500;
font-size: 13px;
}
/* Footer disclaimer */
.footer__disclaimer {
margin-top: var(--space-12);
padding: var(--space-5);
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
font-size: var(--text-xs);
color: var(--text-secondary);
line-height: 1.6;
}
.footer__disclaimer strong { color: var(--text); }
/* Static pages */
.static-page {
padding-block: var(--space-16);
}
.static-page__title {
font-size: var(--text-3xl);
font-weight: 600;
letter-spacing: -0.025em;
margin-bottom: var(--space-3);
}
.static-page__lead {
font-size: var(--text-lg);
color: var(--text-secondary);
margin-bottom: var(--space-8);
}
.static-page h2 {
font-size: var(--text-xl);
font-weight: 600;
letter-spacing: -0.02em;
margin-top: var(--space-10);
margin-bottom: var(--space-3);
}
.static-page p {
color: var(--text-secondary);
font-size: var(--text-md);
margin-bottom: var(--space-4);
max-width: 70ch;
line-height: 1.65;
}
.static-page ul {
margin-bottom: var(--space-4);
padding-left: var(--space-5);
max-width: 70ch;
}
.static-page li {
color: var(--text-secondary);
margin-bottom: var(--space-2);
line-height: 1.6;
}
.static-page a {
color: var(--accent-text);
text-decoration: underline;
}
.static-page a:hover { color: var(--accent-hover); }
.static-page__code {
background: var(--surface-elevated);
border: 1px solid var(--border);
border-radius: 8px;
padding: 16px;
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.6;
color: var(--text);
margin-bottom: var(--space-6);
overflow-x: auto;
}
/* ============================================================
v2 Polish — Senior UX pass (May 7, 2026)
============================================================ */
/* --- Long Island silhouette watermark behind hero --- */
.hero::before {
content: "";
position: absolute;
bottom: -40px;
right: -8%;
width: 720px;
height: 200px;
pointer-events: none;
opacity: 0.07;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: contain;
background-position: bottom right;
z-index: 0;
}
.hero > .container { position: relative; z-index: 1; }
@media (max-width: 720px) {
.hero::before { width: 110%; right: -5%; bottom: 80px; opacity: 0.05; }
}
/* --- Stronger search as primary CTA --- */
.search__field {
padding: 6px 6px 6px 18px;
box-shadow: 0 8px 24px rgba(11,37,69,0.08), 0 2px 6px rgba(11,37,69,0.04);
}
.search__icon { width: 20px; height: 20px; }
.search__input { padding: 14px 0; font-size: var(--text-lg); }
.search__btn {
background: var(--navy);
height: 44px;
padding: 0 20px;
font-weight: 600;
font-size: 14px;
letter-spacing: -0.005em;
}
.search__btn:hover { background: var(--navy-2); opacity: 1; }
/* --- Hero stats: more presence, monospaced numbers feel premium --- */
.hero-stats {
margin-top: var(--space-12);
background: var(--surface-elevated);
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
}
.hero-stat { background: var(--surface-elevated); padding: var(--space-6) var(--space-6); }
.hero-stat__value {
font-size: var(--text-2xl);
font-weight: 600;
color: var(--navy);
}
.hero-stat__label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
color: var(--text-muted);
margin-top: 4px;
}
@media (max-width: 720px) {
.hero-stats { grid-template-columns: 1fr 1fr !important; }
.hero-stat { padding: var(--space-4) var(--space-4); }
.hero-stat__value { font-size: var(--text-xl); }
}
/* --- Section eyebrows: consistent weight, small caps feel --- */
.section__eyebrow,
.cta-strip__eyebrow {
font-weight: 700;
color: var(--accent-text);
letter-spacing: 0.1em;
font-size: 11px;
}
/* --- Confidence badge: switch to cool-coastal palette --- */
.confidence-badge {
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
font-size: 10px;
padding: 3px 8px;
border: 1px solid transparent;
}
.confidence-badge--high {
background: var(--accent-bg);
color: var(--accent-text);
border-color: rgba(45,106,81,0.2);
}
.confidence-badge--medium {
background: var(--info-bg);
color: var(--info);
border-color: rgba(29,78,137,0.18);
}
.confidence-badge--low {
background: var(--negative-bg);
color: var(--negative);
border-color: rgba(138,36,36,0.2);
}
/* --- Result header: better address treatment --- */
.result__crumbs { gap: var(--space-3); flex-wrap: wrap; }
.result__title {
font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2rem);
letter-spacing: -0.03em;
line-height: 1.15;
word-break: break-word;
}
@media (max-width: 480px) { .result__title { font-size: 1.375rem; } }
/* --- Bill card: navy pane gets gradient + visual weight --- */
.bill-card { box-shadow: var(--shadow-md); }
.bill-card__pane--accent {
background: linear-gradient(155deg, #0b2545 0%, #143257 60%, #1a3d68 100%);
position: relative;
overflow: hidden;
}
.bill-card__pane--accent::after {
content: "";
position: absolute;
bottom: -20px;
right: -20px;
width: 220px;
height: 220px;
background: radial-gradient(circle, rgba(45,106,81,0.18) 0%, transparent 70%);
pointer-events: none;
}
.bill-card__pane--accent > * { position: relative; z-index: 1; }
.bill-card__amount { font-size: clamp(2rem, 1.4rem + 2vw, var(--text-4xl)); }
.bill-card__pane--accent .bill-card__amount { font-weight: 600; }
/* --- Sale price input: more prominent, mobile-friendly --- */
.sale-input {
margin-top: var(--space-5);
flex-wrap: wrap;
gap: var(--space-3);
}
.sale-input label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
color: rgba(255,255,255,0.7);
width: 100%;
}
.sale-input input {
width: 180px;
padding: 10px 14px;
font-size: var(--text-md);
font-weight: 500;
background: rgba(255,255,255,0.12);
border-color: rgba(255,255,255,0.25);
}
@media (max-width: 480px) {
.sale-input input { width: 100%; }
}
/* Always-visible delta pill area (reserve space) */
.bill-card__delta { display: inline-flex !important; }
.bill-card__delta:empty,
.bill-card__delta:has(span:empty) {
background: transparent;
border-color: transparent;
color: rgba(255,255,255,0.4);
}
.bill-card__delta:has(span:empty)::before {
content: "Enter a sale price to see the projection delta";
font-size: 11px;
font-family: var(--font-sans);
font-style: italic;
letter-spacing: 0;
}
/* --- Breakdown bars: stronger visual weight --- */
.breakdown__bar { height: 8px; background: var(--surface-2); }
.breakdown__bar__fill {
background: linear-gradient(90deg, var(--navy) 0%, var(--accent) 100%);
}
.breakdown__row { padding: var(--space-5) var(--space-3); }
.breakdown__row:hover { background: var(--surface-elevated); border-radius: var(--radius-md); }
.breakdown__amount { font-size: var(--text-md); }
/* --- Compare table: highlight current district, larger deltas --- */
.compare-row__delta {
font-size: var(--text-sm);
padding: 4px 12px;
font-weight: 600;
min-width: 100px;
}
.compare-row.is-current {
background: var(--accent-bg);
border-left: 3px solid var(--accent);
}
.compare-row.is-current .compare-row__name::after {
content: "Your district";
margin-left: 8px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
color: var(--accent-text);
background: white;
padding: 2px 6px;
border-radius: 4px;
}
/* --- Result page email capture: white-on-navy works, but ensure mobile stack --- */
@media (max-width: 720px) {
.result-email-capture { padding: var(--space-5); }
.result-email-capture__form { flex-direction: column; }
.result-email-capture__form input { width: 100%; }
.result-email-capture__form button { width: 100%; }
}
/* --- Hero email signup card: better mobile --- */
@media (max-width: 720px) {
.email-signup { padding: var(--space-6); gap: var(--space-6); }
.email-signup__form input,
.email-signup__form select,
.email-signup__form button { width: 100%; }
}
/* --- FOOTER REBUILD: critical mobile fix --- */
.footer { padding-block: var(--space-16) var(--space-10); }
.footer__inner {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: var(--space-10);
}
@media (max-width: 880px) {
.footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
.footer__inner { grid-template-columns: 1fr; gap: var(--space-8); }
}
.footer__signup {
display: flex;
gap: 6px;
max-width: 320px;
}
.footer__signup input {
flex: 1;
min-width: 0;
padding: 10px 14px;
font-size: 14px;
}
.footer__signup button {
padding: 10px 18px;
background: var(--navy);
color: white;
font-size: 14px;
white-space: nowrap;
}
.footer__signup button:hover { background: var(--navy-2); }
.footer__col h4 {
font-size: 11px;
letter-spacing: 0.1em;
font-weight: 700;
color: var(--text);
margin-bottom: var(--space-4);
}
.footer__col li { margin-bottom: 8px; }
.footer__col a { font-size: 14px; color: var(--text-muted); }
.footer__disclaimer {
margin-top: var(--space-10);
padding: var(--space-5) var(--space-6);
background: var(--surface-elevated);
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
font-size: 13px;
line-height: 1.65;
color: var(--text-secondary);
}
@media (max-width: 520px) {
.footer__legal { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}
/* --- Hero pill on mobile --- */
@media (max-width: 480px) {
.hero__pill { font-size: 10px; padding: 3px 10px 3px 8px; }
.hero__pill span:nth-of-type(2) {
/* Trim long meta text */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 240px;
}
}
/* --- Mobile hero compaction: get search above the fold --- */
@media (max-width: 560px) {
.hero { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.hero__title {
font-size: clamp(1.75rem, 1.3rem + 3vw, 2.25rem);
line-height: 1.15;
margin-bottom: var(--space-3);
}
.hero__sub {
font-size: 15px;
line-height: 1.5;
margin-bottom: var(--space-4);
/* Trim wordy intro on small screens — line-clamp keeps the gist */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
/* --- Search chips on mobile: tighter --- */
@media (max-width: 480px) {
.search__chips { gap: 6px; margin-top: var(--space-4); }
.search__chip { font-size: 11px; padding: 4px 10px; }
}
/* --- Bill card mobile: stack with breathing room --- */
@media (max-width: 720px) {
.bill-card__pane { padding: var(--space-6); }
.bill-card__amount { font-size: 2rem; }
}
/* --- Result meta on mobile --- */
@media (max-width: 480px) {
.result__meta { gap: var(--space-3); padding-bottom: var(--space-4); margin-bottom: var(--space-6); }
.result__meta > div { font-size: 12px; }
}
/* --- Sticky condensed search on result page --- */
.sticky-search {
/* Position FIXED below the global sticky nav (60px). When inactive, hidden
above the viewport; .is-active slides it into place. z-index below nav
(50) so the brand/links stay clickable. */
position: fixed;
top: 60px;
left: 0;
right: 0;
z-index: 40;
background: color-mix(in oklab, var(--bg) 95%, transparent);
backdrop-filter: blur(14px) saturate(180%);
-webkit-backdrop-filter: blur(14px) saturate(180%);
border-bottom: 1px solid var(--border);
padding: 8px 0;
transform: translateY(-200%);
transition: transform 200ms ease;
pointer-events: none;
}
.sticky-search.is-active {
transform: translateY(0);
pointer-events: auto;
}
.sticky-search__field {
display: flex;
gap: 8px;
align-items: center;
max-width: 720px;
margin: 0 auto;
padding: 0 var(--space-6);
}
.sticky-search__field input {
flex: 1;
padding: 8px 14px;
border: 1px solid var(--border-strong);
border-radius: 8px;
background: var(--surface-elevated);
font-size: 14px;
min-width: 0;
}
.sticky-search__field button {
padding: 8px 16px;
background: var(--navy);
color: white;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
}
/* --- Admin polish --- */
.pill-status {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
}
.pill-status::before {
content: "";
width: 8px; height: 8px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 3px var(--accent-bg);
}
.pill-status--off::before { background: var(--text-faint); box-shadow: 0 0 0 3px var(--surface-2); }
/* --- Generic provenance + trust footer --- */
.provenance { font-size: 13px; line-height: 1.7; }
.provenance a { color: var(--accent-text); }
/* --- Hero title: tighter wrap on mobile --- */
@media (max-width: 480px) {
.hero__title { font-size: clamp(2rem, 1.4rem + 4vw, 2.75rem); max-width: 100%; }
}
/* ============================================================
v3 Critical fixes — overflow, search overlap, nav crowding
============================================================ */
/* Prevent horizontal overflow at any viewport.
IMPORTANT: setting overflow-x on breaks position:sticky in any
descendant, because becomes the scroll container instead of
. Apply to body only so the nav can still pin to the viewport. */
body { overflow-x: clip; max-width: 100vw; }
.container { padding-inline: clamp(16px, 4vw, 24px); }
/* ===== SEARCH FIELD =====
Flex needs explicit min-width:0 on input so button can never overlap. */
.search__field {
flex-wrap: nowrap;
gap: 8px;
position: relative;
}
/* Hide the native clear button on type="search" — we render our own. */
.search__input::-webkit-search-cancel-button,
.search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search__input { min-width: 0; flex: 1 1 0; }
.search__btn { flex: 0 0 auto; }
/* Clear (×) button — sits inside the field, between the input and the submit btn.
Hidden by default; JS toggles visibility via the `hidden` HTML attribute. */
.search__clear {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: none;
border-radius: 999px;
background: var(--surface);
color: var(--text-muted);
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
}
.search__clear:hover { background: var(--border); color: var(--text); }
.search__clear svg { width: 14px; height: 14px; }
.search__clear[hidden] { display: none; }
/* Submit button visual: hide the arrow on desktop, show only the label */
.search__btn__arrow { display: none; width: 18px; height: 18px; }
/* ===== Mobile (≤560px): keep input + button INLINE, not stacked =====
Stacking pushes suggestions far below the keyboard. Inline + icon-only
button keeps the dropdown right under the input where it belongs. */
@media (max-width: 560px) {
.search__field {
flex-direction: row;
align-items: center;
padding: 6px 6px 6px 14px;
gap: 6px;
}
/* Keep magnifying glass for visual affordance */
.search__field > .search__icon {
display: block;
margin-right: 6px;
width: 18px;
height: 18px;
}
.search__input {
padding: 12px 0;
/* 16px prevents iOS auto-zoom on focus */
font-size: 16px;
background: transparent;
min-width: 0;
}
.search__clear {
width: 28px;
height: 28px;
}
/* Submit becomes a compact icon-arrow button on mobile */
.search__btn {
width: 44px;
height: 44px;
padding: 0;
flex: 0 0 44px;
justify-content: center;
align-items: center;
border-radius: 10px;
}
.search__btn__label { display: none; }
.search__btn__arrow { display: block; color: #fff; }
}
/* ===== Mobile suggestions: float right under the input =====
When the keyboard is up on iOS, only ~500px of viewport is visible.
We need the suggestions to (a) appear immediately under the input and
(b) NOT be pushed down by the chips row below them.
Trick: anchor relative to the .search__field (the form itself) using
absolute positioning. We achieve this with top calculated from the field
bottom — but since .search__field is the form and .search__suggestions
is a SIBLING of the form (both children of .search), we need a different
approach: position the suggestions using `top: ` via a CSS
variable that JS sets, OR easier — just stack chips AFTER the suggestions
in the DOM and use top:0 for suggestions in the flex column.
Simplest robust fix: position relative to .search and order chips AFTER
suggestions. Since both are flex/block children of .search, we can use
`order` on the chips to push them visually below the suggestions. */
@media (max-width: 560px) {
.search {
display: flex !important;
flex-direction: column !important;
position: relative;
}
.search__field { order: 0; }
.search__suggestions {
order: 1;
position: static !important; /* override desktop absolute positioning */
top: auto !important;
margin-top: 6px;
z-index: 50;
max-height: 60vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
border-radius: 12px;
box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}
.search__chips { order: 2; margin-top: var(--space-3); }
.search__suggestion { padding: 14px 16px; min-height: 56px; }
.search__suggestion__addr { font-size: 15px; }
.search__suggestion__meta { font-size: 13px; }
/* Hide the “Try: chips” row when user is actively searching */
.search.is-searching .search__chips { visibility: hidden; height: 0; margin-top: 0; }
}
/* NAV — desktop links hidden below 720px in favor of a hamburger drawer */
.nav__inner { gap: var(--space-3); }
.nav__burger { display: none; } /* shown only on mobile, see media query */
@media (max-width: 720px) {
/* Hide the inline desktop link row */
.nav__links { display: none; }
/* Hamburger button */
.nav__burger {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
width: 40px;
height: 40px;
margin-right: -8px; /* visual alignment with container edge */
padding: 0;
background: transparent;
border: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.nav__burger span {
display: block;
width: 22px;
height: 2px;
background: var(--text);
border-radius: 2px;
transition: transform 200ms ease, opacity 150ms ease;
}
/* Animate to X when drawer is open */
.nav__burger[aria-expanded='true'] span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.nav__burger[aria-expanded='true'] span:nth-child(2) {
opacity: 0;
}
.nav__burger[aria-expanded='true'] span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
}
/* ---- Drawer (mobile only) ---- */
.nav-drawer {
position: fixed;
inset: 0;
z-index: 100;
display: none; /* shown via .is-open */
pointer-events: none;
}
.nav-drawer.is-open { display: block; pointer-events: auto; }
.nav-drawer__scrim {
position: absolute;
inset: 0;
background: rgba(11, 37, 69, 0.45);
opacity: 0;
transition: opacity 200ms ease;
}
.nav-drawer.is-open .nav-drawer__scrim { opacity: 1; }
.nav-drawer__panel {
position: absolute;
top: 0; right: 0; bottom: 0;
width: min(86vw, 320px);
background: var(--bg);
box-shadow: -8px 0 32px rgba(11, 37, 69, 0.18);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 240ms cubic-bezier(0.32, 0.72, 0.16, 1);
overscroll-behavior: contain;
}
.nav-drawer.is-open .nav-drawer__panel { transform: translateX(0); }
.nav-drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 18px;
border-bottom: 1px solid var(--border);
}
.nav-drawer__head .nav__brand-text { font-size: 13px; }
.nav-drawer__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
padding: 0;
background: transparent;
border: none;
border-radius: 8px;
color: var(--text);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.nav-drawer__close:hover { background: var(--surface-2); }
.nav-drawer__list {
list-style: none;
padding: 8px 0;
margin: 0;
flex: 1;
}
.nav-drawer__list li a {
display: block;
padding: 14px 22px;
font-size: 16px;
font-weight: 500;
color: var(--text);
border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
-webkit-tap-highlight-color: transparent;
}
.nav-drawer__list li a:active,
.nav-drawer__list li a:hover { background: var(--surface); }
.nav-drawer__foot {
padding: 14px 22px 22px;
display: flex;
flex-wrap: wrap;
gap: 16px 18px;
font-size: 13px;
border-top: 1px solid var(--border);
}
.nav-drawer__foot a { color: var(--text-muted); }
.nav-drawer__foot a:hover { color: var(--text); }
/* Lock body scroll while drawer open. Set on via JS. */
html.is-nav-open, html.is-nav-open body { overflow: hidden; }
/* Result page sticky search — keep input from being eaten by button */
.sticky-search__field input { min-width: 0; }
.sticky-search__field button { flex-shrink: 0; }
/* Email signup forms — flex sane defaults */
.email-signup__form input,
.email-signup__form select { min-width: 0; }
.footer__signup input { min-width: 0; }
.result-email-capture__form input { min-width: 0; flex: 1; }
/* Hero pill: don't overflow at any width */
.hero__pill { max-width: 100%; }
.hero__pill > span:last-child {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
/* Make sure compare table delta column never clips the dash for current row */
.compare-row__delta { white-space: nowrap; }
/* Bill card amount — cap on tiny screens so it doesn't overflow */
@media (max-width: 360px) {
.bill-card__amount { font-size: 1.75rem; }
}
/* ============================================================
Voices (social proof) section
============================================================ */
.voices {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-5);
}
.voice {
display: flex;
flex-direction: column;
background: var(--surface-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-6);
text-decoration: none;
transition: var(--transition);
position: relative;
overflow: hidden;
}
.voice::before {
content: "“";
position: absolute;
top: -28px;
right: -8px;
font-family: 'Georgia', serif;
font-size: 180px;
font-weight: 700;
color: var(--accent);
opacity: 0.08;
line-height: 1;
pointer-events: none;
}
.voice:hover {
border-color: var(--accent);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.voice__bill {
font-family: var(--font-mono);
font-size: var(--text-xl);
font-weight: 600;
color: var(--accent-text);
margin-bottom: var(--space-3);
letter-spacing: -0.02em;
}
.voice__quote {
font-size: var(--text-base);
color: var(--text);
line-height: 1.6;
margin-bottom: var(--space-4);
flex: 1;
}
.voice__attr {
font-size: 12px;
color: var(--text-muted);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.06em;
border-top: 1px solid var(--divider);
padding-top: var(--space-3);
}
.voices__note {
margin-top: var(--space-8);
font-size: var(--text-sm);
color: var(--text-muted);
text-align: center;
max-width: 60ch;
margin-inline: auto;
}
.voices__note a { color: var(--accent-text); text-decoration: underline; }
/* ============================================================
Verify-with-official-source cards (result page)
============================================================ */
.verify-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--space-4);
margin-bottom: var(--space-12);
}
.verify-card {
background: var(--surface-elevated);
border: 1px solid var(--border);
border-left: 3px solid var(--navy);
border-radius: var(--radius-lg);
padding: var(--space-5);
text-decoration: none;
display: flex;
flex-direction: column;
transition: var(--transition);
}
.verify-card:hover {
border-color: var(--border-strong);
border-left-color: var(--accent);
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
}
.verify-card__eyebrow {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent-text);
margin-bottom: var(--space-2);
}
.verify-card h3 {
font-size: var(--text-md);
font-weight: 600;
letter-spacing: -0.015em;
margin-bottom: var(--space-2);
color: var(--text);
line-height: 1.3;
}
.verify-card p {
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: 1.5;
margin-bottom: var(--space-3);
flex: 1;
}
.verify-card__cta {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
font-weight: 500;
letter-spacing: -0.01em;
border-top: 1px solid var(--divider);
padding-top: var(--space-2);
}
/* ============================================================
Action bar (Save / Email / Share) on result page
============================================================ */
.action-bar {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-4);
margin-bottom: var(--space-4);
}
.action-bar__btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: var(--surface-elevated);
border: 1px solid var(--border-strong);
border-radius: 8px;
color: var(--text);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: var(--transition);
text-decoration: none;
}
.action-bar__btn:hover {
border-color: var(--accent);
color: var(--accent-text);
background: var(--accent-bg);
}
.action-bar__btn svg { color: var(--text-muted); flex-shrink: 0; }
.action-bar__btn:hover svg { color: var(--accent); }
@media (max-width: 480px) {
.action-bar__btn { font-size: 12px; padding: 7px 11px; }
}
/* ============================================================
Floating mobile action bar (Fix #14)
Pinned bottom-right on small screens once scrolled past hero.
============================================================ */
.floating-actions {
display: none; /* mobile-only — see media query below */
}
@media (max-width: 720px) {
.floating-actions {
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: max(12px, env(safe-area-inset-bottom, 12px));
z-index: 60;
display: flex;
align-items: center;
gap: 4px;
padding: 6px;
background: var(--surface-elevated);
border: 1px solid var(--border-strong);
border-radius: 999px;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
opacity: 0;
pointer-events: none;
transition: opacity 200ms ease, transform 200ms ease;
transform: translate(-50%, 12px);
}
.floating-actions[hidden] { display: none; }
.floating-actions.is-visible {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, 0);
}
.floating-actions__btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 8px 12px;
background: transparent;
border: 0;
border-radius: 999px;
color: var(--text);
font: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.floating-actions__btn:hover,
.floating-actions__btn:active {
background: var(--surface-soft);
}
.floating-actions__btn svg {
width: 16px;
height: 16px;
color: var(--text-secondary);
flex-shrink: 0;
}
/* The first "top" button is icon-only — no label */
#floating-actions-top { padding: 8px 10px; }
}
/* Breakdown row — NYSED report card link (Fix #13) */
.breakdown__link {
display: inline-block;
margin-top: 6px;
font-size: 12px;
font-weight: 600;
color: var(--accent-text, var(--accent));
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.breakdown__link:hover { color: var(--text); }
/* ============================================================
Neighborhood comp band (Fix #9) — "Is this assessment fair?"
============================================================ */
.nb-band {
background: var(--surface-elevated);
border: 1px solid var(--border);
border-left: 4px solid var(--border-strong);
border-radius: var(--radius-md);
padding: 16px 20px;
margin-bottom: var(--space-6);
}
.nb-band--low {
background: rgba(47, 107, 79, 0.05);
border-left-color: var(--accent);
}
.nb-band--high {
background: #fef6f5;
border-left-color: #b8403c;
}
.nb-band--neutral {
border-left-color: var(--text-muted);
}
.nb-band__head {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.nb-band__title {
margin: 0;
font-family: var(--font-display, var(--font-sans));
font-size: 18px;
font-weight: 600;
color: var(--text);
}
.nb-band__sub {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
font-weight: 600;
}
.nb-band__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
padding: 12px 0;
border-top: 1px solid var(--divider);
border-bottom: 1px solid var(--divider);
margin-bottom: 12px;
}
.nb-band__stat__label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
font-weight: 600;
margin-bottom: 4px;
}
.nb-band__stat__amount {
font-family: var(--font-mono);
font-size: 16px;
font-weight: 600;
color: var(--text);
font-feature-settings: 'tnum';
}
.nb-band__line {
margin: 0;
font-size: 13px;
line-height: 1.55;
color: var(--text-secondary);
}
@media (max-width: 560px) {
.nb-band__stats { grid-template-columns: 1fr 1fr; gap: 12px; }
.nb-band__stat:nth-child(3) { grid-column: 1 / -1; }
.nb-band__stat__amount { font-size: 14px; }
}
/* ============================================================
District percentile band (Fix #6)
Visual representation of where the user's district sits across LI.
============================================================ */
.pct-band {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
background: var(--surface-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 14px 18px;
margin-bottom: var(--space-5);
}
.pct-band__bar {
position: relative;
height: 10px;
border-radius: 999px;
background: linear-gradient(90deg,
rgba(47, 107, 79, 0.30) 0%,
rgba(47, 107, 79, 0.18) 33%,
rgba(184, 110, 31, 0.20) 66%,
rgba(184, 64, 60, 0.30) 100%);
overflow: visible;
}
.pct-band__bar__fill { display: none; } /* gradient is the bar itself */
.pct-band__bar__marker {
position: absolute;
top: 50%;
left: var(--pct, 50%);
transform: translate(-50%, -50%);
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--text);
border: 2px solid var(--surface-elevated);
box-shadow: 0 0 0 1px var(--text), var(--shadow-sm);
}
.pct-band__text {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.5;
}
.pct-band__text strong { color: var(--text); font-weight: 600; }
.pct-band--high { border-color: rgba(184, 64, 60, 0.30); background: #fef6f5; }
.pct-band--high .pct-band__text strong { color: #b8403c; }
.pct-band--low { border-color: rgba(47, 107, 79, 0.30); background: rgba(47, 107, 79, 0.06); }
.pct-band--low .pct-band__text strong { color: var(--accent-text, var(--accent)); }
/* ============================================================
Exemption qualifier quiz (Fix #5)
============================================================ */
.ex-quiz {
background: var(--surface-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 14px 16px;
margin-bottom: var(--space-4);
}
.ex-quiz__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.ex-quiz__head__label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
font-weight: 600;
}
.ex-quiz__reset {
appearance: none;
background: transparent;
border: 0;
font: inherit;
font-size: 12px;
color: var(--text-secondary);
cursor: pointer;
text-decoration: underline;
padding: 0;
}
.ex-quiz__reset:hover { color: var(--accent-text, var(--text)); }
.ex-quiz__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ex-quiz__chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
border: 1px solid var(--border-strong);
border-radius: 999px;
background: var(--surface-elevated);
font-size: 13px;
cursor: pointer;
user-select: none;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.ex-quiz__chip:hover { border-color: var(--text-muted); }
.ex-quiz__chip input { position: absolute; opacity: 0; pointer-events: none; }
.ex-quiz__chip:has(input:checked) {
background: rgba(47, 107, 79, 0.10);
border-color: var(--accent);
color: var(--accent-text, var(--accent));
font-weight: 600;
}
/* Fallback for browsers without :has() — ::before checkmark */
.ex-quiz__chip span::before {
content: '';
display: inline-block;
width: 10px; height: 10px;
border-radius: 50%;
border: 1.5px solid var(--text-faint);
margin-right: 6px;
vertical-align: middle;
transition: background 120ms ease, border-color 120ms ease;
}
.ex-quiz__chip:has(input:checked) span::before {
background: var(--accent);
border-color: var(--accent);
box-shadow: inset 0 0 0 2px var(--surface-elevated);
}
.ex-quiz__total {
margin: 12px 0 0;
font-size: 13px;
color: var(--text-secondary);
padding-top: 10px;
border-top: 1px solid var(--divider);
}
.ex-quiz__total strong {
font-family: var(--font-mono);
font-size: 16px;
color: var(--accent-text, var(--text));
}
@media (max-width: 560px) {
.ex-quiz__head { flex-direction: column; align-items: flex-start; gap: 6px; }
}
/* ============================================================
B-CARD — Option B bill card (editorial hero + buyer block + actions)
Replaces the old .bill-card on the result page. Self-contained so we
can iterate without fighting legacy styles.
============================================================ */
.b-card {
background: var(--surface-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
margin-bottom: var(--space-4);
}
/* ---- HERO ---- */
.b-card__hero {
padding: 28px 28px var(--space-6);
/* Subtle warm tint so the hero feels editorial without overpowering. */
background: linear-gradient(180deg, #fbf9f4 0%, var(--surface-elevated) 100%);
border-bottom: 1px solid var(--divider);
}
.b-card__eyebrow {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
font-weight: 700;
margin-bottom: 8px;
}
.b-card__amount {
font-family: var(--font-display, var(--font-sans));
font-size: clamp(2.5rem, 1.5rem + 4vw, 3.5rem);
font-weight: 600;
letter-spacing: -0.025em;
line-height: 0.95;
margin: 0;
color: var(--text);
}
.b-card__amount__year {
display: inline-block;
margin-left: 10px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
color: var(--text-muted);
vertical-align: middle;
}
/* Monthly equivalent line directly under the headline. Mortgage-think for buyers. */
.b-card__monthly {
margin: 6px 0 0;
font-size: 14px;
color: var(--text-secondary);
font-family: var(--font-mono);
font-feature-settings: 'tnum';
}
.b-card__monthly span {
font-weight: 600;
color: var(--text);
}
/* Aside in the explainer when the user is in buyer mode — reminds them what
the *current owner* pays, in case they're cross-checking realtor numbers. */
.b-card__owner-aside {
display: block;
margin-top: 6px;
font-size: 12px;
color: var(--text-muted);
}
.b-card__owner-aside strong {
font-family: var(--font-mono);
color: var(--text);
}
.b-card__pills {
margin-top: 14px;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.b-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
background: var(--surface-elevated);
border: 1px solid var(--border);
color: var(--text-secondary);
white-space: nowrap;
}
.b-pill__dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
opacity: 0.6;
flex-shrink: 0;
}
.b-pill--high {
background: rgba(47, 107, 79, 0.10);
color: var(--accent-text, #1f4d36);
border-color: rgba(47, 107, 79, 0.30);
}
.b-pill--medium {
background: #fff3e0;
color: #b86e1f;
border-color: rgba(184, 110, 31, 0.30);
}
.b-pill--low {
background: #fdebe9;
color: #b8403c;
border-color: rgba(184, 64, 60, 0.30);
}
.b-card__explainer {
margin: 14px 0 0;
font-size: 14px;
line-height: 1.55;
color: var(--text-secondary);
}
.b-card__explainer strong { color: var(--text); font-weight: 600; }
/* ---- BUYER BLOCK ---- */
.b-card__buyer {
padding: var(--space-6) 28px;
background: var(--surface-elevated);
/* No top border — hero already has bottom border. Avoid double-line. */
}
.b-card__buyer__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin-bottom: 12px;
}
.b-card__buyer__title {
font-size: 15px;
font-weight: 600;
color: var(--text);
margin: 0;
}
.b-card__buyer__hint {
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
.b-card__buyer__row {
display: grid;
/* Give the input ~60% and the projected pill ~40% so neither feels cramped */
grid-template-columns: minmax(0, 1.4fr) minmax(180px, 1fr);
gap: 12px;
align-items: stretch;
}
.b-card__buyer__field {
display: flex;
flex-direction: column;
gap: 4px;
}
.b-card__buyer__label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
font-weight: 600;
}
.b-card__buyer__input {
font: inherit;
font-family: var(--font-mono);
/* 16px prevents iOS zoom-on-focus */
font-size: 16px;
font-weight: 500;
padding: 10px 14px;
border: 1px solid var(--border-strong);
border-radius: 8px;
background: var(--surface-elevated);
color: var(--text);
width: 100%;
min-width: 0;
}
.b-card__buyer__input:focus {
outline: 2px solid var(--accent);
outline-offset: 1px;
border-color: var(--accent);
}
.b-card__buyer__input::placeholder { color: var(--text-faint); }
/* The projected-bill pill: color shifts based on delta vs year-1 (set by JS) */
.b-card__buyer__projected {
align-self: end;
display: flex;
flex-direction: column;
justify-content: center;
text-align: right;
padding: 8px 14px;
border-radius: 8px;
border: 1px solid;
min-width: 130px;
transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.b-card__buyer__projected__label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
opacity: 0.8;
margin-bottom: 2px;
}
.b-card__buyer__projected__amount {
font-family: var(--font-mono);
font-size: 17px;
font-weight: 600;
line-height: 1.1;
white-space: nowrap;
}
.b-card__buyer__projected__year {
font-weight: 500;
font-size: 11px;
opacity: 0.7;
margin-left: 2px;
}
.b-card__buyer__projected__monthly {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
opacity: 0.75;
margin-top: 2px;
letter-spacing: 0.01em;
}
/* Color variants — toggled by JS based on projected-vs-year1 delta */
.b-card__buyer__projected--neutral {
background: var(--surface-soft, #f1ede5);
color: var(--text-secondary);
border-color: var(--border);
}
.b-card__buyer__projected--higher {
background: #fff3e0;
color: #8a4f0e;
border-color: rgba(184, 110, 31, 0.40);
}
.b-card__buyer__projected--lower {
background: rgba(47, 107, 79, 0.10);
color: var(--accent-text, #1f4d36);
border-color: rgba(47, 107, 79, 0.40);
}
.b-card__buyer__projected--match {
background: var(--surface-elevated);
color: var(--text);
border-color: var(--border-strong);
}
.b-card__buyer__sub {
margin: 10px 0 0;
font-size: 12px;
line-height: 1.5;
color: var(--text-muted);
}
/* ---- PITI mini-calculator ---- */
.b-card__piti {
padding: var(--space-5) 28px var(--space-5);
border-top: 1px solid var(--divider);
background: var(--surface-elevated);
}
.b-card__piti[hidden] { display: none; }
.b-piti__inputs {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
margin-bottom: 14px;
}
.b-piti__field {
display: flex;
flex-direction: column;
gap: 4px;
}
.b-piti__field__label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
font-weight: 600;
}
.b-piti__field__wrap {
display: flex;
align-items: center;
gap: 4px;
border: 1px solid var(--border-strong);
border-radius: 8px;
background: var(--surface-elevated);
padding: 8px 12px;
transition: border-color 120ms ease;
}
.b-piti__field__wrap:focus-within {
border-color: var(--accent);
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.b-piti__field__wrap input,
.b-piti__field__wrap select {
appearance: none;
background: transparent;
border: 0;
outline: none;
font: inherit;
font-family: var(--font-mono);
font-size: 14px;
font-weight: 500;
color: var(--text);
width: 100%;
min-width: 0;
padding: 0;
}
.b-piti__field__wrap select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%236e7585' stroke-width='1.5'%3E%3Cpolyline points='1 1 5 5 9 1'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right center;
padding-right: 16px;
}
.b-piti__field__suffix {
color: var(--text-muted);
font-size: 13px;
font-weight: 500;
flex-shrink: 0;
}
/* Hide spinner buttons on number inputs (Firefox + WebKit) */
.b-piti__field__wrap input[type=number]::-webkit-inner-spin-button,
.b-piti__field__wrap input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.b-piti__field__wrap input[type=number] { -moz-appearance: textfield; }
.b-piti__breakdown {
display: flex;
flex-direction: column;
gap: 6px;
padding: 12px 14px;
background: var(--surface-soft, #f1ede5);
border-radius: 10px;
}
.b-piti__line {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
font-size: 13px;
color: var(--text-secondary);
}
.b-piti__line__label {
display: flex;
align-items: center;
gap: 6px;
}
.b-piti__line__hint {
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 1px 5px;
border-radius: 999px;
background: var(--border);
color: var(--text-muted);
font-weight: 600;
cursor: help;
}
.b-piti__line__amount {
font-family: var(--font-mono);
font-weight: 500;
color: var(--text);
font-feature-settings: 'tnum';
}
.b-piti__line--total {
margin-top: 6px;
padding-top: 8px;
border-top: 1px solid var(--border);
font-size: 15px;
font-weight: 600;
color: var(--text);
}
.b-piti__line--total .b-piti__line__amount {
font-size: 17px;
font-weight: 600;
}
.b-piti__sub {
margin: 10px 0 0;
font-size: 11px;
line-height: 1.5;
color: var(--text-faint);
}
@media (max-width: 560px) {
.b-card__piti { padding: var(--space-5) 20px; }
.b-piti__inputs {
grid-template-columns: 1fr 1fr;
/* Term goes full-width on second row */
}
.b-piti__field:nth-child(3) { grid-column: 1 / -1; }
}
/* ---- ACTIONS ---- */
.b-card__actions {
display: flex;
gap: 8px;
padding: 12px 14px;
border-top: 1px solid var(--divider);
background: var(--surface-soft, #f1ede5);
}
.b-card__btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 12px;
background: var(--surface-elevated);
color: var(--text-secondary);
border: 1px solid var(--border);
border-radius: 8px;
font: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: var(--transition);
min-height: 40px;
}
.b-card__btn:hover {
border-color: var(--border-strong);
color: var(--text);
}
.b-card__btn--primary {
background: var(--navy);
color: #fff;
border-color: var(--navy);
}
.b-card__btn--primary:hover {
background: var(--navy-2);
color: #fff;
border-color: var(--navy-2);
}
.b-card__btn svg { width: 14px; height: 14px; flex-shrink: 0; }
/* ---- DISCLAIMER (muted footnote, not a loud box) ---- */
.b-card__disclaimer {
margin: 14px 0 var(--space-8);
font-size: 12px;
line-height: 1.55;
color: var(--text-faint);
max-width: 640px;
}
.b-card__disclaimer a {
color: var(--text-muted);
text-decoration: underline;
}
.b-card__disclaimer a:hover {
color: var(--accent-text, var(--accent));
}
/* ---- MOBILE ---- */
@media (max-width: 560px) {
.b-card__hero { padding: var(--space-5) var(--space-5) var(--space-5); }
.b-card__buyer { padding: var(--space-5) var(--space-5); }
.b-card__amount { font-size: clamp(2rem, 1.4rem + 4vw, 2.5rem); }
/* Stack input above the projected pill, full-width */
.b-card__buyer__row {
grid-template-columns: 1fr;
gap: 10px;
}
.b-card__buyer__projected {
text-align: left;
flex-direction: row;
align-items: center;
justify-content: space-between;
min-width: 0;
padding: 10px 14px;
}
.b-card__buyer__projected__label { margin-bottom: 0; }
.b-card__actions {
padding: 10px;
gap: 6px;
}
.b-card__btn {
padding: 10px 8px;
font-size: 12px;
}
.b-card__btn span { display: inline; }
}
/* ============================================================
Open-slot CTA: visible when no paying advertiser fills the slot.
Slightly subdued to make it clear this isn't an active sponsor.
============================================================ */
.cta-strip--open-slot {
border-style: dashed;
background: var(--surface);
opacity: 0.95;
}
.cta-strip--open-slot .cta-strip__eyebrow {
color: var(--text-muted);
}
.cta-strip--open-slot .cta-strip__title {
font-style: italic;
font-family: 'Georgia', serif;
font-weight: 600;
letter-spacing: -0.015em;
color: var(--text);
}
.cta-strip--open-slot .cta-strip__btn {
background: var(--surface-elevated);
color: var(--text);
border: 1px solid var(--border-strong);
}
.cta-strip--open-slot .cta-strip__btn:hover {
background: var(--accent-bg);
border-color: var(--accent);
color: var(--accent-text);
}
.cta-strip--open-slot .cta-strip__btn--accent {
background: var(--navy);
color: white;
border: none;
}
.cta-strip--open-slot .cta-strip__btn--accent:hover {
background: var(--navy-2);
}
/* ============================================================
School-district SEO landing page
============================================================ */
.d-hero {
padding: 32px 0 24px;
background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
border-bottom: 1px solid var(--border);
}
.d-title {
font-family: var(--font-serif);
font-size: clamp(28px, 5vw, 44px);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--text);
margin: 8px 0 16px;
}
.d-deck {
font-size: clamp(15px, 2vw, 18px);
line-height: 1.55;
color: var(--text);
max-width: 70ch;
margin: 0 0 8px;
}
.d-deck--muted { color: var(--text-secondary); font-size: 14px; }
.d-deck strong { font-weight: 600; }
.d-stats {
padding: 24px 0 32px;
background: var(--bg);
border-bottom: 1px solid var(--border);
}
.d-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
}
.d-grid .stat {
background: white;
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px 16px;
}
.d-grid .stat__label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 6px;
}
.d-grid .stat__value {
font-family: var(--font-serif);
font-size: 26px;
font-weight: 700;
color: var(--text);
line-height: 1.1;
}
.d-grid .stat__value span { font-size: 14px; color: var(--text-muted); font-weight: 400; }
.d-grid .stat__sub {
font-size: 12px;
color: var(--text-muted);
margin-top: 4px;
}
.d-section { padding: 32px 0; border-bottom: 1px solid var(--border); }
.d-section--alt { background: var(--surface); }
.d-h2 {
font-family: var(--font-serif);
font-size: clamp(22px, 3vw, 28px);
font-weight: 700;
letter-spacing: -0.01em;
color: var(--text);
margin: 0 0 12px;
}
.d-lede {
font-size: 15px;
line-height: 1.6;
color: var(--text);
max-width: 70ch;
margin: 0 0 20px;
}
.d-lede strong { font-weight: 600; }
.d-rates {
width: 100%;
border-collapse: collapse;
font-size: 14px;
background: white;
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
}
.d-rates th, .d-rates td { padding: 10px 14px; text-align: left; }
.d-rates thead { background: var(--surface-2); }
.d-rates th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 600; }
.d-rates tbody tr { border-top: 1px solid var(--border); }
.d-rates td:nth-child(2), .d-rates td:nth-child(3) { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.d-foot { font-size: 12px; color: var(--text-muted); margin-top: 10px; }
.d-comps {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 16px;
}
@media (max-width: 640px) { .d-comps { grid-template-columns: 1fr; } }
.d-comps__col h3 {
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
margin-bottom: 10px;
}
.d-comps__col ul { list-style: none; padding: 0; margin: 0; }
.d-comps__col li {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: white;
margin-bottom: 6px;
}
.d-comps__col li a { color: var(--text); font-weight: 500; }
.d-comps__col li a:hover { color: var(--accent); }
.d-comps__col li span { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.d-hamlets {
list-style: none; padding: 0; margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 8px;
}
.d-hamlets li {
padding: 10px 14px;
background: white;
border: 1px solid var(--border);
border-radius: 8px;
}
.d-hamlets li strong { display: block; font-size: 14px; }
.d-hamlets li span { font-size: 12px; color: var(--text-muted); }
.d-faq details {
background: white;
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px 16px;
margin-bottom: 8px;
}
.d-faq details[open] { border-color: var(--accent-soft); }
.d-faq summary {
font-weight: 600;
cursor: pointer;
list-style: none;
position: relative;
padding-right: 28px;
font-size: 15px;
}
.d-faq summary::-webkit-details-marker { display: none; }
.d-faq summary::after {
content: '';
position: absolute;
right: 0; top: 50%;
width: 8px; height: 8px;
border-right: 2px solid var(--text-muted);
border-bottom: 2px solid var(--text-muted);
transform: translateY(-70%) rotate(45deg);
transition: transform 200ms;
}
.d-faq details[open] summary::after {
transform: translateY(-30%) rotate(-135deg);
border-color: var(--accent);
}
.d-faq p { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.aff-slot {
background: white;
border: 1px solid var(--border);
border-radius: 14px;
padding: 20px 24px;
text-align: center;
max-width: 600px;
margin: 0 auto;
}
.aff-slot__eyebrow {
display: inline-block;
font-size: 11px; font-weight: 600;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--accent); background: var(--accent-soft);
padding: 3px 10px; border-radius: 999px;
margin-bottom: 10px;
}
.aff-slot h3 { margin: 4px 0 8px; font-size: 20px; font-weight: 600; }
.aff-slot p { font-size: 14px; color: var(--text-secondary); margin: 0 0 14px; max-width: 50ch; margin-inline: auto; }
.d-news {
background: white;
border: 1px solid var(--border);
border-radius: 14px;
padding: 20px 24px;
max-width: 520px;
margin: 0 auto;
}
.d-news h3 { font-size: 18px; font-weight: 600; margin: 0 0 4px; }
.d-news > p { font-size: 14px; color: var(--text-secondary); margin: 0 0 14px; }
.d-news__form { display: flex; gap: 8px; flex-wrap: wrap; }
.d-news__form input {
flex: 1; min-width: 0;
padding: 10px 14px;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 14px;
font-family: inherit;
}
.d-news__foot { font-size: 12px; color: var(--text-muted); margin-top: 8px; margin-bottom: 0; }
.d-foot-section { background: var(--surface); }
.d-sources { list-style: none; padding: 0; margin: 0 0 16px; }
.d-sources li { font-size: 13px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 8px; }
.d-sources li strong { color: var(--text); }
.d-disclaimer {
font-size: 12px;
line-height: 1.55;
color: var(--text-muted);
border-top: 1px solid var(--border);
padding-top: 14px;
}