/* * Design tokens — ported 1:1 from the old theme.json so the visual design * doesn't change at all when we drop Full Site Editing. Classic theme now: * these are just plain CSS custom properties on :root instead of block-editor * "presets". No Site Editor, no Global Styles UI, no drift. */ :root { /* Colors */ --wp--preset--color--ink: #111111; --wp--preset--color--charcoal: #1a1a1a; --wp--preset--color--smoke: #757575; --wp--preset--color--line: #e5e5e5; --wp--preset--color--bone: #f7f7f7; --wp--preset--color--paper: #ffffff; --wp--preset--color--riot: #111111; /* accent — swap here to re-theme */ /* Foreground text/icon/border color for content that sits directly on the page background (paper/bone). Kept separate from --ink, which is also used as a literal brand-black fill for solid buttons/badges (paired with hardcoded white text) that should stay black in both color modes. */ --manarchy--fg: var(--wp--preset--color--ink); /* Light text color for content that sits on the footer, which is always solid black regardless of light/dark mode (like --ink for buttons). Kept separate from --bone, which dark mode also reuses as a dark secondary surface color elsewhere — reusing it here too would have made footer text nearly invisible against the black footer background. */ --manarchy--on-dark: #f7f7f7; /* Fixed urgency/deal accent — intentionally NOT tied to --riot. --riot is designed to invert (black → white) between modes, which is correct for the wishlist heart/toggle pill but would make a "deal" badge disappear (white-on-white) in dark mode. Light-mode value matches the original hardcoded #c22a1e; dark mode below lightens it for AA contrast. */ --manarchy--deal: #c22a1e; /* Shop-card eyebrow text — light-mode value matches the original hardcoded #1857b8; dark mode below lightens it for AA contrast. */ --manarchy--eyebrow: #1857b8; --wp--preset--gradient--fade-to-black: linear-gradient(180deg, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, 0.9) 100%); /* Fonts */ --wp--preset--font-family--display: 'Anton', 'Arial Narrow', Impact, sans-serif; --wp--preset--font-family--body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Font sizes */ --wp--preset--font-size--xs: 0.75rem; --wp--preset--font-size--sm: 0.875rem; --wp--preset--font-size--md: 1rem; --wp--preset--font-size--lg: 1.25rem; --wp--preset--font-size--xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); --wp--preset--font-size--xxl: clamp(2rem, 1.4rem + 3vw, 3.5rem); --wp--preset--font-size--huge: clamp(2.75rem, 1.8rem + 4.75vw, 5.5rem); /* Layout */ --manarchy--content-size: 1200px; --manarchy--wide-size: 1400px; color-scheme: light; } /* * Dark mode — toggled by adding data-theme="dark" to (see the header * icon + inline bootstrap script in header.php, and app.js for the click * handler). Overriding the tokens here is enough to re-skin nearly the whole * theme, since every component is already built on top of these variables. * --ink itself is intentionally left alone: it's used as a literal black * fill for solid CTA buttons/badges (paired with hardcoded white text) that * are meant to stay black in both modes. */ :root[data-theme="dark"] { --wp--preset--color--paper: #1f1f21; --wp--preset--color--bone: #29292b; --wp--preset--color--line: #3a3a3d; --wp--preset--color--smoke: #a3a3a3; --wp--preset--color--riot: #ffffff; --manarchy--fg: #f2f2f2; /* Shop-card eyebrow/deal text (assets/css/shop-archive.css) is hardcoded to a fixed brand blue/red in light mode, where it sits on white and clears WCAG AA comfortably. Against the dark card background those same hex values drop to ~2.4:1 / ~2.9:1 (fail AA's 4.5:1), so they're lightened here — same hue, higher lightness — for dark-mode legibility. */ --manarchy--eyebrow: #6ea8ff; --manarchy--deal: #ff6b5e; color-scheme: dark; } @font-face { font-family: 'Anton'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/anton.woff2') format('woff2'); } body { font-family: var(--wp--preset--font-family--body); color: var(--manarchy--fg); background: var(--wp--preset--color--paper); font-size: var(--wp--preset--font-size--md); line-height: 1.5; margin: 0; transition: background-color 0.2s ease, color 0.2s ease; } /* Site-wide wrapper — full width by design (no max-width cap). Header, footer and general content areas run edge to edge; only the padding-inline gutter remains so text doesn't touch the viewport edge. Individual templates (e.g. the shop archive) can still set their own max-width on a child element. */ .manarchy-container { max-width: none; margin-inline: auto; padding-inline: 16px; } /* Kept for any template that still wants a capped-width variant. */ .manarchy-container--boxed { max-width: var(--manarchy--content-size); } .manarchy-container--wide { max-width: var(--manarchy--wide-size); } /* Anton (the display font) is reserved for the site logo/wordmark only — every other heading uses the regular body font, matching the reference design (plain, non-condensed, sentence case). */ h1, h2, h3, h4, h5, h6 { font-family: var(--wp--preset--font-family--body); font-weight: 700; text-transform: none; line-height: 1.2; margin: 0 0 0.5em; }