.outfit { font-family: "Outfit", sans-serif; font-optical-sizing: auto; font-weight: 300; font-style: normal; } /* ========================================================================== Theme switcher Three states — light, auto, dark — with auto as the default. The active one is marked by [data-theme-pref] on , set by the pre-paint script in base.html, so the correct button is highlighted on first paint rather than after JavaScript runs. Deliberately not a .btn-group: Bootstrap's outline buttons put a border on every segment, which at this size reads as three separate controls. This is one control with three positions, so the border is on the track and the selected position is a filled thumb inside it. A page that locks its theme sets [data-theme-lock], and the switcher hides: offering a choice that will not be honoured is worse than offering none. ========================================================================== */ .theme-switch { display: inline-flex; align-items: center; gap: .15rem; padding: .17rem; border: 1px solid var(--bs-border-color); border-radius: 999px; background: color-mix(in srgb, var(--bs-body-color) 5%, transparent); } .theme-switch button { display: inline-flex; align-items: center; justify-content: center; width: 1.85rem; height: 1.85rem; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--bs-secondary-color); cursor: pointer; transition: color .15s ease, background .15s ease, transform .15s ease; } .theme-switch button:hover { color: var(--bs-body-color); background: color-mix(in srgb, var(--bs-body-color) 8%, transparent); } .theme-switch button:active { transform: scale(.93); } .theme-switch button:focus-visible { outline: 2px solid color-mix(in srgb, var(--bs-body-color) 45%, transparent); outline-offset: 1px; } .theme-switch svg { width: 1.02rem; height: 1.02rem; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* The selected thumb. Driven by the resolved preference on , which is set before paint — no flash of the wrong button being active. */ html[data-theme-pref="light"] .theme-switch [data-theme-option="light"], html[data-theme-pref="auto"] .theme-switch [data-theme-option="auto"], html[data-theme-pref="dark"] .theme-switch [data-theme-option="dark"] { background: var(--bs-body-bg); color: var(--bs-emphasis-color); box-shadow: 0 1px 2px rgba(0, 0, 0, .18); } html[data-theme-lock] .theme-switch { display: none; } /* ========================================================================== Wordmark Outfit, which the page already loads for the .outfit class, so the mark costs no extra request. A geometric sans with round, even bowls: the name is mostly g, y and s, and Outfit keeps those calm rather than making a feature of them. The rest of the interface stays on the system sans. The one other place the face appears is the settlement figure on a shared-expenses ledger, which is a display number rather than interface text and is set in the ledger's own stylesheet — Outfit has true lining numerals and a real 300 weight, and at 50px the system sans does not. The .com is lighter and dimmed. It is part of the address, not part of the emphasis, and at full weight it competes with the word that matters. ========================================================================== */ .navbar-brand.brand { font-family: "Outfit", ui-sans-serif, system-ui, sans-serif; font-weight: 600; font-size: 1.34rem; letter-spacing: -.022em; color: var(--bs-emphasis-color); transition: opacity .15s ease; } .navbar-brand.brand:hover { opacity: .78; } .navbar-brand.brand .tld { font-weight: 500; opacity: .45; }