/* ============================================================
* Titaness design tokens — foundation
*
* Source: explorer_sandbox / Themis Resolve Demo
* (extracted in .claude/design/GRT-586/01_tokens_and_globals.md)
*
* Brand: Themis Bios — dark-mode-only, teal accent, warm tan prose.
* This is the first CSS in the cascade — every other stylesheet sits
* on top of these tokens.
* ============================================================ */
:root {
/* The five canonical surface + accent tokens. */
--bg-primary: #0D1B2A;
--bg-card: #112436;
--bg-panel: #162d42;
--border: #1e3a52;
--teal: #00B897;
/* Accent literals — used directly across the codebase, kept here
so a single colour-policy review knows where they live. */
--tan: #e8d5b7;
--success: #4ade80;
--warning: #fbbf24;
--info: #60a5fa;
--danger: #f87171;
--muted: #94a3b8;
--body: #e2e8f0;
}
* { box-sizing: border-box; }
html, body {
height: 100%;
margin: 0;
}
body {
background: var(--bg-primary);
color: var(--body);
font-family:
-apple-system, BlinkMacSystemFont,
'Inter', 'Segoe UI', 'Noto Sans', 'Noto Serif',
Roboto, sans-serif;
font-size: 13px;
line-height: 1.5;
min-height: 100vh;
}
/* Subtle scrollbar matching the border colour. */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
/* ============================================================
* Custom utility classes
*
* Each uses !important deliberately to override per-element inline
* styles — the source's design uses these as "force this look on" hooks.
* ============================================================ */
/* Glassmorphism — translucent panel with backdrop blur. */
.glass {
background: rgba(17, 36, 54, 0.60) !important;
backdrop-filter: blur(16px) saturate(1.3);
-webkit-backdrop-filter: blur(16px) saturate(1.3);
}
/* Hover lift — small translate + shadow drop on hover. */
.hover-lift {
transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}
.hover-lift:hover {
transform: translateY(-3px);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45),
0 4px 12px rgba(0, 0, 0, 0.3);
}
/* Glow teal — teal halo. */
.glow-teal {
box-shadow: 0 0 18px rgba(0, 184, 151, 0.5),
0 0 6px rgba(0, 184, 151, 0.25) !important;
}
.glow-on-hover {
transition: box-shadow 0.2s ease !important;
}
.glow-on-hover:hover {
box-shadow: 0 0 22px rgba(0, 184, 151, 0.55),
0 4px 16px rgba(0, 0, 0, 0.35) !important;
}
/* ============================================================
* Skeleton loader — shimmer animation
* ============================================================ */
.skeleton {
background: linear-gradient(
90deg,
var(--bg-panel) 25%,
rgba(255, 255, 255, 0.07) 50%,
var(--bg-panel) 75%
);
background-size: 300% 100%;
animation: skeleton-sweep 1.5s ease-in-out infinite;
border-radius: 6px;
}
@keyframes skeleton-sweep {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* ============================================================
* Animated mesh background — three blurred drifting blobs
*
* Mount in the chassis when the user is authenticated:
*
*
* z-index 0; the app content sits above at z-index 1 via .content-layer.
* ============================================================ */
.mesh-bg {
position: fixed;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.blob {
position: absolute;
border-radius: 50%;
filter: blur(90px);
pointer-events: none;
}
.blob-1 {
width: 55vw; height: 55vw;
background: radial-gradient(circle, rgba(0, 184, 151, 0.13) 0%, transparent 70%);
top: -18vw; left: -12vw;
animation: blob-drift-1 16s ease-in-out infinite;
}
.blob-2 {
width: 45vw; height: 45vw;
background: radial-gradient(circle, rgba(14, 165, 233, 0.07) 0%, transparent 70%);
bottom: -14vw; right: -8vw;
animation: blob-drift-2 21s ease-in-out infinite;
}
.blob-3 {
width: 36vw; height: 36vw;
background: radial-gradient(circle, rgba(232, 213, 183, 0.06) 0%, transparent 70%);
top: 38%; left: 52%;
animation: blob-drift-3 26s ease-in-out infinite;
}
@keyframes blob-drift-1 {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(4vw, -3vw) scale(1.07); }
66% { transform: translate(-3vw, 5vw) scale(0.94); }
}
@keyframes blob-drift-2 {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(-5vw, 3vw) scale(1.05); }
66% { transform: translate(3vw, -4vw) scale(0.95); }
}
@keyframes blob-drift-3 {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-4vw, -3vw) scale(1.09); }
}
/* Content layer — sits above the mesh-bg. Wrap in this. */
.content-layer { position: relative; z-index: 1; }
/* ============================================================
* Misc keyframes — used by inline elements in pages
* ============================================================ */
@keyframes pulse-dot {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
@keyframes flow-dash {
0% { stroke-dashoffset: 20; }
100% { stroke-dashoffset: 0; }
}
@keyframes drift {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-4px); }
}
/* ============================================================
* Accessibility — reduced-motion preference
*
* Disable the GPU-heavy blob animation and the skeleton shimmer for
* users who opt out. Static visual identity is preserved; motion is
* lost.
* ============================================================ */
@media (prefers-reduced-motion: reduce) {
.blob { animation: none !important; }
.skeleton {
animation: none !important;
background: var(--bg-panel);
}
}