/*
* OI! / Lore — Polish Layer
* The missing half of the design system: depth, motion, focus, rhythm.
*
* styles.css owns COLOR (tokens, themes, palettes).
* polish.css owns EVERYTHING ELSE that makes a UI feel finished:
* elevation · motion · focus · radius scale · type scale · space scale
*
* Load AFTER styles.css and palettes.css:
*
*
*
*
* Purely additive. Every token below was missing entirely — nothing here
* overrides an existing value except --radius (see note at RADIUS).
*/
/* ═══════════════════════════════════════════════════════════
1. ELEVATION — the single biggest "pop" lever
───────────────────────────────────────────────────────────
Dark surfaces don't read depth from shadow alone; they need a rim
light on the top edge (the inset) plus the shadow. Light surfaces
read depth from shadow alone, tinted blue-black rather than pure
black so it looks like light falling, not dirt.
═══════════════════════════════════════════════════════════ */
:root {
/* Dark theme (default) — shadow + top rim light */
--shadow-1: 0 1px 2px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.03);
--shadow-2: 0 2px 6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
--shadow-3: 0 8px 20px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.05);
--shadow-4: 0 16px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
--shadow-pop: 0 0 0 1px var(--green-border), 0 4px 14px rgba(0,0,0,.45);
}
[data-theme="light"] {
/* Light theme — soft, blue-black, no rim light */
--shadow-1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
--shadow-2: 0 2px 4px -1px rgba(16,24,40,.06), 0 4px 8px -2px rgba(16,24,40,.10);
--shadow-3: 0 4px 6px -2px rgba(16,24,40,.05), 0 12px 16px -4px rgba(16,24,40,.10);
--shadow-4: 0 8px 8px -4px rgba(16,24,40,.04), 0 20px 24px -4px rgba(16,24,40,.12);
--shadow-pop: 0 0 0 1px var(--green-border), 0 4px 14px rgba(16,24,40,.12);
}
/* ═══════════════════════════════════════════════════════════
2. MOTION — one curve, three speeds
───────────────────────────────────────────────────────────
The app currently uses the browser-default `ease` curve everywhere,
which is symmetrical and reads as sluggish. --ease is fast-out /
settle-in: things leave immediately and arrive gently.
═══════════════════════════════════════════════════════════ */
:root {
--ease: cubic-bezier(.2, 0, 0, 1); /* default — snappy exit, soft landing */
--ease-out: cubic-bezier(0, 0, .2, 1); /* entrances */
--ease-in: cubic-bezier(.4, 0, 1, 1); /* exits / dismissals */
--ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* playful overshoot — use sparingly */
--dur-1: 120ms; /* hover, color, micro-feedback */
--dur-2: 180ms; /* the default — panels, cards, reveals */
--dur-3: 260ms; /* full-panel slides, sheets, drawers */
--t-fast: var(--dur-1) var(--ease);
--t-base: var(--dur-2) var(--ease);
--t-slow: var(--dur-3) var(--ease);
}
/* ═══════════════════════════════════════════════════════════
3. FOCUS — the app currently has one focus ring, total
───────────────────────────────────────────────────────────
:focus-visible only fires for keyboard/AT users, so this adds a
visible ring for them without putting a ring on every mouse click.
═══════════════════════════════════════════════════════════ */
:root {
--focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}
:where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible {
outline: none;
box-shadow: var(--focus-ring);
border-radius: var(--radius-sm);
position: relative;
z-index: 1;
}
/* Anything that killed the native outline gets it back only for mouse users */
:where(a, button, [role="button"], [tabindex]):focus:not(:focus-visible) {
outline: none;
}
/* ═══════════════════════════════════════════════════════════
4. RADIUS — scale
───────────────────────────────────────────────────────────
NOTE: styles.css sets --radius: 10px, but the codebase actually
uses 8px 3x more often. Retuned to 8px so the token matches
reality and gets adopted. --radius-md is an alias for clarity.
═══════════════════════════════════════════════════════════ */
:root {
--radius-xs: 4px;
/* --radius-sm: 6px — already in styles.css */
--radius-md: 8px;
--radius: 8px; /* retuned from 10px — matches actual usage */
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: 999px;
}
/* ═══════════════════════════════════════════════════════════
5. SPACE — 4px rhythm
═══════════════════════════════════════════════════════════ */
:root {
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
}
/* ═══════════════════════════════════════════════════════════
6. TYPE — 6 sizes replace 40
═══════════════════════════════════════════════════════════ */
:root {
--fs-2xs: 10px; /* eyebrow labels, badges */
--fs-xs: 11px; /* meta, timestamps */
--fs-sm: 12px; /* dense UI — the app's workhorse */
--fs-md: 13px; /* body */
--fs-base: 14px; /* comfortable body */
--fs-lg: 16px; /* inputs (also prevents iOS zoom) */
--fs-xl: 20px;
--fs-2xl: 26px;
--lh-tight: 1.25;
--lh-base: 1.5;
/* Eyebrow label recipe — currently retyped verbatim 14+ times */
--eyebrow-size: var(--fs-2xs);
--eyebrow-track: .06em;
}
.eyebrow {
font-size: var(--eyebrow-size);
font-weight: 700;
color: var(--text-3);
text-transform: uppercase;
letter-spacing: var(--eyebrow-track);
}
/* ═══════════════════════════════════════════════════════════
7. APPLIED — give existing surfaces depth and life
───────────────────────────────────────────────────────────
These are the card classes that today render as flat outlined
rectangles: border + background, no shadow, no hover response.
═══════════════════════════════════════════════════════════ */
.card,
.hv-pcard,
.hv-feed,
.hv-followups,
.hv-contact,
.hv-briefing,
.wt-card,
.auth-container {
box-shadow: var(--shadow-1);
transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-fast);
}
/* Interactive cards lift. Static ones don't — the lift is the signal
that something is clickable, so don't spend it on everything. */
.card[onclick],
.card[role="button"],
a > .card,
.hv-pcard[onclick],
.wt-card[onclick],
.welcome-starter {
cursor: pointer;
}
.card[onclick]:hover,
.card[role="button"]:hover,
a > .card:hover,
.hv-pcard[onclick]:hover,
.wt-card[onclick]:hover,
.welcome-starter:hover {
box-shadow: var(--shadow-3);
transform: translateY(-2px);
border-color: var(--border-2);
}
.card[onclick]:active,
.card[role="button"]:active,
a > .card:active,
.hv-pcard[onclick]:active,
.wt-card[onclick]:active,
.welcome-starter:active {
box-shadow: var(--shadow-1);
transform: translateY(0);
transition-duration: var(--dur-1);
}
/* Floating layers get real elevation */
.oi-sheet,
.oi-toast,
.overlay-card,
.oi-menu,
.oi-dropdown {
box-shadow: var(--shadow-4);
}
/* Buttons: press feedback. Currently nothing happens on :active app-wide. */
.btn,
.btn-primary,
.auth-btn {
transition: background var(--t-fast), border-color var(--t-fast),
box-shadow var(--t-fast), transform var(--dur-1) var(--ease);
}
.btn:active,
.btn-primary:active,
.auth-btn:active {
transform: scale(.97);
}
/* Primary action earns a tinted glow instead of a grey shadow */
.btn-primary {
box-shadow: 0 1px 2px rgba(0,0,0,.2),
0 2px 8px color-mix(in srgb, var(--accent) 25%, transparent);
}
.btn-primary:hover {
box-shadow: 0 1px 2px rgba(0,0,0,.2),
0 4px 14px color-mix(in srgb, var(--accent) 38%, transparent);
}
/* Rows: hover should feel instant, not fade in */
.oi-comms-row:hover,
.oidir-row:hover,
tr[onclick]:hover {
transition: background var(--dur-1) var(--ease-out);
}
/* ═══════════════════════════════════════════════════════════
8. SKELETON — the app has exactly one, for the AI slot
───────────────────────────────────────────────────────────
Use in place of "Loading…" text so lists reserve their space
instead of collapsing and popping.
═══════════════════════════════════════════════════════════ */
.skel {
background: linear-gradient(90deg,
var(--bg-3) 25%,
color-mix(in srgb, var(--bg-3) 60%, var(--text-5)) 37%,
var(--bg-3) 63%);
background-size: 400% 100%;
animation: skel-shimmer 1.4s ease infinite;
border-radius: var(--radius-sm);
}
.skel-line { height: 10px; margin-bottom: var(--space-2); }
.skel-line:last-child { width: 60%; margin-bottom: 0; }
.skel-avatar { width: 32px; height: 32px; border-radius: var(--radius-full); }
.skel-row { display: flex; gap: var(--space-3); padding: var(--space-3); align-items: center; }
.skel-row > .skel-body { flex: 1; min-width: 0; }
@keyframes skel-shimmer {
0% { background-position: 100% 50%; }
100% { background-position: 0 50%; }
}
/* ═══════════════════════════════════════════════════════════
9. EMPTY STATES — shape instead of bare grey text
═══════════════════════════════════════════════════════════ */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-3);
padding: var(--space-10) var(--space-5);
text-align: center;
}
.empty-state svg { width: 32px; height: 32px; color: var(--text-5); }
.empty-state-title { font-size: var(--fs-base); font-weight: 600; color: var(--text-2); }
.empty-state-body { font-size: var(--fs-md); color: var(--text-4); max-width: 34ch; line-height: var(--lh-base); }
/* ═══════════════════════════════════════════════════════════
10. ACCESSIBILITY — reduced motion
───────────────────────────────────────────────────────────
The app runs several infinite animations with no escape hatch.
═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* ═══════════════════════════════════════════════════════════
11. MOBILE — touch targets + safe areas
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
/* 44px is the Apple/WCAG minimum. .btn currently lands at ~34px. */
.btn, .btn-primary, .auth-btn, .tab, .pill, .chip {
min-height: 44px;
display: inline-flex;
align-items: center;
}
/* Bottom-pinned things must clear the home indicator */
.oi-toast, .s-toast, .auto-toast {
bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
}
}
/* Prevent iOS focus-zoom — any control under 16px triggers it */
input, textarea, select { font-size: max(16px, var(--fs-lg)); }