/* ========================================================== FoodLoot — Shared Typography Display font for headers + wordmark · Plus Jakarta Sans for body ⚠ LOWSIDE — DEMO FILE IN USE ⚠ The TTF on disk is the watermarked demo. Numerals, "%", and several special glyphs render with the foundry's "DEMO" anti-piracy watermark — do NOT apply LowSide to numbers, percentages, or stat displays. The .fl-wordmark class below is safe (letters only). ========================================================== */ @font-face { font-family: 'LowSide'; src: url('../assets/fonts/LowSide.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } /* Nav logo — LowSide wordmark only. The bag is intentionally hidden site-wide (the bag art already contains the word "FoodLoot" inside it, so pairing it with the wordmark next to it created a visual stutter). The bag stays available as favicon / app icon / footer signature. Color rules adapt to the page background: • Default (light hero pages): wordmark stays teal at all times. • (dark page-header pages — faq, contact, delete-account): wordmark is white before scroll, then flips to teal once nav.scrolled adds the white backdrop. */ .nav-logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--emerald, #00615F); transition: color .3s ease; } .nav-logo .nav-mark { display: none; } /* Pages whose top section is dark (var(--dark) page-header) opt in. */ body.nav-on-dark nav .nav-logo { color: #fff; } body.nav-on-dark nav.scrolled .nav-logo { color: var(--emerald, #00615F); } /* Hide any legacy inside .nav-logo if it still exists in markup. */ .nav-logo img { display: none; } /* FoodLoot wordmark — replaces the logo image site-wide. Letters-only, so demo-watermark glyphs are not triggered. */ .fl-wordmark { display: inline-block; font-family: 'LowSide', 'Plus Jakarta Sans', -apple-system, sans-serif; font-size: 36px; font-weight: 400; color: var(--emerald, #00615F); letter-spacing: -0.01em; line-height: 1; text-decoration: none; white-space: nowrap; vertical-align: middle; } /* On dark surfaces (footer), invert to white — matches the previous image filter behavior. */ .footer-brand .fl-wordmark, .fl .fl-wordmark, footer .fl-wordmark { color: #fff; margin-bottom: 16px; } /* Nav wordmark — inherits color from .nav-logo (see lockup rules above) so light-hero pages stay teal and dark-hero pages flip white→teal. Slight optical lift compensates for LowSide's low cap-height so the wordmark reads as vertically centred against the nav's flex box. */ nav .fl-wordmark { color: inherit; transition: color .3s ease; transform: translateY(-1px); } @media (max-width: 600px) { .fl-wordmark { font-size: 30px; } } :root { --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* Apply display font to all headers + wordmark + display numerals. Once the licensed LowSide TTF is in place, re-enable the @font-face above and change `--font-display` to lead with 'LowSide'. The selectors below stay; only the font reference changes. */ h1, h2, h3, .section-heading, .seh, .kval, .snum, .big-num, .goal-val, .problem-stat .big-num, .nav-mark, .nav-wordmark, .footer-mark, .hero-h1, .display, .headline { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; } /* h4+ stays on body sans for legibility */ h4, h5, h6 { font-family: var(--font-body); }