/* ============================================================ "Sveska" (notebook) visual direction. Leans into what this app fundamentally is: a digitized chord notebook. Warm ruled paper, fountain-pen-green ink for structure, red-pen for the one accent that should read as "active/annotation" (transpose value, chord-line tint). See the design pitch discussed with Nino for the two rejected directions (Vinska Karta, Ploča). Dark mode ("notebook at night"): light by default, switched only by the toggle button (static/js/theme-toggle.js), which sets data-bs-theme="dark" on and persists the choice in localStorage -- reusing Bootstrap 5.3's own attribute (rather than inventing a separate one) means Bootstrap's own components repaint too, not just this file's custom rules. Deliberately does NOT also respond to prefers-color-scheme: an earlier version did, and it produced a confusing bug in practice -- a page with its own (song.html, for SEO reasons) was missing the theme-restore script the other pages have, so it silently fell back to the OS preference instead of the visitor's actual stored choice, making the theme appear to "randomly" flip when navigating to a song page. Simpler and more predictable to have exactly one thing control this. Token indirection is what makes switching cheap regardless: every component rule below reads from the --paper/--ink/etc. custom properties (or the --bs-* aliases further down, which themselves read from those same tokens), never a literal color -- so only the token values need to change per mode, not every rule that uses them. Mobile-first: base rules target the smallest screen; the one width-based @media query widens things back up, it doesn't shrink them down. ============================================================ */ :root { --paper: #faf6ec; --paper-rule: #d9d2ba; --card: #fdfbf5; --ink: #2a2822; --ink-muted: #6b675c; --accent: #2f5d50; /* fountain-pen green -- structure, links, primary actions */ --accent-2: #a8402f; /* red pen -- the one "active/annotation" accent */ --line: #d9d2ba; /* The navbar is deliberately always a dark "ink bar" in both modes (a permanent header, not something that inverts with the page) -- kept as its own tokens rather than reusing --ink/--paper directly, since --ink flips to a *light* color in dark mode and would break this if the navbar rules referenced it. */ --nav-bg: #2a2822; --nav-ink: #faf6ec; --nav-ink-muted: rgba(250, 246, 236, 0.75); /* Bootstrap 5.3 theming hooks: retint components through Bootstrap's own variables rather than fighting each utility class individually. */ --bs-body-bg: var(--paper); --bs-body-color: var(--ink); --bs-emphasis-color: var(--ink); --bs-secondary-color: var(--ink-muted); --bs-tertiary-bg: var(--card); --bs-border-color: var(--line); --bs-link-color: var(--accent); --bs-link-hover-color: var(--accent-2); --bs-primary: var(--accent); --bs-primary-rgb: 47, 93, 80; } /* Explicit override via the toggle -- the only way this changes now (see the comment at the top of this file for why prefers-color-scheme auto-detection was removed). */ :root[data-bs-theme="dark"] { --paper: #201e19; --paper-rule: #38352c; --card: #2a2721; --ink: #ece7d9; --ink-muted: #a39d8c; --accent: #6fbf9f; --accent-2: #e0836b; --line: #38352c; --nav-bg: #14130f; --nav-ink: #ece7d9; --nav-ink-muted: rgba(236, 231, 217, 0.75); --bs-primary-rgb: 111, 191, 159; } body { padding-bottom: 2rem; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Faint ruled-paper lines -- a background gradient, not an image, so it scales cleanly and costs nothing to load. */ background-image: repeating-linear-gradient(var(--paper) 0 27px, var(--paper-rule) 27px 28px); background-color: var(--paper); } /* Manuscript serif for headings -- plays against the monospace chords rather than competing with it; system font stack only (the artifact/CSS here can't fetch a webfont, and this project already favors self-hosted-or-nothing over CDN dependencies -- see Bootstrap's own WebJar packaging). */ h1, h2, h3 { font-family: Georgia, "Iowan Old Style", "Book Antiqua", Palatino, serif; } .navbar { background-color: var(--nav-bg); } .navbar .nav-link { /* "Home" (the leftmost link, replacing the old serif "Vino i gitare" brand mark) is a plain .nav-link too, not .navbar-brand -- styled identically to Genres/Chords/Admin rather than as a separate, differently-treated element. Padding set explicitly (matching Bootstrap's own resolved 0.5rem/0.5rem for .navbar-nav .nav-link, verified via computed styles) rather than relying on its .navbar-nav-scoped --bs-navbar-nav-link-padding-x variable, since this rule also has to reach a .nav-link that isn't nested inside a .navbar-nav. */ padding: 0.5rem; color: var(--nav-ink-muted) !important; } .navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--nav-ink) !important; } @media (max-width: 767.98px) { /* Real bug found via a mobile screenshot: the search box was crushed to ~68px wide, cut off to "Searc", instead of moving to its own line below Home/Genres/Chords/Admin as the form's existing .mt-2 (mobile-only top margin) clearly intended. Root cause: .navbar-expand (used here so the nav links never collapse behind a hamburger button -- see the .container comment above) sets flex-wrap: nowrap *unconditionally*, not just above some breakpoint, so at any width where the row's content doesn't fit, items get flex-shrunk in place rather than wrapped. Restore wrapping below md, where there isn't room for everything on one line anyway. flex-basis: 100% on the form (Bootstrap's own trick, see .navbar-collapse in bootstrap.css) then guarantees it takes a full line to itself once wrapping is possible, rather than potentially sharing a partial one. */ .navbar.navbar-expand { flex-wrap: wrap; } .navbar form { flex-basis: 100%; } } /* Live/performance view's slim top bar (song-live.html) -- same dark "ink bar" treatment as .navbar (reuses the same --nav-* tokens) but without a real