/* ========================================================================= CONTACT PAGE — extra geometric accents (.vh-geo--co-*) + new primitives ---------------------------------------------------------------------------- Extends the shared .vh-geo blueprint kit (home-geo.css) for the "Book Your Free Strategy Session" page (contact.html) ONLY. Adds: • four NEW shape primitives — hexagon, orbit ring, quarter-pie, ruler-scale • new gold-on-navy clusters in every previously-bare section (Fit, Process, the booking + confirm step panels) and companion accents beside the Founder Note / FAQ / Alt-Contact clusters • subtle ambient motion (drift + slow orbit-spin + a pulse on the CTA reticles) and a breathing glow on the two PRIMARY CTAs Every shape is decorative: aria-hidden + pointer-events:none. Behind content via the same z-index:-1 / overflow-clip mechanics as the side clusters. Isolated + reversible: loaded only by contact.html, AFTER home-geo.css. Delete this and the .vh-geo--co-* divs to remove. home-geo.css and every other page stay byte-identical. Inherits home-geo's responsive hides (shrink ≤1180, hide side ≤880, hide ALL .vh-geo ≤720). No JS, no token changes. ========================================================================= */ /* ---- NEW shape primitives ---------------------------------------------- */ .vh-geo__hex, .vh-geo__orbit, .vh-geo__pie, .vh-geo__scale { position: absolute; } /* filled translucent hexagon — a quiet "engineered / structured" mark */ .vh-geo__hex { background: rgba(232, 180, 0, 0.15); clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%); transform: rotate(var(--r, 0deg)); transform-origin: center; } /* full circle ring + a satellite dot — curved counterpoint to the angular bands; the dot lets a slow spin read as an orbit. */ .vh-geo__orbit { border: 2px solid rgba(232, 180, 0, 0.40); border-radius: 50%; background: transparent; } .vh-geo__orbit::after { content: ""; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 10px 1px rgba(232, 180, 0, 0.5); } /* quarter-pie wedge — a soft curved mass; rotate --r to aim the corner */ .vh-geo__pie { background: rgba(232, 180, 0, 0.16); border-radius: 100% 0 0 0; transform: rotate(var(--r, 0deg)); transform-origin: center; } /* blueprint ruler-scale — a thin spine with measurement ticks; set height per instance. Reads as precision / a build timeline (pairs with the Process). */ .vh-geo__scale { width: 13px; border-left: 2px solid rgba(232, 180, 0, 0.34); background: repeating-linear-gradient( to bottom, rgba(232, 180, 0, 0.46) 0 2px, transparent 2px 15px ); background-position: left top; background-repeat: no-repeat; transform: rotate(var(--r, 0deg)); transform-origin: top center; } /* ========================================================================= §1 DISCOVERY — bespoke clusters threaded behind the form / booking / confirm panels. .co-disc is position:relative + isolation:isolate + overflow:hidden, so these clip and sit behind .co-disc__inner (z-index:1). ========================================================================= */ /* FORM · right gutter, lower — reticle + chevron + ruler aiming UP toward the "Book Free Discovery Session" submit button. */ .vh-geo--co-form { right: 0; top: 60%; --r: -20deg; } .vh-geo--co-form > :nth-child(1) { top: 36px; right: 30px; width: 120px; height: 120px; } /* orbit */ .vh-geo--co-form > :nth-child(2) { top: 150px; right: -16px; width: 230px; height: 22px; background: var(--color-accent); opacity: .30; } /* band */ .vh-geo--co-form > :nth-child(3) { top: 16px; right: 150px; height: 150px; --r: 8deg; } /* scale */ .vh-geo--co-form > :nth-child(4) { top: 196px; right: 150px; width: 30px; height: 30px; --r: -135deg; } /* chev (aims up-left → CTA) */ .vh-geo--co-form > :nth-child(5) { top: 196px; right: 64px; width: 34px; height: 34px; opacity: .9; } /* target */ /* BOOKING (step 2) · framed around the centred Calendly panel */ .co-disc__booking { position: relative; } .vh-geo--co-booking { top: -24px; right: -150px; width: 280px; height: 320px; --r: -18deg; z-index: 0; overflow: hidden; } .vh-geo--co-booking .vh-geo__ring:nth-child(1) { top: 30px; right: 40px; width: 130px; height: 130px; } .vh-geo--co-booking .vh-geo__dots:nth-child(2) { top: 150px; right: 28px; width: 110px; height: 84px; color: rgba(232,180,0,.42); } .vh-geo--co-booking .vh-geo__orbit:nth-child(3) { top: 8px; right: 150px; width: 60px; height: 60px; } .vh-geo--co-booking .vh-geo__target:nth-child(4) { top: 250px; right: 70px; width: 30px; height: 30px; opacity: .85; } /* mirror on the LEFT so the calendar reads as framed both sides */ .vh-geo--co-booking2 { top: -10px; left: -150px; width: 280px; height: 320px; --r: 18deg; z-index: 0; overflow: hidden; } .vh-geo--co-booking2 .vh-geo__band:nth-child(1) { top: 40px; left: -30px; width: 240px; height: 22px; background: var(--color-accent); opacity: .26; } .vh-geo--co-booking2 .vh-geo__hex:nth-child(2) { top: 120px; left: 40px; width: 64px; height: 70px; } .vh-geo--co-booking2 .vh-geo__plus:nth-child(3) { top: 220px; left: 70px; width: 18px; height: 18px; } /* CONFIRM (step 3) · quiet celebratory orbit + plus marks around the checkmark */ .co-disc__confirm { position: relative; } .vh-geo--co-confirm { top: -30px; left: 50%; width: 520px; height: 220px; margin-left: -260px; z-index: 0; overflow: visible; } .vh-geo--co-confirm .vh-geo__orbit:nth-child(1) { top: 14px; left: 60px; width: 80px; height: 80px; opacity: .7; } .vh-geo--co-confirm .vh-geo__orbit:nth-child(2) { top: 30px; right: 70px; left: auto; width: 54px; height: 54px; opacity: .55; } .vh-geo--co-confirm .vh-geo__plus:nth-child(3) { top: 0; left: 160px; width: 16px; height: 16px; } .vh-geo--co-confirm .vh-geo__plus:nth-child(4) { top: 20px; right: 150px; left: auto; width: 14px; height: 14px; } .vh-geo--co-confirm .vh-geo__dots:nth-child(5) { top: 30px; left: 4px; width: 60px; height: 60px; color: rgba(232,180,0,.34); } /* ========================================================================= §4 FIT CHECK (.co-fit) — both gutters. Right cluster aims a reticle DOWN at the "Book your session" CTA at the section's foot. ========================================================================= */ /* LEFT · bands + hex + corner bracket (+22°) */ .vh-geo--co-fit { left: 0; --r: 22deg; } .vh-geo--co-fit > :nth-child(1) { top: 40px; left: -40px; width: 300px; height: 46px; background: var(--color-accent); opacity: .22; } /* band */ .vh-geo--co-fit > :nth-child(2) { top: 138px; left: 0; width: 240px; height: 30px; background: var(--color-accent); opacity: .38; } /* band */ .vh-geo--co-fit > :nth-child(3) { top: 214px; left: 40px; width: 72px; height: 78px; } /* hex */ .vh-geo--co-fit > :nth-child(4) { top: 150px; left: 150px; width: 34px; height: 34px; --r: 0deg; } /* bracket */ .vh-geo--co-fit > :nth-child(5) { top: 30px; left: 168px; height: 220px; --r: 8deg; } /* scale */ /* RIGHT · dot-grid + orbit + quarter-pie + reticle (-26°) */ .vh-geo--co-fit2 { right: 0; --r: -26deg; } .vh-geo--co-fit2 > :nth-child(1) { top: 40px; right: 26px; width: 120px; height: 96px; color: rgba(232,180,0,.46); } /* dots */ .vh-geo--co-fit2 > :nth-child(2) { top: 150px; right: 44px; width: 104px; height: 104px; } /* orbit */ .vh-geo--co-fit2 > :nth-child(3) { top: 232px; right: 120px; width: 96px; height: 96px; --r: 150deg; } /* pie */ .vh-geo--co-fit2 > :nth-child(4) { top: 258px; right: 40px; width: 32px; height: 32px; opacity: .9; } /* target → CTA */ /* ========================================================================= §4b PROCESS (.co-process) — both gutters. The ruler-scale reads as a build timeline beside the 4 steps; the right chevron points down the sequence. ========================================================================= */ /* LEFT · ring + band + ruler-scale (+18°) */ .vh-geo--co-process { left: 0; --r: 18deg; } .vh-geo--co-process > :nth-child(1) { top: 50px; left: 26px; width: 110px; height: 110px; } /* ring */ .vh-geo--co-process > :nth-child(2) { top: 206px; left: -30px; width: 220px; height: 22px; background: var(--color-accent); opacity: .30; } /* band */ .vh-geo--co-process > :nth-child(3) { top: 24px; left: 150px; height: 240px; --r: 4deg; } /* scale */ .vh-geo--co-process > :nth-child(4) { top: 250px; left: 96px; width: 18px; height: 18px; } /* plus */ /* RIGHT · dot-grid + hex + chevron + orbit (-22°) */ .vh-geo--co-process2 { right: 0; --r: -22deg; } .vh-geo--co-process2 > :nth-child(1) { top: 40px; right: 28px; width: 116px; height: 90px; color: rgba(232,180,0,.44); } /* dots */ .vh-geo--co-process2 > :nth-child(2) { top: 158px; right: 46px; width: 70px; height: 76px; } /* hex */ .vh-geo--co-process2 > :nth-child(3) { top: 244px; right: 70px; width: 30px; height: 30px; --r: 135deg; } /* chev (down the steps) */ .vh-geo--co-process2 > :nth-child(4) { top: 120px; right: 150px; width: 54px; height: 54px; } /* orbit */ /* ========================================================================= §5 FOUNDER NOTE — LEFT companion (the existing .vh-geo--fv sits on the right) ========================================================================= */ .vh-geo--co-note2 { left: 0; --r: 20deg; } .vh-geo--co-note2 > :nth-child(1) { top: 60px; left: 24px; width: 100px; height: 100px; } /* orbit */ .vh-geo--co-note2 > :nth-child(2) { top: 30px; left: 150px; height: 200px; --r: 6deg; } /* scale */ .vh-geo--co-note2 > :nth-child(3) { top: 200px; left: -20px; width: 210px; height: 22px; background: var(--color-accent); opacity: .26; } /* band */ .vh-geo--co-note2 > :nth-child(4) { top: 188px; left: 110px; width: 18px; height: 18px; } /* plus */ /* ========================================================================= §6 FAQ — extra lower-right accent (existing faq/faq2 sit upper both gutters) ========================================================================= */ .vh-geo--co-faq3 { right: 0; top: 64%; --r: -16deg; } .vh-geo--co-faq3 > :nth-child(1) { top: 40px; right: 36px; width: 90px; height: 96px; } /* pie */ .vh-geo--co-faq3 > :nth-child(2) { top: 150px; right: 30px; width: 60px; height: 60px; } /* orbit */ .vh-geo--co-faq3 > :nth-child(3) { top: 120px; right: 110px; width: 16px; height: 16px; } /* plus */ /* ========================================================================= §7 ALT CONTACT — RIGHT companion (the existing .vh-geo--cta sits bottom-left) ========================================================================= */ .vh-geo--co-alt2 { right: 0; --r: -20deg; } .vh-geo--co-alt2 > :nth-child(1) { top: 50px; right: 28px; width: 116px; height: 92px; color: rgba(232,180,0,.42); } /* dots */ .vh-geo--co-alt2 > :nth-child(2) { top: 170px; right: 44px; width: 100px; height: 100px; } /* orbit */ .vh-geo--co-alt2 > :nth-child(3) { top: 120px; right: 130px; width: 64px; height: 70px; } /* hex */ .vh-geo--co-alt2 > :nth-child(4) { top: 256px; right: 36px; width: 18px; height: 18px; } /* plus */ /* ========================================================================= AMBIENT MOTION — gated behind prefers-reduced-motion (static fallback is the exact look above). transform/opacity only → no layout shift. The drift keyframe re-applies each shape's own rotate(var(--r)) so rotations survive. ========================================================================= */ @keyframes co-geo-drift { from { transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)); } to { transform: translate3d(0, -9px, 0) rotate(calc(var(--r, 0deg) + 2deg)); } } @keyframes co-geo-spin { to { transform: rotate(360deg); } } @keyframes co-geo-pulse { 0%, 100% { transform: scale(1); opacity: .72; } 50% { transform: scale(1.14); opacity: 1; } } /* breathing glow on the two PRIMARY CTAs (one per screen). box-shadow only, so the buttons' own hover transform still responds. */ @keyframes co-geo-breathe { 0%, 100% { box-shadow: 0 10px 30px -16px rgba(232, 180, 0, 0.45); } 50% { box-shadow: 0 16px 48px -10px rgba(232, 180, 0, 0.85), 0 0 0 4px rgba(232, 180, 0, 0.08); } } @media (prefers-reduced-motion: no-preference) { /* gentle staggered float on the contact clusters' shapes */ [class*="vh-geo--co-"] > span { animation: co-geo-drift 15s ease-in-out infinite alternate; } [class*="vh-geo--co-"] > span:nth-child(2) { animation-duration: 12s; animation-delay: -3s; } [class*="vh-geo--co-"] > span:nth-child(3) { animation-duration: 17s; animation-delay: -6s; } [class*="vh-geo--co-"] > span:nth-child(4) { animation-duration: 13s; animation-delay: -1.5s; } [class*="vh-geo--co-"] > span:nth-child(5) { animation-duration: 19s; animation-delay: -8s; } /* orbit rings slowly rotate; their satellite dot circles the ring. !important so the staggered nth-child duration overrides above never leak onto the orbit/target (different intent, would desync the spin/pulse). */ [class*="vh-geo--co-"] .vh-geo__orbit { animation: co-geo-spin 44s linear infinite !important; } /* the "aim here" reticles by each CTA breathe to draw the eye (motion-meaning) */ [class*="vh-geo--co-"] .vh-geo__target { animation: co-geo-pulse 2.6s ease-in-out infinite !important; } /* primary CTAs breathe a soft gold glow */ .co-disc__submit:not(:disabled), .co-fit__cta-btn { animation: co-geo-breathe 3.2s ease-in-out infinite; } } /* ========================================================================= §7 GOLD-SURFACE recolor — .co-alt sits on a gold band (var(--gold-band)), so the standard gold primitives would vanish. Recolor every shape in that section to a navy ghost (mirrors the manifesto recolor in home-geo.css). Scoped to .co-alt only → also revives the pre-existing .vh-geo--cta cluster there, which was previously gold-on-gold and effectively invisible. ========================================================================= */ .co-alt .vh-geo__band { background: #0A1A3F; opacity: .12; } .co-alt .vh-geo--cta > :nth-child(3) { background: #0A1A3F; opacity: .10; } /* white ghost band → navy */ .co-alt .vh-geo__chev { border-color: rgba(10, 26, 63, 0.5); border-left-color: transparent; border-top-color: transparent; } .co-alt .vh-geo__plus { color: rgba(10, 26, 63, 0.6); } .co-alt .vh-geo__target { border-color: rgba(10, 26, 63, 0.6); } .co-alt .vh-geo__dots { color: rgba(10, 26, 63, 0.42); } .co-alt .vh-geo__orbit { border-color: rgba(10, 26, 63, 0.5); } .co-alt .vh-geo__orbit::after { background: #0A1A3F; box-shadow: none; } .co-alt .vh-geo__hex { background: rgba(10, 26, 63, 0.16); } /* ========================================================================= §8 GOLD-SURFACE recolor — .co-note (Founder Note) now sits on var(--gold-band) too, so navy-ghost its decorative primitives (mirrors §7 .co-alt). Covers the shapes its two clusters use: right .vh-geo--fv (ring, ring, band, chev) and left .vh-geo--co-note2 (orbit, scale, band, plus). ========================================================================= */ .co-note .vh-geo__band { background: #0A1A3F; opacity: .12; } .co-note .vh-geo__ring { border-color: rgba(10, 26, 63, 0.42); } .co-note .vh-geo__chev { border-color: rgba(10, 26, 63, 0.5); border-left-color: transparent; border-top-color: transparent; } .co-note .vh-geo__plus { color: rgba(10, 26, 63, 0.6); } .co-note .vh-geo__orbit { border-color: rgba(10, 26, 63, 0.5); } .co-note .vh-geo__orbit::after { background: #0A1A3F; box-shadow: none; } .co-note .vh-geo__scale { border-left-color: rgba(10, 26, 63, 0.4); background: repeating-linear-gradient( to bottom, rgba(10, 26, 63, 0.5) 0 2px, transparent 2px 15px ); } /* ========================================================================= RESPONSIVE — the bespoke (non --side) discovery clusters could crowd the single-column form on tablets; retire them ≤980px. The --side clusters already shrink ≤1180 and hide ≤880 via home-geo.css; ALL .vh-geo hides ≤720. ========================================================================= */ @media (max-width: 980px) { .vh-geo--co-form, .vh-geo--co-booking, .vh-geo--co-booking2, .vh-geo--co-confirm { display: none; } } /* ============================ READABILITY (contact page only) =========================== Body/smaller text slightly larger + higher contrast. co-geo.css loads LAST of the contact stylesheets, so these win without touching the co-*.css section files or any other page. All contact sections are white-on-navy. Headings, eyebrows (accent), inputs (16px), and the shared footer are left alone. Aligns with UI-UX-PRO-MAX: base 16px body, 4.5:1 contrast. ===================================================================================== */ /* lift faint microcopy / helpers / footnotes */ .co-disc__help, .co-disc__footnote, .co-disc__next-label, .co-process-step__time-label { color: rgba(255, 255, 255, 0.62); } /* step + sidebar + process paragraphs */ .co-disc__next-p, .co-disc__expect-p, .co-process-step__p, .co-process__cta-line { color: rgba(255, 255, 255, 0.78); } .co-disc__next-p, .co-disc__expect-p { font-size: 15px; } /* trust + assurance + GTK + fit/faq/note body → stronger contrast + size */ .co-trust__stat, .co-trust__rating-txt, .co-disc__assure li { color: rgba(255, 255, 255, 0.85); } .co-disc__gtk-txt { font-size: 15px; color: rgba(255, 255, 255, 0.85); } .co-fit__sub, .co-fit-card__item, .co-fit-card__foot, .co-process__sub, .co-faq__sub, .co-faq__answer, .co-alt__sub, .co-alt__cardnote { color: rgba(255, 255, 255, 0.85); } .co-faq__answer { font-size: 15.5px; } /* form labels a touch larger */ .co-disc__label { font-size: 15px; }