/* 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 */ --ink: #0b1320; --ink-2: #111b2e; --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: #94a3b8; --text-dk: #ffffff; --text-dk-2: #9fb0c8; /* Accent — sapphire */ --accent: #3b6fe5; --accent-h: #5683f0; --accent-p: #2a55c0; --accent-dk: #6e95f2; --accent-glow: rgba(59, 111, 229, 0.12); /* 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 --------------------------------------------------- */ html.dark { color-scheme: dark; --cloud: #0b1320; --surface: #111b2e; --line: #233049; --text: #ffffff; --text-2: #9fb0c8; --muted: #64748b; --accent: var(--accent-dk); --background: var(--cloud); --foreground: var(--text); --card: var(--surface); --muted-bg: #16223a; --accent-bg: #16223a; } /* ---------------------------------------------------------------------------- THEME PRESETS — owner-locked. Only tokens change, never layout. Applied via [data-preset="..."] on . Default = sapphire (:root above). ---------------------------------------------------------------------------- */ [data-preset="graphite"] { --ink: #14161a; --ink-2: #1d2026; --accent: #4d7cff; --accent-h: #6b92ff; --accent-p: #3a63d6; --accent-dk: #7fa0ff; --accent-glow: rgba(77, 124, 255, 0.12); --cloud: #f5f6f8; --background: var(--cloud); } [data-preset="titanium"] { --ink: #161514; --ink-2: #211f1d; --accent: #c9a227; --accent-h: #ddb73c; --accent-p: #a8851c; --accent-dk: #e0bd4a; --accent-glow: rgba(201, 162, 39, 0.14); --cloud: #f6f4f0; --background: var(--cloud); } [data-preset="forest"] { --ink: #0c1714; --ink-2: #14241f; --accent: #2fb67a; --accent-h: #43cb8e; --accent-p: #239160; --accent-dk: #4fd197; --accent-glow: rgba(47, 182, 122, 0.14); --cloud: #f2f6f3; --background: var(--cloud); } [data-preset="slate"] { --ink: #0e0f12; --ink-2: #17181c; --accent: #e2e4e9; --accent-h: #f1f2f5; --accent-p: #c7cad1; --accent-dk: #f1f2f5; --accent-glow: rgba(226, 228, 233, 0.18); --cloud: #fafafa; --background: var(--cloud); } [data-preset="crimson"] { --ink: #15100f; --ink-2: #201917; --accent: #e5484d; --accent-h: #ec6469; --accent-p: #c5383d; --accent-dk: #f06b70; --accent-glow: rgba(229, 72, 77, 0.14); --cloud: #f7f4f3; --background: var(--cloud); } /* ============================================================================ 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; }