/* Alyeska Labs - design tokens and component library.
*
* One stylesheet, used by every public and portal page. No component
* builds its own button/input/card. If you need a new variant, add it
* here and document it inline. Hex colors only appear in :root tokens;
* everything else references var(...).
*
* Palette is deep-navy dominant. The brand teal that was the dominant
* accent in the prior PoC is retired in favor of a primary blue accent
* descended from the original "twilight blue" (#4a63a0). A small set of
* cooler-blue secondary tones handles links and chips.
*/
:root {
/* -- Surfaces (deep navy, no greys) ----------------------------- */
--bg: #050b18; /* page base, near-black-blue */
--bg-elev: #0a1426; /* one step up - large containers */
--bg-card: #111e36; /* two steps up - cards and modals */
--bg-inset: #07101f; /* darker recesses (code, inputs) */
/* -- Borders ---------------------------------------------------- */
--border: rgba(150, 180, 230, 0.10);
--border-strong: rgba(150, 180, 230, 0.18);
--border-focus: rgba(120, 160, 255, 0.55);
/* -- Text ------------------------------------------------------- */
--text: #e6edf7;
--text-dim: #94a3b8;
--text-faint: #5b6b82;
--text-on-accent: #03102a;
/* -- Brand blues ----------------------------------------------- */
--accent: #4f8cff; /* CTAs, important state */
--accent-soft: rgba(79,140,255,0.14);
--accent-2: #7aa2d6; /* secondary, link hover */
--accent-3: #2c4a82; /* deeper highlight */
/* -- Semantic (tuned to the blue palette) ---------------------- */
--success: #4ec9a6;
--success-soft: rgba(78,201,166,0.12);
--warning: #d4a460;
--warning-soft: rgba(212,164,96,0.14);
--danger: #e07070;
--danger-soft: rgba(224,112,112,0.14);
--info: #7aa2d6;
--info-soft: rgba(122,162,214,0.12);
/* -- Type ------------------------------------------------------ */
--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* -- Scale ----------------------------------------------------- */
--fs-xs: 0.75rem;
--fs-sm: 0.875rem;
--fs-md: 1rem;
--fs-lg: 1.125rem;
--fs-xl: 1.375rem;
--fs-2xl: 1.75rem;
--fs-3xl: 2.25rem;
--fs-4xl: 3rem;
/* -- Spacing --------------------------------------------------- */
--sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
--sp-5: 1.25rem; --sp-6: 1.5rem; --sp-7: 2rem;
--sp-8: 2.5rem; --sp-9: 3rem; --sp-10: 4rem;
/* -- Geometry -------------------------------------------------- */
--radius-sm: 4px;
--radius: 8px;
--radius-lg: 14px;
--maxw: 1180px;
/* -- Breakpoints (Task 021) ------------------------------------
* Canonical breakpoint set referenced by every responsive rule
* in this stylesheet. Browsers do not currently allow var() inside
* @media conditions, so these tokens are documentation-only - but
* any new media query should match one of these widths instead of
* inventing a new one. Grep for the literal pixel values to find
* every place a given breakpoint is used.
* --bp-sm 480px - small phone / one-column forms
* --bp-md 760px - phone / tablet portrait, portal drawer kicks in
* --bp-lg 980px - tablet landscape, hero stacks
* --bp-xl 1180px - desktop, quote-shell desktop layout
*/
--bp-sm: 480px;
--bp-md: 760px;
--bp-lg: 980px;
--bp-xl: 1180px;
/* -- Elevation ------------------------------------------------- */
--shadow-1: 0 1px 0 rgba(0,0,0,0.30);
--shadow-2: 0 8px 24px -12px rgba(0,0,0,0.55);
/* -- Motion ---------------------------------------------------- */
--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* ---------- Reset and base ---------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }
html { color-scheme: dark; }
html, body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body {
min-height: 100vh;
/* Defensive backstop: prevent any rogue child from causing
* horizontal page scroll on narrow phones. `clip` is preferred
* over `hidden` so it does NOT establish a scroll container -
* this keeps `position: sticky` working on descendants such as
* `.portal-aside`. Browsers that don't recognise `clip` fall back
* to the previous declaration which is harmless. */
overflow-x: clip;
/* A single very subtle navy-light at the top of the page. Not a blob. */
background:
radial-gradient(1200px 380px at 70% -160px, rgba(79,140,255,0.10), transparent 70%),
linear-gradient(180deg, #050b18 0%, #040912 100%);
}
img, svg { max-width: 100%; display: block; }
::selection { background: rgba(79,140,255,0.35); color: var(--text); }
a {
color: var(--accent-2);
text-decoration: none;
transition: color 0.15s var(--ease);
}
a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="slider"]:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--border-focus);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
h1, h2, h3, h4 {
font-family: var(--font-sans);
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.2;
margin: 0 0 var(--sp-3);
color: var(--text);
}
h1 { font-size: clamp(2rem, 4vw, var(--fs-4xl)); letter-spacing: -0.025em; }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--sp-4); color: var(--text-dim); }
p strong, p b { color: var(--text); font-weight: 600; }
ul, ol { color: var(--text-dim); padding-left: 1.25rem; }
li { margin: var(--sp-1) 0; }
code, pre, kbd, samp {
font-family: var(--font-mono);
font-size: 0.92em;
}
code:not(pre code) {
background: var(--bg-inset);
border: 1px solid var(--border);
padding: 0.05em 0.4em;
border-radius: var(--radius-sm);
color: var(--text);
}
pre {
background: var(--bg-inset);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--sp-4);
overflow: auto;
}
hr {
border: 0;
border-top: 1px solid var(--border);
margin: var(--sp-7) 0;
}
/* ---------- Layout primitives ------------------------------------ */
.container {
width: 100%;
max-width: var(--maxw);
margin: 0 auto;
padding: 0 var(--sp-6);
}
.container-narrow { max-width: 760px; }
section {
padding: var(--sp-10) 0;
border-bottom: 1px solid var(--border);
}
section:last-of-type { border-bottom: 0; }
.row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.stack-tight > * + * { margin-top: var(--sp-2); }
.between { justify-content: space-between; }
.center { justify-content: center; }
.gap-2 { gap: var(--sp-2); }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }
.grid { display: grid; gap: var(--sp-5); }
.grid-2 { display: grid; gap: var(--sp-5); grid-template-columns: repeat(2, 1fr); }
.grid-3 { display: grid; gap: var(--sp-5); grid-template-columns: repeat(3, 1fr); }
.grid-4 { display: grid; gap: var(--sp-5); grid-template-columns: repeat(4, 1fr); }
.grid-asym { display: grid; gap: var(--sp-6); grid-template-columns: 1.6fr 1fr; }
@media (max-width: 980px) {
.grid-3, .grid-4, .grid-asym { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: 1fr; }
}
.muted { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
.hidden { display: none !important; }
.no-print { }
@media print { .no-print { display: none !important; } }
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* WCAG 2.4.1 - Skip to main content. Hidden off-screen until focused. */
.skip-link {
position: absolute;
top: 0;
left: 0;
transform: translateY(-150%);
z-index: 10000;
background: var(--accent, #3a92ff);
color: #fff;
padding: var(--sp-2) var(--sp-4);
border-radius: 0 0 var(--radius, 6px) 0;
font-family: var(--font-sans);
font-weight: 600;
font-size: var(--fs-sm);
text-decoration: none;
box-shadow: 0 4px 12px rgba(0,0,0,.5);
transition: transform .15s var(--ease, ease);
}
.skip-link:focus,
.skip-link:focus-visible {
transform: translateY(0);
outline: 2px solid #fff;
outline-offset: -2px;
text-decoration: none;
color: #fff;
}
/* Persistent screen-reader live regions for toast / status announcements.
Two regions exist so error toasts can be aria-live="assertive" while
info/success/warning stay polite (WCAG 4.1.3 Status Messages). */
.al-toast-region {
position: fixed;
right: 16px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
max-width: min(380px, calc(100vw - 32px));
}
#al-toast-region-polite { bottom: 16px; }
/* Assertive (errors) anchored to the top so they never collide with
the polite stack at the bottom. */
#al-toast-region-assertive { top: 16px; }
.al-toast-region > * { pointer-events: auto; }
.al-toast {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: start;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
background: var(--bg-card, #111);
color: var(--text, #fff);
border: 1px solid var(--border-strong, #333);
border-left-width: 4px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
font-size: 14px;
line-height: 1.45;
opacity: 0;
transform: translateY(8px);
animation: al-toast-in 180ms ease-out forwards;
}
.al-toast.al-toast-leave {
animation: al-toast-out 200ms ease-in forwards;
}
.al-toast-icon {
font-size: 16px;
line-height: 1.4;
flex: 0 0 auto;
}
.al-toast-body {
word-wrap: break-word;
overflow-wrap: anywhere;
}
.al-toast-close {
appearance: none;
background: transparent;
border: 0;
color: inherit;
font-size: 18px;
line-height: 1;
padding: 2px 6px;
margin: -2px -4px 0 0;
cursor: pointer;
border-radius: 4px;
opacity: .7;
}
.al-toast-close:hover,
.al-toast-close:focus-visible {
opacity: 1;
outline: 2px solid var(--accent, #6cf);
outline-offset: 1px;
}
.al-toast-success { border-left-color: var(--success, #2ecc71); }
.al-toast-success .al-toast-icon { color: var(--success, #2ecc71); }
.al-toast-info { border-left-color: var(--accent, #6cf); }
.al-toast-info .al-toast-icon { color: var(--accent, #6cf); }
.al-toast-warning { border-left-color: var(--warning, #f5a623); }
.al-toast-warning .al-toast-icon { color: var(--warning, #f5a623); }
.al-toast-error { border-left-color: var(--danger, #ff5a5a); }
.al-toast-error .al-toast-icon { color: var(--danger, #ff5a5a); }
@keyframes al-toast-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes al-toast-out {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
.al-toast,
.al-toast.al-toast-leave { animation-duration: 0.001ms; }
}
.eyebrow {
display: inline-block;
color: var(--accent-2);
font-family: var(--font-mono);
font-size: var(--fs-xs);
letter-spacing: 0.16em;
text-transform: uppercase;
margin-bottom: var(--sp-3);
}
.lede {
font-size: clamp(1.05rem, 1.6vw, var(--fs-lg));
color: var(--text-dim);
max-width: 62ch;
line-height: 1.65;
}
/* ---------- Navigation ------------------------------------------- */
.nav {
position: sticky; top: 0; z-index: 50;
background: linear-gradient(180deg, rgba(5,11,24, 0.92) 0%, rgba(5,11,24, 0.78) 100%);
backdrop-filter: saturate(160%) blur(14px);
-webkit-backdrop-filter: saturate(160%) blur(14px);
border-bottom: 1px solid var(--border);
box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 18px rgba(0,0,0,0.25);
max-height: 57px;
}
.nav-inner {
display: flex; align-items: center; justify-content: space-between;
padding: var(--sp-3) var(--sp-6);
gap: var(--sp-4);
min-height: 60px;
}
.brand {
display: inline-flex; align-items: center; gap: var(--sp-3);
color: var(--text);
font-weight: 600;
letter-spacing: -0.01em;
font-size: var(--fs-md);
}
.brand:hover { text-decoration: none; }
.brand img { width: 30px; height: 30px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.brand-mark {
width: 30px; height: 30px;
display: inline-block;
}
.nav-links {
display: flex; gap: var(--sp-5); flex-wrap: wrap;
font-size: var(--fs-sm);
align-items: center;
}
.nav-links a {
color: var(--text-dim);
padding: var(--sp-2) 0;
position: relative;
transition: color .15s ease;
}
.nav-links a:hover { color: var(--text); text-decoration: none; }
.nav-links a[aria-current="page"] {
color: var(--text);
}
.nav-links a[aria-current="page"]::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
height: 2px; background: var(--accent); border-radius: 2px;
box-shadow: 0 0 8px rgba(64, 156, 255, .5);
}
.nav-cta { display: inline-flex; gap: var(--sp-2); align-items: center; }
/* Hamburger toggle. Hidden on desktop; only visible below the mobile
* breakpoint via the @media block further down. */
.nav-toggle {
display: none;
appearance: none;
background: transparent;
border: 1px solid var(--border);
color: var(--text);
border-radius: 8px;
width: 40px; height: 40px;
padding: 0;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease;
}
.nav-toggle:hover { background: rgba(255,255,255,.04); }
.nav-toggle:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.nav-toggle svg { display: block; width: 22px; height: 22px; }
@media (max-width: 719px) {
/* Mobile marketing header: hamburger pinned left, logo centered,
CTA buttons right. The max-height clamp on .nav is lifted so the
row is vertically centered with real padding instead of being
clipped flush to the bottom edge. */
header.nav { max-height: none; }
header.nav .nav-inner {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
column-gap: var(--sp-3);
padding-top: var(--sp-4);
padding-bottom: var(--sp-4);
}
header.nav .brand { justify-self: center; order: 2; }
header.nav .brand span { display: none; } /* drop the wordmark */
header.nav .brand img { width: 34px; height: 34px; } /* larger favicon */
header.nav .nav-cta { order: 3; justify-self: end; }
header.nav .nav-cta .btn { white-space: nowrap; } /* keep "Build a quote" on one line */
.nav-toggle { display: inline-flex; margin-left: 0; order: 1; justify-self: start; }
.nav-inner > .nav-links {
display: none;
position: absolute;
top: 100%;
left: 50%;
right: auto;
transform: translateX(-50%);
width: 90vw;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: var(--sp-3) var(--sp-4);
background: rgba(5,11,24, 0.98);
backdrop-filter: saturate(160%) blur(14px);
-webkit-backdrop-filter: saturate(160%) blur(14px);
border: 1px solid var(--border);
border-top: 0;
border-radius: 0 0 var(--radius) var(--radius);
box-shadow: 0 8px 24px rgba(0,0,0,0.35);
z-index: 60;
max-height: calc(100vh - 60px);
overflow-y: auto;
}
.nav-inner > .nav-links.open { display: flex; }
.nav-inner > .nav-links a {
padding: var(--sp-3) var(--sp-2);
border-bottom: 1px solid var(--border);
color: var(--text);
}
.nav-inner > .nav-links a:last-child { border-bottom: 0; }
.nav-inner > .nav-links a[aria-current="page"]::after { display: none; }
.nav { position: sticky; }
.nav-inner { position: relative; }
}
/* ---------- Buttons ---------------------------------------------- */
/*
* Variants:
* .btn - primary (filled blue)
* .btn-ghost - bordered, neutral
* .btn-subtle - very low-contrast secondary
* .btn-danger - destructive
* .btn-sm - compact size
* .btn-lg - hero size
* .btn-block - full-width
*
* All buttons share a minimum 44px target on mobile via min-height.
*/
.btn {
--btn-bg: var(--accent);
--btn-fg: var(--text-on-accent);
--btn-bd: var(--accent);
/* Ghost variants need a more visible at-rest outline than the generic
--border-strong token so the filled .btn and bordered .btn-ghost
read as the same visual height when sat side-by-side. The hover
state still snaps to the accent. */
--btn-ghost-bd: rgba(150, 180, 230, 0.45);
display: inline-flex; align-items: center; justify-content: center;
gap: var(--sp-2);
box-sizing: border-box;
vertical-align: middle;
padding: 0.2rem 1.125rem;
min-height: 32px;
background: var(--btn-bg);
color: var(--btn-fg);
/* Explicit border-style + width so derived variants can change only the
colour via --btn-bd without accidentally widening / narrowing the box. */
border: 1px solid var(--btn-bd);
border-style: solid;
border-width: 1px;
border-radius: var(--radius);
font: inherit;
font-size: var(--fs-sm);
font-weight: 600;
/* Lock line-height so .btn and .btn-ghost compute identical heights
regardless of the surrounding context's line-height. */
line-height: 1.25;
letter-spacing: -0.005em;
cursor: pointer;
text-decoration: none;
transition: background 0.15s var(--ease), border-color 0.15s var(--ease),
color 0.15s var(--ease), transform 0.05s var(--ease);
user-select: none;
}
.btn:hover { text-decoration: none; filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] {
opacity: 0.55; cursor: not-allowed; filter: none;
}
.btn-ghost {
--btn-bg: transparent;
--btn-fg: var(--text);
--btn-bd: var(--btn-ghost-bd);
}
.btn-ghost:hover { --btn-bd: var(--accent); --btn-fg: var(--accent); }
.btn-subtle {
--btn-bg: var(--bg-card);
--btn-fg: var(--text-dim);
--btn-bd: var(--border);
}
.btn-subtle:hover { --btn-fg: var(--text); }
.btn-danger {
--btn-bg: var(--danger);
--btn-fg: #220707;
--btn-bd: var(--danger);
}
.btn-sm { padding: 0.2rem 0.75rem; min-height: 32px; font-size: var(--fs-xs); line-height: 1.25; }
.btn-xs { padding: 0.2rem 0.55rem; min-height: 24px; font-size: var(--fs-xxs, 0.7rem); border-radius: 6px; line-height: 1.25; }
.btn-lg { padding: 0.85rem 1.4rem; min-height: 48px; font-size: var(--fs-md); line-height: 1.25; }
.btn-sign-in { max-height: 30px; font-size: var(--fs-md); width: 100%}
.btn-logout {}
.btn-block { display: flex; width: 100%; }
.btn .icon { width: 16px; height: 16px; }
@media (max-width: 480px) {
.btn { min-height: 44px; }
}
/* ---------- Tag / Badge / Chip ----------------------------------- */
.badge {
display: inline-flex; align-items: center; gap: var(--sp-1);
padding: 0.15rem 0.55rem;
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.02em;
border: 1px solid var(--border-strong);
border-radius: 999px;
color: var(--text-dim);
background: var(--bg-inset);
font-family: var(--font-sans);
text-transform: none;
}
.badge.solid { background: var(--accent-soft); color: var(--accent); border-color: rgba(79,140,255,0.30); }
.badge.success { background: var(--success-soft); color: var(--success); border-color: rgba(78,201,166,0.30); }
.badge.warning { background: var(--warning-soft); color: var(--warning); border-color: rgba(212,164,96,0.30); }
.badge.danger { background: var(--danger-soft); color: var(--danger); border-color: rgba(224,112,112,0.30); }
.badge.info { background: var(--info-soft); color: var(--info); border-color: rgba(122,162,214,0.30); }
/* legacy chip alias, used in tables */
.chip { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; border: 1px solid var(--border-strong); color: var(--text-dim); background: var(--bg-inset); text-transform: capitalize; }
.chip.open, .chip.pending { background: var(--warning-soft); color: var(--warning); border-color: rgba(212,164,96,0.30); }
.chip.resolved, .chip.paid, .chip.closed { background: var(--success-soft); color: var(--success); border-color: rgba(78,201,166,0.30); }
.chip.paid_manual_override { background: var(--info-soft); color: var(--info); border-color: rgba(122,162,214,0.30); }
/* Refund states: partial = amber (still partly settled), full = info/neutral. */
.chip.partially_refunded { background: var(--warning-soft); color: var(--warning); border-color: rgba(212,164,96,0.30); }
.chip.refunded { background: var(--info-soft); color: var(--info); border-color: rgba(122,162,214,0.30); }
.chip.overdue, .chip.urgent { background: var(--danger-soft); color: var(--danger); border-color: rgba(224,112,112,0.30); }
.chip.high { background: var(--warning-soft); color: var(--warning); border-color: rgba(212,164,96,0.30); }
.chip.normal { background: var(--info-soft); color: var(--info); border-color: rgba(122,162,214,0.30); }
.chip.low { background: var(--bg-inset); color: var(--text-dim); }
/* ---------- Card / Surface --------------------------------------- */
.card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--sp-5);
box-shadow: var(--shadow-1);
}
.card-tight { padding: var(--sp-3); }
.card-flat { background: var(--bg-elev); }
.card-bare { padding: 0; }
.surface {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--radius);
}
/* ---------- Form controls --------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: 10px; }
.field label {
color: var(--text);
font-size: var(--fs-sm);
font-weight: 500;
}
.field .hint { color: var(--text-faint); font-size: var(--fs-xs); }
.field .error { color: var(--danger); font-size: var(--fs-xs); min-height: 1em; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }
label.inline {
display: inline-flex; align-items: center; gap: var(--sp-2);
color: var(--text); font-size: var(--fs-sm); font-weight: 500;
cursor: pointer;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input:not([type]),
select,
textarea {
appearance: none;
-webkit-appearance: none;
width: 100%;
background: var(--bg-inset);
color: var(--text);
border: 1px solid var(--border-strong);
border-radius: var(--radius);
padding: 0.6rem 0.8rem;
min-height: 40px;
font: inherit;
font-size: var(--fs-sm);
transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:hover, select:hover, textarea:hover { border-color: rgba(150,180,230,0.30); }
input:disabled, select:disabled, textarea:disabled { opacity: 0.55; cursor: not-allowed; }
textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
/* Native select arrow replacement */
select {
background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
padding-right: 32px;
}
input[type="checkbox"], input[type="radio"] {
appearance: none;
-webkit-appearance: none;
width: 18px; height: 18px;
border: 1px solid var(--border-strong);
background: var(--bg-inset);
border-radius: 4px;
cursor: pointer;
display: inline-grid; place-content: center;
transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
flex-shrink: 0;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:checked, input[type="radio"]:checked {
background: var(--accent);
border-color: var(--accent);
}
input[type="checkbox"]:checked::after {
content: "";
width: 10px; height: 10px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
}
input[type="radio"]:checked::after {
content: "";
width: 7px; height: 7px; border-radius: 50%;
background: var(--text-on-accent);
}
/* Range slider (used across the quote configurator) */
input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
background: transparent;
height: 28px;
padding: 0;
border: none;
}
input[type="range"]::-webkit-slider-runnable-track {
height: 6px;
background: linear-gradient(to right,
var(--accent) 0%,
var(--accent) var(--range-fill, 0%),
var(--bg-inset) var(--range-fill, 0%),
var(--bg-inset) 100%);
border-radius: 999px;
border: 1px solid var(--border-strong);
}
input[type="range"]::-moz-range-track {
height: 6px; background: var(--bg-inset);
border-radius: 999px;
border: 1px solid var(--border-strong);
}
input[type="range"]::-moz-range-progress {
height: 6px; background: var(--accent); border-radius: 999px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px; height: 18px;
margin-top: -7px;
background: var(--text);
border: 2px solid var(--accent);
border-radius: 50%;
cursor: pointer;
transition: transform 0.1s var(--ease);
}
input[type="range"]::-moz-range-thumb {
width: 16px; height: 16px;
background: var(--text);
border: 2px solid var(--accent);
border-radius: 50%;
cursor: pointer;
}
input[type="range"]:focus-visible::-webkit-slider-thumb {
box-shadow: 0 0 0 3px rgba(79,140,255,0.35);
}
/* Inline status messages on forms */
[data-status] { font-size: var(--fs-sm); min-height: 1.4em; }
[data-status].error { color: var(--danger); }
[data-status].ok,
[data-status].success { color: var(--success); }
[data-status].info,
[data-status].muted { color: var(--text-dim); }
/* ---------- Form validation (Task 034) ------------------------------
* Standard pattern for invalid fields. Any input/select/textarea with
* `aria-invalid="true"` (set by frontend/assets/js/forms.js) gets a
* red border + soft glow on focus. The wrapping `.field` may also be
* given `.field--invalid` so older browsers that ignore the
* `aria-invalid` selector still highlight properly.
*
* The `.field .error` helper text already exists above - this block
* extends it with an inline warning icon and tightens spacing so it
* lines up with the input.
* ------------------------------------------------------------------ */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"],
.field--invalid input,
.field--invalid select,
.field--invalid textarea {
border-color: var(--danger) !important;
background: rgba(255, 90, 90, 0.06);
}
input[aria-invalid="true"]:focus-visible,
select[aria-invalid="true"]:focus-visible,
textarea[aria-invalid="true"]:focus-visible,
.field--invalid input:focus-visible,
.field--invalid select:focus-visible,
.field--invalid textarea:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(255, 90, 90, 0.25);
border-color: var(--danger);
}
.field .error:empty { min-height: 0; display: none; }
.field .error:not(:empty) {
display: inline-flex;
align-items: flex-start;
gap: 6px;
line-height: 1.4;
margin-top: 2px;
}
.field .error:not(:empty)::before {
content: "";
width: 14px; height: 14px;
flex-shrink: 0;
margin-top: 1px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* Form-level error banner. Rendered above the first field when the
* server returns multiple field errors or a generic message that is
* worth elevating from the inline `[data-status]` slot. */
.form-banner {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
border-radius: var(--radius);
border: 1px solid rgba(255, 90, 90, 0.30);
background: rgba(255, 90, 90, 0.08);
color: var(--text);
font-size: var(--fs-sm);
line-height: 1.5;
margin-bottom: var(--sp-3);
}
.form-banner__icon {
width: 18px; height: 18px;
flex-shrink: 0;
margin-top: 1px;
background-color: var(--danger);
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.form-banner__text { flex: 1; }
.form-banner--success {
border-color: rgba(78, 201, 166, 0.30);
background: rgba(78, 201, 166, 0.08);
}
.form-banner--success .form-banner__icon { background-color: var(--success); }
/* Captcha placeholder block reused on every public form */
.captcha {
background: var(--bg-elev);
border: 1px dashed var(--border-strong);
border-radius: var(--radius);
padding: var(--sp-3) var(--sp-4);
}
.captcha p { margin: var(--sp-2) 0 0; color: var(--text-faint); font-size: var(--fs-xs); }
/* ---------- Tables ---------------------------------------------- */
table {
width: 100%; border-collapse: collapse;
font-size: var(--fs-sm);
}
th, td {
padding: var(--sp-3) var(--sp-3);
text-align: left;
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
th {
color: var(--text-faint);
font-weight: 600;
text-transform: uppercase;
font-size: var(--fs-xs);
letter-spacing: 0.06em;
background: var(--bg-elev);
}
tr:last-child td { border-bottom: 0; }
tr:hover td { background: rgba(120,160,255,0.03); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.table-wrap {
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-card);
/* Allow wide tables to scroll horizontally on narrow viewports
* instead of clipping their trailing columns. Vertical overflow
* stays hidden so the border-radius is preserved. (Task 021) */
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
/* ---------- Hero / marketing sections --------------------------- */
.hero {
padding: clamp(3rem, 8vw, 6rem) 0 var(--sp-9);
border-bottom: 1px solid var(--border);
position: relative;
}
.hero-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: var(--sp-9);
align-items: center;
}
@media (max-width: 980px) {
.hero-grid { grid-template-columns: 1fr; }
}
.hero h1 {
font-size: clamp(2.1rem, 4.5vw, 3.2rem);
line-height: 1.08;
letter-spacing: -0.03em;
margin-bottom: var(--sp-5);
}
.hero .lede { margin-bottom: var(--sp-6); }
.hero-meta {
display: flex; gap: var(--sp-5); flex-wrap: wrap;
color: var(--text-faint);
font-size: var(--fs-sm);
margin-top: var(--sp-6);
}
.hero-meta span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.hero-meta .dot { width: 6px; height: 6px; background: var(--success); border-radius: 50%; }
/* Visual on the right side of the hero. A polished browser mock-up. */
.hero-visual {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--sp-3) var(--sp-4) var(--sp-4);
box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.03) inset;
overflow: hidden;
position: relative;
}
.hero-visual::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(ellipse at 50% 30%, rgba(79,140,255,0.06) 0%, transparent 70%);
pointer-events: none;
}
.hero-visual .frame-bar {
display: flex; gap: 7px; padding: var(--sp-1) 0 var(--sp-2);
}
.hero-visual .frame-bar span {
width: 10px; height: 10px; border-radius: 50%;
}
.hero-visual .frame-bar span:nth-child(1) { background: #e07070; }
.hero-visual .frame-bar span:nth-child(2) { background: #d4a460; }
.hero-visual .frame-bar span:nth-child(3) { background: #4ec9a6; }
.hero-visual .frame-address {
display: flex; align-items: center; gap: 6px;
background: var(--bg-inset);
border: 1px solid var(--border);
border-radius: 6px;
padding: 5px 10px;
margin-bottom: var(--sp-3);
font-size: var(--fs-xs);
color: var(--text-faint);
}
.hero-visual .frame-address svg {
flex-shrink: 0; opacity: 0.6;
}
.hero-visual .hero-logo-wrap {
display: flex; align-items: center; justify-content: center;
padding: var(--sp-2);
min-height: 100px;
}
.hero-visual .hero-logo-wrap img {
width: 100%;
height: auto;
max-height: 180px;
object-fit: contain;
filter: drop-shadow(0 2px 8px rgba(79,140,255,0.25));
}
/* ---------- Feature blocks -------------------------------------- */
.feature {
display: grid;
grid-template-columns: 24px 1fr;
gap: var(--sp-3);
padding: var(--sp-3) 0;
}
.feature .icon { width: 22px; height: 22px; color: var(--accent); margin-top: 2px; }
.feature h4 { margin: 0 0 var(--sp-1); font-size: var(--fs-md); color: var(--text); }
.feature p { margin: 0; font-size: var(--fs-sm); color: var(--text-dim); }
/* ---------- Footer ---------------------------------------------- */
footer.site-foot {
padding: var(--sp-9) 0 var(--sp-7);
border-top: 1px solid var(--border);
margin-top: var(--sp-7);
}
footer.site-foot .container { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-6); }
footer.site-foot h5 {
color: var(--text-faint);
font-size: var(--fs-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0 0 var(--sp-3);
}
footer.site-foot a { color: var(--text-dim); display: block; padding: var(--sp-1) 0; font-size: var(--fs-sm); }
footer.site-foot a:hover { color: var(--text); }
footer.site-foot .legal { color: var(--text-faint); font-size: var(--fs-xs); margin-top: var(--sp-6); }
@media (max-width: 760px) {
footer.site-foot .container { grid-template-columns: 1fr 1fr; }
}
/* Compact footer for auth flow pages (login, register, password reset,
email verify, invite accept, unsubscribe, checkout result). Keeps the
centered `login-shell` layout intact while still surfacing the legally
required Privacy / Terms / Contact / FAQ links and copyright. */
footer.auth-foot {
border-top: 1px solid var(--border);
padding: var(--sp-4) var(--sp-4);
color: var(--text-faint);
font-size: var(--fs-xs);
margin-top: auto;
}
footer.auth-foot .container {
display: flex;
gap: var(--sp-4);
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
footer.auth-foot .auth-foot-links {
display: flex;
gap: var(--sp-4);
flex-wrap: wrap;
}
footer.auth-foot a {
color: var(--text-dim);
text-decoration: none;
}
footer.auth-foot a:hover { color: var(--text); }
@media (max-width: 560px) {
footer.auth-foot .container { justify-content: center; text-align: center; }
}
/* ---------- Quote builder layout -------------------------------- */
.quote-shell {
display: grid;
grid-template-columns: 200px minmax(0, 1fr) 360px;
gap: var(--sp-6);
align-items: start;
}
@media (max-width: 1080px) {
.quote-shell { grid-template-columns: 1fr; }
.quote-cart { position: static !important; max-height: none !important; }
}
.quote-side {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--sp-2);
z-index: 30;
}
@media (max-width: 1080px) {
.quote-side {
max-height: calc(3.5 * 3.6rem);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--border-strong) transparent;
}
.quote-side::-webkit-scrollbar {
width: 6px;
}
.quote-side::-webkit-scrollbar-track {
background: transparent;
border-radius: 3px;
}
.quote-side::-webkit-scrollbar-thumb {
background: var(--border-strong);
border-radius: 3px;
}
.quote-side::-webkit-scrollbar-thumb:hover {
background: var(--accent);
}
}
.quote-side button {
appearance: none;
width: 100%;
background: transparent;
color: var(--text-dim);
border: 1px solid transparent;
text-align: left;
padding: var(--sp-3);
font: inherit;
font-size: var(--fs-sm);
border-radius: var(--radius-sm);
cursor: pointer;
display: flex; flex-direction: column; gap: 2px;
transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.quote-side button:hover { background: rgba(120,160,255,0.04); color: var(--text); }
.quote-side button[aria-current="true"] {
background: var(--accent-soft);
color: var(--accent);
border-color: rgba(79,140,255,0.35);
}
.quote-side .label-sub { color: var(--text-faint); font-size: var(--fs-xs); font-weight: 400; }
.config-panel {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--sp-6);
}
.config-row {
padding: var(--sp-5) 0;
border-bottom: 1px solid var(--border);
}
.config-row:last-child { border-bottom: 0; }
.config-row .label-row {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: var(--sp-3);
}
.config-row .label-row label { font-weight: 600; color: var(--text); }
.config-row .label-row .value {
font-family: var(--font-mono);
color: var(--accent-2);
font-variant-numeric: tabular-nums;
}
.config-row .helper { color: var(--text-faint); font-size: var(--fs-xs); margin-top: var(--sp-2); }
.range-stops {
display: flex; justify-content: space-between;
color: var(--text-faint);
font-size: var(--fs-xs);
font-family: var(--font-mono);
margin-top: var(--sp-1);
}
.option-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-3);
}
@media (max-width: 620px) { .option-grid { grid-template-columns: 1fr; } }
.option-card {
display: flex; gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
background: var(--bg-inset);
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.option-card:has(input:checked) {
border-color: var(--accent);
background: var(--accent-soft);
}
.option-card .opt-body { display: flex; flex-direction: column; gap: 2px; }
.option-card .opt-title { color: var(--text); font-weight: 500; font-size: var(--fs-sm); }
.option-card .opt-meta { color: var(--text-faint); font-size: var(--fs-xs); font-family: var(--font-mono); }
.config-summary {
background: var(--bg-inset);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--sp-4);
display: grid; grid-template-columns: 1fr auto; gap: var(--sp-3);
align-items: center;
margin-top: var(--sp-5);
}
.config-summary .num { font-family: var(--font-mono); font-size: var(--fs-xl); color: var(--text); }
.config-summary .row {
gap: var(--sp-3);
}
.config-summary .row button {
flex: 1;
white-space: nowrap;
justify-content: center;
}
.config-summary .sub { color: var(--text-faint); font-size: var(--fs-xs); }
/* Hour Management section - appears on any service whose catalog
entry exposes a `reserved_hours` block. Visually nests inside the
regular .config-row stack so it inherits the divider rhythm. */
.config-row.hour-mgmt .hour-stepper {
display: inline-flex; align-items: center; gap: var(--sp-2);
margin-top: var(--sp-2);
}
.config-row.hour-mgmt .hour-stepper input[type=number] {
width: 5.5rem;
text-align: center;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
padding: var(--sp-2) var(--sp-3);
background: var(--bg-inset);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius);
-moz-appearance: textfield;
}
.config-row.hour-mgmt .hour-stepper input[type=number]::-webkit-outer-spin-button,
.config-row.hour-mgmt .hour-stepper input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none; margin: 0;
}
.config-row.hour-mgmt .hour-stepper .btn { min-width: 2.25rem; padding-inline: var(--sp-3); }
.config-row.hour-mgmt .hour-breakdown {
margin-top: var(--sp-3);
background: var(--bg-inset);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--sp-3) var(--sp-4);
display: grid; gap: var(--sp-1);
}
.config-row.hour-mgmt .hour-breakdown .hour-line {
display: flex; justify-content: space-between; align-items: baseline;
color: var(--text-faint); font-size: var(--fs-sm);
}
.config-row.hour-mgmt .hour-breakdown .hour-line .mono {
color: var(--text); font-variant-numeric: tabular-nums;
}
.config-row.hour-mgmt .hour-breakdown .hour-line.total {
margin-top: var(--sp-2); padding-top: var(--sp-2);
border-top: 1px solid var(--border);
color: var(--text); font-weight: 600;
}
.quote-cart {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--sp-5);
position: sticky; top: 78px;
max-height: calc(100vh - 100px);
overflow: auto;
}
.quote-cart h3 { margin: 0 0 var(--sp-4); }
.quote-cart .cart-empty { color: var(--text-faint); font-size: var(--fs-sm); padding: var(--sp-4) 0; }
.cart-item {
border-top: 1px solid var(--border);
padding: var(--sp-4) 0;
}
.cart-item:first-child { border-top: 0; }
.cart-item .cart-title { display: flex; justify-content: space-between; gap: var(--sp-3); }
.cart-item .cart-title strong { color: var(--text); font-size: var(--fs-sm); }
.cart-item .cart-title .price { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text); white-space: nowrap; }
.cart-item .cart-summary {
color: var(--text-dim);
font-size: var(--fs-xs);
margin: var(--sp-2) 0;
line-height: 1.55;
}
.cart-item .cart-actions {
display: flex; gap: var(--sp-2);
font-size: var(--fs-xs);
}
.cart-item .cart-actions button {
background: transparent;
border: none;
color: var(--text-faint);
cursor: pointer;
font: inherit;
font-size: var(--fs-xs);
padding: 0;
}
.cart-item .cart-actions button:hover { color: var(--accent); text-decoration: underline; }
.cart-totals { border-top: 1px solid var(--border); margin-top: var(--sp-4); padding-top: var(--sp-4); }
.cart-totals .line {
display: flex; justify-content: space-between;
font-size: var(--fs-sm); color: var(--text-dim);
padding: var(--sp-1) 0;
}
.cart-totals .line.total {
color: var(--text); font-weight: 600;
border-top: 1px solid var(--border);
margin-top: var(--sp-2);
padding-top: var(--sp-3);
}
.cart-totals .line .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.cart-checkout { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); }
/* Bottom-sheet style for mobile quote cart */
@media (max-width: 1080px) {
.quote-cart {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 40;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
max-height: 60vh;
box-shadow: 0 -10px 30px -10px rgba(0,0,0,0.6);
}
.quote-cart.collapsed { max-height: 64px; overflow: hidden; }
.quote-cart .cart-toggle {
display: block;
}
}
.quote-cart .cart-toggle { display: none; }
/* ---------- Page heading rows ------------------------------------ */
.page-head {
padding: var(--sp-7) 0 var(--sp-5);
}
.page-head h1 { margin-bottom: var(--sp-2); }
.page-head p { margin-bottom: 0; }
.legal-prose h2 { margin-top: var(--sp-7); }
.legal-prose p, .legal-prose li { color: var(--text); }
.legal-prose .muted { color: var(--text-dim); }
/* ---------- Calendar (intake) ----------------------------------- */
.cal {
display: grid; gap: var(--sp-1);
grid-template-columns: repeat(7, 1fr);
margin-top: var(--sp-2);
}
.cal button {
background: var(--bg-inset);
color: var(--text);
border: 1px solid var(--border);
padding: 0.5rem 0.3rem;
font: inherit;
font-size: var(--fs-xs);
border-radius: var(--radius-sm);
cursor: pointer;
}
.cal button[aria-pressed="true"] {
background: var(--accent); color: var(--text-on-accent); border-color: var(--accent);
}
.cal .day-head {
text-align: center;
color: var(--text-faint);
font-family: var(--font-mono);
font-size: var(--fs-xs);
padding: var(--sp-1);
}
/* ---------- Print --------------------------------------------- */
@media print {
.nav, footer, .no-print { display: none !important; }
body { background: white; color: black; }
.card, .surface { border-color: #ccc; box-shadow: none; background: white; color: black; }
a { color: black; text-decoration: none; }
}
/* ---------- Tooltip + info modal (shared by quote builder) ---- */
.info-tip {
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px;
border-radius: 50%;
background: var(--accent-soft);
color: var(--accent);
font-size: 11px;
font-weight: 700;
font-style: italic;
cursor: help;
position: relative;
margin-left: var(--sp-1);
}
/* Legacy pseudo-element tooltip is suppressed: the tooltip is now rendered
in a body-level portal by tooltip-portal.js so it escapes clipping from
ancestors with overflow:hidden, transforms, or new stacking contexts.
See orchestrator/progress/findings/Findings-019.md. */
.info-tip::after { content: none; display: none; }
/* Portal tooltip element (singleton, appended to by
tooltip-portal.js). Position is set inline by JS via fixed coordinates
computed from the trigger's getBoundingClientRect(). */
.info-tip-portal {
position: fixed;
top: 0; left: 0;
background: var(--bg-card);
border: 1px solid var(--border-strong);
color: var(--text);
padding: 10px 14px;
border-radius: 8px;
font-size: var(--fs-xs);
font-style: normal;
font-weight: 400;
line-height: 1.5;
text-align: left;
/* Preserve authored newlines in data-tip the same way the legacy
::after rule did. */
white-space: pre-line;
width: 320px;
max-width: min(360px, 90vw);
box-shadow: 0 6px 20px rgba(0,0,0,0.45);
opacity: 0;
pointer-events: none;
transition: opacity 0.15s var(--ease);
/* Above the modal overlay (z-index ~1000) and any other UI chrome. */
z-index: 10000;
}
.info-tip-portal.visible { opacity: 1; }
.info-learn {
margin-left: var(--sp-2);
background: transparent;
border: 1px solid var(--border-strong);
color: var(--accent);
padding: 2px 8px;
border-radius: 999px;
font-size: var(--fs-xs);
cursor: pointer;
}
.info-learn:hover { background: var(--accent-soft); }
.info-modal-overlay {
position: fixed; inset: 0;
background: rgba(5,11,24,0.7);
backdrop-filter: blur(4px);
display: grid; place-items: center;
padding: var(--sp-4);
z-index: 200;
}
.info-modal {
background: var(--bg-card);
border: 1px solid var(--border-strong);
border-radius: var(--radius);
max-width: 560px; width: 100%;
color: var(--text);
display: flex; flex-direction: column;
max-height: 90vh;
}
.info-modal header {
display: flex; align-items: center; justify-content: space-between;
padding: var(--sp-4) var(--sp-5);
border-bottom: 1px solid var(--border);
}
.info-modal header h3 { margin: 0; font-size: var(--fs-lg); }
.info-modal-close {
background: transparent; border: 0; color: var(--text-dim);
font-size: 15px; cursor: pointer; line-height: 1;
width: 100%;
}
.info-modal-body { padding: var(--sp-5); overflow-y: auto; }
.info-modal-body p { margin: 0 0 var(--sp-3); line-height: 1.6; }
.info-modal-body p:last-child { margin: 0; }
.info-modal footer {
padding: var(--sp-3) var(--sp-5);
border-top: 1px solid var(--border);
text-align: right;
}
/* ---------- Generic dialog overlay (reused by ticket new, invoice
item editor, product editor, manage-subscription, etc.) ----------- */
.al-modal-overlay {
position: fixed; inset: 0;
background: rgba(5,11,24,0.7);
backdrop-filter: blur(4px);
display: grid; place-items: center;
padding: var(--sp-4);
z-index: 200;
}
.al-modal {
background: var(--bg-card);
border: 1px solid var(--border-strong);
border-radius: var(--radius);
width: 100%; max-width: 640px;
max-height: 90vh;
display: flex; flex-direction: column;
color: var(--text);
box-shadow: 0 24px 48px rgba(0,0,0,.4);
}
.al-modal-head {
display: flex; align-items: center; justify-content: space-between;
padding: var(--sp-4) var(--sp-5);
border-bottom: 1px solid var(--border);
}
.al-modal-head h3 { margin: 0; font-size: var(--fs-lg); }
.al-modal-body { padding: var(--sp-5); overflow-y: auto; }
.al-modal-foot {
padding: var(--sp-3) var(--sp-5);
border-top: 1px solid var(--border);
display: flex; gap: var(--sp-2); justify-content: flex-end;
}
.al-modal[data-wide] { max-width: 1240px; }
/* ---------- Product wizard + preview ---------------------------- */
.prod-editor {
display: grid;
grid-template-columns: minmax(420px, 1fr) minmax(360px, 1fr);
gap: 0;
min-height: 60vh;
}
.prod-editor-left { padding: var(--sp-5); border-right: 1px solid var(--border); overflow-y: auto; max-height: 75vh; }
.prod-editor-right { padding: var(--sp-5); background: var(--bg-inset, rgba(255,255,255,0.02)); overflow-y: auto; max-height: 75vh; }
.tab-row { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--border); }
.tab-row .tab {
background: transparent; color: var(--text-dim); border: 0;
padding: var(--sp-2) var(--sp-3); cursor: pointer; font: inherit;
border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab-row .tab.active { color: var(--text); border-bottom-color: var(--accent); }
.wizard-section {
background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
padding: var(--sp-4); margin-bottom: var(--sp-4);
}
.wizard-section h4 { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; }
.ctl-card { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-3); margin-bottom: var(--sp-2); background: rgba(255,255,255,0.02); }
.ctl-card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); }
.ctl-editor { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--border); }
.opt-list { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-2) 0; }
.opt-row { display: grid; grid-template-columns: 1fr 1fr 90px 90px auto auto; gap: var(--sp-2); align-items: center; }
.preview-head { margin-bottom: var(--sp-4); }
.preview-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-5); }
.preview-summary { display: flex; justify-content: space-between; margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.preview-summary .num { font-size: var(--fs-xl); font-weight: 600; }
.preview-breakdown {
margin-top: var(--sp-3);
padding: var(--sp-2) var(--sp-3);
background: rgba(255,255,255,0.03);
border: 1px solid var(--border);
border-radius: 6px;
display: flex;
justify-content: space-between;
gap: var(--sp-2);
font-size: var(--fs-xs);
color: var(--text-dim);
}
.preview-breakdown .label { text-transform: uppercase; letter-spacing: .06em; font-size: 10px; }
.preview-breakdown .mono { color: var(--text); }
.cart-base-chip {
margin-top: 4px;
font-size: var(--fs-xs);
color: var(--text-dim);
display: inline-flex;
align-items: center;
gap: .35rem;
padding: 2px 8px;
background: rgba(255,255,255,0.03);
border: 1px solid var(--border);
border-radius: 999px;
}
.cart-base-chip strong { color: var(--text); font-weight: 600; }
@media (max-width: 1000px) {
.prod-editor { grid-template-columns: 1fr; }
.prod-editor-left { border-right: 0; border-bottom: 1px solid var(--border); }
}
/* ---------- Upcoming invoice chip + status flair ----------------- */
.chip.upcoming,
.chip.scheduled {
background: var(--success-soft);
color: var(--success);
border-color: rgba(78,201,166,0.30);
}
.chip.danger { background: var(--danger-soft); color: var(--danger); border-color: rgba(224,112,112,0.30); }
.chip.chip-secondary {
background: transparent;
color: var(--text-dim);
border-color: var(--border);
font-weight: 500;
text-transform: none;
margin-left: .35rem;
}
/* ---------- Org context banner --------------------------------- */
.org-context {
display: inline-flex; align-items: center; gap: .45rem;
padding: .15rem .55rem;
background: var(--bg-inset);
border: 1px solid var(--border);
border-radius: 999px;
font-size: var(--fs-xs);
color: var(--text-dim);
}
.org-context strong { color: var(--text); }
/* ---------- Branded payment buttons --------------------------- */
.btn-pay-row {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
margin-top: var(--sp-3);
}
.btn-pay {
display: inline-flex; align-items: center; justify-content: center;
gap: .5rem;
height: 44px;
border-radius: 8px;
border: 1px solid transparent;
font-weight: 600;
cursor: pointer;
font-size: var(--fs-sm);
letter-spacing: 0;
transition: filter .12s ease, transform .12s ease;
padding: 0 1rem;
flex: 1 1 140px;
min-width: 0;
}
.btn-pay:hover { filter: brightness(1.05); }
.btn-pay:active { transform: translateY(1px); }
.stripe-logo {
background: url("/assets/img/stripe.svg") no-repeat center;
height: 38px;
}
/* Stripe is the only payment provider. The button follows Stripe's
official brand styling: the "blurple" #635bff fill with a white logo
and label. Apple Pay / Google Pay are surfaced on Stripe's hosted
checkout page, so there is no separate wallet button here. */
.btn-stripe { background: #635BFF; color: #fff; }
.btn-stripe:hover { background: #5851ec; }
.btn-stripe .btn-pay-label { font-weight: 600; }
.btn-simulate { background: var(--bg-inset); color: var(--text); border-color: var(--border-strong); }
.btn-simulate:hover { border-color: var(--accent); color: var(--accent); }
/* ---------- Outlined close button ------------------------------ */
.btn-ghost-outline {
background: transparent;
color: var(--text);
border: 1px solid var(--btn-ghost-bd);
}
.btn-ghost-outline:hover { border-color: var(--accent); color: var(--accent); }
/* Override info-modal Close to be outlined */
.info-modal footer .info-modal-close.btn {
background: transparent;
color: var(--text);
border: 1px solid var(--btn-ghost-bd);
}
.info-modal footer .info-modal-close.btn:hover { border-color: var(--accent); color: var(--accent); }
/* ---------- Subscription cards on the Manage page ------------ */
.sub-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--sp-4);
display: grid;
grid-template-columns: 1fr auto;
gap: var(--sp-3);
align-items: start;
}
.sub-card + .sub-card { margin-top: var(--sp-3); }
.sub-card h4 { margin: 0 0 .25rem; font-size: var(--fs-md); }
.sub-card .sub-meta { color: var(--text-dim); font-size: var(--fs-sm); }
.sub-card .sub-pending {
background: var(--info-soft);
color: var(--info);
border: 1px solid rgba(122,162,214,0.30);
border-radius: var(--radius-sm, 6px);
padding: .4rem .6rem;
font-size: var(--fs-xs);
margin-top: .4rem;
}
.sub-card .sub-actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.sub-card.pending_cancel { opacity: .82; border-style: dashed; }
/* ====================================================================
Three-zone nav layout (added in privacy/MFA pass).
Brand pinned full-left, .nav-links centered, .nav-cta full-right.
Overrides the original flex layout above without removing it so any
page that still uses the old order continues to look correct on
narrow viewports.
==================================================================== */
.nav-inner > .brand { justify-self: start; }
.nav-inner > .nav-links { justify-self: center; }
.nav-inner > .nav-cta { justify-self: end; }
@media (max-width: 760px) {
.nav-inner { grid-template-columns: auto 1fr; }
.nav-inner > .nav-cta { justify-self: end; }
}
/* ====================================================================
Consent / cookie banner. Always anchored to bottom-center.
Compact pill that expands to switches when Customize is clicked.
==================================================================== */
.consent-root {
position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
width: min(640px, calc(100% - 32px));
z-index: 9000;
}
.consent-card {
position: relative;
background: var(--bg-card, #0f1626);
color: var(--text, #fff);
border: 1px solid var(--border-strong, #2a3a55);
border-radius: 12px;
box-shadow: 0 24px 48px rgba(0,0,0,0.5);
padding: 18px 22px;
}
.consent-card.consent-expanded { padding-bottom: 14px; }
.consent-title { margin: 0 0 8px; font-size: 1.05rem; }
.consent-copy { margin: 0 0 12px; color: var(--text-dim, #aab2c2); line-height: 1.5; font-size: .92rem; }
.consent-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.consent-x {
position: absolute; right: 8px; top: 8px;
width: 28px; height: 28px; line-height: 24px; padding: 0;
background: transparent; border: 1px solid transparent;
color: var(--text-dim, #aab2c2); font-size: 18px; cursor: pointer;
border-radius: 6px;
}
.consent-x:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.consent-switches { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 12px; }
.consent-row {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 4px; border-top: 1px solid var(--border, #1f2a3f);
}
.consent-row:first-child { border-top: 0; }
.consent-row-label { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; }
.consent-row-switch input[type="checkbox"] {
width: 36px; height: 20px;
}
.consent-row.is-disabled { opacity: .65; }
/* ====================================================================
Privacy / MFA on the profile page.
==================================================================== */
.profile-wrap {
max-width: 820px;
margin: 0 auto;
padding: var(--sp-5) 0;
}
/* Tabbed profile layout - the wider canvas accommodates the side-by-side
field rows added when the page was consolidated into tabs. */
.profile-wrap.profile-tabbed { max-width: 960px; }
.profile-head { text-align: left; margin-bottom: var(--sp-4); }
.profile-tabs {
display: flex; gap: var(--sp-1); flex-wrap: wrap;
border-bottom: 1px solid var(--border);
margin-bottom: var(--sp-4);
}
.profile-tabs [role="tab"] {
background: transparent; color: var(--text-dim);
border: 1px solid transparent; border-bottom: none;
padding: .55rem 1rem; cursor: pointer; font: inherit;
border-radius: 8px 8px 0 0; margin-bottom: -1px;
transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.profile-tabs [role="tab"]:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.profile-tabs [role="tab"][aria-selected="true"] {
color: var(--text); background: var(--bg-card);
border-color: var(--border); border-bottom-color: var(--bg-card);
}
.profile-tabs [role="tab"]:focus-visible { outline: 2px solid var(--accent, #3a92ff); outline-offset: 2px; }
.profile-pane[hidden] { display: none !important; }
/* Tighter input widths inside the tabbed profile so single-line fields
don't stretch across the whole 960px canvas. The 420px ceiling keeps
them comfortably readable next to a sibling field in a .field-row. */
.profile-wrap.profile-tabbed .field input,
.profile-wrap.profile-tabbed .field select,
.profile-wrap.profile-tabbed .field textarea { max-width: 420px; width: 100%; }
.profile-wrap.profile-tabbed .field-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.profile-wrap.profile-tabbed .field-row > .field { flex: 1 1 220px; min-width: 0; }
/* Notification + privacy rows - the switch always anchors to the right
edge, regardless of the description text length. */
.notif-row {
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-2) 0;
}
.notif-row + .notif-row { border-top: 1px solid var(--border); }
.notif-row > div:first-child { flex: 1 1 auto; min-width: 0; }
.notif-row > .switch { margin-left: auto; flex: 0 0 auto; }
.profile-section { margin-bottom: var(--sp-6); }
.profile-section h2 {
font-size: var(--fs-md);
margin: 0 0 var(--sp-3);
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: .06em;
}
.mfa-card .qr-frame {
background: #fff;
padding: 10px;
border-radius: 8px;
display: inline-block;
}
.mfa-secret {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border);
padding: 8px 10px;
border-radius: 6px;
user-select: all;
word-break: break-all;
}
/* ====================================================================
MFA setup wizard (portal/mfa-setup, login MFA challenge).
==================================================================== */
.mfa-setup-shell { display: block; }
.mfa-setup-head {
text-align: center;
margin-bottom: 1.5rem;
}
.mfa-setup-head h1 {
margin: 0;
font-size: clamp(1.6rem, 2.4vw, 2rem);
letter-spacing: -0.01em;
}
.mfa-setup-sub {
margin: .5rem 0 0;
font-size: .95rem;
color: var(--text-dim);
}
.mfa-setup-card {
padding: 2rem 1.75rem;
gap: 1.5rem;
align-items: stretch;
}
.mfa-enroll {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
padding: 40px;
}
.mfa-qr-stage {
display: flex;
justify-content: center;
padding: 0;
}
.mfa-qr-frame {
background: #ffffff;
padding: 14px;
border-radius: 16px;
box-shadow:
0 0 0 1px rgba(79, 140, 255, 0.18),
0 18px 38px -22px rgba(79, 140, 255, 0.55),
0 6px 18px -10px rgba(0, 0, 0, 0.6);
line-height: 0;
transition: transform .25s ease, box-shadow .25s ease;
}
.mfa-qr-frame:hover {
transform: translateY(-1px);
box-shadow:
0 0 0 1px rgba(79, 140, 255, 0.28),
0 24px 44px -22px rgba(79, 140, 255, 0.7),
0 8px 22px -10px rgba(0, 0, 0, 0.65);
}
.mfa-qr-frame svg {
display: block;
width: 200px;
height: 200px;
border-radius: 6px;
}
/* Click-to-copy secret pill. */
.mfa-secret-pill {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .6rem;
margin: 0 auto;
padding: .65rem 1.1rem;
min-width: 260px;
max-width: 100%;
border: 1px solid var(--border);
border-radius: 999px;
background: rgba(255, 255, 255, 0.035);
color: var(--text);
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: .95rem;
letter-spacing: .12em;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
.mfa-secret-pill:hover {
border-color: var(--accent-2);
background: rgba(79, 140, 255, 0.08);
}
.mfa-secret-pill:active { transform: scale(0.985); }
.mfa-secret-pill:focus-visible {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.mfa-secret-value {
pointer-events: none;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mfa-secret-icon {
display: inline-flex;
color: var(--accent-2);
transition: color .2s ease, transform .2s ease;
}
.mfa-secret-pill:hover .mfa-secret-icon { color: var(--accent); }
.mfa-secret-flash {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
background: rgba(79, 140, 255, 0.14);
border-radius: 999px;
opacity: 0;
pointer-events: none;
font-family: var(--font-sans, inherit);
font-size: .85rem;
letter-spacing: .12em;
text-transform: uppercase;
}
.mfa-secret-pill.is-copied .mfa-secret-flash {
animation: mfaCopyFlash 1.2s ease forwards;
}
.mfa-secret-pill.is-copied .mfa-secret-icon {
transform: scale(1.15);
color: var(--accent);
}
@keyframes mfaCopyFlash {
0% { opacity: 0; transform: scale(0.96); }
20% { opacity: 1; transform: scale(1); }
70% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(1.02); }
}
/* 6-box code entry used by MFA setup verification and login challenge. */
.mfa-code-form {
display: flex;
flex-direction: column;
align-items: center;
gap: .5rem;
margin: 0;
}
.mfa-code-boxes {
display: flex;
gap: .55rem;
justify-content: center;
flex-wrap: nowrap;
}
.mfa-code-box {
width: 2.75rem;
height: 3.25rem;
text-align: center;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 1.5rem;
font-weight: 600;
color: var(--text);
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border);
border-radius: 10px;
caret-color: var(--accent);
transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
appearance: none;
-moz-appearance: textfield;
}
.mfa-code-box::-webkit-outer-spin-button,
.mfa-code-box::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.mfa-code-box:focus {
outline: none;
border-color: var(--accent);
background: rgba(79, 140, 255, 0.08);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.mfa-code-box:disabled {
opacity: .7;
cursor: not-allowed;
}
.mfa-code-boxes.is-validating .mfa-code-box {
opacity: .35;
background: rgba(100, 110, 130, 0.08);
border-color: rgba(120, 140, 180, 0.15);
color: var(--text-faint);
box-shadow: none;
cursor: wait;
pointer-events: none;
animation: mfaValidatingPulse 1.6s ease-in-out infinite;
}
@keyframes mfaValidatingPulse {
0%, 100% { opacity: .35; }
50% { opacity: .55; }
}
.mfa-code-error {
min-height: 1.1em;
margin: 0;
color: var(--danger, #f17171);
font-size: .85rem;
}
/* Bounce + red glow on incorrect code. */
.mfa-code-boxes.is-error .mfa-code-box {
animation: mfaCodeBounce 0.55s cubic-bezier(.36, .07, .19, .97) both;
border-color: var(--danger, #f17171);
background: rgba(241, 113, 113, 0.10);
box-shadow: 0 0 0 3px rgba(241, 113, 113, 0.22);
}
@keyframes mfaCodeBounce {
0%, 100% { transform: translateY(0); }
15% { transform: translateY(-6px); }
30% { transform: translateY(0); }
45% { transform: translateY(-3px); }
60% { transform: translateY(0); }
75% { transform: translateY(-1px); }
90% { transform: translateY(0); }
}
@media (max-width: 420px) {
.mfa-code-box { width: 2.25rem; height: 2.85rem; font-size: 1.3rem; }
.mfa-qr-frame svg { width: 180px; height: 180px; }
.mfa-secret-pill { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.mfa-code-boxes.is-error .mfa-code-box { animation: none; }
.mfa-secret-pill.is-copied .mfa-secret-flash { animation: none; opacity: 1; }
}
/* Login history table */
.login-history-table {
width: 100%;
border-collapse: collapse;
}
.login-history-table th, .login-history-table td {
padding: 8px 10px;
border-bottom: 1px solid var(--border);
text-align: left;
font-size: .9rem;
}
.login-history-table th { color: var(--text-dim); font-weight: 500; }
.login-history-table tr.is-fail td { color: var(--danger, #f17171); }
/* Make portal invoice rows clickable. */
.data-table tbody tr[data-href] { cursor: pointer; }
.data-table tbody tr[data-href]:hover { background: rgba(255,255,255,0.03); }
/* Restyled legal / privacy pages. */
.legal-toc {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 10px;
padding: var(--sp-4) var(--sp-5);
margin-bottom: var(--sp-5);
}
.legal-toc h2 { font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 var(--sp-3); color: var(--text-dim); }
.legal-toc ol { margin: 0; padding-left: 18px; }
.legal-toc li { margin: 4px 0; }
.legal-section {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 10px;
padding: var(--sp-5);
margin-bottom: var(--sp-4);
}
.legal-section h2 { margin-top: 0; }
.legal-eyebrow { color: var(--accent, #3a92ff); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.legal-updated { color: var(--text-dim); font-size: .85rem; }
/* Dashboard reorg */
.dash-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr 1fr; }
.dash-grid .full { grid-column: 1 / -1; }
@media (max-width: 720px) { .dash-grid { grid-template-columns: 1fr; } }
/* Split grid: wider left column for charts, narrower right for stats. */
.dash-grid-split { display: grid; gap: var(--sp-4); grid-template-columns: 3fr 2fr; align-items: start; }
@media (max-width: 860px) { .dash-grid-split { grid-template-columns: 1fr; } }
/* Responsive chart wrapper: canvas fills width, height set in JS. */
.chart-wrap { position: relative; width: 100%; }
.chart-wrap canvas { display: block; width: 100%; }
.dash-stack {
display: flex; flex-direction: column;
background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
overflow: hidden;
}
.dash-stack .stack-row { padding: var(--sp-4) var(--sp-5); }
.dash-stack .stack-row + .stack-row { border-top: 1px solid var(--border); }
.dash-stack .stack-label { color: var(--text-dim); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 4px; }
.dash-stack .stack-value { font-size: 1.6rem; font-weight: 600; margin: 0; }
/* Toggle switch - a single thumb slides between off (left) and on
(right) while the track recolours. Used by the privacy section and
the cookie-consent banner. */
.switch { position: relative; display: inline-block; width: 42px; height: 22px; box-sizing: border-box; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
position: absolute; cursor: pointer; inset: 0;
background: rgba(255,255,255,0.10);
border: 1px solid var(--border);
border-radius: 22px;
box-sizing: border-box;
transition: background .2s ease, border-color .2s ease;
}
.switch .slider::before {
content: ""; position: absolute;
top: 50%; left: 2px;
width: 16px; height: 16px;
background: #f8f9fb; border-radius: 50%;
transform: translateY(-50%);
transition: transform .2s ease, left .2s ease, background .2s ease;
box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.switch input:checked + .slider {
background: var(--success-soft);
border-color: var(--success);
}
.switch input:checked + .slider::before {
left: calc(100% - 18px);
background: var(--success);
}
.switch input:disabled + .slider { opacity: .5; cursor: not-allowed; }
/* ---------- Audit / login-history chips ---------------- */
.chip.ok { background: var(--success-soft); color: var(--success); border-color: rgba(78,201,166,0.30); }
.chip.warn { background: var(--warning-soft); color: var(--warning); border-color: rgba(212,164,96,0.30); }
.chip.fail { background: var(--danger-soft); color: var(--danger); border-color: rgba(224,112,112,0.30); }
/* ==================================================================
Updates from May 2026 redesign pass.
Legal pages: wider, modern card-grid TOC.
Service pages: taller hero header.
Login: glow.
Portal dashboard: tighter sections + inline actions.
Invoice viewer: aligned buttons, initial/upcoming statuses.
Manage subscriptions: quote-styled config + details modal.
Add Service: org dropdown.
================================================================== */
/* ---- Wider legal pages + modern TOC ---- */
.legal-prose.container-narrow,
.container-narrow.legal-prose { max-width: 920px; }
.page-head .container-narrow.legal-narrow { max-width: 920px; }
.legal-toc {
background: linear-gradient(160deg, rgba(79,140,255,0.06), rgba(79,140,255,0) 60%), var(--bg-card);
border: 1px solid var(--border-strong);
border-radius: 14px;
padding: var(--sp-5) var(--sp-5) var(--sp-4);
margin: 0 0 var(--sp-7);
box-shadow: 0 18px 48px -20px rgba(0,0,0,0.5);
}
.legal-toc h2 {
font-size: .8rem; text-transform: uppercase; letter-spacing: .14em;
margin: 0 0 var(--sp-4); color: var(--accent-2);
display: flex; align-items: center; gap: .55rem;
}
.legal-toc h2::before {
content: ""; display: inline-block;
width: 18px; height: 2px; background: var(--accent); border-radius: 2px;
}
.legal-toc ol {
list-style: none;
margin: 0; padding: 0;
display: grid; gap: 8px;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
counter-reset: toc;
}
.legal-toc li { margin: 0; counter-increment: toc; }
.legal-toc li a {
display: flex; align-items: center; gap: .7rem;
padding: .55rem .8rem;
background: var(--bg-inset);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text);
font-size: var(--fs-sm);
transition: border-color .15s var(--ease), background .15s var(--ease), transform .12s var(--ease);
text-decoration: none;
}
.legal-toc li a::before {
content: counter(toc, decimal-leading-zero);
flex: 0 0 auto;
font-family: var(--font-mono);
font-size: 11px;
color: var(--accent-2);
background: var(--accent-soft);
border: 1px solid rgba(79,140,255,0.30);
padding: 2px 7px;
border-radius: 6px;
letter-spacing: .04em;
}
.legal-toc li a:hover {
border-color: rgba(79,140,255,0.55);
background: var(--accent-soft);
transform: translateY(-1px);
text-decoration: none;
}
@media (max-width: 719px) {
.legal-toc {
padding: var(--sp-4);
margin-bottom: var(--sp-5);
}
.legal-toc h2 {
font-size: var(--fs-sm);
}
.legal-toc ol {
grid-template-columns: 1fr;
gap: 6px;
}
.legal-toc li a {
font-size: var(--fs-sm);
padding: .65rem .75rem;
}
.legal-toc li a::before {
font-size: var(--fs-xs);
}
.legal-section {
padding: var(--sp-4);
margin-bottom: var(--sp-3);
}
.legal-section h2 {
font-size: var(--fs-lg);
}
.legal-prose p, .legal-prose li {
font-size: var(--fs-sm);
}
.legal-eyebrow {
font-size: var(--fs-xs);
}
.legal-updated {
font-size: var(--fs-sm);
}
}
/* ---- Service pages: taller + wider hero header ---- */
.page-head.page-head-hero {
padding: var(--sp-10) 0 var(--sp-10);
background:
radial-gradient(820px 220px at 50% 40%, rgba(79,140,255,0.10), transparent 70%),
linear-gradient(180deg, rgba(79,140,255,0.04) 0%, transparent 80%);
border-bottom: 1px solid var(--border);
}
.page-head.page-head-hero .container {
max-width: 1000px;
text-align: center;
}
.page-head.page-head-hero h1 {
font-size: clamp(2.4rem, 4.5vw, 3.6rem);
margin: var(--sp-3) auto var(--sp-4);
max-width: 22ch;
}
.page-head.page-head-hero .lede {
font-size: clamp(1.1rem, 1.6vw, 1.25rem);
margin: 0 auto;
}
.page-head.page-head-hero .eyebrow { display: inline-block; }
/* ---- Login glow ---- */
.login-shell {
min-height: calc(100vh - 60px);
display: grid; place-items: center;
padding: var(--sp-7) var(--sp-4);
position: relative;
overflow: hidden;
}
.login-shell::before {
content: "";
position: absolute;
width: 720px; height: 720px;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
background: radial-gradient(closest-side, rgba(79,140,255,0.20), rgba(79,140,255,0.06) 45%, transparent 75%);
pointer-events: none;
z-index: 0;
}
.login-frame {
position: relative;
z-index: 1;
width: 100%;
max-width: 460px;
text-align: center;
}
.login-frame .eyebrow {
display: block;
font-size: var(--fs-sm);
letter-spacing: .28em;
margin: 0 auto var(--sp-5);
color: var(--accent-2);
}
.login-frame .card {
box-shadow:
0 0 0 1px rgba(79,140,255,0.18),
0 30px 80px -30px rgba(79,140,255,0.35),
0 18px 48px -20px rgba(0,0,0,0.6);
background: linear-gradient(180deg, rgba(79,140,255,0.05), rgba(255,255,255,0)) , var(--bg-card);
}
.login-frame .row.center { justify-content: center; }
.login-frame .helper-block {
margin-top: var(--sp-5);
color: var(--text-faint);
font-size: var(--fs-xs);
}
/* Larger, left-aligned form labels inside the sign-in card. */
.login-frame .card .field { text-align: left; }
.login-frame .card .field > label {
display: block;
text-align: left;
font-size: var(--fs-md);
font-weight: 600;
letter-spacing: .01em;
color: var(--text);
margin: 0 0 var(--sp-2);
}
/* ---- Portal dashboard: inline actions in header + tighter sections ---- */
.portal-head.portal-head-inline {
margin-bottom: var(--sp-4);
}
.portal-head .head-actions {
display: inline-flex; gap: var(--sp-2); flex-wrap: wrap;
margin-left: auto;
}
.portal-section.tight { margin-top: var(--sp-5); }
.portal-section.tight h2 { margin-bottom: var(--sp-3); }
.portal-main.tight-sections .portal-section { margin-top: var(--sp-5); }
/* ---- Invoice viewer header (Pay / Download / Back) ---- */
.invoice-toolbar {
display: flex; align-items: center; gap: var(--sp-2);
margin: 0 auto var(--sp-4);
max-width: 820px;
flex-wrap: wrap;
}
.invoice-toolbar .pay-cta {
flex: 1 1 auto;
min-width: 140px;
justify-content: center;
}
.invoice-toolbar .right-tools {
display: inline-flex; gap: var(--sp-2);
margin-left: auto;
}
/* ---- Invoice status badges (custom) ---- */
.chip.initial,
.chip\.initial {
background: var(--info-soft); color: var(--info);
border-color: rgba(122,162,214,0.35);
}
.invoice-paper .initial-note {
margin-top: var(--sp-4);
padding: var(--sp-3) var(--sp-4);
background: var(--info-soft);
border: 1px solid rgba(122,162,214,0.30);
border-radius: var(--radius);
color: var(--info);
font-size: var(--fs-sm);
display: flex; align-items: center; gap: .55rem;
}
.invoice-paper .initial-note .badge { background: var(--info); color: #051426; }
/* ---- Org dropdown on Add Service / Manage ---- */
.org-pick {
display: flex; align-items: center; gap: var(--sp-3);
margin: var(--sp-2) 0 var(--sp-5);
flex-wrap: wrap;
}
.org-pick label {
color: var(--text-faint); font-size: var(--fs-xs);
text-transform: uppercase; letter-spacing: .08em;
}
.org-pick select {
min-width: 240px;
}
/* ---- Manage subscriptions: reuse quote config styling ---- */
.manage-config {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--sp-6);
margin-top: var(--sp-4);
}
.manage-config .config-row:first-child { padding-top: 0; }
.btn-danger-outline {
background: transparent;
color: var(--danger);
border: 1px solid rgba(224,112,112,0.55);
}
.btn-danger-outline:hover {
background: rgba(224,112,112,0.10);
color: var(--danger);
border-color: var(--danger);
}
/* ---- Details modal table ---- */
.details-table {
width: 100%; border-collapse: collapse;
}
.details-table th, .details-table td {
padding: .55rem .35rem;
text-align: left;
border-bottom: 1px solid var(--border);
font-size: var(--fs-sm);
vertical-align: top;
}
.details-table th {
color: var(--text-faint);
font-weight: 500;
width: 38%;
text-transform: uppercase;
letter-spacing: .04em;
font-size: var(--fs-xs);
}
.details-table td { color: var(--text); font-family: var(--font-mono); word-break: break-word; }
/* ---- Checkout invoice summary ---- */
.checkout-invoice {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
gap: var(--sp-5);
align-items: start;
}
@media (max-width: 980px) { .checkout-invoice { grid-template-columns: 1fr; } }
.checkout-summary {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--sp-5);
}
.checkout-summary h3 { margin: 0 0 var(--sp-3); }
.checkout-summary .ckline {
display: flex; justify-content: space-between;
padding: var(--sp-2) 0;
border-top: 1px solid var(--border);
font-size: var(--fs-sm);
}
.checkout-summary .ckline:first-of-type { border-top: 0; }
.checkout-summary .ckline.total { font-weight: 700; color: var(--text); border-top: 2px solid var(--accent); padding-top: var(--sp-3); }
.checkout-summary .ckline .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* ---------- Tickets v2: status / priority / category chips ------- */
/* Status (overrides earlier .chip.open warning tone). */
.chip.status.open { background: var(--info-soft); color: var(--info); border-color: rgba(122,162,214,0.30); }
.chip.status.closed,
.chip.status.feature_complete { background: var(--success-soft); color: var(--success); border-color: rgba(78,201,166,0.30); }
.chip.status.pending_customer { background: var(--warning-soft); color: var(--warning); border-color: rgba(212,164,96,0.30); }
.chip.status.investigating { background: var(--info-soft); color: var(--info); border-color: rgba(122,162,214,0.30); }
.chip.status.wip_approved { background: var(--bg-inset); color: var(--text); border-color: var(--border-strong); }
/* Strip the capitalize transform so multi-word status labels read naturally. */
.chip.status { text-transform: none; }
/* Priority (P1 critical -> P4 minor). */
.chip.priority { text-transform: none; }
.chip.priority.p1 { background: var(--danger-soft); color: var(--danger); border-color: rgba(224,112,112,0.30); }
.chip.priority.p2 { background: var(--warning-soft); color: var(--warning); border-color: rgba(212,164,96,0.30); }
.chip.priority.p3 { background: var(--info-soft); color: var(--info); border-color: rgba(122,162,214,0.30); }
.chip.priority.p4 { background: var(--bg-inset); color: var(--text-dim); }
/* Category. */
.chip.category { text-transform: none; background: var(--bg-inset); color: var(--text); border-color: var(--border-strong); }
.chip.category.security_incident { background: var(--danger-soft); color: var(--danger); border-color: rgba(224,112,112,0.30); }
.chip.category.hosting { background: var(--info-soft); color: var(--info); border-color: rgba(122,162,214,0.30); }
.chip.category.feature_request { background: var(--success-soft); color: var(--success); border-color: rgba(78,201,166,0.30); }
/* Sidebar list item: subject, org, badges row, submitted date stacked. */
.ticket-list .item .badges {
display: flex;
flex-wrap: wrap;
gap: .35rem;
margin-top: .35rem;
}
.ticket-list .item .submitted {
margin-top: .25rem;
font-size: var(--fs-xs);
}
.ticket-list .item .org {
font-size: var(--fs-xs);
margin-top: .15rem;
}
/* Sidebar search box. */
.ticket-search { padding: 0 0 var(--sp-2); }
.ticket-search input {
width: 100%;
padding: .45rem .65rem;
border: 1px solid var(--border-strong);
background: var(--bg-inset);
color: var(--text);
border-radius: var(--radius);
font-size: var(--fs-sm);
}
.ticket-search input:focus { outline: 2px solid var(--info); outline-offset: 1px; }
/* Thread head: badges on one line, timestamps stacked, SLA timer. */
.chat-head .thread-title { margin-bottom: .35rem; }
.chat-head .thread-org { margin-left: .5rem; font-size: var(--fs-xs); }
.chat-head .thread-badges {
display: flex;
flex-wrap: wrap;
gap: .4rem;
margin-bottom: .5rem;
}
.chat-head .thread-times {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: .15rem .9rem;
font-size: var(--fs-xs);
margin-bottom: .4rem;
}
.sla-block {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .35rem .65rem;
border-radius: var(--radius);
background: var(--bg-inset);
border: 1px solid var(--border-strong);
font-size: var(--fs-sm);
font-variant-numeric: tabular-nums;
}
.sla-block .sla-label { color: var(--text-dim); font-weight: 600; }
.sla-block #sla-timer { color: var(--info); font-weight: 600; }
.sla-block #sla-timer.overdue { color: var(--danger); }
/* ---------- Hosting takeover wizard (public + portal) ---------- */
.wizard-shell {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--sp-6) var(--sp-7);
max-width: 760px;
margin: 0 auto;
}
@media (max-width: 720px) { .wizard-shell { padding: var(--sp-5) var(--sp-4); } }
.wizard-header { margin-bottom: var(--sp-5); }
.wizard-header h2 { font-size: var(--fs-2xl); line-height: 1.2; }
.wizard-progress {
margin-top: var(--sp-3);
height: 6px;
border-radius: 999px;
background: var(--bg-inset);
overflow: hidden;
}
.wizard-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
transition: width .3s var(--ease);
}
.wizard-intro {
color: var(--text-dim);
margin: 0 0 var(--sp-5);
line-height: 1.55;
}
.wizard-form { display: flex; flex-direction: column; gap: var(--sp-5); }
.wizard-question { display: flex; flex-direction: column; gap: var(--sp-2); }
.wizard-label {
font-weight: 600;
color: var(--text);
font-size: var(--fs-sm);
}
.wizard-label .req { color: var(--danger); margin-left: .15rem; }
.wizard-helper { color: var(--text-faint); font-size: var(--fs-xs); margin: 0; }
.wizard-form select,
.wizard-form input[type=text],
.wizard-form input[type=url],
.wizard-form input[type=email],
.wizard-form input[type=tel],
.wizard-form textarea {
background: var(--bg-inset);
border: 1px solid var(--border-strong);
color: var(--text);
border-radius: var(--radius);
padding: .6rem .75rem;
font-size: var(--fs-sm);
font-family: inherit;
width: 100%;
}
.wizard-form select:focus,
.wizard-form input:focus,
.wizard-form textarea:focus {
outline: 2px solid var(--info);
outline-offset: 1px;
border-color: transparent;
}
.wizard-form textarea { resize: vertical; min-height: 80px; }
.wizard-radio-group,
.wizard-check-group {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-2);
}
@media (min-width: 600px) {
.wizard-check-group { grid-template-columns: 1fr 1fr; }
}
.wizard-radio,
.wizard-check {
display: flex;
align-items: flex-start;
gap: var(--sp-2);
padding: .55rem .75rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-inset);
cursor: pointer;
font-size: var(--fs-sm);
transition: border-color .12s var(--ease), background .12s var(--ease);
}
.wizard-radio:hover,
.wizard-check:hover {
border-color: var(--border-strong);
}
.wizard-radio input,
.wizard-check input { margin-top: .15rem; }
.wizard-radio:has(input:checked),
.wizard-check:has(input:checked) {
border-color: var(--accent);
background: var(--accent-soft);
}
.wizard-actions {
display: flex;
align-items: center;
gap: var(--sp-3);
padding-top: var(--sp-4);
border-top: 1px solid var(--border);
}
.wizard-spacer { flex: 1; }
.wizard-error {
color: var(--danger);
font-size: var(--fs-sm);
margin: 0;
min-height: 1em;
}
.wizard-success {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--sp-7);
max-width: 640px;
margin: 0 auto;
text-align: center;
}
.wizard-success .check {
width: 56px; height: 56px;
margin: 0 auto var(--sp-4);
border-radius: 50%;
background: var(--success-soft);
color: var(--success);
display: grid;
place-items: center;
font-size: 28px;
border: 1px solid rgba(78,201,166,0.30);
}
.wizard-success h2 { margin: 0 0 var(--sp-3); }
.wizard-success p { color: var(--text-dim); margin: 0 0 var(--sp-3); line-height: 1.55; }
/* Intake form (the email/org/name box on /quote that gates the wizard). */
.intake-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--sp-6);
}
.intake-card h3 { margin: 0 0 var(--sp-2); }
.intake-card .intake-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-4);
margin-top: var(--sp-4);
}
.intake-card .btn-continue {
margin-top: var(--sp-4);
width: 100%;
}
/* ====================================================================
============ 2026-05 styling refresh (tickets, etc.) ============
==================================================================== */
/* ---- Form controls: stabilize checkbox/radio so checking doesn't
change layout height (fix box-sizing + vertical-align). -------- */
input[type="checkbox"], input[type="radio"] {
box-sizing: border-box;
vertical-align: middle;
}
/* ---- Segmented (sliding) button group -------------------------------- */
.al-seg {
display: inline-flex;
position: relative;
background: var(--bg-inset);
border: 1px solid var(--border-strong);
border-radius: 999px;
padding: 3px;
gap: 0;
user-select: none;
}
.al-seg .al-seg-track {
position: absolute;
top: 3px; bottom: 3px;
left: 3px;
width: calc((100% - 6px) / var(--al-seg-n, 3));
background: var(--accent);
border-radius: 999px;
transition: transform .25s var(--ease);
pointer-events: none;
box-shadow: 0 1px 8px rgba(79,140,255,0.35);
}
.al-seg button {
position: relative;
z-index: 1;
appearance: none;
background: transparent;
border: 0;
color: var(--text-dim);
padding: .35rem 1rem;
border-radius: 999px;
cursor: pointer;
font: inherit;
font-size: var(--fs-sm);
font-weight: 500;
transition: color .2s var(--ease);
min-width: 70px;
text-align: center;
}
.al-seg button:hover { color: var(--text); }
.al-seg button[aria-selected="true"] {
color: var(--text-on-accent, #03102a);
font-weight: 600;
}
/* ---- Tickets: redesigned sidebar item ------------------------------- */
.ticket-list .item {
padding: 0;
border-bottom: 1px solid var(--border);
cursor: pointer;
transition: background 0.12s var(--ease);
display: flex;
flex-direction: column;
}
.ticket-list .item.active { background: rgba(79,140,255,0.04); }
.ticket-list .item.active .tk-head { background: rgba(79,140,255,0.18); }
.ticket-list .item .tk-head {
background: var(--bg-inset);
padding: .55rem .7rem;
border-bottom: 1px solid var(--border-strong);
font-weight: 600;
color: var(--text);
font-size: var(--fs-sm);
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ticket-list .item .tk-tags {
display: grid;
grid-template-columns: 1fr 1fr;
border-bottom: 1px solid rgba(120,170,255,0.30);
}
.ticket-list .item .tk-tag {
padding: .35rem .55rem;
font-size: var(--fs-xs);
font-weight: 600;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-top: 1px solid rgba(120,170,255,0.30);
border-bottom: 1px solid rgba(120,170,255,0.30);
line-height: 1.4;
}
.ticket-list .item .tk-tag.tk-status { background: var(--info-soft); color: var(--info); border-right: 1px solid rgba(120,170,255,0.30); }
.ticket-list .item .tk-tag.tk-status.closed,
.ticket-list .item .tk-tag.tk-status.feature_complete { background: var(--success-soft); color: var(--success); }
.ticket-list .item .tk-tag.tk-status.pending_customer { background: var(--warning-soft); color: var(--warning); }
.ticket-list .item .tk-tag.tk-status.investigating { background: rgba(180,120,255,0.14); color: #c79bff; }
.ticket-list .item .tk-tag.tk-status.wip_approved { background: rgba(37,198,106,0.14); color: #5edc94; }
.ticket-list .item .tk-tag.tk-cat { background: rgba(140,140,160,0.10); color: var(--text); }
.ticket-list .item .tk-tag.tk-cat.security_incident { background: var(--danger-soft); color: var(--danger); }
.ticket-list .item .tk-tag.tk-cat.hosting { background: var(--info-soft); color: var(--info); }
.ticket-list .item .tk-tag.tk-cat.feature_request { background: var(--success-soft); color: var(--success); }
.ticket-list .item .tk-tag.tk-cat.question { background: rgba(180,120,255,0.14); color: #c79bff; }
.ticket-list .item .tk-times {
padding: .45rem .7rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: .15rem .6rem;
font-size: var(--fs-xs);
color: var(--text-dim);
}
.ticket-list .item .tk-times .lbl {
color: var(--text-faint);
text-transform: uppercase;
letter-spacing: .04em;
font-size: 10px;
display: block;
}
.ticket-list .item .tk-foot {
display: flex;
align-items: center;
justify-content: space-between;
padding: .35rem .7rem .55rem;
gap: .5rem;
min-height: 30px;
}
.ticket-list .item .tk-pri {
display: inline-block;
padding: .15rem .55rem;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
background: var(--bg-inset);
color: var(--text-dim);
border: 1px solid var(--border);
max-width: 60%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ticket-list .item .tk-pri.p1 { background: var(--danger-soft); color: var(--danger); border-color: rgba(224,112,112,0.30); }
.ticket-list .item .tk-pri.p2 { background: var(--warning-soft); color: var(--warning); border-color: rgba(212,164,96,0.30); }
.ticket-list .item .tk-pri.p3 { background: var(--info-soft); color: var(--info); border-color: rgba(122,162,214,0.30); }
.ticket-list .item .tk-pri.p4 { background: var(--bg-inset); color: var(--text-dim); }
.ticket-list .item .tk-org-name {
color: var(--text-faint);
font-size: 11px;
text-align: right;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 60%;
}
/* ---- Tickets: redesigned chat header ------------------------------- */
.chat-head.tk-head-pro {
padding: 0;
background: transparent;
border-bottom: 1px solid var(--border);
}
.tk-head-pro .tk-head-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: .75rem 1.1rem;
background: var(--bg-inset);
border-bottom: 1px solid var(--border-strong);
}
.tk-head-pro .tk-head-bar h2 {
margin: 0;
font-size: var(--fs-lg);
color: var(--text);
line-height: 1.25;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tk-head-pro .tk-id {
display: inline-flex;
align-items: center;
gap: .35rem;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: var(--fs-xs);
color: var(--text-faint);
background: var(--bg-card);
border: 1px solid var(--border);
padding: .25rem .55rem;
border-radius: 6px;
flex-shrink: 0;
}
.tk-head-pro .tk-id button {
appearance: none;
background: transparent;
border: 0;
color: var(--text-faint);
cursor: pointer;
padding: 0;
line-height: 1;
display: inline-flex;
align-items: center;
opacity: .75;
transition: color .15s var(--ease), opacity .15s var(--ease);
}
.tk-head-pro .tk-id button:hover { color: var(--accent); opacity: 1; }
.tk-head-pro .tk-id button.copied { color: var(--success); }
.tk-head-pro .tk-meta-row {
display: flex;
flex-wrap: wrap;
gap: .4rem .55rem;
padding: .55rem 1.1rem .15rem;
align-items: center;
}
.tk-head-pro .tk-meta-row .muted { color: var(--text-faint); }
.tk-head-pro .tk-times-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: .15rem .9rem;
padding: .15rem 1.1rem .7rem;
font-size: var(--fs-xs);
color: var(--text-dim);
}
.tk-head-pro .tk-times-row .lbl {
color: var(--text-faint); text-transform: uppercase;
letter-spacing: .04em; font-size: 10px; margin-right: .25rem;
}
.tk-head-pro .sla-block { margin: 0 1.1rem .7rem; }
/* ---- Notification center ------------------------------------------- */
.nav-notify {
position: relative;
display: inline-flex;
align-items: center;
}
.nav-notify > button {
appearance: none;
background: transparent;
border: 1px solid transparent;
border-radius: 999px;
color: var(--text-dim);
width: 34px; height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
transition: background .15s var(--ease), color .15s var(--ease);
}
.nav-notify > button:hover { background: var(--bg-inset); color: var(--text); }
.nav-notify .notify-dot {
position: absolute;
top: 4px; right: 5px;
width: 8px; height: 8px;
background: var(--danger);
border-radius: 50%;
display: none;
box-shadow: 0 0 0 2px var(--bg, #0a1326);
pointer-events: none;
}
.nav-notify[data-count]:not([data-count="0"]) .notify-dot { display: block; }
.nav-notify .notify-panel {
display: none;
position: absolute;
top: calc(100% + 6px);
right: 0;
width: 340px;
max-width: calc(100vw - 32px);
background: var(--bg-card);
border: 1px solid var(--border-strong);
border-radius: var(--radius);
box-shadow: 0 10px 40px rgba(0,0,0,0.45);
z-index: 200;
overflow: hidden;
}
.nav-notify.open .notify-panel { display: block; }
.nav-notify .notify-panel header {
padding: .65rem .85rem;
border-bottom: 1px solid var(--border);
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: .06em;
color: var(--text-faint);
}
.nav-notify .notify-panel .empty {
padding: 1rem .85rem;
color: var(--text-faint);
font-size: var(--fs-sm);
text-align: center;
}
.nav-notify .notify-panel a.notify-item {
display: block;
padding: .65rem .85rem;
border-bottom: 1px solid var(--border);
color: var(--text);
text-decoration: none;
font-size: var(--fs-sm);
transition: background .15s var(--ease);
}
.nav-notify .notify-panel a.notify-item:last-child { border-bottom: 0; }
.nav-notify .notify-panel a.notify-item:hover { background: var(--bg-inset); }
.nav-notify .notify-panel a.notify-item .ni-kind {
color: var(--warning);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
display: block;
margin-bottom: 2px;
}
.nav-notify .notify-panel a.notify-item .notify-item-title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
}
.nav-notify .notify-panel a.notify-item.danger .ni-kind { color: var(--danger); }
@media (max-width: 719px) {
.nav-notify .notify-panel {
position: fixed;
top: 62px;
left: 50%;
right: auto;
bottom: auto;
transform: translateX(-50%);
width: min(90vw, 340px);
max-width: 90vw;
max-height: calc(100vh - 78px);
overflow-y: auto;
z-index: 49;
box-shadow: 0 16px 48px rgba(0,0,0,0.6);
border-radius: var(--radius-lg);
}
}
.nav-user-name {
color: var(--text-dim);
font-size: var(--fs-sm);
margin-right: .25rem;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ---- Yellow pay button -------------------------------------------- */
.btn.pay-cta, .btn.btn-pay {
background: #f6c344;
color: #1a1300;
border-color: #d6a52a;
}
.btn.pay-cta:hover, .btn.btn-pay:hover {
background: #ffd35a;
color: #1a1300;
border-color: #d6a52a;
}
/* ---- Manage subscriptions: nicer card --------------------------- */
.sub-card {
grid-template-columns: 1fr;
padding: 0;
overflow: hidden;
}
.sub-card .sub-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: .85rem 1.1rem;
background: var(--bg-inset);
border-bottom: 1px solid var(--border);
}
.sub-card .sub-card-head h4 { margin: 0; font-size: var(--fs-md); }
.sub-card .sub-card-head .sub-org {
color: var(--text-faint);
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: .06em;
}
.sub-card .sub-card-body {
display: grid;
grid-template-columns: 1fr auto;
gap: 1rem;
padding: 1rem 1.1rem;
align-items: center;
}
.sub-card .sub-stats {
display: flex;
gap: 1.4rem;
flex-wrap: wrap;
}
.sub-card .sub-stat {
display: flex; flex-direction: column;
gap: 2px;
min-width: 120px;
}
.sub-card .sub-stat .lbl {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--text-faint);
}
.sub-card .sub-stat .val { font-weight: 600; color: var(--text); font-size: var(--fs-sm); }
.sub-card .sub-stat .val.muted-val { color: var(--text-dim); font-weight: 500; }
.sub-card .sub-stat .val.cancel-val { color: var(--warning); }
.sub-card.expired { opacity: .7; }
.sub-card.expired .sub-card-head { background: rgba(140,140,160,0.10); }
/* ---- Quote on the public site: allow it to be wider ------------- */
.container.container-wide { max-width: 1320px; }
/* ---- Dashboard tweak: equalize stack rows ----------------------- */
.dash-stack { height: 100%; }
.dash-stack .stack-row { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.dash-stack .stack-row + .stack-row { border-top: 1px solid var(--border); }
/* ---- Auth helpers: secondary link + password strength meter ---- */
.link-secondary {
display: inline-block;
margin-top: var(--sp-2);
font-size: var(--fs-xs);
color: var(--text-faint);
text-decoration: none;
}
.link-secondary:hover { color: var(--accent-2); text-decoration: underline; }
.strength-meter { margin-top: var(--sp-2); }
.strength-meter .strength-bar {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 4px; margin-bottom: var(--sp-2);
}
.strength-meter .strength-bar span {
display: block; height: 4px; border-radius: 2px;
background: rgba(255,255,255,0.08);
}
.strength-meter .strength-bar span.s-1 { background: #b94a4a; }
.strength-meter .strength-bar span.s-2 { background: #c98432; }
.strength-meter .strength-bar span.s-3 { background: #c9b132; }
.strength-meter .strength-bar span.s-4 { background: #4cb963; }
.strength-meter .strength-reqs {
list-style: none; padding: 0; margin: 0;
font-size: var(--fs-xs); color: var(--text-faint);
display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px;
}
.strength-meter .strength-reqs li.met { color: #8bd9a0; }
.strength-meter .strength-reqs li .check { display: inline-block; width: 1em; }
/* Resources page filter row: align Clear with the bottom of the
inputs/selects above it and give it consistent vertical metrics. */
.resources-filters {
gap: var(--sp-3);
margin-bottom: var(--sp-5);
flex-wrap: wrap;
align-items: end;
}
.resources-filters .btn { height: 38px; padding: 0 var(--sp-4); }
/* Inline search-field affordance: a wrapper that overlays an SVG icon
inside the left edge of a [type=search] input. Used so the placeholder
does not have to rely on a glyph font (CSP-friendly, theme-able via
currentColor). The icon is decorative (aria-hidden) and the input
itself carries the accessible name from the Search label. */
.search-field {
position: relative;
display: block;
}
.search-field .search-field-icon {
position: absolute;
left: var(--sp-3, 0.75rem);
top: 50%;
transform: translateY(-50%);
color: var(--text-muted, #6b7280);
pointer-events: none;
}
.search-field > input[type="search"] {
width: 100%;
padding-left: calc(var(--sp-3, 0.75rem) * 2 + 16px);
}
/* Blog post cover image. Pulled in slightly tighter than the narrow
container so it reads as a hero without being full-bleed. */
.post-cover {
margin: 0 0 var(--sp-5);
border-radius: var(--radius);
overflow: hidden;
background: var(--bg-inset);
}
/* Reserve a 16/9 slot only when an image is actually present so the
cover cannot cause cumulative layout shift as the operator-uploaded
image loads. Posts without a cover render no .post-cover element. */
.post-cover:has(img) { aspect-ratio: 16 / 9; }
.post-cover img { display: block; width: 100%; height: 100%; max-height: 460px; object-fit: cover; }
/* Phase 1: dynamic service cards on the homepage and quote page. */
.service-card {
display: flex;
flex-direction: column;
min-height: 100%;
}
.service-card__heading { margin: var(--sp-3) 0 var(--sp-2); }
.service-card__body { margin: 0 0 var(--sp-2); }
.service-card__bullets { margin: var(--sp-1) 0 var(--sp-4); padding-left: 0; list-style: none; }
.service-card__bullets li {
position: relative;
padding-left: 1.1em;
margin: 0 0 var(--sp-2);
}
.service-card__bullets li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent);
}
.service-card__footer {
margin-top: auto;
padding-top: var(--sp-3);
}
/* Bullet editor rows in staff product editor - flex layout so the trash
icon stays compact instead of consuming half of a 2-column grid. */
.bullet-editor-row {
display: flex;
align-items: center;
gap: var(--sp-2);
margin-bottom: var(--sp-2);
}
.bullet-editor-row > input[type="text"] {
flex: 1 1 auto;
min-width: 0;
}
.bullet-editor-row > .bullet-del-btn {
flex: 0 0 auto;
width: 32px;
height: 32px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Slider volume-discount markers used in quote-controls.js */
.range-wrap { position: relative; padding-bottom: 1.5rem; }
.vol-disc-marker {
position: absolute;
top: -2px;
width: 2px;
height: 14px;
background: var(--accent);
pointer-events: none;
transform: translateX(-50%);
}
.vol-disc-label {
position: absolute;
top: 14px;
font-size: 0.7rem;
color: var(--accent);
transform: translateX(-50%);
white-space: nowrap;
}
.vol-disc-savings {
display: none;
margin-top: var(--sp-2);
font-size: var(--fs-sm);
color: var(--success);
}
.vol-disc-savings.active { display: block; }
.vol-disc-amount { font-weight: 600; }
/* Ghost button trash icon hover indicator */
.btn-ghost:hover svg.icon-trash { stroke: var(--danger); }
/* ============================================================
FAQ page
============================================================ */
.faq-section { padding-bottom: var(--sp-8); }
.faq-controls {
display: grid;
gap: var(--sp-3);
margin-bottom: var(--sp-5);
}
.faq-search {
position: relative;
display: flex;
align-items: center;
gap: var(--sp-2);
padding: 0 var(--sp-3);
background: var(--bg-inset);
border: 1px solid var(--border);
border-radius: 10px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.faq-search:focus-within {
border-color: var(--border-focus);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.faq-search .faq-search-icon { color: var(--text-dim); flex: 0 0 auto; }
.faq-search input[type="search"] {
flex: 1 1 auto;
background: transparent;
border: 0;
outline: 0;
color: var(--text);
font: inherit;
padding: 0.75rem 0;
min-width: 0;
}
.faq-search input[type="search"]::placeholder { color: var(--text-faint); }
.faq-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.faq-search-clear {
flex: 0 0 auto;
background: transparent;
border: 0;
color: var(--text-dim);
cursor: pointer;
padding: 4px;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.faq-search-clear:hover { color: var(--text); background: var(--border); }
.faq-search-clear:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.faq-chips {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
}
.faq-chip {
display: inline-flex;
align-items: center;
padding: 0.4rem 0.85rem;
font-size: var(--fs-sm);
color: var(--text-dim);
background: var(--bg-inset);
border: 1px solid var(--border);
border-radius: 999px;
text-decoration: none;
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.faq-chip:hover {
color: var(--text);
border-color: var(--border-strong);
background: var(--bg-card);
text-decoration: none;
}
.faq-chip.is-active {
color: var(--accent);
border-color: var(--accent);
background: var(--accent-soft);
}
.faq-chip:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.faq-status { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); }
.faq-empty {
padding: var(--sp-5);
background: var(--bg-card);
border: 1px dashed var(--border-strong);
border-radius: 10px;
text-align: center;
}
.faq-empty p { margin: 0 0 var(--sp-2); }
.faq-empty p:last-child { margin-bottom: 0; }
.faq-group {
margin-bottom: var(--sp-6);
scroll-margin-top: 96px;
}
.faq-group-head {
display: flex;
align-items: baseline;
gap: var(--sp-2);
margin-bottom: var(--sp-3);
padding-bottom: var(--sp-2);
border-bottom: 1px solid var(--border);
}
.faq-group-head h2 {
margin: 0;
font-size: var(--fs-2xl, 1.5rem);
scroll-margin-top: 96px;
}
.faq-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.6rem;
height: 1.4rem;
padding: 0 0.45rem;
font-size: 0.75rem;
color: var(--text-dim);
background: var(--bg-inset);
border: 1px solid var(--border);
border-radius: 999px;
}
.faq-items {
display: grid;
gap: var(--sp-3);
}
.faq-item {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
scroll-margin-top: 96px;
}
.faq-item:hover { border-color: var(--border-strong); }
.faq-item[open] {
border-color: var(--border-strong);
box-shadow: 0 0 0 1px var(--border) inset;
}
.faq-item > summary {
list-style: none;
cursor: pointer;
position: relative;
padding: var(--sp-3) var(--sp-7) var(--sp-3) var(--sp-4);
font-weight: 600;
color: var(--text);
display: flex;
align-items: center;
gap: var(--sp-3);
transition: background 0.15s ease;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::marker { content: ""; }
.faq-item > summary:hover { background: rgba(150, 180, 230, 0.04); }
.faq-item > summary:focus-visible {
outline: 2px solid var(--border-focus);
outline-offset: -2px;
}
/* Chevron indicator, rotates when open. */
.faq-item > summary::after {
content: "";
position: absolute;
right: var(--sp-4);
top: 50%;
width: 10px;
height: 10px;
border-right: 2px solid var(--text-dim);
border-bottom: 2px solid var(--text-dim);
transform: translateY(-75%) rotate(45deg);
transition: transform 0.2s ease, border-color 0.15s ease;
}
.faq-item[open] > summary::after {
transform: translateY(-25%) rotate(-135deg);
border-color: var(--accent);
}
.faq-answer {
padding: 0 var(--sp-4) var(--sp-4);
color: var(--text-dim);
border-top: 1px solid var(--border);
animation: faq-fade-in 0.2s ease;
}
.faq-answer p { margin: var(--sp-3) 0 0; }
.faq-answer p:first-child { margin-top: var(--sp-3); }
.faq-answer a { color: var(--accent-2); }
.faq-answer a:hover { color: var(--accent); }
@keyframes faq-fade-in {
from { opacity: 0; transform: translateY(-2px); }
to { opacity: 1; transform: translateY(0); }
}
.faq-foot {
margin-top: var(--sp-7);
padding-top: var(--sp-5);
border-top: 1px solid var(--border);
}
@media (prefers-reduced-motion: reduce) {
.faq-item > summary::after,
.faq-answer,
.faq-search,
.faq-chip { transition: none; animation: none; }
}
@media (max-width: 640px) {
.faq-item > summary { padding-right: var(--sp-6); }
.faq-group-head h2 { font-size: 1.25rem; }
}
/* End of original stylesheet. */
/* =====================================================================
* Task 021 - Mobile responsiveness sweep additions.
*
* Everything below this banner was added as part of the responsive
* pass. It deliberately does NOT modify the desktop layout: each rule
* is gated behind a `@media (max-width: ...)` query at one of the
* canonical breakpoints declared in :root.
* ===================================================================== */
/* --- Data tables: horizontal scroll inside flush cards -------------- */
.card.card-flush {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.card.card-flush > table,
.card.card-flush > .data-table,
.table-wrap > table {
min-width: 100%;
}
@media (max-width: 640px) {
/* Sticky first column for data tables so the row identifier
* is visible while the user scrolls horizontally to reach the
* trailing columns. */
.table-wrap table > thead > tr > th:first-child,
.table-wrap table > tbody > tr > td:first-child,
.card.card-flush > table > thead > tr > th:first-child,
.card.card-flush > table > tbody > tr > td:first-child,
.card.card-flush > .data-table > thead > tr > th:first-child,
.card.card-flush > .data-table > tbody > tr > td:first-child {
position: sticky;
left: 0;
z-index: 1;
background: var(--bg-card);
}
.table-wrap table > thead > tr > th:first-child,
.card.card-flush > table > thead > tr > th:first-child,
.card.card-flush > .data-table > thead > tr > th:first-child {
background: var(--bg-elev);
}
}
/* --- Forms: full-width buttons on small screens --------------------- */
@media (max-width: 640px) {
form .row > .btn,
form .stack > .row > .btn,
.form-actions .btn,
.auth-shell .row > .btn {
width: 100%;
}
form .row,
.form-actions {
flex-wrap: wrap;
}
form .row > .btn + .btn,
.form-actions .btn + .btn {
margin-top: var(--sp-2);
}
}
/* --- Modals: respect visible viewport height ------------------------ */
.info-modal,
.al-modal {
max-height: 90vh;
max-height: min(90dvh, 100vh - 24px);
}
@media (max-width: 480px) {
.info-modal-overlay,
.al-modal-overlay {
padding: 0;
}
.info-modal,
.al-modal,
.al-modal[data-wide] {
width: 100%;
max-width: 100%;
height: 100dvh;
max-height: 100dvh;
border-radius: 0;
border-left: 0;
border-right: 0;
border-top: 0;
}
.info-modal-body,
.al-modal-body {
flex: 1 1 auto;
}
}
/* --- Defensive min-width: 0 for grid/flex children ------------------ */
.preview-card,
.hero-visual,
.option-grid,
.al-modal,
.info-modal {
min-width: 0;
}
/* --- Quote builder: keep configurator above the bottom-sheet cart --- */
@media (max-width: 1080px) {
.quote-shell {
padding-bottom: 96px;
}
}
/* --- Empty / loading / error states (shared list primitives) -------- */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--sp-2);
padding: var(--sp-6) var(--sp-4);
text-align: center;
color: var(--text-soft, var(--text-faint));
}
.empty-state__icon {
width: 56px;
height: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: var(--accent-soft, rgba(120, 160, 230, 0.08));
color: var(--accent, #6da3ff);
margin-bottom: var(--sp-2);
}
.empty-state__icon svg { width: 28px; height: 28px; }
.empty-state__title {
margin: 0;
font-size: var(--fs-md, 1rem);
font-weight: 600;
color: var(--text, inherit);
}
.empty-state__text {
margin: 0;
max-width: 42ch;
font-size: var(--fs-sm, 0.9rem);
line-height: 1.55;
}
.empty-state__cta {
margin-top: var(--sp-3);
text-decoration: none;
}
.empty-state-row > td,
.error-state-row > td {
padding: var(--sp-3) var(--sp-4) !important;
background: transparent;
}
.error-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--sp-2);
padding: var(--sp-6) var(--sp-4);
text-align: center;
}
.error-state__icon {
width: 56px;
height: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(220, 80, 80, 0.10);
color: #ff8585;
margin-bottom: var(--sp-2);
}
.error-state__icon svg { width: 28px; height: 28px; }
.error-state__text {
margin: 0;
max-width: 48ch;
color: var(--text, inherit);
font-size: var(--fs-sm, 0.9rem);
line-height: 1.55;
}
.error-state__retry {
margin-top: var(--sp-2);
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.error-state__retry-icon { width: 16px; height: 16px; }
/* Skeleton loaders. Animation is suppressed for users who prefer
reduced motion. */
@keyframes al-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.skeleton-bar,
.skeleton-line {
display: block;
height: 0.8rem;
width: 100%;
border-radius: 6px;
background: linear-gradient(
90deg,
rgba(150, 180, 230, 0.06) 0%,
rgba(150, 180, 230, 0.18) 50%,
rgba(150, 180, 230, 0.06) 100%
);
background-size: 200% 100%;
animation: al-shimmer 1.4s ease-in-out infinite;
}
.skeleton-row > td {
padding-top: 0.75rem !important;
padding-bottom: 0.75rem !important;
background: transparent;
border-color: var(--border, rgba(150, 180, 230, 0.12));
}
.skeleton-row > td:first-child .skeleton-bar { width: 70%; }
.skeleton-row > td:last-child .skeleton-bar { width: 40%; }
.skeleton-panel {
display: flex;
flex-direction: column;
gap: var(--sp-3);
padding: var(--sp-4);
}
.skeleton-panel .skeleton-line:nth-child(1) { width: 65%; }
.skeleton-panel .skeleton-line:nth-child(2) { width: 85%; }
.skeleton-panel .skeleton-line:nth-child(3) { width: 50%; }
.skeleton-panel .skeleton-line:nth-child(4) { width: 75%; }
@media (prefers-reduced-motion: reduce) {
.skeleton-bar,
.skeleton-line {
animation: none;
background: rgba(150, 180, 230, 0.10);
}
}
/* =====================================================================
* Task 024 - Session timeout & re-auth UX.
* Countdown banner (sticky top) + reauth modal form layout.
* ===================================================================== */
.al-session-banner {
/* Normal document flow: pushes the sticky header (and the rest of
the page) down instead of overlaying it. Once the user scrolls
past the bar, the sticky header still pins to the viewport top. */
position: relative;
display: flex;
width: 100%;
box-sizing: border-box;
align-items: center;
gap: var(--sp-3, 12px);
padding: 10px 16px;
background: var(--warning-bg, rgba(245, 166, 35, 0.16));
color: var(--text, #fff);
border-bottom: 1px solid var(--warning, #f5a623);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
font-size: 14px;
line-height: 1.4;
animation: al-session-banner-in 200ms ease-out;
}
.al-session-banner-msg {
flex: 1 1 auto;
color: var(--warning, #f5a623);
font-weight: 600;
}
.al-session-banner-btn { flex: 0 0 auto; }
.al-session-banner-dismiss {
flex: 0 0 auto;
padding: 4px 10px;
font-size: 18px;
line-height: 1;
}
@keyframes al-session-banner-in {
from { transform: translateY(-100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.al-session-banner { animation: none; }
}
@media (max-width: 640px) {
.al-session-banner {
flex-wrap: wrap;
gap: 8px;
padding: 8px 12px;
}
.al-session-banner-msg { flex-basis: 100%; }
}
#al-reauth-overlay .al-modal { max-width: 440px; }
.al-reauth-form {
display: flex;
flex-direction: column;
gap: 6px;
}
.al-reauth-label {
margin-top: 8px;
font-size: 13px;
font-weight: 600;
color: var(--text-dim, #ccd);
}
.al-reauth-status {
margin: 8px 0 0;
min-height: 1.25rem;
font-size: 13px;
}
.al-reauth-status.error {
color: var(--danger, #ff5a5a);
}
#al-reauth-email[readonly] {
opacity: 0.85;
cursor: not-allowed;
}
/* --- Generic prose typography --------------------------------------- *
* Shared rules for rendered article markdown applies to the public
* blog-post body (#post-body.prose) and to the staff editor preview
* dialogs. Keeps headings, lists, code, blockquotes, and images
* consistent between the public site and the editor preview. */
.prose {
color: var(--text);
line-height: 1.7;
font-size: var(--fs-md);
max-width: 760px;
}
.prose > * + * { margin-top: var(--sp-4); }
.prose h1 { font-size: var(--fs-3xl); line-height: 1.2; margin-top: var(--sp-6); }
.prose h2 {
font-size: var(--fs-2xl);
line-height: 1.25;
margin-top: var(--sp-6);
padding-top: var(--sp-5);
border-top: 1px solid var(--border);
}
.prose h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.prose h3 { font-size: var(--fs-xl); line-height: 1.3; margin-top: var(--sp-5); }
.prose h4 { font-size: var(--fs-lg); margin-top: var(--sp-4); }
.prose p, .prose li { color: var(--text); }
.prose a {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 3px;
}
.prose a:hover { text-decoration-thickness: 2px; }
.prose ul, .prose ol { padding-left: 1.5rem; }
.prose ul li + li, .prose ol li + li { margin-top: var(--sp-2); }
.prose blockquote {
margin: var(--sp-4) 0;
padding: var(--sp-3) var(--sp-4);
border-left: 3px solid var(--accent);
background: var(--bg-inset);
color: var(--text-dim);
border-radius: var(--radius-sm);
}
.prose blockquote > * + * { margin-top: var(--sp-3); }
.prose code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
background: var(--bg-inset);
padding: 2px 6px;
border-radius: 4px;
font-size: .92em;
}
.prose pre {
background: var(--bg-inset);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: var(--sp-4);
overflow-x: auto;
font-size: var(--fs-sm);
line-height: 1.55;
}
.prose pre code { background: transparent; padding: 0; font-size: inherit; }
.prose img {
max-width: 100%;
height: auto;
display: block;
border-radius: var(--radius-sm);
}
.prose hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-5) 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.prose th, .prose td {
border: 1px solid var(--border);
padding: var(--sp-2) var(--sp-3);
text-align: left;
vertical-align: top;
}
.prose th { background: var(--bg-inset); font-weight: 600; }