/* Tally brand marks, shared by every page in this folder.
*
* These pages are plain static HTML with no build step, so the wordmark's
* SVG has to be pasted into each one. Everything else — the font, the
* geometry, the pulse — lives here so the three copies cannot drift apart
* in style. The markup to paste is:
*
*
*
*
*
* Geometry matches src/components/Logo.tsx at size "xl" — lowercase
* "tally" on a 42px baseline with the cyan dot as a period at the end.
* The dot is the accent cyan #00D4FF, never the mint --brand: mint is
* reserved for positive money and is never decorative.
*
* Requires --text to be defined by the page (all three define the same
* :root palette).
*/
/* Lato Bold, self-hosted — the app draws the wordmark in Lato_700Bold and a
system fallback renders it visibly wrong. SIL OFL 1.1, licence alongside
the file at /fonts/OFL.txt. */
@font-face {
font-family: 'Lato';
/* Relative to this stylesheet, not to the page. That keeps it correct for
/u/, which is served from /u.html by a rewrite and so has a
deeper base URL than the file it loads. */
src: url('fonts/Lato_700Bold.ttf') format('truetype');
font-weight: 700;
font-display: swap;
}
.logo {
display: flex;
justify-content: center;
margin-bottom: 8px;
}
.logo svg { width: 112px; height: auto; display: block; }
.logo-word { font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif; }
/* Matches the pulse on the app's home wordmark: r 7 → 28, opacity
0.55 → 0 over 2.4s. Driven by transform so it works in Safari, where
animating the `r` attribute via CSS does not — and paired with
vector-effect="non-scaling-stroke" on the circle, because a transform
would otherwise thicken the 1.25px stroke fourfold along with it. */
.logo-pulse {
transform-box: fill-box;
transform-origin: center;
animation: logo-pulse 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes logo-pulse {
from { transform: scale(1); opacity: 0.55; }
to { transform: scale(4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.logo-pulse { animation: none; opacity: 0; }
}