/* * 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.) SURFACE 2026-09-12 (skin/form-nav-cool, Hannah: "I want the contact form to match the nav bar ... the card and the nav must read as the same material"): border + shadow were set to the SAME recipe .hero-form-card (contact-form.css) used at the time -- var(--ocf- border-light) for the border (was a heading-tinted color-mix, a different token family than the card's own border) and the identical box-shadow formula. UNCHANGED by the later same-day "hero form card = same as our other cards" ruling: that ruling moved .hero-form-card onto the shared --card-radius/--card-shadow tokens every other card uses (see contact-form.css's own comment), which are a much smaller/tighter shadow than this nav bar's -- but per that brief's explicit instruction to keep the nav changes from this earlier commit as-is, the values below stay literal/fixed rather than switching to var(--card-shadow) too. The N1 blur/saturate intensity and background color-mix percentages are the 9/1 owner-approved component pick (test_ultimate_identity.py's N1-nav-glass-blur) and are intentionally left as-is -- Hannah asked for the same border/shadow language, not a different glass intensity. ============================================================ */ .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: var(--ocf-border-light); box-shadow: 0 1.25rem 3rem color-mix(in srgb, var(--ocf-heading) 14%, 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 1.25rem 3rem color-mix(in srgb, var(--ocf-heading) 14%, transparent); } .nav-inner { transition: min-height var(--duration) var(--ease); } .nav-bar.is-condensed .nav-inner { min-height: 3.75rem; } .nav-cta { border-radius: var(--radius-full); } /* ============================================================ 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: var(--radius-full) !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) ============================================================ */ .btn-outline { position: relative; z-index: 0; overflow: hidden; isolation: isolate; /* skin/radius-scale (2026-09-12): own token, not folded into --radius-button -- this near-square corner is a deliberately preserved measured V1-parity value, not a stray raw number. */ border-radius: var(--radius-outline); transition: color var(--duration) var(--ease); } .btn-outline::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 { color: #fff; border-color: var(--ocf-primary); } .btn-outline:hover::before, .btn-outline:focus-visible::before { transform: scaleX(1); } /* ============================================================ Final CTA band -- Hannah's 2026-09-03 correction, ROUND 2 (live review of the round-1 fix in PR #303 rejected the flat brand-green band as "leprechaun green"). Round 1's problem (band = footer's own fixed #141414, the two blurred into one dark block) is still fixed here, just with a different resolution: instead of a flat brand-color band, this is now a light/white section of its own -- a soft brand-tinted radial glow anchored top-right on a white ground, with a thin neutral top seam -- reading as its own modern section sitting ABOVE the dark footer rather than matching or fighting it. Fix, scoped to this file only (loaded solely for design_template === 'ultimate', so it never reaches the frozen packs' shared cta.css rule): - .ocf-cta__shade (always-rendered per cta.css, normally a dark photo-dimming scrim) is neutralized to transparent, and the CTA image slot is hidden outright -- this band is a clean color surface, never a dark-over-photo treatment, regardless of whether a site happens to have set a CTA image. - .ocf-cta's own background carries the white-ground radial glow. - --cta-headline-color/--cta-body-color (the custom props .ocf-cta__headline/__body actually read, cta.css's own field-color fallback pattern) are repointed from the dark-tone alt tokens (--ocf-heading-alt/--ocf-body-alt, white-family -- correct on a dark band, wrong on this white one) to the normal light-surface tokens (--ocf-heading/--ocf-body) header.php's own bridge already defines for the page's default (non-dark) sections. - The eyebrow and primary button need NO override at all: cta.css's own dark-band eyebrow rule already defaults to var(--ocf-primary), and base.css/ocf-global.css's own .btn-primary is already the solid-primary-background/white-text pill (B1) -- both rules from round 1 existed only to fight the flat-green band, which no longer exists. - The phone link keeps round 1's no-box plain-link shape but swaps white text for the normal dark-surface text tokens. ============================================================ */ .ocf-cta > .ocf-cta__shade, .ocf-cta .ocf-cta__shade { background: transparent !important; opacity: 0 !important; } .ocf-cta > .ocf-cta__image, .ocf-cta .ocf-cta__image { display: none; } .ocf-cta { --cta-headline-color: var(--ocf-heading); --cta-body-color: var(--ocf-body); background: radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--ocf-primary) 12%, white), white) !important; border-top: 1px solid var(--ocf-border-light); } .ocf-cta .ocf-cta__phone { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 3rem; padding: 0; padding-left: 0; border: 0; border-left: 0; color: var(--ocf-body); font-family: var(--ocf-font-heading), system-ui, sans-serif; font-weight: var(--font-weight-bold); text-decoration: none; } .ocf-cta .ocf-cta__phone:hover, .ocf-cta .ocf-cta__phone:focus-visible { color: var(--ocf-body); text-decoration: underline; } .ocf-cta .ocf-cta__phone strong { color: var(--ocf-heading); } /* ============================================================ 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) BOXED 2026-09-12 (skin/form-nav-cool, Hannah, verbatim): "the contact form I want to match this reference [the Atlantic hero card] ... inputs are NOT underline-only." This block used to draw a bare 2px border-bottom (underline-only, no left/right/top edge, no fill) -- now a full 1px box on all four sides, var(--ocf-bg-alt) fill (matches the reference contact form's own filled input: measured color(srgb .932 .938 .946) on 923d3b89-cedar-grove-family-dentistry..., same cool-grey family as this theme's own --ocf-bg-alt post-retint), and a 10px radius (kept as its own fixed value per this brief's "keep the boxed inputs from the earlier commit" instruction, unaffected by the later same-day ruling that moved the card's OWN radius onto the shared var(--card-radius) token -- see contact-form.css's .hero-form-card comment) so the fields read as their own consistent system. Padding/ label geometry are unchanged -- comfortable height was already right (this card already measures ~55px tall, matching the reference's 54.8px) -- only the border/fill/radius changed; the label still floats via the existing :not(:placeholder-shown) trick, just inset 1rem now to line up with the new horizontal padding instead of sitting flush against a bare underline. ============================================================ */ .ultimate-f1-field { position: relative; } .ultimate-f1-field input, .ultimate-f1-field textarea { border: 1px solid var(--ocf-border-light) !important; border-radius: var(--radius-input) !important; background: var(--ocf-bg-alt) !important; padding: 1.15rem 1rem 0.45rem !important; box-shadow: none !important; } .ultimate-f1-field input:focus, .ultimate-f1-field textarea:focus { border-color: var(--ocf-primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ocf-primary) 10%, transparent) !important; } .ultimate-f1-field label { /* z-index 2, ABOVE the input (contact-form.css's shared .ocf-field input rule sets z-index:1 + position:relative on the input itself). That z-index gap didn't matter for the old underline/transparent input -- you could see the label through it regardless of paint order -- but now that the input has an opaque --ocf-bg-alt fill (boxed, 2026-09-12), a positioned sibling with z-index:1 paints above one with z-index:auto no matter its DOM order, so without this the label was fully hidden behind the input (caught in this PR's own before/after proof capture, not the reference). */ position: absolute; z-index: 2; left: 1rem; 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: var(--card-radius); 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: var(--radius-full); 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); } /* ============================================================ Ultimate about photo: short landscape crop, not full-height portrait (2026-09-08, Hannah: "our photo on the left here is very long and should be shorter"). The 2026-09-03 rule directly above this comment set the media box to the source photo's raw 2:3 portrait ratio, which at this column's rendered width stretched the box to ~830-920px tall -- nearly the full height of the text column next to it, reading as "very long." Measured against the reference product's home About photo (Playwright computed styles/bounding box, 1440 viewport, /Users/hannahopenclaw/Hermes/work/design-refs/about-photo-review-cards-2026-09-08/measure.py): 716.0 x 477.3px rendered, aspect-ratio "3 / 2", border-radius 10px, object-fit cover, no box-shadow, vertically centered against the copy column (.ocf-about__grid's own align-items: center in about.css already matches this, unchanged here). This rule now crops the same portrait source to that measured 3:2 ratio instead of running it at its native 2:3 -- the photo is shorter, matching the reference and Hannah's ask, at the cost of cropping the portrait source (accepted per this brief: the ask is "shorter," not "uncropped"). This design.css file only ever loads for the ultimate pack (see this file's own header + functions.php's oneclick_assets()), so no extra scoping selector is needed for the frozen packs to stay zero-diff. ============================================================ */ .ocf-about__media img { /* 2026-09-10 (Hannah: "our image is not the right size in the about section"): re-measured against the reference product's build of the SAME business (Palmetto Shield pest pair, 1440 viewport): their About photo renders 666 x 599px, aspect-ratio 10 / 9, filling the media column's height beside the copy; ours at 3 / 2 rendered 612 x 408 with empty space under it. 10 / 9 matches that measurement. */ aspect-ratio: 10 / 9; object-fit: cover; } /* ============================================================ about_detail_image (Hero+About fields, parity 2026-09-09): a small inset photo overlapping the team photo's corner -- only ever rendered when the field has a value (see templates/ultimate/parts/home-about.php's if-guard), so a site with no detail photo set gets zero new markup and zero visual change. .ocf-about__media already has position:relative (assets/components/about.css), which this positions against. The compound selector (".ocf-about__media img.ocf-about__detail") is needed to out-specificity the ".ocf-about__media img" 3:2 crop rule directly above, which would otherwise win on equal-specificity class+element selectors and force this photo into the wrong aspect ratio. ============================================================ */ .ocf-about__media img.ocf-about__detail { position: absolute; right: -1.25rem; bottom: -1.25rem; width: 42%; max-width: 200px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--image-radius); border: 4px solid var(--ocf-bg, #fff); box-shadow: 0 12px 30px rgba(0, 0, 0, .18); } /* ============================================================ 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