/* Theme Name: LeadEnginePro Theme URI: https://github.com/martinjacksonuk/leadenginepro-site Author: DiGenie Description: Clean, semantic, GEO-optimised block theme. No page-builder bloat. All design tokens live in theme.json. Version: 0.2.0 Requires at least: 6.5 Requires PHP: 8.1 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: digenie */ /* * Component layer for LeadEnginePro. Rebuilt 2026-08-12: the skeleton shipped a * previous project's components (teal tokens, .lep-chapter/.lep-service/.lep-tri) * describing a site this one is not. Replaced wholesale by the locked system. * The lightbox and video-facade rules at the end are KEPT — assets/js/home.js * drives them. */ /* =========================================================================== Design system — LOCKED 2026-08-12. Source of truth: leadenginepro-working/docs/design-system-lock.md + docs/mockups/_shared/system.css. theme.json owns the VALUES; this file bridges them to component names and carries the components. Never hardcode a brand hex below — use the bridge. =========================================================================== */ :root{ --navy-900:var(--wp--preset--color--navy-900); --navy-800:var(--wp--preset--color--navy-deep); --navy:var(--wp--preset--color--navy); --navy-400:#5C7FBE; --cyan:var(--wp--preset--color--cyan); --cyan-300:var(--wp--preset--color--cyan-soft); --cyan-050:var(--wp--preset--color--cyan-tint); --ink:var(--wp--preset--color--ink); --ink-70:var(--wp--preset--color--ink-soft); --paper:var(--wp--preset--color--base); --paper-2:var(--wp--preset--color--paper-2); --line:var(--wp--preset--color--line); --amber:var(--wp--preset--color--amber); --wrap:var(--wp--style--global--content-size,1120px); --gutter:clamp(1.25rem,5vw,3rem); --band:clamp(3.5rem,7vw,6.5rem); --radius:14px; --f-display:var(--wp--preset--font-family--display); --f-text:var(--wp--preset--font-family--body); } /* Ported bands must escape the constrained post-content wrapper. */ .wp-block-post-content > .alignfull{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:100vw} /* ========================================================================== LeadEnginePro — Explore prototype (Phase 1). PROVISIONAL. Palette sampled from the logo: navy #184088, cyan #30A8E0. At Lock this becomes docs/mockups/_shared/system.css + theme.json. ========================================================================== */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--f-text);font-weight:400; font-size:clamp(1rem,.97rem + .18vw,1.09rem);line-height:1.65; -webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto;display:block} h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.1;letter-spacing:-.02em;margin:0} h1{font-size:clamp(2.3rem,1.5rem + 3.3vw,4.1rem)} h2{font-size:clamp(1.75rem,1.35rem + 1.7vw,2.7rem)} h3{font-size:clamp(1.1rem,1.03rem + .4vw,1.35rem);letter-spacing:-.01em} p{margin:0} a{color:var(--navy);text-underline-offset:3px} :focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:4px} /* ---- the ONE left edge: every band shares this wrapper ------------------- */ .wrap{width:min(var(--wrap),100%);margin-inline:auto;padding-inline:var(--gutter)} .band{padding-block:var(--band)} .stack>*+*{margin-top:1.1rem} .lede{font-size:clamp(1.06rem,1rem + .4vw,1.28rem);color:var(--ink-70);max-width:60ch} .eyebrow{ font-family:var(--f-display);font-weight:500;font-size:.82rem;letter-spacing:.14em; text-transform:uppercase;color:var(--navy);margin:0 0 .9rem } .band--dark .eyebrow{color:var(--cyan-300)} /* ---- buttons ------------------------------------------------------------ The source used a generic SaaS green that appears nowhere in the brand. Primary = navy on light, cyan on dark. One accent, so it means something. */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55rem; min-height:52px;padding:.85rem 1.6rem;border-radius:999px;border:2px solid transparent; font-family:var(--f-display);font-weight:700;font-size:1.02rem;letter-spacing:-.01em; text-decoration:none;cursor:pointer;transition:transform .15s ease,background-color .15s ease; } .btn:hover{transform:translateY(-2px)} .btn--primary{background:var(--navy);color:#fff} .btn--primary:hover{background:var(--navy-800)} .btn--onDark{background:var(--cyan);color:var(--navy-900)} .btn--onDark:hover{background:var(--cyan-300)} .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)} .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)} /* ---- header -------------------------------------------------------------- */ .skip{position:absolute;left:-9999px} .skip:focus{left:var(--gutter);top:.6rem;z-index:99;background:#fff;color:var(--navy);padding:.95rem 1.3rem;border-radius:8px;font-weight:600} .masthead{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20} .masthead .wrap{display:flex;align-items:center;gap:.8rem 1.5rem;min-height:74px;flex-wrap:wrap;padding-block:.7rem} /* The logo is 5.88:1 — in a squeezed flex row it collapses to a few px tall and becomes an undersized tap target. Pin a min-height and a floor on the width. */ .masthead .brand{display:flex;align-items:center;min-height:44px;flex:none} .masthead img{width:clamp(158px,44vw,190px)} .masthead nav{margin-left:auto;display:flex;align-items:center;gap:1rem} @media(max-width:540px){ .masthead nav{margin-left:0;width:100%;justify-content:space-between;gap:.6rem} } .tel{color:var(--navy);text-decoration:none;font-weight:600;white-space:nowrap;display:flex;align-items:center;min-height:44px} .tel:hover{color:var(--navy-800);text-decoration:underline} /* ---- hero --------------------------------------------------------------- The source set white text over a busy street photo. Moving the photograph into the video panel and giving the hero a controlled navy ground fixes the legibility problem and gives the video real prominence. */ .hero{background:linear-gradient(160deg,var(--navy-900) 0%,var(--navy-800) 55%,var(--navy) 100%);color:#fff} .hero .wrap{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center;grid-template-columns:1fr} @media(min-width:940px){.hero .wrap{grid-template-columns:1.05fr .95fr}} .hero h1{color:#fff;text-wrap:balance} .nb{white-space:nowrap} .hero p{color:#D9E3F5} .hero .actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.9rem} .trust{display:flex;align-items:center;gap:.6rem;margin-top:1.6rem;color:#B9C8E4;font-size:.95rem} .video{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9; background: repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 12px,transparent 12px 24px), linear-gradient(150deg,var(--navy-800),var(--navy)); border:1px solid rgba(138,210,240,.28); box-shadow:0 24px 60px rgba(0,0,0,.35)} .video .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .video .play-btn{ position:absolute;inset:0;display:grid;place-items:center;background:none;border:0;cursor:pointer;width:100%; } .video iframe{width:100%;height:100%;display:block;border:0;background:#000} .video[data-playing] .poster, .video[data-playing] .play-btn, .video[data-playing] figcaption{display:none} .video .play{ width:78px;height:78px;border-radius:50%;background:var(--cyan);display:grid;place-items:center; box-shadow:0 8px 28px rgba(0,0,0,.4);transition:transform .18s ease } .video button:hover .play{transform:scale(1.07)} .video .play svg{margin-left:5px} .video figcaption{ position:absolute;left:0;right:0;bottom:0;padding:.7rem 1rem;font-size:.83rem; background:linear-gradient(to top,rgba(11,27,63,.92),rgba(11,27,63,0));color:#DCE7F8; pointer-events:none;text-align:left } /* ---- testimonials -------------------------------------------------------- */ .proof{background:var(--paper-2);border-block:1px solid var(--line)} .quotes{display:grid;gap:1.5rem;grid-template-columns:1fr;margin-top:2.4rem} @media(min-width:760px){.quotes{grid-template-columns:repeat(3,1fr)}} .quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;display:flex;flex-direction:column} .quote blockquote{margin:0 0 1.5rem;font-size:1.02rem;color:var(--ink-70);flex:1} .who{display:flex;align-items:center;gap:.9rem} .who img{width:52px;height:52px;border-radius:50%;object-fit:cover} .who cite{font-style:normal;font-family:var(--f-display);font-weight:700;color:var(--ink);display:block} /* A rating is information: markup, not a PNG. The source shipped it as an image. */ .stars{display:flex;gap:2px;margin-bottom:.15rem} .stars svg{width:15px;height:15px;fill:var(--amber)} /* ---- capabilities ------------------------------------------------------- The source ran four alternating image/text slabs, each ending in the same "Get Started Today!" button. Four equal cards + ONE call to action removes the repetition and the cliché without losing a word of the copy. */ .caps{display:grid;gap:1.8rem;grid-template-columns:1fr;margin-top:3rem} @media(min-width:720px){.caps{grid-template-columns:repeat(2,1fr)}} .cap{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;display:flex;flex-direction:column} .cap img{aspect-ratio:16/10;object-fit:cover;width:100%} .cap .body{padding:1.7rem;display:flex;flex-direction:column;gap:.85rem;flex:1} .ticks{list-style:none;margin:.2rem 0 0;padding:0;display:grid;gap:.5rem} .ticks li{display:flex;gap:.6rem;align-items:flex-start;font-size:.97rem;color:var(--ink-70)} .ticks svg{flex:none;width:19px;height:19px;margin-top:3px;fill:var(--cyan)} .caps-cta{margin-top:2.6rem} /* ---- feature grid (dark band) -------------------------------------------- */ .band--dark{background:var(--navy-900);color:#fff} .band--dark h2{color:#fff} .band--dark .lede{color:#C2D0E8} .features{display:grid;gap:2.6rem 1.8rem;grid-template-columns:repeat(2,1fr);margin-top:3.4rem;grid-auto-rows:auto} @media(min-width:980px){.features{grid-template-columns:repeat(5,1fr)}} /* subgrid so icon / title / description share a baseline across the row — the titles wrap to different line counts and were leaving the row ragged */ .feature{text-align:center;justify-items:center;gap:.55rem; display:grid;grid-row:span 3;grid-template-rows:subgrid} @supports not (grid-template-rows:subgrid){ .feature{display:flex;flex-direction:column;align-items:center} .feature h3{min-height:2.2em} } /* The source's own line-art icons, recovered from the live DOM. They inherit colour via currentColor, so the same file works white here and navy on light. */ .feature .ic{color:#fff;display:block} .feature .ic svg{width:clamp(52px,7vw,66px);height:clamp(52px,7vw,66px)} .feature h3{color:#fff;margin:.35rem 0 0;font-size:clamp(.98rem,.94rem + .2vw,1.08rem);text-wrap:balance} .feature p{color:#AEBFDC;font-size:.9rem;line-height:1.5;max-width:24ch} /* ---- pricing ------------------------------------------------------------- */ .price-grid{display:grid;gap:2.5rem;grid-template-columns:1fr;align-items:center;margin-top:2.6rem} @media(min-width:860px){.price-grid{grid-template-columns:minmax(0,380px) 1fr}} .plan{border:2px solid var(--navy);border-radius:var(--radius);padding:2rem;background:#fff} .plan h3{font-size:1.5rem} .plan .amount{font-family:var(--f-display);font-weight:700;font-size:2.7rem;color:var(--navy);line-height:1.1;margin-top:1.4rem} .plan .amount span{display:block;font-family:var(--f-text);font-size:.95rem;font-weight:400;color:var(--ink-70);letter-spacing:0} .plan .btn{width:100%;margin-top:1.5rem} .guarantee{display:inline-flex;align-items:center;gap:.6rem;background:var(--cyan-050);color:var(--navy); border-radius:999px;padding:.5rem 1.05rem;font-weight:600;font-size:.93rem;margin-bottom:1.2rem} .pay{margin-top:1.7rem;max-width:min(330px,100%)} .pay-note{font-size:.86rem;color:var(--ink-70);margin-top:.6rem} /* ---- closing CTA --------------------------------------------------------- */ .closer{background:var(--navy);color:#fff;text-align:left} .closer h2{color:#fff;max-width:20ch} .closer .lede{color:#CFDCF2} /* ---- footer -------------------------------------------------------------- */ .site-foot{background:var(--navy-900);color:#B9C8E4;font-size:.94rem} .site-foot .wrap{display:grid;gap:2.4rem;grid-template-columns:1fr;padding-block:3.4rem} @media(min-width:780px){.site-foot .wrap{grid-template-columns:1.2fr 1fr 1fr}} .site-foot img{width:200px;margin-bottom:1.1rem} /* INTERIM: renders the two-tone cutout as solid white on the dark footer. Replace with the supplied all-white logo — see _source/assets/brand/README.md */ .site-foot .logo-white{filter:brightness(0) invert(1)} .site-foot h2{font-size:.85rem;letter-spacing:.13em;text-transform:uppercase;color:#fff;margin-bottom:1rem;font-weight:500} .site-foot a{color:#B9C8E4;text-decoration:none;display:inline-flex;align-items:center;min-height:44px} .site-foot a:hover{color:var(--cyan-300);text-decoration:underline} .site-foot ul{list-style:none;margin:0;padding:0} .legal{border-top:1px solid rgba(255,255,255,.13)} .legal .wrap{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;justify-content:space-between;padding-block:1.4rem;font-size:.87rem} @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ---- booking pages ------------------------------------------------------- The archetype is one functional widget with a couple of lines around it. The job is framing: give the calendar a calm ground and enough room, and don't decorate around something people are trying to use. */ .booking{background:var(--paper-2);border-top:1px solid var(--line)} .booking .wrap{padding-block:clamp(2.5rem,5vw,4rem)} .cal-card{background:#fff;border-radius:var(--radius);overflow:hidden} .cal-card iframe{display:block;width:100%;border:0;min-height:760px} @media(min-width:820px){.cal-card iframe{min-height:640px}} .booking-note{margin-top:1.5rem;color:var(--ink-70);font-size:.94rem;max-width:60ch} .intro{padding-block:clamp(2.5rem,5vw,4rem) 0} .intro h1{max-width:18ch;text-wrap:balance} /* structural heading for the booking widget: needed for the heading tree, redundant on screen where the widget states it itself */ .visually-hidden{ position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0 } /* ---- free-audit: offer text beside the e-book graphic -------------------- */ .offer{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center;grid-template-columns:1fr} @media(min-width:820px){.offer{grid-template-columns:1.1fr .9fr}} .offer img{border-radius:var(--radius);justify-self:center;max-width:min(420px,100%)} .offer .ticks li{font-size:1.02rem;color:var(--ink)} /* the GHL form is narrower than a calendar; don't strand it across full width */ .form-card{max-width:640px} .form-card iframe{min-height:640px} .muted{color:var(--ink-70);font-size:.94rem} /* ---- lightbox + click-to-load video facade (driven by assets/js/home.js) --- */ dialog.lep-lightbox { border: 0; padding: 0; background: transparent; overflow: visible; } dialog.lep-lightbox::backdrop { background: rgba(0, 0, 0, 0.85); } dialog.lep-lightbox img { max-width: 92vw; max-height: 88vh; width: auto; height: auto; border-radius: 10px; } dialog.lep-lightbox .lep-lightbox-close { position: absolute; top: 0.6rem; right: 0.6rem; background: #fff; border: 0; border-radius: 999px; width: 2.3rem; height: 2.3rem; font-size: 1.25rem; line-height: 1; cursor: pointer; font-family: var(--wp--preset--font-family--body); } .lep-frame { aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; } .lep-frame iframe { width: 100%; height: 100%; border: 0; display: block; } .lep-yt-lite { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; } .lep-yt-lite img { width: 100%; height: 100%; object-fit: cover; } .lep-yt-play { position: absolute; inset: 0; margin: auto; width: 72px; height: 50px; border-radius: 14px; background: rgba(0, 0, 0, 0.85); display: grid; place-items: center; transition: background-color 0.15s ease; } .lep-yt-play::before { content: ""; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; margin-left: 3px; } .lep-yt-lite:focus-visible .lep-yt-play { background: var(--wp--preset--color--brand); } /* ---- WordPress core skip link --------------------------------------------- Core ships a 1x1 clipped .skip-link, which is a genuinely undersized target until focus. Use the off-left technique instead so it is full-size and focusable, matching the mockups' own skip link. */ .wp-block-template-part .skip-link, a.skip-link.screen-reader-text{ position:absolute!important;left:-9999px!important;top:auto!important; width:auto!important;height:auto!important;clip:auto!important; clip-path:none!important;overflow:visible!important; } a.skip-link.screen-reader-text:focus{ left:var(--gutter)!important;top:.6rem!important;z-index:99!important; background:#fff!important;color:var(--navy)!important; padding:.95rem 1.3rem!important;border-radius:8px!important; font-weight:600!important;font-family:var(--f-text)!important; }