/** * Digima Migraine Mode — Frontend Stylesheet * Version: 1.1.4 * * 1. CSS Custom Properties (Design Tokens) * 2. Global Transition for Mode Switch * 3. Migraine Mode Overrides (.migraine-mode class on ) * 4. Image & Animation Overrides * 5. Toggle Switch Component * 6. Sun / Moon Icon Toggle */ /* ───────────────────────────────────────────── 1. CSS Custom Properties — Normal Mode ───────────────────────────────────────────── */ :root { /* Brand colours */ --dmm-bg-color: #FFFFFF; --dmm-text-color: #190D59; --dmm-accent-color: #7B3FE4; /* Standard purple accent */ /* Switch track colours */ --dmm-track-bg: #190D59; --dmm-handle-bg: #FFFFFF; --dmm-icon-color: #190D59; /* Dimensions */ --dmm-track-width: 64px; --dmm-track-height: 34px; --dmm-handle-size: 26px; --dmm-handle-offset: 4px; /* Transition */ --dmm-transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out, border-color 0.4s ease-in-out; } /* ───────────────────────────────────────────── 2. Global Transition — applied to body & containers ───────────────────────────────────────────── */ body, body header, body nav, body footer, body main, body section, body article, body aside { transition: var(--dmm-transition); } /* ───────────────────────────────────────────── 3. Migraine Mode Overrides Active when JS adds .migraine-mode to ───────────────────────────────────────────── */ body.migraine-mode { --dmm-bg-color: #190D59; /* Dark navy — brand primary */ --dmm-text-color: #D1D5DB; /* Soft light gray — no harsh white glow */ --dmm-accent-color: #9482B5; /* Muted, desaturated purple */ background-color: var(--dmm-bg-color) !important; color: var(--dmm-text-color) !important; } /* Page wrapper & Semantic elements */ body.migraine-mode section, body.migraine-mode article, body.migraine-mode header, body.migraine-mode footer, body.migraine-mode nav, body.migraine-mode main { background-color: var(--dmm-bg-color) !important; color: var(--dmm-text-color) !important; } /* Structural Elementor Containers that actually HAVE a background */ body.migraine-mode .dmm-has-bg { background-color: var(--dmm-bg-color) !important; color: var(--dmm-text-color) !important; } /* Inner containers/cards that have a background (e.g. designed boxes) */ body.migraine-mode .e-child.dmm-has-bg, body.migraine-mode .elementor-column.dmm-has-bg, body.migraine-mode .elementor-widget-wrap.dmm-has-bg, body.migraine-mode .elementor-widget-container.dmm-has-bg { background-color: #23185B !important; /* Slightly lighter navy for cards */ border-color: var(--dmm-accent-color) !important; } /* Background Images */ body.migraine-mode .dmm-has-bg-img, body.migraine-mode .elementor-background-overlay { background-color: rgba(25, 13, 89, 0.75) !important; background-blend-mode: multiply !important; } /* Shape Dividers */ body.migraine-mode .elementor-shape svg path, body.migraine-mode .elementor-shape svg { fill: var(--dmm-bg-color) !important; transition: fill 0.4s ease-in-out !important; } /* Typography */ body.migraine-mode h1, body.migraine-mode h2, body.migraine-mode h3, body.migraine-mode h4, body.migraine-mode h5, body.migraine-mode h6, body.migraine-mode p, body.migraine-mode span, body.migraine-mode li, body.migraine-mode label, body.migraine-mode a { color: var(--dmm-text-color) !important; } /* Links — keep them recognisable but muted */ body.migraine-mode a:hover { color: var(--dmm-accent-color) !important; } /* * Icon Overrides * Elementor icons come in two forms: * 1. SVG elements — need fill / stroke overrides * 2. Font icons — need color override (Font Awesome , ) * We exclude the toggle widget's own icons (.dmm-switch-handle) to avoid conflicts. */ /* SVG icons — inline SVGs rendered by Elementor Icon widget */ body.migraine-mode .elementor-icon svg, body.migraine-mode .elementor-icon-box-icon svg, body.migraine-mode .elementor-widget-icon svg, body.migraine-mode .elementor-widget-icon-list svg, body.migraine-mode .elementor-icon-list-icon svg, body.migraine-mode .e-icon svg { fill: var(--dmm-text-color, #D1D5DB) !important; stroke: var(--dmm-text-color, #D1D5DB) !important; transition: fill 0.4s ease-in-out, stroke 0.4s ease-in-out !important; } /* Font icons (Font Awesome, Elementor Icons) — and */ body.migraine-mode .elementor-icon i, body.migraine-mode .elementor-icon-box-icon i, body.migraine-mode .elementor-icon-list-icon i, body.migraine-mode .elementor-widget-icon i, body.migraine-mode .elementor-icon span, body.migraine-mode .elementor-icon-box-icon span, body.migraine-mode i[class*="fa-"], body.migraine-mode i[class*="eicon-"], body.migraine-mode i[class*="dashicons"] { color: var(--dmm-text-color, #D1D5DB) !important; transition: color 0.4s ease-in-out !important; } /* Generic catch-all for any remaining SVGs on the page * (navigation arrows, decorative SVGs, etc.) * Uses lower specificity so the logo invert rule (further down) still wins. */ body.migraine-mode svg:not(.dmm-moon-icon):not(.dmm-sun-icon) { fill: var(--dmm-text-color, #D1D5DB); stroke: none; transition: fill 0.4s ease-in-out, stroke 0.4s ease-in-out; } /* Exception: SVGs that are purely decorative backgrounds or have explicit colours * set via inline style — let them be unless they're Elementor icon widgets. */ body.migraine-mode svg[style*="color"]:not(.elementor-icon svg), body.migraine-mode svg[style*="fill"]:not(.elementor-icon svg) { fill: unset; stroke: unset; } /* Buttons & accent elements */ body.migraine-mode .elementor-button, body.migraine-mode .wp-block-button__link, body.migraine-mode button:not(.dmm-toggle-checkbox) { /* Instead of overriding with a solid background-color, dim the original designs (including gradients) */ filter: brightness(0.65) saturate(0.8) !important; transition: filter 0.4s ease-in-out !important; } /* Cards, boxes, panels */ body.migraine-mode .elementor-tab-content, body.migraine-mode .elementor-accordion-item, body.migraine-mode .elementor-icon-box-wrapper { background-color: #23185B !important; border-color: var(--dmm-accent-color) !important; color: var(--dmm-text-color) !important; } /* Toggle switch colours flip in migraine mode */ body.migraine-mode .dmm-switch-track { background-color: #3D2D80 !important; /* Lighter navy so track is visible */ border-color: var(--dmm-accent-color) !important; } body.migraine-mode .dmm-switch-handle { background-color: var(--dmm-accent-color) !important; } body.migraine-mode .dmm-moon-icon { color: #FFFFFF !important; } body.migraine-mode .dmm-toggle-label { color: var(--dmm-text-color) !important; } /* ───────────────────────────────────────────── 4. Image & Animation Overrides ───────────────────────────────────────────── */ /* Dim images so they don't blast the retina */ body.migraine-mode img { filter: brightness(0.8) contrast(0.9) !important; transition: filter 0.4s ease-in-out !important; } /* * Logos — invert dark logos so they remain visible on the dark navy background. * Targets the Elementor Site Logo widget, WP theme custom logo, * and common header image placements. */ body.migraine-mode .elementor-widget-site-logo img, body.migraine-mode .custom-logo-link img, body.migraine-mode .custom-logo, body.migraine-mode .site-branding img, body.migraine-mode .navbar-brand img, body.migraine-mode .logo img, body.migraine-mode header .elementor-widget-image img, body.migraine-mode .elementor-location-header .elementor-widget-image img { filter: invert(1) brightness(0.9) !important; } /* * Inlined SVG Logos * Invert only the text portions of the logo, preserving the icon colors. */ body.migraine-mode .dmm-logo-text { filter: invert(1) brightness(0.9) !important; transition: filter 0.4s ease-in-out !important; } body.migraine-mode svg.dmm-inlined-logo { filter: none !important; } /* * Disable / heavily slow Elementor entrance animations. * Elementor uses Animate.css classes via data-animation attributes. * We override animation-duration and animation-delay to near-zero. */ body.migraine-mode [data-settings*='"_animation"'], body.migraine-mode [data-settings*='"animation"'], body.migraine-mode .animated, body.migraine-mode .elementor-animation, body.migraine-mode .e-animated { animation-duration: 0.001s !important; animation-delay: 0s !important; transition-duration: 0.001s !important; animation-iteration-count: 1 !important; } /* Respect OS-level preference as well */ @media (prefers-reduced-motion: reduce) { body [data-settings*='"_animation"'], body [data-settings*='"animation"'], body .animated { animation-duration: 0.001s !important; animation-delay: 0s !important; } } /* ───────────────────────────────────────────── 5. Toggle Switch Component ───────────────────────────────────────────── */ /* Wrapper — flex row, RTL-friendly */ .dmm-toggle-wrapper { display: flex; align-items: center; gap: 12px; direction: rtl; /* Hebrew label on the right */ } /* Label text */ .dmm-toggle-label { font-size: 16px; font-weight: 500; color: var(--dmm-text-color, #190D59); cursor: pointer; user-select: none; line-height: 1; transition: color 0.4s ease-in-out; } /* Track — the pill-shaped outer shell */ .dmm-switch-track { position: relative; display: inline-flex; align-items: center; width: var(--dmm-track-width, 64px); height: var(--dmm-track-height, 34px); background-color: var(--dmm-track-bg, #190D59); border-radius: 999px; cursor: pointer; border: 2px solid transparent; box-shadow: 0 2px 8px rgba(25, 13, 89, 0.25); transition: background-color 0.35s ease-in-out, border-color 0.35s ease-in-out, box-shadow 0.35s ease-in-out; flex-shrink: 0; } /* Hide native checkbox visually but keep it accessible */ .dmm-toggle-checkbox { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; appearance: none; } /* Handle — the white circle that slides */ .dmm-switch-handle { position: absolute; top: 50%; left: var(--dmm-handle-offset, 4px); transform: translateY(-50%); width: var(--dmm-handle-size, 26px); height: var(--dmm-handle-size, 26px); background-color: var(--dmm-handle-bg, #FFFFFF); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.35s ease-in-out, box-shadow 0.35s ease-in-out; } /* Moon & Sun icon — shared sizing */ .dmm-moon-icon, .dmm-sun-icon { width: 16px; height: 16px; transition: opacity 0.25s ease-in-out, transform 0.4s ease-in-out; position: absolute; display: block; } /* Default state: moon visible, sun hidden */ .dmm-moon-icon { color: var(--dmm-icon-color, #190D59); opacity: 1; transform: rotate(0deg); } .dmm-sun-icon { color: #FFD700; opacity: 0; transform: rotate(90deg) scale(0.6); } /* Keep the handle centred when icons are position:absolute */ .dmm-switch-handle { position: absolute; top: 50%; left: var(--dmm-handle-offset, 4px); transform: translateY(-50%); width: var(--dmm-handle-size, 26px); height: var(--dmm-handle-size, 26px); background-color: var(--dmm-handle-bg, #FFFFFF); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.35s ease-in-out, box-shadow 0.35s ease-in-out; } /* ── Active state: checkbox is checked ───────── */ /* Slide handle to right */ .dmm-toggle-checkbox:checked ~ .dmm-switch-handle, .dmm-switch-track[aria-checked="true"] .dmm-switch-handle { left: calc(100% - var(--dmm-handle-size, 26px) - var(--dmm-handle-offset, 4px)); } /* Swap icons: hide moon, show sun */ .dmm-toggle-checkbox:checked ~ .dmm-switch-handle .dmm-moon-icon, .dmm-switch-track[aria-checked="true"] .dmm-switch-handle .dmm-moon-icon { opacity: 0; transform: rotate(-90deg) scale(0.6); } .dmm-toggle-checkbox:checked ~ .dmm-switch-handle .dmm-sun-icon, .dmm-switch-track[aria-checked="true"] .dmm-switch-handle .dmm-sun-icon { opacity: 1; transform: rotate(0deg) scale(1); } /* Focus ring — keyboard navigation only (Tab key). * :focus-visible fires for keyboard, NOT for mouse clicks. * :has() is supported in all modern browsers. */ .dmm-switch-track:has(.dmm-toggle-checkbox:focus-visible) { outline: 3px solid var(--dmm-accent-color, #9482B5); outline-offset: 3px; } /* Suppress the native checkbox outline (it’s visually hidden anyway) */ .dmm-toggle-checkbox:focus, .dmm-toggle-checkbox:focus-visible { outline: none; } /* Hover — subtle lift */ .dmm-switch-track:hover { box-shadow: 0 4px 16px rgba(25, 13, 89, 0.35); }