/* * TinkerTailz – Dark Mode CSS * Applied when [data-theme="dark"] is set on */ /* ============================================================ DARK MODE VARIABLES ============================================================ */ [data-theme="dark"] { /* Surfaces */ --tt-bg: #140F0D; --tt-surface: #221815; --tt-card: #2B1F1B; --tt-border: #4B342C; --tt-warm: #E8C7A1; /* Text */ --tt-text: #FFFFFF; --tt-text2: #D8CFC9; /* Shadows enhanced for dark */ --tt-shadow-sm: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4); --tt-shadow-md: 0 4px 16px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4); --tt-shadow-lg: 0 10px 40px rgba(0,0,0,0.7), 0 4px 16px rgba(0,0,0,0.5); --tt-shadow-glow: 0 0 32px rgba(124,77,255,0.5), 0 0 12px rgba(124,77,255,0.3); /* Glass panels – dunkel, sichtbar auf kosmischem Hintergrund */ --tt-glass-section: rgba(14, 10, 9, 0.72); --tt-glass-card: rgba(30, 20, 17, 0.78); --tt-glass-border: rgba(100, 70, 60, 0.45); --tt-glass-blur: blur(20px); } /* ============================================================ DARK MODE BODY & BASE ============================================================ */ [data-theme="dark"] body { background-color: var(--tt-bg); background-image: url('/wp-content/themes/tinkertailz/assets/images/hero-bg-dark.jpg'); color: var(--tt-text); } [data-theme="dark"] ::selection { background-color: var(--tt-primary); color: #ffffff; } /* ============================================================ DARK MODE HEADER ============================================================ */ [data-theme="dark"] .tt-header { background-color: rgba(34, 24, 21, 0.95); border-bottom-color: var(--tt-border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } [data-theme="dark"] .tt-header.scrolled { background-color: rgba(34, 24, 21, 0.98); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .tt-mobile-nav { background-color: var(--tt-surface); border-top-color: var(--tt-border); } [data-theme="dark"] .tt-mobile-nav a { border-bottom-color: var(--tt-border); color: var(--tt-text); } [data-theme="dark"] .tt-theme-toggle { background: var(--tt-card); border-color: var(--tt-border); color: var(--tt-text); } /* ============================================================ DARK MODE HERO SECTION ============================================================ */ [data-theme="dark"] .tt-hero { background: transparent !important; } [data-theme="dark"] .tt-site-header { background: rgba(14, 10, 9, 0.55) !important; } /* ============================================================ DARK MODE CARDS ============================================================ */ [data-theme="dark"] .tt-card, [data-theme="dark"] .tt-featured-card, [data-theme="dark"] .tt-service-card, [data-theme="dark"] .tt-pricing-card { background: var(--tt-card); border-color: var(--tt-border); box-shadow: var(--tt-shadow-sm); } [data-theme="dark"] .tt-card:hover, [data-theme="dark"] .tt-featured-card:hover, [data-theme="dark"] .tt-service-card:hover, [data-theme="dark"] .tt-pricing-card:not(.tt-pricing-featured):hover { box-shadow: var(--tt-shadow-md); border-color: var(--tt-primary); } [data-theme="dark"] .tt-pricing-featured { background: linear-gradient( 145deg, rgba(124, 77, 255, 0.15) 0%, var(--tt-card) 100% ); box-shadow: var(--tt-shadow-glow); } /* Section backgrounds – handled by glass panel variables */ /* ============================================================ DARK MODE LUMINA PAWS ============================================================ */ [data-theme="dark"] #tt-lp-panel-quick, [data-theme="dark"] #tt-lp-panel-wizard { background: var(--tt-card); border-color: var(--tt-border); } [data-theme="dark"] .tt-wizard-opt { background: var(--tt-surface); border-color: var(--tt-border); color: var(--tt-text); } [data-theme="dark"] .tt-wizard-opt.selected { background: rgba(124, 77, 255, 0.15); border-color: var(--tt-primary); } [data-theme="dark"] .tt-radio-opt, [data-theme="dark"] .tt-check-opt { background: var(--tt-surface); border-color: var(--tt-border); } [data-theme="dark"] #tt-chat-window { background: var(--tt-card); border-color: var(--tt-border); } [data-theme="dark"] #tt-chat-messages { background: var(--tt-card); } [data-theme="dark"] .tt-lp-tab:not(.tt-lp-tab-active) { background: transparent; color: var(--tt-text2); } /* ============================================================ DARK MODE FOOTER ============================================================ */ [data-theme="dark"] .tt-footer { background: var(--tt-surface); border-top-color: var(--tt-border); } [data-theme="dark"] .tt-footer-bottom { background: var(--tt-bg); border-top-color: var(--tt-border); } [data-theme="dark"] .tt-social-link { background: var(--tt-card); border-color: var(--tt-border); color: var(--tt-text2); } [data-theme="dark"] .tt-social-link:hover { border-color: var(--tt-primary); color: var(--tt-primary); box-shadow: var(--tt-shadow-glow); } [data-theme="dark"] .tt-newsletter-form input { background: var(--tt-surface); border-color: var(--tt-border); color: var(--tt-text); } [data-theme="dark"] .tt-newsletter-form input::placeholder { color: var(--tt-text2); } /* ============================================================ DARK MODE FORM INPUTS ============================================================ */ [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="tel"], [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="password"], [data-theme="dark"] textarea, [data-theme="dark"] select { background-color: var(--tt-surface); border-color: var(--tt-border); color: var(--tt-text); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--tt-text2); opacity: 0.7; } [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { border-color: var(--tt-primary); outline-color: var(--tt-glow); } /* ============================================================ DARK MODE BUTTONS ADJUSTMENTS ============================================================ */ [data-theme="dark"] .btn-outline { color: var(--tt-primary); border-color: var(--tt-primary); } [data-theme="dark"] .btn-outline:hover { background: var(--tt-primary); color: #ffffff; } /* ============================================================ DARK MODE SECTION TAG ============================================================ */ [data-theme="dark"] .tt-section-tag { background: rgba(124, 77, 255, 0.15); color: var(--tt-secondary); } /* ============================================================ DARK MODE FEATURED SERVICES CARD IMAGES ============================================================ */ [data-theme="dark"] .tt-card-img { filter: brightness(0.9); } /* ============================================================ DARK MODE SKIP LINK ============================================================ */ [data-theme="dark"] .skip-link { background: var(--tt-primary); color: #ffffff; } /* ============================================================ DARK MODE SCROLLBARS (Webkit) ============================================================ */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--tt-surface); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--tt-border); border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--tt-text2); } /* ============================================================ DARK MODE WORDPRESS BLOCKS ============================================================ */ [data-theme="dark"] .wp-block-separator { border-color: var(--tt-border); color: var(--tt-border); } [data-theme="dark"] .wp-block-quote { border-left-color: var(--tt-primary); background: var(--tt-surface); color: var(--tt-text); } [data-theme="dark"] .wp-block-code, [data-theme="dark"] .wp-block-preformatted { background: var(--tt-surface); border-color: var(--tt-border); color: var(--tt-secondary); } [data-theme="dark"] .wp-block-table td, [data-theme="dark"] .wp-block-table th { border-color: var(--tt-border); } [data-theme="dark"] .wp-block-table thead td, [data-theme="dark"] .wp-block-table thead th { background: var(--tt-surface); } /* ============================================================ DARK MODE ARCHIVE & SINGLE POST ============================================================ */ [data-theme="dark"] .tt-archive-hero, [data-theme="dark"] .tt-single-hero, [data-theme="dark"] .tt-page-hero { background: var(--tt-surface); } [data-theme="dark"] .tt-post-footer { border-top-color: var(--tt-border); } [data-theme="dark"] .wp-block-comments { color: var(--tt-text); } /* ============================================================ DARK MODE GLOW EFFECTS ============================================================ */ [data-theme="dark"] .tt-pricing-featured { box-shadow: 0 0 40px rgba(124, 77, 255, 0.3), 0 0 80px rgba(124, 77, 255, 0.15), 0 10px 40px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .btn-primary:hover, [data-theme="dark"] .tt-social-link:hover { box-shadow: var(--tt-shadow-glow); } /* ============================================================ DARK MODE ICON TOGGLE ============================================================ */ [data-theme="dark"] .tt-icon-light { display: none !important; } [data-theme="dark"] .tt-icon-dark { display: block !important; } /* Light mode explicit state */ :root:not([data-theme="dark"]) .tt-icon-dark { display: none !important; } :root:not([data-theme="dark"]) .tt-icon-light { display: block !important; } /* ============================================================ DARK MODE – PROJEKT STARTEN WIZARD ============================================================ */ [data-theme="dark"] .tt-ps-process { background: var(--tt-glass-section); } [data-theme="dark"] .tt-ps-wizard { background: var(--tt-glass-section); } [data-theme="dark"] .tt-ps-wiz { background: var(--tt-glass-card); border-color: var(--tt-glass-border); } [data-theme="dark"] .tt-ps-opt { background: var(--tt-surface); border-color: var(--tt-border); color: var(--tt-text); } [data-theme="dark"] .tt-ps-opt:hover { border-color: var(--tt-primary); background: rgba(124, 77, 255, 0.08); } [data-theme="dark"] .tt-ps-opt[aria-pressed="true"] { background: rgba(124, 77, 255, 0.15); border-color: var(--tt-primary); } [data-theme="dark"] .tt-ps-input, [data-theme="dark"] .tt-ps-textarea, [data-theme="dark"] .tt-ps-select { background: var(--tt-surface); border-color: var(--tt-border); color: var(--tt-text); } [data-theme="dark"] .tt-ps-upload { background: var(--tt-surface); border-color: var(--tt-border); } [data-theme="dark"] .tt-ps-file-item { background: var(--tt-card); border-color: var(--tt-border); } [data-theme="dark"] .tt-ps-lumina-sidebar { background: rgba(124, 77, 255, 0.04); border-left-color: var(--tt-border); } [data-theme="dark"] .tt-ps-lumina-msg { background: var(--tt-card); border-color: var(--tt-border); } [data-theme="dark"] .tt-ps-lumina-analysis { background: rgba(124, 77, 255, 0.08); border-color: rgba(124, 77, 255, 0.2); } [data-theme="dark"] .tt-ps-summary-item { background: var(--tt-surface); border-color: var(--tt-border); } [data-theme="dark"] .tt-ps-error { background: rgba(229, 62, 62, 0.1); border-color: rgba(229, 62, 62, 0.3); color: #fc8181; } [data-theme="dark"] .tt-ps-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23D8CFC9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }