/*
* shared/static/css/capxone-components.css — CapXone Design System v2
* ══════════════════════════════════════════════════════════════════════
* Canonical component styles: logo heartbeat, sidebar, top-nav,
* cards, buttons, forms, and the shared footer.
* Requires capxone-tokens.css to be loaded first.
*/
/* ══════════════════════════════════════════════════════════
1. LOGO — CAPXONE with animated X in app accent colour
Works on: .sidebar-logo .brand-logo .logo .logo-text
HTML: CAPXONE
or old pattern: CAPXONE
══════════════════════════════════════════════════════════ */
/* Heartbeat keyframe — slow, gentle single-pulse with strong glow.
Uses --app-accent (set per app via data-app attribute on ).
Duration: 3.6s — calm, rhythmic beat. */
@keyframes cx-hb {
0%,100% { transform:scale(1); text-shadow:0 0 10px color-mix(in srgb, var(--app-accent) 50%, transparent),
0 0 24px color-mix(in srgb, var(--app-accent) 20%, transparent); }
50% { transform:scale(1.28); text-shadow:0 0 22px var(--app-accent),
0 0 48px color-mix(in srgb, var(--app-accent) 50%, transparent),
0 0 80px color-mix(in srgb, var(--app-accent) 22%, transparent); }
}
/* Fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
@keyframes cx-hb {
0%,100% { transform:scale(1); text-shadow:0 0 10px rgba(0,255,136,.45), 0 0 24px rgba(0,255,136,.18); }
50% { transform:scale(1.28); text-shadow:0 0 22px var(--app-accent), 0 0 48px rgba(0,255,136,.4); }
}
}
/* Logo base */
.cx-logo, .sidebar-logo, .brand-logo, .logo, .logo-text {
font-family: var(--disp);
letter-spacing: 4px;
color: var(--tx);
text-decoration: none;
display: inline-flex;
align-items: center;
}
/* The X — picks up per-app accent automatically */
.cx-logo .cx-x,
.cx-logo span,
.sidebar-logo span,
.brand-logo span,
.logo span,
.logo-text .lx,
.capx-x,
.capx-logo .capx-x {
color: var(--app-accent) !important;
display: inline-block;
animation: cx-hb 3.6s ease-in-out infinite;
transform-origin: center;
text-shadow: 0 0 16px color-mix(in srgb, var(--app-accent) 50%, transparent),
0 0 32px color-mix(in srgb, var(--app-accent) 20%, transparent);
}
/* Sidebar logo sizing */
.sidebar-logo {
font-size: 1.55rem;
padding: 22px 22px 0;
display: block;
}
/* ══════════════════════════════════════════════════════════
2. SIDEBAR — collapsible, dark/light, rounded pill active
New sb-* prefixed classes. Old .nav-item / .nav-sec kept
as aliases for backward compatibility with child templates.
══════════════════════════════════════════════════════════ */
.sidebar {
width: var(--sb-w, 260px);
min-height: 100vh;
background: var(--sb-bg, #1a1f2e);
display: flex;
flex-direction: column;
position: fixed;
left: 0; top: 0; bottom: 0;
z-index: 100;
transition: width .3s cubic-bezier(.4,0,.2,1);
overflow: hidden;
border-right: 1px solid rgba(255,255,255,.06);
backdrop-filter: blur(32px) saturate(1.6);
-webkit-backdrop-filter: blur(32px) saturate(1.6);
}
/* Section headers */
.sb-section,
.nav-sec {
padding: 18px 16px 8px 18px;
font-family: var(--mono);
font-size: .55rem;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--tx3);
white-space: nowrap;
overflow: hidden;
}
/* Nav items — rounded pill active state */
.sb-item,
.nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 0 16px;
height: var(--sb-item-h, 42px);
margin: 2px 10px;
color: var(--tx2);
font-family: var(--sans, 'Manrope', sans-serif);
font-size: .85rem;
cursor: pointer;
transition: all .2s;
border-radius: var(--sb-radius, 10px);
text-decoration: none;
position: relative;
white-space: nowrap;
overflow: hidden;
border: none;
background: none;
}
.sb-item:hover,
.nav-item:hover { color: var(--tx); background: rgba(255,255,255,.06); }
.sb-item.active,
.nav-item.active {
color: var(--app-accent);
background: color-mix(in srgb, var(--app-accent) 12%, transparent);
}
/* Icon inside nav item */
.sb-icon,
.nav-icon {
width: 22px; height: 22px;
display: flex; align-items: center; justify-content: center;
font-size: 1rem; flex-shrink: 0;
}
/* Badge */
.sb-badge,
.nav-badge {
margin-left: auto;
font-family: var(--mono);
font-size: .52rem;
padding: 2px 7px;
border-radius: 6px;
font-weight: 600;
letter-spacing: 1px;
}
/* Cursor glow follows accent */
.cursor, .cur {
background: var(--app-accent) !important;
box-shadow: 0 0 12px var(--app-accent) !important;
}
/* ══════════════════════════════════════════════════════════
3. GLASS CARDS — universal card component
══════════════════════════════════════════════════════════ */
.cx-card {
background: rgba(255,255,255,.038);
border: 1px solid rgba(255,255,255,.08);
border-radius: 14px;
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
transition: border-color .25s, box-shadow .25s, transform .15s;
}
.cx-card:hover {
border-color: color-mix(in srgb, var(--app-accent) 28%, transparent);
box-shadow: 0 0 32px color-mix(in srgb, var(--app-accent) 8%, transparent),
0 8px 32px rgba(0,0,0,.25);
transform: translateY(-1px);
}
/* Map existing service class names to cx-card behaviour */
.card, .panel {
background: var(--glass-bg-card, rgba(255,255,255,.038));
border: 1px solid var(--glass-border, rgba(255,255,255,.08));
border-radius: var(--radius, 14px);
backdrop-filter: blur(var(--glass-blur, 20px));
-webkit-backdrop-filter: blur(var(--glass-blur, 20px));
transition: border-color .25s, box-shadow .25s, transform .15s;
}
.card:hover, .panel:hover {
border-color: var(--glass-border-hover, rgba(255,255,255,.15));
box-shadow: 0 8px 32px rgba(0,0,0,.2);
transform: translateY(-1px);
}
/* ══════════════════════════════════════════════════════════
4. BUTTONS — accent-aware primary button
══════════════════════════════════════════════════════════ */
.cx-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 24px;
font-family: var(--mono);
font-size: .72rem;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
border-radius: var(--radius-sm);
cursor: pointer;
transition: box-shadow .2s, transform .12s;
border: none;
}
.cx-btn-primary {
background: var(--app-accent);
color: #000;
border-radius: 8px;
box-shadow: 0 0 20px color-mix(in srgb, var(--app-accent) 35%, transparent);
transition: box-shadow .25s, transform .12s;
}
.cx-btn-primary:hover {
box-shadow: 0 0 32px color-mix(in srgb, var(--app-accent) 55%, transparent),
0 0 60px color-mix(in srgb, var(--app-accent) 20%, transparent);
transform: translateY(-1px);
}
.cx-btn-ghost {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.1);
border-radius: 8px;
backdrop-filter: blur(8px);
color: var(--app-accent);
transition: all .2s;
}
.cx-btn-ghost:hover {
background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.18);
}
/* ══════════════════════════════════════════════════════════
5. FORM INPUTS — focus ring uses accent
══════════════════════════════════════════════════════════ */
input:focus, select:focus, textarea:focus,
.form-input:focus, .form-select:focus,
.inp:focus {
border-color: color-mix(in srgb, var(--app-accent) 55%, transparent) !important;
box-shadow: 0 0 0 3px var(--app-accent-d) !important;
outline: none !important;
}
/* ══════════════════════════════════════════════════════════
6. SHARED FOOTER — drop-in for every service
Include _footer.html partial from shared/templates/
══════════════════════════════════════════════════════════ */
.cx-footer {
border-top: 1px solid var(--bd2);
padding: 52px 60px 0;
background: var(--bg2);
position: relative;
overflow: hidden;
font-family: var(--sans);
}
/* Top glow line uses app accent */
.cx-footer::before {
content: "";
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 600px; height: 1px;
background: linear-gradient(90deg, transparent, var(--app-accent), transparent);
opacity: .4;
}
.cx-ft {
display: grid;
grid-template-columns: 280px 1fr;
gap: 52px;
margin-bottom: 38px;
padding-bottom: 38px;
border-bottom: 1px solid var(--bd);
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.cx-fb { display: flex; flex-direction: column; gap: 13px; }
.cx-flogo {
font-family: var(--disp);
font-size: 1.6rem;
letter-spacing: 6px;
line-height: 1;
color: var(--tx);
}
.cx-flogo .cx-x,
.cx-flogo span {
color: var(--grn); /* footer logo always green — brand identity */
text-shadow: 0 0 16px rgba(0,255,136,.45);
display: inline-block;
animation: cx-hb 2.4s ease-in-out infinite;
transform-origin: center;
}
.cx-ftag {
font-size: 11.5px;
color: var(--tx2);
line-height: 1.75;
max-width: 240px;
}
.cx-fbadge {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--grn-d);
border: 1px solid rgba(0,255,136,.2);
padding: 3px 10px;
border-radius: 100px;
font-family: var(--mono);
font-size: .5rem;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--grn);
width: fit-content;
}
.cx-fbadge-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--grn);
box-shadow: 0 0 6px var(--grn);
animation: cx-blink 2s step-end infinite;
}
@keyframes cx-blink { 0%,100%{opacity:1} 50%{opacity:0} }
.cx-fcols {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 26px;
}
.cx-fcol h4 {
font-family: var(--mono);
font-size: .5rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 14px;
padding-bottom: 7px;
border-bottom: 1px solid var(--bd);
}
/* Column header accent colours — fixed, independent of app accent */
.cx-fcol:nth-child(1) h4 { color: var(--yel2); border-bottom-color: rgba(255,229,0,.2); }
.cx-fcol:nth-child(2) h4 { color: var(--cyn); border-bottom-color: rgba(0,229,255,.2); }
.cx-fcol:nth-child(3) h4 { color: var(--grn); border-bottom-color: rgba(0,255,136,.2); }
.cx-fcol:nth-child(4) h4 { color: var(--pnk); border-bottom-color: rgba(255,45,85,.2); }
.cx-fcol a {
display: flex;
align-items: center;
gap: 5px;
font-size: 11px;
color: var(--tx2);
margin-bottom: 8px;
transition: color .15s, gap .15s;
text-decoration: none;
}
.cx-fcol a::before {
content: "→";
font-size: 10px;
opacity: 0;
transition: opacity .15s, transform .15s;
transform: translateX(-4px);
}
.cx-fcol:nth-child(1) a:hover { color: var(--yel2); }
.cx-fcol:nth-child(2) a:hover { color: var(--cyn); }
.cx-fcol:nth-child(3) a:hover { color: var(--grn); }
.cx-fcol:nth-child(4) a:hover { color: var(--pnk); }
.cx-fcol a:hover { gap: 8px; }
.cx-fcol a:hover::before { opacity: .6; transform: translateX(0); }
.cx-fbot {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;
padding: 16px 0 20px;
max-width: 1200px;
margin: 0 auto;
}
.cx-fcopy {
font-family: var(--mono);
font-size: .5rem;
color: var(--tx3);
letter-spacing: 1px;
}
.cx-fstatus {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--mono);
font-size: .5rem;
color: var(--tx3);
}
.cx-fstatus-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--grn);
box-shadow: 0 0 6px var(--grn);
animation: cx-blink 2s step-end infinite;
}
.cx-fdisc {
font-family: var(--mono);
font-size: .5rem;
color: var(--tx3);
max-width: 480px;
line-height: 1.6;
opacity: .7;
}
/* Light theme footer */
/* ── Light theme: softer glow on all X logos ── */
[data-theme="light"] .cx-logo .cx-x,
[data-theme="light"] .cx-logo span,
[data-theme="light"] .sidebar-logo span,
[data-theme="light"] .brand-logo span,
[data-theme="light"] .logo span,
[data-theme="light"] .capx-x {
text-shadow: 0 0 12px color-mix(in srgb, var(--app-accent) 40%, transparent),
0 0 28px color-mix(in srgb, var(--app-accent) 15%, transparent);
}
[data-theme="light"] .sidebar {
background: rgba(255,255,255,.82);
backdrop-filter: blur(32px) saturate(1.4);
-webkit-backdrop-filter: blur(32px) saturate(1.4);
border-right: 1px solid rgba(0,0,0,.06);
box-shadow: 2px 0 12px rgba(0,0,0,.04);
}
[data-theme="light"] .topbar {
background: rgba(255,255,255,.86);
backdrop-filter: blur(32px) saturate(1.4);
-webkit-backdrop-filter: blur(32px) saturate(1.4);
border-bottom: 1px solid rgba(0,0,0,.06);
}
[data-theme="light"] .sb-item:hover,
[data-theme="light"] .nav-item:hover {
background: rgba(0,0,0,.04);
}
[data-theme="light"] .sb-item.active,
[data-theme="light"] .nav-item.active {
color: var(--app-accent);
background: color-mix(in srgb, var(--app-accent) 10%, transparent);
}
[data-theme="light"] .cx-card, [data-theme="light"] .card {
background: rgba(255,255,255,.72);
border-color: rgba(0,0,0,.06);
box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
[data-theme="light"] .cx-card:hover, [data-theme="light"] .card:hover {
border-color: rgba(0,0,0,.12);
box-shadow: 0 4px 24px rgba(0,0,0,.08);
}
[data-theme="light"] .sb-user-avatar,
[data-theme="light"] .user-avatar {
color: #fff;
}
[data-theme="light"] .sb-separator {
background: rgba(0,0,0,.08);
}
[data-theme="light"] .sb-user {
background: rgba(0,0,0,.04);
}
[data-theme="light"] .sb-search-input {
background: rgba(0,0,0,.04);
border-color: rgba(0,0,0,.1);
}
[data-theme="light"] .sb-toggle {
background: rgba(0,0,0,.05);
}
[data-theme="light"] .modal {
background: rgba(255,255,255,.92);
border-color: rgba(0,0,0,.08);
}
[data-theme="light"] .sb-item.active,
[data-theme="light"] .nav-item.active {
background: var(--app-accent-d);
}
[data-theme="light"] #cx-toast {
background: rgba(255,255,255,.92);
border-color: rgba(0,0,0,.08);
color: var(--tx);
}
[data-theme="light"] .cx-footer { background: var(--bg2); }
[data-theme="light"] .cx-flogo .cx-x,
[data-theme="light"] .cx-flogo span { text-shadow: 0 0 10px color-mix(in srgb, var(--grn) 35%, transparent); }
/* ══════════════════════════════════════════════════════════
7. RESPONSIVE — mobile footer stack
══════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
.cx-footer { padding: 40px 20px 0; }
.cx-ft { grid-template-columns: 1fr; gap: 32px; }
.cx-fcols { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.cx-fbot { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 480px) {
.cx-fcols { grid-template-columns: 1fr 1fr; gap: 16px; }
.cx-flogo { font-size: 1.3rem; }
}
/* ══════════════════════════════════════════════════════════
8. TOPBAR / FLOATING NAV (pill nav used on main pages)
══════════════════════════════════════════════════════════ */
.cx-topbar {
position: fixed;
top: 16px;
left: 50%;
transform: translateX(-50%);
z-index: 200;
display: flex;
align-items: center;
gap: 32px;
padding: 10px 20px;
background: var(--nav);
border: 1px solid var(--bd2);
border-radius: 100px;
backdrop-filter: blur(32px) saturate(1.6) brightness(1.02);
-webkit-backdrop-filter: blur(32px) saturate(1.6) brightness(1.02);
}
.cx-topbar .cx-logo { font-size: 1.3rem; letter-spacing: 2px; }
/* ══════════════════════════════════════════════════════════
9. PAGE TITLE BLOCK — "APP: Page Title"
Usage:
Screener
Dashboard
══════════════════════════════════════════════════════════ */
.cx-page-title {
display: flex;
align-items: baseline;
gap: 8px;
font-family: var(--disp);
letter-spacing: 2px;
}
.cx-app-name {
font-size: 1.1rem;
color: var(--app-accent);
text-shadow: 0 0 14px color-mix(in srgb, var(--app-accent) 40%, transparent);
}
.cx-page-name {
font-size: 1.1rem;
color: var(--tx2);
}
.cx-page-sep { color: var(--tx3); font-size: .9rem; }