/* Component Showcase Theme Support */ /* Allows data-theme to work on any element, not just */ /* ===== Container Backgrounds ===== */ [data-theme] { background-color: rgb(var(--color-surface-0)); color: rgb(var(--color-text-strong)); } /* Fixed-height panels with independent scrolling */ .showcase-panel { position: relative; height: calc(100vh - 20rem); min-height: 500px; overflow: hidden; } /* Scrollable content area inside each panel */ #light-container, #dark-container { position: relative; z-index: 1; height: 100%; overflow-y: auto; background-color: transparent !important; } /* Custom scrollbar for showcase panels */ .showcase-scroll::-webkit-scrollbar { width: 6px; } .showcase-scroll::-webkit-scrollbar-track { background: transparent; } .showcase-scroll::-webkit-scrollbar-thumb { background-color: rgba(128, 128, 128, 0.3); border-radius: 3px; } .showcase-scroll::-webkit-scrollbar-thumb:hover { background-color: rgba(128, 128, 128, 0.5); } /* Circuit SVG background — fixed within the panel viewport */ .showcase-circuit-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; z-index: 0; } /* ===== Glass Toggle Switch ===== */ .showcase-toggle { position: relative; width: 44px; height: 24px; border-radius: 12px; background-color: rgb(51 65 85); border: none; cursor: pointer; transition: background-color 0.3s ease; padding: 0; flex-shrink: 0; } .showcase-toggle-on { background-color: rgb(34 211 238); } .showcase-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background-color: white; transition: transform 0.3s ease; pointer-events: none; } .showcase-toggle-on .showcase-toggle-thumb { transform: translateX(20px); } /* ===== Glassmorphic Showcase Effect ===== */ /* Smooth transition when toggling glass */ .showcase-panel .bg-theme-surface-0, .showcase-panel .bg-theme-surface-1, .showcase-panel .bg-theme-surface-2, .showcase-panel .bg-accent, .showcase-panel .border-theme, .showcase-panel .border-surface-border, .showcase-panel .bg-gradient-panel { transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; } /* Inner circuit SVG clone — lives inside the scroll container so backdrop-filter can blur it */ .showcase-circuit-inner { position: sticky; top: 0; width: 100%; height: 100%; margin-bottom: -100%; object-fit: cover; pointer-events: none; user-select: none; z-index: -1; display: block; } /* Glass: backdrop blur for all component surfaces */ .showcase-glass .rounded-card, .showcase-glass .rounded-2xl, .showcase-glass .bg-theme-surface-0, .showcase-glass .bg-theme-surface-1, .showcase-glass .bg-theme-surface-2, .showcase-glass .bg-accent, .showcase-glass .bg-gradient-panel, .showcase-glass .showcase-stat, .showcase-glass .showcase-accordion-item, .showcase-glass [class*="toast-"] { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } /* Glass: surface backgrounds become semi-transparent so blur shows through */ .showcase-glass .bg-theme-surface-0 { background-color: rgb(var(--color-surface-0) / 0.5) !important; } .showcase-glass .bg-theme-surface-1 { background-color: rgb(var(--color-surface-1) / 0.15) !important; } .showcase-glass .bg-theme-surface-2 { background-color: rgb(var(--color-surface-2) / 0.15) !important; } /* Glass: borders become translucent */ .showcase-glass .border-theme, .showcase-glass .border-surface-border { border-color: rgb(var(--color-surface-border) / 0.25) !important; } /* Glass: accent borders soften */ .showcase-glass .border-accent { border-color: rgb(var(--color-accent) / 0.35) !important; } /* Glass: shadow-glow becomes a softer accent glow */ .showcase-glass .shadow-glow { box-shadow: 0 0 20px rgb(var(--color-accent) / 0.12) !important; } /* Glass: shadow-lg adapts */ .showcase-glass .shadow-lg { box-shadow: 0 8px 32px rgb(0 0 0 / 0.15), inset 0 0 0 1px rgb(255 255 255 / 0.05) !important; } /* Glass: hover surface states */ .showcase-glass .hover\:bg-theme-surface-2:hover { background-color: rgb(var(--color-surface-2) / 0.25) !important; } /* ===== Tab Active States ===== */ .showcase-tab-active { color: rgb(var(--color-accent)) !important; border-color: rgb(var(--color-accent)) !important; } /* Pills variant - active tab gets accent background */ .showcase-tabs .showcase-tab-active { background-color: rgb(var(--color-accent)); color: white !important; } /* Line variant - active tab only gets bottom border */ .showcase-tabs .flex.border-b .showcase-tab-active { background-color: transparent; color: rgb(var(--color-accent)) !important; } /* Enclosed variant - active tab gets surface background */ .showcase-tabs .flex.border-b.border-surface-border .showcase-tab-active { background-color: rgb(var(--color-surface-1)); color: rgb(var(--color-accent)) !important; } /* ===== NoProblem Software Dark Mode ===== */ [data-theme="noproblemsoftware-com"] { /* Surfaces */ --color-surface-0: 5 8 22; --color-surface-1: 11 16 32; --color-surface-2: 17 24 39; --color-surface-border: 31 41 55; /* Text */ --color-text-strong: 249 250 251; --color-text-muted: 156 163 175; --color-text-subtle: 107 114 128; /* Accents */ --color-accent: 34 211 238; --color-accent-strong: 6 182 212; --color-accent-indigo: 99 102 241; /* Glows */ --color-glow-cyan: rgba(34, 211, 238, 0.2); --color-glow-indigo: rgba(99, 102, 241, 0.2); /* Shadows */ --shadow-glow: 0 0 35px var(--color-glow-cyan); /* Radii */ --radius-card: 0.75rem; /* Motion */ --duration-normal: 250ms; } /* ===== NoProblem Software Light Mode ===== */ [data-theme="noproblemsoftware-com-light"] { /* Surfaces */ --color-surface-0: 249 250 251; --color-surface-1: 255 255 255; --color-surface-2: 243 244 246; --color-surface-border: 209 213 219; /* Text */ --color-text-strong: 15 23 42; --color-text-muted: 71 85 105; --color-text-subtle: 100 116 139; /* Accents */ --color-accent: 6 182 212; --color-accent-strong: 8 145 178; --color-accent-indigo: 79 70 229; /* Glows (softer for light mode) */ --color-glow-cyan: rgba(6, 182, 212, 0.15); --color-glow-indigo: rgba(79, 70, 229, 0.15); /* Shadows */ --shadow-glow: 0 0 25px var(--color-glow-cyan); /* Radii */ --radius-card: 0.75rem; /* Motion */ --duration-normal: 250ms; } /* ===== Salon Dark Mode ===== */ [data-theme="salon"] { /* Surfaces */ --color-surface-0: 22 18 23; --color-surface-1: 31 25 33; --color-surface-2: 41 33 43; --color-surface-border: 61 47 64; /* Text */ --color-text-strong: 253 245 255; --color-text-muted: 216 180 221; --color-text-subtle: 183 148 189; /* Accents - using salon colors */ --color-accent: 199 179 242; /* salon-400 - mauve */ --color-accent-strong: 167 139 217; /* salon-500 - darker mauve */ --color-accent-indigo: 231 196 216; /* salon-sec-300 - pink */ /* Salon color variables */ --color-salon-600: 199 179 242; /* Glows */ --color-glow-cyan: rgba(199, 179, 242, 0.2); --color-glow-indigo: rgba(231, 196, 216, 0.2); /* Shadows (softer for salon) */ --shadow-glow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Radii */ --radius-card: 0.75rem; /* Motion */ --duration-normal: 250ms; } /* ===== Salon Light Mode ===== */ [data-theme="salon-light"] { /* Surfaces */ --color-surface-0: 255 249 252; --color-surface-1: 255 255 255; --color-surface-2: 252 241 247; --color-surface-border: 245 215 232; /* Text */ --color-text-strong: 71 14 57; --color-text-muted: 129 75 116; --color-text-subtle: 157 100 143; /* Accents */ --color-accent: 167 139 217; /* salon-500 - mauve */ --color-accent-strong: 139 108 192; /* salon-600 - darker */ --color-accent-indigo: 231 196 216; /* salon-sec-300 - pink */ /* Salon color variables */ --color-salon-600: 167 139 217; /* Glows (softer for light mode) */ --color-glow-cyan: rgba(167, 139, 217, 0.15); --color-glow-indigo: rgba(231, 196, 216, 0.15); /* Shadows */ --shadow-glow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Radii */ --radius-card: 0.75rem; /* Motion */ --duration-normal: 250ms; } /* ===== Raildog Dark Mode ===== */ [data-theme="raildog"] { /* Surfaces — deep steel/slate tones */ --color-surface-0: 10 14 20; --color-surface-1: 17 24 33; --color-surface-2: 25 33 44; --color-surface-border: 40 52 67; /* Text */ --color-text-strong: 241 245 249; --color-text-muted: 148 163 184; --color-text-subtle: 100 116 139; /* Accents — emerald green (railway signal green) */ --color-accent: 16 185 129; --color-accent-strong: 5 150 105; --color-accent-indigo: 245 158 11; /* Glows */ --color-glow-cyan: rgba(16, 185, 129, 0.2); --color-glow-indigo: rgba(245, 158, 11, 0.15); /* Shadows */ --shadow-glow: 0 0 35px var(--color-glow-cyan); /* Radii */ --radius-card: 0.75rem; /* Motion */ --duration-normal: 250ms; } /* ===== Raildog Light Mode ===== */ [data-theme="raildog-light"] { /* Surfaces */ --color-surface-0: 248 250 252; --color-surface-1: 255 255 255; --color-surface-2: 241 245 249; --color-surface-border: 203 213 225; /* Text */ --color-text-strong: 15 23 42; --color-text-muted: 71 85 105; --color-text-subtle: 100 116 139; /* Accents — deeper emerald for light mode contrast */ --color-accent: 5 150 105; --color-accent-strong: 4 120 87; --color-accent-indigo: 217 119 6; /* Glows (softer for light mode) */ --color-glow-cyan: rgba(5, 150, 105, 0.12); --color-glow-indigo: rgba(217, 119, 6, 0.10); /* Shadows */ --shadow-glow: 0 0 25px var(--color-glow-cyan); /* Radii */ --radius-card: 0.75rem; /* Motion */ --duration-normal: 250ms; } /* ===== Utility Classes [data-theme] .bg-theme-surface-0 { background-color: rgb(var(--color-surface-0)); } [data-theme] .bg-theme-surface-1 { background-color: rgb(var(--color-surface-1)); } [data-theme] .bg-theme-surface-2 { background-color: rgb(var(--color-surface-2)); } [data-theme] .text-theme-strong { color: rgb(var(--color-text-strong)); } [data-theme] .text-theme-muted { color: rgb(var(--color-text-muted)); } [data-theme] .text-theme-subtle { color: rgb(var(--color-text-subtle)); } [data-theme] .border-theme { border-color: rgb(var(--color-surface-border)); } [data-theme] .border-surface-border { border-color: rgb(var(--color-surface-border)); } [data-theme] .bg-accent { background-color: rgb(var(--color-accent)); } [data-theme] .text-accent { color: rgb(var(--color-accent)); } [data-theme] .border-accent { border-color: rgb(var(--color-accent)); } [data-theme] .hover\:bg-accent:hover { background-color: rgb(var(--color-accent)); } [data-theme] .hover\:text-accent:hover { color: rgb(var(--color-accent)); } [data-theme] .hover\:border-accent:hover { border-color: rgb(var(--color-accent)); } [data-theme] .hover\:bg-accent-strong:hover { background-color: rgb(var(--color-accent-strong)); } [data-theme] .hover\:bg-theme-surface-1:hover { background-color: rgb(var(--color-surface-1)); } [data-theme] .hover\:bg-theme-surface-2:hover { background-color: rgb(var(--color-surface-2)); } [data-theme] .rounded-card { border-radius: var(--radius-card); } [data-theme] .shadow-glow { box-shadow: var(--shadow-glow); } [data-theme] .hover\:shadow-glow:hover { box-shadow: var(--shadow-glow); } [data-theme] .duration-normal { transition-duration: var(--duration-normal); } [data-theme] .bg-gradient-panel { background: linear-gradient( 135deg, rgba(var(--color-accent), 0.1) 0%, rgba(var(--color-accent-indigo), 0.05) 100% ); } /* Ensure text colors work inline */ [data-theme] [style*="color: rgb(var(--color-text-strong))"] { color: rgb(var(--color-text-strong)) !important; } [data-theme] [style*="color: rgb(var(--color-text-muted))"] { color: rgb(var(--color-text-muted)) !important; } [data-theme] [style*="color: rgb(var(--color-text-subtle))"] { color: rgb(var(--color-text-subtle)) !important; } [data-theme] [style*="border-color: rgb(var(--color-surface-border))"] { border-color: rgb(var(--color-surface-border)) !important; } /* ===== Social Link Button (showcase support) ===== */ .social-link-btn-wrapper { position: relative; display: inline-flex; align-items: center; gap: 0.25rem; } .social-link-btn { display: flex; align-items: center; justify-content: center; border: none; background-color: transparent; position: relative; isolation: isolate; border-radius: 7px; cursor: pointer; transition: all 0.3s; text-decoration: none; color: inherit; } .social-link-btn-sm { width: 36px; height: 36px; } .social-link-btn-md { width: 45px; height: 45px; } .social-link-btn-lg { width: 56px; height: 56px; } .social-link-btn-icon { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: transparent; backdrop-filter: blur(0px); border-radius: 10px; transition: all 0.3s; border: 1px solid rgba(156, 156, 156, 0.466); color: rgb(var(--color-text-strong)); } .social-link-btn-icon svg { width: 1.6em; height: 1.6em; } .social-link-btn-sm .social-link-btn-icon svg { width: 1.2em; height: 1.2em; } .social-link-btn-lg .social-link-btn-icon svg { width: 2em; height: 2em; } .social-link-btn-bg { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; border-radius: 10px; pointer-events: none; transition: all 0.3s; } .social-link-btn-bg-default { background: rgb(var(--color-surface-2)); } .social-link-btn-bg-cyan { background: rgb(6, 182, 212); } .social-link-btn-bg-emerald { background: rgb(16, 185, 129); } .social-link-btn-bg-violet { background: rgb(139, 92, 246); } .social-link-btn-bg-blue { background: rgb(59, 130, 246); } .social-link-btn:hover .social-link-btn-bg { transform: rotate(35deg); transform-origin: bottom; } .social-link-btn:hover .social-link-btn-icon { background-color: rgba(156, 156, 156, 0.466); backdrop-filter: blur(4px); color: white; }