/* =========================================== HSE-INSPIRED DARK EXECUTIVE THEME Final version — no serif, no italic =========================================== */ /* =========================================== CSS VARIABLES =========================================== */ :root { /* Backgrounds */ --bg-primary: #0a0a0a; --bg-card: #111111; --bg-card-hover: #161616; --bg-elevated: #1a1a1a; --border-subtle: rgba(255, 255, 255, 0.06); --border-accent: rgba(212, 175, 55, 0.3); /* Text */ --text-primary: #f0ede8; --text-secondary: #8a8580; --text-muted: #5a5550; /* Accent Colors */ --accent-gold: #d4af37; --accent-gold-dim: rgba(212, 175, 55, 0.15); --accent-gold-glow: rgba(212, 175, 55, 0.08); --accent-green: #39d353; --accent-green-dim: rgba(57, 211, 83, 0.12); --accent-red: #ff6b6b; --accent-red-dim: rgba(255, 107, 107, 0.12); --accent-blue: #5b9cf5; --accent-blue-dim: rgba(91, 156, 245, 0.12); --accent-purple: #a78bfa; --accent-purple-dim: rgba(167, 139, 250, 0.12); --accent-orange: #f59e0b; --accent-orange-dim: rgba(245, 158, 11, 0.12); --accent-cyan: #22d3ee; --accent-cyan-dim: rgba(34, 211, 238, 0.12); /* Typography */ --font-display: 'Manrope', sans-serif; --font-mono: 'JetBrains Mono', monospace; --title-size: clamp(2rem, 5vw, 3.8rem); --h2-size: clamp(1.4rem, 3.5vw, 2.4rem); --h3-size: clamp(1rem, 2vw, 1.3rem); --body-size: clamp(0.8rem, 1.4vw, 1.05rem); --small-size: clamp(0.65rem, 1vw, 0.85rem); --mono-size: clamp(0.65rem, 1vw, 0.8rem); /* Spacing */ --content-gap: clamp(0.75rem, 2vw, 2rem); } /* =========================================== FONTS Import via HTML : =========================================== */ /* =========================================== TYPOGRAPHY =========================================== */ h1 { font-size: var(--title-size); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; color: var(--text-primary); } h1 .accent { color: var(--accent-gold); } /* Gold emphasis for key words — no italic */ .em { color: var(--accent-gold); } h2 { font-size: var(--h2-size); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: var(--content-gap); } h3 { font-size: var(--h3-size); font-weight: 600; line-height: 1.3; color: var(--text-primary); } p, li { font-size: var(--body-size); line-height: 1.6; color: var(--text-secondary); font-weight: 400; } .subtitle { font-size: clamp(0.9rem, 1.8vw, 1.2rem); color: var(--text-secondary); font-weight: 400; line-height: 1.5; max-width: 600px; } /* =========================================== TAGS & BADGES =========================================== */ .tag { display: inline-block; font-family: var(--font-mono); font-size: var(--small-size); color: var(--accent-gold); text-transform: uppercase; letter-spacing: 0.15em; padding: 0.35em 0.8em; border: 1px solid var(--border-accent); border-radius: 2px; margin-bottom: 1em; background: var(--accent-gold-dim); width: fit-content; } .signal-badge { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-mono); font-size: var(--small-size); padding: 0.3em 0.7em; border-radius: 4px; font-weight: 500; letter-spacing: 0.05em; } .signal-badge.gold { background: var(--accent-gold-dim); color: var(--accent-gold); } .signal-badge.green { background: var(--accent-green-dim); color: var(--accent-green); } .signal-badge.blue { background: var(--accent-blue-dim); color: var(--accent-blue); } .signal-badge.purple { background: var(--accent-purple-dim); color: var(--accent-purple); } .signal-badge.orange { background: var(--accent-orange-dim); color: var(--accent-orange); } .signal-badge.red { background: var(--accent-red-dim); color: var(--accent-red); } .signal-badge.cyan { background: var(--accent-cyan-dim); color: var(--accent-cyan); } /* =========================================== CARDS & GRIDS =========================================== */ .card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 8px; padding: clamp(1rem, 2vw, 1.5rem); transition: border-color 0.3s ease, background 0.3s ease; } .card:hover { border-color: var(--border-accent); background: var(--bg-card-hover); } .card h3 { margin-bottom: 0.4em; } .card p { font-size: var(--small-size); color: var(--text-muted); line-height: 1.5; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.75rem, 1.5vw, 1.25rem); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.75rem, 1.5vw, 1.25rem); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.75rem, 1.5vw, 1.25rem); } /* =========================================== CODE BLOCKS =========================================== */ .code-block { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 6px; padding: clamp(0.75rem, 1.5vw, 1.25rem); font-family: var(--font-mono); font-size: var(--mono-size); line-height: 1.7; color: var(--text-secondary); overflow: hidden; } .code-block .key { color: var(--accent-gold); } .code-block .val { color: var(--accent-green); } .code-block .comment { color: var(--text-muted); } /* =========================================== KPI BOXES =========================================== */ .kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.75rem, 1.5vw, 1.25rem); } .kpi { text-align: center; padding: clamp(1rem, 2vw, 1.5rem); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 8px; } .kpi-value { font-size: clamp(1.5rem, 3.5vw, 2.5rem); font-weight: 800; color: var(--accent-gold); line-height: 1.1; margin-bottom: 0.2em; } .kpi-label { font-size: var(--small-size); color: var(--text-muted); font-weight: 500; } /* =========================================== TIMELINE =========================================== */ .timeline { display: flex; flex-direction: column; gap: clamp(0.4rem, 1vw, 0.75rem); } .timeline-item { display: flex; align-items: center; gap: clamp(0.75rem, 1.5vw, 1.25rem); padding: clamp(0.6rem, 1vw, 0.9rem) clamp(0.8rem, 1.5vw, 1.25rem); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 6px; } .timeline-time { font-family: var(--font-mono); font-size: var(--small-size); color: var(--accent-gold); min-width: 5em; font-weight: 600; } /* =========================================== FLOW ARROWS =========================================== */ .flow-row { display: flex; align-items: center; gap: clamp(0.5rem, 1.5vw, 1.25rem); } .flow-arrow { color: var(--text-muted); font-size: clamp(1rem, 1.5vw, 1.3rem); flex-shrink: 0; } .flow-box { flex: 1; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 6px; padding: clamp(0.6rem, 1.2vw, 1rem) clamp(0.8rem, 1.5vw, 1.25rem); text-align: center; } .flow-box h3 { font-size: var(--small-size); font-family: var(--font-mono); color: var(--accent-gold); margin-bottom: 0.25em; } .flow-box p { font-size: var(--small-size); color: var(--text-muted); } /* =========================================== RULE LISTS =========================================== */ .rule-list { list-style: none; display: flex; flex-direction: column; gap: clamp(0.4rem, 0.8vw, 0.6rem); } .rule-list li { display: flex; align-items: flex-start; gap: 0.75em; font-size: var(--body-size); color: var(--text-secondary); } .rule-list li::before { content: '—'; color: var(--accent-gold); font-weight: 700; flex-shrink: 0; } .rule-list.do li::before { content: '✓'; color: var(--accent-green); } .rule-list.dont li::before { content: '✕'; color: var(--accent-red); } /* =========================================== TWO COLUMNS =========================================== */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; } .col-label { font-family: var(--font-mono); font-size: var(--small-size); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 0.75em; font-weight: 600; } .col-label.green { color: var(--accent-green); } .col-label.red { color: var(--accent-red); } /* =========================================== DIVIDER =========================================== */ .divider { height: 1px; background: linear-gradient(90deg, transparent, var(--border-accent), transparent); margin: var(--content-gap) 0; } /* =========================================== MONO LABELS =========================================== */ .slide-number { font-family: var(--font-mono); font-size: var(--small-size); color: var(--accent-gold); letter-spacing: 0.1em; font-weight: 500; } .slide-label { font-family: var(--font-mono); font-size: var(--small-size); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.15em; } /* =========================================== RESPONSIVE =========================================== */ @media (max-width: 768px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } .two-col { grid-template-columns: 1fr; } .kpi-row { grid-template-columns: repeat(2, 1fr); } .flow-row { flex-direction: column; } .flow-arrow { transform: rotate(90deg); } } @media (max-width: 500px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.2s !important; } }