/* ============================================================
mybizhub — site/styles.css
Single stylesheet for all marketing/legal pages.
Source: docs/SITE.md §2 + docs/DESIGN.md §2.1–2.7
============================================================ */
/* ---- Google Fonts (pages include the in ) ----
---- */
/* ============================================================
1. Design tokens
============================================================ */
:root {
/* Surfaces */
--bg: #F7F5F0; /* warm paper */
--surface: #FFFFFF; /* cards above paper */
--surface-elevated: #FFFFFF;
--surface-sunken: #EFEDE6; /* inputs at rest, wells */
/* Ink */
--text-primary: #1A1A1A;
--text-secondary: #6B6B66;
--text-tertiary: #A3A29B;
/* Lines */
--border: #E4E1D8;
--border-strong: #CFCBBF;
/* Brand action (ink-blue / deep teal-slate) */
--primary: #1F4E5F;
--primary-pressed: #173B48;
--primary-tint: #E6EEF0;
--on-primary: #FFFFFF;
/* Accent (brass) — sparing: rules, gauge caps, premium touches */
--accent: #B07D2B;
/* Deadline-status scale (semantic; used in pills, motifs, viz) */
--status-overdue-fill: #FBE9E7; --status-overdue-ink: #B3261E;
--status-duesoon-fill: #FCEFD6; --status-duesoon-ink: #9A6700;
--status-upcoming-fill: #E6EEF0; --status-upcoming-ink: #1F4E5F;
--status-filed-fill: #E4F0E6; --status-filed-ink: #2E6B3E;
--status-waived-fill: #EDEBE4; --status-waived-ink: #6B6B66;
/* Type scale (web-tuned from DESIGN.md §2.3; larger display sizes for desktop) */
--font-display: "Fraunces", Georgia, "Times New Roman", serif;
--font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
--text-hero: clamp(2.75rem, 1.6rem + 5.5vw, 5rem); /* Fraunces 600 */
--text-h2: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem); /* Fraunces 600 */
--text-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem);/* Fraunces 500 */
--text-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); /* Inter 400 */
--text-small: 0.9375rem; /* Inter 400 */
--text-label: 0.6875rem; /* Inter 600 uppercase, tracked */
/* Spacing (4px base, from DESIGN.md §2.4) */
--space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px;
--space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px;
--space-section: clamp(4rem, 3rem + 5vw, 8rem);
/* Radius (DESIGN.md §2.5) */
--radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px;
--radius-pill: 999px; --radius-spine: 3px;
/* Elevation (warm, low, soft — DESIGN.md §2.6) */
--shadow-card: 0 4px 12px rgba(26,26,26,0.06);
--shadow-raised: 0 8px 20px rgba(26,26,26,0.10);
/* Motion (DESIGN.md §2.7) */
--dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 420ms;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--ease-decel: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #14140F; /* warm near-black */
--surface: #1F1F19;
--surface-elevated: #26261F;
--surface-sunken: #181813;
--text-primary: #F2EFE6;
--text-secondary: #A6A39A;
--text-tertiary: #6E6B62;
--border: #2E2E26;
--border-strong: #3D3D33;
--primary: #5FA3B5; /* lightened teal for contrast */
--primary-pressed: #4C8A9A;
--primary-tint: #1C2E33;
--on-primary: #0E1A1E;
--accent: #D9A441;
--status-overdue-fill: #3A1C19; --status-overdue-ink: #F2A99F;
--status-duesoon-fill: #352A12; --status-duesoon-ink: #E6BE6B;
--status-upcoming-fill: #1C2E33; --status-upcoming-ink: #8FC7D6;
--status-filed-fill: #19301F; --status-filed-ink: #8FCB9B;
--status-waived-fill: #272720; --status-waived-ink: #A6A39A;
--shadow-card: 0 4px 12px rgba(0,0,0,0.4);
--shadow-raised: 0 8px 20px rgba(0,0,0,0.5);
}
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* ============================================================
2. Reset / base
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
font-family: var(--font-ui);
font-size: var(--text-body);
line-height: 1.55;
color: var(--text-primary);
background: var(--bg);
}
/* Warm paper texture — extremely subtle grain via CSS */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0.03;
background-image:
radial-gradient(circle at 20% 30%, rgba(0,0,0,0.06) 0px, transparent 1px),
radial-gradient(circle at 70% 60%, rgba(0,0,0,0.05) 0px, transparent 1px),
radial-gradient(circle at 40% 80%, rgba(0,0,0,0.04) 0px, transparent 1px);
background-size: 180px 180px, 220px 220px, 260px 260px;
}
img, picture, video, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
a {
color: var(--primary);
text-decoration: underline;
text-underline-offset: 0.15em;
transition: color var(--dur-fast) var(--ease-standard);
}
a:hover, a:focus-visible { color: var(--primary-pressed); }
:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* ============================================================
3. Typography utilities / roles
============================================================ */
.font-display { font-family: var(--font-display); }
.font-ui { font-family: var(--font-ui); }
.font-mono { font-family: var(--font-mono); }
.text-hero { font-family: var(--font-display); font-size: var(--text-hero); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; }
.text-h2 { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; }
.text-h3 { font-family: var(--font-display); font-size: var(--text-h3); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
.text-body { font-family: var(--font-ui); font-size: var(--text-body); font-weight: 400; line-height: 1.55; }
.text-small { font-family: var(--font-ui); font-size: var(--text-small); font-weight: 400; line-height: 1.5; }
.text-label {
font-family: var(--font-ui);
font-size: var(--text-label);
font-weight: 600;
line-height: 1.3;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.text-caption {
font-family: var(--font-ui);
font-size: var(--text-small);
font-weight: 400;
line-height: 1.45;
color: var(--text-secondary);
}
.text-mono {
font-family: var(--font-mono);
font-size: 0.875rem;
font-weight: 500;
line-height: 1.4;
}
/* ============================================================
4. Layout — container + asymmetric left gutter
============================================================ */
.container {
width: 100%;
max-width: 1100px;
margin-inline: auto;
padding-inline: var(--space-lg);
}
/* Asymmetric left gutter motif */
@media (min-width: 640px) {
.container { padding-left: calc(var(--space-lg) + var(--space-xl)); padding-right: var(--space-lg); }
}
@media (min-width: 960px) {
.container { padding-left: calc(var(--space-lg) + var(--space-2xl)); padding-right: var(--space-lg); }
}
/* ============================================================
5. Semantic page structure
============================================================ */
header, footer {
background: var(--surface);
border-bottom: 1px solid var(--border);
}
footer { border-bottom: 0; border-top: 1px solid var(--border); }
header.sticky {
position: sticky;
top: 0;
z-index: 50;
background: rgba(247,245,240,0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
@media (prefers-color-scheme: dark) {
header.sticky { background: rgba(20,20,15,0.92); }
}
main { padding-block: var(--space-section); }
section + section { margin-top: var(--space-section); }
/* ============================================================
6. Components
============================================================ */
/* ---- 6.1 Buttons ---- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
font-family: var(--font-ui);
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1;
height: 52px;
padding-inline: var(--space-xl);
border-radius: var(--radius-md);
border: none;
cursor: pointer;
text-decoration: none;
transition:
background-color var(--dur-fast) var(--ease-standard),
transform var(--dur-fast) var(--ease-standard),
box-shadow var(--dur-fast) var(--ease-standard);
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-primary {
background: var(--primary);
color: var(--on-primary);
box-shadow: var(--shadow-card);
}
.btn-primary:hover, .btn-primary:focus-visible {
background: var(--primary-pressed);
box-shadow: none;
}
.btn-secondary {
background: var(--surface);
color: var(--text-primary);
border: 1px solid var(--border-strong);
box-shadow: none;
}
.btn-secondary:hover, .btn-secondary:focus-visible {
background: var(--surface-sunken);
}
.btn-ghost {
background: transparent;
color: var(--primary);
height: auto;
padding-inline: 0;
}
.btn-ghost:hover, .btn-ghost:focus-visible {
color: var(--primary-pressed);
opacity: 0.8;
}
/* ---- 6.2 Ledger spine ---- */
.spine {
position: relative;
padding-left: calc(var(--space-lg) + 6px);
}
.spine::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: var(--radius-spine);
border-radius: var(--radius-spine);
background: var(--spine-color, var(--border-strong));
}
.spine-strong::before { width: 4px; }
/* ---- 6.3 Status pills ---- */
.pill {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-pill);
font-family: var(--font-ui);
font-size: var(--text-label);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1;
}
.pill-overdue { background: var(--status-overdue-fill); color: var(--status-overdue-ink); }
.pill-duesoon { background: var(--status-duesoon-fill); color: var(--status-duesoon-ink); }
.pill-upcoming { background: var(--status-upcoming-fill); color: var(--status-upcoming-ink); }
.pill-filed { background: var(--status-filed-fill); color: var(--status-filed-ink); }
.pill-waived { background: var(--status-waived-fill); color: var(--status-waived-ink); }
/* ---- 6.4 Cards / surfaces ---- */
.card {
background: var(--surface);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
padding: var(--space-lg);
transition: box-shadow var(--dur-base) var(--ease-standard);
}
.card:hover { box-shadow: var(--shadow-raised); }
.card-elevated {
background: var(--surface-elevated);
box-shadow: var(--shadow-raised);
}
.card-sunken {
background: var(--surface-sunken);
box-shadow: none;
border: 1px solid var(--border);
}
/* Brass hairline rule — top-edge premium cap */
.brass-rule {
position: relative;
}
.brass-rule::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: var(--accent);
opacity: 0.85;
}
/* ---- 6.5 Chips (jurisdiction strip) ---- */
.chip {
display: inline-flex;
align-items: center;
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: var(--text-small);
font-weight: 500;
line-height: 1;
background: var(--status-upcoming-fill);
color: var(--status-upcoming-ink);
}
/* ---- 6.6 Pricing cards ---- */
.pricing-card {
background: var(--surface);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
padding: var(--space-xl);
display: flex;
flex-direction: column;
gap: var(--space-md);
transition: box-shadow var(--dur-base) var(--ease-standard);
}
.pricing-card:hover { box-shadow: var(--shadow-raised); }
.pricing-card.recommended {
box-shadow: var(--shadow-raised);
position: relative;
}
.pricing-card.recommended::before {
/* brass top-edge hairline on recommended tier */
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: var(--accent);
opacity: 0.85;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.pricing-price {
font-family: var(--font-display);
font-size: var(--text-h2);
font-weight: 600;
color: var(--text-primary);
}
/* ---- 6.7 Forms / inputs ---- */
.field {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.label {
font-family: var(--font-ui);
font-size: var(--text-label);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-secondary);
}
.input, .select, .textarea {
appearance: none;
-webkit-appearance: none;
background: var(--surface-sunken);
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
padding: var(--space-md) var(--space-lg);
font-family: var(--font-ui);
font-size: var(--text-body);
line-height: 1.4;
color: var(--text-primary);
width: 100%;
transition:
border-color var(--dur-fast) var(--ease-standard),
background-color var(--dur-fast) var(--ease-standard),
box-shadow var(--dur-fast) var(--ease-standard);
}
.input::placeholder, .textarea::placeholder { color: var(--text-tertiary); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--border); }
.input:focus, .select:focus, .textarea:focus {
border-color: var(--primary);
background: var(--surface);
box-shadow: 0 0 0 3px var(--primary-tint);
outline: none;
}
/* Segmented control (radio replacement) */
.segmented {
display: inline-flex;
background: var(--surface-sunken);
border: 1px solid var(--border-strong);
border-radius: var(--radius-pill);
padding: 3px;
gap: 2px;
}
.segmented label {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--space-xs) var(--space-md);
border-radius: var(--radius-pill);
font-family: var(--font-ui);
font-size: var(--text-small);
font-weight: 500;
cursor: pointer;
transition: background var(--dur-fast) var(--ease-standard);
}
.segmented input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.segmented input[type="radio"]:checked + label,
.segmented label:has(input[type="radio"]:checked) {
background: var(--surface);
color: var(--primary);
box-shadow: var(--shadow-card);
font-weight: 600;
}
/* ---- 6.8 Footer ---- */
.footer-grid {
display: grid;
gap: var(--space-xl);
grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
.footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.footer-col h4 {
font-family: var(--font-ui);
font-size: var(--text-label);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-secondary);
margin-bottom: var(--space-md);
}
.footer-col ul {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.footer-col a {
color: var(--text-secondary);
text-decoration: none;
font-size: var(--text-small);
transition: color var(--dur-fast) var(--ease-standard);
}
.footer-col a:hover, .footer-col a:focus-visible { color: var(--text-primary); }
.footer-legal {
margin-top: var(--space-xl);
padding-top: var(--space-lg);
border-top: 1px solid var(--border);
font-family: var(--font-mono);
font-size: var(--text-small);
color: var(--text-tertiary);
text-align: center;
}
/* ============================================================
7. Utility helpers
============================================================ */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.text-center { text-align: center; }
.text-left { text-align: left; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-section { margin-top: var(--space-section); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-section { margin-bottom: var(--space-section); }
/* ============================================================
8. Responsive
============================================================ */
@media (min-width: 640px) {
.sm\:grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
.sm\:grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
}
@media (min-width: 960px) {
.lg\:grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
.lg\:grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); }
.lg\:flex-row { flex-direction: row; }
.lg\:items-start { align-items: flex-start; }
}