/* UK freelancer tools — shared styles */ /* * LOAD ORDER (every HTML ): * 1. themes.css → defines --c-* and --f-* tokens per theme * 2. style.css → this file (bridge + components) * 3. theme.js → applies data-theme to before first paint * 4. config.js → HMRC rates * 5. [tool].js → page calculator logic */ :root { /* ── Layout & spacing — not theme-dependent, keep as-is ── */ --space-unit: 8px; --max-content: 900px; --sidebar-width: 280px; /* ── Phase tag colours — static, no theme variant needed ── */ --color-tag-phase1: #dcfce7; --color-tag-phase2: #dbeafe; --color-tag-phase3: #f3e8ff; /* ── All colour/font tokens below are now driven by themes.css ── The bridge block beneath maps Cursor's --color-* names onto the --c-* tokens that themes.css defines. Do not add hardcoded hex values here — edit themes.css instead. */ } /* ── Theme bridge ─────────────────────────────────────────────── Maps this file's --color-* / --font-sans references onto the --c-* / --f-* tokens defined in themes.css. Covers all four themes so switching data-theme on flows through here into every component rule below. ─────────────────────────────────────────────────────────────── */ :root, [data-theme="professional"], [data-theme="fintech"], [data-theme="warm"], [data-theme="mono"] { --color-primary: var(--c-primary); --color-primary-dark: var(--c-primary-dark); --color-success: var(--c-success); --color-warning: var(--c-warning-border); --color-text: var(--c-text); --color-text-muted: var(--c-text-muted); --color-border: var(--c-border); --color-bg: var(--c-bg); --color-bg-subtle: var(--c-bg-sub); --color-error: var(--c-danger); --color-info-bg: var(--c-info-bg); --font-sans: var(--f-base); } *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; } body { margin: 0; font-family: var(--font-sans); font-weight: 400; line-height: 1.6; color: var(--color-text); background: var(--color-bg); min-height: 100vh; display: flex; flex-direction: column; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } main { flex: 1; width: 100%; max-width: var(--max-content); margin: 0 auto; padding: calc(var(--space-unit) * 4) calc(var(--space-unit) * 3); } main.main--tool-wide { max-width: calc(var(--max-content) + var(--sidebar-width) + 24px); padding: calc(var(--space-unit) * 4) calc(var(--space-unit) * 3); } a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--color-primary-dark); } h1, h2, h3 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; } h1 { font-size: 1.75rem; margin: 0 0 calc(var(--space-unit) * 2); } h2 { font-size: 1.25rem; margin: 0 0 calc(var(--space-unit) * 2); } h3 { font-size: 1.0625rem; margin: 0 0 var(--space-unit); } p { margin: 0 0 calc(var(--space-unit) * 2); } .footer-inner { max-width: var(--max-content); margin: 0 auto; padding: calc(var(--space-unit) * 2); } .site-header { width: 100%; border-bottom: 1px solid var(--color-border); } .header-inner { width: 100%; max-width: calc(var(--max-content) + var(--sidebar-width) + 24px); margin: 0 auto; padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 3); display: flex; align-items: center; justify-content: space-between; gap: calc(var(--space-unit) * 3); } .site-logo { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; } .site-logo-svg { display: block; height: 34px; width: auto; } .site-nav { display: flex; align-items: center; gap: calc(var(--space-unit) * 3); flex-wrap: wrap; margin-left: auto; } .site-nav a { font-weight: 400; text-decoration: none; } .site-nav a:hover { text-decoration: underline; } .nav-disabled { color: var(--color-text-muted); cursor: default; } .site-footer { border-top: 1px solid var(--color-border); margin-top: auto; } .footer-inner { font-size: 13px; color: var(--color-text-muted); } .lede { color: var(--color-text-muted); font-size: 1.0625rem; margin-bottom: calc(var(--space-unit) * 4); } .tool-grid { display: grid; grid-template-columns: 1fr; gap: calc(var(--space-unit) * 3); } @media (min-width: 640px) { .tool-grid { grid-template-columns: 1fr 1fr; } } .tool-card { border: 1px solid var(--color-border); border-radius: 16px; padding: calc(var(--space-unit) * 3); background: var(--color-bg); } .tool-card--muted { opacity: 0.65; } .tool-card-icon { font-size: 1.75rem; line-height: 1; margin-bottom: var(--space-unit); } .tool-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-unit); margin-bottom: var(--space-unit); } .badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; } .badge--free { background: var(--color-tag-phase1); color: #166534; } .badge--soon { background: var(--color-bg-subtle); color: var(--color-text-muted); border: 1px solid var(--color-border); } .tool-card p { font-size: 0.9375rem; color: var(--color-text-muted); margin-bottom: calc(var(--space-unit) * 2); } .tool-card-link { font-weight: 600; text-decoration: none; } .tool-card-link:hover { text-decoration: underline; } .trust-row { display: flex; flex-direction: column; gap: calc(var(--space-unit) * 2); margin-top: calc(var(--space-unit) * 6); padding-top: calc(var(--space-unit) * 4); border-top: 1px solid var(--color-border); font-size: 0.9375rem; color: var(--color-text-muted); } @media (min-width: 640px) { .trust-row { flex-direction: row; justify-content: space-between; gap: calc(var(--space-unit) * 3); } } /* Forms */ .field { margin-bottom: calc(var(--space-unit) * 2); } .field label { display: block; font-size: 0.9375rem; font-weight: 600; margin-bottom: var(--space-unit); color: var(--color-text); } .field input[type="checkbox"] { width: auto; height: auto; margin-right: 8px; vertical-align: middle; } .field label[for="frs-low-goods"] { display: inline; font-weight: 400; } .input, .select { width: 100%; height: 48px; padding: 0 16px; font: inherit; color: var(--color-text); border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg); } .input:focus, .select:focus { outline: none; border: 2px solid var(--color-primary); } .input--error { border-color: var(--color-error); } .field-error { margin-top: var(--space-unit); font-size: 13px; color: var(--color-error); } .btn-primary { display: inline-block; padding: 12px 24px; font: inherit; font-weight: 600; color: #fff; background: var(--color-primary); border: none; border-radius: 6px; cursor: pointer; text-decoration: none; } .btn-primary:hover { background: var(--color-primary-dark); color: #fff; } .btn-year { padding: 10px 20px; font: inherit; font-weight: 600; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-bg); color: var(--color-text); cursor: pointer; } .btn-year[aria-pressed="true"] { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .year-toggle { display: flex; gap: var(--space-unit); flex-wrap: wrap; align-items: center; margin-bottom: calc(var(--space-unit) * 3); } .year-active-label { font-size: 0.9375rem; color: var(--color-text-muted); width: 100%; } @media (min-width: 480px) { .year-active-label { width: auto; margin-left: auto; } } .prior-year-bar { background: var(--color-info-bg); border: 1px solid #fde047; border-radius: 8px; padding: calc(var(--space-unit) * 2); font-size: 0.9375rem; color: var(--color-text-muted); margin-bottom: calc(var(--space-unit) * 3); } /* VAT tabs — CSS-only with radios */ .vat-tabs { position: relative; } .tab-state { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .tab-state:focus + .tab-list .tab-btn:focus, .tab-list .tab-btn:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; } .tab-list { display: flex; flex-wrap: wrap; gap: var(--space-unit); margin-bottom: calc(var(--space-unit) * 3); } .tab-btn { display: inline-block; padding: 10px 16px; font-weight: 600; font-size: 0.9375rem; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-bg-subtle); color: var(--color-text); cursor: pointer; text-decoration: none; } #vat-mode-add:checked ~ .tab-list label[for="vat-mode-add"], #vat-mode-remove:checked ~ .tab-list label[for="vat-mode-remove"], #vat-mode-frs:checked ~ .tab-list label[for="vat-mode-frs"] { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .tab-panel { display: none; } #vat-mode-add:checked ~ #panel-add, #vat-mode-remove:checked ~ #panel-remove, #vat-mode-frs:checked ~ #panel-frs { display: block; } /* Mileage calculator tabs — same pattern */ #mile-mode-car:checked ~ .tab-list label[for="mile-mode-car"], #mile-mode-moto:checked ~ .tab-list label[for="mile-mode-moto"], #mile-mode-bike:checked ~ .tab-list label[for="mile-mode-bike"] { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } #mile-mode-car:checked ~ #panel-car, #mile-mode-moto:checked ~ #panel-moto, #mile-mode-bike:checked ~ #panel-bike { display: block; } .annual-results-panel { margin-top: calc(var(--space-unit) * 2); } /* Tool layout: form + results */ .tool-layout { display: flex; flex-direction: column; gap: calc(var(--space-unit) * 3); } @media (min-width: 640px) { .tool-layout { flex-direction: row; align-items: flex-start; } .tool-layout__main { flex: 1; min-width: 0; } .tool-layout__aside { width: var(--sidebar-width); flex-shrink: 0; } } .result-panel { background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: 16px; padding: calc(var(--space-unit) * 3); } .result-panel h2 { font-size: 1rem; margin-bottom: calc(var(--space-unit) * 2); } .result-row { display: flex; justify-content: space-between; align-items: baseline; gap: calc(var(--space-unit) * 2); padding: var(--space-unit) 0; border-bottom: 1px solid var(--color-border); font-size: 0.9375rem; } .result-row:last-child { border-bottom: none; } .result-row__val { font-weight: 600; font-variant-numeric: tabular-nums; } .result-placeholder { color: var(--color-text-muted); font-weight: 400; } .result-note { margin-top: calc(var(--space-unit) * 2); font-size: 13px; color: var(--color-text-muted); } .result-note--warn { color: var(--color-warning); } .callout { background: var(--color-info-bg); border: 1px solid #fde047; border-radius: 8px; padding: calc(var(--space-unit) * 2); font-size: 13px; color: var(--color-text-muted); margin-top: calc(var(--space-unit) * 2); } .callout--warn-left { border-left: 3px solid var(--color-warning); } .disclaimer { background: var(--color-bg-subtle); border-left: 3px solid var(--color-warning); padding: calc(var(--space-unit) * 2); font-size: 13px; color: var(--color-text-muted); margin-top: calc(var(--space-unit) * 4); } .affiliate-box { margin-top: calc(var(--space-unit) * 3); padding: calc(var(--space-unit) * 3); background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: 16px; font-size: 0.9375rem; color: var(--color-text-muted); } .affiliate-box p { margin-bottom: calc(var(--space-unit) * 2); } .seo-faq { margin-top: calc(var(--space-unit) * 6); padding-top: calc(var(--space-unit) * 4); border-top: 1px solid var(--color-border); } .seo-faq details { border-bottom: 1px solid var(--color-border); padding: calc(var(--space-unit) * 2) 0; } .seo-faq summary { font-weight: 600; cursor: pointer; list-style: none; } .seo-faq summary::-webkit-details-marker { display: none; } .seo-faq summary::before { content: "+ "; color: var(--color-primary); } .seo-faq details[open] summary::before { content: "− "; } .seo-faq details p { margin: calc(var(--space-unit) * 2) 0 0; font-size: 0.9375rem; color: var(--color-text-muted); } details.reg-details { margin-top: calc(var(--space-unit) * 4); border: 1px solid var(--color-border); border-radius: 8px; padding: calc(var(--space-unit) * 2); background: var(--color-bg); } details.reg-details summary { font-weight: 600; cursor: pointer; } details.reg-details .reg-content { margin-top: calc(var(--space-unit) * 2); font-size: 0.9375rem; color: var(--color-text); } details.reg-details .reg-content p { margin-bottom: calc(var(--space-unit) * 2); } .fr-intro { font-size: 0.9375rem; color: var(--color-text-muted); margin-bottom: calc(var(--space-unit) * 3); } .stub-lede { color: var(--color-text-muted); max-width: 36rem; } /* ── Info page content spacing ───────────────────── */ /* Consistent spacing above and below all callout boxes */ .callout { margin-top: 24px; margin-bottom: 24px; } /* Tables on info pages */ .content-table { width: 100%; border-collapse: collapse; margin-top: 16px; margin-bottom: 8px; font-size: 0.9375rem; } .content-table th { text-align: left; padding: 10px 12px; font-weight: 600; font-size: 0.875rem; color: var(--color-text-muted); border-bottom: 2px solid var(--color-border); } .content-table td { padding: 10px 12px; border-bottom: 1px solid var(--color-border); vertical-align: top; line-height: 1.5; } .content-table tr:last-child td { border-bottom: none; } /* Note beneath tables */ .table-note { font-size: 13px; color: var(--color-text-muted); margin-top: 8px; margin-bottom: 24px; } /* Spacing between h2 sections */ main h2 { margin-top: 40px; margin-bottom: 16px; } main h2:first-of-type { margin-top: 24px; } main h3 { margin-top: 24px; margin-bottom: 12px; } /* Consistent paragraph spacing in content pages */ main p + p { margin-top: 16px; } /* Inline CTA spacing */ main p + .callout, main ul + .callout, main h3 + .callout { margin-top: 20px; } /* List spacing on content pages */ main ul { padding-left: 20px; margin-top: 12px; margin-bottom: 16px; } main ul li { padding: 4px 0; line-height: 1.6; } /* Invoice generator */ .invoice-form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: calc(var(--space-unit) * 3); } .btn-secondary { display: inline-block; padding: 12px 24px; font: inherit; font-weight: 600; color: var(--color-text); background: var(--color-bg); border: 2px solid var(--color-border); border-radius: 6px; cursor: pointer; } .btn-secondary:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); } .btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; } .field.has-error .input, .field.has-error .select, .field.has-error .input--textarea { border-color: var(--color-error); } textarea.input, .input--textarea { min-height: 5.5rem; height: auto; padding-top: 12px; padding-bottom: 12px; resize: vertical; } .invoice-preview-placeholder { text-align: center; color: var(--color-text-muted); font-size: 0.9375rem; margin: 0; padding: calc(var(--space-unit) * 4) calc(var(--space-unit) * 2); } .invoice-preview-panel { min-height: 220px; } /* Date input calendar icon — visible on dark theme */ input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.6; cursor: pointer; } input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; } /* Invoice form section headings */ .invoice-section-heading { font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-top: 32px; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border); } .invoice-section-heading:first-of-type { margin-top: 0; } /* Field hint text — sits close beneath the input */ .field-hint { margin-top: 4px; margin-bottom: 0; font-size: 13px; color: var(--color-text-muted); } /* Invoice — browser storage notice */ .field-storage-notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding: 10px 14px; background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: 8px; font-size: 12px; color: var(--color-text-muted); line-height: 1.5; } .btn-clear-storage { font-family: var(--font-sans); font-size: 12px; font-weight: 500; color: var(--color-primary); background: none; border: none; cursor: pointer; padding: 0; white-space: nowrap; text-decoration: underline; text-underline-offset: 2px; } .btn-clear-storage:hover { color: var(--color-primary-dark); }