/* Theme Name: Hello Connect Description: Connect Business Park child theme for Hello Elementor. Brand tokens live at the top of this file and follow Elementor's Global Colours (Site Settings > Global Colors). Template: hello-elementor Version: 1.4.0 Author: Wollopit / CPM */ /* ===== BRAND TOKENS — the one place to change colours/fonts ===== Each token reads Elementor's Global Colour first, so changing a colour in Elementor > Site Settings > Global Colors updates the whole site. The hex values are the fallbacks estimated from "Connect Stage 1 DRAFT.pdf". */ :root{ --cbp-charcoal: var(--e-global-color-primary, #202420); /* main dark */ --cbp-olive: var(--e-global-color-secondary, #7A7A4F); /* brand accent / panels */ --cbp-olive-text: var(--e-global-color-accent, #8C8B6B); /* two-tone heading accent */ --cbp-ink: var(--e-global-color-text, #2B2D2B); /* body text */ --cbp-offwhite: var(--e-global-color-cbpoffwhite, #F2F1EE); --cbp-warmgrey: var(--e-global-color-cbpwarmgrey, #C8C8C2); --cbp-muted: #5f6258; --cbp-font: "Inter Tight", "Helvetica Neue", Arial, sans-serif; --cbp-gutter: clamp(20px, 4vw, 56px); --cbp-header-h: 76px; --cbp-olive-btn: #77774D; /* olive for button backgrounds behind white text: 4.64:1 (brand olive is 4.45:1) */ } /* Type tokens = Elementor global fonts (Site Settings > Global Fonts), so custom widgets follow the same scale. */ body{ --cbp-t-label: var(--e-global-typography-accent-font-weight,600) var(--e-global-typography-accent-font-size,.75rem)/var(--e-global-typography-accent-line-height,1.4) var(--cbp-font); --cbp-t-label-ls: var(--e-global-typography-accent-letter-spacing,.2em); --cbp-fs-body: var(--e-global-typography-text-font-size,1rem); --cbp-fs-lead: var(--e-global-typography-cbplead-font-size,1.125rem); --cbp-fs-small: var(--e-global-typography-cbpsmall-font-size,.8125rem); --cbp-fs-button: var(--e-global-typography-cbpbutton-font-size,.78125rem); --cbp-ls-button: var(--e-global-typography-cbpbutton-letter-spacing,.16em); --cbp-fs-h3: var(--e-global-typography-secondary-font-size,1.75rem); } /* No CSS scroll-behavior: Lenis (cbp-site cbp-smooth.js) glides wheel + anchors on desktop; phones scroll natively and connect.js animates anchor jumps. */ body{background:var(--cbp-offwhite);color:var(--cbp-ink);font-family:var(--cbp-font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} [id]{scroll-margin-top:calc(var(--cbp-header-h) - 1px)} ::selection{background:var(--cbp-olive);color:#fff} a{color:inherit} :focus-visible{outline:2px solid var(--cbp-olive);outline-offset:3px} /* ===== Header (Elementor "Site Header" template printed by header.php; full width, sticky) ===== Free Elementor has no sticky motion effect, so stickiness lives here. */ #masthead{position:sticky;top:0;z-index:1000;width:100%;margin:0;max-width:none} .admin-bar #masthead{top:var(--wp-admin--admin-bar--height,32px)} #colophon{width:100%} .cbp-header{background:rgba(32,36,32,.94);-webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid rgba(255,255,255,.08);transition:background .25s} .cbp-scrolled .cbp-header{background:rgba(32,36,32,.98)} @media (max-width:1024px){ /* the dropdown spans the whole header bar, not just the menu widget */ .cbp-header .e-con,.cbp-header .elementor-widget-cbp_menu,.cbp-header .elementor-widget-cbp_menu>.elementor-widget-container,.cbp-header .cbp-menu{position:static!important} .cbp-header.e-con{position:relative!important;z-index:1000} } /* ===== Section system ===== */ .cbp-h1,.cbp-h2{font-family:var(--cbp-font)} .cbp-h2 .elementor-heading-title{color:inherit} .cbp-h2 .elementor-heading-title span,.cbp-h3 .elementor-heading-title span{color:var(--cbp-olive-text)} .cbp-body p:last-child,.cbp-lead p:last-child{margin-bottom:0} .cbp-dark{color:#fff} .cbp-dark .cbp-body{color:rgba(255,255,255,.74)} .cbp-light{color:var(--cbp-charcoal)} .cbp-light .cbp-body{color:#45473f} .cbp-tagline .elementor-heading-title{color:inherit} .cbp-tagline .elementor-heading-title span{color:var(--cbp-olive-text)} .cbp-eyebrow .elementor-heading-title{color:var(--cbp-olive)} .cbp-dark .cbp-eyebrow .elementor-heading-title{color:var(--cbp-olive-text)} /* Olive stone/concrete texture panel (CSS noise; swap for brochure texture image later) */ .cbp-texture{position:relative;isolation:isolate;background-color:var(--cbp-olive)!important} .cbp-texture::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.55;mix-blend-mode:multiply;pointer-events:none; background-image:url("data:image/svg+xml;utf8,"), radial-gradient(120% 80% at 20% 10%,rgba(255,255,255,.14),transparent 55%),radial-gradient(90% 90% at 90% 100%,rgba(0,0,0,.22),transparent 60%)} /* Photo with thin circle motif + caption */ .cbp-photo{position:relative;overflow:hidden} .cbp-photo img{display:block;width:100%;height:100%;object-fit:cover} .cbp-photo .elementor-widget-container{position:relative} .cbp-ring .elementor-widget-container::after{content:"";position:absolute;width:62%;aspect-ratio:1;right:-12%;top:-18%;border:1px solid rgba(255,255,255,.7);border-radius:50%;pointer-events:none} .cbp-photo figcaption,.cbp-photo .widget-image-caption{position:absolute;left:16px;bottom:14px;margin:0;padding:6px 11px;border-radius:999px;background:rgba(32,36,32,.72);color:#fff;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} /* Teaser card */ .cbp-teaser{border-radius:4px} .cbp-pill .elementor-heading-title{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.3);color:#fff} .cbp-pill .elementor-heading-title::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cbp-olive-text);box-shadow:0 0 0 0 rgba(140,139,107,.7);animation:cbpPulse 2.2s infinite} @keyframes cbpPulse{70%{box-shadow:0 0 0 9px rgba(140,139,107,0)}100%{box-shadow:0 0 0 0 rgba(140,139,107,0)}} @media (prefers-reduced-motion:reduce){.cbp-pill .elementor-heading-title::before{animation:none}} .cbp-stats{display:flex;flex-wrap:wrap;gap:0} .cbp-stat .elementor-heading-title{color:#fff} .cbp-stat-label .elementor-heading-title{color:rgba(255,255,255,.6)} /* Buttons (Elementor Button widget + our form button). Every state is explicit, including :visited and :focus, because Elementor's frontend CSS sets .elementor-button:focus/:hover/:visited{color:#fff}. Typography comes from the "Button" global font. */ .cbp-button .elementor-button,.cbp-header .cbp-cta .elementor-button{border-radius:999px;padding:17px 28px;transition:background-color .2s,color .2s,border-color .2s} .cbp-header .cbp-cta .elementor-button{padding:13px 22px} .cbp-button .elementor-button .elementor-button-text,.cbp-cta .elementor-button .elementor-button-text{color:inherit} /* light: white pill, charcoal text -> olive on hover/focus */ .cbp-button.cbp-button--light .elementor-button,.cbp-button.cbp-button--light .elementor-button:visited{background:#fff;color:var(--cbp-charcoal);border:1px solid #fff} .cbp-button.cbp-button--light .elementor-button:hover,.cbp-button.cbp-button--light .elementor-button:focus-visible{background:var(--cbp-olive-btn);border-color:var(--cbp-olive-btn);color:#fff} .cbp-button.cbp-button--light .elementor-button:focus:not(:focus-visible){background:#fff;color:var(--cbp-charcoal);border-color:#fff} /* ghost: outline on dark -> white on hover/focus */ .cbp-button.cbp-button--ghost .elementor-button,.cbp-button.cbp-button--ghost .elementor-button:visited,.cbp-button.cbp-button--ghost .elementor-button:focus:not(:focus-visible){background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)} .cbp-button.cbp-button--ghost .elementor-button:hover,.cbp-button.cbp-button--ghost .elementor-button:focus-visible{background:#fff;color:var(--cbp-charcoal);border-color:#fff} /* dark: charcoal -> olive */ .cbp-button.cbp-button--dark .elementor-button,.cbp-button.cbp-button--dark .elementor-button:visited,.cbp-button.cbp-button--dark .elementor-button:focus:not(:focus-visible){background:var(--cbp-charcoal);color:#fff;border:1px solid var(--cbp-charcoal)} .cbp-button.cbp-button--dark .elementor-button:hover,.cbp-button.cbp-button--dark .elementor-button:focus-visible{background:var(--cbp-olive-btn);border-color:var(--cbp-olive-btn);color:#fff} /* header CTA: olive -> white */ .cbp-header .cbp-cta .elementor-button,.cbp-header .cbp-cta .elementor-button:visited,.cbp-header .cbp-cta .elementor-button:focus:not(:focus-visible){background:var(--cbp-olive-btn);color:#fff;border:1px solid var(--cbp-olive-btn)} .cbp-header .cbp-cta .elementor-button:hover,.cbp-header .cbp-cta .elementor-button:focus-visible{background:#fff;color:var(--cbp-charcoal);border-color:#fff} @media (max-width:480px){.cbp-site-header .cbp-header .cbp-cta a.elementor-button{padding:11px 14px;font-size:10.5px;letter-spacing:.12em}} /* compact CTA in the 64px mobile bar */ /* one focus ring for every button */ .elementor-button:focus-visible,button.cbp-btn:focus-visible,.cbp-menu__toggle:focus-visible,.cbp-menu__link:focus-visible{outline:2px solid var(--cbp-olive-text);outline-offset:3px} .cbp-button .elementor-button-icon svg{width:16px;fill:currentColor} /* Placeholder (Jamie to supply) */ .cbp-placeholder{background:#ffe94d!important;color:#202420!important;padding:2px 6px;border-radius:2px;font-weight:600} /* Hairline above sections */ .cbp-hairline{border-top:1px solid rgba(32,36,32,.14)} .cbp-dark.cbp-hairline{border-top-color:rgba(255,255,255,.1)} /* Explorer hero: flush under the header */ .cbp-hero{position:relative} .cbp-hero .elementor-widget-cpm_explorer{width:100%} /* ===== Footer ===== */ .cbp-footer{color:rgba(255,255,255,.72)} .cbp-footer a{color:#fff;text-decoration:none} .cbp-footer a:hover{text-decoration:underline;text-underline-offset:3px} .cbp-footer .cbp-body{color:rgba(255,255,255,.66)} .cbp-footer .cbp-small{color:rgba(255,255,255,.45)} .cbp-footer .cbp-flabel .elementor-heading-title{color:var(--cbp-olive-text)} /* Flex helpers for Elementor containers */ .e-con.cbp-auto{--width:auto;width:auto;flex:0 1 auto} .e-con.cbp-grow{--width:auto;width:auto;flex:1 1 auto;min-width:0} /* Specificity fixes over Elementor kit + Hello defaults */ .elementor-widget-text-editor.cbp-body,.elementor-widget-text-editor.cbp-lead{color:inherit} .cbp-dark .elementor-widget-text-editor.cbp-body{color:rgba(255,255,255,.74)} .cbp-light .elementor-widget-text-editor.cbp-body{color:#45473f} .cbp-footer .elementor-widget-text-editor.cbp-body{color:rgba(255,255,255,.66)} .cbp-footer .elementor-widget-text-editor.cbp-small{color:rgba(255,255,255,.45)} .cbp-dark .elementor-heading-title{color:#fff} .cbp-light .elementor-heading-title{color:var(--cbp-charcoal)} .cbp-dark .cbp-h2 .elementor-heading-title span,.cbp-light .cbp-h2 .elementor-heading-title span,.cbp-dark .cbp-h3 .elementor-heading-title span,.cbp-light .cbp-tagline .elementor-heading-title span{color:var(--cbp-olive-text)} .cbp-light .cbp-h2 .elementor-heading-title span{color:var(--cbp-olive)} .cbp-light .cbp-eyebrow .elementor-heading-title{color:var(--cbp-olive)} .cbp-dark .cbp-eyebrow .elementor-heading-title,.cbp-footer .cbp-flabel .elementor-heading-title{color:var(--cbp-olive-text)} .cbp-dark .cbp-stat-label .elementor-heading-title{color:rgba(255,255,255,.6)} .cbp-texture .cbp-photo img{aspect-ratio:4/3.4;height:auto} .cbp-texture{justify-content:center} button.cbp-btn,button.cbp-btn:hover,button.cbp-btn:focus{border-radius:999px} .cbp-form button.cbp-btn--solid{background:var(--cbp-charcoal);border:1px solid var(--cbp-charcoal);color:#fff} .cbp-form button.cbp-btn--solid:hover,.cbp-form button.cbp-btn--solid:focus-visible{background:var(--cbp-olive-btn);border-color:var(--cbp-olive-btn);color:#fff} /* Dark card nested inside a light section */ .cbp-light .cbp-dark .elementor-heading-title{color:#fff} .cbp-light .cbp-dark .cbp-h3 .elementor-heading-title span{color:var(--cbp-olive-text)} .cbp-light .cbp-dark .cbp-stat-label .elementor-heading-title{color:rgba(255,255,255,.6)} .cbp-light .cbp-dark .elementor-widget-text-editor.cbp-body{color:rgba(255,255,255,.74)} /* ===== Ring Road section ===== */ .cbp-figures{border-radius:4px} .cbp-figures > .cbp-figures__title{width:100%} .cbp-figures > .e-con.cbp-figure{--width:calc(50% - 20px);flex:0 0 calc(50% - 20px);border-top:1px solid rgba(255,255,255,.14);padding-top:18px!important} @media (max-width:767px){.cbp-figures > .e-con.cbp-figure{--width:100%;flex-basis:100%}} .cbp-figures .cbp-figure-note{color:rgba(255,255,255,.66)} .cbp-figures .cbp-figure-note p{margin:0} .cbp-light .cbp-source{color:#5f6258;max-width:980px} .cbp-light .cbp-source a{color:inherit;text-decoration:underline;text-underline-offset:2px} .cbp-light .cbp-source a:hover{color:var(--cbp-charcoal)} /* header menu: 6-7 items still fit between 1025px and 1279px */ @media (min-width:1025px) and (max-width:1279px){.cbp-menu__link{padding-left:10px;padding-right:10px;letter-spacing:.14em}.cbp-menu__link::after{left:10px;right:10px}} /* ===== Local development news section ===== */ .cbp-news-section .cbp-news-intro{max-width:440px} .cbp-news-section .cbp-news-intro p{margin:0} /* ===== Links: one explicit ruleset for every state ===== Hello Elementor's reset sets a{color:#c36} and a:hover/a:active{color:#336} (blue), and browsers add :visited purple. Links inherit their surrounding brand colour in all states; components that need a specific colour set it below (or in their own rules with higher specificity). */ /* Base: lowest possible specificity, so every component's own link colour wins (it only beats Hello's a{#c36}). */ a{color:inherit} /* Hover/focus/active: beat Hello's a:hover/a:active{#336}. Components that change colour on hover set their own :hover rules. */ a:hover,a:focus,a:active{color:inherit} a:focus-visible{outline:2px solid var(--cbp-olive-text);outline-offset:3px} /* Header menu (desktop + mobile panel): explicit colours in every state, top and scrolled. */ .cbp-header .cbp-menu .cbp-menu__link,.cbp-header .cbp-menu .cbp-menu__link:visited{color:rgba(255,255,255,.78)} .cbp-header .cbp-menu .cbp-menu__link:hover,.cbp-header .cbp-menu .cbp-menu__link:focus-visible,.cbp-header .cbp-menu .cbp-menu__link:active,.cbp-header .cbp-menu .cbp-menu__link.is-current{color:#fff} @media (max-width:1024px){.cbp-header .cbp-menu .cbp-menu__link,.cbp-header .cbp-menu .cbp-menu__link:visited{color:#fff}} /* Wordmark link (light/dark), all states */ .cbp-wm-wrap--light,.cbp-wm-wrap--light:visited,.cbp-wm-wrap--light:hover,.cbp-wm-wrap--light:focus,.cbp-wm-wrap--light:active{color:#fff} .cbp-wm-wrap--dark,.cbp-wm-wrap--dark:visited,.cbp-wm-wrap--dark:hover,.cbp-wm-wrap--dark:focus,.cbp-wm-wrap--dark:active{color:var(--cbp-charcoal)} .cbp-footer a,.cbp-footer a:visited,.cbp-footer a:hover,.cbp-footer a:focus,.cbp-footer a:active{color:#fff} .cbp-light .cbp-source a,.cbp-light .cbp-source a:visited,.cbp-light .cbp-source a:active{color:inherit} .cbp-light .cbp-source a:hover,.cbp-light .cbp-source a:focus-visible{color:var(--cbp-charcoal)} .cbp-agent a,.cbp-agent a:visited,.cbp-agent a:hover,.cbp-agent a:focus,.cbp-agent a:active{color:var(--cbp-charcoal)} .cbp-form a,.cbp-form a:visited,.cbp-form a:hover,.cbp-form a:focus,.cbp-form a:active{color:inherit;text-decoration:underline} /* ===== Multi-page site (Oct 2026) ===== */ /* CPM Explorer welcome card: the logo replaces the "CONNECT BUSINESS PARK" title (kept for screen readers). */ .cpmx-welcome-body:has(.cpmx-welcome-logo) .cpmx-welcome-title{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .cpmx-welcome-logo{max-width:260px;height:auto} /* Explorer section on the Location page */ .cbp-explore-section .elementor-widget-cpm_explorer{width:100%} /* Big render on The Estate page */ .cbp-render-xl img{display:block;width:100%;height:auto;border-radius:4px} .cbp-render-xl .widget-image-caption{left:20px;bottom:18px} .cbp-gallery img{aspect-ratio:4/3;object-fit:cover} /* CTA band */ .cbp-cta-band{border-radius:4px} .cbp-cta-band .cbp-body{max-width:560px} /* Full logo as a section heading */ .cbp-logo-h .elementor-heading-title{line-height:0} .cbp-logo-h .cbp-logo-full{width:min(520px,100%)} /* Stats on a light background (home intro) */ .cbp-light .cbp-dark-stats .cbp-stat .elementor-heading-title{color:var(--cbp-charcoal)} .cbp-light .cbp-dark-stats .cbp-stat-label .elementor-heading-title{color:var(--cbp-olive)} .cbp-siteaddr a{text-decoration:underline;text-underline-offset:3px} /* CTA band: olive panel inside a light section, so the two-tone span needs its own colour */ .cbp-light .cbp-cta-band .cbp-h2 .elementor-heading-title{color:#fff} .cbp-light .cbp-cta-band .cbp-h2 .elementor-heading-title span{color:#E6E4C6} .cbp-light .cbp-cta-band .elementor-widget-text-editor.cbp-body{color:rgba(255,255,255,.88)} /* Footer credit (bottom bar) */ .cbp-footer .cbp-credit{float:right;margin-left:24px} .cbp-footer .cbp-credit a,.cbp-footer .cbp-credit a:visited{color:rgba(255,255,255,.45)} .cbp-footer .cbp-credit a:hover,.cbp-footer .cbp-credit a:focus-visible{color:#fff} @media (max-width:767px){.cbp-footer .cbp-credit{float:none;display:block;margin:8px 0 0}} /* Scroll-in reveal (connect.js adds .cbp-js-reveal only when motion is allowed) */ .cbp-js-reveal .cbp-reveal{opacity:0;transform:translate3d(0,14px,0);transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.16,1,.3,1)} .cbp-js-reveal .cbp-reveal.is-in{opacity:1;transform:none} /* Home landing modules */ .cbp-home-estate .cbp-photo img{aspect-ratio:16/11;height:auto} .cbp-home-map img{display:block;width:100%;height:auto;border-radius:4px} .cbp-home-map a{display:block;border-radius:4px;overflow:hidden} .cbp-home-map a:focus-visible{outline:2px solid var(--cbp-olive);outline-offset:3px} .cbp-home-contact .cbp-agent{box-shadow:0 18px 50px rgba(0,0,0,.18)} .cbp-light .cbp-dark .cbp-h2 .elementor-heading-title,.cbp-olive-band .cbp-h2 .elementor-heading-title{color:#fff} .cbp-olive-band .cbp-h2 .elementor-heading-title span{color:#E6E4C6} .cbp-olive-band .elementor-widget-text-editor.cbp-body{color:rgba(255,255,255,.9)} .cbp-olive-band .cbp-label--light .cbp-label__num{color:#E6E4C6} .cbp-olive-band .cbp-eyebrow .elementor-heading-title{color:#E6E4C6} /* Text-link CTA (secondary, arrow) — e.g. "View in Road mode" */ .cbp-button.cbp-button--link .elementor-button,.cbp-button.cbp-button--link .elementor-button:visited,.cbp-button.cbp-button--link .elementor-button:focus:not(:focus-visible){background:transparent;border:0;border-bottom:1px solid currentColor;border-radius:0;padding:4px 0;color:var(--cbp-charcoal)} .cbp-button.cbp-button--link .elementor-button-text::after{content:"→";display:inline-block;margin-left:10px;transition:transform .2s} .cbp-button.cbp-button--link .elementor-button:hover,.cbp-button.cbp-button--link .elementor-button:focus-visible{background:transparent;color:var(--cbp-olive);border-color:var(--cbp-olive)} .cbp-button.cbp-button--link .elementor-button:hover .elementor-button-text::after{transform:translateX(3px)} .cbp-dark .cbp-button.cbp-button--link .elementor-button{color:#fff} .cbp-ring-road .cbp-ring-text .cbp-small{color:#5f6258}