/* AF247 Staff Portal v2 — editorial transformation, 2026-05-17 part 12
*
* Shipped after Eugenio said /portal looks ugly. Layered on top of brand.css
* (which stays canonical for status pills, alerts, tables, leave). This file
* adds the editorial moments: mega hero, glass tiles, dramatic typography.
*
* Imports Boldonse + Bricolage Grotesque (same pair used on dashboard_v2 to
* keep the two apps visually unified across the product surface).
*/
@import url('https://fonts.googleapis.com/css2?family=Boldonse&family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,200..800&display=swap');
:root {
/* Spacing scale aligned with dashboard_v2 v2-s-* */
--p2-s-xs: 4px;
--p2-s-sm: 8px;
--p2-s-md: 16px;
--p2-s-lg: 24px;
--p2-s-xl: 40px;
--p2-s-2xl: 64px;
--p2-s-3xl: 96px;
}
/* ────────────────────────────────────────────────────────────────────
* PAGE BACKGROUND — subtle violet wash + grain for premium feel
* ──────────────────────────────────────────────────────────────────── */
body.af-page.af-monogram-bg {
background:
radial-gradient(ellipse 80% 60% at 30% 0%, rgba(110, 56, 213, 0.06), transparent 50%),
radial-gradient(ellipse 60% 40% at 100% 100%, rgba(164, 42, 249, 0.04), transparent 60%),
var(--af-bg);
position: relative;
isolation: isolate;
}
body.af-page.af-monogram-bg::before {
content: '';
position: fixed; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
pointer-events: none;
z-index: -1;
opacity: 0.5;
}
/* Wider page wrap for editorial layout */
.af-page-wrap {
max-width: 1280px;
margin: 0 auto;
padding: var(--p2-s-lg);
}
@media (min-width: 960px) {
.af-page-wrap { padding: var(--p2-s-xl); }
}
/* ────────────────────────────────────────────────────────────────────
* PORTAL HEADER — mega avatar + editorial name
* ──────────────────────────────────────────────────────────────────── */
.portal-header {
display: flex;
flex-wrap: wrap; /* 2026-06-11 P0: long staff names no longer push Sign out off-screen at 390px */
align-items: center;
justify-content: space-between;
gap: var(--p2-s-md);
margin-bottom: var(--p2-s-xl);
padding-bottom: var(--p2-s-md);
border-bottom: 1px solid rgba(110, 56, 213, 0.1);
}
.portal-header .who {
display: flex;
align-items: center;
gap: var(--p2-s-lg);
min-width: 0; /* 2026-06-11 P0: flex child must be allowed to shrink */
}
.portal-header .avatar {
width: 56px !important;
height: 56px !important;
border-radius: 50%;
background:
radial-gradient(ellipse 80% 80% at 30% 30%, var(--af-medium-purple), var(--af-blurple) 50%, var(--af-violet));
color: var(--af-white);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Boldonse', Georgia, serif;
font-style: italic;
font-weight: 400 !important;
font-size: 24px !important;
box-shadow:
0 8px 24px rgba(110, 56, 213, 0.4),
inset 0 2px 0 rgba(255, 255, 255, 0.2);
position: relative;
isolation: isolate;
}
.portal-header .avatar::before {
content: '';
position: absolute;
inset: -3px;
border-radius: 50%;
padding: 2px;
background: linear-gradient(135deg, var(--af-medium-purple), transparent 50%, var(--af-blurple));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
z-index: -1;
}
.portal-header .name {
font-family: 'Boldonse', Georgia, serif !important;
font-style: italic;
font-weight: 400 !important;
/* Boldonse is an extra-tall face — at 0.95 a 2-line display name
("Smoke Owner Test Account") collided line-on-line. 1.12 clears it
while the title still reads as one tight editorial block. */
line-height: 1.12 !important;
color: var(--af-ink) !important;
font-size: clamp(20px, 3vw, 30px) !important;
letter-spacing: -0.015em;
min-width: 0;
overflow-wrap: break-word; /* 2026-06-11 P0: long names wrap inside the column */
}
.portal-header .role {
font-size: 12px !important;
color: var(--af-blurple) !important;
text-transform: uppercase;
letter-spacing: 0.18em !important;
margin-top: 8px !important;
font-weight: 700 !important;
font-family: 'Montserrat', sans-serif;
}
.portal-header .runner { height: 40px; opacity: 0.85; }
.portal-header a.signout {
color: var(--af-ink-3);
font-size: 13px;
text-decoration: none;
padding: 10px 16px;
border-radius: 999px;
border: 1px solid var(--af-line);
font-weight: 600;
min-height: 44px; /* 2026-06-11: touch floor */
display: inline-flex;
align-items: center;
flex-shrink: 0;
transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 140ms var(--af-ease-out);
}
.portal-header a.signout:hover {
background: var(--af-blurple-pale);
color: var(--af-violet);
border-color: var(--af-blurple-pale);
}
.portal-header a.signout:active { transform: scale(0.97); }
@media (max-width: 640px) {
.portal-header .avatar { width: 56px !important; height: 56px !important; font-size: 24px !important; }
.portal-header .name { font-size: 24px !important; }
.portal-header .runner { display: none; }
}
/* ────────────────────────────────────────────────────────────────────
* HERO TODAY STRIP — dramatic violet clock-in
* ──────────────────────────────────────────────────────────────────── */
.af-today {
position: relative;
background:
radial-gradient(ellipse 60% 100% at 80% 30%, rgba(164, 42, 249, 0.4), transparent 50%),
linear-gradient(135deg, var(--af-violet) 0%, var(--af-blurple) 55%, var(--af-medium-purple) 100%) !important;
border-radius: 24px !important;
padding: var(--p2-s-xl) var(--p2-s-xl) !important;
margin: 0 0 var(--p2-s-2xl) !important;
box-shadow:
0 20px 56px rgba(46, 0, 102, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
display: grid !important;
grid-template-columns: 1fr auto !important;
align-items: center !important;
gap: var(--p2-s-xl) !important;
overflow: hidden !important;
isolation: isolate;
min-height: 200px;
}
.af-today::before {
content: 'AF';
position: absolute;
font-family: 'Boldonse', Georgia, serif !important;
font-style: italic;
font-size: 320px;
line-height: 0.8;
color: rgba(255, 255, 255, 0.04);
bottom: -60px;
right: -20px;
pointer-events: none;
z-index: 0;
letter-spacing: -0.05em;
font-weight: 400;
}
.af-today::after {
/* removed brand.css stripes — replaced with subtle inner glow */
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse 50% 80% at 10% 100%, rgba(255, 255, 255, 0.06), transparent 60%);
pointer-events: none;
z-index: 0;
}
.af-today > * { position: relative; z-index: 1; min-width: 0; } /* 2026-06-11: fixes 721–900px time-column pushout */
.af-today .label {
display: block;
font-family: 'Montserrat', sans-serif;
font-size: 11px !important;
text-transform: uppercase;
letter-spacing: 0.22em !important;
color: rgba(255, 255, 255, 0.65) !important;
font-weight: 700 !important;
margin-bottom: 16px !important;
}
.af-today .status-pill {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
padding: 8px 16px 8px 12px !important;
background: rgba(255, 255, 255, 0.12) !important;
border-radius: 999px !important;
font-size: 16px !important;
font-weight: 600 !important;
color: #fff !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 2px 12px rgba(0, 0, 0, 0.15) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
margin-bottom: 12px;
}
.af-today .status-pill .status-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.af-today .status-pill .status-dot--working { background: #34d399; box-shadow: 0 0 12px rgba(52,211,153,0.7); animation: pulse-working 1.8s ease-in-out infinite; }
.af-today .status-pill .status-dot--on_break { background: #fbbf24; box-shadow: 0 0 12px rgba(251,191,36,0.5); }
.af-today .status-pill .status-dot--off_duty,
.af-today .status-pill .status-dot--never_clocked_in { background: rgba(255,255,255,0.6); }
@keyframes pulse-working {
0%, 100% { box-shadow: 0 0 12px rgba(52,211,153,0.7); }
50% { box-shadow: 0 0 20px rgba(52,211,153,1); }
}
.af-today .shift-info {
display: block;
font-size: 14px !important;
color: rgba(255, 255, 255, 0.85) !important;
margin-bottom: 8px;
font-weight: 500;
overflow-wrap: break-word; /* 2026-06-11: long shift text wraps instead of overflowing */
}
.af-today .cta-clock {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
padding: 16px 28px !important;
background: var(--af-bg-tinted, #FAF8FF) !important; /* 2026-06-11: pure #fff banned on violet hero */
color: var(--af-violet) !important;
border-radius: 999px !important;
font-family: 'Montserrat', sans-serif;
font-size: 16px !important;
font-weight: 700 !important;
letter-spacing: -0.005em;
text-decoration: none !important;
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
transition: transform 160ms var(--af-ease-out), box-shadow 200ms ease;
}
.af-today .cta-clock:hover {
transform: translateY(-1px);
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
.af-today .cta-clock:active { transform: scale(0.97); }
/* TODAY-strip status block — right column where the giant time can live */
.af-today__time {
text-align: right;
font-family: 'Bricolage Grotesque', sans-serif;
font-variation-settings: 'wdth' 80, 'wght' 700, 'opsz' 96;
font-size: clamp(36px, 5vw, 56px);
line-height: 0.95;
color: #fff;
letter-spacing: -0.03em;
font-feature-settings: 'tnum' 1;
text-shadow: 0 0 60px rgba(164, 42, 249, 0.6);
}
.af-today__date-sub {
font-family: 'Montserrat', sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
margin-top: 4px;
}
@media (max-width: 720px) {
.af-today {
grid-template-columns: 1fr !important;
padding: var(--p2-s-lg) !important;
min-height: 0;
}
.af-today__time { text-align: left; font-size: 48px; }
.af-today::before { font-size: 180px; bottom: -30px; }
}
/* ────────────────────────────────────────────────────────────────────
* SECTION TITLE — editorial small caps with accent line
* ──────────────────────────────────────────────────────────────────── */
h2.af-section-title {
font-family: 'Montserrat', sans-serif !important;
font-size: 11px !important;
font-weight: 800 !important;
letter-spacing: 0.22em !important;
text-transform: uppercase;
color: var(--af-ink-3) !important;
margin: var(--p2-s-2xl) 0 var(--p2-s-lg) !important;
display: flex;
align-items: center;
gap: 12px;
}
h2.af-section-title::before {
content: '';
width: 28px;
height: 1px;
background: var(--af-blurple);
}
h2.af-section-title::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, var(--af-line) 0%, transparent 100%);
}
/* ────────────────────────────────────────────────────────────────────
* TILE GRID — glass-finish editorial tiles
* ──────────────────────────────────────────────────────────────────── */
.af-tile-grid {
display: grid !important;
gap: var(--p2-s-md) !important;
grid-template-columns: repeat(2, 1fr) !important;
}
@media (min-width: 600px) { .af-tile-grid { grid-template-columns: repeat(3, 1fr) !important; gap: var(--p2-s-lg) !important; } }
@media (min-width: 960px) { .af-tile-grid { grid-template-columns: repeat(4, 1fr) !important; gap: var(--p2-s-lg) !important; } }
.af-tile {
position: relative !important;
background:
linear-gradient(180deg, rgba(110, 56, 213, 0.03) 0%, #fff 100%) !important;
border-radius: 18px !important;
padding: var(--p2-s-lg) !important;
text-decoration: none !important;
color: var(--af-ink) !important;
border: 1px solid rgba(110, 56, 213, 0.08) !important;
box-shadow:
0 1px 0 rgba(255, 255, 255, 1) inset,
0 6px 20px rgba(110, 56, 213, 0.06) !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 10px !important;
min-height: 156px !important;
overflow: hidden;
isolation: isolate;
transition:
transform 240ms var(--af-ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
box-shadow 280ms ease,
border-color 240ms ease !important;
}
.af-tile::before {
/* hover sweep — a soft violet glow that appears top-right on hover */
content: '';
position: absolute;
top: -30px; right: -30px;
width: 160px; height: 160px;
border-radius: 50%;
background: radial-gradient(ellipse, rgba(164, 42, 249, 0.25), transparent 60%);
opacity: 0;
transition: opacity 320ms ease;
pointer-events: none;
z-index: 0;
filter: blur(20px);
}
.af-tile::after {
/* arrow that appears in bottom-right on hover */
content: '→';
position: absolute;
bottom: 14px; right: 16px;
font-family: 'Inter', sans-serif;
font-size: 22px;
font-weight: 300;
color: var(--af-blurple);
opacity: 0;
transform: translateX(-6px);
transition: opacity 240ms ease, transform 240ms var(--af-ease-out);
pointer-events: none;
z-index: 1;
}
.af-tile > * { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
.af-tile:hover {
transform: translateY(-4px) !important;
box-shadow:
0 12px 32px -8px rgba(110, 56, 213, 0.25),
0 4px 12px rgba(110, 56, 213, 0.08) !important;
border-color: rgba(110, 56, 213, 0.25) !important;
}
.af-tile:hover::before { opacity: 1; }
.af-tile:hover::after { opacity: 1; transform: translateX(0); }
}
.af-tile:active { transform: scale(0.985) !important; }
.af-tile:focus-visible {
outline: 2px solid var(--af-blurple);
outline-offset: 3px;
}
.af-tile .icon {
font-size: 40px !important;
line-height: 1 !important;
margin-bottom: 4px;
filter: drop-shadow(0 4px 12px rgba(110, 56, 213, 0.15));
}
.af-tile .label {
font-family: 'Montserrat', sans-serif;
font-weight: 700 !important;
font-size: 16px !important;
line-height: 1.2 !important;
color: var(--af-ink) !important;
letter-spacing: -0.01em;
}
/* 2026-06-11: reserve the top-right corner so labels never run under the
absolute badge (mirrors the .af-stat-card .label fix). Fallback for
non-:has() engines: templates may add .has-badge on the tile. */
.af-tile:has(.af-tile-badge) .label,
.af-tile.has-badge .label { padding-right: 36px; }
.af-tile .blurb {
font-family: 'Montserrat', sans-serif;
font-size: 12px !important;
color: var(--af-ink-3) !important;
line-height: 1.5 !important;
font-weight: 500;
}
.af-tile--desktop {
background:
linear-gradient(180deg, rgba(110, 56, 213, 0.04) 0%, var(--af-bg-tinted) 100%) !important;
}
.af-tile--desktop::after { /* override base arrow color for desktop tiles */
color: var(--af-violet);
}
.af-tile-badge {
position: absolute !important;
top: 14px !important; right: 14px !important;
min-width: 26px !important;
height: 26px !important;
padding: 0 9px !important;
border-radius: 13px !important;
background: var(--af-red) !important;
color: var(--af-white) !important;
font-family: 'Montserrat', sans-serif;
font-size: 12px !important;
font-weight: 800 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 4px 12px rgba(239, 51, 64, 0.4) !important;
}
/* ────────────────────────────────────────────────────────────────────
* RAINBOW FOOTER — bigger, more dramatic
* ──────────────────────────────────────────────────────────────────── */
.af-blend-rainbow {
height: 6px !important;
border-radius: 4px;
background:
linear-gradient(90deg,
var(--af-violet) 0%,
var(--af-blurple) 20%,
var(--af-medium-purple) 35%,
var(--af-turquoise) 60%,
var(--af-orange) 80%,
var(--af-red) 100%) !important;
box-shadow: 0 4px 16px rgba(110, 56, 213, 0.25);
margin: var(--p2-s-2xl) 0 var(--p2-s-md) !important;
}
.af-page-footer {
font-family: 'Montserrat', sans-serif;
text-align: center;
padding: var(--p2-s-md) 0 var(--p2-s-2xl) !important;
color: var(--af-ink-3) !important;
font-size: 12px !important;
letter-spacing: 0.08em !important;
}
.af-page-footer .copy {
display: block;
margin-top: 6px !important;
font-family: 'Boldonse', Georgia, serif !important;
font-style: italic !important;
font-size: 16px !important;
letter-spacing: -0.01em !important;
color: var(--af-blurple) !important;
opacity: 1 !important;
}
/* ────────────────────────────────────────────────────────────────────
* SCROLL PROGRESS — thin violet bar at top of viewport
* ──────────────────────────────────────────────────────────────────── */
/* 2026-06-11: refactored to the shared transform pattern (width animation is
banned; z-index 9999 → scale token). PAIRS with portal.html's scroll JS
writing `transform: scaleX(p)` instead of `width: pct%`. */
.p2-scroll-progress {
position: fixed;
top: 0; left: 0;
height: 3px;
width: 100%;
transform: scaleX(0);
transform-origin: left;
background: linear-gradient(90deg, #6E38D5 0%, #A42AF9 50%, #00AEC7 100%);
box-shadow: 0 0 12px rgba(164, 42, 249, 0.6);
z-index: var(--z-progress, 110);
transition: transform 80ms linear;
pointer-events: none;
}
/* ────────────────────────────────────────────────────────────────────
* LIVE-DATA PULSE — green dot that pulses to signal live data
* ──────────────────────────────────────────────────────────────────── */
.p2-live-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #16a34a;
vertical-align: middle;
position: relative;
animation: p2-live-pulse 2s ease-in-out infinite;
}
.p2-live-dot::after {
content: '';
position: absolute;
inset: -3px;
border-radius: 50%;
background: #16a34a;
opacity: 0.4;
animation: p2-live-ring 2s ease-out infinite;
}
@keyframes p2-live-pulse {
0%, 100% { box-shadow: 0 0 4px #16a34a, 0 0 8px rgba(22, 163, 74, 0.5); }
50% { box-shadow: 0 0 8px #16a34a, 0 0 16px rgba(22, 163, 74, 0.8); }
}
@keyframes p2-live-ring {
0% { transform: scale(0.8); opacity: 0.5; }
100% { transform: scale(2.2); opacity: 0; }
}
/* ────────────────────────────────────────────────────────────────────
* REDUCED MOTION + TOUCH
* ──────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.af-today .status-pill .status-dot--working { animation: none !important; }
.p2-live-dot, .p2-live-dot::after { animation: none !important; } /* 2026-06-11: no global kill-switch exists in this app */
.p2-scroll-progress { transition: none !important; }
.af-tile, .af-today .cta-clock, .portal-header a.signout {
transition: opacity 120ms ease !important;
transform: none !important;
}
}
@media (hover: none) and (pointer: coarse) {
.af-tile::before, .af-tile::after { opacity: 0 !important; }
.af-tile:hover { transform: none !important; }
}
/* ════════════════════════════════════════════════════════════════════
* ARDITO STAFF SKIN — 2026-07-03 (append-only layer)
*
* EVERY rule below is scoped under body.ardito-staff. That class exists
* ONLY on staff templates (templates/admin_*.html + templates/portal.html).
* Member pages (me_*, sign*, ptma_member*) never carry the class and never
* link this change — regression gate: agents/smoke/brand_member_safety_smoke.py.
* Nothing above this banner was modified.
*
* Palette: electric blue #1E6EFF replaces the AF violet family on staff
* surfaces via scoped custom-property overrides (variables set on body
* cascade to all descendants and shadow the :root values). Hardcoded
* violet hexes inside individual templates' inline styles are NOT
* affected — variable-driven UI (links, buttons, pills, focus, blends)
* flips to blue automatically.
* ════════════════════════════════════════════════════════════════════ */
body.ardito-staff {
/* — electric-blue accent replaces violet (scoped var overrides) — */
--af-blurple: #1E6EFF; /* was #6E38D5 */
--af-blurple-dark: #1149C9; /* was #5A2BB0 */
--af-blurple-pale: #E8F0FF; /* was #EFE7FB */
--af-violet: #0B2E7A; /* was #440099 — deep navy */
--af-medium-purple: #5EA0FF; /* was #A42AF9 — light electric */
--country-accent: #1E6EFF;
--af-bg: #F5F8FE; /* navy-tinted paper */
--af-bg-tinted: #F7FAFF;
--af-blend-violet: linear-gradient(135deg, #0B2E7A 0%, #1E6EFF 60%, #5EA0FF 100%);
/* — navy-tinted page wash — */
background:
radial-gradient(ellipse 80% 60% at 28% 0%, rgba(30, 110, 255, 0.07), transparent 52%),
radial-gradient(ellipse 60% 42% at 100% 100%, rgba(11, 46, 122, 0.06), transparent 60%),
#F5F8FE;
position: relative;
isolation: isolate;
}
/* portal.html body carries af-page + af-monogram-bg (higher specificity than
* a lone .ardito-staff) — restate the navy wash so it wins there too. */
body.af-page.af-monogram-bg.ardito-staff {
background:
radial-gradient(ellipse 80% 60% at 28% 0%, rgba(30, 110, 255, 0.07), transparent 52%),
radial-gradient(ellipse 60% 42% at 100% 100%, rgba(11, 46, 122, 0.06), transparent 60%),
#F5F8FE;
}
/* grain — same fractal noise as the base layer, staff pages only */
body.ardito-staff::before,
body.af-page.af-monogram-bg.ardito-staff::before {
content: '';
position: fixed; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
pointer-events: none;
z-index: -1;
opacity: 0.5;
}
/* — premium card depth + hover lift (admin cards + portal tiles) — */
body.ardito-staff .card,
body.ardito-staff .af-card,
body.ardito-staff .af-stat-card {
box-shadow:
0 1px 2px rgba(10, 31, 68, 0.05),
0 8px 24px rgba(10, 31, 68, 0.07);
border-color: rgba(30, 110, 255, 0.14);
transition:
transform var(--dur-feedback, 120ms) var(--ease-out-quart, ease-out),
box-shadow var(--dur-state, 240ms) var(--ease-out-quart, ease-out);
}
@media (hover: hover) and (pointer: fine) {
body.ardito-staff .card:hover,
body.ardito-staff .af-card:hover,
body.ardito-staff .af-stat-card:hover {
transform: translateY(-2px);
box-shadow:
0 2px 4px rgba(10, 31, 68, 0.06),
0 14px 36px rgba(10, 31, 68, 0.12);
}
}
/* — portal hero: re-tint the violet gradient navy→electric (base rule uses
* !important, so this scoped override must too) — */
body.ardito-staff .af-today {
background:
radial-gradient(ellipse 60% 100% at 80% 30%, rgba(94, 160, 255, 0.35), transparent 50%),
linear-gradient(135deg, #0B2E7A 0%, #1E6EFF 55%, #5EA0FF 100%) !important;
box-shadow:
0 20px 56px rgba(6, 26, 68, 0.30),
inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
/* — portal tiles: swap the violet glass tint for electric blue — */
body.ardito-staff .af-tile {
background:
linear-gradient(180deg, rgba(30, 110, 255, 0.04) 0%, #fff 100%) !important;
border: 1px solid rgba(30, 110, 255, 0.10) !important;
box-shadow:
0 1px 0 rgba(255, 255, 255, 1) inset,
0 6px 20px rgba(11, 46, 122, 0.07) !important;
}
body.ardito-staff .af-tile::before {
background: radial-gradient(ellipse, rgba(94, 160, 255, 0.30), transparent 60%);
}
@media (hover: hover) and (pointer: fine) {
body.ardito-staff .af-tile:hover {
box-shadow:
0 12px 32px -8px rgba(30, 110, 255, 0.28),
0 4px 12px rgba(11, 46, 122, 0.09) !important;
border-color: rgba(30, 110, 255, 0.30) !important;
}
}
/* — pills / badges that hardcode the violet tint — */
body.ardito-staff .pill.purple {
background: rgba(30, 110, 255, 0.10);
}
/* — admin nav polish (admin_layout.html header) — */
body.ardito-staff .al-nav {
border-bottom-color: rgba(30, 110, 255, 0.22);
}
body.ardito-staff .al-nav .brand {
color: #0B2E7A;
}
/* — blue focus rings, staff-wide — */
body.ardito-staff a:focus-visible,
body.ardito-staff button:focus-visible,
body.ardito-staff input:focus-visible,
body.ardito-staff select:focus-visible,
body.ardito-staff textarea:focus-visible,
body.ardito-staff [tabindex]:focus-visible {
outline: 2px solid #1E6EFF;
outline-offset: 2px;
}
/* — motion guards — */
@media (prefers-reduced-motion: reduce) {
body.ardito-staff .card,
body.ardito-staff .af-card,
body.ardito-staff .af-stat-card {
transition: none;
}
body.ardito-staff .card:hover,
body.ardito-staff .af-card:hover,
body.ardito-staff .af-stat-card:hover {
transform: none;
}
}
/* ════ end Ardito staff skin ════ */
/* ════════════════════════════════════════════════════════════════════
* ARDITO STAFF SKIN — PART 2 · deep revamp 2026-07-03 (append-only)
*
* Eugenio: "/portal almost looks the same … big and disproportionate
* font sizes — sometimes huge, sometimes so small it is hard to read."
*
* Everything below stays scoped under body.ardito-staff (staff pages
* only — member pages never carry the class). Three jobs:
* A · one type scale for ALL staff pages (portal + admin_*)
* B · consistent card component (radius 14, border, layered shadow)
* C · portal home redesign (greeting, icon chips, tighter hero)
* ════════════════════════════════════════════════════════════════════ */
/* ── A1 · type-scale tokens ─────────────────────────────────────────── */
body.ardito-staff {
--ar-t-display: clamp(24px, 2.6vw, 32px); /* page title — ONE per page */
--ar-t-h2: 20px; /* card / sub-section heading */
--ar-t-h3: 16px; /* minor heading */
--ar-t-body: 13.5px; /* tables + running copy */
--ar-t-label: 11.5px; /* uppercase eyebrow labels */
--ar-radius: 14px;
--ar-border: rgba(30, 110, 255, 0.14);
--ar-shadow:
0 1px 2px rgba(10, 31, 68, 0.05),
0 8px 24px rgba(10, 31, 68, 0.07);
--ar-shadow-hover:
0 2px 4px rgba(10, 31, 68, 0.06),
0 14px 36px rgba(10, 31, 68, 0.12);
}
/* ── A2 · display caps — kill the 44–56px Boldonse titles ───────────── */
/* Bare-element h1 rules in admin templates (incl. the clamp(28px,4vw,44px)
* Boldonse title on admin_classes_all_coaches) lose to this on specificity.
* Template rules that scope h1 under a class (.audit-head h1, .hdr h1 …)
* keep their intentional 20–24px sizes — same specificity, later order. */
body.ardito-staff h1 {
font-size: var(--ar-t-display);
line-height: 1.15;
}
/* admin_hr_overview .topbar h1 is clamp(28px,4vw,48px) !important */
body.ardito-staff .topbar h1 { font-size: var(--ar-t-display) !important; }
/* admin_staff_login hero title was clamp(32px,5vw,48px) */
body.ardito-staff .login-hero__title { font-size: clamp(26px, 3.4vw, 34px); }
/* admin_hr_overview stat numbers were clamp(40px,5vw,56px) !important */
body.ardito-staff .summary .tile .n { font-size: clamp(22px, 2.6vw, 32px) !important; }
/* portal greeting (Boldonse) — display size, capped */
body.ardito-staff .portal-header .name { font-size: clamp(23px, 3vw, 30px) !important; }
/* hero live clock: data, not decoration — cap at 40px (was up to 56px) */
body.ardito-staff .af-today__time { font-size: clamp(30px, 3.4vw, 40px); }
/* ── A3 · section eyebrows — one consistent label style ─────────────── */
body.ardito-staff h2.af-section-title,
body.ardito-staff .section-title,
body.ardito-staff .sec-title {
font-family: 'Montserrat', sans-serif !important;
font-size: var(--ar-t-label) !important;
font-weight: 800 !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
color: var(--af-ink-3) !important;
}
/* ── A4 · label floor — nothing below 11px on staff pages ───────────── */
/* Every 9–10px class found in the staff templates + brand.css lockups. */
body.ardito-staff .pill,
body.ardito-staff .role-pill,
body.ardito-staff .narr-label,
body.ardito-staff .stat-mini .lbl,
body.ardito-staff .stat-tile .lbl,
body.ardito-staff td.club-tag,
body.ardito-staff .stock-link,
body.ardito-staff .ev-pre,
body.ardito-staff table.rules td code,
body.ardito-staff .hr-avatar,
body.ardito-staff .topbar::before,
body.ardito-staff .af-stat-card .weight,
body.ardito-staff .af-header__title .ctx,
body.ardito-staff .af-header__wordmark .sub,
body.ardito-staff .af-header__club .name small {
font-size: 11px !important;
}
body.ardito-staff .summary .tile .l { font-size: 11px !important; }
/* table headers: uniform 11px uppercase (some pages had 10px) */
body.ardito-staff table th { font-size: 11px; }
/* body copy: tables read at 13.5px (was a mix of 12–13px) */
body.ardito-staff table { font-size: var(--ar-t-body); }
/* ── B · card component — radius 14, border, layered shadow, lift ───── */
body.ardito-staff .card,
body.ardito-staff .af-card,
body.ardito-staff .af-stat-card {
border-radius: var(--ar-radius);
box-shadow: var(--ar-shadow);
}
body.ardito-staff .summary .tile {
border-radius: var(--ar-radius) !important;
background: linear-gradient(180deg, rgba(30, 110, 255, 0.025) 0%, #fff 100%) !important;
border: 1px solid var(--ar-border) !important;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
var(--ar-shadow) !important;
transition:
transform 160ms var(--af-ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
box-shadow 240ms ease;
}
@media (hover: hover) and (pointer: fine) {
body.ardito-staff .summary .tile:hover {
transform: translateY(-2px);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
var(--ar-shadow-hover) !important;
border-color: rgba(30, 110, 255, 0.28) !important;
}
}
/* ── C · portal home redesign ───────────────────────────────────────── */
/* C1 · greeting header — h1 greeting + quiet meta line */
body.ardito-staff .portal-header h1.name { margin: 0; }
body.ardito-staff .portal-header .role {
font-size: var(--ar-t-label) !important;
letter-spacing: 0.14em !important;
color: var(--af-ink-3) !important;
margin-top: 6px !important;
}
/* C1b · small screens — pin Sign out top-right instead of wrapping it
* onto its own row under the (wide Boldonse) greeting */
@media (max-width: 640px) {
body.ardito-staff .portal-header { position: relative; }
body.ardito-staff .portal-header .who { padding-right: 92px; gap: 14px; }
body.ardito-staff .portal-header a.signout {
position: absolute;
top: 4px; right: 0;
min-height: 38px;
padding: 8px 14px;
font-size: 12px;
}
body.ardito-staff .portal-header .name { font-size: 21px !important; }
body.ardito-staff .portal-header .avatar {
width: 46px !important;
height: 46px !important;
font-size: 20px !important;
}
}
/* C2 · hero — tighter, and the 320px 'AF' text watermark becomes a
* quiet glow disc (decorative type above ~40px is banned) */
body.ardito-staff .af-today {
border-radius: 18px !important;
padding: 28px !important;
margin: 0 0 40px !important;
min-height: 168px;
}
body.ardito-staff .af-today::before {
content: '';
font-size: 0;
width: 340px; height: 340px;
bottom: -170px; right: -80px;
border-radius: 50%;
background: radial-gradient(circle, rgba(94, 160, 255, 0.22), transparent 62%);
}
body.ardito-staff .af-today .label { font-size: var(--ar-t-label) !important; }
body.ardito-staff .af-today .status-pill { font-size: 14px !important; }
body.ardito-staff .af-today .status-pill .status-since {
opacity: 0.75;
font-size: 12px;
font-weight: 500;
}
body.ardito-staff .af-today .shift-info { font-size: 13px !important; }
body.ardito-staff .af-today .cta-clock {
font-size: 15px !important;
padding: 13px 24px !important;
}
/* C3 · section header — eyebrow + tile count chip */
body.ardito-staff h2.af-section-title { margin: 40px 0 16px !important; }
body.ardito-staff .ar-sec-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 10px;
background: rgba(30, 110, 255, 0.10);
color: #1149C9;
font-size: 11px;
font-weight: 700;
letter-spacing: 0;
}
/* C4 · tiles — 24px stroke icons in a tinted chip, tighter card */
body.ardito-staff .af-tile {
border-radius: var(--ar-radius) !important;
padding: 18px 18px 20px !important;
gap: 8px !important;
min-height: 132px !important;
}
body.ardito-staff .af-tile .icon.ar-chip {
width: 42px;
height: 42px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(30, 110, 255, 0.09);
box-shadow: inset 0 0 0 1px rgba(30, 110, 255, 0.12);
color: #1E6EFF;
font-size: 0 !important; /* neutralise the 40px emoji sizing */
filter: none !important;
margin-bottom: 2px;
transition: background 200ms ease, color 200ms ease;
}
body.ardito-staff .af-tile .icon.ar-chip svg { display: block; }
@media (hover: hover) and (pointer: fine) {
body.ardito-staff .af-tile:hover .icon.ar-chip {
background: #1E6EFF;
color: #fff;
}
}
body.ardito-staff .af-tile .label { font-size: 15px !important; }
body.ardito-staff .af-tile .blurb {
font-size: 12px !important;
line-height: 1.45 !important;
}
/* desktop-first tiles: label the constraint instead of just tinting.
* Extra bottom padding reserves the corner so the tag NEVER overlaps the
* blurb (UI-text-overlap regression class — verified in browser 2026-07-03) */
body.ardito-staff .af-tile--desktop { padding-bottom: 38px !important; }
body.ardito-staff .af-tile--desktop::before {
content: 'Desktop';
position: absolute;
bottom: 12px; right: 14px;
top: auto; left: auto;
width: auto; height: auto;
font-family: 'Montserrat', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--af-ink-3);
background: none;
filter: none;
opacity: 0.55;
transition: opacity 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
body.ardito-staff .af-tile--desktop:hover::before { opacity: 0; }
}
/* the base skin hides all tile ::before on touch (hover-glow kill) — the
* Desktop tag must survive there: phones are where the hint matters */
@media (hover: none) and (pointer: coarse) {
body.ardito-staff .af-tile--desktop::before { opacity: 0.55 !important; }
}
/* C5 · motion guards for the new bits */
@media (prefers-reduced-motion: reduce) {
body.ardito-staff .summary .tile,
body.ardito-staff .af-tile .icon.ar-chip { transition: none !important; }
body.ardito-staff .summary .tile:hover { transform: none !important; }
}
/* ════ end Ardito staff skin · part 2 ════ */