/* ═══════════════════════════════════════════════════════════════════
HastyLabs — Shared Brand CSS
Link in before page styles.
═══════════════════════════════════════════════════════════════════ */
/* ── Brand Tokens ───────────────────────────────────────── */
:root {
--font-sans: system-ui, -apple-system, sans-serif;
--font-mono: 'ui-monospace', 'SFMono-Regular', 'Cascadia Code', 'Segoe UI Mono', monospace;
--weight-black: 800;
--weight-bold: 700;
--weight-medium: 500;
--weight-reg: 400;
--ls-hero: -1px;
--ls-logo: -0.3px;
--ls-ui: 1.2px;
--ls-badge: 3px;
--logo-size: 1.6rem;
--hl-bg: #0a0c0f;
--hl-bg-secondary: #0e1015;
--hl-bg-tertiary: #131720;
--hl-border: #1e2530;
--hl-border-bright: #2a3545;
--hl-green: #90EE90;
--hl-white: #FFFFFF;
--hl-grey: #808080;
--hl-amber: #ffaa00;
--hl-red: #ff4455;
--hl-cyan: #00d4ff;
--hl-cyan-dim: rgba(0,212,255,0.15);
--hl-text: #FFFFFF;
--hl-text-dim: #afafaf;
--hl-text-muted: #666666;
/* ── Experimental/Tron Effects ── */
--hl-grid-color: rgba(144, 238, 144, 0.02);
--hl-scanline-opacity: 0.08;
/* ── Palette Extensions (Premium Audit Theme) ── */
--hl-bg-secondary: #0e1015;
--hl-bg-tertiary: #131720;
--hl-border: #1e2530;
--hl-border-bright:#2a3545;
--hl-header-highlight: rgba(144, 238, 144, 0.05);
--hl-cyan: #00d4ff;
--hl-cyan-dim: rgba(0, 212, 255, 0.15);
--hl-amber: #ffaa00;
--hl-red: #ff4455;
}
/* ── Logo ─────────────────────────────────────────────────── */
/*
Usage:
HastyLabs
| QMS
*/
.hl-logo {
display: flex !important;
align-items: center !important;
text-decoration: none !important;
border-bottom: none !important;
box-shadow: none !important;
font-family: var(--font-sans) !important;
font-weight: var(--weight-black) !important;
font-size: var(--logo-size) !important;
letter-spacing: var(--ls-logo) !important;
line-height: 1 !important;
transition: opacity 0.2s;
}
.hl-logo:hover {
opacity: 0.85 !important;
text-decoration: none !important;
border-bottom: none !important;
box-shadow: none !important;
}
.hl-logo__hasty {
color: var(--hl-green) !important;
font-weight: var(--weight-black) !important;
text-decoration: none !important;
}
.hl-logo__labs {
color: var(--hl-white) !important;
font-weight: var(--weight-black) !important;
text-decoration: none !important;
}
.hl-logo__sep {
color: var(--hl-border-bright) !important;
font-weight: 300 !important;
font-size: 1.4rem !important;
margin: 0 12px !important;
opacity: 0.5 !important;
text-decoration: none !important;
}
.hl-logo__tool {
color: var(--hl-grey) !important;
font-family: var(--font-mono) !important;
font-weight: 600 !important;
font-size: 0.85rem !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
padding-top: 2px !important;
text-decoration: none !important;
}
body.hl-branded {
background: var(--hl-bg);
color: var(--hl-text);
font-family: var(--font-mono);
margin: 0;
padding: 0;
}
/* ── Links & Buttons ───────────────────────────────────────── */
.hl-link {
color: var(--hl-cyan);
text-decoration: none;
transition: color 0.2s;
}
.hl-link:hover {
color: var(--hl-white);
}
.hl-doc-link {
color: var(--hl-cyan);
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.5px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
}
/* ── Footer ───────────────────────────────────────────────── */
/*
Usage:
*/
.hl-footer {
padding: 16px;
border-top: 1px solid var(--hl-border);
font-size: 0.78rem;
color: var(--hl-green);
letter-spacing: 0.06em;
display: flex;
justify-content: center;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
/* ── UI Components (Shared) ───────────────────────────────── */
.hl-priority {
font-family: var(--font-mono);
font-size: 0.65rem;
letter-spacing: 1px;
padding: 2px 8px;
text-transform: uppercase;
border: 1px solid;
white-space: nowrap;
display: inline-block;
}
.hl-priority--critical { border-color: rgba(255,68,85,0.5); color: var(--hl-red); background: rgba(255,68,85,0.08); }
.hl-priority--high { border-color: rgba(255,170,0,0.5); color: var(--hl-amber); background: rgba(255,170,0,0.08); }
.hl-priority--medium { border-color: rgba(0,212,255,0.4); color: var(--hl-cyan); background: var(--hl-cyan-dim); }
.hl-priority--low { border-color: var(--hl-border); color: var(--hl-grey); }
.hl-doc-link {
font-family: var(--font-mono);
font-size: 0.65rem;
color: var(--hl-cyan);
text-decoration: none;
letter-spacing: 0.5px;
border-bottom: 1px dotted rgba(0,212,255,0.4);
white-space: nowrap;
transition: all 0.2s;
}
.hl-doc-link:hover { color: #fff; border-color: #fff; }
.hl-footer a {
color: var(--hl-green);
text-decoration: none;
opacity: 0.7;
transition: opacity 0.2s;
}
.hl-footer a:hover { opacity: 1; }
/* ── Shared UI Components ─────────────────────────────────── */
/* hl-card: The base 'glow' box used site-wide */
.hl-card {
background: var(--hl-bg-secondary);
border: 1px solid var(--hl-border);
padding: 24px;
position: relative;
overflow: hidden;
transition: all 0.2s ease;
}
.hl-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--hl-green), transparent);
opacity: 0.6;
z-index: 1;
}
.hl-card:hover {
border-color: var(--hl-border-bright);
background: var(--hl-bg-tertiary);
}
.hl-card:hover::before { opacity: 1; }
/* hl-hero: Larger version of card for page headers */
.hl-hero {
background: var(--hl-bg-secondary);
border: 1px solid var(--hl-border);
padding: 2.5rem 3rem;
margin-bottom: 2rem;
position: relative;
overflow: hidden;
transition: all 0.2s ease;
}
.hl-hero::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--hl-green), transparent);
opacity: 0.8;
z-index: 1;
}
.hl-hero::after {
content: attr(data-label);
position: absolute;
top: 1.2rem; right: 1.5rem;
font-size: 0.65rem;
color: var(--hl-text-muted);
letter-spacing: 2px;
}
/* hl-progress: Specialized flex container for status stats */
.hl-progress {
background: var(--hl-bg-secondary);
border: 1px solid var(--hl-border);
padding: 1.5rem 2rem;
display: flex;
gap: 3rem;
align-items: center;
flex-wrap: wrap;
}
/* hl-terminal: Command-line style block */
.hl-terminal {
background: #050505;
border: 1px solid var(--hl-border);
padding: 16px 20px;
font-family: var(--font-mono);
font-size: 0.82rem;
color: var(--hl-green);
overflow-x: auto;
border-radius: 4px;
}
.hl-terminal .prompt { color: var(--hl-text-muted); padding-right: 8px; }
/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--hl-bg); }
::-webkit-scrollbar-thumb { background: var(--hl-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #555; }