/* Theme Name: Essential Support Classic Theme URI: https://essential.support/ Author: Coywolf Author URI: https://coywolf.llc/ Description: Classic (PHP-template) edition of the Essential Support theme for the marketing + documentation site. Reproduces the slate-navy design 1:1 using PHP templates you can hand-edit. This theme carries NO theme.json: all of the CSS WordPress used to generate from theme.json (preset variables, block utility classes, the constrained/wide + root-padding layout rules, and element/block base styles) is hand-inlined below so page/post block content (KB articles, the docs search + section lists, marketing patterns) renders identically. Not a Full Site Editing theme: there are no block templates, so the Site Editor stays disabled. Version: 1.2.0 Requires at least: 6.5 Tested up to: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: essential-support-classic Tags: blog, documentation, one-column, two-columns, custom-colors, custom-logo, custom-menu, featured-images, block-styles, wide-blocks, translation-ready, threaded-comments */ /* ========================================================================== theme.json replacement (1/3) - PRESET + LAYOUT CUSTOM PROPERTIES WordPress used to emit these from theme.json. They are declared here so the theme is self-contained. Accent recolored to #233f64 (was #2b4b74), button hover to #1c3454 (was #22456d). Fluid font-size clamp() values are the exact values WordPress computed from theme.json. ========================================================================== */ :root{ --wp--preset--color--base: #f5f7fb; --wp--preset--color--surface: #ffffff; --wp--preset--color--surface-2: #eef2f8; --wp--preset--color--contrast: #161b24; --wp--preset--color--muted: #5b6676; --wp--preset--color--border: #e2e7ef; --wp--preset--color--accent: #233f64; --wp--preset--color--accent-soft: #e7eef7; --wp--preset--color--link: #2f66e0; --wp--preset--color--ok: #1f8a52; --wp--preset--color--ok-soft: #e5f3ec; --wp--preset--color--warn: #9a6a12; --wp--preset--color--warn-soft: #f6eeda; --wp--preset--color--code-bg: #0f1724; --wp--preset--color--code-text: #e7ecf4; --wp--preset--font-family--system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --wp--preset--font-family--mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace; --wp--preset--font-size--small: 13px; --wp--preset--font-size--medium: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.721), 20px); --wp--preset--font-size--large: clamp(22.041px, 1.378rem + ((1vw - 3.2px) * 1.678), 36px); --wp--preset--font-size--x-large: clamp(25.014px, 1.563rem + ((1vw - 3.2px) * 2.042), 42px); --wp--preset--font-size--xx-large: clamp(2rem, 2rem + ((1vw - 0.2rem) * 1.442), 2.75rem); --wp--preset--font-size--display: clamp(2.4rem, 2.4rem + ((1vw - 0.2rem) * 2.115), 3.5rem); --wp--preset--spacing--20: 0.44rem; --wp--preset--spacing--30: 0.67rem; --wp--preset--spacing--40: 1rem; --wp--preset--spacing--50: 1.5rem; --wp--preset--spacing--60: 2.25rem; --wp--preset--spacing--70: 3.38rem; --wp--preset--spacing--80: 5.06rem; --wp--preset--spacing--90: 7.59rem; --wp--style--global--content-size: 46rem; --wp--style--global--wide-size: 72rem; --wp--style--block-gap: 1.2rem; --wp--style--root--padding-top: 0px; --wp--style--root--padding-right: 1.25rem; --wp--style--root--padding-bottom: 0px; --wp--style--root--padding-left: 1.25rem; } /* ========================================================================== theme.json replacement (2/3) - LAYOUT + ELEMENT/BLOCK BASE STYLES Exact rules WordPress generated from theme.json (root padding, is-layout-*, alignments, body, links, headings, buttons, caption), plus the theme.json block styles. Button hover/focus recolored to #1c3454. ========================================================================== */ :where(body) { margin: 0; }.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) { padding-right: 0; padding-left: 0; }.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) > .alignfull { margin-left: 0; margin-right: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 1.2rem; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: 1.2rem; }:root :where(.is-layout-flow) > :first-child{margin-block-start: 0;}:root :where(.is-layout-flow) > :last-child{margin-block-end: 0;}:root :where(.is-layout-flow) > *{margin-block-start: 1.2rem;margin-block-end: 0;}:root :where(.is-layout-constrained) > :first-child{margin-block-start: 0;}:root :where(.is-layout-constrained) > :last-child{margin-block-end: 0;}:root :where(.is-layout-constrained) > *{margin-block-start: 1.2rem;margin-block-end: 0;}:root :where(.is-layout-flex){gap: 1.2rem;}:root :where(.is-layout-grid){gap: 1.2rem;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}body{background-color: var(--wp--preset--color--base);color: var(--wp--preset--color--contrast);font-family: var(--wp--preset--font-family--system);font-size: var(--wp--preset--font-size--medium);line-height: 1.65;--wp--style--root--padding-top: 0px;--wp--style--root--padding-right: 1.25rem;--wp--style--root--padding-bottom: 0px;--wp--style--root--padding-left: 1.25rem;}a:where(:not(.wp-element-button)){color: var(--wp--preset--color--link);text-decoration: none;}:root :where(a:where(:not(.wp-element-button)):hover){text-decoration: underline;}h1, h2, h3, h4, h5, h6{color: var(--wp--preset--color--contrast);font-family: var(--wp--preset--font-family--system);font-weight: 700;letter-spacing: -0.015em;line-height: 1.2;}h1{font-size: var(--wp--preset--font-size--display);letter-spacing: -0.02em;line-height: 1.1;}h2{font-size: var(--wp--preset--font-size--xx-large);}h3{font-size: var(--wp--preset--font-size--x-large);}h4{font-size: var(--wp--preset--font-size--large);}h5{font-size: var(--wp--preset--font-size--medium);font-weight: 650;letter-spacing: 0.06em;text-transform: uppercase;}h6{font-size: var(--wp--preset--font-size--small);}:root :where(.wp-element-button, .wp-block-button__link){background-color: var(--wp--preset--color--accent);border-radius: 9px;border-width: 0;color: #ffffff;font-family: inherit;font-size: var(--wp--preset--font-size--medium);font-style: inherit;font-weight: 600;letter-spacing: inherit;line-height: inherit;padding-top: 0.7rem;padding-right: 1.25rem;padding-bottom: 0.7rem;padding-left: 1.25rem;text-decoration: none;text-transform: inherit;}:root :where(.wp-element-button:hover, .wp-block-button__link:hover){background-color: #1c3454;}:root :where(.wp-element-button:focus, .wp-block-button__link:focus){background-color: #1c3454;}:root :where(.wp-element-caption, .wp-block-audio figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-image figcaption, .wp-block-table figcaption, .wp-block-video figcaption){color: var(--wp--preset--color--muted);font-size: var(--wp--preset--font-size--small);} /* Utility classes (theme colour slugs + font sizes) */ .has-base-color{color: var(--wp--preset--color--base) !important;} .has-surface-color{color: var(--wp--preset--color--surface) !important;} .has-surface-2-color{color: var(--wp--preset--color--surface-2) !important;} .has-contrast-color{color: var(--wp--preset--color--contrast) !important;} .has-muted-color{color: var(--wp--preset--color--muted) !important;} .has-border-color{color: var(--wp--preset--color--border) !important;} .has-accent-color{color: var(--wp--preset--color--accent) !important;} .has-accent-soft-color{color: var(--wp--preset--color--accent-soft) !important;} .has-link-color{color: var(--wp--preset--color--link) !important;} .has-ok-color{color: var(--wp--preset--color--ok) !important;} .has-ok-soft-color{color: var(--wp--preset--color--ok-soft) !important;} .has-warn-color{color: var(--wp--preset--color--warn) !important;} .has-warn-soft-color{color: var(--wp--preset--color--warn-soft) !important;} .has-code-bg-color{color: var(--wp--preset--color--code-bg) !important;} .has-code-text-color{color: var(--wp--preset--color--code-text) !important;} .has-base-background-color{background-color: var(--wp--preset--color--base) !important;} .has-surface-background-color{background-color: var(--wp--preset--color--surface) !important;} .has-surface-2-background-color{background-color: var(--wp--preset--color--surface-2) !important;} .has-contrast-background-color{background-color: var(--wp--preset--color--contrast) !important;} .has-muted-background-color{background-color: var(--wp--preset--color--muted) !important;} .has-border-background-color{background-color: var(--wp--preset--color--border) !important;} .has-accent-background-color{background-color: var(--wp--preset--color--accent) !important;} .has-accent-soft-background-color{background-color: var(--wp--preset--color--accent-soft) !important;} .has-link-background-color{background-color: var(--wp--preset--color--link) !important;} .has-ok-background-color{background-color: var(--wp--preset--color--ok) !important;} .has-ok-soft-background-color{background-color: var(--wp--preset--color--ok-soft) !important;} .has-warn-background-color{background-color: var(--wp--preset--color--warn) !important;} .has-warn-soft-background-color{background-color: var(--wp--preset--color--warn-soft) !important;} .has-code-bg-background-color{background-color: var(--wp--preset--color--code-bg) !important;} .has-code-text-background-color{background-color: var(--wp--preset--color--code-text) !important;} .has-base-border-color{border-color: var(--wp--preset--color--base) !important;} .has-surface-border-color{border-color: var(--wp--preset--color--surface) !important;} .has-surface-2-border-color{border-color: var(--wp--preset--color--surface-2) !important;} .has-contrast-border-color{border-color: var(--wp--preset--color--contrast) !important;} .has-muted-border-color{border-color: var(--wp--preset--color--muted) !important;} .has-border-border-color{border-color: var(--wp--preset--color--border) !important;} .has-accent-border-color{border-color: var(--wp--preset--color--accent) !important;} .has-accent-soft-border-color{border-color: var(--wp--preset--color--accent-soft) !important;} .has-link-border-color{border-color: var(--wp--preset--color--link) !important;} .has-ok-border-color{border-color: var(--wp--preset--color--ok) !important;} .has-ok-soft-border-color{border-color: var(--wp--preset--color--ok-soft) !important;} .has-warn-border-color{border-color: var(--wp--preset--color--warn) !important;} .has-warn-soft-border-color{border-color: var(--wp--preset--color--warn-soft) !important;} .has-code-bg-border-color{border-color: var(--wp--preset--color--code-bg) !important;} .has-code-text-border-color{border-color: var(--wp--preset--color--code-text) !important;} .has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;} .has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;} .has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;} .has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} .has-xx-large-font-size{font-size: var(--wp--preset--font-size--xx-large) !important;} .has-display-font-size{font-size: var(--wp--preset--font-size--display) !important;} /* theme.json per-block styles (code, preformatted, table, quote, pullquote, separator) */ :root :where(.wp-block-code){background-color: var(--wp--preset--color--code-bg);border-radius: 12px;border-color: #223049;border-width: 1px;color: var(--wp--preset--color--code-text);font-family: var(--wp--preset--font-family--mono);font-size: 0.85rem;line-height: 1.6;padding-top: 1rem;padding-right: 1.1rem;padding-bottom: 1rem;padding-left: 1.1rem;} :root :where(.wp-block-preformatted){background-color: var(--wp--preset--color--code-bg);border-radius: 12px;border-color: #223049;border-width: 1px;color: var(--wp--preset--color--code-text);font-family: var(--wp--preset--font-family--mono);font-size: 0.85rem;line-height: 1.6;padding-top: 1rem;padding-right: 1.1rem;padding-bottom: 1rem;padding-left: 1.1rem;} :root :where(.wp-block-table){border-radius: 12px;border-color: var(--wp--preset--color--border);border-width: 1px;color: var(--wp--preset--color--contrast);font-size: 0.95rem;} :root :where(.wp-block-quote){border-left-color: var(--wp--preset--color--accent);border-left-width: 3px;border-left-style: solid;font-style: normal;padding-left: 1.25rem;} :root :where(.wp-block-pullquote){background-color: var(--wp--preset--color--surface-2);border-top-width: 0;border-bottom-width: 0;} :root :where(.wp-block-separator){color: var(--wp--preset--color--border);} /* useRootPaddingAwareAlignments replacement: the block theme auto-added the `has-global-padding` class to full-width sections (so their inner content kept a side gutter). Without theme.json WordPress no longer adds that class, so reproduce the gutter here: any full-width section directly inside a has-global-padding wrapper gets the root side padding. */ .has-global-padding > .alignfull{padding-right: var(--wp--style--root--padding-right);padding-left: var(--wp--style--root--padding-left);} /* ========================================================================== theme.json replacement (3/3) is above; below are the theme's own component styles (SaaS patterns, docs sidebar/TOC, callouts, code copy button, prose). ========================================================================== */ /* ========================================================================== Component styles — ported verbatim from the block theme's assets/css/theme.css. Tokens come from the preset vars above; this section styles the components those files can't express on their own: SaaS patterns, docs sidebar + TOC, callouts, code copy buttons, and prose polish. ========================================================================== */ /* ---- Shared bits -------------------------------------------------------- */ .es-eyebrow { text-transform: uppercase; letter-spacing: 0.09em; font-weight: 650; margin-bottom: 0.35rem; } /* ---- Header / footer ---------------------------------------------------- */ .es-site-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--wp--preset--color--border); -webkit-backdrop-filter: saturate(1.4) blur(6px); backdrop-filter: saturate(1.4) blur(6px); } .es-brand { gap: 0.6rem; } .es-brand-mark { display: inline-flex; line-height: 0; border-radius: 8px; } .es-brand-mark svg { display: block; border-radius: 8px; } .es-nav { gap: 1.25rem; } .es-site-footer .es-brand { margin-bottom: 0.4rem; } /* ---- Buttons ------------------------------------------------------------ */ .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--wp--preset--color--accent); border: 1.5px solid var(--wp--preset--color--accent); } .wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-block-button__link:focus { background: var(--wp--preset--color--accent-soft); } /* Inverted button for use on the accent CTA banner. */ .es-cta .is-style-invert .wp-block-button__link { background: #ffffff; color: var(--wp--preset--color--accent); border: 0; } .es-cta .is-style-invert .wp-block-button__link:hover { background: #eef2f8; } .es-cta .is-style-outline .wp-block-button__link { background: transparent; color: #ffffff; border: 1.5px solid rgba(255, 255, 255, 0.6); } .es-cta .is-style-outline .wp-block-button__link:hover { background: rgba(255, 255, 255, 0.12); } /* ---- Hero + app-window mock -------------------------------------------- */ .es-hero > .wp-block-heading { max-width: 20ch; margin-inline: auto; } .es-hero > .has-large-font-size { max-width: 44ch; margin-inline: auto; } .es-mock { max-width: 40rem; margin: 2.75rem auto 0; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: 14px; box-shadow: 0 24px 60px -30px rgba(22, 27, 36, 0.4); overflow: hidden; } .es-mock-bar { display: flex; gap: 6px; padding: 11px 14px; background: var(--wp--preset--color--surface-2); border-bottom: 1px solid var(--wp--preset--color--border); } .es-mock-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--wp--preset--color--border); } .es-mock-body { padding: 1.25rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: 0.85rem; } .es-mock-row { display: flex; align-items: center; justify-content: space-between; } .es-mock-line { height: 12px; border-radius: 6px; background: var(--wp--preset--color--surface-2); display: block; } .es-mock-line.w40 { width: 40%; } .es-mock-line.w50 { width: 50%; } .es-mock-line.w60 { width: 60%; } .es-mock-line.w70 { width: 70%; } .es-mock-line.w75 { width: 75%; } .es-mock-line.w85 { width: 85%; } .es-mock-line.w90 { width: 90%; } .es-mock-chip { width: 30%; height: 26px; border-radius: 8px; background: var(--wp--preset--color--accent-soft); } .es-mock-badge { font-size: 0.7rem; font-weight: 650; color: var(--wp--preset--color--ok); background: var(--wp--preset--color--ok-soft); padding: 2px 9px; border-radius: 999px; } /* ---- Cards / features / steps ------------------------------------------ */ .is-style-card, .is-style-feature, .is-style-stat, .is-style-pricing, .is-style-pricing-featured { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: 14px; padding: 1.4rem 1.5rem; height: 100%; } .is-style-feature { display: flex; flex-direction: column; gap: 0.4rem; } .es-feature-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-bottom: 0.5rem; border-radius: 10px; background: var(--wp--preset--color--accent-soft); color: var(--wp--preset--color--accent); } .es-step { position: relative; } .es-step-num { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-bottom: 0.6rem; border-radius: 8px; font-weight: 700; font-size: 0.95rem; background: var(--wp--preset--color--accent); color: #fff; } /* ---- Stats -------------------------------------------------------------- */ .is-style-stat { border: 0; background: transparent; padding: 0.5rem; text-align: center; } .es-stat-num { font-size: clamp(2.2rem, 5vw, 2.8rem); font-weight: 750; line-height: 1; letter-spacing: -0.02em; margin: 0; } .es-stat-num span { font-size: 1rem; font-weight: 600; color: var(--wp--preset--color--muted); margin-left: 2px; } /* ---- Pricing ------------------------------------------------------------ */ .is-style-pricing-featured { border-color: var(--wp--preset--color--accent); box-shadow: 0 20px 50px -28px rgba(35, 63, 100, 0.55); position: relative; } .es-price { font-size: 2.4rem; font-weight: 750; letter-spacing: -0.02em; margin: 0.3rem 0; } .es-price span { font-size: 1rem; font-weight: 600; color: var(--wp--preset--color--muted); } .es-price-tag { display: inline-block; margin: 0 0 0.4rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wp--preset--color--accent); background: var(--wp--preset--color--accent-soft); padding: 3px 10px; border-radius: 999px; } /* ---- Soft panel + logos + testimonial --------------------------------- */ .is-style-panel { background: var(--wp--preset--color--surface-2); border-radius: 12px; padding: 1.1rem 1.3rem; } .es-logos { display: flex; flex-wrap: wrap; gap: 1.25rem 2.25rem; justify-content: center; align-items: center; margin-top: 1.1rem; } .es-logos span { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--wp--preset--color--muted); opacity: 0.85; } .es-quote p { margin: 0; } /* ---- Checklists --------------------------------------------------------- */ .is-style-checks { list-style: none; margin-left: 0; padding-left: 0; } .is-style-checks li { position: relative; padding-left: 1.75rem; margin-block: 0.5rem; } .is-style-checks li::before { content: ""; position: absolute; left: 0; top: 0.15em; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--wp--preset--color--ok-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f8a52' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.8rem no-repeat; } /* ---- Callouts (block styles + raw