/* ============================================= CalcTools — Shared Site Styles Design tokens, base reset, and the layout (header / main / sidebar / footer) plus the shared sidebar components (.ad-slot, .calc-links). Loaded by: * every page's (styles light-DOM content) * 's shadow root (via ) ============================================= */ /* --- DESIGN TOKENS (single source of truth) --- */ /* --- DESIGN TOKENS (single source of truth) --- */ :root { /* Colors */ --bg: #f4f6f9; --card-bg: #ffffff; --text: #1a1d23; --text-muted: #6b7280; --primary: #2563eb; --primary-hover: #1d4ed8; --border: #e5e7eb; --accent-green: #059669; --accent-red: #dc2626; --accent-amber: #d97706; --header-bg: #1a1d23; --header-text: #ffffff; --surface: #f9fafb; --surface-hover: #f3f4f6; --focus-ring: rgba(37, 99, 235, 0.12); /* Fonts */ --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; /* Radius */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius: 10px; /* Spacing scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; /* Motion */ --transition-fast: 0.15s; --transition-normal: 0.2s; /* Layout & elevation */ --max-width: 1100px; --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.10); } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-sans); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; /* Never allow page-level horizontal scroll on real devices. */ overflow-x: hidden; overflow-x: clip; } /* --- PAGE GRID (calc-shell) --- */ .page { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "header header" "main sidebar" "footer footer"; min-height: 100vh; } .page.no-sidebar { grid-template-columns: minmax(0, 1fr); grid-template-areas: "header" "main" "footer"; } .site-header { grid-area: header; } .main-content { grid-area: main; } .sidebar { grid-area: sidebar; min-width: 0; } .site-footer { grid-area: footer; } /* --- HEADER --- */ .site-header { background: var(--header-bg); color: var(--header-text); padding: 1.25rem var(--space-5); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .header-inner { max-width: var(--max-width); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); } .brand { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.3px; color: var(--header-text); text-decoration: none; } .brand:hover { opacity: 0.85; } .header-subtitle { font-size: 0.85rem; color: rgba(255, 255, 255, 0.65); } .site-nav { display: flex; gap: var(--space-1); flex-wrap: wrap; } .site-nav a { color: rgba(255, 255, 255, 0.75); text-decoration: none; padding: 0.35rem var(--space-3); border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 500; transition: background var(--transition-fast), color var(--transition-fast); } .site-nav a:hover, .site-nav a.active { background: rgba(255, 255, 255, 0.12); color: #fff; } /* --- MAIN --- */ .main-content { min-width: 0; /* keep content from widening the page past the viewport */ padding: var(--space-6) var(--space-5); max-width: var(--max-width); margin: 0 auto; width: 100%; } .page-heading { margin-bottom: 1.5rem; } .page-heading h1 { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; } .subtitle { color: var(--text-muted); font-size: 0.95rem; margin-top: 0.25rem; } /* --- BREADCRUMB --- */ .breadcrumb { margin-bottom: 1rem; } .breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; font-size: 0.85rem; } .breadcrumb li { display: flex; align-items: center; } .breadcrumb li + li::before { content: "/"; margin: 0 var(--space-2); color: var(--text-muted); } .breadcrumb a { color: var(--text-muted); text-decoration: none; } .breadcrumb a:hover { color: var(--primary); text-decoration: underline; } .breadcrumb .crumb-current { color: var(--text); font-weight: 500; } /* --- SIDEBAR --- */ .sidebar { padding: var(--space-6) var(--space-5) var(--space-6) 0; } .sidebar-stack { display: flex; flex-direction: column; gap: var(--space-5); position: sticky; top: var(--space-5); } /* --- FOOTER --- */ .site-footer { background: var(--header-bg); color: rgba(255, 255, 255, 0.55); text-align: center; padding: var(--space-5); font-size: 0.8rem; } .footer-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.35rem 1.25rem; margin-bottom: 0.6rem; } .site-footer a { color: rgba(255, 255, 255, 0.75); text-decoration: none; } .site-footer a:hover { color: #fff; text-decoration: underline; } /* --- AD SLOT --- */ /* The custom-element host: always block-level and full-width so the AdSense unit has a measurable width as soon as the page lays out (an unstyled custom element defaults to inline, which can measure as 0 and make AdSense log "No slot size for availableWidth=0"). */ ad-slot { display: block; min-width: 0; } .ad-slot { width: 100%; min-height: 120px; display: flex; align-items: center; justify-content: center; background: var(--card-bg); border: 1px dashed var(--border); border-radius: var(--radius); color: var(--text-muted); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; overflow: hidden; } .ad-slot-close { display: none; } ad-slot.dismissed { display: none; } /* --- CALC LINKS ("More calculators" rail) --- */ .calc-links { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem 1.25rem 1.4rem; } .calc-links-title { font-size: 1rem; font-weight: 700; margin: 0 0 var(--space-3); } .calc-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .calc-links a { color: var(--primary); text-decoration: none; font-size: 0.9rem; font-weight: 500; } .calc-links a:hover, .calc-links a.active { color: var(--primary-hover); text-decoration: underline; } .calc-links .coming { color: var(--text-muted); font-size: 0.9rem; } .badge-soon { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.4px; color: var(--accent-amber); background: #fef3c7; border-radius: var(--radius-xs); padding: 0.12rem 0.35rem; vertical-align: middle; white-space: nowrap; } /* --- CALCULATOR UI (shared components) ------------------------------ Cards, forms, buttons, stats, charts, tables, toggles, content pages. Every calculator reuses these so fonts/colors/spacing stay identical. Spacing rhythm: cards 1.5rem padding, sections 1.5rem gap, fields 1rem. ------------------------------------------------------------------ */ /* --- Cards --- */ .card { min-width: 0; /* allow cards in grid/flex layouts to shrink instead of overflowing */ background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-5); } .card h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; color: var(--text); } .card h3 { font-size: 0.95rem; font-weight: 600; color: var(--text); margin: var(--space-4) 0 var(--space-3); } /* --- Forms --- */ .field { margin-bottom: 1rem; } .field > label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 0.3rem; } .input-group { display: flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: #fff; transition: border-color var(--transition-fast); } .input-group:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); } .prefix, .suffix { padding: var(--space-2) 0.65rem; font-size: 0.85rem; color: var(--text-muted); background: var(--surface); border-right: 1px solid var(--border); white-space: nowrap; user-select: none; } .suffix { border-right: none; border-left: 1px solid var(--border); } .input-group input, .input-group select { flex: 1; border: none; outline: none; padding: 0.55rem 0.65rem; font-size: 0.95rem; font-family: inherit; background: transparent; color: var(--text); min-width: 0; } .input-group select { cursor: pointer; } .input-stack { display: flex; flex-direction: column; gap: 0.4rem; } .field-check { display: flex; align-items: center; gap: var(--space-2); } .field-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; } .field-check label { font-size: 0.88rem; font-weight: 500; text-transform: none; letter-spacing: 0; margin-bottom: 0; cursor: pointer; } .hint { font-size: 0.78rem; color: var(--text-muted); margin-top: -0.5rem; margin-bottom: 0.75rem; } .divider { border: none; border-top: 1px solid var(--border); margin: 1.25rem 0; } .more-options { padding-left: 0.25rem; border-left: 2px solid var(--border); margin-top: 0.5rem; margin-bottom: 0.5rem; } .more-options h3 { margin-top: 0.75rem; } /* --- Buttons --- */ .btn, .btn-primary { display: inline-block; background: var(--primary); color: #fff; border: none; border-radius: var(--radius-sm); padding: 0.65rem 1.4rem; font-size: 0.95rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: background var(--transition-fast); } .btn:hover, .btn-primary:hover { background: var(--primary-hover); } .btn-primary { display: block; width: 100%; padding: 0.7rem; margin-top: 0.5rem; } .btn-link { display: flex; align-items: center; gap: 0.4rem; width: 100%; padding: var(--space-2) 0; font-size: 0.88rem; font-weight: 500; font-family: inherit; color: var(--primary); background: none; border: none; cursor: pointer; margin-top: 0.25rem; transition: color var(--transition-fast); } .btn-link:hover { color: var(--primary-hover); } .toggle-arrow { font-size: 0.65rem; display: inline-block; transition: transform var(--transition-normal); } /* --- Segmented toggle (e.g. monthly / biweekly) --- */ .schedule-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .schedule-header h2 { margin-bottom: 0; } .schedule-toggle { display: flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .toggle-btn { padding: 0.35rem var(--space-3); font-size: 0.8rem; font-weight: 500; font-family: inherit; color: var(--text-muted); background: #fff; border: none; cursor: pointer; transition: all var(--transition-fast); } .toggle-btn:first-child { border-right: 1px solid var(--border); } .toggle-btn.active { background: var(--primary); color: #fff; } .toggle-btn:hover:not(.active) { background: var(--surface-hover); } /* --- Results --- */ .big-number { font-size: 2.8rem; font-weight: 800; letter-spacing: -1px; color: var(--primary); line-height: 1.1; margin-bottom: 0.25rem; overflow-wrap: break-word; /* long numbers wrap instead of pushing the page wide */ } .badge { display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; background: var(--accent-green); color: #fff; padding: 0.15rem 0.4rem; border-radius: var(--radius-xs); vertical-align: middle; margin-right: 0.3rem; } /* --- Stats grid --- */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); margin-bottom: 1.5rem; } .stat { background: var(--surface); border-radius: var(--radius-md); padding: 0.85rem; text-align: center; } .stat .label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); margin-bottom: 0.25rem; } .stat .value { display: block; font-size: 1.15rem; font-weight: 700; color: var(--text); } .stat .value.green { color: var(--accent-green); } .stat .value.red { color: var(--accent-red); } .stat .value.amber { color: var(--accent-amber); } /* --- Charts --- */ .chart-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; } .chart-wrapper { background: var(--surface); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: 1.5rem; max-height: 320px; } .chart-wrapper canvas { max-height: 280px; max-width: 100%; } .chart-pie { max-height: 300px; } .chart-pie canvas { max-height: 260px; } /* --- Tables (schedules, breakdowns) --- */ .table-scroll { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--border); } .table-scroll table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .table-scroll thead { background: var(--surface); } .table-scroll th { text-align: right; padding: 0.55rem 0.6rem; font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-muted); border-bottom: 1px solid var(--border); } .table-scroll th:first-child { text-align: left; } .table-scroll td { text-align: right; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--surface); color: var(--text); font-variant-numeric: tabular-nums; } .table-scroll td:first-child { text-align: left; font-weight: 600; } .table-scroll tbody tr:hover { background: var(--surface); } /* --- RESPONSIVE --- */ @media (max-width: 900px) { .page, .page.no-sidebar { grid-template-columns: minmax(0, 1fr); grid-template-areas: "header" "main" "sidebar" "footer"; } .sidebar { padding: 0 var(--space-5) var(--space-5); } .sidebar-stack { position: static; } /* Mobile: the ad becomes a sticky bottom banner (always visible, dismissible). */ .ad-slot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; margin: 0; padding: 0.25rem 0.75rem; min-height: 70px; background: var(--card-bg); border: none; border-top: 1px solid var(--border); border-radius: 0; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08); } .ad-slot-close { display: block; position: absolute; top: 0.2rem; right: 0.4rem; width: 1.5rem; height: 1.5rem; line-height: 1; font-size: 1rem; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 50%; cursor: pointer; padding: 0; } /* Reserve space for the fixed bar only when an ad is present — and release it when dismissed, so the footer sits at the bottom of the page. */ body:has(ad-slot) { padding-bottom: 68px; } body:has(ad-slot.dismissed) { padding-bottom: 0; } } /* --- Content pages (about / contact / privacy) --- */ .content-page { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-6) 2.25rem; max-width: 820px; margin: 0 auto; } .content-page .last-updated { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.25rem; } .content-page h2 { font-size: 1.3rem; font-weight: 700; color: var(--text); margin: 1.75rem 0 var(--space-3); } .content-page h2:first-child { margin-top: 0; } .content-page h3 { font-size: 1.05rem; font-weight: 600; color: var(--text); margin: 1.25rem 0 var(--space-2); } .content-page p { font-size: 0.96rem; line-height: 1.7; color: var(--text); margin-bottom: 0.9rem; } .content-page ul, .content-page ol { margin: 0 0 0.9rem 1.25rem; padding: 0; } .content-page li { font-size: 0.95rem; line-height: 1.7; color: var(--text); margin-bottom: 0.4rem; } .content-page a { color: var(--primary); text-decoration: none; } .content-page a:hover { color: var(--primary-hover); text-decoration: underline; } .content-page blockquote { margin: 0 0 0.9rem; padding: 0.6rem var(--space-4); border-left: 3px solid var(--primary); background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 1rem; font-weight: 600; color: var(--text); } .content-page .note { background: var(--surface); border-left: 3px solid var(--primary); border-radius: var(--radius-sm); padding: 0.9rem var(--space-4); font-size: 0.9rem; color: var(--text-muted); margin-top: 1.5rem; } .contact-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.25rem var(--space-5); margin: 1.25rem 0; } .contact-card a { font-weight: 600; } /* --- Contact form (static mailto form — no backend) --- */ .contact-form .field { margin-bottom: 1rem; } .contact-form label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 0.3rem; } .contact-form input, .contact-form textarea { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.6rem 0.7rem; font-size: 0.95rem; font-family: inherit; color: var(--text); background: #fff; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); } /* --- FAQ (shared — calculators + homepage) --- */ .faq { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.75rem; } .faq h2 { font-size: 1.3rem; font-weight: 700; color: var(--text); margin-bottom: 1rem; } .faq-item { border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 0.75rem; overflow: hidden; } .faq-item:last-child { margin-bottom: 0; } .faq-item summary { cursor: pointer; font-size: 0.95rem; font-weight: 600; color: var(--text); padding: 0.9rem var(--space-4); list-style: none; display: flex; align-items: center; justify-content: space-between; transition: background var(--transition-fast); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-size: 1.1rem; font-weight: 700; color: var(--text-muted); transition: transform var(--transition-normal); } .faq-item[open] summary { background: var(--surface); } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item summary:hover { background: var(--surface); } .faq-item p { font-size: 0.92rem; line-height: 1.65; color: var(--text-muted); padding: 0 var(--space-4) 0.9rem; margin: 0; } /* --- Content pages responsive --- */ @media (max-width: 768px) { .content-page, .faq { padding: 1.25rem; } }