/* ============================================================================= Kalkulator.in — App CSS tokens.css is linked separately in the layout (avoid duplicate @import). Keep lean — critical-path CSS loaded in . ============================================================================= */ /* Skip link — first focusable control for keyboard users. Off-screen until focused; must remain in DOM (never display:none on default). */ .skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: var(--z-toast, 500); padding: var(--space-2) var(--space-4); background: var(--color-primary); color: var(--color-on-primary); border-radius: var(--radius-md); font-weight: 600; text-decoration: none; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; } .skip-link:focus, .skip-link:focus-visible { top: var(--space-4); clip-path: none; width: auto; height: auto; overflow: visible; outline: var(--focus-ring-width, 2px) solid var(--color-focus-ring); outline-offset: var(--focus-ring-offset, 2px); } /* --------------------------------------------------------------------------- Bootstrap 5 bridge — map BS vars to our tokens --------------------------------------------------------------------------- */ :root { --bs-primary: var(--color-primary); --bs-primary-rgb: 21, 101, 192; --bs-body-bg: var(--color-bg); --bs-body-color: var(--color-text); --bs-border-color: var(--color-border); --bs-border-radius: var(--radius-md); --bs-border-radius-sm: var(--radius-sm); --bs-border-radius-lg: var(--radius-lg); --bs-link-color: var(--color-primary); --bs-link-hover-color: var(--color-primary-hover); --bs-font-sans-serif: var(--font-sans); --bs-font-monospace: var(--font-mono); --bs-body-font-size: var(--text-md); --bs-body-line-height: 1.55; --bs-success: var(--color-success); --bs-danger: var(--color-danger); --bs-warning: var(--color-warning); } @media (prefers-color-scheme: dark) { :root { --bs-primary: var(--color-primary-fill); --bs-primary-rgb: 30, 136, 229; --bs-body-bg: var(--color-bg); --bs-body-color: var(--color-text); --bs-border-color: var(--color-border); --bs-link-color: var(--color-primary); --bs-link-hover-color: var(--color-primary-hover); } } /* --------------------------------------------------------------------------- Base / Reset --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { background-color: var(--color-bg); color: var(--color-text); scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; min-height: 100dvh; font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-size: var(--text-md); line-height: 1.55; background-color: var(--color-bg); color: var(--color-text); } /* Focus ring — all interactive elements */ :focus-visible { outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: var(--focus-ring-offset); } :focus:not(:focus-visible) { outline: none; } /* Links */ a { color: var(--color-primary); text-decoration-skip-ink: auto; } a:hover { color: var(--color-primary-hover); } /* --------------------------------------------------------------------------- Typography --------------------------------------------------------------------------- */ h1 { font-size: var(--text-3xl); line-height: 1.25; font-weight: 600; margin-bottom: var(--space-2); } h2 { font-size: var(--text-2xl); line-height: 1.3; font-weight: 600; margin-bottom: var(--space-3); } h3 { font-size: var(--text-xl); line-height: 1.4; font-weight: 600; margin-bottom: var(--space-3); } h4 { font-size: var(--text-lg); line-height: 1.5; font-weight: 600; margin-bottom: var(--space-2); } @media (min-width: 768px) { h1 { font-size: var(--text-4xl); } } p { margin-bottom: var(--space-4); } p:last-child { margin-bottom: 0; } .text-lead { font-size: var(--text-lg); line-height: 1.5; color: var(--color-text-secondary); } /* --------------------------------------------------------------------------- Layout shell --------------------------------------------------------------------------- */ .page-shell { /*max-width: 72rem;*/ max-width: 80%; margin-inline: auto; /*padding-inline: var(--space-4);*/ } @media (max-width: 768px) { .page-shell { max-width: 90%; } } /*@media (min-width: 768px) { .page-shell { padding-inline: var(--space-6); } }*/ /*@media (min-width: 1200px) { .page-shell { padding-inline: var(--space-8); } }*/ main { /*padding-bottom: var(--space-12);*/ max-width: 80%; margin-inline: auto; } @media (max-width: 768px) { main { max-width: 90%; } } /* Keep calculator workspace clear of sticky site header on example scroll */ .math-workspace, .date-workspace, .tool-workspace, .bmi-stage, [id$="-workspace"] { scroll-margin-top: 5rem; } /* --------------------------------------------------------------------------- Site Header --------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: var(--z-header); height: 3.5rem; /* 56px mobile */ background-color: var(--color-surface); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; box-shadow: var(--elev-0); } @media (min-width: 768px) { .site-header { height: 4rem; /* 64px desktop */ } } .site-header .header-inner { display: flex; align-items: center; gap: var(--space-4); width: 100%; } /* Logo */ .site-logo { font-size: var(--text-xl); font-weight: 700; color: var(--color-primary); text-decoration: none; white-space: nowrap; flex-shrink: 0; } .site-logo:hover { color: var(--color-primary-hover); text-decoration: none; } /* Primary nav (desktop) */ .primary-nav { display: none; } @media (min-width: 992px) { .primary-nav { display: flex; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; } .primary-nav a { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); text-decoration: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); transition: color var(--motion-fast) var(--easing-standard), background-color var(--motion-fast) var(--easing-standard); } .primary-nav a:hover, .primary-nav a:focus-visible { color: var(--color-primary); background-color: var(--color-primary-subtle); } .primary-nav a.active { color: var(--color-primary); } } /* Header action buttons */ .header-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; flex-shrink: 0; } .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--size-touch); height: var(--size-touch); border: none; background: transparent; color: var(--color-text); border-radius: var(--radius-md); cursor: pointer; transition: background-color var(--motion-fast) var(--easing-standard); } .btn-icon:hover { background-color: var(--color-surface-muted); } .btn-icon svg { width: 1.5rem; height: 1.5rem; } /* Header search — icon expands to bar */ .header-search { position: relative; display: flex; align-items: center; } .header-search__panel { display: none; align-items: center; gap: var(--space-1); position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: min(20rem, calc(100vw - 6.5rem)); padding: var(--space-1); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--elev-2); z-index: calc(var(--z-header) + 1); } .header-search.is-open .header-search__panel { display: flex; flex-direction: row; flex-wrap: nowrap; } .header-search.is-open .header-search__toggle { visibility: hidden; pointer-events: none; } .header-search__panel .search-form-wrap { flex: 1 1 auto; min-width: 0; width: auto; } .header-search__panel .search-input { height: 2.5rem; font-size: var(--text-sm); padding-left: 2.5rem; } .header-search__panel .search-icon { left: var(--space-2); width: 1.125rem; height: 1.125rem; } .header-search__close { flex-shrink: 0; width: 2.5rem; height: 2.5rem; } @media (min-width: 992px) { .header-search__panel { width: 18rem; } } /* --------------------------------------------------------------------------- Offcanvas nav (mobile) --------------------------------------------------------------------------- */ .offcanvas-nav .nav-link { font-size: var(--text-md); color: var(--color-text); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); } .offcanvas-nav .nav-link:hover { background-color: var(--color-surface-muted); color: var(--color-primary); } .offcanvas { --bs-offcanvas-bg: var(--color-surface); --bs-offcanvas-color: var(--color-text); } /* --------------------------------------------------------------------------- Breadcrumbs --------------------------------------------------------------------------- */ .breadcrumb-nav { margin-bottom: var(--space-4); } @media (max-width: 768px) { .breadcrumb-nav { display: none; } } .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-text-secondary); } .breadcrumb-item + .breadcrumb-item::before { content: "›"; color: var(--color-text-muted); margin-right: var(--space-1); } .breadcrumb-item a { color: var(--color-text-secondary); text-decoration: none; } .breadcrumb-item a:hover { color: var(--color-primary); text-decoration: underline; } /*.breadcrumb-item.active { color: var(--ui-accent); }*/ .breadcrumb-item.active { color: #00b386; } /* --------------------------------------------------------------------------- Calculator Shell Panel --------------------------------------------------------------------------- */ .calculator-shell { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--elev-1); margin-bottom: var(--space-8); } @media (min-width: 768px) { .calculator-shell { padding: var(--space-8); max-width: 40rem; /* 640px: form readability cap */ } } /* Field stack */ .field-stack { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-5); } @media (min-width: 1200px) { .field-stack { gap: var(--space-5); } } /* Labels */ .calc-label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--color-text); margin-bottom: var(--space-2); } .field-help { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: var(--space-1); } /* Inputs */ .calc-input { width: 100%; height: var(--size-input-h-lg); /* 56px for primary numeric */ padding-inline: var(--space-4); font-size: var(--text-lg); /* 18px — prevents iOS zoom */ color: var(--color-text); background-color: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); transition: border-color var(--motion-fast) var(--easing-standard); -webkit-appearance: none; appearance: none; } .calc-input:focus { outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: var(--focus-ring-offset); border-color: var(--color-primary); } .calc-input::placeholder { color: var(--color-text-muted); } .calc-input.is-invalid { border-color: var(--color-danger); background-color: var(--color-danger-subtle); } .calc-input:disabled, .calc-input[readonly] { background-color: var(--color-surface-sunken); color: var(--color-text-muted); cursor: not-allowed; } /* Select */ .calc-select { width: 100%; height: var(--size-input-h); padding-inline: var(--space-4); font-size: var(--text-lg); color: var(--color-text); background-color: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235F6B7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-4) center; padding-right: var(--space-10); } .calc-select:focus { outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: var(--focus-ring-offset); border-color: var(--color-primary); } /* Input group (input + unit select) */ .input-group-calc { display: flex; align-items: stretch; gap: 0; } .input-group-calc .calc-input { flex: 1; border-radius: var(--radius-md) 0 0 var(--radius-md); border-right: none; } .input-group-calc .calc-select { width: auto; min-width: 5rem; border-radius: 0 var(--radius-md) var(--radius-md) 0; } /* Currency / unit addon for formatted amount inputs */ .calc-input-addon { display: flex; align-items: center; justify-content: center; padding-inline: var(--space-3); background: var(--color-surface-muted); font-size: var(--text-sm); color: var(--color-text-secondary); min-width: 2.5rem; border: 1px solid var(--color-border-strong); font-variant-numeric: tabular-nums; } .calc-input-addon-prefix { border-right: none; border-radius: var(--radius-md) 0 0 var(--radius-md); } .calc-input-addon-suffix { border-left: none; border-radius: 0 var(--radius-md) var(--radius-md) 0; } .input-group-calc .calc-input-addon-prefix + .calc-input { border-radius: 0; } .calc-input-formatted { font-variant-numeric: tabular-nums; } /* Field error message */ .field-error { font-size: var(--text-sm); color: var(--color-danger); margin-top: var(--space-1); display: none; } .field-error.visible { display: block; } /* Form-level error summary */ .form-error-summary { background-color: var(--color-danger-subtle); border: 1px solid var(--color-danger); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-4); display: none; } .form-error-summary.visible { display: block; } .form-error-summary ul { margin: 0; padding-left: var(--space-5); } .form-error-summary a { color: var(--color-danger); } /* Example chips */ .example-chips { display: flex; flex-wrap: nowrap; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-1); margin-bottom: var(--space-5); -webkit-overflow-scrolling: touch; scrollbar-width: none; } .example-chips::-webkit-scrollbar { display: none; } .chip-btn { display: inline-flex; align-items: center; height: 2.25rem; /* 36px */ padding-inline: var(--space-3); background-color: var(--color-primary-subtle); color: var(--color-primary); border: 1px solid transparent; border-radius: var(--radius-sm); font-size: var(--text-sm); cursor: pointer; white-space: nowrap; transition: background-color var(--motion-fast) var(--easing-standard), border-color var(--motion-fast) var(--easing-standard); flex-shrink: 0; } .chip-btn:hover, .chip-btn:focus-visible { background-color: var(--color-primary); color: var(--color-on-primary); } .chip-btn:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: var(--focus-ring-offset); } /* Actions row */ .calc-actions { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); } /* Buttons */ .btn-calc-primary { display: inline-flex; align-items: center; justify-content: center; flex: 1; height: var(--size-btn-h); padding-inline: var(--space-6); background-color: var(--color-primary); color: var(--color-on-primary); border: none; border-radius: var(--radius-md); font-size: var(--text-md); font-weight: 600; cursor: pointer; transition: background-color var(--motion-fast) var(--easing-standard); } .btn-calc-primary:hover { background-color: var(--color-primary-hover); } .btn-calc-primary:active { background-color: var(--color-primary-pressed); } .btn-calc-primary:focus-visible { outline: 3px solid var(--color-on-primary); outline-offset: 2px; box-shadow: 0 0 0 5px var(--color-primary); } /* Dark: use fill token for proper contrast */ @media (prefers-color-scheme: dark) { .btn-calc-primary { background-color: var(--color-primary-fill); color: var(--color-on-primary-fill); } } .btn-calc-reset { display: inline-flex; align-items: center; justify-content: center; height: var(--size-btn-h); padding-inline: var(--space-4); background-color: transparent; color: var(--color-text-secondary); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); font-size: var(--text-md); cursor: pointer; transition: color var(--motion-fast) var(--easing-standard), border-color var(--motion-fast) var(--easing-standard); } .btn-calc-reset:hover { color: var(--color-text); border-color: var(--color-border-strong); } .btn-calc-reset:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: var(--focus-ring-offset); border-color: var(--color-primary); } /* Results region */ .results-region { min-height: 7.5rem; /* 120px mobile — CLS-safe reserve */ border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); background-color: var(--color-surface-muted); position: relative; } @media (min-width: 768px) { .results-region { min-height: 8.75rem; /* 140px desktop */ } } .results-empty { color: var(--color-text-muted); font-size: var(--text-sm); text-align: center; padding: var(--space-4); } .results-content { display: none; } .results-content.visible { display: block; } .result-primary { font-size: var(--text-2xl); font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; line-height: 1.25; margin-bottom: var(--space-2); } @media (min-width: 768px) { .result-primary { font-size: var(--text-3xl); } } .result-unit { font-size: var(--text-md); color: var(--color-text-secondary); margin-left: var(--space-2); } .result-rows { margin-top: var(--space-3); border-top: 1px solid var(--color-divider); padding-top: var(--space-3); } .result-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-1) 0; font-size: var(--text-sm); } .result-row-label { color: var(--color-text-secondary); } .result-row-value { font-weight: 600; font-variant-numeric: tabular-nums; font-family: var(--font-mono); } /* Amortization / payment schedule (meta.schedule) */ .result-schedule { margin-top: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); background-color: var(--color-surface); } .result-schedule > summary { cursor: pointer; font-weight: 600; font-size: var(--text-sm); padding: var(--space-2) 0; list-style-position: outside; } .result-schedule > summary:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-sm); } .result-schedule-wrap { overflow-x: auto; margin-top: var(--space-2); -webkit-overflow-scrolling: touch; } .result-schedule-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; } .result-schedule-table th, .result-schedule-table td { padding: var(--space-2) var(--space-3); text-align: right; border-bottom: 1px solid var(--color-divider); white-space: nowrap; } .result-schedule-table th:first-child, .result-schedule-table td:first-child { text-align: left; } .result-schedule-table thead th { font-weight: 600; color: var(--color-text-secondary); background-color: var(--color-surface-muted); } /* EEAT byline under H1 */ .calc-byline { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: calc(var(--space-2) * -1); margin-bottom: var(--space-5); line-height: 1.45; } .calc-byline a { color: var(--color-text-secondary); text-decoration: underline; text-underline-offset: 2px; } .calc-byline a:hover { color: var(--color-primary); } .calc-byline a:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-sm); } /* How-to steps list */ .howto-steps { padding-left: 1.25rem; margin: 0; } .howto-steps li { margin-bottom: var(--space-2); padding-left: var(--space-1); } /* Result action bar (Copy / Share / Print) Always reserve vertical space so showing actions after calculate does not CLS. */ .result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-divider); min-height: 2.75rem; /* ~44px row — reserved even when [hidden] */ } .result-actions[hidden] { visibility: hidden; border-top-color: transparent; pointer-events: none; /* Keep layout space: do not use display:none */ display: flex !important; } .btn-result-action { display: inline-flex; align-items: center; justify-content: center; min-height: 2.25rem; /* 36px — secondary actions, still touch-friendly */ padding-inline: var(--space-3); background-color: transparent; color: var(--color-primary); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: background-color var(--motion-fast) var(--easing-standard), border-color var(--motion-fast) var(--easing-standard); } .btn-result-action:hover { background-color: var(--color-primary-subtle); border-color: var(--color-primary); } .btn-result-action:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: var(--focus-ring-offset); } .result-action-feedback { font-size: var(--text-sm); color: var(--color-success); margin-left: var(--space-1); min-height: 1.25rem; } /* Skeleton inside results */ .result-skeleton { display: none; } .result-skeleton.visible { display: block; } .skeleton-line { height: 1rem; background-color: var(--color-surface-sunken); border-radius: var(--radius-sm); margin-bottom: var(--space-2); animation: skeleton-pulse 1.4s ease-in-out infinite; } .skeleton-line-lg { height: 1.75rem; width: 60%; } .skeleton-line-md { width: 80%; } .skeleton-line-sm { width: 50%; } @keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @media (prefers-reduced-motion: reduce) { .skeleton-line { animation: none; } } /* --------------------------------------------------------------------------- Sticky Calculate bar (mobile) Fixed bottom chrome — height is reserved via body.sticky-cta-active padding so FAQ/Related never jump under the bar when it appears. --------------------------------------------------------------------------- */ .sticky-cta-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-sticky-sub); background-color: var(--color-surface); border-top: 1px solid var(--color-border); box-shadow: var(--elev-2); padding: var(--space-3) var(--space-4); padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); /* Prefer opacity/visibility over translate when possible to reduce jump; keep transform for reduced paint on show — pair with body padding reserve */ transform: translateY(100%); transition: transform var(--motion-base) var(--easing-standard); /* Explicit height budget matches body.sticky-cta-active padding */ min-height: calc(var(--size-btn-h-sticky) + var(--space-6) + env(safe-area-inset-bottom)); contain: layout; } .sticky-cta-bar.visible { transform: translateY(0); } .sticky-cta-bar .btn-calc-primary { width: 100%; height: var(--size-btn-h-sticky); } /* Padding for main when sticky bar is visible — must match bar min-height */ body.sticky-cta-active main { padding-bottom: calc(var(--size-btn-h-sticky) + var(--space-8) + env(safe-area-inset-bottom)); } /* Hide sticky bar on desktop */ @media (min-width: 768px) { .sticky-cta-bar { display: none; } body.sticky-cta-active main { padding-bottom: 0; } } /* --------------------------------------------------------------------------- Search autocomplete --------------------------------------------------------------------------- */ .search-form-wrap { position: relative; flex: 1; } .search-input { width: 100%; height: var(--size-input-h); padding: 0 var(--space-4) 0 2.75rem; font-size: var(--text-md); color: var(--color-text); background-color: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: border-color var(--motion-fast) var(--easing-standard), background-color var(--motion-fast) var(--easing-standard); } .search-input:focus { background-color: var(--color-surface); border-color: var(--color-primary); outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: var(--focus-ring-offset); } .search-icon { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; width: var(--size-icon); height: var(--size-icon); } .search-suggestions { position: absolute; top: calc(100% + var(--space-1)); left: 0; right: 0; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--elev-2); z-index: var(--z-dropdown); max-height: 22rem; overflow-y: auto; display: none; } .search-suggestions.visible { display: block; } .suggestion-item { display: flex; justify-content: space-between; align-items: center; min-height: var(--size-touch); padding: var(--space-2) var(--space-4); cursor: pointer; text-decoration: none; color: var(--color-text); transition: background-color var(--motion-fast) var(--easing-standard); border-bottom: 1px solid var(--color-divider); } .suggestion-item:last-child { border-bottom: none; } .suggestion-item:hover, .suggestion-item[aria-selected="true"] { background-color: var(--color-primary-subtle); } .suggestion-item mark { background: transparent; color: var(--color-primary); font-weight: 600; padding: 0; } .suggestion-category { font-size: var(--text-xs); color: var(--color-text-muted); flex-shrink: 0; } .suggestion-empty { padding: var(--space-4); color: var(--color-text-secondary); font-size: var(--text-sm); text-align: center; } /* --------------------------------------------------------------------------- Content sections --------------------------------------------------------------------------- */ .content-section { margin-top: var(--space-8); } @media (min-width: 768px) { .content-section { margin-top: var(--space-10); } } .section-heading { font-size: var(--text-2xl); font-weight: 600; margin-bottom: var(--space-5); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-divider); } /* Formula block */ .formula-block { background-color: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); overflow-x: auto; margin-bottom: var(--space-4); } .formula-text { font-family: var(--font-mono); font-size: var(--text-md); color: var(--color-text); white-space: pre; line-height: 1.6; } .formula-legend { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-secondary); } .formula-legend dt { font-weight: 600; display: inline; } .formula-legend dd { display: inline; margin-left: var(--space-1); } .formula-legend dd::after { content: ";\A"; white-space: pre; } /* Examples card */ .example-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-4); } .example-card-header { background-color: var(--color-surface-muted); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); font-weight: 600; border-bottom: 1px solid var(--color-border); } .example-card-body { padding: var(--space-4); } .example-io-table { width: 100%; font-size: var(--text-sm); border-collapse: collapse; margin-bottom: var(--space-3); } .example-io-table td { padding: var(--space-1) var(--space-2); vertical-align: top; } .example-io-table td:first-child { color: var(--color-text-secondary); width: 40%; } .example-io-table .result-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--color-success); } .btn-use-example { font-size: var(--text-sm); color: var(--color-primary); background: transparent; border: 1px solid var(--color-primary); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); cursor: pointer; transition: background-color var(--motion-fast) var(--easing-standard), color var(--motion-fast) var(--easing-standard); } .btn-use-example:hover { background-color: var(--color-primary); color: var(--color-on-primary); } .btn-use-example:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: var(--focus-ring-offset); } /* FAQ accordion */ .faq-accordion .accordion-button { font-size: var(--text-md); font-weight: 600; background-color: var(--color-surface); color: var(--color-text); min-height: 3rem; } .faq-accordion .accordion-button:not(.collapsed) { background-color: var(--color-surface-muted); color: var(--color-primary); box-shadow: none; } .faq-accordion .accordion-button::after { filter: none; } .faq-accordion .accordion-body { font-size: var(--text-md); color: var(--color-text-secondary); background-color: var(--color-surface); } .faq-accordion .accordion-item { border: 1px solid var(--color-border); border-radius: var(--radius-md) !important; margin-bottom: var(--space-2); overflow: hidden; } /* Related calculators */ .related-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .related-list-item a { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-decoration: none; color: var(--color-text); transition: border-color var(--motion-fast) var(--easing-standard), background-color var(--motion-fast) var(--easing-standard); } .related-list-item a:hover, .related-list-item a:focus-visible { border-color: var(--color-primary); background-color: var(--color-primary-subtle); color: var(--color-primary); } /* Calculator card (hub/home) */ .calc-card { display: block; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-decoration: none; color: var(--color-text); background-color: var(--color-surface); min-height: 5.5rem; /* 88px — even grid rows */ box-shadow: var(--elev-0); transition: border-color var(--motion-fast) var(--easing-standard), box-shadow var(--motion-fast) var(--easing-standard); } .calc-card:hover, .calc-card:focus-visible { border-color: var(--color-primary); box-shadow: var(--elev-1); color: var(--color-text); text-decoration: none; } .calc-card:active { background-color: var(--color-primary-subtle); } .calc-card-title { font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--space-1); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .calc-card-desc { font-size: var(--text-sm); color: var(--color-text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .calc-card-cat { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); } /* Category card */ .cat-card { display: block; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-decoration: none; color: var(--color-text); background-color: var(--color-surface); transition: border-color var(--motion-fast) var(--easing-standard); } .cat-card:hover, .cat-card:focus-visible { border-color: var(--color-primary); color: var(--color-text); text-decoration: none; } .cat-card-title { font-size: var(--text-xl); font-weight: 600; margin-bottom: var(--space-1); } .cat-card-count { font-size: var(--text-sm); color: var(--color-text-secondary); } .cat-card-desc { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); } /* --------------------------------------------------------------------------- Ad slots — CLS-safe Hard rule: reserve min-height in SSR before AdSense paints. First-viewport rule (calculator / home mobile): NEVER place an ad between H1 and the first input / search — after-calc is the earliest slot and sits below the calculator shell (outside the first-viewport budget). --------------------------------------------------------------------------- */ .ad-slot { width: 100%; background-color: var(--color-ad-slot-bg); border-radius: var(--radius-sm); margin-block: var(--space-6); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; position: relative; /* Contain layout so late ad iframe growth does not reflow siblings */ contain: layout; } .ad-slot-label { font-size: var(--text-xs); color: var(--color-ad-slot-label); letter-spacing: 0.02em; position: absolute; top: var(--space-2); left: var(--space-3); user-select: none; pointer-events: none; } /* Slot sizes — min-height reserves prevent CLS (see docs/design/04-patterns.md) */ .ad-slot-after-calc { min-height: 250px; } .ad-slot-in-content { min-height: 250px; } .ad-slot-sidebar { min-height: 600px; } .ad-slot-footer { min-height: 100px; } @media (min-width: 992px) { .ad-slot-after-calc { min-height: 90px; } .ad-slot-footer { min-height: 90px; } } /* --------------------------------------------------------------------------- Site Footer --------------------------------------------------------------------------- */ .site-footer { background-color: var(--color-surface-muted); border-top: 1px solid var(--color-border); padding-block: var(--space-10); } .footer-brand-blurb { font-size: var(--text-sm); color: var(--color-text-secondary); max-width: 22rem; margin-bottom: var(--space-6); } .footer-heading { font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: var(--space-3); } .footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .footer-links a { font-size: var(--text-sm); color: var(--color-text-secondary); text-decoration: none; } .footer-links a:hover { color: var(--color-primary); text-decoration: underline; } .footer-copy { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-muted); } /* --------------------------------------------------------------------------- Home page --------------------------------------------------------------------------- */ .home-hero { padding-block: var(--space-10) var(--space-8); } .home-hero__grid { display: grid; gap: var(--space-8); align-items: center; } @media (min-width: 992px) { .home-hero__grid { grid-template-columns: 1fr minmax(17rem, 20rem); gap: var(--space-10); } } .home-hero__copy { text-align: center; } @media (min-width: 992px) { .home-hero__copy { text-align: left; } } .home-hero h1 { font-size: var(--text-3xl); font-weight: 700; margin-bottom: var(--space-3); } @media (min-width: 768px) { .home-hero h1 { font-size: var(--text-4xl); } } .home-hero .lead { font-size: var(--text-lg); color: var(--color-text-secondary); margin-bottom: var(--space-6); } .home-search { max-width: 36rem; margin-inline: auto; margin-bottom: var(--space-6); } @media (min-width: 992px) { .home-search { margin-inline: 0; } } .home-cat-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); } @media (min-width: 992px) { .home-cat-links { justify-content: flex-start; } } .home-hero__calc { max-width: 20rem; margin-inline: auto; width: 100%; } /* Quick calculator widget (homepage hero) */ .quick-calc { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--elev-1); padding: var(--space-4); outline: none; } .quick-calc:focus-visible { box-shadow: var(--elev-1), 0 0 0 2px var(--color-focus-ring); } .quick-calc__display-wrap { background: var(--color-surface-sunken); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); min-height: 3rem; display: flex; align-items: center; justify-content: flex-end; } .quick-calc__display { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 600; color: var(--color-text); text-align: right; word-break: break-all; line-height: 1.2; } .quick-calc__keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); } .quick-calc__key { appearance: none; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-muted); color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-lg); font-weight: 500; line-height: 1; min-height: 2.75rem; padding: var(--space-2); cursor: pointer; transition: background-color var(--motion-fast) var(--easing-standard), border-color var(--motion-fast) var(--easing-standard); } .quick-calc__key:hover { background: var(--color-primary-subtle); border-color: var(--color-border-strong); } .quick-calc__key:active { background: var(--color-surface-sunken); } .quick-calc__key:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 1px; } .quick-calc__key--fn { color: var(--color-text-secondary); font-size: var(--text-md); } .quick-calc__key--op { background: var(--color-primary-subtle); color: var(--color-primary); font-size: var(--text-xl); font-weight: 600; } .quick-calc__key--op:hover { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); } .quick-calc__key--eq { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); font-size: var(--text-xl); font-weight: 600; } .quick-calc__key--eq:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); } .quick-calc__key--zero { grid-column: span 2; } .home-cat-link { font-size: var(--text-sm); color: var(--color-primary); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-3); text-decoration: none; transition: background-color var(--motion-fast) var(--easing-standard); } .home-cat-link:hover { background-color: var(--color-primary-subtle); } .home-section { margin-top: var(--space-10); } .home-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-divider); } .home-section-head .section-heading { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .home-why { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-5); } @media (min-width: 768px) { .home-why { grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-8); } } .home-why-item { padding: 0; } .home-why-title { font-size: var(--text-md); font-weight: 600; color: var(--color-text); margin-bottom: var(--space-1); } .home-why-text { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; line-height: 1.5; } .home-trust { margin-top: var(--space-8); font-size: var(--text-sm); color: var(--color-text-secondary); text-align: center; } /* --------------------------------------------------------------------------- Hub page --------------------------------------------------------------------------- */ .hub-intro { font-size: var(--text-md); color: var(--color-text-secondary); margin-bottom: var(--space-6); max-width: 44rem; } .subcategory-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); } .sub-chip { display: inline-flex; align-items: center; height: 1.75rem; /* 28px */ padding-inline: var(--space-3); background-color: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--color-text-secondary); text-decoration: none; transition: border-color var(--motion-fast) var(--easing-standard), color var(--motion-fast) var(--easing-standard); } .sub-chip:hover, .sub-chip.active { border-color: var(--color-primary); color: var(--color-primary); } /* --------------------------------------------------------------------------- Search results page --------------------------------------------------------------------------- */ .search-result-list { list-style: none; margin: 0; padding: 0; } .search-result-item { border-bottom: 1px solid var(--color-divider); padding-block: var(--space-4); } .search-result-item:last-child { border-bottom: none; } .search-result-title { font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--space-1); } .search-result-title a { color: var(--color-primary); text-decoration: none; } .search-result-title a:hover { text-decoration: underline; } .search-result-meta { font-size: var(--text-sm); color: var(--color-text-muted); } .search-empty { padding: var(--space-8); text-align: center; color: var(--color-text-secondary); } /* --------------------------------------------------------------------------- Static trust pages --------------------------------------------------------------------------- */ .static-prose { max-width: 40rem; } .static-prose h1 { margin-bottom: var(--space-5); } .static-prose h2 { margin-top: var(--space-8); } .static-prose p { line-height: 1.7; color: var(--color-text-secondary); } /* --------------------------------------------------------------------------- Intro / how-to --------------------------------------------------------------------------- */ .intro-section p { font-size: var(--text-md); color: var(--color-text-secondary); line-height: 1.7; } .howto-steps { counter-reset: step; list-style: none; padding: 0; margin: 0; } .howto-steps li { position: relative; padding-left: 2.25rem; margin-bottom: var(--space-4); counter-increment: step; } .howto-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 1.5rem; height: 1.5rem; background-color: var(--color-primary); color: var(--color-on-primary); border-radius: 50%; font-size: var(--text-xs); font-weight: 700; display: flex; align-items: center; justify-content: center; } /* --------------------------------------------------------------------------- Error pages --------------------------------------------------------------------------- */ .error-page { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-8); } .error-code { font-size: 5rem; font-weight: 700; color: var(--color-primary); line-height: 1; margin-bottom: var(--space-4); } .error-title { font-size: var(--text-2xl); font-weight: 600; margin-bottom: var(--space-3); } .error-body { font-size: var(--text-md); color: var(--color-text-secondary); margin-bottom: var(--space-6); max-width: 28rem; } /* --------------------------------------------------------------------------- Utilities --------------------------------------------------------------------------- */ .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } .surface-muted { background-color: var(--color-surface-muted); } .text-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .divider { border: none; border-top: 1px solid var(--color-divider); margin-block: var(--space-8); } .chip-tag { display: inline-flex; align-items: center; height: 1.75rem; padding-inline: var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm); background-color: var(--color-primary-subtle); color: var(--color-primary); } @media print { .site-header, .site-footer, .breadcrumb-nav, .sticky-cta-bar, .ad-slot, .example-chips, .calc-actions, .result-actions, .ui-result-actions, .skip-link { display: none !important; } .results-region { border: none; background: transparent; min-height: 0; } a[href]::after { content: none !important; } }