/* ==========================================================================
Aetia Talent Agency — Design System
"Green-charcoal / champagne-gold" premium dark-luxe theme.
Follows device prefers-color-scheme until the user toggles (data-theme,
set by public/sites/aetia/theme.js — explicit choice persisted, no FOUC).
Emerald is the single interactive/accent hue; champagne gold is reserved
for detail work — hairlines, small-caps labels, the brand mark, review/
pending states. Fraunces (serif) carries hero moments (h1–h6, .title,
.subtitle, the tombstone headline); a system grotesk sans runs
everything else (UI chrome, body copy, tables, forms) for density and
legibility. Bulma-compatible class names are kept throughout — that is
the vocabulary every view in views/sites/aetia/* already speaks; this
file is a full visual rewrite underneath those same selectors, so no
view needs to change to pick up the new look.
Source of truth for the visual language: the approved mockup reviewed
2026-07-02 (glass cards, hairline borders, restrained emerald glow,
pill buttons, gold-tinted hairlines, champagne small-caps eyebrows).
Sections:
1. Design tokens (theme-invariant + dark/light token blocks)
2. Reset & base
3. Typography
4. Layout — container / section / columns grid
5. Page wrapper + emerald glow
6. Navigation bar
7. Hero
8. Buttons
9. Forms
10. Cards & boxes
11. Tables
12. Notifications & messages
13. Modals
14. Dropdowns
15. Tags & badges
16. Breadcrumbs
17. Pagination
18. Footer
19. Level / media / panel
20. Icons & icon-text
21. Utilities — spacing, text, background, size, display, flex
22. Aetia-specific components (service/about cards, avatars, stat
cards, quick actions, activity, email logs, archive, legal,
SweetAlert2, print)
23. Host-branch chrome (preview bar, footer lockup, tombstone)
24. /me/profile — avatar block + themed file input
25. /me/messages — thread list + discussion timeline
26. Staff console — /admin/* (tabs, stat grid, filter bar, actions)
========================================================================== */
/* --------------------------------------------------------------------------
1. Design tokens
-------------------------------------------------------------------------- */
/* Theme-invariant tokens: radii, spacing scale, type stacks, layout. Fraunces
is loaded via in partials/layout.php (Google Fonts — CSP style-src/
font-src already allow fonts.googleapis.com / fonts.gstatic.com); the
grotesk sans is a native stack, no webfont round-trip needed for UI text. */
:root {
--aetia-radius-sm: 9px;
--aetia-radius: 14px;
--aetia-radius-lg: 20px;
--aetia-radius-xl: 28px;
--aetia-radius-pill: 999px;
--aetia-space-1: 0.25rem;
--aetia-space-2: 0.5rem;
--aetia-space-3: 0.75rem;
--aetia-space-4: 1rem;
--aetia-space-5: 1.25rem;
--aetia-space-6: 1.5rem;
--aetia-space-8: 2rem;
--aetia-space-10: 2.5rem;
--aetia-space-12: 3rem;
--aetia-space-16: 4rem;
/* 1280px, not the mockup's 1120px — the console side of this app
(talent tables, staff filter bars, stat grids) needs the extra room;
the visual language (glass/hairline/emerald) travels fine at this
width. */
--aetia-container-max: 1280px;
--aetia-navbar-height: 4.5rem;
--aetia-font-display: "Fraunces", ui-serif, "Hoefler Text", "Iowan Old Style", Georgia, serif;
--aetia-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--aetia-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
}
/* ---- DARK — device prefers dark (auto), or user-locked dark ---- */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--aetia-ground: #0B0E0C;
--aetia-ground-2: #0E1210;
--aetia-surface: #121714;
--aetia-surface-2: #171E1A;
--aetia-surface-3: #1C2420;
--aetia-ink: #ECEBE2;
--aetia-muted: #97A19A;
--aetia-faint: #5C665F;
--aetia-emerald: #2FB27C;
--aetia-emerald-bright: #46D19A;
--aetia-emerald-deep: #135538;
--aetia-gold: #CBA85E;
--aetia-gold-bright: #E4C98A;
--aetia-hairline: rgba(203, 168, 94, 0.16);
--aetia-hairline-strong: rgba(203, 168, 94, 0.30);
--aetia-glass: rgba(255, 255, 255, 0.022);
--aetia-glass-hi: rgba(255, 255, 255, 0.05);
--aetia-shadow-sm: 0 10px 26px -16px rgba(0, 0, 0, 0.70);
--aetia-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.80);
--aetia-shadow-lg: 0 32px 80px -28px rgba(0, 0, 0, 0.85);
--aetia-glow:
radial-gradient(60% 60% at 72% 8%, rgba(47, 178, 124, 0.20), transparent 70%),
radial-gradient(50% 40% at 8% 30%, rgba(203, 168, 94, 0.08), transparent 70%);
--aetia-crit: #E06A5B;
--aetia-crit-2: #B4463A;
/* Info accent — a cool teal-blue, deliberately distinct from emerald
(success) and gold (warning) so the four semantic states never read
as "two greens and two ambers". */
--aetia-info: #5FA8D9;
--aetia-info-2: #3E82AF;
/* Text painted onto a solid emerald fill (primary buttons, active tabs,
unread pagination). Dark theme: near-black warm ink reads best on the
brighter emerald swatch. */
--aetia-on-emerald: #04130C;
/* Compat aliases — a couple of Aetia views set `style="color:var(--aetia-text-dim)"`
/ `var(--aetia-info)` inline (admin/messages.php, me/messages.php,
pricing.php); these names must keep resolving even though this file
otherwise uses --aetia-faint / the semantic set below directly. */
--aetia-text-dim: var(--aetia-faint);
}
}
html[data-theme="dark"] {
color-scheme: dark;
--aetia-ground: #0B0E0C;
--aetia-ground-2: #0E1210;
--aetia-surface: #121714;
--aetia-surface-2: #171E1A;
--aetia-surface-3: #1C2420;
--aetia-ink: #ECEBE2;
--aetia-muted: #97A19A;
--aetia-faint: #5C665F;
--aetia-emerald: #2FB27C;
--aetia-emerald-bright: #46D19A;
--aetia-emerald-deep: #135538;
--aetia-gold: #CBA85E;
--aetia-gold-bright: #E4C98A;
--aetia-hairline: rgba(203, 168, 94, 0.16);
--aetia-hairline-strong: rgba(203, 168, 94, 0.30);
--aetia-glass: rgba(255, 255, 255, 0.022);
--aetia-glass-hi: rgba(255, 255, 255, 0.05);
--aetia-shadow-sm: 0 10px 26px -16px rgba(0, 0, 0, 0.70);
--aetia-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.80);
--aetia-shadow-lg: 0 32px 80px -28px rgba(0, 0, 0, 0.85);
--aetia-glow:
radial-gradient(60% 60% at 72% 8%, rgba(47, 178, 124, 0.20), transparent 70%),
radial-gradient(50% 40% at 8% 30%, rgba(203, 168, 94, 0.08), transparent 70%);
--aetia-crit: #E06A5B;
--aetia-crit-2: #B4463A;
--aetia-info: #5FA8D9;
--aetia-info-2: #3E82AF;
--aetia-on-emerald: #04130C;
--aetia-text-dim: var(--aetia-faint);
}
/* ---- LIGHT — device prefers light (auto), or user-locked light ---- */
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) {
color-scheme: light;
--aetia-ground: #F3EFE6;
--aetia-ground-2: #EEE9DC;
--aetia-surface: #FBF8F1;
--aetia-surface-2: #FFFFFF;
--aetia-surface-3: #F3EEE1;
--aetia-ink: #17201B;
--aetia-muted: #5B655E;
--aetia-faint: #9AA096;
--aetia-emerald: #0E7A52;
--aetia-emerald-bright: #12A06B;
--aetia-emerald-deep: #CDE7DB;
--aetia-gold: #93712B;
--aetia-gold-bright: #B08C3E;
--aetia-hairline: rgba(120, 94, 38, 0.20);
--aetia-hairline-strong: rgba(120, 94, 38, 0.34);
--aetia-glass: rgba(23, 32, 27, 0.015);
--aetia-glass-hi: rgba(23, 32, 27, 0.03);
--aetia-shadow-sm: 0 10px 22px -18px rgba(60, 50, 20, 0.28);
--aetia-shadow: 0 24px 50px -32px rgba(60, 50, 20, 0.35);
--aetia-shadow-lg: 0 32px 70px -30px rgba(60, 50, 20, 0.40);
--aetia-glow:
radial-gradient(60% 60% at 72% 6%, rgba(14, 122, 82, 0.10), transparent 70%),
radial-gradient(50% 40% at 8% 28%, rgba(147, 113, 43, 0.08), transparent 70%);
--aetia-crit: #B4402F;
--aetia-crit-2: #8F3122;
--aetia-info: #2A6E96;
--aetia-info-2: #1F5474;
--aetia-on-emerald: #F6FBF8;
--aetia-text-dim: var(--aetia-faint);
}
}
html[data-theme="light"] {
color-scheme: light;
--aetia-ground: #F3EFE6;
--aetia-ground-2: #EEE9DC;
--aetia-surface: #FBF8F1;
--aetia-surface-2: #FFFFFF;
--aetia-surface-3: #F3EEE1;
--aetia-ink: #17201B;
--aetia-muted: #5B655E;
--aetia-faint: #9AA096;
--aetia-emerald: #0E7A52;
--aetia-emerald-bright: #12A06B;
--aetia-emerald-deep: #CDE7DB;
--aetia-gold: #93712B;
--aetia-gold-bright: #B08C3E;
--aetia-hairline: rgba(120, 94, 38, 0.20);
--aetia-hairline-strong: rgba(120, 94, 38, 0.34);
--aetia-glass: rgba(23, 32, 27, 0.015);
--aetia-glass-hi: rgba(23, 32, 27, 0.03);
--aetia-shadow-sm: 0 10px 22px -18px rgba(60, 50, 20, 0.28);
--aetia-shadow: 0 24px 50px -32px rgba(60, 50, 20, 0.35);
--aetia-shadow-lg: 0 32px 70px -30px rgba(60, 50, 20, 0.40);
--aetia-glow:
radial-gradient(60% 60% at 72% 6%, rgba(14, 122, 82, 0.10), transparent 70%),
radial-gradient(50% 40% at 8% 28%, rgba(147, 113, 43, 0.08), transparent 70%);
--aetia-crit: #B4402F;
--aetia-crit-2: #8F3122;
--aetia-info: #2A6E96;
--aetia-info-2: #1F5474;
/* Light theme: emerald is much deeper here, so button text flips to
near-white for contrast (mirrors the mockup exactly). */
--aetia-on-emerald: #F6FBF8;
--aetia-text-dim: var(--aetia-faint);
}
/* Semantic aliases layered on top of the palette above — declared once,
theme-invariant in NAME even though every value they point at swaps per
theme. Every component rule below reads these, never the raw hues, so a
future palette tweak only touches section 1. */
:root {
--aetia-success: var(--aetia-emerald);
--aetia-success-2: var(--aetia-emerald-bright);
--aetia-warning: var(--aetia-gold);
--aetia-warning-2: var(--aetia-gold-bright);
--aetia-danger: var(--aetia-crit);
--aetia-danger-2: var(--aetia-crit-2);
--aetia-accent: var(--aetia-emerald);
--aetia-text: var(--aetia-ink);
--aetia-text-bright: var(--aetia-ink);
--aetia-text-muted: var(--aetia-muted);
--aetia-border: var(--aetia-hairline);
}
/* --------------------------------------------------------------------------
2. Reset & base
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
height: 100%;
-webkit-text-size-adjust: 100%;
}
html, body {
margin: 0;
padding: 0;
background: var(--aetia-ground);
color: var(--aetia-ink);
font-family: var(--aetia-font);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
transition: background 0.4s ease, color 0.4s ease;
}
body { min-height: 100%; overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a {
color: var(--aetia-emerald);
text-decoration: none;
transition: color 0.18s ease;
}
a:hover { color: var(--aetia-emerald-bright); text-decoration: underline; }
hr {
border: 0;
border-top: 1px solid var(--aetia-hairline);
margin: var(--aetia-space-6) 0;
height: 0;
}
::selection { background: var(--aetia-emerald); color: var(--aetia-on-emerald); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--aetia-ground-2); }
::-webkit-scrollbar-thumb { background: var(--aetia-hairline-strong); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--aetia-gold); }
/* Visible, consistent focus ring everywhere — emerald, offset so it never
collides with a hairline border. */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--aetia-emerald);
outline-offset: 3px;
border-radius: var(--aetia-radius-sm);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* --------------------------------------------------------------------------
3. Typography — Fraunces for hero moments, grotesk sans for UI
-------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, .title {
font-family: var(--aetia-font-display);
color: var(--aetia-text-bright);
font-weight: 500;
line-height: 1.15;
margin: 0 0 0.6em;
letter-spacing: -0.01em;
}
h1, .title.is-1 { font-size: clamp(2.4rem, 4.2vw, 3.4rem); letter-spacing: -0.02em; }
h2, .title.is-2 { font-size: clamp(1.95rem, 3.2vw, 2.55rem); }
h3, .title.is-3 { font-size: clamp(1.55rem, 2.5vw, 1.95rem); }
h4, .title.is-4 { font-size: 1.4rem; }
h5, .title.is-5 { font-size: 1.2rem; }
h6, .title.is-6 { font-size: 1.02rem; }
.title { display: block; }
.subtitle {
display: block;
font-family: var(--aetia-font-display);
color: var(--aetia-text-muted);
font-weight: 400;
font-style: italic;
line-height: 1.4;
margin: 0 0 1em;
}
.subtitle.is-1 { font-size: 1.8rem; }
.subtitle.is-2 { font-size: 1.5rem; }
.subtitle.is-3 { font-size: 1.3rem; }
.subtitle.is-4 { font-size: 1.15rem; }
.subtitle.is-5 { font-size: 1.05rem; }
.subtitle.is-6 { font-size: 0.95rem; }
p { margin: 0 0 1em; }
strong { color: var(--aetia-text-bright); font-weight: 700; }
small { font-size: 0.85em; }
code, kbd, samp, pre {
font-family: var(--aetia-mono);
background: var(--aetia-surface-2);
color: var(--aetia-emerald);
padding: 0.1em 0.4em;
border-radius: var(--aetia-radius-sm);
font-size: 0.9em;
}
pre { padding: var(--aetia-space-4); overflow-x: auto; line-height: 1.5; }
blockquote {
margin: var(--aetia-space-6) 0;
padding: var(--aetia-space-4) var(--aetia-space-5);
border-left: 3px solid var(--aetia-gold);
background: var(--aetia-glass);
border-radius: 0 var(--aetia-radius) var(--aetia-radius) 0;
color: var(--aetia-text-muted);
font-style: italic;
}
ul, ol { margin: 0 0 1em; padding-left: 1.4em; }
li { margin-bottom: 0.35em; }
/* Champagne-gold small-caps label — the "eyebrow" motif from the mockup.
Not yet consumed by a shipped view; provided so later Aetia pages don't
need a new component for it (kicker copy above a heading, section labels,
etc.). */
.aetia-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.7em;
font-size: 0.72rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--aetia-gold);
font-weight: 600;
}
.aetia-eyebrow::before {
content: "";
width: 22px;
height: 1px;
background: var(--aetia-gold);
opacity: 0.7;
}
/* --------------------------------------------------------------------------
4. Layout — container, sections, columns/grid
-------------------------------------------------------------------------- */
.container {
max-width: var(--aetia-container-max);
margin: 0 auto;
padding-left: var(--aetia-space-5);
padding-right: var(--aetia-space-5);
width: 100%;
}
.container.is-fluid { max-width: none; }
.container.is-narrow { max-width: 800px; }
.section { padding: 4.5rem 0; }
.section.is-small { padding: var(--aetia-space-6) 0; }
.section.is-medium { padding: 5.5rem 0; }
.section.is-large { padding: 6.5rem 0; }
.columns {
display: flex;
flex-wrap: wrap;
margin: calc(var(--aetia-space-3) * -1);
}
.columns.is-centered { justify-content: center; }
.columns.is-vcentered { align-items: center; }
.columns.is-multiline { flex-wrap: wrap; }
.columns.is-mobile { flex-wrap: nowrap; }
.columns.is-gapless { margin: 0; }
.columns.is-gapless > .column { padding: 0; }
.column { flex: 1 1 0; min-width: 0; padding: var(--aetia-space-3); }
.column.is-1 { flex: none; width: 8.3333%; }
.column.is-2 { flex: none; width: 16.6667%; }
.column.is-3 { flex: none; width: 25%; }
.column.is-4 { flex: none; width: 33.3333%; }
.column.is-5 { flex: none; width: 41.6667%; }
.column.is-6, .column.is-half { flex: none; width: 50%; }
.column.is-7 { flex: none; width: 58.3333%; }
.column.is-8, .column.is-two-thirds { flex: none; width: 66.6667%; }
.column.is-9 { flex: none; width: 75%; }
.column.is-10 { flex: none; width: 83.3333%; }
.column.is-11 { flex: none; width: 91.6667%; }
.column.is-12, .column.is-full { flex: none; width: 100%; }
.column.is-one-third { flex: none; width: 33.3333%; }
.column.is-one-quarter { flex: none; width: 25%; }
.column.is-three-quarters { flex: none; width: 75%; }
.column.is-narrow { flex: none; }
@media screen and (max-width: 768px) {
.column.is-half-mobile, .column.is-6-mobile { width: 50%; flex: none; }
.column.is-full-mobile { width: 100%; flex: none; }
.columns:not(.is-mobile) { flex-direction: column; }
.columns:not(.is-mobile) > .column { width: 100%; flex: none; }
}
@media screen and (min-width: 769px) {
.column.is-half-tablet, .column.is-6-tablet { width: 50%; flex: none; }
.column.is-4-tablet { width: 33.3333%; flex: none; }
.column.is-3-tablet { width: 25%; flex: none; }
}
@media screen and (min-width: 1024px) {
.column.is-half-desktop, .column.is-6-desktop { width: 50%; flex: none; }
.column.is-5-desktop { width: 41.6667%; flex: none; }
.column.is-4-desktop { width: 33.3333%; flex: none; }
.column.is-3-desktop { width: 25%; flex: none; }
}
@media screen and (min-width: 1216px) {
.column.is-4-widescreen { width: 33.3333%; flex: none; }
.column.is-3-widescreen { width: 25%; flex: none; }
}
/* --------------------------------------------------------------------------
5. Page wrapper + emerald glow
-------------------------------------------------------------------------- */
/* .aetia-glow sits BEHIND everything (mockup's radial-glow technique):
it is absolutely positioned against the page and given z-index:0, while
.aetia-page (the real nav/main/footer stack) is a sibling explicitly
lifted to z-index:1 — that ordering, not DOM position, is what keeps the
glow from painting over in-flow content. */
.aetia-glow {
position: absolute;
inset: 0;
height: 760px;
background: var(--aetia-glow);
pointer-events: none;
z-index: 0;
transition: background 0.4s ease;
}
.aetia-page {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.aetia-main { flex: 1 0 auto; }
/* --------------------------------------------------------------------------
6. Navigation bar
-------------------------------------------------------------------------- */
.navbar {
position: sticky;
top: 0;
z-index: 100;
background: color-mix(in srgb, var(--aetia-ground) 82%, transparent);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--aetia-hairline);
min-height: var(--aetia-navbar-height);
display: flex;
align-items: center;
padding: 0 var(--aetia-space-5);
transition: background 0.4s ease, border-color 0.4s ease;
}
.navbar-brand {
display: flex;
align-items: center;
flex-shrink: 0;
min-height: var(--aetia-navbar-height);
}
.navbar-brand .navbar-item { padding-left: 0; }
.navbar-brand .navbar-item:hover { background: transparent; }
/* Wordmark logo: "Aetia" set in the display serif, champagne-gold with a small
emerald accent dot — the logo IS the wordmark (no icon). Used in the nav and,
at a larger size, on the coming-soon hero. */
.aetia-brand {
display: inline-flex;
align-items: baseline;
color: var(--aetia-text-bright);
}
.aetia-brand:hover { text-decoration: none; }
.aetia-wordmark {
font-family: var(--aetia-font-display);
font-weight: 600;
font-size: 1.55rem;
line-height: 1;
letter-spacing: 0.004em;
background: linear-gradient(176deg, #F5E9C4 0%, #CBA85E 54%, #A9884A 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
white-space: nowrap;
}
/* Emerald accent — a small dot set like a confident full stop after the name. */
.aetia-wm-dot {
display: inline-block;
width: 0.16em;
height: 0.16em;
margin-left: 0.11em;
border-radius: 50%;
background: var(--aetia-emerald);
vertical-align: baseline;
}
.aetia-wordmark--lg {
font-size: clamp(2.4rem, 8vw, 3.4rem);
letter-spacing: 0.002em;
filter: drop-shadow(0 10px 26px rgba(47, 178, 124, 0.22));
}
.navbar-burger {
display: none;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
margin-left: auto;
background: transparent;
border: none;
cursor: pointer;
color: var(--aetia-ink);
border-radius: var(--aetia-radius-sm);
}
.navbar-burger:hover { background: var(--aetia-glass-hi); }
.navbar-burger span {
display: block;
width: 18px;
height: 1.5px;
background: currentColor;
margin: 3px 0;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.navbar-burger.is-active span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.navbar-burger.is-active span:nth-child(2) { opacity: 0; }
.navbar-burger.is-active span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }
.navbar-menu {
display: flex;
flex: 1;
align-items: center;
margin-left: var(--aetia-space-6);
}
.navbar-start { display: flex; align-items: center; flex-grow: 1; flex-wrap: wrap; gap: 0.15rem; }
.navbar-end { display: flex; align-items: center; gap: var(--aetia-space-3); }
.navbar-item {
display: inline-flex;
align-items: center;
gap: 0.55em;
padding: 0.55rem 0.9rem;
color: var(--aetia-muted);
border-radius: var(--aetia-radius-pill);
font-weight: 500;
font-size: 0.92rem;
transition: color 0.18s ease, background 0.18s ease;
text-decoration: none;
}
.navbar-item:hover, .navbar-item.is-active {
color: var(--aetia-text-bright);
background: var(--aetia-glass-hi);
text-decoration: none;
}
.navbar-item.is-active { color: var(--aetia-emerald); }
.navbar-item .icon { color: inherit; opacity: 0.85; }
.navbar-divider, .navbar-item hr {
height: 1px;
background: var(--aetia-hairline);
margin: 0 var(--aetia-space-2);
border: 0;
}
@media screen and (min-width: 1024px) {
.navbar-divider { width: 1px; height: 20px; margin: 0 var(--aetia-space-2); }
}
.navbar-end .buttons { display: flex; gap: 0.5rem; align-items: center; }
/* Theme toggle button — nav.js binds none of this (the toggle handler lives
in theme.js), but the button ID (#aetia-theme-toggle) and structure are
fixed by the layout contract. */
.aetia-theme-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
border: 1px solid var(--aetia-hairline);
background: var(--aetia-glass);
color: var(--aetia-muted);
border-radius: var(--aetia-radius-pill);
padding: 7px 12px 7px 9px;
font: inherit;
font-size: 0.82rem;
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.aetia-theme-toggle:hover { color: var(--aetia-text-bright); border-color: var(--aetia-hairline-strong); }
.aetia-theme-toggle .aetia-theme-toggle-dot {
width: 15px;
height: 15px;
border-radius: 50%;
border: 1px solid currentColor;
position: relative;
flex-shrink: 0;
}
.aetia-theme-toggle .aetia-theme-toggle-dot::after {
content: "";
position: absolute;
inset: 2px;
border-radius: 50%;
background: var(--aetia-gold);
transform: scale(1);
transition: transform 0.3s ease;
}
html[data-theme="light"] .aetia-theme-toggle .aetia-theme-toggle-dot::after { transform: scale(0); }
html[data-theme="light"] .aetia-theme-toggle .aetia-theme-toggle-dot { box-shadow: inset -4px -2px 0 0 var(--aetia-gold); }
@media screen and (max-width: 1023px) {
.navbar { padding: 0 var(--aetia-space-4); }
.navbar-burger { display: inline-flex; }
.navbar-menu {
display: none;
position: absolute;
top: var(--aetia-navbar-height);
left: 0;
right: 0;
margin: 0;
padding: var(--aetia-space-3);
background: var(--aetia-surface);
border-bottom: 1px solid var(--aetia-hairline);
flex-direction: column;
align-items: stretch;
gap: 0.25rem;
max-height: calc(100vh - var(--aetia-navbar-height));
overflow-y: auto;
box-shadow: var(--aetia-shadow);
}
.navbar-menu.is-active { display: flex; }
.navbar-start, .navbar-end { flex-direction: column; align-items: stretch; width: 100%; gap: 0.25rem; }
.navbar-item { padding: 0.7rem 0.95rem; width: 100%; border-radius: var(--aetia-radius-sm); }
.navbar-end .aetia-theme-toggle { width: 100%; justify-content: center; }
}
/* --------------------------------------------------------------------------
7. Hero
-------------------------------------------------------------------------- */
.hero {
position: relative;
overflow: hidden;
border-radius: var(--aetia-radius-lg);
background: linear-gradient(180deg, var(--aetia-glass-hi), transparent);
border: 1px solid var(--aetia-hairline);
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background: var(--aetia-glow);
pointer-events: none;
}
.hero-body { position: relative; padding: var(--aetia-space-12) var(--aetia-space-6); }
.hero.is-medium .hero-body { padding-top: var(--aetia-space-16); padding-bottom: var(--aetia-space-16); }
.hero.is-large .hero-body { padding-top: 5rem; padding-bottom: 5rem; }
.hero.is-dark { background: linear-gradient(180deg, var(--aetia-glass-hi), transparent); }
.hero.is-primary {
background: linear-gradient(180deg, color-mix(in srgb, var(--aetia-emerald) 10%, transparent), transparent);
border-color: color-mix(in srgb, var(--aetia-emerald) 30%, var(--aetia-hairline));
}
.hero .title em, .hero .title .em { color: var(--aetia-emerald); font-style: italic; }
.hero .title .gd { color: var(--aetia-gold); font-style: normal; }
/* --------------------------------------------------------------------------
8. Buttons — pill-radius, emerald primary, gold-hairline ghost
-------------------------------------------------------------------------- */
.button, button.button {
--btn-bg: var(--aetia-glass-hi);
--btn-border: var(--aetia-hairline-strong);
--btn-color: var(--aetia-text-bright);
--btn-hover-bg: var(--aetia-surface-3);
--btn-hover-border: var(--aetia-hairline-strong);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55em;
padding: 0.6em 1.25em;
background: var(--btn-bg);
color: var(--btn-color);
border: 1px solid var(--btn-border);
border-radius: var(--aetia-radius-pill);
font-family: inherit;
font-size: 0.95rem;
font-weight: 550;
line-height: 1.2;
cursor: pointer;
text-decoration: none;
user-select: none;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.12s ease, box-shadow 0.25s ease;
white-space: nowrap;
}
.button:hover { background: var(--btn-hover-bg); border-color: var(--btn-hover-border); color: var(--btn-color); text-decoration: none; }
.button:active { transform: translateY(1px); }
.button:focus-visible { outline: 2px solid var(--aetia-emerald); outline-offset: 2px; }
.button[disabled], .button.is-loading { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.button.is-loading::after {
content: "";
width: 1em; height: 1em;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: aetia-spin 0.7s linear infinite;
margin-left: 0.4em;
}
@keyframes aetia-spin { to { transform: rotate(360deg); } }
.button.is-small { font-size: 0.82rem; padding: 0.45em 0.95em; }
.button.is-medium { font-size: 1.05rem; padding: 0.7em 1.5em; }
.button.is-large { font-size: 1.2rem; padding: 0.8em 1.8em; }
.button.is-fullwidth { display: flex; width: 100%; }
.button.is-rounded { border-radius: var(--aetia-radius-pill); }
.button.is-primary {
--btn-bg: var(--aetia-emerald);
--btn-border: transparent;
--btn-color: var(--aetia-on-emerald);
--btn-hover-bg: var(--aetia-emerald-bright);
--btn-hover-border: transparent;
box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--aetia-emerald) 70%, transparent);
}
.button.is-primary:hover { box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--aetia-emerald) 75%, transparent); }
/* Ghost — transparent, gold hover, the mockup's secondary CTA. */
.button.is-ghost {
--btn-bg: transparent;
--btn-border: var(--aetia-hairline-strong);
--btn-color: var(--aetia-text-bright);
--btn-hover-bg: var(--aetia-glass-hi);
--btn-hover-border: var(--aetia-gold);
}
.button.is-ghost:hover { color: var(--aetia-gold-bright); }
.button.is-info {
--btn-bg: var(--aetia-info);
--btn-border: transparent;
--btn-color: #ffffff;
--btn-hover-bg: var(--aetia-info-2);
--btn-hover-border: transparent;
}
.button.is-success {
--btn-bg: var(--aetia-success);
--btn-border: transparent;
--btn-color: var(--aetia-on-emerald);
--btn-hover-bg: var(--aetia-success-2);
--btn-hover-border: transparent;
}
.button.is-warning {
--btn-bg: var(--aetia-warning);
--btn-border: transparent;
--btn-color: var(--aetia-on-emerald);
--btn-hover-bg: var(--aetia-warning-2);
--btn-hover-border: transparent;
}
.button.is-danger {
--btn-bg: var(--aetia-danger);
--btn-border: transparent;
--btn-color: #ffffff;
--btn-hover-bg: var(--aetia-danger-2);
--btn-hover-border: transparent;
}
.button.is-dark {
--btn-bg: var(--aetia-ground-2);
--btn-border: var(--aetia-hairline);
--btn-color: var(--aetia-text-bright);
--btn-hover-bg: var(--aetia-surface);
--btn-hover-border: var(--aetia-emerald);
}
.button.is-light {
--btn-bg: var(--aetia-glass-hi);
--btn-border: var(--aetia-hairline);
--btn-color: var(--aetia-text-bright);
--btn-hover-bg: var(--aetia-surface-3);
--btn-hover-border: var(--aetia-hairline-strong);
}
.button.is-link {
--btn-bg: transparent;
--btn-border: transparent;
--btn-color: var(--aetia-emerald);
--btn-hover-bg: color-mix(in srgb, var(--aetia-emerald) 10%, transparent);
--btn-hover-border: transparent;
}
.button.is-text {
--btn-bg: transparent;
--btn-border: transparent;
--btn-color: var(--aetia-text-muted);
--btn-hover-bg: var(--aetia-glass-hi);
--btn-hover-border: transparent;
}
.button.is-outlined {
--btn-bg: transparent;
--btn-border: var(--aetia-hairline-strong);
--btn-color: var(--aetia-text-bright);
--btn-hover-bg: var(--aetia-glass-hi);
}
.button.is-outlined.is-primary {
--btn-bg: transparent; --btn-border: var(--aetia-emerald); --btn-color: var(--aetia-emerald);
--btn-hover-bg: color-mix(in srgb, var(--aetia-emerald) 12%, transparent); --btn-hover-border: var(--aetia-emerald);
}
.button.is-outlined.is-danger {
--btn-bg: transparent; --btn-border: var(--aetia-danger); --btn-color: var(--aetia-danger);
--btn-hover-bg: color-mix(in srgb, var(--aetia-danger) 12%, transparent); --btn-hover-border: var(--aetia-danger);
}
.button.is-outlined.is-warning {
--btn-bg: transparent; --btn-border: var(--aetia-warning); --btn-color: var(--aetia-warning);
--btn-hover-bg: color-mix(in srgb, var(--aetia-warning) 12%, transparent); --btn-hover-border: var(--aetia-warning);
}
.button.is-outlined.is-info {
--btn-bg: transparent; --btn-border: var(--aetia-info); --btn-color: var(--aetia-info);
--btn-hover-bg: color-mix(in srgb, var(--aetia-info) 12%, transparent); --btn-hover-border: var(--aetia-info);
}
.button.is-outlined.is-success {
--btn-bg: transparent; --btn-border: var(--aetia-success); --btn-color: var(--aetia-success);
--btn-hover-bg: color-mix(in srgb, var(--aetia-success) 12%, transparent); --btn-hover-border: var(--aetia-success);
}
.buttons { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; }
.buttons.is-centered { justify-content: center; }
.buttons.has-addons { gap: 0; }
.buttons.has-addons .button { border-radius: var(--aetia-radius-sm); }
.buttons.has-addons .button:first-child { border-top-left-radius: var(--aetia-radius-pill); border-bottom-left-radius: var(--aetia-radius-pill); }
.buttons.has-addons .button:last-child { border-top-right-radius: var(--aetia-radius-pill); border-bottom-right-radius: var(--aetia-radius-pill); }
.buttons.has-addons .button + .button { margin-left: -1px; }
/* Filter/tab strip of small buttons (admin/talent.php's status filter). */
.tabs-filter { display: block; }
/* --------------------------------------------------------------------------
9. Forms
-------------------------------------------------------------------------- */
.field { margin-bottom: var(--aetia-space-4); }
.field:not(:last-child) { margin-bottom: var(--aetia-space-4); }
.label {
display: block;
color: var(--aetia-text-bright);
font-weight: 600;
font-size: 0.92rem;
margin-bottom: 0.4rem;
letter-spacing: 0.01em;
}
.input, .textarea, .select select {
display: block;
width: 100%;
padding: 0.62em 0.9em;
background: var(--aetia-ground-2);
color: var(--aetia-text-bright);
border: 1px solid var(--aetia-hairline);
border-radius: var(--aetia-radius-sm);
font-family: inherit;
font-size: 0.98rem;
line-height: 1.4;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--aetia-faint); }
.input:focus, .textarea:focus, .select select:focus {
outline: none;
border-color: var(--aetia-emerald);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--aetia-emerald) 22%, transparent);
background: var(--aetia-surface);
}
.input[disabled], .textarea[disabled], .select select[disabled] { opacity: 0.5; cursor: not-allowed; }
.input.is-danger, .textarea.is-danger, .select.is-danger select { border-color: var(--aetia-danger); }
.input.is-success, .textarea.is-success { border-color: var(--aetia-success); }
.textarea { min-height: 8rem; resize: vertical; }
.select { position: relative; display: inline-block; width: 100%; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 2.5em; cursor: pointer; }
.select::after {
content: "\f078";
font-family: "Font Awesome 7 Free";
font-weight: 900;
color: var(--aetia-muted);
position: absolute;
right: 0.95em;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
font-size: 0.78em;
}
.select.is-multiple select { padding-right: 0.85em; }
.select.is-multiple::after { display: none; }
.select.is-fullwidth { display: block; }
.control { position: relative; }
.control.has-icons-left .input,
.control.has-icons-left .select select { padding-left: 2.4em; }
.control.has-icons-right .input { padding-right: 2.4em; }
.control.has-icons-left .icon.is-left { left: 0; position: absolute; top: 0; height: 100%; width: 2.4em; display: inline-flex; align-items: center; justify-content: center; pointer-events: none; color: var(--aetia-faint); }
.control.has-icons-right .icon.is-right { right: 0; position: absolute; top: 0; height: 100%; width: 2.4em; display: inline-flex; align-items: center; justify-content: center; pointer-events: none; color: var(--aetia-faint); }
.help { display: block; font-size: 0.85rem; margin-top: 0.35rem; color: var(--aetia-text-muted); }
.help.is-danger { color: var(--aetia-danger); }
.help.is-success { color: var(--aetia-success); }
.checkbox, .radio {
display: inline-flex;
align-items: center;
gap: 0.5em;
cursor: pointer;
color: var(--aetia-ink);
}
.checkbox input[type="checkbox"], .radio input[type="radio"] {
width: 1.1em;
height: 1.1em;
accent-color: var(--aetia-emerald);
cursor: pointer;
margin: 0;
}
.field.has-addons { display: flex; gap: 0; }
.field.has-addons .control { flex: 1; }
.field.has-addons .control:not(:first-child) .input,
.field.has-addons .control:not(:first-child) .button { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
.field.has-addons .control:not(:last-child) .input,
.field.has-addons .control:not(:last-child) .button { border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* Buttons joining a squared select/input lose their pill radius on the
outer corner only, so the seam reads as one control. */
.field.has-addons .control .button { border-radius: var(--aetia-radius-sm); }
.field.has-addons .control:last-child .button { border-top-right-radius: var(--aetia-radius-sm); border-bottom-right-radius: var(--aetia-radius-sm); }
.field.is-grouped { display: flex; gap: 0.5rem; align-items: flex-start; }
.field.is-grouped > .control { flex-shrink: 0; }
.field.is-grouped .control.is-expanded { flex: 1; }
.field.is-grouped.is-grouped-right { justify-content: flex-end; }
/* Native — Bulma-compatible fallback (kept for any
generic .file markup; the avatar/attachment inputs use the bespoke
.aetia-file-upload overlay technique in sections 24/25 instead). */
.file { display: inline-flex; align-items: center; gap: 0; }
.file-label { display: inline-flex; align-items: center; cursor: pointer; overflow: hidden; border-radius: var(--aetia-radius-sm); }
.file-input { position: absolute; opacity: 0; pointer-events: none; }
.file-cta {
display: inline-flex; align-items: center; gap: 0.5em;
padding: 0.55em 1.05em;
background: var(--aetia-glass-hi);
color: var(--aetia-text-bright);
border: 1px solid var(--aetia-hairline);
border-right: 0;
border-radius: var(--aetia-radius-sm) 0 0 var(--aetia-radius-sm);
}
.file-name {
display: inline-flex; align-items: center;
padding: 0.55em 0.95em;
background: var(--aetia-ground-2);
border: 1px solid var(--aetia-hairline);
border-radius: 0 var(--aetia-radius-sm) var(--aetia-radius-sm) 0;
color: var(--aetia-text-muted);
max-width: 14rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* --------------------------------------------------------------------------
10. Cards & boxes
-------------------------------------------------------------------------- */
.card {
background: var(--aetia-glass);
border: 1px solid var(--aetia-hairline);
border-radius: var(--aetia-radius-lg);
box-shadow: var(--aetia-shadow-sm);
backdrop-filter: blur(8px);
overflow: hidden;
color: var(--aetia-ink);
display: flex;
flex-direction: column;
transition: border-color 0.3s ease, background 0.3s ease;
}
.card-header {
display: flex;
align-items: center;
padding: var(--aetia-space-4) var(--aetia-space-5);
border-bottom: 1px solid var(--aetia-hairline);
background: var(--aetia-glass-hi);
}
.card-header-title { font-weight: 700; color: var(--aetia-text-bright); flex: 1; margin: 0; font-size: 1.05rem; }
.card-header-icon { display: inline-flex; align-items: center; color: var(--aetia-text-muted); cursor: pointer; }
.card-content { padding: var(--aetia-space-5); flex: 1; }
.card-footer { display: flex; border-top: 1px solid var(--aetia-hairline); background: var(--aetia-glass-hi); }
.card-footer-item {
flex: 1;
padding: var(--aetia-space-3) var(--aetia-space-4);
display: inline-flex; align-items: center; justify-content: center;
color: var(--aetia-text-muted);
border-right: 1px solid var(--aetia-hairline);
}
.card-footer-item:last-child { border-right: 0; }
.card-image { display: block; }
.card-image img { width: 100%; display: block; }
.box {
background: var(--aetia-glass);
border: 1px solid var(--aetia-hairline);
border-radius: var(--aetia-radius);
padding: var(--aetia-space-5);
box-shadow: var(--aetia-shadow-sm);
color: var(--aetia-ink);
}
.box.has-background-dark { background: var(--aetia-ground-2); }
/* --------------------------------------------------------------------------
11. Tables
-------------------------------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; background: transparent; color: var(--aetia-ink); }
.table th, .table td {
padding: 0.75rem 0.95rem;
text-align: left;
border-bottom: 1px solid var(--aetia-hairline);
vertical-align: middle;
}
.table th {
color: var(--aetia-faint);
font-weight: 600;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.1em;
background: var(--aetia-glass);
border-bottom: 1px solid var(--aetia-hairline);
}
.table tbody tr { transition: background 0.15s ease; }
.table.is-hoverable tbody tr:hover { background: var(--aetia-glass-hi); }
.table.is-striped tbody tr:nth-child(odd) { background: var(--aetia-glass); }
.table.is-bordered, .table.is-bordered th, .table.is-bordered td { border: 1px solid var(--aetia-hairline); }
.table.is-narrow th, .table.is-narrow td { padding: 0.5rem 0.65rem; }
.table.is-fullwidth { width: 100%; }
.table-container {
overflow-x: auto;
border-radius: var(--aetia-radius);
border: 1px solid var(--aetia-hairline);
background: var(--aetia-surface);
}
.table-container .table { margin: 0; }
.table-container .table th:first-child, .table-container .table td:first-child { padding-left: 1.1rem; }
.table-container .table th:last-child, .table-container .table td:last-child { padding-right: 1.1rem; }
/* --------------------------------------------------------------------------
12. Notifications & messages
-------------------------------------------------------------------------- */
.notification {
position: relative;
padding: var(--aetia-space-4) var(--aetia-space-5);
padding-right: 3rem;
border-radius: var(--aetia-radius);
background: var(--aetia-glass);
border: 1px solid var(--aetia-hairline);
border-left: 3px solid var(--aetia-emerald);
color: var(--aetia-ink);
margin-bottom: var(--aetia-space-4);
}
.notification a { color: var(--aetia-emerald); }
.notification > .delete, .notification .delete {
position: absolute;
top: 0.65rem; right: 0.65rem;
width: 1.6rem; height: 1.6rem;
background: transparent;
border: 0;
color: var(--aetia-text-muted);
cursor: pointer;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
transition: background 0.15s ease, color 0.15s ease;
}
.notification .delete::before { content: "\00d7"; font-size: 1.3rem; line-height: 1; }
.notification .delete:hover { background: var(--aetia-glass-hi); color: var(--aetia-text-bright); }
.notification.is-primary, .notification.is-info {
background: color-mix(in srgb, var(--aetia-info) 10%, var(--aetia-glass));
border-left-color: var(--aetia-info);
}
.notification.is-success {
background: color-mix(in srgb, var(--aetia-success) 10%, var(--aetia-glass));
border-left-color: var(--aetia-success);
}
.notification.is-warning {
background: color-mix(in srgb, var(--aetia-warning) 10%, var(--aetia-glass));
border-left-color: var(--aetia-warning);
}
.notification.is-danger {
background: color-mix(in srgb, var(--aetia-danger) 10%, var(--aetia-glass));
border-left-color: var(--aetia-danger);
}
.notification.is-dark { background: var(--aetia-ground-2); border-left-color: var(--aetia-text-muted); }
.notification.is-light { /* same look on both themes — the color modifier does the work */ }
.message {
background: var(--aetia-glass);
border: 1px solid var(--aetia-hairline);
border-radius: var(--aetia-radius);
margin-bottom: var(--aetia-space-4);
overflow: hidden;
}
.message-header {
display: flex; align-items: center;
padding: 0.6rem 1rem;
background: var(--aetia-glass-hi);
color: var(--aetia-text-bright);
border-bottom: 1px solid var(--aetia-hairline);
font-weight: 600;
}
.message-header .delete { margin-left: auto; }
.message-body { padding: var(--aetia-space-4) var(--aetia-space-5); color: var(--aetia-ink); }
.message.is-info .message-header { background: color-mix(in srgb, var(--aetia-info) 18%, transparent); }
.message.is-success .message-header { background: color-mix(in srgb, var(--aetia-success) 18%, transparent); }
.message.is-warning .message-header { background: color-mix(in srgb, var(--aetia-warning) 18%, transparent); color: var(--aetia-warning); }
.message.is-danger .message-header { background: color-mix(in srgb, var(--aetia-danger) 18%, transparent); color: var(--aetia-danger); }
/* --------------------------------------------------------------------------
13. Modals
-------------------------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: var(--aetia-space-4); }
.modal.is-active { display: flex; }
.modal-background {
position: absolute; inset: 0;
background: color-mix(in srgb, var(--aetia-ground) 78%, transparent);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.modal-content, .modal-card {
position: relative;
width: 100%;
max-width: 640px;
max-height: calc(100vh - 4rem);
background: var(--aetia-surface);
border: 1px solid var(--aetia-hairline);
border-radius: var(--aetia-radius-lg);
box-shadow: var(--aetia-shadow-lg);
overflow: hidden;
display: flex;
flex-direction: column;
}
.modal-card-head, .modal-card-foot {
display: flex; align-items: center;
padding: var(--aetia-space-4) var(--aetia-space-5);
background: var(--aetia-glass-hi);
border-bottom: 1px solid var(--aetia-hairline);
flex-shrink: 0;
}
.modal-card-foot { border-top: 1px solid var(--aetia-hairline); border-bottom: 0; gap: 0.5rem; }
.modal-card-title { flex: 1; margin: 0; color: var(--aetia-text-bright); font-weight: 700; font-size: 1.1rem; }
.modal-card-body { padding: var(--aetia-space-5); overflow-y: auto; flex: 1; color: var(--aetia-ink); }
.modal-close, .modal .delete {
background: transparent; border: 0;
width: 2rem; height: 2rem;
color: var(--aetia-text-muted);
cursor: pointer;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
transition: background 0.15s ease, color 0.15s ease;
}
.modal-close::before, .modal .delete::before { content: "\00d7"; font-size: 1.4rem; line-height: 1; }
.modal-close:hover, .modal .delete:hover { background: var(--aetia-surface-3); color: var(--aetia-text-bright); }
/* --------------------------------------------------------------------------
14. Dropdowns
-------------------------------------------------------------------------- */
.dropdown { position: relative; display: inline-flex; }
.dropdown.is-right .dropdown-menu { left: auto; right: 0; }
.dropdown-trigger { display: inline-flex; }
.dropdown-menu {
position: absolute;
top: calc(100% + 0.4rem);
left: 0;
min-width: 14rem;
background: var(--aetia-surface);
border: 1px solid var(--aetia-hairline);
border-radius: var(--aetia-radius);
box-shadow: var(--aetia-shadow);
z-index: 60;
display: none;
padding: 0.4rem;
}
.dropdown.is-active > .dropdown-menu,
.dropdown.is-hoverable:hover > .dropdown-menu,
.dropdown.is-hoverable:focus-within > .dropdown-menu { display: block; }
.dropdown-content { display: flex; flex-direction: column; gap: 0.1rem; }
.dropdown-item {
display: flex; align-items: center; gap: 0.55em;
padding: 0.55rem 0.75rem;
color: var(--aetia-ink);
border-radius: var(--aetia-radius-sm);
text-decoration: none;
font-size: 0.95rem;
cursor: pointer;
background: transparent;
border: 0;
width: 100%;
text-align: left;
}
.dropdown-item:hover { background: var(--aetia-glass-hi); color: var(--aetia-text-bright); text-decoration: none; }
.dropdown-item.is-static { cursor: default; color: var(--aetia-text-muted); }
.dropdown-item.is-static:hover { background: transparent; }
button.dropdown-item { font: inherit; margin: 0; }
.aetia-logout-form { margin: 0; padding: 0; }
.dropdown-divider { height: 1px; background: var(--aetia-hairline); margin: 0.4rem -0.4rem; border: 0; }
/* --------------------------------------------------------------------------
15. Tags & badges — the mockup's status-pill language mapped onto .tag
-------------------------------------------------------------------------- */
.tag {
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0.2em 0.75em;
background: var(--aetia-glass-hi);
color: var(--aetia-muted);
border: 1px solid var(--aetia-hairline);
border-radius: var(--aetia-radius-pill);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
line-height: 1.4;
white-space: nowrap;
height: auto;
}
/* Colour-dot mimicking the mockup's .pill .d marker. */
.tag::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
opacity: 0.9;
}
.tag.is-primary { background: color-mix(in srgb, var(--aetia-emerald) 14%, transparent); color: var(--aetia-emerald); border-color: color-mix(in srgb, var(--aetia-emerald) 40%, transparent); }
.tag.is-info { background: color-mix(in srgb, var(--aetia-info) 14%, transparent); color: var(--aetia-info); border-color: color-mix(in srgb, var(--aetia-info) 40%, transparent); }
.tag.is-success { background: color-mix(in srgb, var(--aetia-success) 14%, transparent); color: var(--aetia-success); border-color: color-mix(in srgb, var(--aetia-success) 40%, transparent); }
.tag.is-warning { background: color-mix(in srgb, var(--aetia-warning) 14%, transparent); color: var(--aetia-gold-bright); border-color: color-mix(in srgb, var(--aetia-warning) 44%, transparent); }
.tag.is-danger { background: color-mix(in srgb, var(--aetia-danger) 14%, transparent); color: var(--aetia-danger); border-color: color-mix(in srgb, var(--aetia-danger) 44%, transparent); }
.tag.is-dark { background: var(--aetia-ground-2); color: var(--aetia-text-muted); }
.tag.is-dark::before { display: none; }
.tag.is-light { background: var(--aetia-glass-hi); color: var(--aetia-text-muted); }
.tag.is-light::before { display: none; }
.tag.is-medium { font-size: 0.85rem; padding: 0.3em 0.9em; }
.tag.is-large { font-size: 1rem; padding: 0.4em 1.05em; }
.tag.is-rounded { border-radius: var(--aetia-radius-pill); }
.tag.is-small-compact { font-size: 0.66rem; padding: 0.12em 0.6em; }
.tags { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.tags.has-addons .tag { border-radius: 0; margin-right: 0; border-right-width: 0; }
.tags.has-addons .tag:first-child { border-radius: var(--aetia-radius-pill) 0 0 var(--aetia-radius-pill); }
.tags.has-addons .tag:last-child { border-radius: 0 var(--aetia-radius-pill) var(--aetia-radius-pill) 0; border-right-width: 1px; }
/* --------------------------------------------------------------------------
16. Breadcrumbs
-------------------------------------------------------------------------- */
.breadcrumb {
display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
padding: 0.65rem 1rem;
background: var(--aetia-glass);
border: 1px solid var(--aetia-hairline);
border-radius: var(--aetia-radius);
margin-bottom: var(--aetia-space-5);
font-size: 0.95rem;
}
.breadcrumb ul { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0; margin: 0; list-style: none; }
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb li + li::before {
content: "\f054";
font-family: "Font Awesome 7 Free";
font-weight: 900;
font-size: 0.7em;
color: var(--aetia-faint);
margin-right: 0.5rem;
}
.breadcrumb a { color: var(--aetia-text-muted); display: inline-flex; align-items: center; gap: 0.4em; }
.breadcrumb a:hover { color: var(--aetia-emerald); text-decoration: none; }
.breadcrumb li.is-active a { color: var(--aetia-emerald); cursor: default; }
.breadcrumb .icon { color: inherit; }
/* --------------------------------------------------------------------------
17. Pagination
-------------------------------------------------------------------------- */
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem; margin: var(--aetia-space-5) 0; }
.pagination a, .pagination span, .pagination-link, .pagination-previous, .pagination-next, .pagination-ellipsis {
display: inline-flex; align-items: center; justify-content: center;
min-width: 2.4rem; height: 2.4rem; padding: 0 0.7rem;
border-radius: var(--aetia-radius-pill);
background: var(--aetia-glass);
border: 1px solid var(--aetia-hairline);
color: var(--aetia-text-muted);
text-decoration: none;
font-weight: 600;
transition: all 0.15s ease;
}
.pagination a:hover { color: var(--aetia-text-bright); border-color: var(--aetia-emerald); background: var(--aetia-glass-hi); text-decoration: none; }
.pagination .current, .pagination .is-current, .pagination-link.is-current {
background: var(--aetia-emerald);
color: var(--aetia-on-emerald);
border-color: transparent;
}
.pagination .pagination-ellipsis { background: transparent; border-color: transparent; }
/* --------------------------------------------------------------------------
18. Footer
-------------------------------------------------------------------------- */
.footer {
background: transparent;
border-top: 1px solid var(--aetia-hairline);
padding: var(--aetia-space-12) var(--aetia-space-4);
color: var(--aetia-text-muted);
margin-top: auto;
}
.footer a { color: var(--aetia-text-muted); }
.footer a:hover { color: var(--aetia-gold-bright); }
.footer .content { max-width: 980px; margin: 0 auto; }
.footer hr { background: var(--aetia-hairline); height: 1px; }
/* --------------------------------------------------------------------------
19. Level / Media / Panel
-------------------------------------------------------------------------- */
.level { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--aetia-space-4); margin-bottom: var(--aetia-space-4); }
.level-left, .level-right { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aetia-space-3); }
.level-item { display: flex; align-items: center; gap: 0.5rem; }
@media (max-width: 768px) {
.level { flex-direction: column; align-items: stretch; }
.level-left, .level-right { width: 100%; }
}
.media {
display: flex; align-items: flex-start; gap: var(--aetia-space-4);
padding-bottom: var(--aetia-space-4);
border-bottom: 1px solid var(--aetia-hairline);
margin-bottom: var(--aetia-space-4);
}
.media:last-child { border-bottom: 0; margin-bottom: 0; }
.media-left { flex-shrink: 0; }
.media-content { flex: 1; min-width: 0; }
.media-right { flex-shrink: 0; }
.panel { background: var(--aetia-glass); border: 1px solid var(--aetia-hairline); border-radius: var(--aetia-radius); overflow: hidden; margin-bottom: var(--aetia-space-4); }
.panel-heading { padding: 0.75rem 1rem; background: var(--aetia-glass-hi); color: var(--aetia-text-bright); font-weight: 700; border-bottom: 1px solid var(--aetia-hairline); }
.panel-block { display: flex; align-items: center; gap: 0.5em; padding: 0.5rem 1rem; color: var(--aetia-text-muted); border-bottom: 1px solid var(--aetia-hairline); text-decoration: none; }
.panel-block:last-child { border-bottom: 0; }
.panel-block:hover { background: var(--aetia-glass-hi); color: var(--aetia-text-bright); text-decoration: none; }
.panel-tabs { display: flex; padding: 0 0.5rem; border-bottom: 1px solid var(--aetia-hairline); }
.panel-tabs a { padding: 0.55rem 0.8rem; color: var(--aetia-text-muted); border-bottom: 2px solid transparent; }
.panel-tabs a.is-active { color: var(--aetia-emerald); border-bottom-color: var(--aetia-emerald); }
/* --------------------------------------------------------------------------
20. Icons & icon-text
-------------------------------------------------------------------------- */
.icon { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; line-height: 1; }
.icon.is-small { width: 1rem; height: 1rem; font-size: 0.85em; }
.icon.is-medium { width: 2rem; height: 2rem; font-size: 1.25em; }
.icon.is-large { width: 3rem; height: 3rem; font-size: 1.6em; }
.icon-text { display: inline-flex; align-items: center; gap: 0.35em; flex-wrap: wrap; }
/* --------------------------------------------------------------------------
21. Utilities — spacing, text, colors, display
-------------------------------------------------------------------------- */
.m-0 { margin: 0 !important; }
.m-1 { margin: var(--aetia-space-1) !important; }
.m-2 { margin: var(--aetia-space-2) !important; }
.m-3 { margin: var(--aetia-space-3) !important; }
.m-4 { margin: var(--aetia-space-4) !important; }
.m-5 { margin: var(--aetia-space-5) !important; }
.m-6 { margin: var(--aetia-space-6) !important; }
.mt-0{margin-top:0!important;} .mt-1{margin-top:var(--aetia-space-1)!important;} .mt-2{margin-top:var(--aetia-space-2)!important;} .mt-3{margin-top:var(--aetia-space-3)!important;} .mt-4{margin-top:var(--aetia-space-4)!important;} .mt-5{margin-top:var(--aetia-space-5)!important;} .mt-6{margin-top:var(--aetia-space-6)!important;}
.mb-0{margin-bottom:0!important;} .mb-1{margin-bottom:var(--aetia-space-1)!important;} .mb-2{margin-bottom:var(--aetia-space-2)!important;} .mb-3{margin-bottom:var(--aetia-space-3)!important;} .mb-4{margin-bottom:var(--aetia-space-4)!important;} .mb-5{margin-bottom:var(--aetia-space-5)!important;} .mb-6{margin-bottom:var(--aetia-space-6)!important;}
.ml-0{margin-left:0!important;} .ml-1{margin-left:var(--aetia-space-1)!important;} .ml-2{margin-left:var(--aetia-space-2)!important;} .ml-3{margin-left:var(--aetia-space-3)!important;} .ml-4{margin-left:var(--aetia-space-4)!important;} .ml-5{margin-left:var(--aetia-space-5)!important;}
.mr-0{margin-right:0!important;} .mr-1{margin-right:var(--aetia-space-1)!important;} .mr-2{margin-right:var(--aetia-space-2)!important;} .mr-3{margin-right:var(--aetia-space-3)!important;} .mr-4{margin-right:var(--aetia-space-4)!important;} .mr-5{margin-right:var(--aetia-space-5)!important;}
.mx-auto{margin-left:auto!important; margin-right:auto!important;}
.my-2{margin-top:var(--aetia-space-2)!important;margin-bottom:var(--aetia-space-2)!important;}
.my-3{margin-top:var(--aetia-space-3)!important;margin-bottom:var(--aetia-space-3)!important;}
.my-4{margin-top:var(--aetia-space-4)!important;margin-bottom:var(--aetia-space-4)!important;}
.my-5{margin-top:var(--aetia-space-5)!important;margin-bottom:var(--aetia-space-5)!important;}
.p-0 { padding: 0 !important; }
.p-1 { padding: var(--aetia-space-1) !important; }
.p-2 { padding: var(--aetia-space-2) !important; }
.p-3 { padding: var(--aetia-space-3) !important; }
.p-4 { padding: var(--aetia-space-4) !important; }
.p-5 { padding: var(--aetia-space-5) !important; }
.p-6 { padding: var(--aetia-space-6) !important; }
.pt-3{padding-top:var(--aetia-space-3)!important;} .pt-4{padding-top:var(--aetia-space-4)!important;} .pt-5{padding-top:var(--aetia-space-5)!important;}
.pb-3{padding-bottom:var(--aetia-space-3)!important;} .pb-4{padding-bottom:var(--aetia-space-4)!important;} .pb-5{padding-bottom:var(--aetia-space-5)!important;}
.px-3{padding-left:var(--aetia-space-3)!important;padding-right:var(--aetia-space-3)!important;}
.px-4{padding-left:var(--aetia-space-4)!important;padding-right:var(--aetia-space-4)!important;}
.py-3{padding-top:var(--aetia-space-3)!important;padding-bottom:var(--aetia-space-3)!important;}
.py-4{padding-top:var(--aetia-space-4)!important;padding-bottom:var(--aetia-space-4)!important;}
.has-text-centered { text-align: center !important; }
.has-text-left { text-align: left !important; }
.has-text-right { text-align: right !important; }
.has-text-justified { text-align: justify !important; }
.has-text-light { color: var(--aetia-text-bright) !important; }
.has-text-white { color: #ffffff !important; }
.has-text-grey { color: var(--aetia-text-muted) !important; }
.has-text-grey-light { color: var(--aetia-text-muted) !important; }
.has-text-grey-dark { color: var(--aetia-faint) !important; }
.has-text-dark { color: var(--aetia-faint) !important; }
.has-text-primary { color: var(--aetia-emerald) !important; }
.has-text-info { color: var(--aetia-info) !important; }
.has-text-success { color: var(--aetia-success) !important; }
.has-text-warning { color: var(--aetia-gold-bright) !important; }
.has-text-danger { color: var(--aetia-danger) !important; }
.has-text-link { color: var(--aetia-emerald) !important; }
.has-background-dark { background-color: var(--aetia-ground-2) !important; }
.has-background-darker { background-color: var(--aetia-ground) !important; }
.has-background-light { background-color: var(--aetia-glass-hi) !important; color: var(--aetia-ink); }
.has-background-primary { background-color: var(--aetia-emerald) !important; color: var(--aetia-on-emerald); }
.has-background-info { background-color: var(--aetia-info) !important; }
.has-background-success { background-color: var(--aetia-success) !important; }
.has-background-warning { background-color: var(--aetia-warning) !important; }
.has-background-danger { background-color: var(--aetia-danger) !important; }
.has-background-warning-light { background-color: color-mix(in srgb, var(--aetia-warning) 10%, transparent) !important; }
.has-background-success-light { background-color: color-mix(in srgb, var(--aetia-success) 10%, transparent) !important; }
.has-background-info-light { background-color: color-mix(in srgb, var(--aetia-info) 10%, transparent) !important; }
.is-size-1 { font-size: 2.5rem !important; }
.is-size-2 { font-size: 2rem !important; }
.is-size-3 { font-size: 1.65rem !important; }
.is-size-4 { font-size: 1.35rem !important; }
.is-size-5 { font-size: 1.15rem !important; }
.is-size-6 { font-size: 1rem !important; }
.is-size-7 { font-size: 0.85rem !important; }
.has-text-weight-light { font-weight: 300 !important; }
.has-text-weight-normal { font-weight: 400 !important; }
.has-text-weight-medium { font-weight: 500 !important; }
.has-text-weight-semibold { font-weight: 600 !important; }
.has-text-weight-bold { font-weight: 700 !important; }
.is-block { display: block !important; }
.is-inline { display: inline !important; }
.is-inline-block { display: inline-block !important; }
.is-flex { display: flex !important; }
.is-inline-flex { display: inline-flex !important; }
.is-hidden { display: none !important; }
@media (max-width: 768px) { .is-hidden-mobile { display: none !important; } }
@media (min-width: 769px) and (max-width: 1023px) { .is-hidden-tablet-only { display: none !important; } }
@media (max-width: 1023px) { .is-hidden-touch { display: none !important; } }
@media (min-width: 1024px) { .is-hidden-desktop { display: none !important; } }
.is-flex-direction-column { flex-direction: column !important; }
.is-justify-content-center { justify-content: center !important; }
.is-justify-content-space-between { justify-content: space-between !important; }
.is-justify-content-flex-end { justify-content: flex-end !important; }
.is-align-items-center { align-items: center !important; }
.is-align-items-flex-start { align-items: flex-start !important; }
.is-align-items-stretch { align-items: stretch !important; }
.is-flex-wrap-wrap { flex-wrap: wrap !important; }
.is-clipped { overflow: hidden !important; }
.is-relative { position: relative !important; }
.has-text-overflow-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.content { line-height: 1.65; color: var(--aetia-ink); }
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { color: var(--aetia-text-bright); margin-top: 1.4em; }
.content h1:first-child, .content h2:first-child, .content h3:first-child { margin-top: 0; }
.content ul, .content ol { padding-left: 1.5em; }
.content blockquote { background: var(--aetia-glass); border-left: 3px solid var(--aetia-gold); padding: 1em 1.2em; margin: 1em 0; }
/* --------------------------------------------------------------------------
22. Aetia-specific components
-------------------------------------------------------------------------- */
/* Service / feature card (home + services pages) — glass card, emerald
hairline top rule on hover, gold-hairline border at rest. */
.aetia-service-card {
background: var(--aetia-glass);
border: 1px solid var(--aetia-hairline);
border-radius: var(--aetia-radius-lg);
padding: var(--aetia-space-6) var(--aetia-space-5);
color: var(--aetia-ink);
height: 100%;
backdrop-filter: blur(8px);
transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
position: relative;
overflow: hidden;
}
.aetia-service-card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--aetia-gold), transparent);
opacity: 0.7;
}
.aetia-service-card:hover {
transform: translateY(-4px);
border-color: var(--aetia-hairline-strong);
background: var(--aetia-glass-hi);
box-shadow: var(--aetia-shadow-sm);
}
.aetia-service-icon {
width: 3.4rem; height: 3.4rem;
border-radius: var(--aetia-radius);
background: var(--aetia-glass-hi);
border: 1px solid var(--aetia-hairline-strong);
display: inline-flex; align-items: center; justify-content: center;
color: var(--aetia-emerald);
font-size: 1.5rem;
margin-bottom: var(--aetia-space-4);
}
.aetia-about-card {
background: var(--aetia-glass);
border: 1px solid var(--aetia-hairline);
border-radius: var(--aetia-radius-lg);
padding: var(--aetia-space-8);
box-shadow: var(--aetia-shadow-sm);
}
.aetia-about-box {
background: var(--aetia-glass-hi);
border: 1px solid var(--aetia-hairline);
border-radius: var(--aetia-radius);
padding: var(--aetia-space-5);
}
.login-card {
border-radius: var(--aetia-radius-lg);
box-shadow: var(--aetia-shadow);
background: var(--aetia-glass);
border: 1px solid var(--aetia-hairline);
}
/* Profile image (talent table avatar / small avatars) */
.profile-image { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--aetia-hairline); }
.profile-image-preview { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid var(--aetia-hairline); transition: border-color 0.2s ease; }
.profile-image-preview:hover { border-color: var(--aetia-emerald); }
.profile-image-placeholder {
width: 120px; height: 120px; border-radius: 50%;
background: linear-gradient(150deg, var(--aetia-gold), var(--aetia-emerald-deep));
display: flex; align-items: center; justify-content: center;
margin: 0 auto;
border: 3px solid var(--aetia-hairline);
color: var(--aetia-on-emerald);
font-size: 2.5rem;
transition: border-color 0.2s ease;
}
.profile-image-placeholder:hover { border-color: var(--aetia-emerald); }
/* Status badges (talent roster + email logs) */
.status-badge {
padding: 0.2rem 0.65rem;
border-radius: var(--aetia-radius-pill);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
display: inline-flex; align-items: center; gap: 0.35em;
border: 1px solid transparent;
}
.status-new { background: color-mix(in srgb, var(--aetia-danger) 16%, transparent); color: var(--aetia-danger); border-color: color-mix(in srgb, var(--aetia-danger) 40%, transparent); }
.status-open { background: color-mix(in srgb, var(--aetia-info) 16%, transparent); color: var(--aetia-info); border-color: color-mix(in srgb, var(--aetia-info) 40%, transparent); }
.status-pending { background: color-mix(in srgb, var(--aetia-warning) 16%, transparent); color: var(--aetia-gold-bright); border-color: color-mix(in srgb, var(--aetia-warning) 44%, transparent); }
.status-responded { background: color-mix(in srgb, var(--aetia-success) 16%, transparent); color: var(--aetia-success); border-color: color-mix(in srgb, var(--aetia-success) 40%, transparent); }
.status-closed { background: var(--aetia-surface-3); color: var(--aetia-text-muted); border-color: var(--aetia-hairline); }
.status-approved { background: color-mix(in srgb, var(--aetia-success) 16%, transparent); color: var(--aetia-success); border-color: color-mix(in srgb, var(--aetia-success) 40%, transparent); }
/* Stat / dashboard cards (generic — .aetia-stat-grid in section 26 is the
staff-console specific variant with a link affordance) */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--aetia-space-4); margin-bottom: var(--aetia-space-6); }
.stat-card {
background: var(--aetia-glass);
border: 1px solid var(--aetia-hairline);
border-radius: var(--aetia-radius);
padding: var(--aetia-space-5);
text-align: center;
transition: border-color 0.2s ease, transform 0.2s ease;
position: relative;
overflow: hidden;
}
.stat-card:hover { border-color: var(--aetia-hairline-strong); transform: translateY(-2px); }
.stat-card.urgent { border-color: color-mix(in srgb, var(--aetia-danger) 44%, transparent); background: color-mix(in srgb, var(--aetia-danger) 6%, var(--aetia-glass)); }
.stat-card.warning { border-color: color-mix(in srgb, var(--aetia-warning) 44%, transparent); background: color-mix(in srgb, var(--aetia-warning) 6%, var(--aetia-glass)); }
.stat-card.success { border-color: color-mix(in srgb, var(--aetia-success) 44%, transparent); background: color-mix(in srgb, var(--aetia-success) 6%, var(--aetia-glass)); }
.stat-number { font-family: var(--aetia-font-display); font-size: 2.4rem; font-weight: 600; color: var(--aetia-text-bright); line-height: 1.1; margin-bottom: 0.25rem; }
.stat-card.urgent .stat-number { color: var(--aetia-danger); }
.stat-card.warning .stat-number { color: var(--aetia-gold-bright); }
.stat-card.success .stat-number { color: var(--aetia-success); }
.stat-label { color: var(--aetia-text-muted); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
/* Quick action cards (admin home) */
.quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--aetia-space-4); margin: var(--aetia-space-6) 0; }
.action-card {
background: var(--aetia-glass);
border: 1px solid var(--aetia-hairline);
border-radius: var(--aetia-radius);
padding: var(--aetia-space-5);
text-align: center;
color: var(--aetia-ink);
text-decoration: none;
transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.action-card:hover { transform: translateY(-3px); border-color: var(--aetia-emerald); background: var(--aetia-glass-hi); text-decoration: none; color: var(--aetia-ink); }
.action-icon { font-size: 2rem; color: var(--aetia-emerald); margin-bottom: 0.5rem; }
.action-title { color: var(--aetia-text-bright); font-weight: 700; margin-bottom: 0.25rem; }
.action-desc { color: var(--aetia-text-muted); font-size: 0.9rem; }
/* Activity / recent lists */
.recent-activity { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--aetia-space-4); margin-top: var(--aetia-space-6); }
.activity-card { background: var(--aetia-glass); border: 1px solid var(--aetia-hairline); border-radius: var(--aetia-radius); padding: var(--aetia-space-5); }
.activity-header { color: var(--aetia-emerald); font-size: 1.1rem; font-weight: 700; margin-bottom: var(--aetia-space-3); display: flex; align-items: center; gap: 0.5rem; }
.activity-item { padding: 0.55rem 0; border-bottom: 1px solid var(--aetia-hairline); color: var(--aetia-ink); }
.activity-item:last-child { border-bottom: 0; }
.activity-meta { font-size: 0.8rem; color: var(--aetia-faint); margin-top: 0.2rem; }
/* Email logs filter / table */
.filters-section, .stats-section, .email-log-table {
background: var(--aetia-glass);
border: 1px solid var(--aetia-hairline);
border-radius: var(--aetia-radius);
padding: var(--aetia-space-5);
margin-bottom: var(--aetia-space-5);
}
.filter-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--aetia-space-3); align-items: end; }
.email-content-display {
background: var(--aetia-ground-2);
border: 1px solid var(--aetia-hairline);
color: var(--aetia-ink);
padding: var(--aetia-space-5);
border-radius: var(--aetia-radius);
max-height: 420px;
overflow-y: auto;
line-height: 1.65;
}
.email-content-display a { color: var(--aetia-emerald); }
.email-meta { background: var(--aetia-ground-2); padding: var(--aetia-space-4); border-radius: var(--aetia-radius); margin-bottom: var(--aetia-space-4); }
.status-sent { color: var(--aetia-success); font-weight: 700; }
.status-failed { color: var(--aetia-danger); font-weight: 700; }
.status-queued { color: var(--aetia-gold-bright); font-weight: 700; }
.email-type-badge {
background: color-mix(in srgb, var(--aetia-success) 15%, transparent);
color: var(--aetia-success);
padding: 0.15rem 0.6rem;
border-radius: var(--aetia-radius-pill);
font-size: 0.74rem;
font-weight: 700;
}
.email-content-preview { max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Archive styling */
.archived-message-header, .archive-info {
background: color-mix(in srgb, var(--aetia-warning) 6%, transparent);
border: 1px solid color-mix(in srgb, var(--aetia-warning) 40%, transparent);
border-radius: var(--aetia-radius);
color: var(--aetia-ink);
padding: var(--aetia-space-4) var(--aetia-space-5);
}
.archive-info strong { color: var(--aetia-gold-bright); font-weight: 700; }
.archive-reason { font-style: italic; color: var(--aetia-text-muted); }
.archive-message-active { background: color-mix(in srgb, var(--aetia-warning) 6%, transparent) !important; border-left: 4px solid var(--aetia-gold); }
.archive-message-item {
background: var(--aetia-glass);
border: 1px solid var(--aetia-hairline);
border-radius: var(--aetia-radius);
padding: var(--aetia-space-4);
transition: border-color 0.15s ease, background 0.15s ease;
}
.archive-message-item:hover { background: var(--aetia-glass-hi); border-color: var(--aetia-gold); }
/* Discussion thread images */
.discussion-image { max-width: 420px; margin: 0 auto; }
.discussion-image img { border-radius: var(--aetia-radius); cursor: pointer; }
/* Attachments */
.attachment-card { background: var(--aetia-glass-hi); border: 1px solid var(--aetia-hairline); border-radius: var(--aetia-radius); padding: var(--aetia-space-4); width: 100%; max-width: 320px; }
.attachment-filename { word-break: break-word; color: var(--aetia-text-bright) !important; }
.message-link, .message-email-link { color: var(--aetia-emerald) !important; text-decoration: underline; word-break: break-all; transition: color 0.18s ease; }
.message-link:hover, .message-email-link:hover { color: var(--aetia-emerald-bright) !important; text-decoration: none; }
/* Legal pages (terms / privacy) */
.legal-content {
background: var(--aetia-glass);
border: 1px solid var(--aetia-hairline);
border-radius: var(--aetia-radius-lg);
padding: var(--aetia-space-8);
color: var(--aetia-ink);
box-shadow: var(--aetia-shadow-sm);
line-height: 1.75;
max-width: 78ch;
margin: 0 auto;
}
.legal-content h1 { margin-bottom: 0.4rem; color: var(--aetia-text-bright); }
.legal-content h2 { margin-top: 1.6rem; margin-bottom: 0.6rem; color: var(--aetia-text-bright); border-left: 3px solid var(--aetia-gold); padding-left: 0.75rem; }
.legal-content p, .legal-content ul, .legal-content ol { color: var(--aetia-ink); }
.policy-meta {
background: color-mix(in srgb, var(--aetia-emerald) 10%, transparent);
padding: 0.4rem 0.85rem;
border-radius: var(--aetia-radius-sm);
display: inline-block;
color: var(--aetia-emerald);
margin-bottom: var(--aetia-space-4);
font-weight: 600;
border: 1px solid color-mix(in srgb, var(--aetia-emerald) 24%, transparent);
}
.legal-toc {
position: sticky;
top: calc(var(--aetia-navbar-height) + 1rem);
border-radius: var(--aetia-radius);
background: var(--aetia-glass);
border: 1px solid var(--aetia-hairline);
padding: var(--aetia-space-2);
}
.legal-toc .panel-heading { background: transparent; color: var(--aetia-text-bright); border-bottom: 1px solid var(--aetia-hairline); }
.legal-toc .panel-block { font-size: 0.9rem; color: var(--aetia-text-muted); }
.legal-toc .panel-block:hover { color: var(--aetia-text-bright); background: var(--aetia-glass-hi); }
@media (max-width: 1023px) {
.legal-content { padding: var(--aetia-space-5); max-width: 100%; }
.legal-toc { display: none; }
}
/* Animations */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.fade-in-new { opacity: 0; animation: fadeIn 0.45s ease-out forwards; }
button[disabled], input[disabled], select[disabled], textarea[disabled] { opacity: 0.5 !important; cursor: not-allowed !important; }
/* SweetAlert2 — re-themed emerald/gold, both palettes */
.swal2-popup.swal2-popup {
background: var(--aetia-surface) !important;
color: var(--aetia-ink) !important;
border: 1px solid var(--aetia-hairline) !important;
border-radius: var(--aetia-radius-lg) !important;
box-shadow: var(--aetia-shadow-lg) !important;
}
.swal2-title { font-family: var(--aetia-font-display) !important; color: var(--aetia-text-bright) !important; }
.swal2-html-container, .swal2-content { color: var(--aetia-ink) !important; }
.swal2-styled.swal2-confirm {
background: var(--aetia-emerald) !important;
color: var(--aetia-on-emerald) !important;
border-radius: var(--aetia-radius-pill) !important;
font-weight: 700 !important;
box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--aetia-emerald) 60%, transparent) !important;
}
.swal2-styled.swal2-confirm:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--aetia-emerald) 30%, transparent) !important; }
.swal2-styled.swal2-cancel {
background: var(--aetia-glass-hi) !important;
color: var(--aetia-text-bright) !important;
border: 1px solid var(--aetia-hairline) !important;
border-radius: var(--aetia-radius-pill) !important;
}
.swal2-styled.swal2-deny {
background: var(--aetia-danger) !important;
color: #ffffff !important;
border-radius: var(--aetia-radius-pill) !important;
}
.swal2-input, .swal2-select, .swal2-textarea {
background: var(--aetia-ground-2) !important;
color: var(--aetia-ink) !important;
border: 1px solid var(--aetia-hairline) !important;
border-radius: var(--aetia-radius-sm) !important;
}
.swal2-input:focus, .swal2-textarea:focus {
border-color: var(--aetia-emerald) !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--aetia-emerald) 22%, transparent) !important;
}
.swal2-icon { border-color: var(--aetia-emerald) !important; color: var(--aetia-emerald) !important; }
.swal2-icon.swal2-success { border-color: var(--aetia-success) !important; }
.swal2-icon.swal2-success [class^=swal2-success-line] { background-color: var(--aetia-success) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: color-mix(in srgb, var(--aetia-success) 35%, transparent) !important; }
.swal2-icon.swal2-error { border-color: var(--aetia-danger) !important; color: var(--aetia-danger) !important; }
.swal2-icon.swal2-error [class^=swal2-x-mark-line] { background-color: var(--aetia-danger) !important; }
.swal2-icon.swal2-warning { border-color: var(--aetia-gold) !important; color: var(--aetia-gold-bright) !important; }
.swal2-icon.swal2-info { border-color: var(--aetia-info) !important; color: var(--aetia-info) !important; }
.swal2-icon.swal2-question { border-color: var(--aetia-gold) !important; color: var(--aetia-gold-bright) !important; }
.swal2-progress-steps .swal2-progress-step { background: var(--aetia-surface-3) !important; color: var(--aetia-text-muted) !important; }
.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step { background: var(--aetia-emerald) !important; color: var(--aetia-on-emerald) !important; }
.swal-image-responsive { max-width: 100% !important; max-height: 80vh !important; object-fit: contain !important; }
.swal-light-input { color: var(--aetia-ink) !important; background-color: var(--aetia-surface) !important; }
/* Print */
@media print {
body { background: white !important; color: black !important; }
.button, .breadcrumb, .navbar, .footer, .level-right, .aetia-glow, .aetia-theme-toggle { display: none !important; }
.box, .card { box-shadow: none !important; border: 1px solid #ddd !important; background: white !important; color: black !important; }
}
/* Responsive tweaks */
@media (max-width: 768px) {
.section { padding: 3rem 0; }
.container { padding-left: var(--aetia-space-4); padding-right: var(--aetia-space-4); }
.hero-body { padding: var(--aetia-space-8) var(--aetia-space-4); }
.stats-grid { grid-template-columns: 1fr; }
.stat-number { font-size: 2rem; }
}
/* --------------------------------------------------------------------------
23. Host-branch chrome
-------------------------------------------------------------------------- */
.aetia-preview-bar {
position: relative;
z-index: 2;
background: color-mix(in srgb, var(--aetia-warning) 14%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--aetia-warning) 40%, transparent);
color: var(--aetia-gold-bright);
text-align: center;
padding: 0.55rem 1rem;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.aetia-footer-logo { max-height: 1.8rem; width: auto; vertical-align: middle; }
.aetia-footer-abn { max-width: 640px; margin: 0 auto; }
/* Coming-soon / 404 tombstone page — same restrained-glow language as the
hero, full-viewport, no nav/footer chrome around it. */
.aetia-tomb {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: var(--aetia-space-6);
position: relative;
overflow: hidden;
background: var(--aetia-ground);
}
.aetia-tomb::before {
content: "";
position: absolute;
inset: 0;
background: var(--aetia-glow);
pointer-events: none;
}
.aetia-tomb__inner {
position: relative;
z-index: 1;
max-width: 520px;
width: 100%;
text-align: center;
background: var(--aetia-glass);
backdrop-filter: blur(10px);
border: 1px solid var(--aetia-hairline);
border-radius: var(--aetia-radius-xl);
box-shadow: var(--aetia-shadow-lg);
padding: var(--aetia-space-12) var(--aetia-space-8);
}
.aetia-tomb__logo { display: inline-flex; align-items: center; justify-content: center; margin: 0 auto var(--aetia-space-6); text-decoration: none; }
.aetia-tomb__logo { text-decoration: none; }
.aetia-tomb__icon {
width: 4.5rem; height: 4.5rem;
border-radius: 50%;
background: var(--aetia-glass-hi);
border: 1px solid var(--aetia-hairline-strong);
display: inline-flex; align-items: center; justify-content: center;
margin: 0 auto var(--aetia-space-5);
color: var(--aetia-emerald);
font-size: 1.8rem;
}
.aetia-tomb__title { font-family: var(--aetia-font-display); color: var(--aetia-text-bright); font-weight: 500; font-size: clamp(1.85rem, 3.2vw, 2.35rem); margin: 0 0 var(--aetia-space-3); }
.aetia-tomb__body { color: var(--aetia-text-muted); font-size: 1.05rem; margin: 0 0 var(--aetia-space-6); }
.aetia-tomb__back {
display: inline-flex; align-items: center; gap: 0.5em;
color: var(--aetia-on-emerald);
background: var(--aetia-emerald);
font-weight: 600;
text-decoration: none;
border: 1px solid transparent;
border-radius: var(--aetia-radius-pill);
padding: 0.65em 1.4em;
transition: background 0.18s ease, box-shadow 0.18s ease;
box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--aetia-emerald) 60%, transparent);
}
.aetia-tomb__back:hover { background: var(--aetia-emerald-bright); text-decoration: none; }
@media (max-width: 768px) { .aetia-tomb__inner { padding: var(--aetia-space-8) var(--aetia-space-5); } }
/* Coming-soon variant — same restrained-glow tombstone shell, its own
headline/eyebrow treatment and (optional) countdown tiles. */
.aetia-tomb--coming-soon .aetia-tomb__inner { max-width: 620px; }
.aetia-tomb__eyebrow {
font-family: var(--aetia-mono);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--aetia-gold);
margin: 0 0 var(--aetia-space-4);
}
.aetia-tomb__title--glow {
font-family: var(--aetia-font-display);
font-weight: 500;
font-size: clamp(2rem, 4.2vw, 2.9rem);
line-height: 1.15;
margin: 0 0 var(--aetia-space-4);
background: linear-gradient(135deg, var(--aetia-text-bright) 25%, var(--aetia-emerald-bright) 65%, var(--aetia-gold-bright) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.aetia-countdown {
display: grid;
grid-template-columns: repeat(4, minmax(64px, 1fr));
gap: var(--aetia-space-3);
max-width: 420px;
margin: 0 auto var(--aetia-space-6);
}
.aetia-countdown__tile {
background: var(--aetia-glass-hi);
border: 1px solid var(--aetia-hairline-strong);
border-radius: var(--aetia-radius);
padding: var(--aetia-space-4) var(--aetia-space-2);
box-shadow: var(--aetia-shadow-sm);
}
.aetia-countdown__value {
display: block;
font-family: var(--aetia-mono);
font-variant-numeric: tabular-nums;
font-size: clamp(1.4rem, 3vw, 1.9rem);
font-weight: 600;
line-height: 1.1;
color: var(--aetia-emerald-bright);
background: none;
-webkit-text-fill-color: var(--aetia-emerald-bright);
}
.aetia-countdown__label {
display: block;
margin-top: 0.35em;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--aetia-muted);
}
.aetia-countdown__done {
font-family: var(--aetia-font-display);
font-size: 1.1rem;
color: var(--aetia-gold-bright);
margin: 0 0 var(--aetia-space-6);
}
@media (max-width: 480px) {
.aetia-countdown { grid-template-columns: repeat(2, minmax(64px, 1fr)); }
}
/* --------------------------------------------------------------------------
24. /me/profile — avatar block + themed file input
-------------------------------------------------------------------------- */
.aetia-avatar-block { display: flex; align-items: flex-start; gap: var(--aetia-space-6); flex-wrap: wrap; }
.aetia-avatar-current {
flex-shrink: 0;
width: 112px; height: 112px;
border-radius: 50%;
overflow: hidden;
background: var(--aetia-glass-hi);
border: 2px solid var(--aetia-hairline-strong);
display: flex; align-items: center; justify-content: center;
}
.aetia-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aetia-avatar-placeholder { font-size: 2.6rem; color: var(--aetia-faint); line-height: 1; }
.aetia-avatar-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0.65rem; min-width: 240px; }
.aetia-avatar-upload-form { margin: 0; }
/* Holds only the CSRF field, submitted via JS after a SweetAlert2 confirm —
never rendered as a visual element (see me-profile.js). */
.aetia-avatar-remove-form { display: none; }
.aetia-connection-unlink-form { margin: 0; }
/* Themed file input — "opacity:0 overlay" technique: the REAL is stretched (inset:0) over the visible faux button +
filename pill and made fully transparent, so every click/drag/keyboard
focus lands on the real control and no raw OS "Choose File" chrome is
ever painted. The input is listed FIRST in the markup so the ~ sibling
selectors below can react to its :hover/:focus-visible state. */
.aetia-file-upload { position: relative; display: inline-flex; align-items: center; gap: 0; max-width: 100%; cursor: pointer; }
.aetia-file-upload-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; z-index: 2; }
.aetia-file-upload-btn {
display: inline-flex; align-items: center; gap: 0.5em;
padding: 0.6em 1.1em;
background: var(--aetia-glass-hi);
color: var(--aetia-text-bright);
border: 1px solid var(--aetia-hairline);
border-right: 0;
border-radius: var(--aetia-radius-pill) 0 0 var(--aetia-radius-pill);
font-weight: 600;
font-size: 0.9rem;
white-space: nowrap;
transition: background 0.18s ease, border-color 0.18s ease;
}
.aetia-file-upload-name {
display: inline-flex; align-items: center;
padding: 0.6em 0.95em;
background: var(--aetia-ground-2);
border: 1px solid var(--aetia-hairline);
border-radius: 0 var(--aetia-radius-pill) var(--aetia-radius-pill) 0;
color: var(--aetia-text-muted);
max-width: 11rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.85rem;
}
.aetia-file-upload-input:hover ~ .aetia-file-upload-btn,
.aetia-file-upload-input:focus-visible ~ .aetia-file-upload-btn {
background: var(--aetia-surface-3);
border-color: var(--aetia-emerald);
}
.aetia-file-upload-input:focus-visible ~ .aetia-file-upload-btn {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--aetia-emerald) 22%, transparent);
}
@media (max-width: 480px) {
.aetia-avatar-block { flex-direction: column; align-items: center; text-align: center; }
.aetia-avatar-actions { align-items: center; }
}
/* --------------------------------------------------------------------------
25. /me/messages — inbox thread list + discussion timeline
-------------------------------------------------------------------------- */
.aetia-thread-list { display: flex; flex-direction: column; gap: var(--aetia-space-3); }
.aetia-thread-item {
display: flex;
align-items: flex-start;
gap: var(--aetia-space-4);
padding: var(--aetia-space-4) var(--aetia-space-5);
background: var(--aetia-glass);
border: 1px solid var(--aetia-hairline);
border-radius: var(--aetia-radius);
text-decoration: none;
color: inherit;
transition: border-color 0.18s ease, background 0.18s ease;
}
.aetia-thread-item:hover, .aetia-thread-item:focus-visible {
border-color: var(--aetia-hairline-strong);
background: var(--aetia-glass-hi);
text-decoration: none;
}
.aetia-thread-dot {
flex-shrink: 0;
width: 0.6rem; height: 0.6rem;
margin-top: 0.4rem;
border-radius: 50%;
background: var(--aetia-emerald);
box-shadow: 0 0 8px color-mix(in srgb, var(--aetia-emerald) 60%, transparent);
}
.aetia-thread-dot.is-read { background: transparent; box-shadow: none; }
.aetia-thread-item.is-unread { border-left: 3px solid var(--aetia-emerald); }
.aetia-thread-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.aetia-thread-subject { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; color: var(--aetia-text-bright); font-weight: 600; font-size: 0.98rem; }
.aetia-thread-snippet { color: var(--aetia-text-muted); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aetia-thread-meta { flex-shrink: 0; display: flex; align-items: center; gap: 0.6rem; }
.aetia-thread-time { font-size: 0.75rem; color: var(--aetia-faint); white-space: nowrap; }
.aetia-inbox-empty { text-align: center; padding: var(--aetia-space-12) var(--aetia-space-6); }
/* Direct-child only — nested .button .icon i must keep normal button sizing/color */
.aetia-inbox-empty > i { display: block; font-size: 2.4rem; color: var(--aetia-faint); margin-bottom: var(--aetia-space-3); }
/* Thread discussion timeline: talent's OWN messages carry the single accent
(emerald), right-aligned; staff replies stay neutral glass, left-aligned —
one accent axis, per the mockup's product-band thread. */
.aetia-discussion { display: flex; flex-direction: column; gap: var(--aetia-space-4); margin: var(--aetia-space-4) 0; }
.aetia-discussion-item { display: flex; align-items: flex-start; gap: 0.65rem; max-width: 84%; }
.aetia-discussion-item.is-staff { align-self: flex-start; }
.aetia-discussion-item.is-talent { align-self: flex-end; flex-direction: row-reverse; }
.aetia-discussion-avatar {
flex-shrink: 0;
width: 2.1rem; height: 2.1rem;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 0.9rem;
}
.aetia-discussion-item.is-staff .aetia-discussion-avatar { background: var(--aetia-glass-hi); color: var(--aetia-muted); }
.aetia-discussion-item.is-talent .aetia-discussion-avatar { background: color-mix(in srgb, var(--aetia-emerald) 18%, transparent); color: var(--aetia-emerald); }
.aetia-discussion-bubble { min-width: 0; background: var(--aetia-glass-hi); border: 1px solid var(--aetia-hairline); border-radius: var(--aetia-radius); padding: 0.7rem 1rem; }
.aetia-discussion-item.is-staff .aetia-discussion-bubble { border-top-left-radius: 3px; }
.aetia-discussion-item.is-talent .aetia-discussion-bubble {
border-top-right-radius: 3px;
background: color-mix(in srgb, var(--aetia-emerald) 12%, var(--aetia-glass-hi));
border-color: color-mix(in srgb, var(--aetia-emerald) 30%, var(--aetia-hairline));
}
.aetia-discussion-meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--aetia-space-4); margin-bottom: 0.3rem; font-size: 0.75rem; }
.aetia-discussion-name { font-weight: 700; color: var(--aetia-text-bright); }
.aetia-discussion-time { color: var(--aetia-faint); white-space: nowrap; }
.aetia-discussion-text { color: var(--aetia-ink); font-size: 0.92rem; line-height: 1.55; overflow-wrap: break-word; word-break: break-word; }
.aetia-discussion-image img { display: block; max-width: 260px; max-height: 260px; width: auto; height: auto; border-radius: var(--aetia-radius-sm); border: 1px solid var(--aetia-hairline); }
.aetia-discussion-image-caption { margin: 0.4rem 0 0; font-size: 0.75rem; color: var(--aetia-faint); }
.aetia-discussion-item.fade-in-new { animation: aetia-discussion-fade-in 0.35s ease; }
@keyframes aetia-discussion-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 640px) {
.aetia-thread-item { flex-wrap: wrap; }
.aetia-thread-meta { width: 100%; justify-content: space-between; margin-top: 0.35rem; }
.aetia-discussion-item { max-width: 100%; }
}
/* --------------------------------------------------------------------------
26. Staff console — /admin/*
-------------------------------------------------------------------------- */
.aetia-admin-tabs {
display: flex; flex-wrap: wrap; gap: 0.35rem;
padding: 0.4rem;
margin-bottom: var(--aetia-space-5);
background: var(--aetia-glass);
border: 1px solid var(--aetia-hairline);
border-radius: var(--aetia-radius-pill);
}
.aetia-admin-tab {
display: inline-flex; align-items: center;
padding: 0.5em 1em;
border-radius: var(--aetia-radius-pill);
color: var(--aetia-text-muted);
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease;
}
.aetia-admin-tab:hover { background: var(--aetia-glass-hi); color: var(--aetia-text-bright); text-decoration: none; }
.aetia-admin-tab.is-active { background: var(--aetia-emerald); color: var(--aetia-on-emerald); }
.aetia-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--aetia-space-4); margin-bottom: var(--aetia-space-5); }
.aetia-stat-card {
display: flex; flex-direction: column; gap: 0.35rem;
padding: var(--aetia-space-5);
background: var(--aetia-glass);
border: 1px solid var(--aetia-hairline);
border-radius: var(--aetia-radius-lg);
color: inherit;
text-decoration: none;
transition: border-color 0.18s ease, background 0.18s ease, transform 0.12s ease;
}
.aetia-stat-card:hover { border-color: var(--aetia-hairline-strong); background: var(--aetia-glass-hi); text-decoration: none; transform: translateY(-2px); }
.aetia-stat-icon { color: var(--aetia-emerald); font-size: 1.3rem; }
.aetia-stat-number { font-family: var(--aetia-font-display); font-size: 2.1rem; font-weight: 600; color: var(--aetia-text-bright); line-height: 1; }
.aetia-stat-label { color: var(--aetia-text-muted); font-size: 0.82rem; font-weight: 600; }
.aetia-stat-card.is-disabled {
position: relative;
opacity: 0.55;
cursor: not-allowed;
pointer-events: none;
}
.aetia-stat-card.is-disabled .aetia-stat-icon { color: var(--aetia-text-muted); }
.aetia-stat-lock {
position: absolute;
top: 0.75rem;
right: 0.75rem;
color: var(--aetia-text-muted);
font-size: 0.75rem;
}
.aetia-filter-bar {
display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--aetia-space-4);
padding: var(--aetia-space-4);
margin-bottom: var(--aetia-space-5);
background: var(--aetia-glass);
border: 1px solid var(--aetia-hairline);
border-radius: var(--aetia-radius);
}
.aetia-filter-bar .field { margin-bottom: 0; min-width: 10rem; flex: 1 1 10rem; }
.aetia-filter-submit { display: flex; gap: 0.5rem; flex: 0 0 auto; min-width: 0 !important; }
.aetia-thread-talent { color: var(--aetia-text-muted); font-size: 0.8rem; display: inline-flex; align-items: center; gap: 0.35em; }
.aetia-admin-actions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--aetia-space-4); }
.aetia-admin-action-card { margin-bottom: 0; }
.aetia-admin-row-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.aetia-inline-form { margin: 0; display: inline-flex; }
.aetia-reason-form { margin: 0; display: inline-flex; }
@media (max-width: 640px) {
.aetia-stat-grid { grid-template-columns: 1fr 1fr; }
.aetia-admin-actions-grid { grid-template-columns: 1fr; }
}
/* Honeypot — visually hidden, but not display:none (bots skip that) */
.aetia-honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
}