/* * my-holiday-budget.co.uk * * This page never loads site.css, so every token it needs is declared here * rather than assumed. It also loads the Tailwind Play CDN, which injects its * own stylesheet into at runtime, after this file. At equal * specificity that stylesheet wins, so the markup has had its Tailwind * utility classes stripped rather than fought with higher specificity. * * The idea: this is a travellers cheque and the paying-in card from a * bureau de change, not a booking site. The masthead is a cheque's guilloche * printing under an accent wash. Figures are set the way a cheque sets an * amount: large, in figures, tabular. The form is numbered fields on a ruled * counterfoil rather than rounded input boxes, and the FAQ and guide read as * the leaflet tucked in the back of the cheque book, not as a stack of cards. * * What it replaces: a hot-pink SaaS gradient (a "result-card" the colour of a * loyalty app, none of it related to the site's actual teal), an h1 that was * just the product name, and fourteen instances of the same white rounded * card, whether it held a form field, a stat or a question. */ /* ---------------------------------------------------------------- tokens */ /* * On `html` rather than `:root`. The two select the same element but `:root` is * the more specific of them, so site.css keeps every one of these wherever it * is loaded, and these only take effect on the pages where it is not. */ html { --paper: #FBFAF8; --card: #FFFFFF; --ink: #1A1D21; --ink-soft: #454C54; --muted: #6B747E; --rule: #E3E0DA; --rule-strong: #CFCBC3; --accent: #1D6280; --accent-deep: #154A61; --accent-tint: #EAF2F5; --accent-ink: #FFFFFF; --font-display: 'Bitter', Georgia, serif; --font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-figure: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace; /* * The house scale is a 1.2 ratio topping out at 2.488rem. Two steps are * added above it rather than the ratio changed, so the total is the only * thing on the page set outside the voice everything else is set in. */ --step-0: 1rem; --step-1: 1.2rem; --step-2: 1.44rem; --step-3: 1.728rem; --step-4: 2.074rem; --step-5: 2.488rem; --step-6: 3.2rem; --step-7: 4.4rem; --radius-sm: 6px; --measure: 66ch; --page: 68rem; --lift: 0 1px 2px rgba(26, 29, 33, 0.05), 0 1px 1px rgba(26, 29, 33, 0.04); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --paper: #14161A; --card: #1B1F24; --ink: #E8EAEC; --ink-soft: #BFC5CC; --muted: #8C959F; --rule: #2A2F36; --rule-strong: #3A4149; --accent-tint: #1B2830; } /* * #1D6280 on the dark card is under 4.5:1, so anything setting the * accent as text (rather than as a filled background) lifts to a paler * tint that still reads as the same teal. */ :root:not([data-theme='light']) .section-mark, :root:not([data-theme='light']) .field-num, :root:not([data-theme='light']) .answer-figure { color: #8FC4DB; } } /* The toggle has to win in both directions, not only towards dark. */ :root[data-theme='dark'] { --paper: #14161A; --card: #1B1F24; --ink: #E8EAEC; --ink-soft: #BFC5CC; --muted: #8C959F; --rule: #2A2F36; --rule-strong: #3A4149; --accent-tint: #1B2830; } :root[data-theme='dark'] .section-mark, :root[data-theme='dark'] .field-num, :root[data-theme='dark'] .answer-figure { color: #8FC4DB; } * { box-sizing: border-box; } body { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.5; margin: 0; } a { color: var(--accent); } /* * Small caps with tracking for anything that names a field or a section * rather than being read as prose: the one typographic mannerism the page * allows itself, standing in for the bold 14px sans the old design used * everywhere. */ .section-mark, .masthead-kicker, .field-name, .answer-label, .sheet-form .form-legend { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-family: var(--font-body); } /* ------------------------------------------------------------------ nav */ .site-nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; padding: 0.85rem clamp(1rem, 4vw, 2rem); background: var(--card); border-bottom: 1px solid var(--rule); } .nav-brand { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); text-decoration: none; } .nav-links { display: flex; flex-wrap: wrap; gap: 0.25rem; } .nav-links a { padding: 0.4rem 0.85rem; border-radius: 999px; color: var(--ink-soft); font-weight: 600; font-size: 0.9rem; text-decoration: none; } .nav-links a:hover, .nav-links a[aria-current='page'] { background: var(--accent); color: var(--accent-ink); } .site-nav a:focus-visible, .sheet a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* -------------------------------------------------------------- masthead */ /* * Full bleed, the way a cheque's guilloche printing runs to the edge of the * paper. Multiplied over the accent rather than laid over it: multiply can * only darken, so white type here is never worse than white on the flat * accent, whatever the image is doing underneath. */ .masthead { background-color: var(--accent); background-image: url('/img/cheque-guilloche.webp'); background-size: cover; background-position: center; background-blend-mode: multiply; color: #fff; /* A cheque is a shallow landscape document, all width and no height. */ padding-block: clamp(2rem, 5vw, 3.25rem) clamp(1.5rem, 3.5vw, 2.25rem); border-bottom: 4px solid var(--accent-deep); } .masthead-inner { max-width: var(--page); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); } .masthead-kicker { display: block; color: #fff; opacity: 0.85; margin-bottom: 1.25rem; } .masthead h1 { font-family: var(--font-display); font-size: clamp(2.1rem, 5.5vw, var(--step-6)); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; max-width: 18ch; color: #fff; margin: 0; } .masthead-standfirst { margin-top: 1.1rem; font-size: var(--step-1); line-height: 1.5; max-width: 48ch; color: #fff; opacity: 0.92; } /* ------------------------------------------------------------- the sheet */ /* * An editorial grid rather than one centred column: prose and the tool run * in a real measure on the right, the left margin carries the section mark * the way a paying-in book letters its counterfoils. Below 60rem it * collapses and the mark sits above its section. */ .sheet { max-width: var(--page); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); padding-block: clamp(2rem, 5vw, 3.5rem) 4rem; } .sheet-grid { display: grid; gap: clamp(1rem, 3vw, 2.5rem); } @media (min-width: 60rem) { .sheet-grid { grid-template-columns: 7rem minmax(0, 1fr); align-items: start; } } .sheet-grid + .sheet-grid { margin-top: clamp(2rem, 5vw, 3.5rem); padding-top: clamp(2rem, 5vw, 3.5rem); border-top: 1px solid var(--rule); } .section-mark { color: var(--accent); padding-top: 0.5rem; margin: 0; } @media (min-width: 60rem) { .section-mark { text-align: right; border-top: 2px solid var(--accent); } } /* -------------------------------------------------------------- the form */ .sheet-form { border: 1px solid var(--rule-strong); border-top: 4px solid var(--accent); background: var(--card); padding: clamp(1.25rem, 4vw, 2.25rem); margin: 0; } .sheet-form .form-legend { color: var(--accent); margin: 0 0 1.5rem; display: block; } .fields { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; } @media (min-width: 46rem) { .fields { grid-template-columns: 1fr 1fr; } } .fields > li { display: grid; grid-template-columns: 1.7rem 1fr; column-gap: 0.6rem; align-items: baseline; margin: 0; } .field-num { font-family: var(--font-figure); font-size: 0.8rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; } .field-body { min-width: 0; } .field-name { display: block; color: var(--ink-soft); margin-bottom: 0.4rem; } /* * A ruled line standing in for a boxed input, the way an amount is written * on a rule rather than boxed on a form. The rule thickens and takes the * accent on focus as one signal; the outline stays regardless, because a * colour change alone is not a focus indicator to anyone who cannot see it. */ .sheet-form input[type='number'], .sheet-form select { width: 100%; border: 0; border-bottom: 2px solid var(--rule-strong); border-radius: 0; background: transparent; padding: 0.35rem 0 0.45rem; font-family: var(--font-figure); font-size: 1.1rem; font-variant-numeric: tabular-nums; color: var(--ink); appearance: none; box-shadow: none; } .sheet-form select { font-family: var(--font-body); font-variant-numeric: normal; background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%); background-position: right 0.4rem top 55%, right 0.1rem top 55%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 1.25rem; } .sheet-form input[type='number']:hover, .sheet-form select:hover { border-bottom-color: var(--ink-soft); } .sheet-form input[type='number']:focus-visible, .sheet-form select:focus-visible { border-bottom-color: var(--accent); outline: 3px solid var(--accent); outline-offset: 3px; } .sheet-form input::placeholder { /* --muted is #6B747E, 4.75:1 on white: a readable hint, not a ghost. */ color: var(--muted); font-size: 0.9rem; font-family: var(--font-body); } .field-hint { display: block; margin-top: 0.4rem; font-size: 0.82rem; color: var(--muted); } .button-group { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .btn-primary { background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: 0; padding: 0.95rem 1.75rem; font-family: inherit; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; } .btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); } .btn-secondary, .btn-tertiary { background: transparent; border: 1px solid var(--rule-strong); border-radius: 0; padding: 0.95rem 1.25rem; font-family: inherit; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); cursor: pointer; } .btn-secondary:hover, .btn-tertiary:hover { border-color: var(--accent); color: var(--accent); background: transparent; } .btn-block { width: 100%; margin-top: 1.5rem; } /* ------------------------------------------------------------ the answer */ /* * The reason anyone opened the page, previously a hot-pink card the size of * a stat badge either side of it. The total is now the largest thing on the * page, printed like the amount on a cheque: a figure, tabular, in words * beneath it rather than the other way round. */ .results-section { margin-top: 2.5rem; } .no-results { padding: 2.5rem 0; color: var(--muted); max-width: 34ch; } .no-results p:first-child { color: var(--ink-soft); font-weight: 600; } .cheque-amount { display: block; border: 1px solid var(--rule-strong); border-left: 6px solid var(--accent); background: var(--card); padding: clamp(1.5rem, 4vw, 2.25rem); margin: 0; } .answer-label { display: block; color: var(--muted); margin-bottom: 0.5rem; } .answer-figure { display: block; font-family: var(--font-display); font-size: clamp(2.6rem, 9vw, var(--step-7)); font-weight: 700; line-height: 0.98; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--accent); } /* * Per person and per day: the two smaller denominations on the cheque stub, * set as a ruled pair rather than the two identical "stat badges" the old * design gave them. */ .denominations { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .denominations dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.3rem; } .denominations dd { margin: 0; font-family: var(--font-figure); font-size: var(--step-3); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); } /* * The category breakdown, set as a ruled ledger rather than striped table * rows, so it reads as the counterfoil rather than a database export. */ .breakdown-table { margin-top: 2rem; overflow-x: auto; } .breakdown-table table { width: 100%; border-collapse: collapse; } .breakdown-table th { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 0 0 0.6rem; border-bottom: 2px solid var(--ink); } .breakdown-table th:last-child, .breakdown-table td:last-child { text-align: right; } .breakdown-table td { padding: 0.85rem 0; border-bottom: 1px solid var(--rule); font-family: var(--font-figure); font-variant-numeric: tabular-nums; font-size: 0.95rem; } .breakdown-table td:first-child { font-family: var(--font-body); } .chart-container { margin-top: 2rem; border: 1px solid var(--rule); background: var(--card); padding: 1rem; } /* ---------------------------------------------------------- the reference */ /* * Everything under the tool is reference material, set as reference * material: one measure, rules between items, no cards. The old page gave * the guide's twelve sections and each FAQ answer an identical rounded box, * which made an introduction and a footnote look like the same kind of * thing. */ .sheet h2 { font-family: var(--font-display); font-size: var(--step-3); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 0.75rem; max-width: 32ch; } .sheet h3 { font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; margin-top: 1.5rem; margin-bottom: 0.35rem; } .sheet p, .sheet li { max-width: var(--measure); color: var(--ink-soft); } .sheet ul { padding-left: 1.25rem; } .sheet ul li { margin-bottom: 0.5rem; } .faq-section + .faq-section { margin-top: 2.5rem; } .faq-item { border-top: 1px solid var(--rule); padding-block: 1.1rem; margin: 0; } .faq-section .faq-item:last-child { border-bottom: 1px solid var(--rule); } .faq-item h3 { margin-top: 0; font-size: var(--step-0); font-weight: 700; } .faq-item p { margin-top: 0.3rem; } /* --------------------------------------------------------------- footer */ .site-footer { max-width: var(--page); margin: 2.5rem auto 0; padding: 1.5rem clamp(1rem, 4vw, 2rem) 2.5rem; text-align: center; color: var(--muted); font-size: 0.9rem; } .site-footer a { color: var(--ink-soft); } /* ------------------------------------------------------------------ print */ @media print { .site-nav, .button-group, .chart-container, .book-plug { display: none !important; } .masthead { background: none; color: #000; border-bottom: 2px solid #000; } .masthead h1, .masthead-standfirst, .masthead-kicker { color: #000; opacity: 1; } .answer-figure { color: #000; } } /* ------------------------------------------------- the rest of the pages */ /* * The homepage was rebuilt and every other page was left on the old pink * Tailwind cards, which is the same split this site already had and the whole * reason the estate reads as a template. Every page now carries the band. * * It is shorter here and carries no standfirst, because on a guide or an * article the first paragraph is the standfirst and setting two would be * saying the same thing twice. */ .masthead-slim { padding-block: clamp(1.75rem, 4.5vw, 2.75rem) clamp(1.5rem, 3.5vw, 2.25rem); } .masthead-slim h1 { font-size: clamp(1.7rem, 4.2vw, var(--step-5)); max-width: 24ch; } /* * Long-form pages are a single column of prose, so they get a measure and * rules. `.reference` replaces the white rounded card with the shadow that * every one of these pages wrapped its body in. */ .reference { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; color: var(--ink-soft); } .reference > * + * { margin-top: 1rem; } .reference h2 { font-family: var(--font-display); font-size: var(--step-3); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid var(--rule); color: var(--ink); max-width: 32ch; } .reference h3 { font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; margin-top: 1.5rem; color: var(--ink); } .reference p, .reference li { max-width: 66ch; } /* * A placeholder is a hint, not a value. * * The fields on these pages were enlarged so the figure people type is legible * at the scale of the answer. At that size a placeholder set in the input's own * colour and weight reads as a filled field, and somebody arrives at a form that * looks already answered. Every field here carries a visible label, so the * placeholder is free to recede. */ input::placeholder, textarea::placeholder { color: color-mix(in srgb, currentColor 38%, transparent); font-size: 0.66em; font-weight: 400; letter-spacing: 0.04em; opacity: 1; } /* placeholder specificity */ .field-body input::placeholder, .field-body textarea::placeholder, .sheet-form input::placeholder, .sheet-form textarea::placeholder, input[type="text"]::placeholder, input[type="number"]::placeholder, input[type="search"]::placeholder { color: color-mix(in srgb, currentColor 38%, transparent); font-size: 0.66em; font-weight: 400; letter-spacing: 0.04em; opacity: 1; } /* --------------------------------------------------- validation and status */ /* * The estate used alert() for every validation failure. A modal is unreadable * on a phone, says nothing about which field is wrong, and blocks the page for * someone working at speed, so the message now sits under the field it belongs * to. The red is checked against this site's own paper rather than reused from * another site. */ :root { --form-error: #A3231B; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --form-error: #FFB4AB; } } :root[data-theme='dark'] { --form-error: #FFB4AB; } .form-error { margin: 0.4rem 0 0; font-size: 0.9rem; font-weight: 600; line-height: 1.4; color: var(--form-error); } .form-error[hidden] { display: none; } [aria-invalid='true'] { border-color: var(--form-error); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }