/* Theme Name: RTN Broadcasting Theme URI: https://rejectthenarrative.org Author: RTN Broadcasting Author URI: https://rejectthenarrative.org Description: Dark, loud full-site-editing block theme for the RTN Broadcasting hub - a nebula broadcasting a signal into the void. Built from scratch (not a child theme) for WordPress FSE, with locally bundled Oswald + Inter fonts and a neon signal-on-void palette. Home of the three pillars - Reject The Narrative (reviews + sociopolitical), the Orion Nebula Project (motorcycle), and RTN Gaming - plus community servers, Discord, and live status. Broadcast + gaming energy, never flat corporate. Version: 0.1.0 Requires at least: 6.6 Tested up to: 7.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: rtn Tags: full-site-editing, block-patterns, block-styles, custom-colors, dark, news, entertainment, one-column, two-columns RTN Broadcasting is free software. You can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 2 of the License, or (at your option) any later version. */ /* ============================================================================= RTN Broadcasting - style.css (BUILD STEP 2) SCOPE / PHILOSOPHY ------------------ theme.json (v3) is the SOURCE OF TRUTH for palette, typography, spacing, layout, shadows, links, headings, buttons and per-block color/type. This file ONLY fills gaps theme.json v3 cannot express. It deliberately does NOT restate any preset value or block style already declared in theme.json. Palette/shadow/spacing/font references use the CSS custom properties WordPress emits (--wp--preset--color--*, --wp--preset--shadow--*, etc.), each with a hex fallback so the file degrades gracefully if loaded outside the global-styles var scope (e.g. an isolated editor iframe edge case). The ONLY hardcoded hex used as a CSS value is the brand glow rgba() - hardcoded per the brief so the neon glow is exact and survives any future palette tweak - plus one scrollbar hover shade flagged inline. ON @font-face - DELIBERATELY OMITTED (full proof in the appendix at EOF). theme.json registers oswald + inter via `fontFace` with `file:./` src pointing at the bundled woff2 (all five files confirmed on disk). WordPress 6.6+ reads those entries and auto-generates + enqueues the @font-face rules. Re-declaring them here would double-declare and risk a double-fetch - a net loss on shared hosting. So: NO @font-face below, by design. PERFORMANCE / ROBUSTNESS NOTES ------------------------------ - Only NON-layout properties are animated (color, background, box-shadow, outline-color, text-decoration-color) so hover/focus never reflows. - No `text-rendering: optimizeLegibility` - it can stall paint on long article copy on low-end mobile, which matters on Bluehost's mobile-first audience. - The optional nebula wash is a fixed, GPU-composited pseudo-element - NOT `background-attachment: fixed`, which janks on mobile scroll. - Every decorative effect (glow, transition, wash) is stripped under prefers-reduced-motion / prefers-contrast / forced-colors, and for print. ============================================================================ */ /* ----------------------------------------------------------------------------- 0. LOCAL TOKENS Non-palette knobs theme.json has no slot for. Palette/shadow/spacing all come from theme.json vars; these are purely local plumbing. -------------------------------------------------------------------------- */ :root { --rtn-transition: 160ms; --rtn-transition-fast: 110ms; --rtn-ease: cubic-bezier(0.4, 0, 0.2, 1); /* Faint translucent Light - the separator hairline on void. One knob. */ --rtn-separator-color: rgba(237, 237, 240, 0.15); } /* ----------------------------------------------------------------------------- 1. ROOT / DOCUMENT Smoothing + sane resize behavior only. theme.json owns colors & type. -------------------------------------------------------------------------- */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ----------------------------------------------------------------------------- 2. SELECTION On-brand highlight: signal-orange fill, void text. No theme.json equivalent. text-shadow:none so a glowing heading never drags its halo into the highlight. -------------------------------------------------------------------------- */ ::selection { background-color: var(--wp--preset--color--signal-orange, #FF6B1A); color: var(--wp--preset--color--void, #0B0D14); text-shadow: none; } ::-moz-selection { background-color: var(--wp--preset--color--signal-orange, #FF6B1A); color: var(--wp--preset--color--void, #0B0D14); text-shadow: none; } /* ----------------------------------------------------------------------------- 3. ACCESSIBLE FOCUS ★ REQUIRED A11Y ★ theme.json removes link underlines, so a strong keyboard focus indicator is non-negotiable. Scoped to :focus-visible (no ring on mouse click). `outline` does NOT trigger reflow, so this is layout-thrash free. -------------------------------------------------------------------------- */ :where(a, button, input, select, textarea, summary, [tabindex], .wp-block-button__link):focus-visible { outline: 2px solid var(--wp--preset--color--nebula-blue, #2E9BFF); outline-offset: 2px; border-radius: 2px; /* cosmetic; softens the ring corners */ } /* Suppress the legacy ring on mouse focus where :focus-visible IS supported. */ :where(a, button):focus:not(:focus-visible) { outline: none; } /* Fallback ONLY for engines without :focus-visible - so a link with no underline never loses its indicator, and modern engines never double-ring. */ @supports not selector(:focus-visible) { :where(a, button, input, select, textarea, summary, [tabindex]):focus { outline: 2px solid var(--wp--preset--color--nebula-blue, #2E9BFF); outline-offset: 2px; } } /* ----------------------------------------------------------------------------- 4. INTENTIONAL TRANSITIONS (reduced-motion aware) theme.json declares the button-glow escalation (glow-orange -> -strong) and link color hover STATES but cannot declare the TRANSITION between them. Added here, gated behind `no-preference`, animating only cheap non-layout props. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { a, .wp-block-button__link, .wp-element-button, button, input[type="submit"] { transition: color var(--rtn-transition) var(--rtn-ease), background-color var(--rtn-transition) var(--rtn-ease), box-shadow var(--rtn-transition) var(--rtn-ease), outline-color var(--rtn-transition-fast) var(--rtn-ease), text-decoration-color var(--rtn-transition) var(--rtn-ease); } } /* ----------------------------------------------------------------------------- 5. HEADING GLYPH GLOW ★ THE HEADLINE ASK ★ theme.json v3 cannot set text-shadow. Add a dual-color nebula neon glow to the MAJOR headings (h1, h2 + the post-title block) - a tight signal-orange core FIRST, a wider nebula-blue halo SECOND. Warm-core/cool-halo layering reads as "a signal glowing in the void". Values are LITERAL brand rgba per spec (#FF6B1A -> 255,107,26 / #2E9BFF -> 46,155,255). Total alpha kept low so Light (#EDEDF0) glyphs stay crisp - this is a halo, not a blur. - h3 gets a whisper of single-color orange (h3 is x-large uppercase Oswald and often the loudest heading on a content page; a faint glow keeps the "loud broadcast" energy without muddying density). h4-h6 stay clean. - core/site-title is INTENTIONALLY excluded: it is small condensed uppercase type where a glow muddies legibility. - Blur radii are em-based so the halo scales with theme.json's FLUID type (h1/display up to 5.5rem): on the big h1 the orange core stays a tight bright point while the blue halo widens convincingly. - STATIC glow => no prefers-reduced-motion gate needed; it IS neutralized under prefers-contrast / forced-colors / print (§8, §9). -------------------------------------------------------------------------- */ h2, .wp-block-post-title { text-shadow: 0 0 0.08em rgba(255, 107, 26, 0.28), 0 0 0.40em rgba(46, 155, 255, 0.18); } /* h1 / display-level headings carry slightly more presence (still subtle). */ h1, h1.wp-block-post-title { text-shadow: 0 0 0.10em rgba(255, 107, 26, 0.34), 0 0 0.45em rgba(46, 155, 255, 0.20); } /* h3 - a whisper of warm signal only, to keep broadcast energy on dense pages. */ h3 { text-shadow: 0 0 0.10em rgba(255, 107, 26, 0.15); } /* -- Opt-in glow utilities for patterns/blocks (Advanced > Additional CSS class). !important so a pattern that deliberately picks a glow overrides the default heading glow above. --------------------------------------------------------- */ .rtn-text-glow-orange { text-shadow: 0 0 0.10em rgba(255, 107, 26, 0.45), 0 0 0.45em rgba(255, 107, 26, 0.25) !important; } .rtn-text-glow-blue { text-shadow: 0 0 0.10em rgba(46, 155, 255, 0.45), 0 0 0.45em rgba(46, 155, 255, 0.25) !important; } /* Dual-color "broadcast" glow for non-heading accents (e.g. a LIVE eyebrow). */ .rtn-text-glow, .rtn-text-glow-signal { text-shadow: 0 0 0.10em rgba(255, 107, 26, 0.30), 0 0 0.50em rgba(46, 155, 255, 0.20) !important; } /* Escape hatch: force-kill any inherited glow on a specific element. */ .rtn-text-glow-none { text-shadow: none !important; } /* ----------------------------------------------------------------------------- 5b. IN-ARTICLE SUBHEAD CASE Long-form readability: h3/h4 INSIDE the article body read as sentence case. core/post-content outputs both .wp-block-post-content and .entry-content, so either hook works; we scope to it so the DISPLAY headings - h1, h2, and the post title - keep their UPPERCASE treatment (set in theme.json) everywhere else (heroes, landings, widgets). Specificity (0,1,1) cleanly beats theme.json's :where()-wrapped element rule (0,1,0); the heading glow on h3 is untouched (only text-transform changes). -------------------------------------------------------------------------- */ .wp-block-post-content h3, .wp-block-post-content h4, .entry-content h3, .entry-content h4 { text-transform: none; } /* ----------------------------------------------------------------------------- 6. FIX core/separator ★ REQUIRED FIX ★ theme.json sets core/separator to color|surface (#14181F) - near-invisible on Void (#0B0D14). Two things must be fixed, and ORDER OF SPECIFICITY MATTERS: (a) THE OPACITY QUIRK (the load-bearing bug). WordPress core ships `.wp-block-separator:not(.has-alpha-channel-opacity){ opacity: 0.4 }` at specificity (0,2,0). Because theme.json used the OPAQUE `surface` preset, WP does NOT add `.has-alpha-channel-opacity`, so that 0.4 quirk APPLIES. A fix that only sets opacity:1 on a (0,1,0) selector LOSES to it (net alpha ~0.15 x 0.4 ~ 0.06 - still invisible). We therefore match core's exact (0,2,0) condition AND add !important, so the line is opaque regardless of stylesheet load order (block themes do not guarantee style.css loads after wp-block-library). We respect a genuinely translucent separator (alpha set via the editor color picker) by scoping to the SAME :not(.has-alpha-channel-opacity) condition - never overriding that deliberate case. (b) THE COLOR. Core paints the line via a border edge using currentColor, and the is-style-dots variant paints dots via ::before currentColor. Setting `color` (drives currentColor) + border-color makes the fix robust across core's current border-bottom geometry and any legacy border-top, without zeroing an edge and fighting core's markup. -------------------------------------------------------------------------- */ /* (a) Defeat core's opacity quirk at matching specificity + load-order-proof. */ .wp-block-separator:not(.has-alpha-channel-opacity) { opacity: 1 !important; } /* (b) Visible faint-Light hairline. color -> currentColor (dots + line), border-color -> the rendered edge, whichever edge core uses. */ .wp-block-separator, .wp-block-separator.is-style-default, .wp-block-separator.is-style-wide { color: var(--rtn-separator-color); border-color: var(--rtn-separator-color); } /* Dots variant draws its glyphs with currentColor - dots are tiny, so give them noticeably more punch than the hairline. */ .wp-block-separator.is-style-dots { color: rgba(237, 237, 240, 0.40); } /* ----------------------------------------------------------------------------- 7. LEAN DARK-THEME NICETIES Small, cheap, removable quality-of-life styles theme.json can't express. -------------------------------------------------------------------------- */ /* 7a. Custom scrollbar - keep the OS-default light bar out of the void. @supports-guarded so unsupported engines fall back to the native bar. */ @supports (scrollbar-color: red blue) { html { scrollbar-color: var(--wp--preset--color--surface, #14181F) var(--wp--preset--color--void, #0B0D14); scrollbar-width: thin; } } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--wp--preset--color--void, #0B0D14); } ::-webkit-scrollbar-thumb { background: var(--wp--preset--color--surface, #14181F); border: 3px solid var(--wp--preset--color--void, #0B0D14); /* inset look */ border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: #1d222c; /* surface one step lighter - too minor for a preset */ } /* 7b. Native control accent (checkbox, radio, range, progress). One cheap line. */ input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--wp--preset--color--signal-orange, #FF6B1A); } /* 7c. Form fields - theme.json doesn't reliably style raw inputs. Match the surface/void system; nebula-blue glow on focus (mirrors the focus ring). */ input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="password"], input[type="number"], input[type="tel"], input[type="date"], textarea, select, .wp-block-search__input { color: var(--wp--preset--color--light, #EDEDF0); background-color: var(--wp--preset--color--surface, #14181F); border: 1px solid rgba(237, 237, 240, 0.18); border-radius: 0.25rem; caret-color: var(--wp--preset--color--signal-orange, #FF6B1A); } /* Placeholder: Light at reduced opacity (not Muted) so it clears the WCAG placeholder-contrast expectation against Surface while still reading as hint. */ ::placeholder { color: rgba(237, 237, 240, 0.55); opacity: 1; /* Firefox dims placeholders by default; keep it consistent */ } input:focus, textarea:focus, select:focus, .wp-block-search__input:focus { border-color: var(--wp--preset--color--nebula-blue, #2E9BFF); box-shadow: var(--wp--preset--shadow--glow-blue, 0 0 0.75rem rgba(46, 155, 255, 0.45), 0 0 1.75rem rgba(46, 155, 255, 0.25)); outline: none; } /* 7d. Media: never overflow the container; drop the inline whitespace gap. */ img, svg, video, iframe { max-width: 100%; height: auto; } iframe { height: revert; /* don't flatten aspect-ratio embeds (e.g. video) */ } /* 7e. OPTIONAL nebula atmosphere ▼▼▼ DELETE THIS WHOLE BLOCK TO GO FLAT ▼▼▼ A very subtle, fixed, GPU-composited radial wash so the void reads as deep space rather than pure flat black. A fixed pseudo-element (NOT background-attachment:fixed, which janks on mobile scroll). Low opacity keeps Light text fully readable; pointer-events:none + z-index:-1 keep it inert. No image request, no JS, no animation. Stripped under contrast/forced-colors (§8) and print (§9). */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; /* behind content; the void body bg shows through */ pointer-events: none; background: radial-gradient(60% 50% at 78% 10%, rgba(255, 107, 26, 0.06) 0%, transparent 60%), radial-gradient(60% 55% at 12% 90%, rgba(46, 155, 255, 0.07) 0%, transparent 62%); } /* ▲▲▲ END nebula atmosphere ▲▲▲ */ /* ----------------------------------------------------------------------------- 7f. LIVE STATUS PILLS (stacked, equal width) The CS2 + GTA pills stack vertically in a centered, fixed-width column so they are equal width regardless of the live map name (CS2 gets the room; GTA gets breathing space; an unusually long map wraps instead of breaking alignment). The CS2 pill is a link to Discord, so only it gets the hover glow. -------------------------------------------------------------------------- */ .rtn-status-row { display: flex; flex-direction: column; gap: 0.5rem; max-width: 30rem; margin-left: auto; margin-right: auto; } .rtn-status-pill { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; width: 100%; box-sizing: border-box; padding: 0.85rem 1.1rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.75rem; background: var(--wp--preset--color--surface, #14181F); color: var(--wp--preset--color--light, #EDEDF0); font-family: var(--wp--preset--font-family--oswald, sans-serif); text-transform: uppercase; text-align: center; line-height: 1.3; text-decoration: none; } .rtn-status-pill__title { font-size: 1.05rem; font-weight: 600; letter-spacing: 0.04em; } .rtn-status-pill__line { font-size: 0.9rem; letter-spacing: 0.06em; color: var(--wp--preset--color--muted, #8A8F9A); } .rtn-status-pill__map { text-transform: none; letter-spacing: 0.02em; } a.rtn-status-pill { transition: border-color 0.15s ease, box-shadow 0.15s ease; } a.rtn-status-pill:hover, a.rtn-status-pill:focus-visible { border-color: var(--wp--preset--color--nebula-blue, #2E9BFF); box-shadow: var(--wp--preset--shadow--glow-blue, 0 0 0.75rem rgba(46, 155, 255, 0.45)); } /* ----------------------------------------------------------------------------- 7h. CHANNEL CARDS - whole card clickable, bottom-aligned ENTER cta Columns are equal height (flex stretch), so making each card a flex column and giving the ENTER link margin-top:auto pins it to the bottom of every card - the CTA lines up across all three regardless of how long the tagline runs. padding-top keeps a minimum gap on the tallest (longest-tagline) card. The whole card is the click target via a stretched-link overlay on the ENTER anchor (one accessible link per card; the "Enter ->" text stays as the cue). -------------------------------------------------------------------------- */ .rtn-channel-card { display: flex; flex-direction: column; position: relative; /* anchor for the stretched ENTER overlay */ outline: 1px solid transparent; /* reserved so the hover/focus ring never shifts layout */ transition: transform 0.15s ease, outline-color 0.15s ease; } .rtn-channel-card .rtn-card-enter { margin-top: auto; margin-bottom: 0; padding-top: 1rem; font-size: 1.25rem; } /* Stretch the ENTER link over the entire card: the whole card becomes the click target while staying a single, named link (no nested interactive elements). */ .rtn-channel-card .rtn-card-enter a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .rtn-channel-card:hover { transform: translateY(-3px); outline-color: rgba(255, 107, 26, 0.55); /* signal-orange ring on pointer hover */ } .rtn-channel-card:focus-within { transform: translateY(-3px); outline-color: var(--wp--preset--color--nebula-blue, #2E9BFF); /* blue ring on keyboard focus */ } /* ----------------------------------------------------------------------------- 7i. HEADER NAV COLOR Orange items: Home, Motorcycle, Play, Connect (targeted by href so they stay correct if the menu is reordered). Every other item is Light/white. All items light up orange on hover / keyboard focus. -------------------------------------------------------------------------- */ header .wp-block-navigation .wp-block-navigation-item__content { color: var(--wp--preset--color--light, #EDEDF0); transition: color 0.15s ease, text-shadow 0.15s ease; } header .wp-block-navigation .wp-block-navigation-item__content[href="/"], header .wp-block-navigation .wp-block-navigation-item__content[href="/orion-nebula-project"], header .wp-block-navigation .wp-block-navigation-item__content[href="/play"], header .wp-block-navigation .wp-block-navigation-item__content[href="/connect"] { color: var(--wp--preset--color--signal-orange, #FF6B1A); } header .wp-block-navigation .wp-block-navigation-item__content:hover, header .wp-block-navigation .wp-block-navigation-item__content:focus-visible { color: var(--wp--preset--color--nebula-blue, #2E9BFF); text-shadow: 0 0 0.5rem rgba(46, 155, 255, 0.55); } /* ----------------------------------------------------------------------------- 7j. CLICKABLE CARDS - whole card click via a stretched button link Same idea as the home channel cards: the card becomes the click target (the single button inside is stretched over it) with a lift + ring on hover/focus. Use only on cards that contain exactly ONE link (no nested-interactive clash). -------------------------------------------------------------------------- */ .rtn-card-link { position: relative; outline: 1px solid transparent; transition: transform 0.15s ease, outline-color 0.15s ease; } .rtn-card-link .wp-block-button__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .rtn-card-link:hover { transform: translateY(-3px); outline-color: rgba(255, 107, 26, 0.55); } .rtn-card-link:focus-within { transform: translateY(-3px); outline-color: var(--wp--preset--color--nebula-blue, #2E9BFF); } /* ----------------------------------------------------------------------------- 7k. REDACTED / sharpie scrub (Community tier flavor) Blacks out text like a classified-document redaction. The real text stays in the DOM (so screen readers still get it) but is visually covered with black "ink"; box-decoration-break clones the bar across each wrapped line. -------------------------------------------------------------------------- */ .rtn-redacted-text { background-color: #0b0b0b; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0.04em 0.25em; border-radius: 2px; box-shadow: 0 0 0 1px #0b0b0b; user-select: none; } /* Pure redaction bars - a blackout with NO underlying text (nothing to read in the source). Width is set inline per bar to vary the line lengths. */ .rtn-redacted-bar { display: block; height: 1.1em; margin: 0.4em 0; background-color: #0b0b0b; border-radius: 2px; } /* ----------------------------------------------------------------------------- 7g. CONNECT DIRECTORY TABLE Compact platform directory on the Connect page: one row per platform (Signal Orange icon + Oswald label), accounts as inline links (Light, hover Signal Orange). Built to fit one screen with no scroll. Transitions are neutralized under prefers-reduced-motion by section 8. -------------------------------------------------------------------------- */ .rtn-connect-table { width: 100%; max-width: 760px; margin: 0 auto; border-collapse: collapse; } .rtn-connect-table th, .rtn-connect-table td { padding: 0.9rem 1rem; border-top: 1px solid rgba(237, 237, 240, 0.1); text-align: left; vertical-align: middle; } .rtn-connect-table tr:last-child th, .rtn-connect-table tr:last-child td { border-bottom: 1px solid rgba(237, 237, 240, 0.1); } .rtn-connect-table th { width: 1%; white-space: nowrap; font-family: var(--wp--preset--font-family--oswald, sans-serif); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wp--preset--color--light, #EDEDF0); } .rtn-connect-table__icon { width: 1.25rem; height: 1.25rem; color: var(--wp--preset--color--signal-orange, #FF6B1A); vertical-align: -0.2em; margin-right: 0.6rem; } .rtn-connect-table td a { display: inline-block; width: calc(33.333% - 1.1rem); margin: 0.2rem 1rem 0.2rem 0; vertical-align: top; color: var(--wp--preset--color--light, #EDEDF0); text-decoration: none; transition: color 0.15s ease; } .rtn-connect-table td a:hover, .rtn-connect-table td a:focus-visible { color: var(--wp--preset--color--signal-orange, #FF6B1A); } @media (max-width: 600px) { .rtn-connect-table td a { width: 100%; margin-right: 0; } } /* ----------------------------------------------------------------------------- 7l. RANK CARDS (equal height) + ABOUT "ENTER THE GATE" BUTTON LAYOUT Rank cards share a min-height so they read as one uniform set. The Gate CTA has a wide primary (Discord), an equal-size YouTube/Instagram grid (link text centered + min-height so 1- and 2-line buttons match), and bigger Twitch/X. -------------------------------------------------------------------------- */ .rtn-ranks > .wp-block-group { min-height: 7rem; display: flex; flex-direction: column; justify-content: center; } .rtn-cta-primary .wp-block-button__link { font-size: 1.3rem; padding-top: 0.95rem; padding-bottom: 0.95rem; letter-spacing: 0.04em; } /* YouTube / Instagram column logos */ .rtn-cta-logo { text-align: center; margin-bottom: 0.75rem; } .rtn-cta-logo svg { width: 2.25rem; height: 2.25rem; color: var(--wp--preset--color--signal-orange, #FF6B1A); } /* Channel + Twitch/X buttons: one identical size/format/structure */ .rtn-cta-grid .wp-block-button__link { display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; min-height: 3.5rem; line-height: 1.2; } /* Thin divider before Twitch/X, no wider than the Discord button */ .rtn-cta-divider { border: 0; height: 2px; width: 100%; background: rgba(237, 237, 240, 0.4); margin: var(--wp--preset--spacing--40, 1.5rem) auto; } /* About story: the three-channel bullet list - centered as a block, but text and bullets left-aligned so the markers line up instead of staggering. */ .rtn-channel-list { text-align: left; list-style-position: outside; } /* ----------------------------------------------------------------------------- 8. ACCESSIBILITY OVERRIDES Decorative glow + transitions are stripped when the user signals reduced motion, increased contrast, or a forced-colors (high-contrast) mode. -------------------------------------------------------------------------- */ /* Reduced motion - honor it fully. (Static glow may stay; only motion dies.) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Increased contrast - drop glow halos for maximally crisp glyph edges, firm up the separator, and remove the decorative wash. */ @media (prefers-contrast: more) { h1, h2, h3, .wp-block-post-title, .rtn-text-glow, .rtn-text-glow-signal, .rtn-text-glow-orange, .rtn-text-glow-blue { text-shadow: none !important; } .wp-block-separator:not(.is-style-dots) { border-color: var(--wp--preset--color--muted, #8A8F9A); color: var(--wp--preset--color--muted, #8A8F9A); } body::before { display: none; } /* drop the nebula wash */ } /* Forced colors (Windows High Contrast) - hand color control to the OS. Custom shadows/glows are meaningless here; a separator IS a border, so set only border-color: CanvasText (no inert background fill). */ @media (forced-colors: active) { h1, h2, h3, .wp-block-post-title, .rtn-text-glow, .rtn-text-glow-signal, .rtn-text-glow-orange, .rtn-text-glow-blue { text-shadow: none !important; } .wp-block-separator { border-color: CanvasText; opacity: 1; } body::before { display: none; } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: Highlight; } } /* ----------------------------------------------------------------------------- 9. PRINT SANITY The dark theme + glows are wasteful and unreadable on paper. Flatten to ink- on-white, drop atmosphere/glows/shadows, and expose real link targets. -------------------------------------------------------------------------- */ @media print { body { background: #fff !important; color: #000 !important; } body::before { display: none !important; } /* kill nebula wash */ h1, h2, h3, h4, h5, h6, .wp-block-post-title, .rtn-text-glow, .rtn-text-glow-signal, .rtn-text-glow-orange, .rtn-text-glow-blue { text-shadow: none !important; color: #000 !important; } a { color: #000 !important; text-decoration: underline !important; } /* Reveal URLs for real external links only (skip fragments/JS/mailto noise). */ a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; } .wp-block-button__link, .wp-element-button, button { box-shadow: none !important; background: transparent !important; color: #000 !important; border: 1px solid #000 !important; } .wp-block-separator { border-color: #000 !important; color: #000 !important; opacity: 1 !important; } } /* ============================================================================= APPENDIX - WHY NO @font-face HERE (the proof, not just the claim) ----------------------------------------------------------------------------- The brief asks to PROVE WordPress would emit @font-face from theme.json, and to add it here ONLY if we can prove it would NOT. The evidence: 1. theme.json (v3) registers BOTH families under settings.typography.fontFamilies[] with a `fontFace[]` array, and every face uses a relative `"src": ["file:./assets/fonts/.../*.woff2"]`. All five woff2 files are confirmed present at exactly those paths on disk (oswald 500/600/700, inter 400/500), each with fontDisplay: "swap". 2. Since WP 6.5 (Font Library) and solidified in 6.6+, WordPress parses these `fontFace` entries server-side, resolves each `file:./` src to the theme URL, generates real @font-face CSS, and appends it to the global stylesheet (wp_get_global_stylesheet) - printed on the front end AND injected into the block editor. This is THE supported path for "bundling fonts locally in a theme", which is exactly this setup. 3. Therefore the @font-face rules already exist on every page. Re-declaring them in style.css would duplicate the rules and, because the src resolves to the same file, risk the browser treating it as a separate declaration / extra fetch - a net loss on a perf-sensitive shared host. So we omit them. WHEN WE WOULD ADD @font-face HERE INSTEAD: only for a face NOT registered in theme.json (e.g. an icon font, or one deliberately kept out of the editor font picker). None apply here, so none are added. We also do NOT add for the woff2 here - that is a PHP/wp_enqueue concern, not something a stylesheet can do. fontDisplay:"swap" (set in theme.json) already prevents invisible text during load; flag preload for a later PHP step only if first-paint of the Oswald hero measurably needs it. ============================================================================ */