/* ─── CTA Button Icon ─────────────────────────────────────────────── */ .cta-icon { display: inline-block; width: 0.75em; height: 0.75em; margin-left: 6px; vertical-align: middle; flex-shrink: 0; } /* Dark Mode Theme Overrides */ /* Theme toggle button */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 999px; background: rgba(103, 152, 173, 0.08); border: none; cursor: pointer; padding: 0; transition: background-color 0.2s ease, transform 0.2s ease; flex-shrink: 0; } .theme-toggle:hover { background: rgba(103, 152, 173, 0.13); transform: translateY(-1px); } .theme-toggle svg { width: 20px; height: 20px; transition: transform 0.3s ease, opacity 0.2s ease; } .theme-toggle .icon-sun { display: none; color: #f0c040; } .theme-toggle .icon-moon { display: block; color: #3c8dc7; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle { background: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .theme-toggle:hover { background: rgba(255, 255, 255, 0.16); } /* ============================================================ DARK MODE — applied via [data-theme="dark"] on ============================================================ */ [data-theme="dark"] { color-scheme: dark; } /* --- Base / Body --- */ [data-theme="dark"] body { background-color: #0d1117; color: #e6edf3; } [data-theme="dark"] body.post-slug-home, [data-theme="dark"] body.post-slug-accueil, [data-theme="dark"] body.post-slug-main { background-color: #0d1117; } [data-theme="dark"] body.post-term-news { background-color: #0d1117; } [data-theme="dark"] body.post-term-event { background-color: #0d1117; } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: #f0f6fc; } [data-theme="dark"] body.post-term-news h1 { color: #79b8dc; border-bottom-color: #79b8dc; } [data-theme="dark"] body.post-term-event h1 { color: #e8955e; } /* --- WordPress Blocks --- */ [data-theme="dark"] .wp-block-image figcaption { color: #8b949e; } [data-theme="dark"] .wp-block-image img { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); } /* --- Buttons --- */ [data-theme="dark"] .button-component.outline-style, [data-theme="dark"] .is-style-outline .wp-block-button__link { color: #7fb3c8 !important; border-color: #7fb3c8 !important; } /* --- Gravity Forms --- */ [data-theme="dark"] .gform_wrapper { background: #161b22; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .gform_wrapper input[type="text"], [data-theme="dark"] .gform_wrapper input[type="email"], [data-theme="dark"] .gform_wrapper input[type="tel"], [data-theme="dark"] .gform_wrapper textarea, [data-theme="dark"] .gform_wrapper select { background: #0d1117; border-color: rgba(255, 255, 255, 0.1); color: #e6edf3; } [data-theme="dark"] body.post-term-event .gform_wrapper { border-color: #e8955e; box-shadow: 0 4px 8px rgba(232, 149, 94, 0.1); } [data-theme="dark"] .submission-response .success-message { background: #1a2e1a; color: #56d364; border-color: #238636; } [data-theme="dark"] .submission-response .error-message { background: #2e1a1a; color: #f85149; border-color: #da3633; } /* --- Header --- */ [data-theme="dark"] .header-component { background: #161b22; border-bottom-color: rgba(255, 255, 255, 0.06); box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .brand { color: #7fb3c8; } [data-theme="dark"] .brand-dot { background: rgba(127, 179, 200, 0.3); box-shadow: 0 0 10px rgba(103, 152, 173, 0.3); } [data-theme="dark"] .nav-link { background: rgba(103, 152, 173, 0.12); color: #7fb3c8; } [data-theme="dark"] .nav-link:hover { background: rgba(103, 152, 173, 0.2); color: #9cc8db; } [data-theme="dark"] .lang-menu-button { background: rgba(103, 152, 173, 0.12); color: #7fb3c8; } [data-theme="dark"] .lang-menu-list { background: rgba(22, 27, 34, 0.98); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .unit-switcher { background: rgba(103, 152, 173, 0.12); border-color: rgba(103, 152, 173, 0.18); } [data-theme="dark"] .unit-btn.active { background: rgba(255, 255, 255, 0.12); color: #e6edf3; } [data-theme="dark"] .lang-btn.active { background: rgba(255, 255, 255, 0.12); color: #e6edf3; } [data-theme="dark"] .toggle-bar { background-color: #7fb3c8; } [data-theme="dark"] .mobile-toggle { background: rgba(103, 152, 173, 0.12); border-color: rgba(103, 152, 173, 0.22); } /* Mobile menu */ [data-theme="dark"] .mobile-menu-fullscreen { background: #0d1117; } [data-theme="dark"] .mobile-menu-header { border-bottom-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .mobile-nav-link { color: #7fb3c8; border-bottom-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .mobile-close { background: rgba(103, 152, 173, 0.12); border-color: rgba(103, 152, 173, 0.22); } [data-theme="dark"] .close-bar { background-color: #7fb3c8; } [data-theme="dark"] .mobile-menu-switchers { border-top-color: rgba(255, 255, 255, 0.08); } /* --- Hero --- */ [data-theme="dark"] .wp-block-headless-hero { background-color: #131a22 !important; } [data-theme="dark"] .wp-block-headless-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(19, 26, 34, 0.96) 0%, rgba(19, 26, 34, 0.88) 45%, rgba(19, 26, 34, 0.3) 72%); pointer-events: none; z-index: 0; } [data-theme="dark"] .hero-title { color: #f0f6fc; } [data-theme="dark"] .hero-subtitle { color: #8b949e; } [data-theme="dark"] .hero-badge { background: rgba(103, 152, 173, 0.22); } [data-theme="dark"] .hero-secondary-btn { background: rgba(255, 255, 255, 0.08) !important; color: #fa700d !important; box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2) !important; } [data-theme="dark"] .customer-chip { background: rgba(132, 112, 82, 0.3); } @media (max-width: 760px) { [data-theme="dark"] .hero-content { background: rgba(13, 17, 23, 0.92) !important; backdrop-filter: blur(16px); } [data-theme="dark"] .hero-badge { background: rgba(103, 152, 173, 0.22) !important; color: #7fb3c8 !important; } [data-theme="dark"] .hero-subtitle { color: #8b949e !important; } } /* --- Statement --- */ [data-theme="dark"] .wp-block-headless-statement { background: #161b22 !important; } [data-theme="dark"] .statement-title { color: #f0f6fc; } [data-theme="dark"] .statement-subtitle { color: #8b949e; } /* --- How It Works --- */ [data-theme="dark"] .wp-block-headless-how-it-works { background-color: #0d1117; } [data-theme="dark"] .how-it-works-eyebrow { color: #7fb3c8; } [data-theme="dark"] .how-it-works-title { color: #f0f6fc; } [data-theme="dark"] .how-it-works-subtitle { color: #8b949e; } [data-theme="dark"] .how-it-works-scene-art { position: relative; } [data-theme="dark"] .how-it-works-scene-art::after { content: ''; position: absolute; inset: 0; background: rgba(13, 17, 23, 0.55); pointer-events: none; border-radius: inherit; } [data-theme="dark"] .step-card { background: rgba(22, 27, 34, 0.97); border-color: rgba(255, 255, 255, 0.06); box-shadow: 0 22px 54px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .step-label { color: #8b949e; } [data-theme="dark"] .step-title { color: #f0f6fc; } [data-theme="dark"] .step-description { color: #8b949e; } /* --- Awards --- */ [data-theme="dark"] .wp-block-headless-awards { background: linear-gradient(180deg, #0d1117 0%, #131a22 100%) !important; } [data-theme="dark"] .awards-section-title { color: #f0f6fc; } [data-theme="dark"] .awards-section-description { color: #8b949e; } [data-theme="dark"] .award-card { background: linear-gradient(180deg, #161b22 0%, #1c2333 100%) !important; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .award-badge { background: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .award-card-title { color: #f0f6fc; } [data-theme="dark"] .award-card-description { color: #8b949e; } [data-theme="dark"] .certification-name { color: #f0f6fc; } [data-theme="dark"] .certification-detail { color: #8b949e; } [data-theme="dark"] .awards-divider { border-bottom-color: rgba(255, 255, 255, 0.06); } /* --- Product Cards --- */ [data-theme="dark"] .wp-block-headless-product-cards { background: linear-gradient(180deg, #0d1117 0%, #131a22 100%) !important; } [data-theme="dark"] .product-cards-title { color: #f0f6fc; } [data-theme="dark"] .product-cards-subtitle { color: #8b949e; } [data-theme="dark"] .product-card { background: rgba(22, 27, 34, 0.96) !important; box-shadow: 0 20px 46px rgba(0, 0, 0, 0.25); } [data-theme="dark"] .product-card-footer { background: rgba(22, 27, 34, 0.98); } [data-theme="dark"] .product-card-description { color: #8b949e; } [data-theme="dark"] .product-tag { background: rgba(103, 152, 173, 0.15); color: #7fb3c8; } [data-theme="dark"] .product-compare-link { background: rgba(255, 255, 255, 0.06); } /* --- Card Button --- */ [data-theme="dark"] .card-button-component { background: #161b22; border-color: rgba(255, 255, 255, 0.06); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .card-button-component:hover { border-color: rgba(103, 152, 173, 0.3); box-shadow: 0 24px 44px rgba(0, 0, 0, 0.25); } [data-theme="dark"] .card-button-media { background: #1c2333; } [data-theme="dark"] .card-button-title { color: #f0f6fc; } /* --- Card Row With CTA --- */ [data-theme="dark"] .card-row-card { background: #161b22; border-color: rgba(255, 255, 255, 0.06); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .card-row-card:hover { box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .card-row-media { background: #1c2333; } [data-theme="dark"] .card-row-title { color: #7fb3c8; } /* --- Quote --- */ [data-theme="dark"] .wp-block-headless-quote { background: linear-gradient(180deg, #161b22, #1c2333) !important; border-color: rgba(103, 152, 173, 0.2) !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2) !important; } [data-theme="dark"] .quote-text { color: #e6edf3; } [data-theme="dark"] .quote-author { color: #8b949e; } [data-theme="dark"] .quote-mark { color: rgba(103, 152, 173, 0.25); } /* --- Download File --- */ [data-theme="dark"] .wp-block-headless-download-file { background: radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.06) 0, rgba(255, 255, 255, 0) 24%), linear-gradient(90deg, #1c2333 0%, #2d3b4d 62%, #3d2e22 100%) !important; } /* --- Results Carousel --- */ [data-theme="dark"] .wp-block-headless-results-carousel { background: #0d1117; } [data-theme="dark"] .results-section-title { color: #f0f6fc; } [data-theme="dark"] .results-section-subtitle { color: #8b949e; } [data-theme="dark"] .results-slide { background: #161b22; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.25); } [data-theme="dark"] .results-slide-category { background: rgba(103, 152, 173, 0.12); color: #7fb3c8; } [data-theme="dark"] .results-slide-title { color: #f0f6fc; } [data-theme="dark"] .results-slide-description { color: #8b949e; } [data-theme="dark"] .results-stat { background: rgba(22, 27, 34, 0.8); border-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .results-stat-value { color: #f0f6fc; } [data-theme="dark"] .results-stat-label { color: #8b949e; } [data-theme="dark"] .results-nav-btn { background: rgba(22, 27, 34, 0.96); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .results-image-placeholder { background: linear-gradient(180deg, #1c2333 0%, #161b22 100%); } /* --- Savings Calculator --- */ [data-theme="dark"] .wp-block-headless-savings-calculator { background: #0d1117 !important; } [data-theme="dark"] .savings-calculator-intro { color: #79b8dc; } [data-theme="dark"] .savings-calculator-intro p { color: #7fb3c8; } [data-theme="dark"] .savings-calculator-panel { background: #161b22; box-shadow: 0 20px 44px rgba(0, 0, 0, 0.25); } [data-theme="dark"] .savings-calculator-title { color: #79b8dc; } [data-theme="dark"] .savings-calculator-label { color: #e6edf3; } [data-theme="dark"] .savings-calculator-option { background: #1c2333; border-color: rgba(255, 255, 255, 0.08); color: #e6edf3; } [data-theme="dark"] .savings-calculator-option.is-active { background: #328ed6; border-color: #328ed6; color: #fff; } [data-theme="dark"] .savings-calculator-custom-input input { background: #1c2333; border-color: rgba(255, 255, 255, 0.08); color: #e6edf3; } [data-theme="dark"] .savings-calculator-slider { background: #1c2333; border-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .savings-calculator-slider-value { background: #e6edf3; color: #161b22; } [data-theme="dark"] .savings-calculator-slider-ticks span { color: #8b949e; } [data-theme="dark"] .savings-calculator-divider { border-top-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .savings-calculator-results { background: #161b22; border-color: #328ed6; } [data-theme="dark"] .savings-calculator-results-title { color: #79b8dc; } [data-theme="dark"] .savings-calculator-recommend-badge { background: #e6edf3; color: #161b22; } [data-theme="dark"] .savings-calculator-product-card { background: linear-gradient(90deg, #1c2333 0%, #263850 100%); } [data-theme="dark"] .savings-calculator-product-badge { background: rgba(255, 255, 255, 0.12); color: #e6edf3; } [data-theme="dark"] .savings-calculator-arrow { color: #8b949e; } [data-theme="dark"] .savings-calculator-metric { background: #1c2333; } [data-theme="dark"] .savings-calculator-metric-icon { background: rgba(50, 142, 214, 0.15); color: #79b8dc; } [data-theme="dark"] .savings-calculator-metric-text { color: #8b949e; } [data-theme="dark"] .savings-calculator-metric-text .highlight { color: #79b8dc; } [data-theme="dark"] .savings-calculator-equals { color: #8b949e; } [data-theme="dark"] .savings-calculator-cta-secondary { background: #161b22; color: #fa700d; border-color: #fa700d; } /* --- Carousel (generic) --- */ [data-theme="dark"] .carousel-component { background: #0d1117; } [data-theme="dark"] .carousel-card { background: #161b22; border-color: rgba(255, 255, 255, 0.06); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .carousel-placeholder { background: #1c2333; } [data-theme="dark"] .story-card-excerpt { color: #8b949e; } /* --- Story Carousel --- */ [data-theme="dark"] .wp-block-headless-story-carousel .story-carousel-eyebrow { color: #7fb3c8; } [data-theme="dark"] .wp-block-headless-story-carousel .story-carousel-title { color: #f0f6fc; } /* --- Story Page --- */ [data-theme="dark"] .story-page-hero { background: radial-gradient(circle at top left, rgba(103, 152, 173, 0.1), transparent 32%), linear-gradient(180deg, #131a22 0, #0d1117 240px) !important; } [data-theme="dark"] .story-back-link { background: rgba(22, 27, 34, 0.82); border-color: rgba(103, 152, 173, 0.2); color: #7fb3c8; } [data-theme="dark"] .story-eyebrow { color: #7fb3c8; } [data-theme="dark"] .story-page-title { color: #f0f6fc; } [data-theme="dark"] .story-full-content { background: rgba(22, 27, 34, 0.92); color: #c9d1d9; } [data-theme="dark"] .story-full-content blockquote { background: #161b22; border-left-color: #7fb3c8; color: #8b949e; } [data-theme="dark"] .story-hero-image img { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .user-story-page { border-color: rgba(255, 255, 255, 0.06); } /* --- CTA Banner --- */ [data-theme="dark"] .wp-block-headless-cta-banner { background: #1c3040 !important; } /* --- Footer --- */ [data-theme="dark"] .footer-component { background: #0d1117; border-top-color: rgba(103, 152, 173, 0.15); } [data-theme="dark"] .footer-social-btn { background: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .footer-social-btn:hover { background: rgba(255, 255, 255, 0.14); } /* --- Chat Widget --- */ [data-theme="dark"] .chat-panel { background: #161b22; box-shadow: 0 16px 60px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .chat-messages { background: #0d1117; } [data-theme="dark"] .chat-bubble.assistant, [data-theme="dark"] .chat-bubble.operator { background: #1c2333; color: #e6edf3; border-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .chat-input-area { background: #161b22; border-top-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .chat-input { background: #0d1117; color: #e6edf3; border-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .chat-input:focus { border-color: #7fb3c8; } [data-theme="dark"] .chat-input::placeholder { color: #484f58; } [data-theme="dark"] .chat-quick-btn { background: #161b22; border-color: #7fb3c8; color: #7fb3c8; } [data-theme="dark"] .chat-quick-btn:hover { background: #7fb3c8; color: #0d1117; } /* --- Video --- */ [data-theme="dark"] .video-component { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); } /* --- Smart CTA --- */ /* Smart CTA already uses white text on colored backgrounds — minimal changes needed */ /* --- Transition for theme switching --- */ body, .header-component, .mobile-menu-fullscreen, .card-button-component, .card-row-card, .carousel-card, .calculator-panel, .results-slide, .step-card, .award-card, .product-card, .chat-panel, .chat-messages, .chat-input, .gform_wrapper { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }