/* ORCHARDS - fix.css * Production-readiness fixes applied 2026-06-30. * Override-only — does not modify source templates. Loaded last in . */ /* === C1: Touch targets must be at least 44x44 px (a11y / WCAG 2.5.5) === */ button, a, [role="button"], input[type="checkbox"] + label, .cs-trigger { min-height: 44px !important; min-width: 44px !important; } /* Exception: inline text links (not button-like) — keep their natural line-height */ p a:not(.cs-trigger):not(.cs-button):not([class*="button"]), li a:not(.cs-trigger):not(.cs-button):not([class*="button"]), span a:not(.cs-trigger):not(.cs-button):not([class*="button"]) { min-height: 0; min-width: 0; } /* Chat category chips — they look like buttons, must be tappable on mobile */ .cs-category-btn, [data-chat-category] { min-height: 44px; padding-block: 0.5rem; } /* === C3: Body background fallback (resilience) === */ html, body { background-color: var(--color-bg) !important; color: var(--color-ink) !important; transition: background-color 200ms ease, color 200ms ease !important; } /* === DARK MODE — token overrides + hardcoded fallbacks === * Triggered by set by inline FOUC-blocking script. * See header.tpl for the early-evaluated script that picks the theme before paint. */ /* color-scheme: tells browser native UI (scrollbars, form controls, focus * rings) to match our theme. CRITICAL per MDN/Tailwind docs. */ :root { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* Theme toggle button — sun visible in dark, moon visible in light. * Server-side: JS in footer.tpl sets inline style.display based on * . The CSS below handles the initial render in case JS is slow. */ .cs-theme-icon-sun { display: inline-block; } .cs-theme-icon-moon { display: none; } :root[data-theme="dark"] .cs-theme-icon-sun { display: none; } :root[data-theme="dark"] .cs-theme-icon-moon { display: inline-block; } .cs-theme-toggle { color: var(--color-ink); border: 1px solid transparent; } .cs-theme-toggle:hover { background-color: rgba(0, 0, 0, 0.05); } :root[data-theme="dark"] .cs-theme-toggle:hover { background-color: rgba(255, 255, 255, 0.08); } :root[data-theme="dark"] { --color-bg: #0f1014; /* page background — slightly bluish-black */ --color-surface: #161821; /* card/panel surface — 5-8% lighter than bg */ --color-ink: #ededf2; /* primary text — off-white (NOT #fff, eye strain) */ --color-ink-muted: #b8b8c4; /* secondary text */ --color-ink-soft: #8a8a98; /* tertiary text */ --color-ink-faint: #5e5e6c; /* very light text — borders/placeholders */ --color-border: #2a2c38; /* borders/dividers */ --color-primary: oklch(70% .14 252); /* lightened blue — perceptual match */ --color-primary-soft: oklch(70% .14 252 / .18); --color-accent: oklch(75% .16 280); /* lightened purple */ --color-accent-soft: oklch(75% .16 280 / .18); } /* Auto-dark if user hasn't explicitly chosen (matches system pref) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #0f1014; --color-surface: #161821; --color-ink: #ededf2; --color-ink-muted: #b8b8c4; --color-ink-soft: #8a8a98; --color-ink-faint: #5e5e6c; --color-border: #2a2c38; --color-primary: oklch(70% .14 252); --color-primary-soft: oklch(70% .14 252 / .18); --color-accent: oklch(75% .16 280); --color-accent-soft: oklch(75% .16 280 / .18); } } /* Hardcoded-color fallbacks for elements that don't use vars */ /* Tailwind bg-white/80 (nav) — dark surface with translucency */ :root[data-theme="dark"] .bg-white\/80 { background-color: rgba(22, 24, 33, 0.8) !important; } :root[data-theme="dark"] .bg-white { background-color: var(--color-surface) !important; } :root[data-theme="dark"] .bg-white\/ { background-color: var(--color-surface) !important; } /* Border shadows — black/5 and black/10 inverted to white/5 and white/10 */ :root[data-theme="dark"] .border-black\/5 { border-color: rgba(255, 255, 255, 0.08) !important; } :root[data-theme="dark"] .border-black\/10 { border-color: rgba(255, 255, 255, 0.12) !important; } /* Text/background black utilities — invert to white */ :root[data-theme="dark"] .text-black { color: var(--color-ink) !important; } :root[data-theme="dark"] .bg-black\/40 { background-color: rgba(0, 0, 0, 0.6) !important; } /* Partner icon filter — slightly brighter on dark */ :root[data-theme="dark"] .cs-partner-icon { filter: grayscale(0.2) brightness(1.4); opacity: 0.9; } /* Logo SVG text — uses fill: currentColor so it inherits automatically; no extra rules needed */ /* Inputs: dark mode borders + bg */ :root[data-theme="dark"] input[type="text"], :root[data-theme="dark"] input[type="email"], :root[data-theme="dark"] input[type="password"], :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { background-color: #1f2130 !important; color: var(--color-ink) !important; border-color: rgba(255, 255, 255, 0.1) !important; } :root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: var(--color-ink-faint) !important; } /* Skip link — invert colors in dark mode */ :root[data-theme="dark"] .cs-skip-link { background: #ededf2; color: #0f1014; } /* Code, kbd — dark surfaces */ :root[data-theme="dark"] code, :root[data-theme="dark"] pre { background-color: #1f2130 !important; color: var(--color-ink) !important; } /* Smooth theme transitions for everything */ * { transition-property: background-color, border-color, color, fill, stroke; transition-duration: 200ms; transition-timing-function: ease; } /* === C4: Skip-to-main-content link (a11y / WCAG 2.4.1) === */ .cs-skip-link { position: absolute; left: -10000px; top: 0; z-index: 9999; padding: 0.75rem 1rem; background: #1a1a2e; color: #fff; font-weight: 600; text-decoration: none; border-radius: 0 0 0.5rem 0; } .cs-skip-link:focus { left: 0; } /* === L2: Meta robots visibility — none required, but the header tpl does not emit it. Already covered by default. === */ /* === L4: Social links (footer) should open in new tab === */ footer a[href*="x.com"], footer a[href*="tiktok.com"], footer a[href*="t.me"], footer a[href*="discord.gg"] { target-name: new; target-new: tab; } /* === H1: /contact missing h2 === */ /* The contact template already has its main heading; this rule is a safety net. */ main > section:first-of-type h2:first-of-type { margin-top: 2rem; } /* === M1: Chat categories on mobile should collapse to a