[data-theme="dark"] { --color-bg: #0F0F0F; --color-content-bg: #0F0F0F; --color-text: #E4E4E4; --color-text-sec: #a1a1aa; --color-headline: #fafafa; --color-headline-links: #e04a3c; --color-links: #D6D6CB; --color-primary: #2056EE; --color-secondary: #94a3b8; --color-tertiary: #2dd4bf; --color-action: #e04a3c; --color-accent: #fbbf24; --color-button: #e04a3c; --color-button-text: #ffffff; --color-button-sec: #8D8281; --color-button-sec-text: #ffffff; --color-border: #2D2D2D; --color-primary-rgb: 32, 86, 238; --color-button-rgb: 224, 74, 60; --color-surface-1: #0F0F0F; --color-surface-2: color-mix(in srgb, #0F0F0F, white 6%); --color-surface-3: color-mix(in srgb, #0F0F0F, white 10%); --color-header-bg: #1B232E; --color-header-text: #FFFFFE; --color-header-title: #fafafa; --color-header-tagline: #a1a1aa; --color-header-menu-links: #EEEEEE; --color-header-menu-hover: #DDDDDD; --color-header-menu-active: #DDDDDD; --color-header-submenu-bg: #1B232E; --color-header-submenu-links: #e4e4e7; --color-header-submenu-hover: #DDDDDD; --color-main-menu-bg: #1a1a1a; --color-main-menu-links: #e4e4e7; --color-main-menu-active: #e04a3c; --color-main-menu-subtext: #a1a1aa; --color-main-menu-submenu-bg: #1a1a1a; --color-main-menu-submenu-links: #e4e4e7; --color-main-menu-submenu-hover: #e4e4e7; --color-main-menu-icons: #e4e4e7; --color-main-menu-social: #e04a3c; --color-sidebar-bg: #1a1a1a; --color-sidebar-text: #a1a1aa; --color-sidebar-title: #fafafa; --color-sidebar-links: #EEEEEE; --color-footer-bg: #080808; --color-footer-text: #EEEEEE; --color-footer-title: #FFFFFE; --color-footer-links: #EEEEEE; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow: 0 2px 8px rgba(0, 0, 0, 0.45); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.55); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.65); color-scheme: dark; accent-color: var(--color-accent); } [data-theme="dark"] img { opacity: 0.8; } [data-theme="dark"] details { border-color: color-mix(in srgb, var(--color-border), transparent 20%); background: var(--color-content-bg); } [data-theme="dark"] details[open] { border-color: color-mix(in srgb, var(--color-border), var(--color-text) 20%); } [data-theme="dark"] details[open] summary { border-bottom-color: color-mix(in srgb, var(--color-border), transparent 20%); } [data-theme="dark"] details summary:hover { color: var(--color-accent); } @media (max-width: 768px) { [data-theme="dark"] .header-menu { background-color: var(--color-header-bg); color: var(--color-header-text); } [data-theme="dark"] .header-menu a, [data-theme="dark"] .header-menu .menu-toggle, [data-theme="dark"] .header-menu .menu-header > .menu-item > a, [data-theme="dark"] .mobile-menu-close, [data-theme="dark"] .mobile-menu-back { color: var(--color-header-menu-links); } [data-theme="dark"] .mobile-menu-nav { border-bottom: 1px solid color-mix(in srgb, var(--color-border), transparent 10%); } [data-theme="dark"] .menu-header .menu-item:not(:last-child), [data-theme="dark"] .menu-header .sub-menu .menu-item:not(:last-child) { border-bottom: 1px solid color-mix(in srgb, var(--color-border), transparent 10%); } } [data-theme="dark"] pre, [data-theme="dark"] code { background: color-mix(in srgb, var(--color-content-bg), white 5%); } [data-theme="dark"] code a { color: var(--color-links); } [data-theme="dark"] hr { border-block-start: 1px solid color-mix(in srgb, var(--color-border), white 10%); border-block-end: 1px solid color-mix(in srgb, var(--color-border), black 20%); } [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background-color: var(--color-content-bg); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] select { color: var(--color-text-sec); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='currentColor' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); } [data-theme="dark"] .wp-block-list.is-style-numbered li::before { background: color-mix(in srgb, var(--color-primary), var(--color-bg) 35%); color: var(--color-text-light); } [data-theme="dark"] .wp-block-table.is-style-services thead th, [data-theme="dark"] .wp-block-table.is-style-services.has-sticky-column thead th:first-child { background: color-mix(in srgb, var(--color-content-bg), var(--color-bg) 55%); color: var(--color-headline); } @media (max-width: 768px) { [data-theme="dark"] .wp-block-table[class*="is-style-"]::after { background: linear-gradient(to right, transparent, color-mix(in srgb, var(--color-bg), var(--color-text) 20%)); } } [data-theme="dark"] .wp-block-media-text:not(.has-background) .wp-block-media-text__content { background: var(--color-content-bg); } [data-theme="dark"] .wp-block-media-text:not(.has-text-color) .wp-block-media-text__content { color: var(--color-text); } .md-dark-mode-toggle { --toggle-size: 40px; --toggle-bg: color-mix(in srgb, var(--color-text), transparent 92%); --toggle-bg-hover: color-mix(in srgb, var(--color-text), transparent 88%); --toggle-border: color-mix(in srgb, var(--color-text), transparent 85%); align-items: center; background: var(--toggle-bg); border: 1px solid var(--toggle-border); border-radius: var(--radius-full); cursor: pointer; display: inline-flex; height: var(--toggle-size); justify-content: center; overflow: hidden; position: relative; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.3s ease; width: var(--toggle-size); } .md-dark-mode-toggle:hover { background: var(--toggle-bg-hover); border-color: color-mix(in srgb, var(--color-primary), transparent 70%); transform: scale(1.05); } .md-dark-mode-toggle:active { transform: scale(0.95); } .md-dark-mode-toggle:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary), transparent 60%); outline: none; } .md-dark-mode-toggle [data-theme-icon] { align-items: center; display: inline-flex; font-size: 1.15rem; justify-content: center; line-height: 1; opacity: 0; position: absolute; transform: scale(0.5) rotate(-30deg); transition: opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease, filter 0.3s ease; z-index: 1; } [data-theme="dark"] .md-dark-mode-toggle [data-theme-icon="light"] { opacity: 1; transform: scale(1) rotate(0deg); } :root:not([data-theme="dark"]) .md-dark-mode-toggle [data-theme-icon="dark"], [data-theme="light"] .md-dark-mode-toggle [data-theme-icon="dark"] { opacity: 1; transform: scale(1) rotate(0deg); } .md-dark-mode-toggle [data-theme-icon="light"] { color: #f59e0b; filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.5)); } .md-dark-mode-toggle:hover [data-theme-icon="light"] { filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.7)); } .md-dark-mode-toggle [data-theme-icon="dark"] { color: #6366f1; filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.5)); } .md-dark-mode-toggle:hover [data-theme-icon="dark"] { filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.7)); } .md-dark-mode-toggle.is-animating { animation: md-toggle-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } .md-dark-mode-toggle.is-animating [data-theme-icon] { animation: md-icon-enter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes md-toggle-bounce { 0%, 100% { transform: scale(1); } 30% { transform: scale(0.9); } 60% { transform: scale(1.1); } } @keyframes md-icon-enter { 0% { opacity: 0; transform: scale(0.3) rotate(-90deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } } @media (prefers-reduced-motion: reduce) { .md-dark-mode-toggle, .md-dark-mode-toggle [data-theme-icon] { transition: none; } .md-dark-mode-toggle.is-animating, .md-dark-mode-toggle.is-animating [data-theme-icon] { animation: none; } }