/* ============================================================ Punchwell — design tokens + component classes Mirrors marketing-site/brand/design-system.md (§2–§7). theme.json emits --wp--preset--* vars; here we alias them to the design-system --pw-* names and add role/semantic vars, the light/dark maps, and the component + block-style CSS. ============================================================ */ :root { /* --- palette aliases (map design-system names to theme.json presets) --- */ --pw-navy-900: var(--wp--preset--color--navy-900); --pw-navy-800: var(--wp--preset--color--navy-800); --pw-navy-700: var(--wp--preset--color--navy-700); --pw-navy-600: var(--wp--preset--color--navy-600); --pw-navy-100: var(--wp--preset--color--navy-100); --pw-green-700: var(--wp--preset--color--green-700); --pw-green-600: var(--wp--preset--color--green-600); --pw-green-500: var(--wp--preset--color--green-500); --pw-green-300: var(--wp--preset--color--green-300); --pw-green-100: var(--wp--preset--color--green-100); --pw-amber-500: var(--wp--preset--color--amber-500); --pw-amber-100: var(--wp--preset--color--amber-100); --pw-ink: var(--wp--preset--color--ink); --pw-slate-700: var(--wp--preset--color--slate-700); --pw-slate-500: var(--wp--preset--color--slate-500); --pw-slate-300: var(--wp--preset--color--slate-300); --pw-slate-200: var(--wp--preset--color--slate-200); --pw-slate-100: var(--wp--preset--color--slate-100); --pw-slate-50: var(--wp--preset--color--slate-50); --pw-white: var(--wp--preset--color--white); --pw-danger: var(--wp--preset--color--danger); --pw-danger-100: var(--wp--preset--color--danger-100); --pw-info: var(--wp--preset--color--info); /* --- typography --- */ --pw-font-head: var(--wp--preset--font-family--heading); --pw-font-body: var(--wp--preset--font-family--body); --pw-font-mono: var(--wp--preset--font-family--mono); /* --- radius / shadow / motion (from theme.json custom) --- */ --pw-radius-sm: var(--wp--custom--radius--sm); --pw-radius-md: var(--wp--custom--radius--md); --pw-radius-lg: var(--wp--custom--radius--lg); --pw-radius-xl: var(--wp--custom--radius--xl); --pw-radius-pill: var(--wp--custom--radius--pill); --pw-shadow-xs: var(--wp--custom--shadow--xs); --pw-shadow-sm: var(--wp--custom--shadow--sm); --pw-shadow-md: var(--wp--custom--shadow--md); --pw-shadow-lg: var(--wp--custom--shadow--lg); --pw-ring: var(--wp--custom--shadow--ring); --pw-ease: var(--wp--custom--ease); --pw-dur-fast: var(--wp--custom--duration--fast); --pw-dur: var(--wp--custom--duration--base); --pw-dur-slow: var(--wp--custom--duration--slow); /* --- semantic roles (light) --- */ --pw-bg: var(--pw-slate-50); --pw-surface: var(--pw-white); --pw-surface-alt: var(--pw-slate-100); --pw-text: var(--pw-ink); --pw-text-muted: var(--pw-slate-500); --pw-border: var(--pw-slate-200); --pw-cta: var(--pw-green-600); --pw-cta-text: #ffffff; --pw-link: var(--pw-green-700); --pw-secondary: var(--pw-navy-800); /* outline-button text/border */ --pw-overline: var(--pw-green-700); /* eyebrow text */ /* shared icon (green check) — single definition, used by both mask forms */ --pw-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); } /* Dark mode: attribute toggle + system preference. ui.js stamps the resolved theme onto on load, so the attribute block is the primary path; the @media block is the no-JS fallback. Keep the two var lists in sync. */ :root[data-theme="dark"] { --pw-bg: var(--pw-navy-900); --pw-surface: var(--pw-navy-800); --pw-surface-alt: var(--pw-navy-700); --pw-text: #e6ecf1; --pw-text-muted: #9fb0be; --pw-border: var(--pw-navy-600); --pw-cta: var(--pw-green-500); --pw-cta-text: var(--pw-navy-900); --pw-link: var(--pw-green-300); --pw-secondary: #e6ecf1; --pw-overline: var(--pw-green-300); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pw-bg: var(--pw-navy-900); --pw-surface: var(--pw-navy-800); --pw-surface-alt: var(--pw-navy-700); --pw-text: #e6ecf1; --pw-text-muted: #9fb0be; --pw-border: var(--pw-navy-600); --pw-cta: var(--pw-green-500); --pw-cta-text: var(--pw-navy-900); --pw-link: var(--pw-green-300); --pw-secondary: #e6ecf1; --pw-overline: var(--pw-green-300); } } /* Apply the semantic roles to the page itself. theme.json seeds the same light values; this later rule lets the dark maps actually flip the body. */ body { background: var(--pw-bg); color: var(--pw-text); } /* tabular numerals in pricing / comparison so columns align */ .pw-tnum, .wp-block-table td, .pw-price { font-feature-settings: "tnum"; } p { max-width: var(--wp--custom--measure); } .alignfull p, .pw-full p { max-width: none; } /* ---------- Buttons (design system §6) ---------- */ .pw-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--pw-font-body); font-weight: 600; line-height: 1; min-height: 48px; padding: 0 24px; border-radius: var(--pw-radius-md); text-decoration: none; cursor: pointer; transition: transform var(--pw-dur) var(--pw-ease), background-color var(--pw-dur) var(--pw-ease), box-shadow var(--pw-dur) var(--pw-ease); } .pw-btn--sm { min-height: 40px; } .pw-btn--lg { min-height: 56px; font-size: 1.0625rem; } .pw-btn--primary { background: var(--pw-cta); color: var(--pw-cta-text); border: 1px solid transparent; box-shadow: var(--pw-shadow-sm); } .pw-btn--primary:hover { background: var(--pw-green-700); box-shadow: var(--pw-shadow-md); transform: translateY(-1px); } .pw-btn--primary:active { transform: translateY(0); box-shadow: var(--pw-shadow-xs); } .pw-btn--secondary { background: transparent; color: var(--pw-secondary); border: 1.5px solid var(--pw-secondary); } .pw-btn--secondary:hover { background: var(--pw-secondary); color: var(--pw-bg); } .pw-btn--ghost { background: transparent; color: var(--pw-link); border: none; padding: 0 6px; min-height: 0; } .pw-btn--ghost:hover { text-decoration: underline; text-underline-offset: 3px; } /* Focus visibility everywhere (a11y §10) */ :where(a, button, .pw-btn, input, select, textarea, summary, [tabindex]):focus-visible { outline: none; box-shadow: var(--pw-ring); border-radius: var(--pw-radius-sm); } /* ---------- Block styles registered in functions.php ---------- */ /* Card surface (§7.3) */ .wp-block-group.is-style-card { background: var(--pw-surface); border: 1px solid var(--pw-border); border-radius: var(--pw-radius-lg); padding: 32px; box-shadow: var(--pw-shadow-sm); transition: transform var(--pw-dur) var(--pw-ease), box-shadow var(--pw-dur) var(--pw-ease); } .wp-block-group.is-style-card:hover { box-shadow: var(--pw-shadow-md); transform: translateY(-2px); } .wp-block-group.is-style-card-highlight { background: var(--pw-surface); border: 2px solid var(--pw-green-600); border-radius: var(--pw-radius-lg); padding: 32px; box-shadow: var(--pw-shadow-lg); } /* Blocked-punch callout (the differentiator story) */ .wp-block-group.is-style-blocked-callout { background: var(--pw-danger-100); border-left: 4px solid var(--pw-danger); border-radius: var(--pw-radius-md); padding: 16px 20px; color: var(--pw-ink); } /* Overline / eyebrow (§4) */ .is-style-overline { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8125rem; font-weight: 600; color: var(--pw-overline); } /* Green-check list */ .wp-block-list.is-style-check { list-style: none; padding-left: 0; } .wp-block-list.is-style-check li { position: relative; padding-left: 28px; margin-bottom: 8px; } .wp-block-list.is-style-check li::before { content: ""; position: absolute; left: 0; top: 0.35em; width: 16px; height: 16px; background: var(--pw-green-600); -webkit-mask: no-repeat center/16px var(--pw-icon-check); mask: no-repeat center/16px var(--pw-icon-check); } /* Trust pills (§7.8) */ .wp-block-buttons.is-style-trust-pills .wp-block-button__link { background: var(--pw-surface); color: var(--pw-text); border: 1px solid var(--pw-border); border-radius: var(--pw-radius-pill); font-size: 0.875rem; font-weight: 500; padding: 6px 14px; } /* ---------- Comparison table (§7.5) ---------- The Punchwell column is highlighted STRUCTURALLY (2nd column) because core/table cannot persist per-cell classes through an editor round-trip — keep "us" as the second column and no custom cell markup is needed. */ .pw-compare table { border-collapse: collapse; width: 100%; } .pw-compare thead th { background: var(--pw-navy-800); color: #fff; position: sticky; top: 72px; } .pw-compare th, .pw-compare td { border: 1px solid var(--pw-border); padding: 12px 14px; } .pw-compare tbody tr:nth-child(odd) td { background: var(--pw-slate-50); } .pw-compare thead th:nth-child(2), .pw-compare tbody td:nth-child(2) { background: var(--pw-green-100); color: var(--pw-ink); } /* Utility glyph colors — for hand-written HTML blocks only; do NOT use inside core/table cells (RichText drops unknown span classes on edit). */ .pw-yes { color: var(--pw-green-600); font-weight: 700; } .pw-no { color: var(--pw-slate-300); } .pw-limited { color: var(--pw-amber-500); } .pw-strike { color: var(--pw-slate-500); text-decoration: line-through; } /* ---------- Sticky header + announcement bar (§7.1) ---------- */ .pw-announce { background: var(--pw-navy-900); color: #fff; font-size: 0.875rem; text-align: center; padding: 6px 16px; } /* WP's layout CSS (.is-layout-flex{display:flex}) beats the UA [hidden] rule; restore dismissal explicitly. */ .pw-announce[hidden] { display: none !important; } .pw-announce .pw-dismiss { background: none; border: 0; color: inherit; cursor: pointer; font-size: 0.875rem; padding: 2px 6px; } .pw-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--pw-surface) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--pw-border); } /* mono spec chips (IP/CIDR) */ .pw-mono, code, kbd, samp { font-family: var(--pw-font-mono); } /* dark-section helper: any group with navy bg gets light text + green links */ .has-navy-800-background-color, .has-navy-900-background-color { color: #e6ecf1; } .has-navy-800-background-color :where(h1,h2,h3,h4), .has-navy-900-background-color :where(h1,h2,h3,h4) { color: #fff; } .has-navy-800-background-color a:not(.wp-block-button__link), .has-navy-900-background-color a:not(.wp-block-button__link) { color: var(--pw-green-300); } /* Motion: respect reduced-motion (§10) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; } .wp-block-group.is-style-card:hover, .pw-btn--primary:hover { transform: none; } }