/* snicker-snack app theme: the CRT identity, made readable — and usable on a phone. Press Start 2P only for the brand stamp and page-title slabs (it is unreadable at body sizes); body/UI in JetBrains Mono. Dim green text, bright green accents, faint scanlines, no flicker or glow on body copy. Amber only for warnings / destructive actions. One stylesheet, one breakpoint. Desktop is the persistent left rail; below --bp the rail becomes an off-canvas drawer driven by a pure-CSS checkbox toggle (#nav-toggle) — no framework, ports straight to Jinja2. */ :root { --bg: #0a0c0a; --panel: #101510; --panel-2: #0d120d; --border: #1e3a1e; --border-soft: rgba(30, 58, 30, 0.5); --text: #c2ecc2; --accent: #33ff33; --muted: #6a9c6a; --alert: #ffb000; --focus: rgba(51, 255, 51, 0.9); --touch: 44px; /* minimum comfortable tap target */ } * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body.app { background: var(--bg); color: var(--text); font-family: "JetBrains Mono", monospace; font-size: 15px; line-height: 1.6; min-height: 100vh; display: flex; } /* Faint permanent scanlines — a nod to the home page, quiet enough to read through */ body.app::before { content: ""; position: fixed; inset: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.045) 2px, rgba(0, 0, 0, 0.045) 4px ); pointer-events: none; z-index: 60; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* ================= mobile nav plumbing ================= */ /* The checkbox lives at the top of as a sibling of topbar/scrim/sidebar. */ .nav-toggle { position: absolute; opacity: 0; pointer-events: none; } .topbar { display: none; /* desktop: hidden; shown in the media query */ } .nav-scrim { display: none; } .nav-close { display: none; /* only meaningful inside the mobile drawer */ } /* ================= sidebar ================= */ .sidebar { width: 232px; flex-shrink: 0; background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; /* Don't stretch to the page's full height (flex default): a sticky element as tall as the scroll container has nothing to stick to, and the nav scrolls away with the page. Pin it to exactly one viewport instead; its own overflow scrolls if the nav is tall. */ align-self: flex-start; height: 100vh; overflow-y: auto; } .brand { padding: 1.2rem 1rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .brand a { font-family: "Press Start 2P", monospace; font-size: 0.7rem; color: var(--accent); text-shadow: 0 0 8px rgba(51, 255, 51, 0.6); line-height: 1.5; } .brand a:hover { text-decoration: none; } .sidebar nav { flex: 1; padding: 0.8rem 0; } .nav-group-label { padding: 0.9rem 1rem 0.35rem; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .nav-link { display: block; padding: 0.5rem 1rem; color: var(--text); } .nav-link:hover { background: rgba(51, 255, 51, 0.06); text-decoration: none; } .nav-link.active { color: var(--accent); border-left: 2px solid var(--accent); padding-left: calc(1rem - 2px); background: rgba(51, 255, 51, 0.05); } .sidebar-footer { padding: 1rem; border-top: 1px solid var(--border); font-size: 0.9rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; } .sidebar-footer a { color: var(--text); } .sidebar-footer a:first-child::before { content: "\2609 "; /* small account glyph */ color: var(--muted); } /* ================= main column ================= */ .main { flex: 1; padding: 2rem 2.5rem; max-width: 980px; width: 100%; /* Center the column in the space beside the sidebar (auto margins absorb whatever free width is left once max-width caps growth), matching the centered feel of the public/anonymous layout. */ margin: 0 auto; } .main-full { margin: 0 auto; max-width: 820px; } h1 { font-family: "Press Start 2P", monospace; font-size: 1.05rem; color: var(--accent); margin: 0 0 1.3rem; line-height: 1.85; } h2 { font-size: 1rem; color: var(--accent); margin: 1.8rem 0 0.6rem; letter-spacing: 0.05em; } .muted { color: var(--muted); font-size: 0.85rem; } .section-tag { display: inline-block; border: 1px solid var(--border); padding: 0.05em 0.45em; font-size: 0.72rem; color: var(--muted); border-radius: 2px; letter-spacing: 0.04em; white-space: nowrap; } .breadcrumb { font-size: 0.85rem; margin-bottom: 0.4rem; } /* Title block wraps at the same measure as the article text below it (72ch, computed against the same body font). break-word guards against unbroken strings (URLs-as-titles) in the chunky brand font. */ .page-head { max-width: 72ch; } .page-head h1 { overflow-wrap: break-word; } .page-meta { margin-bottom: 1.2rem; } /* ================= tables ================= */ .ledger { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1rem; } .ledger th { text-align: left; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--border); padding: 0.5rem 0.6rem; font-weight: 700; } .ledger td { padding: 0.6rem; border-bottom: 1px solid var(--border-soft); vertical-align: top; } .ledger tr:hover td { background: rgba(51, 255, 51, 0.025); } /* ================= forms ================= */ input[type="text"], input[type="password"], input[type="email"], input[type="file"], select, textarea { background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 0.95rem; padding: 0.5rem 0.65rem; border-radius: 2px; min-height: var(--touch); } input[type="file"] { padding: 0.5rem; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; } ::placeholder { color: var(--muted); opacity: 1; } textarea { width: 100%; resize: vertical; line-height: 1.55; } button, .button-link { background: transparent; border: 1px solid var(--accent); color: var(--accent); font-family: inherit; font-size: 0.9rem; padding: 0.5rem 1rem; min-height: var(--touch); cursor: pointer; border-radius: 2px; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; } button:hover, .button-link:hover { background: rgba(51, 255, 51, 0.1); text-decoration: none; } button.primary { background: rgba(51, 255, 51, 0.15); font-weight: 700; } button.danger { border-color: var(--alert); color: var(--alert); } button.danger:hover { background: rgba(255, 176, 0, 0.1); } /* text-only button (log out, etc.) — not a tap-target-sized control */ .link-button { border: none; padding: 0; min-height: 0; font-size: 0.9rem; color: var(--muted); background: none; display: inline; } .link-button:hover { color: var(--accent); background: none; text-decoration: underline; } .stacked-form { max-width: 46rem; } .stacked-form label { display: block; margin: 1rem 0 0.3rem; font-size: 0.85rem; color: var(--muted); } .stacked-form input[type="text"], .stacked-form input[type="password"], .stacked-form input[type="email"], .stacked-form select { width: 100%; max-width: 28rem; display: block; } .form-actions { margin-top: 1.4rem; display: flex; gap: 0.6rem; flex-wrap: wrap; } .format-radio { border: 1px solid var(--border); padding: 0.7rem 0.9rem 0.9rem; margin-top: 1rem; border-radius: 2px; } .format-radio legend { font-size: 0.85rem; color: var(--muted); padding: 0 0.3rem; } .check-label { display: inline-flex; align-items: center; gap: 0.4rem; margin-right: 0.9rem; font-size: 0.9rem; min-height: var(--touch); } .check-label input { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); } .inline-form { display: flex; gap: 0.55rem; flex-wrap: wrap; align-items: center; margin: 0.6rem 0; } .inline-form input[type="text"], .inline-form input[type="password"], .inline-form input[type="email"] { flex: 1 1 12rem; min-width: 0; } .field-error { color: var(--alert); font-size: 0.8rem; margin-top: 0.2rem; } /* ================= flashes ================= */ .flash { border: 1px solid var(--border); border-left: 3px solid var(--accent); background: var(--panel); padding: 0.7rem 0.9rem; margin-bottom: 1rem; font-size: 0.9rem; border-radius: 2px; } .flash-error { border-left-color: var(--alert); color: var(--alert); } /* ================= auth page ================= */ body.auth-page { align-items: center; justify-content: center; padding: 1.2rem; } .auth-panel { background: var(--panel); border: 1px solid var(--border); padding: 2.5rem 2.5rem 2rem; width: min(24rem, 100%); border-radius: 3px; } .auth-panel .brand-stamp { margin-bottom: 1.8rem; text-align: center; } .auth-panel label { display: block; margin: 1rem 0 0.3rem; font-size: 0.85rem; color: var(--muted); } .auth-panel input { width: 100%; } .auth-panel button { margin-top: 1.6rem; width: 100%; } .brand-stamp { font-family: "Press Start 2P", monospace; font-size: 1rem; color: var(--accent); text-shadow: 0 0 10px rgba(51, 255, 51, 0.6); line-height: 1.8; } /* ================= rendered page bodies ================= */ .page-body { max-width: 72ch; } .page-body h1, .page-body h2, .page-body h3, .page-body h4 { color: var(--accent); font-family: "JetBrains Mono", monospace; margin: 1.5rem 0 0.6rem; line-height: 1.35; } .page-body h1 { font-size: 1.4rem; } .page-body h2 { font-size: 1.2rem; } .page-body h3 { font-size: 1.05rem; } .page-body p { margin: 0.75rem 0; } .page-body ul, .page-body ol { margin: 0.75rem 0 0.75rem 1.6rem; } .page-body li { margin: 0.25rem 0; } .page-body table { border-collapse: collapse; margin: 1rem 0; width: 100%; display: block; overflow-x: auto; /* arbitrary admin tables scroll rather than break layout */ } .page-body th, .page-body td { border: 1px solid var(--border); padding: 0.4rem 0.7rem; text-align: left; } .page-body th { color: var(--accent); } .page-body code { background: var(--panel); border: 1px solid var(--border); padding: 0 0.3em; font-size: 0.9em; border-radius: 2px; word-break: break-word; } .page-body pre { background: var(--panel); border: 1px solid var(--border); padding: 0.8rem 1rem; overflow-x: auto; margin: 0.9rem 0; border-radius: 2px; } .page-body pre code { border: none; background: none; padding: 0; } .page-body blockquote { border-left: 3px solid var(--border); padding-left: 1rem; color: var(--muted); margin: 0.9rem 0; } .page-body a { word-break: break-word; } .page-body img { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: 2px; } .page-body hr { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; } .preview-pane { border: 1px dashed var(--border); padding: 1.2rem 1.5rem; margin-top: 0.6rem; border-radius: 2px; } /* Anonymous public page: no nav by design. A quiet, deliberate masthead and footer so a lone content column reads as intentional, not broken. */ .public-masthead { border-bottom: 1px solid var(--border); background: var(--panel); padding: 0.9rem 1.2rem; margin: -2rem -2.5rem 1.8rem; display: flex; align-items: baseline; gap: 0.7rem; } .public-masthead .brand-stamp { font-size: 0.7rem; text-shadow: 0 0 8px rgba(51, 255, 51, 0.55); } .public-masthead .muted { font-size: 0.75rem; } .public-footer { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.8rem; } /* ================= error slabs ================= */ .error-slab { margin-top: 15vh; text-align: center; } /* ===================================================================== MOBILE — drawer nav + stacked ledgers. ~390px design target. ===================================================================== */ @media (max-width: 768px) { body.app { flex-direction: column; } /* --- top bar with the menu toggle --- */ .topbar { display: flex; align-items: center; gap: 0.75rem; position: sticky; top: 0; z-index: 40; background: var(--panel); border-bottom: 1px solid var(--border); padding: 0.55rem 0.9rem; } .topbar .topbar-brand { font-family: "Press Start 2P", monospace; font-size: 0.62rem; color: var(--accent); text-shadow: 0 0 8px rgba(51, 255, 51, 0.6); } .nav-open { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: var(--touch); min-width: var(--touch); padding: 0 0.75rem; border: 1px solid var(--accent); color: var(--accent); border-radius: 2px; font-size: 0.85rem; cursor: pointer; } .nav-open:active { background: rgba(51, 255, 51, 0.12); } /* --- drawer --- */ .sidebar { position: fixed; top: 0; left: 0; height: 100dvh; width: min(300px, 84vw); min-height: 0; z-index: 50; transform: translateX(-100%); transition: transform 0.22s ease; box-shadow: none; overflow-y: auto; } .nav-toggle:checked ~ .sidebar { transform: translateX(0); box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.001); } .nav-scrim { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, 0.65); opacity: 0; pointer-events: none; transition: opacity 0.22s ease; } .nav-toggle:checked ~ .nav-scrim { opacity: 1; pointer-events: auto; } .nav-close { display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch); min-width: var(--touch); padding: 0 0.6rem; border: 1px solid var(--border); color: var(--muted); border-radius: 2px; font-size: 1.1rem; cursor: pointer; } .nav-link { padding: 0.7rem 1.1rem; font-size: 1rem; } .nav-link.active { padding-left: calc(1.1rem - 2px); } .sidebar-footer { font-size: 0.95rem; padding: 1.1rem; } /* --- main --- */ .main { padding: 1.4rem 1.15rem 2.5rem; max-width: 100%; } .main-full { max-width: 100%; } h1 { font-size: 0.92rem; line-height: 1.7; } /* --- ledger → stacked cards --- */ .ledger, .ledger tbody, .ledger tr, .ledger td { display: block; width: 100%; } .ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .ledger tr { border: 1px solid var(--border); background: var(--panel); border-radius: 3px; margin-bottom: 0.85rem; padding: 0.35rem 0.15rem; } .ledger tr:hover td { background: none; } .ledger td { border: none; border-bottom: 1px solid var(--border-soft); padding: 0.55rem 0.9rem; display: flex; gap: 1rem; align-items: baseline; } .ledger tr td:last-child { border-bottom: none; } .ledger td::before { content: attr(data-label); flex: 0 0 38%; color: var(--muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em; line-height: 1.5; } /* action/label-less cells: no label column, control fills width */ .ledger td[data-label=""]::before { display: none; } /* Admin ledgers: label ABOVE, controls full width (forms, buttons). */ .ledger--stack td { flex-direction: column; gap: 0.35rem; align-items: stretch; } .ledger--stack td::before { flex: none; } .ledger--stack td[data-label=""] { padding-top: 0.35rem; } .ledger--stack td .inline-form, .ledger--stack td form { margin: 0; } .ledger--stack td button, .ledger--stack td .button-link { width: 100%; } .ledger--stack td input[type="text"], .ledger--stack td input[type="password"] { width: 100%; flex: 1 1 auto; } /* section-membership checkboxes inside a user card: full-width rows, big tap targets, so each section reads as its own line */ .ledger--stack td form .check-label { display: flex; width: 100%; margin: 0 0 0.15rem; padding: 0.2rem 0; } .ledger--stack td form button { margin-top: 0.5rem; } /* inline create/upload forms stack full width */ .inline-form { flex-direction: column; align-items: stretch; } .inline-form input, .inline-form select, .inline-form button, .inline-form input[type="text"], .inline-form input[type="password"], .inline-form input[type="email"] { width: 100%; flex: 0 0 auto; } .stacked-form input[type="text"], .stacked-form input[type="password"], .stacked-form input[type="email"], .stacked-form select { max-width: 100%; } .form-actions button { flex: 1 1 auto; } .public-masthead { margin: -1.4rem -1.15rem 1.5rem; } } /* On real desktops the drawer plumbing is inert. Guard against the checkbox ever affecting layout above the breakpoint. */ @media (min-width: 769px) { .nav-toggle:checked ~ .sidebar { transform: none; } } @media (prefers-reduced-motion: reduce) { .sidebar, .nav-scrim { transition: none; } }