/* * Ultimate -- design pack for the oneclick theme. * * Loaded dead last in the cascade (functions.php oneclick_assets()), only * when oneclick_site('design_template') is 'ultimate'. * * HISTORY: PR #241 gave this pack its own full visual identity (directional * hero scrim, Instrument Serif + Inter type system, its own card language, * pill-chip kickers, alternating section bands, a footer accent). The owner * reversed that direction the same day (2026-09-01, "restore Home Services * look"): this file was reduced to just the Font Pairing mechanism below, * and Ultimate fell through to the shared theme CSS -- byte-identical to * Lightning. PR #241's full identity is preserved in git history and as an * unregistered reference copy at wp-theme/oneclick/templates/ultimate_archive/ * (see that directory's own README.md). * * LATER THE SAME DAY, the owner reviewed a hand-built spec (a "Mock 1" home * page composition plus a component menu listing every candidate option per * part, current-vs-fresh) and picked a specific, named component for each * of eleven parts of the individual-site home page: * N1 glass nav bar, condenses on scroll * F1 floating-label request-a-quote form (templates/ultimate/parts/ * hero-form.php) * B1 primary button -- pill, arrow, hover glow * B2 secondary button -- outline that fills in on hover * H1 hero stat card -- count-up years-in-business / rating, HONESTY * GATE: renders only stats the brief can prove, absent entirely with * neither * R3 rating pill with stars (restyles the existing #236 honest-badge * markup in place; never invents a count) * S1 photo-top service cards, hover lift + underline sweep * P1 circle-check about bullets * P2 numbered how-we-work steps with a hairline connector * Q1 smooth FAQ accordion, keyboard accessible * T1 dark footer with a soft accent glow * This is a DIFFERENT pass from PR #241: it does not touch H1/H2/H3 type * scale, does not add chip-kicker eyebrows, does not retint the alternating * section bands, and reuses the theme's existing markup/classes wherever * one already exists (the FAQ trigger/answer/aria-expanded structure, the * about-bullet check-disc pseudo-elements, the commitments numbered-step * connector) rather than inventing parallel markup. Every value below is * translated into this pack's own idioms: --ocf-primary (never a hardcoded * hue -- always the brief's own brand color, bridged from --color-accent in * header.php), the existing --card-radius/--radius-*/--duration/--ease * tokens, and color-mix() in place of an rgba(accent-rgb, alpha) triple * (this codebase has no --accent-rgb variable; color-mix reaches the same * soft tints and glows without needing one). Manrope/Source Sans 3 (or a * brief's own Font Pairing preset, see the block directly below) are * unchanged -- no wording or copy changed anywhere, styling only. All * motion respects prefers-reduced-motion (see the block at the very end of * this file). * * The ONE thing kept from PR #241/#234's own pass: the Font Pairing preset * mechanism -- a brief can still choose a different heading/body pairing for * the ultimate template specifically (platform/public/create.html step 6, * tools/provision_brief.py resolves it into brand.font_heading/ * brand.font_body -> a per-site tokens.css's --font-heading/--font-body, * loaded before this file). --ocf-font-heading/--ocf-font-body below read * that value first, falling back to Manrope/Source Sans 3 -- this pack's * own default, matching templates/lightning's hardcoded default in * header.php -- only when tokens.css hasn't set one at all (a render * outside the provisioning pipeline, e.g. a hand-built fixture). */ :root { --ocf-font-heading: var(--font-heading, 'Manrope', sans-serif); --ocf-font-body: var(--font-body, 'Source Sans 3', sans-serif); /* T1 footer tokens -- header.php's --ocf-footer-* bridge falls back to the tenant's light surface tokens by default (assets/tokens.css); this pack overrides all three to the fixed dark #141414 family, same fixed neutral the hero/CTA dark sections already use (--ocf-dark-bg family in header.php's own bridge), never the tenant's brand-derived light tokens. */ --ocf-footer-bg: #141414; --ocf-footer-heading: #ffffff; --ocf-footer-body: color-mix(in srgb, #ffffff 66%, transparent); } /* ============================================================ N1 -- glass nav bar, condenses on scroll (assets/components/header.css .nav-bar; JS: templates/ultimate/assets/ ultimate.js toggles .is-condensed on scroll. No-JS fallback: the blur + translucent bar below renders on its own either way -- only the compacting on scroll needs the script.) ============================================================ */ .nav-bar { background: color-mix(in srgb, var(--ocf-bg) 68%, transparent); -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%); border-bottom-color: color-mix(in srgb, var(--ocf-heading) 8%, transparent); transition: background var(--duration) var(--ease), box-shadow var(--duration) var(--ease); } .nav-bar.is-condensed { background: color-mix(in srgb, var(--ocf-bg) 95%, transparent); box-shadow: 0 4px 18px -10px color-mix(in srgb, var(--ocf-heading) 30%, transparent); } .nav-inner { transition: min-height var(--duration) var(--ease); } .nav-bar.is-condensed .nav-inner { min-height: 3.75rem; } .nav-cta { border-radius: 999px; } /* ============================================================ B1 -- primary buttons: pill, hover glow, arrow travel (base.css .btn-primary; ocf-global.css .nav-cta already pilled above; .mobile-cta; this pack's own .ultimate-b1-btn on the F1 form's submit) ============================================================ */ .btn-primary, .ultimate-b1-btn, .hero-form-card .form-submit-btn, .mobile-cta { border-radius: 999px !important; box-shadow: 0 0 0 0 color-mix(in srgb, var(--ocf-primary) 50%, transparent); transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease), background var(--duration) var(--ease); } .btn-primary:hover, .btn-primary:focus-visible, .ultimate-b1-btn:hover, .ultimate-b1-btn:focus-visible, .hero-form-card .form-submit-btn:hover, .hero-form-card .form-submit-btn:focus-visible { box-shadow: 0 0 0 8px color-mix(in srgb, var(--ocf-primary) 16%, transparent), 0 10px 22px -8px color-mix(in srgb, var(--ocf-primary) 55%, transparent); transform: translateY(-2px); } .btn-primary svg, .ultimate-b1-arrow { transition: transform var(--duration) var(--ease); } .btn-primary:hover svg, .btn-primary:focus-visible svg, .ultimate-b1-btn:hover .ultimate-b1-arrow, .ultimate-b1-btn:focus-visible .ultimate-b1-arrow { transform: translateX(3px); } /* ============================================================ B2 -- secondary/outline buttons: color sweeps in from the left on hover (base.css .btn-outline -- hero secondary CTA; parts/cta-section.php's .ocf-cta__phone, restyled into the same button shape since it is the home CTA band's real second action) ============================================================ */ .btn-outline, .ocf-cta__phone { position: relative; z-index: 0; overflow: hidden; isolation: isolate; border-radius: 2px; transition: color var(--duration) var(--ease); } .btn-outline::before, .ocf-cta__phone::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ocf-primary); transform: scaleX(0); transform-origin: left center; transition: transform 280ms var(--ease); } .btn-outline:hover, .btn-outline:focus-visible, .ocf-cta__phone:hover, .ocf-cta__phone:focus-visible { color: #fff; border-color: var(--ocf-primary); } .btn-outline:hover::before, .btn-outline:focus-visible::before, .ocf-cta__phone:hover::before, .ocf-cta__phone:focus-visible::before { transform: scaleX(1); } .ocf-cta__phone { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.4rem; border: 2px solid #fff; color: #fff; font-family: var(--ocf-font-heading), system-ui, sans-serif; font-weight: var(--font-weight-bold); } /* ============================================================ F1 -- floating-label request form (this pack's own templates/ultimate/parts/hero-form.php; targets its .ultimate-f1-field wrapper -- input, then label, in source order, so a plain adjacent-sibling selector is enough) ============================================================ */ .ultimate-f1-field { position: relative; } .ultimate-f1-field input, .ultimate-f1-field textarea { border: none !important; border-bottom: 2px solid var(--ocf-border-light) !important; border-radius: 0 !important; background: transparent !important; padding: 1.15rem 0.05rem 0.45rem !important; box-shadow: none !important; } .ultimate-f1-field input:focus, .ultimate-f1-field textarea:focus { border-bottom-color: var(--ocf-primary) !important; box-shadow: none !important; } .ultimate-f1-field label { position: absolute; left: 0.05rem; top: 1.15rem; color: var(--ocf-body); font-size: var(--font-body-size, 1rem); pointer-events: none; transition: transform 180ms ease, font-size 180ms ease, color 180ms ease; transform-origin: left top; } .ultimate-f1-field input:focus + label, .ultimate-f1-field input:not(:placeholder-shown) + label, .ultimate-f1-field textarea:focus + label, .ultimate-f1-field textarea:not(:placeholder-shown) + label { transform: translateY(-1.1rem); color: var(--ocf-primary); font-size: 0.72rem; } /* ============================================================ H1 -- hero stat card: overlaps the hero's bottom edge, count-up numbers (templates/ultimate/parts/home-hero.php's $ultimate_hero_stats block -- absolutely positioned, so it never joins .ocf-hero's own CSS-grid layout; .ocf-hero gets a matching margin-bottom so the card has room to sit half in the hero photo, half over the section below, without covering either section's real content. HONESTY GATE lives in the PHP: this CSS only ever sees the block when at least one real stat exists.) ============================================================ */ .ocf-hero { overflow: visible; margin-bottom: 2.75rem; } .ultimate-hero-stats { position: absolute; left: 1.25rem; right: 1.25rem; bottom: -2.75rem; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 2.4rem; max-width: 26rem; margin: 0 auto; padding: 0.9rem 1.25rem 1.5rem; background: var(--ocf-bg); border-radius: 16px; box-shadow: 0 16px 30px -14px color-mix(in srgb, var(--ocf-heading) 35%, transparent); } .ultimate-hero-stat { text-align: center; } .ultimate-hero-stat__num { display: block; color: var(--ocf-primary); font-family: var(--ocf-font-heading), system-ui, sans-serif; font-weight: 800; font-size: 1.5rem; } .ultimate-hero-stat__label { display: block; margin-top: 0.15rem; color: var(--ocf-body); font-size: 0.7rem; } @media (max-width: 640px) { .ultimate-hero-stats { gap: 1.4rem; } } /* ============================================================ R3 -- rating pill (restyles the existing #236 honest-badge markup, .ocf-hero__rating, in place -- same real value/label it already computes, no new copy) ============================================================ */ .ocf-hero__rating { display: inline-flex; background: color-mix(in srgb, #ffffff 16%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 999px; padding: 0.5rem 1.1rem; } .ocf-hero__rating-value { font-family: var(--ocf-font-heading), system-ui, sans-serif; font-weight: 800; } /* ============================================================ S1 -- photo-top service cards: hover lift (already the shared default via --card-transform-hover) + accent underline sweep under the title ============================================================ */ .ocf-svc-card-body h3 { position: relative; display: inline-block; padding-bottom: 0.15rem; } .ocf-svc-card-body h3::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--ocf-primary); transition: width 250ms var(--ease); } .ocf-svc-card:hover .ocf-svc-card-body h3::after, .ocf-svc-card:focus-within .ocf-svc-card-body h3::after { width: 100%; } /* ============================================================ P1 -- about bullets: soft accent disc + accent-colored check (about.css already draws the disc/check via --about-check-color / --about-check-mark-color pseudo-elements -- this pack only retints the two tokens, no new markup) ============================================================ */ .ocf-about { --about-check-color: color-mix(in srgb, var(--ocf-primary) 14%, var(--ocf-bg)); --about-check-mark-color: var(--ocf-primary); } /* ============================================================ P2 -- numbered how-we-work steps: lighter accent circle, hairline connector (commitments.css already draws the numbered circle + the connecting line via ::before/::after -- this pack only resizes the circle and re-centers the connector on the new size, no new markup) ============================================================ */ .ocf-commitment-num { inline-size: 2.5rem; block-size: 2.5rem; font-size: 0.85rem; } .ocf-commitments .ocf-commitment:not(:last-child)::before { top: calc(2.5rem - 1px); left: calc(1.25rem - 1px); } .ocf-commitments .ocf-commitment:not(:last-child)::after { left: calc(2.5rem + clamp(1rem, 2vw, 1.35rem)); } /* ============================================================ Q1 -- smooth FAQ accordion, keyboard accessible (faq.css already draws the trigger/chevron/answer structure with aria-expanded + .is-open -- this pack swaps display:none/:block for a grid-template-rows animation so open/close is smooth; JS: templates/ultimate/assets/ultimate.js toggles .is-open on click. Native