/**
* rooslabs-theme.css
* © 2025 Gary Roos
*
* Drop-in theme override for rippleofperception.netlify.app
* Load AFTER styles.css and ripple-enhanced.css
*
* How to apply:
*
*
*
*
* This file remaps every color, font, radius, and surface
* to the rooslabs dark editorial aesthetic.
* No HTML changes required.
*/
/* =============================================
GOOGLE FONTS IMPORT
(Add this to if not already present)
============================================= */
/* =============================================
CORE TOKENS — override all root variables
============================================= */
:root {
/* brand */
--color-primary: #b8832a;
--color-primary-dark: #9a6d22;
--color-secondary: #8a6520;
/* backgrounds */
--bg-gradient-start: #0e0d0b;
--bg-gradient-end: #141310;
--bg-primary: #141310;
--bg-secondary: #1a1815;
--bg-overlay: rgba(20, 19, 16, 0.96);
--bg-header: rgba(10, 10, 8, 0.6);
/* text */
--text-primary: #ddd8cc;
--text-secondary: #c8c3b8;
--text-muted: #a8a39c;
--text-light: #6b6560;
--text-white: #ddd8cc;
/* borders */
--border-color: #2a2720;
--border-light: #332f2a;
/* semantic — muted to match palette */
--color-success: #5a8a5a;
--color-success-bg: #1a231a;
--color-success-border: #3a5a3a;
--color-success-text: #8ab88a;
--color-error: #8a4040;
--color-error-bg: #231a1a;
--color-error-border: #5a3030;
--color-error-text: #c88a8a;
--color-error-light-bg: #2a1a1a;
--color-warning: #b8832a;
--color-warning-bg: #231e14;
--color-warning-border: #b8832a;
--color-warning-text: #d4a85a;
--color-info: #4a7a8a;
--color-info-bg: #141e23;
--color-info-border: #2a5a6a;
--color-info-text: #7aaabb;
/* step colors — all shifted to amber-warm palette */
--color-step-1: #b85a2a;
--color-step-2a: #b8832a;
--color-step-2b: #8a6a3a;
--color-step-2c: #4a6a8a;
--color-step-2d: #3a7a6a;
--color-step-3: #c8a030;
--color-step-4: #4a7a4a;
--color-step-5: #b8732a;
--color-step-6: #4a4a3a;
--color-step-7: #2a7a6a;
--color-step-feedback: #6a4a7a;
/* shadows */
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
--shadow-md: 0 5px 15px rgba(0, 0, 0, 0.6);
--shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.7);
--shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.8);
/* legacy aliases */
--primary-color: var(--color-primary);
--primary-dark: var(--color-primary-dark);
--secondary-color: var(--color-secondary);
}
/* =============================================
BASE & BODY
============================================= */
body {
font-family: 'IBM Plex Mono', monospace !important;
background: var(--bg-gradient-start) !important;
color: var(--text-primary) !important;
font-size: 17px !important;
font-weight: 300 !important;
line-height: 1.8 !important;
}
/* grain overlay */
body::before {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 9998;
opacity: 0.35;
}
/* =============================================
TYPOGRAPHY
============================================= */
h1, h2, h3, h4, h5, h6 {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 400 !important;
color: var(--text-primary) !important;
letter-spacing: -0.01em !important;
}
p, li, span, label, td, th {
font-family: 'IBM Plex Mono', monospace !important;
}
/* =============================================
HEADER
============================================= */
.header {
background: rgba(14, 13, 11, 0.7) !important;
border: 1px solid var(--border-color) !important;
border-radius: 0 !important;
backdrop-filter: blur(12px) !important;
color: var(--text-primary) !important;
}
.header h1 {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 300 !important;
font-size: clamp(2rem, 5vw, 3rem) !important;
letter-spacing: -0.02em !important;
color: var(--text-primary) !important;
}
.header p {
color: var(--text-muted) !important;
font-size: 0.9em !important;
}
/* =============================================
NAVIGATION BUTTONS
============================================= */
.view-btn {
background: var(--bg-secondary) !important;
color: var(--text-muted) !important;
border: 1px solid var(--border-color) !important;
border-radius: 0 !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 10px !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
font-weight: 400 !important;
backdrop-filter: none !important;
box-shadow: none !important;
transition: border-color 0.2s, color 0.2s !important;
}
.view-btn:hover {
background: var(--bg-secondary) !important;
color: var(--text-primary) !important;
border-color: var(--color-primary) !important;
transform: none !important;
box-shadow: none !important;
}
.view-btn.active {
background: transparent !important;
color: var(--color-primary) !important;
border-color: var(--color-primary) !important;
transform: none !important;
box-shadow: none !important;
}
.view-btn::before { display: none !important; }
/* =============================================
STEP CARDS
============================================= */
.step-card {
background: var(--bg-secondary) !important;
border: 1px solid var(--border-color) !important;
border-left-width: 3px !important;
border-radius: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
transition: border-color 0.2s !important;
}
.step-card:hover {
transform: none !important;
box-shadow: none !important;
border-color: var(--color-primary) !important;
}
.step-title {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: 1.3rem !important;
font-weight: 400 !important;
color: var(--text-primary) !important;
}
.step-summary {
color: var(--text-muted) !important;
font-size: 14px !important;
}
.step-emoji {
filter: grayscale(0.3) !important;
}
/* =============================================
DETAILED VIEWS
============================================= */
.detailed-view {
background: var(--bg-secondary) !important;
border: 1px solid var(--border-color) !important;
border-radius: 0 !important;
box-shadow: none !important;
color: var(--text-primary) !important;
}
.step-content h3 {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: 1.8rem !important;
color: var(--text-primary) !important;
border-bottom: 1px solid var(--border-color) !important;
padding-bottom: 0.8rem !important;
margin-bottom: 1.5rem !important;
}
.step-content p,
.step-content li {
color: var(--text-muted) !important;
font-size: 16px !important;
line-height: 1.9 !important;
}
.step-content strong {
color: var(--text-primary) !important;
font-weight: 500 !important;
}
/* =============================================
CONTENT SECTION BLOCKS
============================================= */
.psychological-models,
.examples-section,
.research-callout,
.digital-tools,
.practical-applications,
.warning-note,
.notes-section,
.notes-controls {
background: var(--bg-primary) !important;
border-radius: 0 !important;
border-left-color: var(--color-primary) !important;
color: var(--text-muted) !important;
}
.psychological-models { border-left-color: #6a4a7a !important; }
.examples-section { border-left-color: #4a7a4a !important; }
.research-callout { border-left-color: var(--color-primary) !important; }
.digital-tools { border-left-color: #4a7a8a !important; }
.warning-note { border-left-color: #8a4040 !important; }
/* =============================================
WHY THIS MATTERS
============================================= */
.why-matters,
body.dark-mode .why-matters,
#detailedSections .why-matters,
body.dark-mode #detailedSections .detailed-view .step-content .why-matters,
.step7 .why-matters,
body.dark-mode .step7 .why-matters,
body.dark-mode .detailed-view.step7 .why-matters {
background: #1a1612 !important;
border: 1px solid var(--color-primary) !important;
border-left-width: 3px !important;
border-radius: 0 !important;
color: var(--text-primary) !important;
box-shadow: none !important;
}
.why-matters::before,
body.dark-mode .why-matters::before {
background: var(--bg-primary) !important;
border: 1px solid var(--color-primary) !important;
box-shadow: none !important;
animation: none !important;
}
.why-matters h4,
body.dark-mode .why-matters h4,
body.dark-mode #detailedSections .detailed-view .step-content .why-matters h4 {
font-family: 'Cormorant Garamond', Georgia, serif !important;
color: var(--color-primary) !important;
font-size: 1.1rem !important;
font-weight: 400 !important;
}
.why-matters p,
.why-matters li,
body.dark-mode .why-matters p,
body.dark-mode .why-matters li,
body.dark-mode #detailedSections .detailed-view .step-content .why-matters p {
color: var(--text-muted) !important;
font-size: 16px !important;
}
.why-matters strong,
body.dark-mode .why-matters strong {
color: var(--text-primary) !important;
}
/* =============================================
COMMON PITFALLS
============================================= */
.common-pitfalls,
body.dark-mode .common-pitfalls,
body.dark-mode .step7 .common-pitfalls,
body.dark-mode #detailedSections .detailed-view .step-content .common-pitfalls {
background: #1a1612 !important;
border: 1px solid #8a6530 !important;
border-left-width: 3px !important;
border-radius: 0 !important;
color: var(--text-primary) !important;
box-shadow: none !important;
}
.common-pitfalls::before,
body.dark-mode .common-pitfalls::before {
background: var(--bg-primary) !important;
border: 1px solid #8a6530 !important;
box-shadow: none !important;
animation: none !important;
}
.common-pitfalls h4,
body.dark-mode .common-pitfalls h4 {
font-family: 'Cormorant Garamond', Georgia, serif !important;
color: #c8a050 !important;
font-weight: 400 !important;
}
.pitfall-list li,
body.dark-mode .pitfall-list li,
body.dark-mode .step7 .common-pitfalls .pitfall-list li {
background: var(--bg-primary) !important;
border: 1px solid var(--border-color) !important;
border-radius: 0 !important;
color: var(--text-muted) !important;
}
.pitfall-list li strong,
body.dark-mode .pitfall-list li strong {
color: var(--text-primary) !important;
}
.pitfall-list li p,
body.dark-mode .pitfall-list li p {
color: var(--text-muted) !important;
}
/* =============================================
GLOSSARY
============================================= */
.glossary-item,
.glossary-expanded .glossary-item,
body.dark-mode .glossary-expanded .glossary-item {
background: var(--bg-secondary) !important;
border: 1px solid var(--border-color) !important;
border-left: 3px solid var(--color-primary) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.glossary-expanded .glossary-item:hover,
body.dark-mode .glossary-expanded .glossary-item:hover {
border-color: var(--color-primary) !important;
transform: none !important;
box-shadow: none !important;
}
.glossary-term,
body.dark-mode .glossary-term {
font-family: 'Cormorant Garamond', Georgia, serif !important;
color: var(--text-primary) !important;
font-weight: 400 !important;
font-size: 1.1rem !important;
}
.glossary-definition,
body.dark-mode .glossary-definition {
color: var(--text-muted) !important;
font-size: 15px !important;
}
.glossary-definition strong,
body.dark-mode .glossary-definition strong {
color: var(--color-primary) !important;
}
/* =============================================
QUICK REFERENCE
============================================= */
.quick-reference-guide,
body.dark-mode .quick-reference-guide {
background: var(--bg-secondary) !important;
border: 1px solid var(--border-color) !important;
border-radius: 0 !important;
box-shadow: none !important;
color: var(--text-primary) !important;
}
.quick-reference-guide h2,
body.dark-mode .quick-reference-guide h2 {
font-family: 'Cormorant Garamond', Georgia, serif !important;
color: var(--color-primary) !important;
}
.quick-reference-guide h3,
body.dark-mode .quick-reference-guide h3 {
font-family: 'Cormorant Garamond', Georgia, serif !important;
color: var(--text-primary) !important;
border-bottom-color: var(--border-color) !important;
}
.emergency-steps,
body.dark-mode .emergency-steps {
background: #1a1410 !important;
border: 1px solid #5a3a2a !important;
border-radius: 0 !important;
}
.emergency-step,
body.dark-mode .emergency-step {
background: var(--bg-primary) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.step-number,
body.dark-mode .step-number {
background: var(--color-primary) !important;
color: var(--bg-primary) !important;
border-radius: 0 !important;
box-shadow: none !important;
font-family: 'IBM Plex Mono', monospace !important;
}
.step-content strong,
body.dark-mode .step-content strong {
color: var(--text-primary) !important;
}
.micro-action,
body.dark-mode .micro-action {
color: var(--text-muted) !important;
}
.remember-box,
body.dark-mode .remember-box {
background: #141a14 !important;
border: 1px solid #3a5a3a !important;
border-radius: 0 !important;
color: var(--text-primary) !important;
}
.sentence-starters,
body.dark-mode .sentence-starters {
background: var(--bg-primary) !important;
border: 1px solid var(--border-color) !important;
border-radius: 0 !important;
}
.starter-category strong {
color: var(--color-primary) !important;
}
/* =============================================
OUTCOME SECTIONS
============================================= */
.breaks-cycles,
body.dark-mode .breaks-cycles {
background: #1f1414 !important;
border-left-color: #8a4040 !important;
border-radius: 0 !important;
color: var(--text-primary) !important;
}
.creates-space,
body.dark-mode .creates-space {
background: #141f14 !important;
border-left-color: #4a7a4a !important;
border-radius: 0 !important;
color: var(--text-primary) !important;
}
/* =============================================
APPLICATIONS GRID
============================================= */
.applications-grid > div,
.practical-applications {
background: var(--bg-primary) !important;
border-left-color: var(--color-primary) !important;
border-radius: 0 !important;
}
.applications-grid strong {
color: var(--text-primary) !important;
}
.applications-grid p {
color: var(--text-muted) !important;
}
/* =============================================
NOTES / JOURNAL
============================================= */
.notes-section,
body.dark-mode .notes-section {
background: var(--bg-secondary) !important;
border-left-color: var(--color-primary) !important;
border-radius: 0 !important;
}
.notes-title,
body.dark-mode .notes-title {
font-family: 'Cormorant Garamond', Georgia, serif !important;
color: var(--text-primary) !important;
font-weight: 400 !important;
}
.notes-textarea,
body.dark-mode .notes-textarea,
body.dark-mode #allNotesSection textarea,
body.dark-mode #allNotesContainer textarea,
textarea {
background: var(--bg-primary) !important;
color: var(--text-primary) !important;
border: 1px solid var(--border-color) !important;
border-radius: 0 !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 13px !important;
}
.notes-textarea:focus,
body.dark-mode .notes-textarea:focus {
border-color: var(--color-primary) !important;
box-shadow: none !important;
outline: none !important;
}
textarea::placeholder,
body.dark-mode textarea::placeholder,
.notes-textarea::placeholder,
body.dark-mode .notes-textarea::placeholder {
color: var(--text-light) !important;
opacity: 1 !important;
}
/* journal cards */
.journal-card,
.notes-card,
.notes-summary,
.notes-empty,
.empty-notes,
.notes-panel,
.notes-list,
body.dark-mode .journal-card,
body.dark-mode .notes-card,
body.dark-mode .notes-summary,
body.dark-mode .notes-empty,
body.dark-mode .empty-notes,
body.dark-mode #allNotesContainer > *,
body.dark-mode #allNotesSection .detailed-view {
background: var(--bg-secondary) !important;
color: var(--text-primary) !important;
border: 1px solid var(--border-color) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.note-content-display {
background: var(--bg-primary) !important;
color: var(--text-primary) !important;
border: 1px solid var(--border-color) !important;
border-radius: 0 !important;
}
.empty-notes-message {
background: var(--bg-secondary) !important;
border: 1px dashed var(--border-light) !important;
border-radius: 0 !important;
color: var(--text-muted) !important;
}
.notes-controls {
background: var(--bg-primary) !important;
border-left-color: var(--color-primary) !important;
border-radius: 0 !important;
}
/* =============================================
BUTTONS
============================================= */
.save-note-btn,
body.dark-mode #allNotesSection .save-note-btn {
background: var(--color-primary) !important;
color: var(--bg-primary) !important;
border: none !important;
border-radius: 0 !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
transition: background 0.2s !important;
}
.save-note-btn:hover {
background: var(--color-primary-dark) !important;
}
.back-btn {
background: transparent !important;
color: var(--text-muted) !important;
border: 1px solid var(--border-color) !important;
border-radius: 0 !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
transition: border-color 0.2s, color 0.2s !important;
}
.back-btn:hover {
background: transparent !important;
border-color: var(--color-primary) !important;
color: var(--color-primary) !important;
}
/* =============================================
PASSWORD / LOGIN
============================================= */
.password-overlay {
background: var(--bg-gradient-start) !important;
}
.password-box {
background: var(--bg-secondary) !important;
border: 1px solid var(--border-color) !important;
border-radius: 0 !important;
box-shadow: var(--shadow-xl) !important;
}
.password-box h2 {
font-family: 'Cormorant Garamond', Georgia, serif !important;
color: var(--text-primary) !important;
font-weight: 400 !important;
}
.password-box p {
color: var(--text-muted) !important;
}
.password-input {
background: var(--bg-primary) !important;
color: var(--text-primary) !important;
border: 1px solid var(--border-color) !important;
border-radius: 0 !important;
font-family: 'IBM Plex Mono', monospace !important;
}
.password-input:focus {
border-color: var(--color-primary) !important;
box-shadow: none !important;
}
.password-btn {
background: var(--color-primary) !important;
color: var(--bg-primary) !important;
border-radius: 0 !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
}
.password-btn:hover {
background: var(--color-primary-dark) !important;
}
.copyright-small {
color: var(--text-muted) !important;
}
/* =============================================
PRE-LOGIN
============================================= */
.pre-login-section {
background: var(--bg-gradient-start) !important;
}
.pre-login-box {
background: var(--bg-secondary) !important;
border: 1px solid var(--border-color) !important;
border-radius: 0 !important;
box-shadow: var(--shadow-xl) !important;
}
.pre-login-box h2 {
font-family: 'Cormorant Garamond', Georgia, serif !important;
color: var(--text-primary) !important;
font-weight: 400 !important;
}
.intro-text,
.request-access-text {
color: var(--text-muted) !important;
}
.pre-login-form-container {
background: var(--bg-primary) !important;
border: 1px solid var(--border-color) !important;
border-radius: 0 !important;
}
.submit-access-btn {
background: var(--color-primary) !important;
border-radius: 0 !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
}
.submit-access-btn:hover {
background: var(--color-primary-dark) !important;
transform: none !important;
}
/* =============================================
SEARCH
============================================= */
.search-input-wrapper {
background: rgba(20, 19, 16, 0.8) !important;
border: 1px solid var(--border-color) !important;
border-radius: 0 !important;
backdrop-filter: none !important;
}
.search-input-wrapper:focus-within {
background: var(--bg-secondary) !important;
border-color: var(--color-primary) !important;
box-shadow: none !important;
outline: none !important;
}
.search-input {
color: var(--text-primary) !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 13px !important;
}
.search-input::placeholder {
color: var(--text-light) !important;
}
.search-shortcut {
background: var(--bg-primary) !important;
color: var(--text-muted) !important;
border-radius: 0 !important;
}
.search-results,
body.dark-mode .search-results {
background: var(--bg-secondary) !important;
border: 1px solid var(--border-color) !important;
border-radius: 0 !important;
box-shadow: var(--shadow-xl) !important;
}
.search-result-item,
body.dark-mode .search-result-item {
border-bottom-color: var(--border-color) !important;
font-family: 'IBM Plex Mono', monospace !important;
}
.search-result-item:hover,
.search-result-item.selected,
body.dark-mode .search-result-item:hover,
body.dark-mode .search-result-item.selected {
background: var(--bg-primary) !important;
}
.result-title,
body.dark-mode .result-title {
color: var(--text-primary) !important;
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: 1.05rem !important;
font-weight: 400 !important;
}
.result-summary,
body.dark-mode .result-summary {
color: var(--text-muted) !important;
font-size: 13px !important;
}
.result-type,
body.dark-mode .result-type {
background: var(--bg-primary) !important;
color: var(--text-muted) !important;
border-radius: 0 !important;
font-size: 9px !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
}
mark,
body.dark-mode mark {
background: #3a2a10 !important;
color: var(--color-primary) !important;
border-radius: 0 !important;
}
/* scrollbar */
.search-results::-webkit-scrollbar-track,
body.dark-mode .search-results::-webkit-scrollbar-track {
background: var(--bg-primary) !important;
border-radius: 0 !important;
}
.search-results::-webkit-scrollbar-thumb,
body.dark-mode .search-results::-webkit-scrollbar-thumb {
background: var(--border-light) !important;
border-radius: 0 !important;
}
/* =============================================
NAVIGATION DOTS
============================================= */
.navigation {
background: var(--bg-secondary) !important;
border: 1px solid var(--border-color) !important;
border-radius: 0 !important;
backdrop-filter: none !important;
box-shadow: none !important;
}
.nav-dot {
border-radius: 0 !important;
}
/* =============================================
PROGRESS BAR
============================================= */
.progress-bar {
background: var(--color-primary) !important;
}
/* =============================================
FORMS (contact, admin inputs)
============================================= */
.contact-form {
background: var(--bg-secondary) !important;
border: 1px solid var(--border-color) !important;
border-radius: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
.form-group label {
color: var(--text-muted) !important;
font-size: 11px !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
font-weight: 400 !important;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
background: var(--bg-primary) !important;
color: var(--text-primary) !important;
border: 1px solid var(--border-color) !important;
border-radius: 0 !important;
font-family: 'IBM Plex Mono', monospace !important;
box-shadow: none !important;
}
.form-group input:focus,
.form-group textarea:focus {
border-color: var(--color-primary) !important;
box-shadow: none !important;
transform: none !important;
}
.contact-submit-btn {
background: var(--color-primary) !important;
border-radius: 0 !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
box-shadow: none !important;
}
.contact-submit-btn:hover {
background: var(--color-primary-dark) !important;
transform: none !important;
box-shadow: none !important;
}
.contact-submit-btn::before { display: none !important; }
/* =============================================
ADMIN PANEL
============================================= */
.stat-card {
background: var(--bg-secondary) !important;
border: 1px solid var(--border-color) !important;
border-radius: 0 !important;
}
.stat-value {
color: var(--color-primary) !important;
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: 2.5rem !important;
}
.stat-label {
color: var(--text-muted) !important;
font-size: 10px !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
}
.admin-btn,
.admin-btn-small {
background: var(--color-primary) !important;
border-radius: 0 !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 11px !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
}
.admin-btn:hover { background: var(--color-primary-dark) !important; }
.admin-btn.danger { background: #8a4040 !important; }
.admin-btn.danger:hover { background: #6a3030 !important; }
.admin-table {
background: var(--bg-secondary) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.admin-table thead {
background: var(--bg-primary) !important;
color: var(--text-muted) !important;
}
.admin-table th {
font-size: 10px !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
font-weight: 400 !important;
}
.admin-table th,
.admin-table td {
border-bottom-color: var(--border-color) !important;
color: var(--text-primary) !important;
}
.admin-table tbody tr:hover {
background: var(--bg-primary) !important;
}
.admin-input {
background: var(--bg-primary) !important;
color: var(--text-primary) !important;
border: 1px solid var(--border-color) !important;
border-radius: 0 !important;
font-family: 'IBM Plex Mono', monospace !important;
}
.admin-input:focus {
border-color: var(--color-primary) !important;
outline: none !important;
}
/* =============================================
FOOTER
============================================= */
.footer {
border-top: 1px solid var(--border-color) !important;
color: var(--text-muted) !important;
}
/* =============================================
UTILITY & ENHANCED DIVIDER
============================================= */
.enhanced-divider {
background: linear-gradient(90deg, transparent, var(--color-primary), transparent) !important;
opacity: 0.4 !important;
}
/* =============================================
ANIMATION OVERRIDE — strip bouncy, keep fade
============================================= */
@keyframes floatIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pulseBorder {
0%, 100% { box-shadow: 0 0 0 0 rgba(184, 131, 42, 0); }
70% { box-shadow: 0 0 0 6px rgba(184, 131, 42, 0); }
}
/* =============================================
ACCESSIBILITY
============================================= */
.view-btn:focus-visible,
.step-card:focus-visible,
.contact-submit-btn:focus-visible {
outline: 2px solid var(--color-primary) !important;
outline-offset: 2px !important;
}
/* =============================================
AUTH FORMS
============================================= */
.auth-link {
color: var(--color-primary) !important;
}
.auth-link:hover {
color: var(--color-primary-dark) !important;
}
.auth-switch-text {
color: var(--text-muted) !important;
}
/* =============================================
TWO-TIER GROUPED NAVIGATION
============================================= */
.nav-groups {
display: flex;
gap: 0;
margin-bottom: 0;
flex-wrap: wrap;
align-items: flex-start;
border-bottom: 1px solid var(--border-color);
min-height: 0 !important;
}
.group-btn {
padding: 10px 28px;
border: none;
border-bottom: 2px solid transparent;
border-right: 1px solid var(--border-color);
background: transparent;
color: var(--text-muted);
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
cursor: pointer;
transition: color 0.2s, border-color 0.2s;
font-weight: 400;
flex: 0 0 auto;
width: auto;
display: inline-block;
margin-bottom: -1px;
}
.group-btn:hover {
color: var(--text-primary);
border-bottom-color: var(--color-primary);
background: transparent;
}
.group-btn.active {
background: transparent;
color: var(--color-primary);
border-bottom: 2px solid var(--color-primary);
}
.sub-nav {
border-top: none !important;
margin-bottom: 24px !important;
padding-top: 12px !important;
border-bottom: 1px solid var(--border-color) !important;
padding-bottom: 12px !important;
}
.view-toggle.sub-nav {
display: none;
min-height: 0 !important;
}
.view-toggle.sub-nav.active-sub {
display: flex;
}
============================================= */
.admin-table tbody tr.current-user {
background: #1a1a14 !important;
}
.admin-table tbody tr.admin-user {
background: #1a1510 !important;
}
.admin-table tbody tr.current-user.admin-user {
background: #1a1510 !important;
}
/* =============================================
BADGE OVERRIDES
============================================= */
.badge {
border-radius: 0 !important;
font-family: 'IBM Plex Mono', monospace !important;
font-size: 9px !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
padding: 3px 8px !important;
}
.admin-badge {
background: var(--color-primary) !important;
color: var(--bg-primary) !important;
}
.user-badge {
background: var(--surface) !important;
color: var(--text-muted) !important;
border: 1px solid var(--border-color) !important;
}
.current-badge {
background: #3a6a7a !important;
color: var(--text-primary) !important;
}
/* =============================================
STAT CARD VALUE VISIBILITY
============================================= */
.stat-value {
color: var(--color-primary) !important;
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: 2rem !important;
font-weight: 400 !important;
word-break: break-all !important;
}
.stat-label {
color: var(--text-muted) !important;
font-size: 10px !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
margin-top: 4px !important;
}
.stat-card {
background: var(--bg-secondary) !important;
border: 1px solid var(--border-color) !important;
border-radius: 0 !important;
padding: 20px !important;
text-align: center !important;
}
/* Admin button hidden by default, shown by JS */
#adminNavButton {
display: none !important;
}
#adminNavButton.visible {
display: inline-block !important;
}