/* Theme Name: WeFixed Theme URI: https://wefixed.com Author: WeFixed Author URI: https://wefixed.com Description: Premium electronics-repair theme for WeFixed (Arlington, VA). Board-level microsoldering, logic-board repair, data recovery, mail-in nationwide. Classic PHP theme — vanilla JS + GSAP, CSS custom properties, no build step. Mirrors the WeFixed Next.js reference 1:1. Version: 0.1.0 Requires at least: 6.4 Tested up to: 6.7 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: wefixed */ /* ============================================================================ WeFixed — design tokens (ported 1:1 from the Next.js reference globals.css) Spacing base 4px. Two typefaces only: Geist Sans + Geist Mono. The ACTIVE preset's overrides are also printed inline in by PHP. ============================================================================ */ :root { color-scheme: light; /* Base — original WeFixed default (sapphire). The active preset + manual overrides are re-emitted inline AFTER this file, so these are the no-PHP fallback. Every derived shade below tracks --ink / --accent / --cloud via color-mix, so a single preset (or one manual colour pick) recolours the UI. */ --ink: #0b1320; --ink-2: color-mix(in srgb, var(--ink) 92%, var(--accent-base)); --cloud: #f4f6fb; /* Second light surface — a deeper, brand-tinted mist used to alternate stacked light sections so two or three in a row don't melt into one slab. Mixed FROM --cloud + a touch of --ink, so it tracks every preset automatically (each preset overrides --cloud/--ink) and never needs its own per-preset value. */ --cloud-2: color-mix(in srgb, var(--cloud) 93%, var(--ink) 7%); --surface: #ffffff; --line: #e2e8f0; --line-dark: #233049; /* Text */ --text: #0b1320; --text-2: #475569; /* --muted is used for small informative text (figcaptions, counters). #94a3b8 measured only 2.56:1 on white (fails AA); slate-500 lifts it to ~4.5:1. */ --muted: #64748b; --text-dk: #ffffff; --text-dk-2: #9fb0c8; /* Accent — original WeFixed default (sapphire blue). --accent-base is the raw preset accent (set inline per preset); every state derives from it. CRITICAL: the shades reference --accent-base, NOT --accent — because dark mode reassigns --accent to var(--accent-dk), and if the shades read --accent that would be a cycle (accent → accent-dk → accent) that invalidates every accent token at night. Keying off the stable --accent-base keeps dark mode valid. */ --accent-base: #3b6fe5; --accent: var(--accent-base); --accent-h: color-mix(in srgb, var(--accent-base) 84%, white); --accent-p: color-mix(in srgb, var(--accent-base) 82%, black); --accent-dk: color-mix(in srgb, var(--accent-base) 70%, white); --accent-glow: color-mix(in srgb, var(--accent-base) 13%, transparent); /* Semantic — status only */ --success: #10b981; --warning: #f59e0b; --error: #ef4444; /* Surfaces derived */ --background: var(--cloud); --foreground: var(--text); --card: var(--surface); --muted-bg: #eef1f7; --accent-bg: #eef2fd; /* Radius */ --r-btn: 11px; --r-card: 14px; --r-pill: 10px; /* Motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-micro: 140ms; --dur-ui: 240ms; --dur-reveal: 600ms; /* Type */ --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace; /* Layout */ --container: 1280px; --header-h: 76px; } /* ---- Visitor dark mode --------------------------------------------------- */ /* Night mode is preset-aware: each dark surface is the approved dark slate mixed with the active preset's --ink, so switching preset re-tints night mode too (not just the accent). Sapphire's ink IS the approved navy (#0b1320), so the DEFAULT dark mode is visually unchanged; other presets pick up their hue. */ html.dark { color-scheme: dark; --cloud: color-mix(in srgb, #0b1320 50%, var(--ink)); --surface: color-mix(in srgb, #111b2e 72%, var(--ink)); --line: color-mix(in srgb, #233049 78%, var(--ink)); --text: #ffffff; --text-2: #9fb0c8; --muted: #94a3b8; --accent: var(--accent-dk); --background: var(--cloud); --foreground: var(--text); --card: var(--surface); --muted-bg: color-mix(in srgb, #16223a 74%, var(--ink)); --accent-bg: color-mix(in srgb, #16223a 74%, var(--ink)); } /* ---------------------------------------------------------------------------- THEME PRESETS — owner-locked. Only tokens change, never layout. The active preset (and any manual colour/font overrides) is emitted INLINE after this file by PHP — it sets just --ink / --accent / --cloud + fonts, and the color-mix derivations in :root above recolour every state. So there are no per-preset blocks here: one accent drives the whole UI. is still set as a styling/JS hook, but no longer carries colour. Default is the :root graphite values above (the no-PHP fallback). ---------------------------------------------------------------------------- */ /* ============================================================================ Base / reset ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; border-color: var(--line); } /* overflow-x: clip pins the page to the viewport width so a stray wide element (a transform, a full-bleed child) can never make the whole page drag sideways on mobile. clip (not hidden) doesn't create a scroll container, so it leaves position: sticky and the mobile scroll-snap carousels working. */ html { font-family: var(--font-sans); -webkit-text-size-adjust: 100%; overflow-x: clip; } body { background: var(--background); color: var(--foreground); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Clear the fixed mobile bottom bar so the last content/footer isn't hidden. */ @media (max-width: 767px) { body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); } } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; } input, button, textarea, select { font: inherit; } /* Kill iOS's default grey tap flash — we provide our own :active feedback. */ a, button, [role="button"], input, label, summary { -webkit-tap-highlight-color: transparent; } ul, ol { list-style: none; padding: 0; } ::selection { background: var(--accent); color: #fff; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ============================================================================ Typography scale ============================================================================ */ .h1 { font-size: clamp(40px, 7vw, 82px); line-height: 0.97; letter-spacing: -0.035em; font-weight: 700; text-wrap: balance; } .h2 { font-size: clamp(28px, 4vw, 48px); line-height: 1.05; letter-spacing: -0.025em; font-weight: 600; text-wrap: balance; } .h3 { font-size: clamp(22px, 2.5vw, 28px); line-height: 1.2; letter-spacing: -0.01em; font-weight: 600; } .body-lg { font-size: 18px; line-height: 1.6; } .mono { font-family: var(--font-mono); } .label { font-family: var(--font-mono); font-size: 12px; line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); } .text-2 { color: var(--text-2); } .accent { color: var(--accent); } /* ============================================================================ Layout primitives ============================================================================ */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 16px; } @media (min-width: 640px) { .container { padding-inline: 24px; } } @media (min-width: 1024px) { .container { padding-inline: 32px; } } .container--narrow { max-width: 768px; } .container--mid { max-width: 1024px; } .section { padding-block: 80px; } @media (min-width: 640px) { .section { padding-block: 112px; } } .section--dark { background: var(--ink); color: var(--text-dk); } /* Alternate light band — a subtly deeper mineral tone so consecutive light sections read as distinct screens, not one long slab. White cards still pop on it; text colours are unchanged (it stays well within AA on the light scheme). */ .section.section--alt { background: var(--cloud-2); /* Pure-white cards look cheap/harsh on the grey band. Re-point the card token to a mineral tone mixed FROM the surface + the second tone — still lifts off the section. Uses var(--surface) (NOT #fff) so it tracks dark mode: light surface → mineral white in light mode; dark surface → a dark card that still lifts in dark mode, instead of staying bright. Every card uses var(--card). */ --card: color-mix(in srgb, var(--surface) 70%, var(--cloud-2)); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--accent); color: #fff; padding: 12px 18px; border-radius: var(--r-btn); } .skip-link:focus { left: 16px; top: 16px; }