/* Theme Name: SA2026-child-of-2025 Theme URI: https://www.speculumartium.si/ Description: Speculum Artium site theme. Child of Twenty Twenty-Five, ported from the previous Twenty Twenty-Three child (SA2025-child-of-2023). Phase 1: light mode, visually identical to the previous theme. Author: Delavski dom Trbovlje Template: twentytwentyfive Version: 1.0.0 Requires at least: 6.7 Tested up to: 6.8 Requires PHP: 7.4 Text Domain: sa2026-child-of-2025 */ /* ------------------------------------------------------------------------- Custom CSS migrated from Customizer -> Additional CSS of the old theme. (Customizer "Additional CSS" is stored per-theme in the database and does NOT carry over when activating a different theme, so it is baked in here and enqueued from functions.php.) ------------------------------------------------------------------------- */ .skrito { display: none; } .simcal-event-details { display: inline-flex; } .calendar-title { margin-left: 20px; } .calendar-lokacija { margin-left: 20px; } /* ========================================================================= SA2026 — DARK MODE (default) + light/dark toggle ------------------------------------------------------------------------- The site ships dark by default. The dark colour values come from theme.json (and from whichever style variation the admin selects in Appearance -> Editor -> Styles: "Dark — Ink Spectrum / Plum Noir / Slate Teal", or "Light"). A small toggle button (injected into the header) lets each visitor flip to a light view. The choice is stored in localStorage and applied as a data-mode="light" / "dark" attribute on before paint, so there is no flash. Light mode is one shared, clean light palette regardless of which dark variation is active. Selectors use :root:not([data-mode="light"]) and :root[data-mode="light"] so they out-rank the plain :root variables emitted by global styles, independent of stylesheet order. ========================================================================= */ /* Native form controls, scrollbars and UA widgets follow the active mode. */ :root:not([data-mode="light"]) { color-scheme: dark; } :root[data-mode="light"] { color-scheme: light; } /* DARK (default): the palette defines 9 *black* translucent overlays (used for hairline borders / subtle fills). On a dark canvas those are invisible, so remap them to white-based translucency. */ :root:not([data-mode="light"]) { --wp--preset--color--black-trans-10: rgba(255, 255, 255, 0.06); --wp--preset--color--black-trans-20: rgba(255, 255, 255, 0.10); --wp--preset--color--black-trans-30: rgba(255, 255, 255, 0.16); --wp--preset--color--black-trans-40: rgba(255, 255, 255, 0.24); --wp--preset--color--black-trans-50: rgba(255, 255, 255, 0.32); --wp--preset--color--black-trans-60: rgba(255, 255, 255, 0.45); --wp--preset--color--black-trans-70: rgba(255, 255, 255, 0.60); --wp--preset--color--black-trans-80: rgba(255, 255, 255, 0.75); --wp--preset--color--black-trans-90: rgba(255, 255, 255, 0.88); } /* LIGHT (toggle): restore the original light palette. Shared across every dark variation, so toggling to light always lands on the familiar look. */ :root[data-mode="light"] { --wp--preset--color--base: #ffffff; --wp--preset--color--contrast: #000000; --wp--preset--color--secondary: #345C00; --wp--preset--color--tertiary: #F6F6F6; --wp--preset--color--black-trans-10: #00000019; --wp--preset--color--black-trans-20: #00000033; --wp--preset--color--black-trans-30: #0000004C; --wp--preset--color--black-trans-40: #00000066; --wp--preset--color--black-trans-50: #0000007F; --wp--preset--color--black-trans-60: #00000099; --wp--preset--color--black-trans-70: #000000B2; --wp--preset--color--black-trans-80: #000000CC; --wp--preset--color--black-trans-90: #000000E5; } /* Primary (neon-green) buttons keep dark text in BOTH modes — light text on neon green fails contrast. theme.json sets button text to "contrast", which is light in dark mode, so pin it dark here. */ .wp-element-button, .wp-block-button__link { color: #0B0B0B; } .wp-element-button:hover, .wp-block-button__link:hover, .wp-element-button:focus, .wp-block-button__link:focus { background-color: #C7FF6B; color: #0B0B0B; } /* Always-visible keyboard focus indicator (WCAG 2.4.7 / 2.4.11). */ :where(a, button, input, textarea, select, summary, .wp-block-navigation-item__content):focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; } /* Header banner is a black wordmark + green dot on transparency, made for a light page. Until a light/white banner asset is supplied (see DARK-MODE-NOTES.md), invert it in dark mode so the wordmark stays legible. Note: the inversion shifts the green dot to a muted green; a dedicated *-DARK.png keeps the dot crisp. */ :root:not([data-mode="light"]) .sa-header-banner img { filter: invert(1) hue-rotate(180deg); } /* ---- Dark/light toggle button (injected into the header by functions.php) */ .sa-mode-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; margin: 0 0 0 0.5rem; background: transparent; border: 1px solid var(--wp--preset--color--black-trans-40); border-radius: 999px; color: var(--wp--preset--color--contrast); cursor: pointer; line-height: 0; transition: border-color 0.15s ease, background-color 0.15s ease; } .sa-mode-toggle:hover { border-color: var(--wp--preset--color--primary); background: var(--wp--preset--color--black-trans-10); } .sa-mode-toggle svg { width: 1.15rem; height: 1.15rem; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Icon shows the mode you'll switch TO: sun while dark, moon while light. */ .sa-mode-toggle .sa-icon-moon { display: none; } .sa-mode-toggle .sa-icon-sun { display: block; } :root[data-mode="light"] .sa-mode-toggle .sa-icon-sun { display: none; } :root[data-mode="light"] .sa-mode-toggle .sa-icon-moon { display: block; } /* ========================================================================= SA2026 — VISUAL POLISH (Phase 3) Typography, a DDT-family accent system, readable photo overlays, carded events, and a dark-friendly calendar card. Accent colours are mode-aware (light DDT tints on dark, dark DDT tints on light) so everything stays AAA. ========================================================================= */ /* Mode-aware accent palette. */ :root { --sa-acc-blue: #95B0C5; --sa-acc-purple: #C9A6B6; --sa-acc-green: #8CB7B2; --sa-acc-red: #F79F88; --sa-acc-lead: #9DFF20; --sa-accent: var(--sa-acc-lead); } :root[data-mode="light"] { --sa-acc-blue: #375D71; --sa-acc-purple: #5A2342; --sa-acc-green: #1B675F; --sa-acc-red: #A03F30; --sa-acc-lead: #345C00; } /* Headings use the bundled DM Sans for more character (was the system font). */ :where(h1, h2, h3, h4, h5, h6, .wp-block-heading, .wp-block-post-title) { font-family: "DM Sans", sans-serif; } /* ---- Accent utilities (add via block editor "Additional CSS class(es)") ---- Put .sa-accent-{blue|purple|green|red} on a section/group to colour its kickers, "more" links and hovers with that DDT family. */ .sa-accent-blue { --sa-accent: var(--sa-acc-blue); } .sa-accent-purple { --sa-accent: var(--sa-acc-purple); } .sa-accent-green { --sa-accent: var(--sa-acc-green); } .sa-accent-red { --sa-accent: var(--sa-acc-red); } /* .sa-kicker turns a short heading/paragraph into a mono label with the dot. */ .sa-kicker { font-family: 'IBM Plex Mono', monospace !important; font-size: var(--wp--preset--font-size--small) !important; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sa-accent) !important; display: flex; align-items: center; gap: 0.6em; } .sa-kicker::before { content: ""; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--sa-accent); flex: none; } /* ---- Project covers: guaranteed-readable overlay text ---- Adds a bottom scrim and forces overlay text light with a soft shadow, so the title/author read over any photo regardless of the colours set in the editor. Applies to WordPress Cover blocks; add the class .sa-cover to any other overlaid element to get the same treatment. */ .wp-block-cover, .sa-cover { overflow: hidden; } .wp-block-cover::after, .sa-cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.42) 30%, rgba(0,0,0,0) 58%); z-index: 0; } .wp-block-cover > .wp-block-cover__inner-container, .sa-cover > * { position: relative; z-index: 1; } .wp-block-cover .wp-block-cover__inner-container :where(h1, h2, h3, h4, .wp-block-post-title, p, a), .sa-cover :where(h1, h2, h3, h4, .wp-block-post-title, p, a) { color: #ffffff !important; text-shadow: 0 1px 4px rgba(0,0,0,0.7); } /* Subtle hover lift for cover cards inside a grid/columns. */ .wp-block-query .wp-block-cover, .wp-block-columns .wp-block-cover { transition: transform 0.18s ease; } .wp-block-query .wp-block-cover:hover, .wp-block-columns .wp-block-cover:hover { transform: translateY(-3px); } /* ---- Spremljevalni dogodki (events) ---- Add the class .sa-events to the container (Query Loop or Group) that holds the event items. Each item gets a carded look with a purple accent edge. Items are matched as query-loop posts OR as manually-classed .sa-event. */ .sa-events { --sa-accent: var(--sa-acc-purple); } .sa-events .wp-block-post, .sa-event { background: var(--wp--preset--color--tertiary); border-left: 2px solid var(--sa-accent); border-radius: 0 10px 10px 0; padding: 14px 16px; margin-bottom: 12px; } .sa-events .wp-block-post-title, .sa-event .wp-block-post-title, .sa-event-title { font-size: var(--wp--preset--font-size--large); margin: 0 0 6px; } .sa-event-date, .sa-events .wp-block-post-date { font-family: 'IBM Plex Mono', monospace; font-size: var(--wp--preset--font-size--small); letter-spacing: 0.04em; text-transform: uppercase; color: var(--sa-accent); margin: 0 0 5px; } .sa-events .wp-block-post-excerpt, .sa-event-excerpt { color: var(--wp--preset--color--black-trans-90); } .sa-event-more, .sa-events .wp-block-read-more, .sa-events .wp-block-post-excerpt__more-link { font-family: 'IBM Plex Mono', monospace; font-size: var(--wp--preset--font-size--small); font-weight: 500; color: var(--sa-accent) !important; text-decoration: none; } .sa-event-more:hover, .sa-events .wp-block-read-more:hover, .sa-events .wp-block-post-excerpt__more-link:hover { text-decoration: underline; } /* ---- Calendar: [gcal_event] card + Simple Calendar (simcal) ---- */ .gcal-event-card { background: var(--wp--preset--color--tertiary); border: 1px solid var(--wp--preset--color--black-trans-20); border-left: 3px solid var(--sa-acc-green); border-radius: 12px; padding: 1.1rem 1.25rem; max-width: 740px; } .gcal-event-title { margin: 0 0 0.35rem; font-size: var(--wp--preset--font-size--large); } .gcal-event-title a { color: var(--wp--preset--color--contrast); text-decoration: none; } .gcal-event-title a:hover { text-decoration: underline; } .gcal-event-date { font-family: 'IBM Plex Mono', monospace; color: var(--sa-acc-green); letter-spacing: 0.03em; margin: 0 0 0.5rem; } .gcal-event-loc { font-family: 'IBM Plex Mono', monospace; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--black-trans-90); margin: 0 0 0.5rem; } .gcal-event-desc { margin-top: 0.5rem; } .gcal-event-actions { margin-top: 0.9rem; } .gcal-event-link { display: inline-block; padding: 0.55rem 0.9rem; background: var(--wp--preset--color--primary); color: #0B0B0B; font-weight: 500; text-decoration: none; border-radius: 0; } .gcal-event-link:hover { background: #C7FF6B; } /* Simple Calendar (simcal) — dark-friendly, mono times, green accent. */ .simcal-event-title, .calendar-title { font-family: "DM Sans", sans-serif; font-weight: 500; } .simcal-event-start, .simcal-event-end, .simcal-event-start-time, .calendar-lokacija { font-family: 'IBM Plex Mono', monospace; color: var(--sa-acc-green); } .simcal-events-list-container .simcal-event, .simcal-event-details { border-bottom: 1px solid var(--wp--preset--color--black-trans-20); }