/* ────────────────────────────────────────────────── */ /* AventusCMS CryoBlue Theme — Complete Stylesheet */ /* ────────────────────────────────────────────────── */ /* Michroma, self-hosted rather than pulled from fonts.googleapis.com — see includes/fonts/michroma.css for the reasoning and the OFL licence. */ @import url('../../../includes/fonts/michroma.css'); :root { --av-bg: #050b10; --av-panel: rgba(8, 17, 24, 0.96); --av-accent: #56b8e8; --av-text: #e2edf3; --av-text-muted: #a7bac5; --av-text-dim: #728996; --good: #68cea1; --warn: #d8aa51; --bad: #eb6872; --bg-0: #050b10; --bg-1: #081118; --bg-2: #0c171f; --bg-3: #111f29; --bg-4: #182a35; --line-1: #1c303d; --line-2: #294352; --line-3: #3b5a6b; --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.5); --shadow-lg: 0 14px 42px rgba(0, 0, 0, 0.55); --glow-accent: 0 0 10px rgba(86, 184, 232, 0.3); --transition-fast: 120ms ease; --transition-normal: 200ms ease; /* THE hover-lift knob for every button on the site — public pages and the admin panel both. Change this one value and .btn, .av-btn, the poll options, and every admin button (which reach it through --theme-hover-scale — see the contract block below) all move together; there is deliberately no second place where a button's hover scale is written as a literal. Was 1.02, which on a full-width button grew the box by ~2.5px and read as a jump rather than a response — the colour shift, glow and shadow already carry the hover, so this only has to add a hint of depth behind them. NOT used by non-button lifts (the hero play button, favourite stars, avatar tiles, drag ghosts): those are their own gestures at their own magnitudes and are not meant to track this. */ --av-hover-scale: 1.01; /* Public contract for includes/css/admin.css: any theme may expose --theme-* custom properties so the admin panel's surfaces, text, and accent pick up the theme's own palette instead of the fixed default. Admin CSS references every one of these with a hard fallback (var(--theme-x, #hex)), so a theme that skips this stays fully functional — unlike reusing --av-accent/--bg-3/etc directly, a theme with no --theme-* block can never break admin, it just won't be color-matched. */ --theme-accent: var(--av-accent); --theme-panel: var(--av-panel); --theme-bg-1: var(--bg-1); --theme-bg-2: var(--bg-2); --theme-bg-3: var(--bg-3); --theme-bg-4: var(--bg-4); --theme-line-1: var(--line-1); --theme-line-2: var(--line-2); --theme-line-3: var(--line-3); --theme-text: var(--av-text); --theme-text-muted: var(--av-text-muted); --theme-text-dim: var(--av-text-dim); --theme-input-bg: #09141b; --theme-input-focus-bg: #0b1820; --theme-dropdown-bg: #101d25; --theme-good: var(--good); --theme-warn: var(--warn); --theme-bad: var(--bad); --theme-hover-scale: var(--av-hover-scale); } * { box-sizing: border-box; } /* Standard safeguard for every form control, site-wide (public pages, admin panel, any future block) — nothing with a fixed pixel width, a resize handle, or an unusually long value/placeholder can ever push wider than its own container and overflow the page horizontally. One rule here covers every input/select/textarea permanently, current and future, rather than needing a max-width added to each individual selector (.av-admin input[type=text], .av-dropdown-trigger, etc. — several of which already had it added directly as a first pass before this rule existed; harmless duplication, kept for clarity at each call site). */ input, select, textarea { max-width: 100%; } html { background-color: var(--av-bg); height: 100%; } /* Body is a 4-row grid: topbar -> navbar -> body-layout -> footer. The 1fr on row 3 absorbs the slack, which pins the footer to the bottom of the viewport on a short page and lets it sit at the end of the document on a long one. THE FOOTER WAS position:fixed AND IS NOT ANY MORE, because it is a block REGION. A fixed element is out of flow, so the only thing keeping page content from scrolling underneath it was a padding-bottom here reserving "the footer's own height" — a constant, against an element whose height an admin sets by dragging blocks into it. Measured on this install: 60px reserved against a 695px footer, so ~635px of the account page was behind it. No constant can track that, which is why the reservation is deleted rather than retuned; two grid rows cannot overlap at any height. */ body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 13px; color: var(--av-text); background-color: var(--av-bg); background-image: radial-gradient(circle at 15% 15%, rgba(86, 184, 232, 0.09), transparent 45%), radial-gradient(circle at 88% 70%, rgba(126, 209, 255, 0.06), transparent 30%), radial-gradient(circle at 40% 95%, rgba(86, 184, 232, 0.07), transparent 40%), linear-gradient(180deg, #080a0f 0%, #0a0d13 100%); background-attachment: fixed; min-height: 100vh; display: grid; grid-template-rows: auto auto 1fr auto; grid-template-columns: minmax(0, 1fr); } a { color: var(--av-accent); text-decoration: none; } a:hover { color: var(--av-accent); } /* Every native heading tag, site-wide — admin page titles (.av-admin-topbar h1), .card-heading (an actual

), standalone-page .av-card h1/h2 (login/register/installer), the static dashboard's .av-cryoblue-hero-copy h1, and .block-heading itself when the engine renders it as an

. One rule here means a class-specific font-family never needs restating per heading type — only size/color/spacing do. */ h1, h2, h3, h4, h5, h6 { font-family: 'Michroma', sans-serif; } /* HEADER & TOPBAR */ .av-cryoblue-topbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 10px; background: #060810; border-bottom: 1px solid var(--line-2); font-size: 12px; /* position:relative so .av-cryoblue-topbar-announcement can be absolutely centered against THIS row specifically (see that rule's own comment) rather than the viewport or some other ancestor. min-height compensates for the announcement box now being position:absolute — pulled entirely out of normal flex flow, so it no longer contributes to this row's height the way it did before. Without a min-height here, the row's height would be determined solely by .av-cryoblue-topbar-social (the only flex-flow child left when there's an announcement to show), which could make the bar visibly shrink/jump shorter compared to before, or clip the absolutely-positioned announcement box if it ends up taller than that remaining content. 34px is roughly the announcement box's own rendered height (5px+5px padding, ~1px+1px border, ~22px line content) plus a little slack. */ min-height: 34px; position: relative; } /* Admin panel: offset topbar/navbar for the collapsed rail only (84px). The expanded rail is position:fixed; z-index:5 and overlays as a fixed layer — nothing reflows when it opens. Full-width backgrounds intact. */ body.av-admin-context .av-cryoblue-topbar, body.av-admin-context .av-cryoblue-navbar { padding-left: 84px; /* 68px collapsed rail + 16px breathing room */ } /* Styled to look like an input box embedded directly in the topbar — same visual language as the theme's real text inputs (#09141b background, var(--line-2) border, 4px radius — see the shared input[type="text"]/etc. rule further down this file) but scaled down for a compact inline pill rather than a full-width form field: less padding, no bottom margin, and inline-flex sizing instead of width:100%. Purely decorative — nothing inside is actually an editable form control, the announcement text itself is still just plain text/links, this only borrows the LOOK of an input. */ .av-cryoblue-topbar-announcement { /* Absolutely centered against .av-cryoblue-topbar itself (that rule's own position:relative makes this possible) rather than flex-grow'd into whatever leftover space sits between the label and the social icons — flex-grow can only control how much of the ROW'S LEFTOVER space an item claims, it can't center an item independent of its siblings' own widths, which is what's actually being asked for here. left:50% + translateX(-50%) is the standard centering technique for an absolutely positioned element of unknown/variable width. No explicit width — an absolutely positioned element with no width set shrinks to fit its own content by default, so this box hugs the label + the 320px text window + the read-more link tightly, with no dead space between the marquee text and "Read More" the way a fixed percentage width previously left. max- width:1600px is kept purely as a safety ceiling matching .av- cryoblue-body-layout's own cap (this file, further down) — it won't normally be reached in practice since the inner .av- cryoblue-topbar-announcement-text window already caps visible text at 320px regardless, but it prevents this box from ever overflowing the viewport on an extreme edge case (e.g. a very long "Read More" translation string). z-index:1 keeps it above the topbar's own background. */ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 1600px; z-index: 1; display: flex; align-items: center; gap: 6px; color: var(--av-text-muted); text-transform: uppercase; letter-spacing: 0.02em; background: #09141b; border: 1px solid var(--line-2); border-radius: 4px; padding: 5px 10px; transition: border-color var(--transition-fast); box-sizing: border-box; } .av-cryoblue-topbar-announcement:hover { border-color: var(--line-3); } .av-cryoblue-topbar-label { color: var(--warn); font-weight: 700; flex: none; } /* Horizontal scroll, not ellipsis truncation — stays on one line (white-space:nowrap) and lets the user scroll/drag sideways to read the rest once the box has shrunk as far as it can (see .av-cryoblue-topbar-announcement's own min-width:0 comment for why it can shrink at all). overflow-x:auto shows a scrollbar only when content actually overflows; the thin custom scrollbar styling further down this file (::-webkit-scrollbar) already applies here automatically since it's a global rule, not scoped to a specific element. min-width:0 is still needed on this inner span too — flex children default to a min-width based on their content's natural size regardless of the PARENT's own min-width:0, so both have to be set for the announcement text to actually be allowed to overflow into a scrollable area instead of just re-expanding its container. */ /* Auto-scrolling marquee, not a user-dragged scrollbar — this outer element is purely a clipping viewport (overflow:hidden, no scrollbar of its own); the actual scrolling motion lives on .av-cryoblue-topbar-announcement-track just below, via a looping CSS animation that JS (header.php) only turns on when the text genuinely doesn't fit (adds .is-scrolling to the track — see that script's own comment for why detection needs real measurement, not a guess). Short text that already fits stays perfectly still, no class added, no animation running. flex:1 + min-width:0, NOT the default inline box, is required for this to work at all: overflow:hidden is a no-op on inline elements (they have no CSS box model of their own to clip against), and element.clientWidth — what the detection script compares scrollWidth to — is ALWAYS 0 on an inline element in every browser, which silently broke both the clipping and the overflow check simultaneously. Making this a real flex item (sized by the row's own layout, shrinking via min-width:0 the same way its parent .av-cryoblue-topbar-announcement already does) gives it an actual box with a real, measurable width. */ .av-cryoblue-topbar-announcement-text { display: block; overflow: hidden; white-space: nowrap; /* max-width is UNCONDITIONAL, not gated behind .is-scrolling — an earlier version only applied this cap once JS added .is-scrolling, which meant a long announcement grew completely unbounded (full page width, forcing a horizontal scrollbar on the whole site) for however long it took the JS to run, or if it failed to run at all. This element can still be NARROWER than 320px for short text that fits comfortably (no min-width forcing it wide), but it can never be WIDER than 320px regardless of JS timing/success — the cap is pure CSS, always in effect from first paint. */ max-width: 640px; flex: none; } /* Holds TWO copies of the announcement text back-to-back (see header.php's markup — .av-cryoblue-topbar-announcement-copy x2, the second marked aria-hidden since it's a purely visual duplicate for the loop, not real content a screen reader should announce twice). Only animates when .is-scrolling is present. The keyframe translates exactly -50% — since the track is two full copies wide, -50% moves past precisely ONE copy's width, so the moment the loop restarts at 0%, copy #2 is sitting exactly where copy #1 started, and the seam is invisible. linear timing (not ease) keeps the scroll speed perfectly constant rather than speeding up/slowing down each loop, which reads as smoother for continuous ticker-style motion. */ .av-cryoblue-topbar-announcement-track { display: inline-flex; width: max-content; } .av-cryoblue-topbar-announcement-track.is-scrolling { /* Duration here is a FALLBACK only — the actual, correct duration is set per-instance via inline style by includes/js/announcement-marquee.js, calculated from the real measured text width so scroll SPEED stays constant regardless of message length (a fixed duration made short messages crawl and long ones blur past). This 40s only ever applies if that script somehow fails to run — inline animation-duration always wins over this shorthand's duration component when both are present, so this is not the value actually used in normal operation. */ animation: av-announcement-marquee 40s linear infinite; } .av-cryoblue-topbar-announcement-copy { display: inline-flex; align-items: center; padding-right: 20px; flex: none; } /* The second copy (and both copies' separators) exist purely to make the marquee LOOP seamlessly once scrolling — they serve no purpose when the text already fits and isn't scrolling at all. Hidden by default; only shown once .is-scrolling is added to the track (see includes/js/announcement-marquee.js), matching exactly the same condition that turns the animation on. Without this, short text that never needed to scroll still rendered both copies side by side with visible seam artifacts (part of the second copy peeking out past the first), which is what was actually happening — not a CSS clipping bug, just unconditionally-rendered content that should have stayed hidden until actually needed. */ .av-cryoblue-topbar-announcement-copy[aria-hidden="true"] { display: none; } .av-cryoblue-topbar-announcement-track.is-scrolling .av-cryoblue-topbar-announcement-copy[aria-hidden="true"] { display: inline-flex; } .av-cryoblue-topbar-announcement-sep { display: none; margin-left: 20px; color: var(--line-3); font-size: 20px; line-height: 1; } .av-cryoblue-topbar-announcement-track.is-scrolling .av-cryoblue-topbar-announcement-sep { display: inline; } @keyframes av-announcement-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .av-cryoblue-topbar-announcement-track.is-scrolling { animation: none; } } /* margin-left:auto now lives on .av-cryoblue-topbar-evetime (just below), not here — EVE Time renders immediately before this block in the markup, so anchoring IT to the right edge pulls this element along with it as a normal flex-flow sibling right after (the topbar's own gap:8px already spaces the two apart). This element no longer needs its own auto margin; if EVE Time is ever removed, this would need margin-left:auto restored here to keep anchoring to the right on its own. */ .av-cryoblue-topbar-social { display: flex; align-items: center; gap: 12px; } .av-cryoblue-topbar-social-label { color: var(--av-accent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; margin-right: 4px; } .av-cryoblue-topbar-social a { color: var(--av-text-muted); text-decoration: none; font-size: 14px; transition: color var(--transition-fast); } .av-cryoblue-topbar-social a:hover { color: var(--av-accent); } /* EVE Time readout — a small, dim, always-UTC live clock sitting just left of the social icons (see header.php). tabular-nums keeps each digit the same width as it ticks every second, so the colon positions and overall width stay rock-steady instead of the text subtly shifting/jittering as digits change (e.g. "1" narrower than "8" in most fonts). Deliberately dim (--av-text-dim, the theme's quietest text tone) rather than the accent color — this is ambient reference info, not something meant to compete for attention with the real nav/social elements around it. */ .av-cryoblue-topbar-evetime { display: flex; align-items: center; gap: 5px; margin-left: auto; color: var(--av-text-dim); font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .av-cryoblue-topbar-evetime-label { text-transform: uppercase; letter-spacing: 0.04em; color: var(--av-text-dim); } /* Static — UTC never changes, so unlike the ticking value span this needs no JS at all. Slightly dimmer/smaller than the time itself so it reads as a secondary detail ("here's which zone that time is in") rather than competing with the actual clock value for attention. */ .av-cryoblue-topbar-evetime-zone { font-size: 10px; color: var(--av-text-dim); opacity: 0.75; } /* Thin vertical rule separating EVE Time from Socialize Now — flex:none so it keeps its own fixed 1px width regardless of how much space the row's other flex-flow items claim; height is eyeballed against this row's own text size (11-12px + a little line-height) rather than a shared token, since nothing else in the topbar needs this same measurement. */ .av-cryoblue-topbar-divider { width: 1px; height: 14px; background: var(--line-2); flex: none; } /* NAVBAR */ .av-cryoblue-navbar { background: linear-gradient(180deg, #10141d 0%, #0b0e15 100%); border-bottom: 1px solid var(--line-2); padding: 14px 10px; } .av-cryoblue-navbar-inner { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; max-width: 1600px; margin: 0 auto; } .av-cryoblue-brand a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--av-text); transition: all var(--transition-fast); } .av-cryoblue-brand-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--av-accent); color: var(--av-accent); font-family: 'Michroma', sans-serif; font-weight: 700; font-size: 14px; flex-shrink: 0; } .av-cryoblue-brand-name { font-size: 17px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; } .av-cryoblue-nav-links { list-style: none; display: flex; gap: 24px; margin: 0; padding: 0; flex: 1; flex-wrap: wrap; } .av-cryoblue-nav-links a { color: var(--av-text-muted); text-decoration: none; font-family: 'Michroma', sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; transition: color var(--transition-fast); } .av-cryoblue-nav-links a:hover, .av-cryoblue-nav-links a.active { color: var(--av-accent); } .av-cryoblue-nav-auth { display: flex; align-items: center; gap: 10px; margin-right: 20px; } /* BODY LAYOUT — ADMIN PANEL ONLY */ .av-cryoblue-body-layout { display: flex; align-items: flex-start; gap: 20px; width: 100%; max-width: 1600px; margin: 0 auto; padding: 10px; } /* PUBLIC PAGE REGIONS */ .av-regions-row { display: flex; gap: 20px; margin-bottom: 8px; } .av-regions-row-triple { display: flex; gap: 10px; margin-bottom: 8px; align-items: flex-start; } .av-cryoblue-sidebar { width: 260px; flex-shrink: 0; } .av-cryoblue-main { flex: 1; min-width: 0; } /* ── PUBLIC SIDE RAIL ──────────────────────────────────────── Mirrors the admin rail's visual design and collapse behaviour for the public site. position:fixed — same as .av-admin-rail in admin.css — so it spans full viewport height regardless of where it sits in the DOM. Rail width tokens match the admin rail exactly (220px expanded, 68px collapsed) so the offset numbers below stay in sync with no extra work. Body classes (set server-side from cookie in header.php): .has-public-rail — always on public pages .public-rail-collapsed — added when cookie is '1' These classes drive the topbar/navbar/main offsets so the correct layout is present on first paint, before any JS runs. Cookie: av_public_rail_collapsed (same pattern as the admin's av_admin_rail_collapsed). JS toggle is in header.php. ──────────────────────────────────────────────────────────── */ /* Topbar/navbar and main: offset for the collapsed rail only (84px / 68px). The expanded rail is position:fixed and overlays as a fixed layer — nothing reflows when it opens. Full-width backgrounds stay intact. */ body.has-public-rail .av-cryoblue-topbar, body.has-public-rail .av-cryoblue-navbar { padding-left: 84px; /* 68px collapsed rail + 16px breathing room */ } /* The margin clears the COLLAPSED rail (68px), which is position:fixed and would otherwise paint over the start of this column. It is mirrored on the right for one reason: anything centred inside main -- every .av-card page, login/register/forgot-password/reset-password -- centres against main's content box, so a one-sided offset put all of them half the margin (34px) right of true page centre. Matching the right side keeps main symmetric within the centred .av-cryoblue-body-layout, so `margin: 0 auto` on a card lands where the eye expects. Keep these two values equal. Changing one alone silently un-centres every card page on the site, and the drift is small enough to look like a design choice rather than a bug. */ body.has-public-rail .av-cryoblue-main { margin-left: 68px; margin-right: 68px; } /* The footer lands on main's content column, and the two numbers are derived from main's rather than guessed at. 78px = body-layout's own 10px padding + main's 68px margin 1444px = 1600px body-layout cap - 20px its padding - 136px those margins Below a 1600px viewport the cap is inert and the 78px does the work; above it the padding is inert and the cap does. Both are needed, and MEASURING is the only way to get this right — the obvious version of this rule (78px padding plus a 1600px cap, matching body-layout's own width) lands the content at x=160 on a 1920px screen while main sits at x=238, which is still inside the 220px expanded rail. That is the bug this rule exists to fix, surviving the fix. Both selectors, because Theme::renderBlock() emits a footer block as a SIBLING of .av-cryoblue-footer-inner rather than inside it, so a block never inherited that wrapper's constraint. */ body.has-public-rail .av-cryoblue-footer { /* THE MARGIN IS THE POINT, not the padding. Padding would move the content and leave the BAR's background still painting the full width underneath the rail — the footer visibly running over the side menu. The margin stops the bar dead at the collapsed rail's edge instead, so the two abut and share no pixel at all. 68 + 10 = the 78 that was here before, so the content box does not move: same left edge, same width, still aligned to main. */ margin-left: 68px; padding-left: 10px; padding-right: 78px; } body.has-public-rail .av-cryoblue-footer-inner, body.has-public-rail .av-cryoblue-footer > .block-wrapper { max-width: 1444px; margin-left: auto; margin-right: auto; } .av-public-rail { flex: none; width: 220px; display: flex; flex-direction: column; gap: 10px; /* One step darker than --bg-1, same as the admin rail — a bespoke hex rather than a new token since nothing else needs this exact shade. */ background: #071019; border-right: 1px solid var(--line-2); padding: 20px 16px; /* No separate bottom padding — the shorthand's 20px stands. It used to be 70px, reserving room so the rail ducked under a footer that painted over its bottom edge. Neither half of that is true now: the rail outranks the footer, and the footer bar stops at the rail's edge rather than crossing it, so there is nothing to duck. */ position: fixed; top: 0; left: 0; bottom: 0; /* ONE ABOVE THE FOOTER (10), and no higher. The rail takes top place over the footer, full stop — it is a full-height fixed column and its collapse toggle lives at the bottom, so a footer painting over it made the toggle unclickable and the menu impossible to reopen. 11 rather than a big number because everything that outranked the rail at 5 must still outrank it: toast 50, dropdowns 300 (a navbar dropdown opens inside the expanded rail's column), and the 1000 overlays. Note the collapsed rail's tooltip ::after composites at THIS value, not its own 10200 — the rail is a stacking context — so the tooltip rises with the rail and still loses to all three. */ z-index: 11; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; } /* Brand row — icon + site name + sub-label */ .av-public-rail-brand { display: flex; align-items: center; gap: 10px; padding: 0 4px; flex-shrink: 0; } .av-public-rail-brand-icon { flex: none; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--av-accent); color: var(--av-accent); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; font-family: 'Michroma', sans-serif; } .av-public-rail-brand-text { display: flex; flex-direction: column; min-width: 0; } .av-public-rail-brand-name { font-family: 'Michroma', sans-serif; font-size: 11px; font-weight: 400; letter-spacing: 0.02em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .av-public-rail-brand-sub { font-size: 10px; color: var(--av-text-dim); text-transform: uppercase; letter-spacing: 0.08em; } /* Nav links */ .av-public-rail-nav { display: flex; flex-direction: column; gap: 2px; } .av-public-rail-nav a { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 7px; border: 1px solid transparent; color: var(--av-text-muted); font-size: 13px; text-decoration: none; transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast); } .av-public-rail-nav a:hover { border-color: var(--line-2); color: var(--av-accent); box-shadow: var(--glow-accent); } .av-public-rail-nav a:hover i { color: var(--av-accent); } .av-public-rail-nav a.active { background: var(--bg-3); border-color: var(--line-2); color: var(--av-accent); } .av-public-rail-nav a.active i { color: var(--av-accent); } .av-public-rail-nav a i { font-size: 16px; flex: none; transition: color var(--transition-fast); color: var(--av-text-muted); } .av-public-rail-nav a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Collapse/expand toggle — margin-top:auto pushes it to the bottom of the flex column, above the footer divider. Same pattern as .av-admin-rail-toggle in admin.css. */ .av-public-rail-toggle { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: auto; padding: 6px 10px; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--av-text-muted); font-size: 13px; font-weight: 400; text-align: left; text-transform: none; letter-spacing: normal; cursor: pointer; flex-shrink: 0; transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast); } .av-public-rail-toggle:hover { color: var(--av-accent); border-color: transparent; background: transparent; box-shadow: none; transform: none; } .av-public-rail-toggle:hover i { color: var(--av-accent); } .av-public-rail-toggle i { font-size: 24px; flex: none; display: block; color: var(--av-text-dim); transition: color var(--transition-fast); } .av-public-rail-toggle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .av-public-rail-divider { height: 1px; /* Accent, not --line-3: fading dividers are accent blue (2026-09-19); the amber ones are the shine rules, which set their own colour. */ background: linear-gradient(90deg, transparent, var(--av-accent), transparent); opacity: 0.6; flex: none; flex-shrink: 0; } /* Footer strip — back-to-site link, always at the bottom */ .av-public-rail-footer { display: flex; flex-direction: column; gap: 10px; padding-top: 0; flex-shrink: 0; } .av-public-rail-backlink { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--av-text-dim); text-decoration: none; padding: 2px 4px; border-radius: 5px; transition: color var(--transition-fast); } .av-public-rail-backlink:hover { color: var(--av-accent); } .av-public-rail-backlink i { font-size: 14px; flex: none; } .av-public-rail-backlink span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Collapsed state (desktop only, min-width:901px) ───────── Hides text, centers icons — exact mirror of the admin rail's .is-rail-collapsed rules in admin.css. Class toggled on .av-public-rail by js/cryoblue-rail.js; header.php draws it from the cookie for first paint. */ @media (min-width: 901px) { .av-public-rail.is-rail-collapsed { width: 68px; padding-left: 14px; padding-right: 14px; } .av-public-rail.is-rail-collapsed .av-public-rail-brand { justify-content: center; } .av-public-rail.is-rail-collapsed .av-public-rail-brand-text { display: none; } .av-public-rail.is-rail-collapsed .av-public-rail-nav a { justify-content: center; padding: 9px 0; } .av-public-rail.is-rail-collapsed .av-public-rail-nav a span { display: none; } .av-public-rail.is-rail-collapsed .av-public-rail-toggle { justify-content: center; padding: 9px 0; } .av-public-rail.is-rail-collapsed .av-public-rail-toggle span { display: none; } .av-public-rail.is-rail-collapsed .av-public-rail-backlink { justify-content: center; } .av-public-rail.is-rail-collapsed .av-public-rail-backlink span { display: none; } } /* ── Mobile (≤900px): horizontal bar ──────────────────────── Becomes position:static (back into flex flow), full-width, horizontal — same treatment as .av-admin-rail on mobile in admin.css. Offsets on topbar/navbar/main all reset to 0. */ @media (max-width: 900px) { body.has-public-rail .av-cryoblue-topbar, body.has-public-rail .av-cryoblue-navbar, body.has-public-rail.public-rail-collapsed .av-cryoblue-topbar, body.has-public-rail.public-rail-collapsed .av-cryoblue-navbar { padding-left: 10px; } body.has-public-rail .av-cryoblue-main, body.has-public-rail.public-rail-collapsed .av-cryoblue-main { /* Both sides, not just the left. The rail is position:static here and sits above the content as a horizontal bar, so neither offset is doing anything except stealing width. */ margin-left: 0; margin-right: 0; } /* Same reasoning for the footer's inset — there is no fixed column to clear once the rail is a horizontal bar, so 78px each side is pure lost width on the narrowest screens. Back to the base 10px, and the margin goes with it or the bar carries a 68px notch beside nothing. */ body.has-public-rail .av-cryoblue-footer { margin-left: 0; padding-left: 10px; padding-right: 10px; } body.has-public-rail .av-cryoblue-body-layout { flex-direction: column; gap: 0; } .av-public-rail { width: 100%; position: static; flex-direction: row; align-items: center; gap: 16px; overflow-x: auto; overflow-y: visible; border-right: none; border-bottom: 1px solid var(--line-2); padding: 8px 16px; padding-bottom: 8px; } .av-public-rail-toggle { display: none; } .av-public-rail-nav { flex-direction: row; flex: none; } .av-public-rail-nav a span { display: none; } .av-public-rail-footer { margin-top: 0; margin-left: auto; flex-direction: row; align-items: center; padding-top: 0; border-top: none; flex: none; } } /* FOOTER — body's last grid row, in normal flow. It is NOT fixed; see body's comment for why a block region cannot be. THE PUBLIC RAIL OUTRANKS THIS, deliberately — see .av-public-rail's z-index:11. An earlier version of this comment argued the opposite, and the reason it gave was real: a rail lifted above a FULL-BLEED footer painted its column over the left edge of footer blocks. The fix was not to keep the footer on top but to stop the two overlapping — the has-public-rail rule below now ends the bar at the collapsed rail's edge, so the rail can win without covering anything. What that rule protects is the rail's collapse toggle, which sits at the rail's bottom and was unreachable underneath a tall footer. z-index:10 still matters for the ADMIN rail, which is z-index:5 and has no such inset — admin.css's own comment depends on the footer painting above it, and body.has-public-rail never applies there. Full-bleed bar on admin and mobile; on the public desktop layout the bar starts at the rail's edge. Content is inset either way. */ .av-cryoblue-footer { background: #060810; border-top: 1px solid var(--line-2); padding: 10px; margin-top: 32px; position: relative; z-index: 10; box-sizing: border-box; } .av-cryoblue-footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; max-width: 1600px; margin: 0 auto; } .av-cryoblue-footer-copyright { position: relative; display: inline-block; color: var(--av-text-dim); font-size: 12px; padding-bottom: 6px; margin-left: auto; } .av-cryoblue-footer-copyright::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: linear-gradient(to left, var(--av-accent), transparent); } /* GENERIC BLOCK SYSTEM */ .block-wrapper { background: var(--av-panel); border: 1px solid var(--line-2); border-radius: 6px; padding: 22px; box-shadow: 0 0 12px rgba(74, 158, 255, 0.12), 0 0 24px rgba(74, 158, 255, 0.06), inset 0 0 16px rgba(74, 158, 255, 0.08), var(--shadow-md); transition: all var(--transition-normal); margin-bottom: 12px; position: relative; overflow: hidden; } /* Corner accent glow — same radial-gradient sunburst the admin section cards use (see includes/css/admin.css .settings-section::after). inset:0 fills the full card so the gradient scales with the block's dynamic height automatically; pointer-events:none keeps it decorative. */ .block-wrapper::after { content: ''; position: absolute; inset: 0; border-radius: 6px; background: radial-gradient(circle at top left, rgba(86, 184, 232, 0.16), transparent 30%); pointer-events: none; } /* The percentage stop (30%) scales with block dimensions — on narrow sidebar blocks (~200px wide) 30% = only ~60px of actual reach, making the glow look underpowered vs. the wide top/center blocks. A fixed pixel radius gives sidebar blocks the same absolute spread regardless of their width. opacity also lifted slightly to compensate for nav-link backgrounds absorbing the gradient in content-dense blocks like sidenav. */ .block-wrapper[data-region="sidebar-left"]::after, .block-wrapper[data-region="sidebar-right"]::after { background: radial-gradient(circle at top left, rgba(86, 184, 232, 0.18), transparent 140px); } .block-wrapper:hover { border-color: var(--line-2); box-shadow: 0 0 12px rgba(74, 158, 255, 0.12), 0 0 24px rgba(74, 158, 255, 0.06), inset 0 0 16px rgba(74, 158, 255, 0.08), var(--shadow-md); } .block-heading { display: flex; align-items: center; gap: 8px; font-family: 'Michroma', sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--av-accent); margin: -22px -22px 16px -22px; padding: 10px 16px; background: linear-gradient(to right, rgba(86, 184, 232, 0.14), transparent); border-radius: 5px 5px 0 0; border-bottom: 1px solid var(--line-1); overflow: hidden; overflow-wrap: anywhere; min-width: 0; } .block-heading-sub { margin-left: auto; font-size: 11px; color: var(--av-text-dim); text-transform: none; font-weight: 400; } .block-heading-link { color: var(--av-accent); margin-left: auto; font-size: 11px; } .block-heading-link:hover { color: var(--av-accent); } .text-muted { color: var(--av-text-muted); } .text-dim { color: var(--av-text-dim); } /* Emitted by Theme::renderBlock() around every dispatched block's output. No box of its own — .block-wrapper already provides the card; this is just a hook themes can use to target block content specifically. */ .block-content { display: block; } /* When the engine renders a block, .block-heading is an

, so the browser's default h3 margin/size has to be neutralised — home.php's static cards use a
and never hit this. */ h3.block-heading { font-size: 12px; } /* Menu block (blocks/menu.php) */ .block-menu { display: flex; flex-direction: column; gap: 18px; } .block-menu__section { display: flex; flex-direction: column; } .block-menu__heading { font-family: 'Michroma', sans-serif; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--av-accent); margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line-2); } .block-menu__links { list-style: none; margin: 0; padding: 0; } .block-menu__links li { margin: 0; } .block-menu__links a { display: block; padding: 5px 0 5px 4px; color: var(--av-text-muted); font-size: 13px; transition: all var(--transition-fast); } .block-menu__links a:hover { color: var(--av-accent); padding-left: 8px; } .block-menu__empty { font-size: 13px; color: var(--av-text-dim); font-style: italic; margin: 0; } /* In the nav region a menu lays out horizontally and drops its section headings — a single-row bar isn't the place for category labels. */ .av-region-nav .block-menu { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 24px; } .av-region-nav .block-menu__section { flex-direction: row; } .av-region-nav .block-menu__heading { display: none; } .av-region-nav .block-menu__links { display: flex; flex-wrap: wrap; gap: 4px 20px; } .av-region-nav .block-menu__links a { padding: 4px 0; } .av-region-nav .block-menu__links a:hover { padding-left: 0; } /* Nav region blocks: hide headings, reduce width by half, and center */ .av-region-nav .block-heading { display: none; } .av-region-nav .block-wrapper { max-width: 50%; margin: 0 auto; } .block-actions { display: flex; align-items: center; gap: 16px; margin-top: 16px; flex-wrap: wrap; } .btn { display: inline-block; background: var(--bg-3); border: 1px solid var(--line-2); color: var(--av-text); padding: 10px 18px; border-radius: 4px; font-size: 12px; text-transform: uppercase; font-weight: 600; cursor: pointer; transition: all var(--transition-normal); } .btn:hover { border-color: var(--av-accent); background: var(--bg-4); color: var(--av-accent); box-shadow: var(--glow-accent); transform: scale(var(--av-hover-scale)); } /* The transition below is deliberately an EXPLICIT property list rather than `transition: all` — this is the one thing that makes textarea resizing feel sluggish, and it is fixed here once for every form control on the public side rather than per field. `all` means literally all animatable properties, and `height` is one of them. Dragging a textarea's resize handle changes height directly, so with `all` the browser animates every single drag frame over --transition-fast (120ms): the box trails the pointer instead of tracking it, and releasing the mouse leaves it still catching up. Nothing about the drag itself is slow — the transition is doing exactly what it was told to do, to a property that should never be animated. Naming the three properties that actually need to animate (the :focus state below changes border-color, box-shadow and background, and nothing else) keeps that feedback smooth while leaving height/width to follow the pointer instantly. Because this sits on the bare `textarea`/`input`/`select` selectors, every textarea on the public side — current and future, in any template or block, with no per-field CSS — gets the correct behaviour automatically. Do NOT reintroduce `transition: all` here or add one to an individual textarea. Mirrors .av-admin textarea in themes/av_cryoblue/style/admin.css, which uses the same explicit list for the same reason. */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select { width: 100%; max-width: 100%; padding: 10px; margin-bottom: 10px; border-radius: 4px; border: 1px solid var(--line-2); background: #09141b; color: var(--av-text); font-size: 13px; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); } textarea { resize: vertical; } /* The resize grip, where the browser lets it be drawn (Blink and WebKit; Gecko keeps its own): the stock grey strokes redrawn in the accent, dim at rest and full on focus like the border. The admin stylesheet draws the same grip in its own tokens. */ textarea::-webkit-resizer { width: 14px; height: 14px; border-bottom-right-radius: 3px; background: linear-gradient( 135deg, transparent 0 calc(100% - 10px), rgba(86, 184, 232, 0.55) calc(100% - 10px) calc(100% - 8px), transparent calc(100% - 8px) calc(100% - 5px), rgba(86, 184, 232, 0.55) calc(100% - 5px) calc(100% - 3px), transparent calc(100% - 3px) ); } textarea:focus::-webkit-resizer { background: linear-gradient( 135deg, transparent 0 calc(100% - 10px), var(--av-accent) calc(100% - 10px) calc(100% - 8px), transparent calc(100% - 8px) calc(100% - 5px), var(--av-accent) calc(100% - 5px) calc(100% - 3px), transparent calc(100% - 3px) ); } /* A field's refusal, drawn by includes/js/form-validation.js under the control it belongs to — the theme's answer to the browser's bubble, which cannot be styled. Sits on every page, admin and public; the admin's own input rules leave these two alone. aria-invalid is what the script sets, so the border follows the message. */ .av-field-error { color: var(--bad); font-size: 12px; line-height: 1.4; margin: -4px 0 10px; } /* Unfocused, the border says invalid; focused, the theme's accent border and glow stay (they are the focus cue) and a red ring joins them, so the field the script just focused still reads as focused. */ [aria-invalid="true"]:not(:focus) { border-color: var(--bad) !important; } [aria-invalid="true"]:focus { box-shadow: 0 0 0 2px rgba(235, 104, 114, 0.45) !important; } /* Show/hide password — includes/js/password-reveal.js wraps every password input in .av-password-field and puts the eye inside the box. The wrapper takes over the input's 10px bottom margin so the field's footprint does not change and the eye centres on the input rather than on input-plus-margin; the admin's inputs carry no margin and its wrapper carries none either (admin.css). The right padding keeps typed text from running under the eye. The input's type flips to text while shown, so both types are styled. */ .av-password-field { position: relative; display: block; margin-bottom: 10px; } .av-password-field > input[type="password"], .av-password-field > input[type="text"] { margin-bottom: 0; padding-right: 40px; } .av-password-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 28px; height: 28px; padding: 0; margin: 0; border: 0; border-radius: 4px; background: transparent; color: var(--av-text-dim, #728996); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color var(--transition-fast), background var(--transition-fast); } .av-password-toggle:hover, .av-password-toggle[aria-pressed="true"] { color: var(--av-accent, #56b8e8); } .av-password-toggle:hover { background: rgba(86, 184, 232, 0.08); } .av-password-toggle:focus-visible { outline: 2px solid var(--av-accent, #56b8e8); outline-offset: 1px; } /* Present for assistive tech, invisible otherwise — the validation script's live region. */ .av-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Browser autofill (username/password fields especially) forces its own background color the moment a field is recognized/filled, ignoring a plain background-color rule entirely — this is a browser-level style with higher precedence, not something the theme's own CSS specificity can win against normally. The standard workaround: an enormous inset box-shadow the same color as the theme's input background, which visually paints over the autofill color from the inside without actually touching background-color (autofill styling doesn't override box-shadow). The absurd transition delay keeps Chrome's own "flash to yellow, animate back" from being visible at all. -webkit-text-fill-color is needed separately because autofill also forces its own text color, which -webkit-box-shadow does nothing to fix on its own. Firefox uses a different (saner) mechanism — filter: none on its own :autofill pseudo-class turns off its own tinting instead of needing this at all. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px #09141b inset !important; -webkit-text-fill-color: var(--av-text) !important; caret-color: var(--av-text); transition: background-color 600000s ease-in-out 0s; } input:autofill { filter: none; } input:focus, textarea:focus, select:focus { border-color: var(--av-accent); box-shadow: var(--glow-accent); background: #0b1820; outline: none; } input[type="radio"] { accent-color: var(--av-accent); } /* CHECKBOX — the admin's (.av-admin input[type="checkbox"] in admin.css), drawn here for the public side in the public tokens: appearance:none drops the native widget, the box takes the theme's input background and border, a checked box the accent border and glow, and a ::before draws the tick with a clip-path so no markup or image is needed. Global, so the login block, login.php, the header's popup, the account page and the forum's search and split forms all agree with the admin rather than with the operating system. The focus handling is the admin's too — see its comment for why both outline and box-shadow are zeroed, and why the checked glow is re-declared. */ input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; padding: 0; margin: 0; border-radius: 4px; border: 1px solid var(--line-2); background: #09141b; cursor: pointer; vertical-align: middle; position: relative; flex: none; transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast); } input[type="checkbox"]:hover { border-color: var(--line-3); background: #0b1820; } input[type="checkbox"]:checked { background: rgba(86, 184, 232, 0.18); border-color: var(--av-accent); box-shadow: 0 0 6px rgba(86, 184, 232, 0.35); } input[type="checkbox"]::before { content: ''; position: absolute; inset: 2px; background: var(--av-accent); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 14%, 80% 0%, 43% 62%); opacity: 0; transition: opacity var(--transition-fast); } input[type="checkbox"]:checked::before { opacity: 1; } input[type="checkbox"]:focus, input[type="checkbox"]:focus-visible { outline: none; box-shadow: none; background: #09141b; } input[type="checkbox"]:checked:focus, input[type="checkbox"]:checked:focus-visible { box-shadow: 0 0 6px rgba(86, 184, 232, 0.35); background: rgba(86, 184, 232, 0.18); } /* The admin shell's checkboxes keep the admin's own rule; this one is for the public side and the two agree, so the guard is belt and braces against the public focus rule above reaching in. */ .av-admin input[type="checkbox"]:focus { background: var(--aa-input-bg); } /* DROPDOWN MENUS */ .av-dropdown { position: relative; width: 100%; display: inline-block; } /* font-family: inherit on the trigger and the options, because both are