/* Quality of Living Calculator — custom CSS beyond Tailwind. */ /* Hide elements until Alpine initializes — prevents FOUC. */ [x-cloak] { display: none !important; } /* Hero skyline art — the PNG ships with a cream rectangle (#FAF5ED) slightly darker than the page (#FDFAF4). brightness(1.04) pushes the PNG's cream above the page color on every channel; `darken` blend then picks the lighter page color where the bgs differ, so the rectangle vanishes. Linework is far darker than either bg and stays visible. */ .hero-art { filter: brightness(1.04); mix-blend-mode: darken; } /* Hero H2 — `pretty` (not `balance`): avoids orphaned last-line widows like "between two cities." alone, but doesn't force perfect symmetry the way `balance` does. Reads more natural for body-like subheads. */ .hero-h2 { text-wrap: pretty; } /* Results card — gives the results pane explicit visual structure so its content doesn't feel attached to the page edges. Colors are inline rather than via Tailwind utilities because the theme-paper override collapses .bg-slate-900/30 + .border-slate-700/40 to values too close to the page bg to be visible on mobile in daylight. */ .results-card { background-color: oklch(0.955 0.016 80); border: 1px solid oklch(0.82 0.014 80); border-radius: 0.5rem; padding: 1rem; } @media (min-width: 768px) { .results-card { padding: 1.5rem; } } /* =========================================================================== Theme tokens — warm-paper editorial light theme. All colors are OKLCH; neutrals tinted toward 80deg (warm) at low chroma. Accent is iron teal. Gain/loss stay semantic for row-level deltas. ========================================================================= */ :root { --surface-page: oklch(0.985 0.008 80); --surface-raised: oklch(0.965 0.010 80); --surface-sunken: oklch(0.945 0.012 80); --ink-primary: oklch(0.22 0.015 80); --ink-secondary: oklch(0.42 0.012 80); --ink-tertiary: oklch(0.58 0.010 80); --rule: oklch(0.88 0.012 80); --accent: oklch(0.45 0.08 200); --accent-soft: oklch(0.93 0.04 200); --accent-ink: oklch(0.32 0.08 200); /* Semantic gain/loss for row deltas (Take-home, Breakdown). */ --gain: oklch(0.48 0.14 150); --gain-soft: oklch(0.93 0.05 150); --loss: oklch(0.50 0.17 28); --loss-soft: oklch(0.94 0.05 28); --warn: oklch(0.58 0.13 70); --warn-soft: oklch(0.94 0.06 70); } body { font-family: 'Geist', system-ui, -apple-system, sans-serif; font-feature-settings: 'ss01', 'cv11'; } .font-display { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; font-weight: 600; letter-spacing: -0.01em; } .tabular { font-variant-numeric: tabular-nums; } /* =========================================================================== Theme override layer. Tailwind utilities still mark up the document; this layer remaps the ones we use to the paper palette without touching markup. Specificity boost via .theme-paper on . ========================================================================= */ body.theme-paper { background: var(--surface-page); color: var(--ink-primary); } /* Text — collapse the slate ramp into three ink tiers */ .theme-paper .text-white, .theme-paper .text-slate-100, .theme-paper .text-slate-200 { color: var(--ink-primary); } .theme-paper .text-slate-300 { color: var(--ink-secondary); } .theme-paper .text-slate-400 { color: var(--ink-secondary); } .theme-paper .text-slate-500 { color: var(--ink-tertiary); } .theme-paper .text-slate-600 { color: var(--ink-tertiary); } /* Surfaces — page / raised / sunken. Note: body itself takes its bg from the body.theme-paper rule above; these descendant selectors catch nested usages (e.g. take-home cards, breakdown total row). */ .theme-paper .bg-slate-900 { background-color: var(--surface-page); } .theme-paper .bg-slate-900\/30 { background-color: var(--surface-sunken); } .theme-paper .bg-slate-900\/50 { background-color: var(--surface-raised); } .theme-paper .bg-slate-800 { background-color: var(--surface-raised); } .theme-paper .bg-slate-800\/30 { background-color: transparent; } .theme-paper .bg-slate-800\/50, .theme-paper .bg-slate-800\/60 { background-color: var(--surface-raised); } .theme-paper .bg-slate-700, .theme-paper .bg-slate-700\/40, .theme-paper .bg-slate-700\/50 { background-color: var(--surface-sunken); } .theme-paper .hover\:bg-slate-600:hover { background-color: var(--rule); } /* Base bg-slate-800 is remapped to a light surface above, but the hover VARIANT isn't — without this it reverts to raw dark slate on hover (dark card + dark ink = unreadable, e.g. the Related-comparisons cards). Map it to a subtle deeper-paper surface so hover stays readable on the paper theme. */ .theme-paper .hover\:bg-slate-800:hover { background-color: var(--surface-sunken); } /* Borders */ .theme-paper .border-slate-700, .theme-paper .border-slate-700\/60, .theme-paper .border-slate-700\/40, .theme-paper .border-slate-800 { border-color: var(--rule); } /* Accent — links, primary CTAs, active tab marker */ .theme-paper .text-blue-300, .theme-paper .text-blue-400 { color: var(--accent); } .theme-paper .hover\:text-blue-300:hover { color: var(--accent-ink); } .theme-paper .border-blue-500 { border-color: var(--accent); } .theme-paper .bg-blue-600 { background-color: var(--accent); } .theme-paper .hover\:bg-blue-500:hover, .theme-paper .bg-blue-500 { background-color: var(--accent-ink); } /* On filled accent buttons keep text light — the ink override would otherwise tank contrast on the teal background. */ .theme-paper .bg-blue-600.text-white, .theme-paper a.bg-blue-600, .theme-paper button.bg-blue-600 { color: oklch(0.98 0.005 80); } /* Informational banner pills (equivalence-mode, direct-mode, score notes). */ .theme-paper .bg-blue-900\/30 { background-color: var(--accent-soft); } .theme-paper .border-blue-700\/40 { border-color: color-mix(in oklch, var(--accent) 30%, transparent); } .theme-paper .text-blue-200 { color: var(--accent-ink); } .theme-paper .bg-green-900\/30, .theme-paper .bg-green-900\/50 { background-color: var(--gain-soft); } .theme-paper .border-green-700\/40 { border-color: color-mix(in oklch, var(--gain) 30%, transparent); } .theme-paper .text-green-200, .theme-paper .text-green-300 { color: var(--gain); } .theme-paper .bg-amber-900\/30, .theme-paper .bg-amber-900\/50 { background-color: var(--warn-soft); } .theme-paper .text-amber-200, .theme-paper .text-amber-300, .theme-paper .text-amber-400 { color: var(--warn); } /* Semantic gain/loss for row deltas — kept distinct from the accent. These are the green/red the user explicitly asked to keep on the Take-home and Breakdown tabs (cost lines turn red, benefits/net green). */ .theme-paper .text-green-400 { color: var(--gain); } .theme-paper .text-red-300, .theme-paper .text-red-400 { color: var(--loss); } /* Confidence-label color cycle — drop the slate→amber→blue→green "look at this gauge!" pattern from the impeccable findings. Quiet ramp through warm tones instead. */ .theme-paper .text-amber-400 { color: var(--warn); } /* Native select dropdowns — paper-themed. */ .theme-paper select optgroup { font-weight: 700; font-style: normal; color: var(--ink-tertiary); background: var(--surface-page); text-transform: uppercase; font-size: 0.75em; letter-spacing: 0.05em; } .theme-paper select optgroup option { font-weight: 400; color: var(--ink-primary); background: var(--surface-page); text-transform: none; font-size: 1em; letter-spacing: normal; } /* Same pattern for the dark-themed selects on the live calculator — Tailwind classes set bg-slate-800/60; rely on the override above. */ select optgroup { font-weight: 700; font-style: normal; } /* Hide native number-input spinners. */ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; appearance: textfield; } /* =========================================================================== Score circle — Fraunces marquee figure, semantic tier color. ========================================================================= */ .score-circle { width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 4px solid; font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; font-size: 2.75rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; background: var(--surface-raised); } .score-circle.high { border-color: var(--gain); color: oklch(0.38 0.14 150); } .score-circle.mid { border-color: var(--warn); color: oklch(0.45 0.13 70); } .score-circle.low { border-color: var(--loss); color: oklch(0.42 0.17 28); } /* =========================================================================== Dim-bars (Score tab) — visual interest with tick marks at 25/50/75 on the track, a teal→deep-teal→warm gradient on the fill, and a sheen. ========================================================================= */ .dim-bar { position: relative; height: 10px; background-color: var(--surface-sunken); background-image: linear-gradient(90deg, transparent 0, transparent calc(25% - 0.5px), color-mix(in oklch, var(--ink-tertiary) 35%, transparent) calc(25% - 0.5px), color-mix(in oklch, var(--ink-tertiary) 35%, transparent) calc(25% + 0.5px), transparent calc(25% + 0.5px), transparent calc(50% - 0.5px), color-mix(in oklch, var(--ink-tertiary) 35%, transparent) calc(50% - 0.5px), color-mix(in oklch, var(--ink-tertiary) 35%, transparent) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(75% - 0.5px), color-mix(in oklch, var(--ink-tertiary) 35%, transparent) calc(75% - 0.5px), color-mix(in oklch, var(--ink-tertiary) 35%, transparent) calc(75% + 0.5px), transparent calc(75% + 0.5px) ); border-radius: 5px; overflow: hidden; box-shadow: inset 0 1px 0 oklch(0 0 0 / 0.04); } .dim-bar > div { height: 100%; width: 100%; transform-origin: left center; background-image: linear-gradient(90deg, oklch(0.78 0.07 200) 0%, oklch(0.55 0.12 200) 55%, oklch(0.50 0.13 80) 100% ); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.4), inset 0 -1px 1px oklch(0 0 0 / 0.08); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; border-radius: 5px; } /* Smooth tab content switches */ [x-show] { transition: opacity 150ms ease; } [x-show='false'] { opacity: 0; } /* Range input — themed */ .theme-paper input[type='range'] { accent-color: var(--accent); } /* Mobile adjustments */ @media (max-width: 768px) { body { font-size: 14px; } .score-circle { width: 90px; height: 90px; font-size: 2rem; } } /* =========================================================================== Custom tooltip (replaces native title=""). Inverted on light theme. Tooltips use position: fixed (not absolute) so they're anchored to the viewport rather than the trigger. This matters because absolutely- positioned pseudo-elements with `left: 50%` near the right edge of the viewport extended document.body.scrollWidth past the viewport width on mobile, which broke layout-width calculations downstream (the results card right edge ended up off-screen even with overflow-x: clip). With position: fixed, the tooltip doesn't contribute to ancestor scrollWidth. The inline tooltip-positioner script in index.html sets --tip-top / --tip-left on the trigger when the user hovers/taps; CSS reads those custom properties to place the ::after element. ========================================================================= */ html, body { overflow-x: clip; } [data-tip] { position: relative; cursor: help; } [data-tip]::after { content: attr(data-tip); position: fixed; top: var(--tip-top, auto); left: var(--tip-left, 0); background: var(--ink-primary); color: var(--surface-page); font-size: 12px; line-height: 1.45; padding: 8px 10px; border-radius: 6px; width: max-content; max-width: min(280px, calc(100vw - 16px)); white-space: normal; text-align: left; box-shadow: 0 8px 24px -8px oklch(0 0 0 / 0.25), 0 2px 4px oklch(0 0 0 / 0.1); opacity: 0; pointer-events: none; transition: opacity 100ms ease; z-index: 100; } [data-tip]:hover::after, [data-tip][data-tip-show="true"]::after { opacity: 1; } /* ===========================================================================

disclosure caret — CSS only. ========================================================================= */ summary { list-style: none; cursor: pointer; } summary::-webkit-details-marker { display: none; } summary::marker { content: ''; } summary::before { content: '▸'; display: inline-block; margin-right: 4px; font-size: 0.85em; color: inherit; } details[open] > summary::before { content: '▾'; } /* =========================================================================== Inputs / selects on the paper theme — clean focus ring (accent), hairline border, subtle background lift. ========================================================================= */ .theme-paper input, .theme-paper select, .theme-paper textarea { color: var(--ink-primary); } .theme-paper input:focus, .theme-paper select:focus, .theme-paper textarea:focus { outline: 2px solid color-mix(in oklch, var(--accent) 40%, transparent); outline-offset: 1px; } .theme-paper input::placeholder { color: var(--ink-tertiary); } /* Checkbox accent so the brand color shows on checked state. */ .theme-paper input[type='checkbox'] { accent-color: var(--accent); } /* =========================================================================== City combobox (P1) — typeahead dropdown panel for the source/target pickers. Tailwind utilities supply layout (absolute + max-h + scroll); these rules theme the panel for the paper light theme so it doesn't inherit the dark slate-900 background used in markup. ========================================================================= */ .theme-paper .combobox-panel { background: var(--surface-page); border-color: var(--rule); box-shadow: 0 12px 28px -10px oklch(0 0 0 / 0.18), 0 2px 6px oklch(0 0 0 / 0.08); } .theme-paper .combobox-panel button { color: var(--ink-primary); } .theme-paper .combobox-panel button:hover, .theme-paper .combobox-panel button.bg-slate-700 { background-color: var(--accent-soft); color: var(--accent-ink); } .theme-paper .combobox-panel .text-slate-500 { color: var(--ink-tertiary); } .theme-paper .combobox-panel .bg-slate-900\/80 { background-color: var(--surface-sunken); } /* =========================================================================== Tailored FAQ accordion — editorial divider-ruled list. Cards are intentionally absent: hairline rules between items + max-width answers signal "article" rather than "widget", consistent with the methodology section's editorial typography. ========================================================================= */ .faq-list > .faq-item { border-top: 1px solid var(--rule); } .faq-list > .faq-item:last-child { border-bottom: 1px solid var(--rule); } /* Keep

as a plain block so the browser doesn't render its list-item disclosure marker alongside our custom chevron. Layout lives on the inner .faq-q-row so flex doesn't fight the native marker rendering across Chrome/Firefox/Safari. */ .faq-q { display: block; padding: 1rem 0; font-family: 'Fraunces', Georgia, serif; font-weight: 450; font-size: 1.0625rem; line-height: 1.35; color: var(--ink-primary); cursor: pointer; list-style: none; transition: color 180ms ease; } .faq-q::-webkit-details-marker { display: none; } .faq-q::marker { content: ''; } /* Override the global summary::before triangle (used by the methodology section) so FAQ rows only show the right-side svg chevron. */ .faq-q::before, .faq-list details[open] > .faq-q::before { content: none; } .faq-q:hover { color: var(--accent-ink); } .faq-q-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .faq-chevron { width: 12px; height: 12px; flex-shrink: 0; color: var(--ink-tertiary); transform: translateY(2px); transition: transform 220ms cubic-bezier(.4, 0, .2, 1), color 180ms ease; } .faq-item[open] .faq-chevron { transform: translateY(2px) rotate(180deg); color: var(--accent-ink); } .faq-item[open] .faq-q { color: var(--accent-ink); } .faq-a { padding: 0 0 1.25rem 0; max-width: 62ch; font-size: 0.9375rem; line-height: 1.65; color: var(--ink-secondary); } @media (min-width: 768px) { .faq-q { font-size: 1.125rem; padding: 1.125rem 0; } } /* Defensive: some browsers honor :where(details) defaults that center the summary text in certain renderings. Force left alignment everywhere inside the FAQ list so the headings, questions, and answers share a common left edge. */ .faq-list, .faq-list * { text-align: left; }