/* Theme Name: AgencyOne Theme URI: https://pluginshift.com/agencyone Author: pluginshift Author URI: https://pluginshift.com Description: AgencyOne is a modern block theme for digital product agencies. It pairs a full-site-editing foundation with React-powered interactive blocks and frontend islands — testimonials sliders, pricing comparisons, a searchable product catalogue and documentation search — so marketing pages stay editable in the Site Editor while the interactive surfaces stay fast and componentised. Products are the theme's own content type, independent of any e-commerce plugin. Requires at least: 6.7 Tested up to: 7.0 Requires PHP: 7.4 Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: agencyone Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, portfolio, e-commerce */ /* * This file carries only the small amount of global CSS that theme.json cannot * express. Component styling lives next to its React component in src/ and is * compiled by wp-scripts into build/. Design tokens live in theme.json. */ /* Link affordance — theme.json cannot set text-decoration-thickness. */ section.wp-block-group.alignfull.agencyone-products-hero.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained { text-align: center; } a { text-decoration-thickness: 1px !important; text-underline-offset: 0.15em; } /* Respect reduced-motion for every animation the theme ships. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* * Header, main and footer sit flush. * * WordPress puts the global block gap between the root-level blocks too, via * `.wp-site-blocks > * + *`. That leaves a 24px strip of page background between * the header and the first section, and another between the last section and the * footer. Both regions already own their padding, so the gap is just a seam. */ .wp-site-blocks > * + * { margin-block-start: 0; } /* * Section bands sit flush against each other. * * theme.json's blockGap (spacing--30, 1.5rem) is the right rhythm between * paragraphs, and WordPress applies it to every sibling in a constrained layout * via `> * + * { margin-block-start: … }`. That includes full-bleed section * bands — but each band already carries its own generous vertical padding, so * the extra gap only exposes a 24px strip of page background between, say, the * white hero and the grey services band. It reads as a rendering fault, not as * spacing. * * Prose keeps its block gap; only adjacent full-bleed / wide sections lose it. * To restore the gap, delete this rule. To change the gap everywhere, edit * `styles.spacing.blockGap` in theme.json. */ .wp-block-post-content > .alignfull + .alignfull, .wp-block-post-content > .alignfull + .alignwide, .wp-block-post-content > .alignwide + .alignfull, .wp-block-post-content > .alignwide + .alignwide { margin-block-start: 0; } /* * Scroll snapping for the product showcase. * * The snap type has to sit on the *page* scroller, which is . Putting * `overflow-y` on the showcase section instead would make it a nested scroll * container, and the wheel would be captured the moment the pointer crossed it — * precisely the hijacking the design rules out. This way the page scrolls * normally and merely prefers to come to rest on a card. * * `:has()` scopes it to pages that actually contain a snapping showcase, with no * PHP involved. That matters here: the obvious server-side alternative, * `has_block()`, reads post_content — and pages built from patterns store only a * `wp:pattern` reference, so the block would not be found. The CSS asks the * rendered DOM instead, which cannot be wrong. Browsers without `:has()` simply * do not snap, which is a perfectly good page. * * `proximity`, not `mandatory`: the page settles onto a card only when the * scroll already ended near one. A deliberate flick past several cards is never * fought, and the header, the sections above and the footer stay freely * scrollable rather than being yanked to the nearest snap point. */ html:has(.agencyone-showcase.has-snap.is-enhanced) { scroll-snap-type: y proximity; } /* Snapping is motion the visitor did not ask for. */ @media (prefers-reduced-motion: reduce) { html:has(.agencyone-showcase.has-snap.is-enhanced) { scroll-snap-type: none; } } /* Skip link — visible only on focus. */ .skip-link:focus { background-color: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); clip: auto !important; clip-path: none; display: block; font-size: 0.875rem; font-weight: 600; height: auto; left: 8px; padding: 16px 24px; text-decoration: none; top: 8px; width: auto; z-index: 100000; } /* * Footer. * * The footer runs a two-tier text hierarchy: headings and hovered links sit at * full `base`, everything else steps back to `--agencyone-footer-dim`. That dim * value is mixed from the palette rather than pinned to a hex, so a style * variation that repoints `base` / `contrast` carries the footer with it. At * today's values it lands near #c6c8cd — ~11:1 on the dark ground, so the step * back is a hierarchy choice and not a contrast compromise. */ .agencyone-footer { --agencyone-footer-dim: color-mix(in srgb, var(--wp--preset--color--base) 78%, var(--wp--preset--color--contrast)); } /* * theme.json sets the global link colour to `primary` (indigo), which is a good * ratio on the light body but only ~2.6:1 against the dark footer — below the * 4.5:1 WCAG minimum. The footer is the one surface that inverts, so it opts out * of the global link colour rather than the palette being weakened everywhere. */ .agencyone-footer a:where(:not(.wp-element-button)) { color: var(--agencyone-footer-dim); text-decoration: none; } .agencyone-footer a:where(:not(.wp-element-button)):hover { color: var(--wp--preset--color--base); text-decoration: underline; } .agencyone-footer__tagline, .agencyone-footer__legal { color: var(--agencyone-footer-dim); } /* * `font-weight` is stated rather than inherited on purpose. The product HTML * pages ship their own `h1`-`h4` base rule, and a bare element selector loses to * this class — but only for the properties this class actually sets. */ .agencyone-footer__heading { font-weight: 700; letter-spacing: 0.1em; margin-block-end: 1.25rem; text-transform: uppercase; } .agencyone-footer__list { list-style: none; padding-inline-start: 0; } .agencyone-footer__list li { margin-block: 0.5rem; } /* Core pills the social icons to a full circle; the design asks for a squircle. */ .agencyone-footer__social .wp-social-link { border-radius: 0.625rem; } /* * Core draws the separator with a border on all four sides plus a background; * `is-style-wide` only widens it. Zeroing the border and painting a single top * edge is what turns it into the hairline rule the design asks for. */ .agencyone-footer__rule { background: none; border: 0; border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 14%, transparent); } /* * The bottom row's two halves each need to stay a unit: the copyright on one * side, the legal links on the other. Below ~600px flex-wrap drops them onto * separate lines, at which point space-between has nothing to distribute and the * links would sit flush left under the copyright — align them to the start so the * stacked order reads as one column rather than two ragged ones. */ .agencyone-footer__bottom { row-gap: 1rem; } .agencyone-footer__bottom p { margin-block: 0; } /* * Page title. * * `text-wrap: balance` only, deliberately. Everything else about the title — * size, weight, tracking — is already decided by theme.json's `xx-large` preset * and the `heading` element styles, and repeating those here would fork them. * Balancing is the one thing theme.json has no key for, and it matters most on * exactly this block: a centred two-or-three-word title that would otherwise * break with a single orphaned word on the second line. */ .agencyone-page-title, .agencyone-section-title { text-wrap: balance; } /* * Prose headings inside a plain page. * * theme.json's heading scale is tuned for landing pages, where an h2 opens a * full-bleed section band and has 1200px of width and a colour change to earn * its 2.5rem. In a 740px prose column — a privacy policy, terms, an about page — * that same h2 lands at nearly the size of the page title itself, so a document * with a dozen numbered sections reads as a dozen competing titles with no * hierarchy between them. * * The step-down is scoped to *direct* children of post-content, which is what * distinguishes prose from structure: a heading the editor typed sits at the top * level, whereas a heading inside a pattern's section band is nested in that * band's group and keeps the display scale. So a page that mixes prose with * pattern sections gets both treatments, correctly, with no per-page markup. */ .agencyone-page-body .wp-block-post-content > h2 { font-size: var(--wp--preset--font-size--x-large); margin-block-start: var(--wp--preset--spacing--50); } .agencyone-page-body .wp-block-post-content > h3 { font-size: var(--wp--preset--font-size--large); margin-block-start: var(--wp--preset--spacing--40); } /* * The first heading already has the section's top padding above it; the * margin-block-start above is for separating *sections*, not for pushing the * whole document down. */ .agencyone-page-body .wp-block-post-content > :first-child { margin-block-start: 0; } /* * Feature card icon badges. * * The gradient runs `primary` → `primary-hover` rather than the `primary-to-accent` * preset. Both palette entries are indigo, so the badge reads as one colour with * depth rather than as a two-colour wash, and — unlike a hardcoded violet — it * follows a style variation: the badge turns orange under Warm and lilac under * Midnight, alongside every other primary surface on the page. */ .agencyone-feature__icon { align-items: center; background-image: linear-gradient(135deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--primary-hover) 100%); border-radius: var(--wp--custom--radius--pill); color: var(--wp--preset--color--base); display: inline-flex; height: 3.5rem; justify-content: center; width: 3.5rem; } .agencyone-feature__icon svg { height: 1.5rem; width: 1.5rem; } /* * The heading and its description are a pair, so they close up: theme.json's * blockGap is the rhythm between paragraphs of prose, and at 1.5rem it spaces * the title away from the text it titles. The badge keeps the full gap below it, * which is what separates the card's two halves. */ .agencyone-feature .wp-block-heading + p { margin-block-start: var(--wp--preset--spacing--10); } /* * Hover lift. * * The border colour is the only thing that moves to `primary`; the card's fill * stays `base`. A tinted fill would have to be mixed against the card's own * background, and `is-style-card` is used on white cards and on the surface band * alike — one tint cannot be right on both. The border and the shadow carry the * state on any ground. */ .agencyone-feature { transition: transform var(--wp--custom--transition--base), box-shadow var(--wp--custom--transition--base), border-color var(--wp--custom--transition--base); } .agencyone-feature:hover { border-color: var(--wp--preset--color--primary); box-shadow: var(--wp--preset--shadow--raised); transform: translateY(-4px); } /* * Process step cards. * * The step number and the step name are one label split across two blocks, so * they have to sit tight together — the global blockGap (1.5rem) is the rhythm * between paragraphs of prose, and at that distance the "01" reads as floating * above the card rather than belonging to "Discovery". Pulling the pair together * also opens a clear gap before the description, which is what gives the card * its two-part structure: label, then body. */ .agencyone-step__number { line-height: 1; margin-block-end: 0; } .agencyone-step__number + .wp-block-heading { margin-block-start: var(--wp--preset--spacing--10); } /* * Islands render server-side placeholder markup and are hydrated by React. * * An island may reserve height so that swapping in the React tree does not shift * the page. That reservation is an estimate, so it is scoped to the pre-hydration * state only: once React has mounted, the real content decides the height. Left * unscoped, an over-estimate becomes permanent dead space under the block. */ [data-agencyone-island][data-hydrated="false"] { min-height: var(--agencyone-island-min-height, 0); } [data-agencyone-island][data-hydrated="false"] .agencyone-island__fallback { display: block; } [data-agencyone-island][data-hydrated="true"] .agencyone-island__fallback { display: none; } /* * Products page (templates/page-products.html). * * Every rule here is scoped under `.agencyone-products-page` — the class on the * template's
. That matters for two reasons. The product card and the * product-filter grid are shared with the home page's featured grid, so an * unscoped restyle would drag the home page along with it; and the class sits * *above* the product-filter block in the markup, so it is an ancestor React * never replaces on hydration — the two-up grid and the pill chips hold their * look after the island mounts, not just before. * * Colours come from theme.json tokens, not the mockup's hexes. The mockup's * indigo-teal-pink gradient is approximated with the palette's `primary-to-accent` * (indigo → cyan): close to the design, and it follows a style variation instead * of freezing one palette into the stylesheet. */ /* Hero -------------------------------------------------------------------- */ .agencyone-products-hero__pill { align-items: center; background-color: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--pill); color: var(--wp--preset--color--muted); display: inline-flex; font-size: var(--wp--preset--font-size--small); font-weight: 600; gap: 0.5rem; margin-inline: auto; padding: 0.4rem 1rem; width: fit-content; } /* The status dot. Pinned green because it signals "shipping", not a brand colour. */ .agencyone-products-hero__pill::before { background-color: var(--wp--preset--color--success); border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--success) 22%, transparent); content: ""; height: 8px; width: 8px; } .agencyone-products-hero__title { text-wrap: balance; } /* * Gradient text. `-webkit-background-clip: text` is still the only cross-browser * way to paint type with a gradient, so both the prefixed and standard * properties are set and the fill is made transparent to let the background show. */ .agencyone-grad-text { -webkit-background-clip: text; background-clip: text; background-image: var(--wp--preset--gradient--primary-to-accent); -webkit-text-fill-color: transparent; color: transparent; } .agencyone-products-hero__lead { margin-inline: auto; max-width: 42rem; } /* Filter chips — the mockup's status tabs, driven by real categories --------- */ .agencyone-products-page .agencyone-product-filter__categories { gap: 0.6rem; justify-content: center; margin-block-end: var(--wp--preset--spacing--50); } .agencyone-products-page .agencyone-product-filter__chip { border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--pill); color: var(--wp--preset--color--muted); font-weight: 600; padding: 0.55rem 1.2rem; transition: color var(--wp--custom--transition--fast), border-color var(--wp--custom--transition--fast), background-color var(--wp--custom--transition--fast); } .agencyone-products-page .agencyone-product-filter__chip:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--contrast); } /* The active chip fills with the brand gradient — same one as the hero accent. */ .agencyone-products-page .agencyone-product-filter__chip.is-active { background-image: var(--wp--preset--gradient--primary-to-accent); border-color: transparent; box-shadow: var(--wp--preset--shadow--soft); color: var(--wp--preset--color--base); } /* Two-up grid --------------------------------------------------------------- */ /* * A two-value selector (0,2,0) so it beats both single-class grid rules the * blocks ship — the shared `auto-fit` grid and the filter's `--agencyone-columns` * grid — without !important, and collapses to one column before the cards get * too narrow to read. */ .agencyone-products-page .agencyone-product-filter__grid { gap: var(--wp--preset--spacing--40); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 781px) { .agencyone-products-page .agencyone-product-filter__grid { grid-template-columns: minmax(0, 1fr); } } /* Cards — larger, with the mockup's lift-and-outline on hover ---------------- */ .agencyone-products-page .agencyone-product-card { border-radius: 24px; } .agencyone-products-page .agencyone-product-card:hover { border-color: var(--wp--preset--color--primary); box-shadow: var(--wp--preset--shadow--raised); transform: translateY(-10px); } .agencyone-products-page .agencyone-product-card__body { padding: var(--wp--preset--spacing--40); } .agencyone-products-page .agencyone-product-card__title { font-size: var(--wp--preset--font-size--x-large); } /* Feature banner ------------------------------------------------------------ */ .agencyone-products-mini__icon { font-size: 1.6rem; line-height: 1; margin-block-end: var(--wp--preset--spacing--10); } /* * The mini cards drop the default card shadow: four of them tiled tight would * stack into a busy quilt of shadows. A flat border is enough to separate them * from the surface band they sit on. */ .agencyone-products-mini__item { box-shadow: none; padding: var(--wp--preset--spacing--30); } /* Closing CTA --------------------------------------------------------------- */ /* * The gradient band inverts, so links inside it opt out of the global indigo * link colour — indigo on the gradient is illegible — and the paragraph steps * back from pure white to read as support text under the heading. */ .agencyone-products-cta p { margin-inline: auto; max-width: 34rem; opacity: 0.92; } /* * About page (templates/page-about.html). * * The components are keyed off their own `agencyone-about-*` classes rather than * an ancestor selector — every class here is unique to this page, so the shared * `is-style-card` group style keeps its default look elsewhere and only gains the * hover lift, centred beliefs and gradient accents where an `agencyone-about-*` * companion class is added. The two page-wide rules (flush bands below) are the * only ones scoped to `.agencyone-about-page`, the class on the template's
. * * Colours come from theme.json tokens, never the mockup's hexes. The mockup's * violet-teal-pink gradient is approximated with the palette's `primary` → `accent` * (indigo → cyan), the same substitution the products page makes: close to the * design, and it follows a style variation instead of freezing one palette in. */ /* * Section bands sit flush. * * main is a constrained layout, so WordPress puts the global blockGap between * every section. Each band already owns its vertical padding and the surface * bands carry their own hairline borders, so the gap only exposes a strip of * page background between bands — the same seam the site-level reset removes for * root blocks and post-content. Scope it to the about page's own sections. */ .agencyone-about-page > section + section { margin-block-start: 0; } /* Hero -------------------------------------------------------------------- */ /* * The "Newly founded" pill with its live green dot. * * `display: flex` (block-level) with `width: fit-content` and `margin-inline: * auto` is what centres it. An inline-flex box is inline-level, and auto inline * margins compute to zero on inline-level boxes — so inline-flex would sit left * regardless of the parent's text-align, which is the bug this replaces. */ .agencyone-about-pill { align-items: center; background-color: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--pill); color: var(--wp--preset--color--muted); display: flex; font-size: var(--wp--preset--font-size--small); font-weight: 600; gap: 0.5rem; margin-inline: auto; padding: 0.4rem 1rem; width: fit-content; } /* Pinned green — it signals "just launched", not a brand colour. */ .agencyone-about-pill::before { background-color: var(--wp--preset--color--success); border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--success) 22%, transparent); content: ""; height: 8px; width: 8px; } /* * Hero gradient ground. * * The mockup's plain-white hero reads flat, so the band takes a soft brand wash: * two corner glows in `primary` / `accent` over a vertical fade back to `base`. * All three come from theme.json tokens and are mixed low (≤18%), so the dark * heading and muted lead keep their contrast and the wash follows a style * variation — warm under Warm, lilac under Midnight — instead of a frozen hue. */ .agencyone-about-hero { background-color: var(--wp--preset--color--base); background-image: radial-gradient(58rem 30rem at 12% -12%, color-mix(in srgb, var(--wp--preset--color--primary) 20%, transparent), transparent 60%), radial-gradient(52rem 30rem at 92% 0%, color-mix(in srgb, var(--wp--preset--color--accent) 18%, transparent), transparent 58%), linear-gradient(180deg, color-mix(in srgb, var(--wp--preset--color--primary) 7%, var(--wp--preset--color--base)) 0%, var(--wp--preset--color--base) 72%); } .agencyone-about-hero__title { text-wrap: balance; } .agencyone-about-hero__lead { margin-inline: auto; max-width: 44rem; } /* * Floating capability chips beneath the hero. Decorative and aria-hidden, so * they carry no content a screen reader needs. They wrap into a centred cluster * rather than being absolutely positioned — absolute placement from the mockup * does not survive the fluid theme width, and a wrapping flex row reads the same. */ .agencyone-about-orbit { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-block-start: var(--wp--preset--spacing--50); margin-inline: auto; max-width: 44rem; } .agencyone-about-chip { background-color: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--pill); box-shadow: var(--wp--preset--shadow--soft); color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); font-weight: 600; padding: 0.5rem 1rem; animation: agencyone-about-bob 5s ease-in-out infinite; } .agencyone-about-chip b { color: var(--wp--preset--color--primary); font-weight: 700; } .agencyone-about-chip:nth-child(2) { animation-delay: -1.2s; } .agencyone-about-chip:nth-child(3) { animation-delay: -2.4s; } .agencyone-about-chip:nth-child(4) { animation-delay: -3.1s; } .agencyone-about-chip:nth-child(5) { animation-delay: -4s; } @keyframes agencyone-about-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* Beliefs strip ----------------------------------------------------------- */ .agencyone-about-belief { text-align: center; transition: transform var(--wp--custom--transition--base), box-shadow var(--wp--custom--transition--base), border-color var(--wp--custom--transition--base); } .agencyone-about-belief:hover { border-color: var(--wp--preset--color--primary); box-shadow: var(--wp--preset--shadow--raised); transform: translateY(-6px); } .agencyone-about-belief__icon { font-size: 1.75rem; line-height: 1; margin-block-end: var(--wp--preset--spacing--20); } .agencyone-about-belief .wp-block-heading { margin-block-end: var(--wp--preset--spacing--10); } /* Story ------------------------------------------------------------------- */ /* The value rows: a gradient tick square, then the title and its one-line note. */ .agencyone-about-value { background-color: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--md); padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); padding-inline-start: 3.25rem; position: relative; transition: transform var(--wp--custom--transition--base); } .agencyone-about-value:hover { transform: translateX(4px); } .agencyone-about-value::before { background-image: linear-gradient(135deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--accent) 100%); border-radius: var(--wp--custom--radius--sm); color: var(--wp--preset--color--base); content: "✓"; display: grid; font-size: 0.85rem; font-weight: 900; height: 1.6rem; inset-block-start: var(--wp--preset--spacing--20); inset-inline-start: var(--wp--preset--spacing--30); place-items: center; position: absolute; width: 1.6rem; } .agencyone-about-value__title { margin-block-end: 0.15rem; } .agencyone-about-value + .agencyone-about-value { margin-block-start: var(--wp--preset--spacing--20); } /* * Story visual — an animated grid tile with a pulsing gradient core, standing in * for the product photography an about page would otherwise carry. Decorative, * so the markup is aria-hidden and none of this conveys meaning. */ .agencyone-about-visual { aspect-ratio: 1 / 1; background-color: var(--wp--preset--color--surface); background-image: linear-gradient(var(--wp--preset--color--border) 1px, transparent 1px), linear-gradient(90deg, var(--wp--preset--color--border) 1px, transparent 1px); background-size: 40px 40px; border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--lg); box-shadow: var(--wp--preset--shadow--raised); display: grid; margin-inline: auto; max-width: 26rem; place-items: center; -webkit-mask-image: radial-gradient(circle at center, #000 45%, transparent 82%); mask-image: radial-gradient(circle at center, #000 45%, transparent 82%); } .agencyone-about-visual__core { align-items: center; background-image: linear-gradient(135deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--accent) 100%); border-radius: var(--wp--custom--radius--lg); box-shadow: var(--wp--preset--shadow--raised); color: var(--wp--preset--color--base); display: flex; font-size: 2.4rem; font-weight: 800; height: 7.5rem; justify-content: center; width: 7.5rem; animation: agencyone-about-pulse 3.4s ease-in-out infinite; } @keyframes agencyone-about-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } } /* Mission & vision cards -------------------------------------------------- */ .agencyone-about-mv__card { transition: transform var(--wp--custom--transition--base), box-shadow var(--wp--custom--transition--base), border-color var(--wp--custom--transition--base); } .agencyone-about-mv__card:hover { border-color: var(--wp--preset--color--primary); box-shadow: var(--wp--preset--shadow--raised); transform: translateY(-6px); } .agencyone-about-mv__badge { align-items: center; background-image: linear-gradient(135deg, color-mix(in srgb, var(--wp--preset--color--primary) 16%, var(--wp--preset--color--base)), color-mix(in srgb, var(--wp--preset--color--accent) 14%, var(--wp--preset--color--base))); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--md); display: inline-flex; font-size: 1.4rem; height: 3rem; justify-content: center; line-height: 1; margin-block-end: var(--wp--preset--spacing--20); width: 3rem; } .agencyone-about-mv__card .wp-block-heading + p { margin-block-start: var(--wp--preset--spacing--10); } /* What we're building ----------------------------------------------------- */ .agencyone-about-feature { transition: transform var(--wp--custom--transition--base), box-shadow var(--wp--custom--transition--base), border-color var(--wp--custom--transition--base); } .agencyone-about-feature:hover { border-color: var(--wp--preset--color--primary); box-shadow: var(--wp--preset--shadow--raised); transform: translateY(-6px); } .agencyone-about-feature__icon { align-items: center; background-image: linear-gradient(135deg, color-mix(in srgb, var(--wp--preset--color--primary) 16%, var(--wp--preset--color--base)), color-mix(in srgb, var(--wp--preset--color--accent) 14%, var(--wp--preset--color--base))); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--md); display: inline-flex; font-size: 1.5rem; height: 3.25rem; justify-content: center; line-height: 1; margin-block-end: var(--wp--preset--spacing--20); width: 3.25rem; } .agencyone-about-feature .wp-block-heading + p { margin-block-start: var(--wp--preset--spacing--10); } /* Team -------------------------------------------------------------------- */ .agencyone-about-member { text-align: center; transition: transform var(--wp--custom--transition--base), box-shadow var(--wp--custom--transition--base), border-color var(--wp--custom--transition--base); } .agencyone-about-member:hover { border-color: var(--wp--preset--color--primary); box-shadow: var(--wp--preset--shadow--raised); transform: translateY(-6px); } .agencyone-about-avatar { align-items: center; border-radius: 50%; color: var(--wp--preset--color--base); display: flex; font-size: 1.6rem; font-weight: 800; height: 5.5rem; justify-content: center; margin-block-end: var(--wp--preset--spacing--20); margin-inline: auto; width: 5.5rem; } /* * The three avatar tints are rotations of the same primary → accent gradient, * so they read as one family and follow a style variation together rather than * being three frozen hex pairs. */ .agencyone-about-avatar--1 { background-image: linear-gradient(135deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--accent) 100%); } .agencyone-about-avatar--2 { background-image: linear-gradient(135deg, var(--wp--preset--color--accent) 0%, var(--wp--preset--color--primary-hover) 100%); } .agencyone-about-avatar--3 { background-image: linear-gradient(135deg, var(--wp--preset--color--primary-hover) 0%, var(--wp--preset--color--primary) 100%); } .agencyone-about-member__role { color: var(--wp--preset--color--primary); font-size: var(--wp--preset--font-size--small); font-weight: 700; margin-block: 0.25rem 0.5rem; } /* Closing CTA ------------------------------------------------------------- */ /* * The gradient band inverts, so its paragraph steps back from pure white to read * as support text under the heading, and the ghost button opts out of the theme's * border/contrast colours — both are illegible on the gradient — for a white * outline that reads on any point of it. */ .agencyone-about-cta p { margin-inline: auto; max-width: 36rem; opacity: 0.92; } .agencyone-about-cta__ghost .wp-block-button__link { background-color: transparent; border: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 55%, transparent); color: var(--wp--preset--color--base); } .agencyone-about-cta__ghost .wp-block-button__link:hover { background-color: color-mix(in srgb, var(--wp--preset--color--base) 14%, transparent); border-color: var(--wp--preset--color--base); } /* * Responsive column counts for the about-page card grids. * * The grids use the grid layout's `columnCount`, which pins a fixed number of * equal columns (no `auto-fill`, so no trailing empty tracks — that is what * keeps the two mission cards and three team cards centred and filling their row * rather than bunched to the left). Fixed columns do not reflow on their own, * so these queries step them down. Each selector is scoped to its section as * well as its grid class — a two-class (0,2,0) selector — so it outranks the * single-class rule the grid layout prints for the desktop count. */ @media (max-width: 900px) { .agencyone-about-beliefs .agencyone-about-belief-grid, .agencyone-about-what .agencyone-about-what-grid, .agencyone-about-team .agencyone-about-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .agencyone-about-beliefs .agencyone-about-belief-grid, .agencyone-about-mv .agencyone-about-mv-grid, .agencyone-about-what .agencyone-about-what-grid, .agencyone-about-team .agencyone-about-team-grid { grid-template-columns: minmax(0, 1fr); } } /* * Blog listing (templates/home.html, index.html, archive.html). * * One post-card component, shared by all three templates so the posts index and * every category / tag / date archive read identically — restyle the card here * and all of them follow. The card is keyed off `.agencyone-blog .wp-block-post` * (the
  • the Post Template prints) rather than a per-item class, because the * Query Loop gives no hook to class each
  • individually; scoping to the * `.agencyone-blog` query wrapper keeps the styling off any other post list. * * Colours are theme.json tokens throughout, so the blog tracks the Warm / * Midnight style variations like the rest of the theme. */ /* Header band ------------------------------------------------------------- */ /* * An even lavender wash that settles to base by the fold, with a centred top * glow for depth — the same treatment as the single-post header so the blog and * its articles read as one surface. The tint stays on the linear layer so it * spans the full band rather than collapsing into a faint corner. */ .agencyone-blog-head { background-color: var(--wp--preset--color--surface); background-image: radial-gradient(52rem 24rem at 50% -30%, color-mix(in srgb, var(--wp--preset--color--accent) 16%, transparent), transparent 62%), linear-gradient(180deg, color-mix(in srgb, var(--wp--preset--color--primary) 14%, var(--wp--preset--color--base)) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 7%, var(--wp--preset--color--base)) 55%, var(--wp--preset--color--base) 100%); } .agencyone-blog-head__title { text-wrap: balance; } .agencyone-blog-head__lead { margin-inline: auto; max-width: 42rem; } /* Topic pills — the core Categories list, laid out as a centred pill row ---- */ .agencyone-blog-topics { margin-block-start: var(--wp--preset--spacing--40); } .agencyone-blog-topics .wp-block-categories { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; list-style: none; margin: 0; padding: 0; } .agencyone-blog-topics .wp-block-categories a { border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--pill); color: var(--wp--preset--color--muted); display: inline-block; font-size: var(--wp--preset--font-size--small); font-weight: 600; padding: 0.4rem 1rem; text-decoration: none; transition: color var(--wp--custom--transition--fast), border-color var(--wp--custom--transition--fast), background-color var(--wp--custom--transition--fast); } .agencyone-blog-topics .wp-block-categories a:hover { background-color: var(--wp--preset--color--surface); border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--contrast); } /* Post card --------------------------------------------------------------- */ /* * Image-led card: a featured image inset at the top and rounded on all four * corners, then a category pill, title, excerpt and — pinned to the foot above a * hairline — the author on the left and the date on the right. The card carries a * thin uniform padding so the image floats inside it with a small margin, and the * body adds more padding so the text sits further in than the image, as in the * reference. * * It is a flex column and the excerpt grows (flex: 1), which pushes the meta row * to the bottom so the author/date baseline lines up across a row however long * the titles run — the grid already stretches each card to the tallest. */ .agencyone-blog .wp-block-post { background-color: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--lg); box-shadow: var(--wp--preset--shadow--soft); display: flex; flex-direction: column; overflow: hidden; padding: var(--wp--preset--spacing--10); transition: transform var(--wp--custom--transition--base), box-shadow var(--wp--custom--transition--base), border-color var(--wp--custom--transition--base); } .agencyone-blog .wp-block-post:hover { border-color: var(--wp--preset--color--primary); box-shadow: var(--wp--preset--shadow--raised); transform: translateY(-6px); } /* Featured image — inset with a small margin and rounded on all four corners. */ .agencyone-blog .agencyone-post-card__image { margin: 0; } .agencyone-blog .agencyone-post-card__image img { border-radius: var(--wp--custom--radius--md); height: 100%; object-fit: cover; width: 100%; } /* If a post has no featured image, drop the empty figure so the card starts cleanly at the category pill rather than opening with a gap. */ .agencyone-blog .wp-block-post-featured-image:empty { display: none; } .agencyone-post-card__body { display: flex; flex: 1; flex-direction: column; padding: var(--wp--preset--spacing--30); text-align: left; } /* Category — a light pill that shrinks to its label and sits at the left. */ .agencyone-post-card__terms { align-self: flex-start; background-color: color-mix(in srgb, var(--wp--preset--color--primary) 10%, var(--wp--preset--color--base)); border-radius: var(--wp--custom--radius--pill); color: var(--wp--preset--color--primary); font-weight: 700; letter-spacing: 0.06em; padding: 0.3rem 0.85rem; text-transform: uppercase; } .agencyone-post-card__terms a { color: inherit; text-decoration: none; } .agencyone-blog .wp-block-post-title { font-weight: 700; line-height: 1.3; margin-block: 0; } .agencyone-blog .wp-block-post-title a { color: var(--wp--preset--color--contrast); text-decoration: none; } .agencyone-blog .wp-block-post-title a:hover { color: var(--wp--preset--color--primary); } /* Excerpt grows to fill the card, pushing the meta row to the foot. */ .agencyone-post-card__excerpt { color: var(--wp--preset--color--muted); flex: 1; font-size: var(--wp--preset--font-size--medium); margin-block: 0; } .agencyone-post-card__excerpt .wp-block-post-excerpt__more-text { color: var(--wp--preset--color--primary); font-weight: 600; } /* Meta — author left, date right, over a hairline rule. */ .agencyone-post-card__meta { align-items: center; border-block-start: 1px solid var(--wp--preset--color--border); color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); margin-block-start: var(--wp--preset--spacing--20); padding-block-start: var(--wp--preset--spacing--30); } .agencyone-post-card__meta .wp-block-post-author-name { color: var(--wp--preset--color--contrast); font-weight: 600; } /* Pagination -------------------------------------------------------------- */ .agencyone-blog__pagination { gap: 0.4rem; margin-block-start: var(--wp--preset--spacing--60); } .agencyone-blog__pagination .wp-block-query-pagination-numbers { display: inline-flex; gap: 0.4rem; } .agencyone-blog__pagination .page-numbers { align-items: center; border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--md); color: var(--wp--preset--color--muted); display: inline-flex; justify-content: center; min-width: 2.5rem; padding: 0.4rem 0.75rem; text-decoration: none; transition: color var(--wp--custom--transition--fast), border-color var(--wp--custom--transition--fast), background-color var(--wp--custom--transition--fast); } .agencyone-blog__pagination a.page-numbers:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--contrast); } .agencyone-blog__pagination .page-numbers.current { background-color: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); } /* Responsive: 3 → 2 → 1 columns, matching the about-page grids. */ @media (max-width: 900px) { .agencyone-blog .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .agencyone-blog .wp-block-post-template.is-layout-grid { grid-template-columns: minmax(0, 1fr); } } /* * Single post (templates/single.html). * * A tinted header band carries the breadcrumb, title and author meta; the body * is a two-column layout — article on the left, a sticky Related card on the * right. All tokens are theme.json presets, and the tag / breadcrumb / card * treatments reuse the same pill and card language as the blog listing. * * The Related card runs a plain recent-posts Query Loop (inherit:false) rather * than a true "same category" query: core's Query Loop cannot read the current * post's terms, and matching by category needs a PHP query-var filter. Recent * posts is the maintainable, dependency-free stand-in — swap the query here if a * related-posts plugin is added later. */ /* Header band ------------------------------------------------------------- */ /* * The band takes an even vertical wash — a clearly visible lavender at the top * settling to base by the fold — plus a soft accent glow in the top-right for * depth. The earlier version pushed a single radial off-screen top-left, so the * band rendered almost white and read as an empty/broken hero; keeping the * primary tint on the linear layer is what makes the colour span edge to edge. */ .agencyone-single-head { background-color: var(--wp--preset--color--surface); background-image: radial-gradient(44rem 24rem at 90% -25%, color-mix(in srgb, var(--wp--preset--color--accent) 20%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--wp--preset--color--primary) 16%, var(--wp--preset--color--base)) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 8%, var(--wp--preset--color--base)) 55%, var(--wp--preset--color--base) 100%); } .agencyone-single__title { margin-block: var(--wp--preset--spacing--30) 0; max-width: 22ch; text-wrap: balance; } /* Breadcrumb -------------------------------------------------------------- */ .agencyone-single__crumbs { align-items: center; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); } .agencyone-single__crumbs a, .agencyone-single__crumbs .wp-block-post-terms a { color: var(--wp--preset--color--muted); text-decoration: none; } .agencyone-single__crumbs a:hover, .agencyone-single__crumbs .wp-block-post-terms a:hover { color: var(--wp--preset--color--primary); } .agencyone-single__crumbs .wp-block-post-terms { color: var(--wp--preset--color--contrast); } .agencyone-single__crumb-sep { color: var(--wp--preset--color--border); margin-inline: 0.5rem; } /* Author meta row --------------------------------------------------------- */ .agencyone-single__meta { align-items: center; color: var(--wp--preset--color--muted); } .agencyone-single__meta .wp-block-avatar img { background-color: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--pill); } .agencyone-single__meta .wp-block-post-author-name { color: var(--wp--preset--color--contrast); font-weight: 600; } /* The category reads as a small uppercase brand label, like the reference. */ .agencyone-single__meta-cat a { color: var(--wp--preset--color--primary); font-weight: 700; letter-spacing: 0.06em; text-decoration: none; text-transform: uppercase; } .agencyone-single__meta-cat a:hover { text-decoration: underline; } /* A bullet separates the category and the date from what precedes them. */ .agencyone-single__meta .wp-block-post-terms::before, .agencyone-single__meta .wp-block-post-date::before { color: var(--wp--preset--color--border); content: "•"; margin-inline-end: 0.75rem; } /* Tag pills --------------------------------------------------------------- */ .agencyone-single__tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-block-end: var(--wp--preset--spacing--40); } .agencyone-single__tags a { background-color: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--pill); color: var(--wp--preset--color--muted); display: inline-block; font-weight: 600; padding: 0.35rem 0.9rem; text-decoration: none; transition: color var(--wp--custom--transition--fast), border-color var(--wp--custom--transition--fast), background-color var(--wp--custom--transition--fast); } .agencyone-single__tags a::before { content: "#"; opacity: 0.6; } .agencyone-single__tags a:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--contrast); } /* Author box -------------------------------------------------------------- */ .agencyone-single__author { align-items: flex-start; margin-block-start: var(--wp--preset--spacing--50); } .agencyone-single__author .wp-block-avatar img { background-color: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--pill); } .agencyone-single__author .wp-block-post-author-biography { margin-block-start: var(--wp--preset--spacing--10); } /* Prev / next navigation -------------------------------------------------- */ .agencyone-single__nav { border-block-start: 1px solid var(--wp--preset--color--border); gap: var(--wp--preset--spacing--30); padding-block-start: var(--wp--preset--spacing--40); } .agencyone-single__nav .post-navigation-link-next { margin-inline-start: auto; text-align: right; } .agencyone-single__nav a { text-decoration: none; } .agencyone-single__nav a:hover { color: var(--wp--preset--color--primary); } /* Related card (sticky sidebar) ------------------------------------------- */ .agencyone-single__aside { align-self: flex-start; } .agencyone-single__related { position: sticky; top: var(--wp--preset--spacing--40); } .agencyone-single__related > .wp-block-heading { margin-block-end: var(--wp--preset--spacing--30); } .agencyone-related .wp-block-post-template { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); list-style: none; margin: 0; padding: 0; } .agencyone-related .wp-block-post { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); } /* A hairline separates stacked items — the structure the thumbnail gives when a post has a featured image, kept for the text-only case when it does not. */ .agencyone-related .wp-block-post + .wp-block-post { border-block-start: 1px solid var(--wp--preset--color--border); padding-block-start: var(--wp--preset--spacing--30); } .agencyone-related__thumb { margin: 0; } .agencyone-related__thumb img { border-radius: var(--wp--custom--radius--md); height: 100%; object-fit: cover; width: 100%; } .agencyone-related__title { line-height: 1.3; margin: 0; } .agencyone-related__title a { text-decoration: none; } .agencyone-related__title a:hover { color: var(--wp--preset--color--primary); } .agencyone-related__date { color: var(--wp--preset--color--muted); margin: 0; } /* Stack the columns on narrow screens; the sidebar stops being sticky. */ @media (max-width: 900px) { .agencyone-single__layout { flex-wrap: wrap; } .agencyone-single__layout > .wp-block-column { flex-basis: 100% !important; } .agencyone-single__related { position: static; } }