/* ─── DESIGN SYSTEM (สอวช. ACCENT) ─── */ /* The one place these values live. Linked by every page that uses them, so a colour change lands everywhere instead of in whichever template got edited. */ :root { /* light-dark() picks by the element's color-scheme, so each colour is stated once instead of once here and again in a dark override block. It also gets form controls, scrollbars and the canvas themed without any rule of ours. Light by default because theme.css is linked by the Bootstrap pages too, and a dark canvas under their hand-written light styling is worse than no dark mode. Opting in is the .theme-adaptive class below. */ color-scheme: light; /* Brand ramp. Deliberately the same in both themes: its only surface use is the navy header gradient, which already reads as dark. */ --sova-dark: #003087; /* Navy Blue */ --sova-mid: #0057B8; /* Blue */ --sova-light: #0099DC; /* Sky Blue */ --sova-accent: #F7941D; /* Orange */ --sova-accent-hover: #e8820f; --sova-pale: light-dark(#E0F3FC, #16324F); --sova-bg: light-dark(#F0F7FF, #0B1424); --surface: light-dark(#FFFFFF, #111E33); --text: light-dark(#0A1F44, #E6EEF8); --text-mid: light-dark(#2D4A6B, #B3C6DC); --text-muted: light-dark(#6B87A8, #8FA6C0); --border: light-dark(#BDD5ED, #24374F); /* Split out of the brand ramp: --sova-dark and --sova-mid were doing double duty as link and emphasis text, and text has to lift on a dark background while the gradient must not. */ --link: light-dark(#0057B8, #7FC0EC); --strong: light-dark(#003087, #BFE0F7); /* The tint just off the surface: table stripes, panel headers, chips, the inside of a card that sits on another card. The public and admin pages had six near-identical near-whites doing this between them. */ --surface-2: light-dark(#F7FAFF, #16243B); /* Placeholders. Darker than --text-muted on light, which lands at 3.7:1 and would be a step down from the UA's own placeholder. Picked as the first step down this hue that clears 4.5:1 on white, at 4.63, and still sits well clear of --text-mid at 9.1 so a placeholder still reads as one. The muted value is already fine against a dark surface, at 6.67. */ --placeholder: light-dark(#5A7799, #8FA6C0); --white: #FFFFFF; --shadow: 0 8px 30px rgba(0,48,135,0.06); --shadow-lg: 0 12px 40px rgba(0,48,135,0.12); --radius: 12px; --danger-bg: light-dark(#fcdbd9, #3A1A1A); --danger-border: light-dark(#feb8b8, #6B2C2C); --danger-text: light-dark(#c53030, #FCA5A5); /* The solid destructive button, white text on red. Constant across themes: it reads on either background, and a destructive control is the last thing that should change weight between them. */ --danger: #dc2626; --danger-hover: #b91c1c; } /* Set on by a layout whose whole palette comes from the tokens above. The bare class is "follow the system"; data-theme pins it either way, and is written by the picker in settings. No attribute and no script still renders, which is why the default lives on the class and not in JS. */ :root.theme-adaptive { color-scheme: light dark; } :root.theme-adaptive[data-theme=light] { color-scheme: light; } :root.theme-adaptive[data-theme=dark] { color-scheme: dark; } /* Tailwind preflight is deliberately left out of these pages: it would reset the hand-written CSS. These two rules are the parts of it we do want. */ *, ::before, ::after { box-sizing: border-box; } body { margin: 0; } /* ─── SIGNED-IN USER BLOCK (navbars) ─── */ /* Shared by the public navbar and the admin one, which used to carry a copy each. They had already drifted apart on avatar size and button style, and a layout bug fixed in one stayed broken in the other. The markup that goes with these lives in templates/_macros.html. flex-shrink and nowrap throughout: these sit at the end of a nav row, and a flex item shrinks past its size by default, which turned the avatar into an oval and broke the labels in two. The name is what gives instead. */ .nav-user { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.15); padding: 6px 12px; border-radius: 8px; /* No colour of its own, so the name takes the page's. This used to be var(--white), from when both navbars were a navy gradient. The UI kit paints them white and states a dark colour for this block on the admin page, but says nothing about it on the public one, where its own base leaves the colour to inheritance too. White survived there and put the signed-in name at 1:1 against the bar behind it. */ min-width: 0; /* Pinned rather than inherited, because nothing inside this block sizes itself off it except the role badge's line box, and that is enough to make the chip 8px taller wherever the surrounding navbar happens to use a larger body size. 14px/normal is what the public navbar already passed down, so stating it changes nothing there and brings the admin chip to the same height. */ font-size: 14px; line-height: normal; } .nav-user-avatar { width: 32px; height: 32px; flex-shrink: 0; background: var(--sova-accent); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; text-decoration: none; } /* flex: 1 1 0 rather than the default auto basis: an auto-basis item refuses to shrink below its text, so in a narrow navbar the sign-out button gets pushed out of the chip instead. A zero basis makes this block give way first, so the name ellipsises and the row stays intact. (This started as a fix for the kit's flex-wrap on the admin chip, which is gone now; the rule is what keeps the row from overflowing either navbar without it.) */ .nav-user-meta { flex: 1 1 0; min-width: 0; } .nav-user-name { display: block; font-weight: 700; font-size: 12px; color: inherit; text-decoration: none; /* A long name is the only thing wide enough to break this row: without a cap it pushes the sign-out button onto a second line, and the chip turns into a ragged two-line block as tall as the navbar. Truncating is what the min-width: 0 above was already for, it just never had the ellipsis to go with it. Kept here rather than in the UI kit sheet: the kit sets this element's size but says nothing about overflow, so this completes our own base instead of contradicting theirs. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-user-name:hover { text-decoration: underline; } .nav-role-badge { display: inline-block; white-space: nowrap; font-size: 9px; /* A tint and an outline rather than a white fill. White was invisible as a shape once the navbars turned white: the text read, the pill did not. The outline is what carries it, since the tint alone is nearly the surface. Stated in tokens the kit redefines, so on a kit page these are its #E2E8F0 and its surfaces, not ours. */ background: var(--surface-2); border: 1px solid var(--border); color: var(--sova-dark); padding: 1px 6px; border-radius: 10px; font-weight: 700; margin-top: 2px; } .logout-btn { white-space: nowrap; flex-shrink: 0; /* Was a translucent white fill and border, which on a white navbar is no button at all. These are the same two values the kit's admin sheet states for this control, written as tokens so a kit page uses its palette. */ background: var(--surface); border: 1px solid var(--border); /* Same story as .nav-user above, except here the kit has the bug too: its own public base sets this to rgba(255,255,255,.8) and its override sheet never revisits it, so sign-out is white on the white bar the kit itself paints. The admin sheet does restate it, as var(--text), which is the value taken here. The translucent background and border stay: they are invisible on white and the admin sheet replaces them anyway. */ color: var(--text); font-family: inherit; font-size: 11px; /* 600 and 8px rather than 700 and 6px, to match what the public page already renders: the kit's blanket `button` rule there restates both as important declarations, so the base never showed on that side. Taking its values here is what makes the admin chip match the homepage one, and it costs nothing on a page where the kit wins anyway. */ font-weight: 600; padding: 4px 10px; border-radius: 8px; cursor: pointer; transition: .2s; margin-left: 10px; } .logout-btn:hover { background: var(--surface-2); }