/* Groundcraft marketing site — global helmet (all front-end pages). * Page-specific helmet blocks (keyframes that DIFFER per page, e.g. the two * gcMaskUp definitions) live in helmet-home / helmet-platform / helmet-news / * helmet-services.css, conditionally enqueued by the groundcraft-site mu-plugin. */ /* Forge front-end guard */ .gf-root.gf-container{display:block!important} /* The off-canvas panel sits translated off the right edge; without a clip the * transform extends the document's scrollable area by the panel width on * mobile. clip (not hidden) so no scroll container is created and the sticky * header keeps working. */ html,body{overflow-x:clip} /* Keyframes identical on every page that uses them */ @keyframes gcMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes gcBlink{0%,49%{opacity:1}50%,100%{opacity:0}} /* Global reduced-motion guard (each page block also carries its verbatim one) */ @media (prefers-reduced-motion:reduce){ [data-rv],[data-rule]{opacity:1!important;transform:none!important} *{animation:none!important} } /* ==================================================================== * * Site chrome — header / footer (Forge Locations templates) * ==================================================================== */ /* --- Header ---------------------------------------------------------- */ /* .gf-container.gc-* doubles the class up so these rules match the * specificity of Forge's own .gf-container[data-*] structural rules and win * by cascade order (this sheet enqueues after Forge base CSS). */ /* The blur lives on a ::before overlay, NOT the header itself: backdrop-filter * creates a containing block for fixed descendants, which would trap the * off-canvas panel/backdrop inside the 56px bar. */ .gf-container.gc-sitehead{position:sticky;top:0;background:transparent;border-bottom:1px solid var(--border,#e3e5dc);z-index:80} .gf-container.gc-sitehead::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(247,248,244,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} [data-theme="dark"] .gf-container.gc-sitehead{border-bottom-color:#2b2f27} [data-theme="dark"] .gf-container.gc-sitehead::before{background:rgba(15,17,13,.86)} /* Per-theme bar height: 64px on the light concept, 56px on the dark operator * page. is always explicit (functions.php:267), so base = * light and [data-theme="dark"] overrides; also reacts to the ThemeToggle. */ .gf-container.gc-sitehead-in{max-width:1320px;margin:0 auto;padding:0 28px;height:64px;width:100%} [data-theme="dark"] .gf-container.gc-sitehead-in{height:56px} /* The image element renders FLAT: _class lands on the itself (a figure * only appears when there is a caption), so style the img directly. */ .gc-logo{margin:0;flex:0 0 auto} /* max-width:none kills Forge's .gf-image__img{max-width:100%} here — that * percentage is cyclic inside the auto-sized flex anchor and collapses the * logo to width 0 during flex intrinsic sizing. */ img.gc-logo,.gc-logo img{height:48px!important;width:auto!important;max-width:none!important;display:block;object-fit:contain} /* Per-theme lockup: 48px light / 40px dark. Scoped to desktop so the 30px * phone tightening (below) still wins on small screens in both themes. */ @media (min-width:640px){[data-theme="dark"] img.gc-logo,[data-theme="dark"] .gc-logo img{height:40px!important}} /* Variant swap at img-level specificity (the sizing rule above is (0,1,1), * so the hide rules must match it and follow it in the cascade). */ img.gc-logo--dark,.gc-logo--dark{display:none} [data-theme="dark"] img.gc-logo--dark,[data-theme="dark"] .gc-logo--dark{display:block} [data-theme="dark"] img.gc-logo--light,[data-theme="dark"] .gc-logo--light{display:none} .gf-container.gc-sitehead-navwrap{min-width:0} /* Nav = the AUTHORITATIVE homepage Light comp treatment. The light-concept nav * vocabulary (Services · Why · Compare · Build with AI · AI layer · Your sites · * Price · News) is the homepage comp's own nav set, so that comp is the source * for this shared chrome: JetBrains mono / .08em / weight 400 / uppercase. */ .gc-sitehead-nav{display:flex;gap:18px;min-width:0;white-space:nowrap;font-family:var(--font-mono,monospace);font-size:11px;letter-spacing:.08em;text-transform:uppercase} .gc-sitehead-nav a{color:var(--ink-2,#525750);text-decoration:none} .gc-sitehead-nav a:hover{color:var(--ink,#1b1e19)} .gf-container.gc-sitehead-cta{margin-left:auto;flex:0 0 auto} .gc-signin{font-family:var(--font-mono,monospace);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#787d74);text-decoration:none} .gc-signin:hover{color:var(--ink,#1b1e19)} a.gf-button.gc-console{font-family:var(--font-mono,monospace);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#12160e;background:var(--green-500,#9bd45f);padding:9px 15px;border-radius:999px;border:0;line-height:1;text-decoration:none} a.gf-button.gc-console:hover{background:var(--green-300,#c5e59c);color:#12160e} a.gf-button.gc-console .gf-button__label{font:inherit;letter-spacing:inherit} /* Mobile drawer: hidden at >=1024px; below, it replaces the inline nav */ .gf-el.gc-nav-oc{display:none} @media (max-width:1023.98px){ .gf-container.gc-sitehead-navwrap{display:none} .gf-el.gc-nav-oc{display:inline-block} .gf-container.gc-sitehead-in{gap:16px} } /* Small phones: tighten the bar so logo + console + toggle + burger fit 390px */ @media (max-width:639.98px){ /* gap (not --gf-gap): the container writes --gf-gap as an INLINE style, * which no stylesheet custom-property override can beat. */ .gf-container.gc-sitehead-in{padding:0 14px;gap:10px} .gf-container.gc-sitehead-cta{gap:10px} img.gc-logo,.gc-logo img{height:30px!important} .gc-signin{display:none} a.gf-button.gc-console{padding:8px 10px;font-size:10px} .gc-sitehead .gf-theme-toggle{width:2.2rem;height:2.2rem} } .gc-nav-oc .gf-off-canvas__trigger{padding:.45rem .6rem;border-radius:10px;background:transparent;border:1px solid var(--border-strong,#ced1c6);color:var(--ink,#1b1e19)} .gc-nav-oc .gf-off-canvas__trigger-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .gc-nav-oc .gf-off-canvas__panel{background:var(--surface,#fff)} .gc-nav-oc .gf-off-canvas__body a{display:block;padding:12px 0;font-family:var(--font-mono,monospace);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2,#525750);text-decoration:none;border-bottom:1px solid var(--border,#e3e5dc)} .gc-nav-oc .gf-off-canvas__body a:hover{color:var(--brand-strong,#527d21)} .gc-nav-oc .gf-off-canvas__body a.gc-oc-console{margin-top:16px;border:0;text-align:center;background:var(--green-500,#9bd45f);color:#12160e;border-radius:999px;padding:12px 16px;font-weight:500} /* --- Footer ---------------------------------------------------------- */ .gf-container.gc-sitefoot{background:var(--canvas,#f7f8f4)} [data-theme="dark"] .gf-container.gc-sitefoot{background:#0f110d} .gf-container.gc-sitefoot-grid{max-width:1320px;margin:0 auto;padding:56px 28px 26px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;width:100%} .gf-container.gc-sitefoot-brand{min-width:220px} .gc-sitefoot-brand .gc-tagline{margin:14px 0 0;font-size:13px;line-height:1.6;color:var(--muted,#787d74);max-width:280px;text-wrap:pretty} .gc-fcol{display:flex;flex-direction:column;gap:9px} /* Column headers are eyebrows → Plus Jakarta Sans 600 11px .14em (design doc). */ .gc-fcol b{font-family:'Plus Jakarta Sans',var(--font-body,sans-serif);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#787d74)} .gc-fcol a{font-size:13px;color:var(--ink-2,#525750);text-decoration:none} .gc-fcol a:hover{color:var(--brand-strong,#527d21)} [data-theme="dark"] .gc-fcol a{color:#8b9086} [data-theme="dark"] .gc-fcol a:hover{color:var(--green-500,#9bd45f)} /* Company column: Terms/Privacy are muted '#' placeholders until pages exist. */ .gc-fcol-legal a{color:var(--muted,#787d74)} [data-theme="dark"] .gc-fcol-legal a{color:#6f7569} .gf-container.gc-sitefoot-legal{max-width:1320px;margin:0 auto;padding:0 28px 26px;width:100%} .gc-sitefoot-legal-in{border-top:1px solid var(--border,#e3e5dc);padding:16px 0;display:flex;flex-wrap:wrap;gap:12px;font-family:var(--font-mono,monospace);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted,#787d74)} [data-theme="dark"] .gc-sitefoot-legal-in{border-top-color:#1e2219;color:#4e5449} .gc-sitefoot-legal-in a{color:inherit;text-decoration:none} .gc-sitefoot-legal-in a:hover{color:var(--brand-strong,#527d21)} [data-theme="dark"] .gc-sitefoot-legal-in a:hover{color:var(--green-500,#9bd45f)} .gc-legal-contact{margin-left:auto;display:flex;gap:12px} @media (max-width:640px){.gc-legal-contact{margin-left:0}} /* WordPress mark (shortcode [gc_wp_mark]) */ .gc-wp-mark{display:inline-flex;line-height:0;vertical-align:middle} .gc-wp-mark svg{width:1em;height:1em} /* Root-level blockGap puts a 24px canvas stripe between the last content section * and the footer template part (visible between two dark bands). Content meets * the footer flush, as every comp does. */ footer.wp-block-template-part{margin-block-start:0}