/** * RM_A-DARK Dark Mode Styles * * Targeted CSS overrides for dark mode using the .rma-dark-mode class on . * No existing CSS files are modified — all overrides are scoped here. * * Color system defined via CSS Custom Properties on html.rma-dark-mode: * --dm-bg #1a1a1a Background * --dm-text #ffffff Primary text * --dm-secondary #e8e8e8 Secondary text (type labels, location, links) * --dm-tertiary #d0d0d0 Toggle button * --dm-muted #cccccc Loading, scroll-to-top * --dm-focus #88ccff Focus outlines, spinner accent * --dm-btn-bg #222222 Button backgrounds (filter, search) * --dm-hover #333333 Hover states, thumbnail backgrounds * --dm-caption #e0e0e0 Image captions, lightbox close * --dm-overlay rgba(30, 30, 30, 0.95) Video/caption overlay * --dm-black #000000 Lightbox backdrop */ /* ─── Transition (temporary class, active only during mode switch) ─── */ html.rma-dark-transitioning *, html.rma-dark-transitioning *::before, html.rma-dark-transitioning *::after { transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease !important; } /* ─── Custom Properties ─── */ html.rma-dark-mode { --dm-bg: #1a1a1a; --dm-text: #ffffff; --dm-secondary: #e8e8e8; --dm-tertiary: #d0d0d0; --dm-muted: #cccccc; --dm-focus: #88ccff; --dm-btn-bg: #222222; --dm-hover: #333333; --dm-caption: #e0e0e0; --dm-overlay: rgba(30, 30, 30, 0.95); --dm-black: #000000; } /* ─── Base ─── */ html.rma-dark-mode, html.rma-dark-mode body { background-color: var(--dm-bg); color: var(--dm-text); } /* ─── Header ─── */ html.rma-dark-mode .rma-header { background-color: color-mix(in srgb, var(--dm-bg) 80%, transparent); } /* ─── Navigation — Language ─── */ html.rma-dark-mode .rma-nav-language, html.rma-dark-mode .rma-nav-language a { color: var(--dm-nav-language, var(--dm-secondary)) !important; } html.rma-dark-mode .rma-nav-language a:hover { color: var(--dm-text) !important; } html.rma-dark-mode .rma-language-list .current-lang a { color: var(--dm-text); } /* ─── Navigation — Footer ─── */ html.rma-dark-mode .rma-nav-footer { color: var(--dm-text) !important; } html.rma-dark-mode .rma-nav-footer a { color: var(--dm-text) !important; } html.rma-dark-mode .rma-nav-footer a:hover { color: var(--dm-text) !important; } /* ─── Titles & Section Headers ─── */ html.rma-dark-mode .rma-section-title, html.rma-dark-mode .rma-gallery-title, html.rma-dark-mode .rma-related-projects-title { color: var(--dm-text) !important; } /* ─── Project Grid — Thumbnails ─── */ html.rma-dark-mode .rma-project-thumbnail { background: var(--dm-bg); } html.rma-dark-mode .rma-project-type { color: var(--dm-grid-type, var(--dm-secondary)) !important; } html.rma-dark-mode .rma-project-title { color: var(--dm-grid-title, var(--dm-text)) !important; } html.rma-dark-mode .rma-project-location { color: var(--dm-grid-location, var(--dm-text)) !important; } /* ─── Project Grid — Thumbnail Frame ─── */ html.rma-dark-mode .rma-frame-svg path { stroke: var(--dm-text); } /* ─── Project Grid — View Counter ─── */ html.rma-dark-mode .rma-view-count::after { background: var(--rma-dot-dark, #d0d0d0); } html.rma-dark-mode .rma-view-outline .rma-view-count::after { background: var(--dm-bg); border-color: var(--rma-dot-dark, #d0d0d0); } html.rma-dark-mode .rma-view-tooltip { color: var(--dm-text); background: rgba(30, 30, 30, 0.9); } /* ─── Project Page — Header ─── */ html.rma-dark-mode .rma-project-header-title { color: var(--dm-proj-title, var(--dm-text)) !important; } html.rma-dark-mode .rma-project-header-location { color: var(--dm-proj-location, var(--dm-secondary)) !important; } html.rma-dark-mode .rma-project-header-data { color: var(--dm-proj-data, var(--dm-secondary)) !important; } /* ─── Project Page — Text ─── */ html.rma-dark-mode .rma-project-text, html.rma-dark-mode .rma-project-text p { color: var(--dm-proj-text, var(--dm-text)) !important; } html.rma-dark-mode .rma-project-text a { color: var(--dm-proj-link, var(--dm-secondary)) !important; } html.rma-dark-mode .rma-project-text a:hover { color: var(--dm-proj-text, var(--dm-text)) !important; } html.rma-dark-mode .rma-expand-toggle { color: var(--dm-text) !important; } html.rma-dark-mode .rma-expand-toggle:hover { color: var(--dm-secondary) !important; } /* ─── Project Page — Image Captions ─── */ html.rma-dark-mode .rma-image-caption, html.rma-dark-mode .rma-image-caption .rma-image-title, html.rma-dark-mode .rma-image-caption .rma-image-copyright { color: #e5e5e5 !important; background: var(--dm-overlay) !important; } /* Touch devices: override .caption-visible white background (higher specificity) */ html.rma-dark-mode .rma-gallery-image.caption-visible .rma-image-caption, html.rma-dark-mode .rma-main-image.caption-visible .rma-image-caption, html.rma-dark-mode .rma-main-media.caption-visible .rma-image-caption, html.rma-dark-mode .caption-visible .rma-image-caption .rma-image-title, html.rma-dark-mode .caption-visible .rma-image-caption .rma-image-copyright { background: var(--dm-overlay) !important; color: #e5e5e5 !important; } /* ─── Generic Page Content (Imprint, Privacy) ─── */ html.rma-dark-mode .rma-page-content h1 { color: var(--dm-text) !important; } html.rma-dark-mode .rma-page-content p { color: var(--dm-text) !important; } /* ─── Filter Buttons (RM_A-FLTR) ─── */ html.rma-dark-mode .rma-filter-btn { background: var(--dm-btn-bg) !important; border: 1px solid var(--dm-text) !important; color: var(--dm-text) !important; } html.rma-dark-mode .rma-filter-btn::before { border-color: var(--dm-text) transparent transparent var(--dm-text) !important; } html.rma-dark-mode .rma-filter-btn::after { border-color: var(--dm-btn-bg) transparent transparent var(--dm-btn-bg) !important; } @media (pointer: fine) { html.rma-dark-mode .rma-filter-btn:hover { background: var(--dm-hover) !important; } html.rma-dark-mode .rma-filter-btn:hover::after { border-color: var(--dm-hover) transparent transparent var(--dm-hover) !important; } } html.rma-dark-mode .rma-filter-btn[aria-pressed="true"], html.rma-dark-mode .rma-filter-btn.active { background: var(--dm-text) !important; color: var(--dm-bg) !important; } html.rma-dark-mode .rma-filter-btn[aria-pressed="true"]::before, html.rma-dark-mode .rma-filter-btn.active::before { border-color: var(--dm-text) transparent transparent var(--dm-text) !important; } html.rma-dark-mode .rma-filter-btn[aria-pressed="true"]::after, html.rma-dark-mode .rma-filter-btn.active::after { border-color: var(--dm-text) transparent transparent var(--dm-text) !important; } /* ─── Search Field (RM_A-SEARCH) ─── */ /* Higher specificity with !important to override search.css inline styles */ html.rma-dark-mode .rma-search-input, html.rma-dark-mode input.rma-search-input { color: var(--dm-text) !important; background-color: var(--dm-btn-bg) !important; border: 1px solid var(--dm-text) !important; } html.rma-dark-mode .rma-search-field-wrapper::before { border-color: var(--dm-text) transparent transparent var(--dm-text) !important; } html.rma-dark-mode .rma-search-field-wrapper::after { border-color: var(--dm-btn-bg) transparent transparent var(--dm-btn-bg) !important; } html.rma-dark-mode .rma-search-input::placeholder, html.rma-dark-mode input.rma-search-input::placeholder { color: var(--dm-text) !important; opacity: 0.7 !important; } /* Focus state */ html.rma-dark-mode .rma-search-field-wrapper input.rma-search-input:focus, html.rma-dark-mode .rma-search-field-wrapper input.rma-search-input:focus-visible { background-color: var(--dm-text) !important; color: var(--dm-bg) !important; } html.rma-dark-mode .rma-search-field-wrapper:focus-within::after { border-color: var(--dm-text) transparent transparent var(--dm-text) !important; } html.rma-dark-mode .rma-search-field-wrapper input.rma-search-input:focus::placeholder { color: var(--dm-bg) !important; opacity: 0.5 !important; } /* ─── Search Overlay (RM_A-SEARCH) ─── */ html.rma-dark-mode .rma-search-overlay-content { background-color: var(--dm-bg); } html.rma-dark-mode .rma-search-loading { color: var(--dm-muted); } html.rma-dark-mode .rma-search-loading-spinner { border-color: #555555; border-top-color: var(--dm-focus); } html.rma-dark-mode .rma-search-no-results { color: var(--dm-muted); } html.rma-dark-mode .rma-search-result-thumbnail { background-color: var(--dm-hover); } html.rma-dark-mode .rma-search-result-meta { color: #bbbbbb; } html.rma-dark-mode .rma-search-result-title { color: var(--dm-secondary); } html.rma-dark-mode .rma-search-result-title:hover { color: var(--dm-text); } html.rma-dark-mode .rma-search-result-parent, html.rma-dark-mode .rma-search-result-type { color: #aaaaaa; } /* Header when search overlay is open */ html.rma-dark-mode body.rma-search-open .rma-header { background-color: var(--dm-bg); } /* ─── Lightbox (RM_A-LB) ─── */ html.rma-dark-mode .rma-lightbox-backdrop { background: var(--dm-black); } html.rma-dark-mode .rma-lightbox-image-container { background-color: var(--dm-black); } html.rma-dark-mode .rma-lightbox-close { color: var(--dm-caption); } html.rma-dark-mode .rma-lightbox-close:hover { color: var(--dm-text); } html.rma-dark-mode .rma-lightbox-description { color: var(--dm-lb-description, var(--dm-caption)) !important; } /* Lightbox navigation cursors — light arrows for dark background */ /* SVG data-URIs remain hardcoded (CSS custom properties don't work in URL-encoded SVGs) */ html.rma-dark-mode .rma-lightbox-prev { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cdefs%3E%3Cfilter id='glow' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeDropShadow dx='0' dy='0' stdDeviation='0.8' flood-color='black' flood-opacity='0.6'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23glow)'%3E%3Cline x1='19' y1='12' x2='5' y2='12'%3E%3C/line%3E%3Cpolyline points='12 19 5 12 12 5'%3E%3C/polyline%3E%3C/g%3E%3C/svg%3E") 16 16, w-resize; } html.rma-dark-mode .rma-lightbox-next { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cdefs%3E%3Cfilter id='glow' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeDropShadow dx='0' dy='0' stdDeviation='0.8' flood-color='black' flood-opacity='0.6'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23glow)'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/g%3E%3C/svg%3E") 16 16, e-resize; } /* ─── Video Player ─── */ html.rma-dark-mode .rma-video-play-overlay { background: var(--dm-overlay); color: #f0f0f0; } html.rma-dark-mode .rma-video-play-overlay:hover { background: var(--dm-hover); } /* ─── Scroll to Top ─── */ html.rma-dark-mode .rma-scroll-to-top { color: var(--dm-muted); } html.rma-dark-mode .rma-scroll-to-top:hover, html.rma-dark-mode .rma-scroll-to-top:focus { color: var(--dm-text); } /* ─── Focus & Accessibility ─── */ html.rma-dark-mode *:focus { outline-color: var(--dm-focus); } html.rma-dark-mode *:focus-visible { outline-color: var(--dm-focus); } html.rma-dark-mode .rma-filter-btn:focus, html.rma-dark-mode .rma-filter-btn:focus-visible { outline-color: var(--dm-focus); } html.rma-dark-mode .rma-video-play-overlay:focus-visible { outline-color: var(--dm-focus); } /* ─── Toggle Button ─── */ .rma-dark-toggle { background: transparent; border: none; cursor: pointer; padding: 0; margin: 0; position: relative; top: 0; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: #545454; transition: color 0.2s ease; vertical-align: middle; outline: none; flex-shrink: 0; } .rma-dark-toggle:hover { color: #343434; } .rma-dark-toggle:focus-visible { outline: 2px solid #343434; outline-offset: 2px; } .rma-dark-toggle svg { width: 18px; height: 18px; } /* Icon toggle: show moon in light mode, sun in dark mode. Both SVGs are rendered server-side; CSS controls visibility. */ .rma-dark-toggle-icon-sun { display: none; } html.rma-dark-mode .rma-dark-toggle-icon-moon { display: none; } html.rma-dark-mode .rma-dark-toggle-icon-sun { display: inline; } /* Toggle button colors in dark mode */ html.rma-dark-mode .rma-dark-toggle { color: var(--dm-tertiary); } html.rma-dark-mode .rma-dark-toggle:hover { color: var(--dm-text); } html.rma-dark-mode .rma-dark-toggle:focus-visible { outline-color: var(--dm-focus); } /* Touch devices: larger target area for icon toggle */ @media (hover: none) and (pointer: coarse) { .rma-dark-toggle:not(.rma-dark-toggle-gradient):not(.rma-dark-toggle-circle) { width: 44px; height: 44px; min-width: 44px; min-height: 44px; } } /* ─── Gradient Toggle ─── */ /* Button container — transparent touch target, no visible border */ .rma-dark-toggle.rma-dark-toggle-gradient { width: 90px; padding: 0; border: none; border-radius: 0; background: transparent; cursor: pointer; position: relative; top: 0; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; flex-shrink: 0; outline: none; color: inherit; font: inherit; -webkit-appearance: none; appearance: none; } /* Visual track — carries the rounded border */ .rma-dark-toggle-track { width: 90px; height: 18px; border: 1px solid #747474; border-radius: 9px; background: transparent; position: relative; display: inline-flex; align-items: center; pointer-events: none; flex-shrink: 0; } /* Moon icon on the right (light mode) */ .rma-dark-toggle-track::after { content: ''; position: absolute; width: 10px; height: 10px; top: 50%; right: 5px; transform: translateY(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23343434' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E") center / contain no-repeat; pointer-events: none; transition: opacity 0.3s ease; } /* Sun icon on the left (dark mode) */ .rma-dark-toggle-track::before { content: ''; position: absolute; width: 10px; height: 10px; top: 50%; left: 5px; transform: translateY(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cline x1='12' y1='1' x2='12' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='23'/%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64'/%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78'/%3E%3Cline x1='1' y1='12' x2='3' y2='12'/%3E%3Cline x1='21' y1='12' x2='23' y2='12'/%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36'/%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22'/%3E%3C/svg%3E") center / contain no-repeat; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } /* Dark mode: show sun, hide moon */ html.rma-dark-mode .rma-dark-toggle-track::before { opacity: 1; } html.rma-dark-mode .rma-dark-toggle-track::after { opacity: 0; } .rma-dark-toggle-knob { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #343434; background: #ffffff; position: absolute; left: -1px; top: 50%; transform: translateY(-50%); transition: left 0.3s ease; pointer-events: none; } /* Knob slides right in dark mode */ html.rma-dark-mode .rma-dark-toggle-knob { left: calc(100% - 15px); border-color: #ffffff; } html.rma-dark-mode .rma-dark-toggle-track { border-color: #ffffff; } .rma-dark-toggle.rma-dark-toggle-gradient:hover .rma-dark-toggle-track { border-color: #545454; } html.rma-dark-mode .rma-dark-toggle.rma-dark-toggle-gradient:hover .rma-dark-toggle-track { border-color: #ffffff; } .rma-dark-toggle.rma-dark-toggle-gradient:focus-visible { outline: 2px solid #343434; outline-offset: 2px; } html.rma-dark-mode .rma-dark-toggle.rma-dark-toggle-gradient:focus-visible { outline-color: var(--dm-focus); } /* Smaller screens: reduce gradient toggle width to ~65% */ @media (max-width: 768px) { .rma-dark-toggle.rma-dark-toggle-gradient { width: 58px; } .rma-dark-toggle-track { width: 58px; } } /* Touch devices: expand button hit area, track stays at visual 18px */ @media (hover: none) and (pointer: coarse) { .rma-dark-toggle.rma-dark-toggle-gradient { min-height: 44px; } } /* ─── Square Toggle ─── */ /* Button container — same layout as gradient */ .rma-dark-toggle.rma-dark-toggle-square { width: 90px; padding: 0; border: none; border-radius: 0; background: transparent; cursor: pointer; position: relative; top: 0; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; flex-shrink: 0; outline: none; color: inherit; font: inherit; -webkit-appearance: none; appearance: none; } /* Track — square corners */ .rma-dark-toggle-square .rma-dark-toggle-track { border-radius: 0; } /* Knob — narrow standing rectangle, covers frame borders exactly */ .rma-dark-toggle-square .rma-dark-toggle-knob { width: 7px; height: 18px; border-radius: 0; left: -1px; background: #343434; } /* Knob slides to right edge in dark mode, white background */ html.rma-dark-mode .rma-dark-toggle-square .rma-dark-toggle-knob { left: calc(100% - 6px); background: #ffffff; } /* Hover */ .rma-dark-toggle.rma-dark-toggle-square:hover .rma-dark-toggle-track { border-color: #545454; } html.rma-dark-mode .rma-dark-toggle.rma-dark-toggle-square:hover .rma-dark-toggle-track { border-color: #ffffff; } /* Focus */ .rma-dark-toggle.rma-dark-toggle-square:focus-visible { outline: 2px solid #343434; outline-offset: 2px; } html.rma-dark-mode .rma-dark-toggle.rma-dark-toggle-square:focus-visible { outline-color: var(--dm-focus); } /* Smaller screens */ @media (max-width: 768px) { .rma-dark-toggle.rma-dark-toggle-square { width: 58px; } .rma-dark-toggle-square .rma-dark-toggle-track { width: 58px; } } /* Touch devices */ @media (hover: none) and (pointer: coarse) { .rma-dark-toggle.rma-dark-toggle-square { min-height: 44px; } } /* ─── Circle Toggle ─── */ .rma-dark-toggle.rma-dark-toggle-circle { width: 14px; height: 14px; padding: 0; border: 1px solid #343434; border-radius: 50%; background: #ffffff; cursor: pointer; position: relative; top: 0; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; flex-shrink: 0; outline: none; -webkit-appearance: none; appearance: none; transition: background-color 0.2s ease; } @media (pointer: fine) { .rma-dark-toggle.rma-dark-toggle-circle:hover { background: #343434; } } .rma-dark-toggle.rma-dark-toggle-circle:focus-visible { outline: 2px solid #343434; outline-offset: 2px; } /* Dark mode */ html.rma-dark-mode .rma-dark-toggle.rma-dark-toggle-circle { background: #000000; border-color: #ffffff; } @media (pointer: fine) { html.rma-dark-mode .rma-dark-toggle.rma-dark-toggle-circle:hover { background: #ffffff; } } html.rma-dark-mode .rma-dark-toggle.rma-dark-toggle-circle:focus-visible { outline-color: var(--dm-focus); } /* Touch devices: invisible ::after pseudo-element expands touch target to 44px */ @media (hover: none) and (pointer: coarse) { .rma-dark-toggle.rma-dark-toggle-circle { -webkit-tap-highlight-color: transparent; } .rma-dark-toggle.rma-dark-toggle-circle::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; } /* Filled state during touch (replaces :hover) */ .rma-dark-toggle.rma-dark-toggle-circle:active { background: #343434; } html.rma-dark-mode .rma-dark-toggle.rma-dark-toggle-circle:active { background: #ffffff; } } /* ─── Reduced Motion ─── */ @media (prefers-reduced-motion: reduce) { html, .rma-dark-toggle, .rma-dark-toggle-knob, .rma-dark-toggle-track::before, .rma-dark-toggle-track::after { transition-duration: 0.01ms !important; } }