/* Theme Name: Kepler Cloud Theme URI: https://hbgdesignlab.se/ Author: HDL – Hbg Design Lab Author URI: https://hbgdesignlab.se/ Description: Theme for the Kepler Cloud website — Swedish-first sovereign EU cloud marketing site. Ports the kepler.css design system (cobalt on cool paper, Space Grotesk / Hanken Grotesk / IBM Plex Mono, aurora hero) and the shared chrome. Content modules are ACF blocks in the hdl-kit plugin. Requires at least: 6.6 Tested up to: 6.7 Requires PHP: 7.4 Version: 2026.4.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: kepler-cloud Tags: full-site-editing, block-patterns, block-styles, editor-style */ /* --------------------------------------------------------------------------- Sticky chrome + smart top bar (wired to HDL Core → Header). The .chrome wrapper (utility bar + nav) is the sticky element; kepler.css's sticky .nav is neutralised inside it. On scroll-down the whole chrome slides up by exactly the utility-bar height (JS applies the transform) so the nav stays pinned while the top bar hides; on scroll-up the top bar returns. 'Sticky header = No' removes stickiness via .chrome.is-static. ------------------------------------------------------------------------- */ /* Two things break position:sticky in the WordPress build: 1) kepler.css sets body{overflow-x:hidden}, which makes a non-scrolling scroll-container — sticky descendants then never stick. overflow-x:clip still clips sideways overflow but does NOT create a scroll container. 2) WordPress wraps the header in a short

; a sticky element can only travel inside its parent, so a short parent lets it scroll away instantly. display:contents makes .chrome a child of the tall page wrapper instead. */ body { overflow-x: clip; } .wp-site-blocks > header.wp-block-template-part { display: contents; } .chrome { position: sticky; top: 0; z-index: 60; transition: transform .3s ease; will-change: transform; } .chrome .nav { position: static; top: auto; z-index: auto; } .chrome.is-static { position: static; transform: none !important; } /* Keep the sticky chrome below the WordPress admin bar for logged-in users. */ body.admin-bar .chrome { top: 32px; } @media screen and ( max-width: 782px ) { body.admin-bar .chrome { top: 46px; } } /* The design's .ubar is the top bar; suppress HDL Core's own wp_body_open bar. */ .hdl-top-bar { display: none !important; } /* --------------------------------------------------------------------------- Mobile chrome. kepler.css is desktop-only for the header (it just hides .nav-links <=1024px). The WordPress build adds: a hamburger, a full nav drawer that expands the mega-menu children (so they're reachable), and a slimmed utility bar. Hidden on desktop. ------------------------------------------------------------------------- */ .nav-toggle { display: none; } @media ( max-width: 1024px ) { /* Nav row: logo left, primary CTA + hamburger right; hide the ghost CTA. */ .nav .wrap { gap: 10px; height: 64px; } .nav-cta { order: 2; margin-left: auto; } .nav-cta .btn-ghost { display: none; } .nav-toggle { order: 3; display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 11px; background: transparent; border: 0; color: inherit; cursor: pointer; } .nav-toggle span { display: block; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s, opacity .2s; } .nav.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav.is-open .nav-toggle span:nth-child(2) { opacity: 0; } .nav.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Drawer */ .nav.is-open .nav-links { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; padding: 8px 24px 24px; background: var( --ink ); z-index: 60; box-shadow: var( --shadow-lg ); max-height: calc( 100vh - 100% ); overflow-y: auto; -webkit-overflow-scrolling: touch; } .nav.is-open .nav-links .nav-item { width: 100%; } .nav.is-open .nav-links .nav-item > a { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; font-size: 16px; border-bottom: 1px solid rgba( 255, 255, 255, 0.08 ); } .nav.is-open .nav-links .chev { display: none; } /* Mega-menu → inline, always-expanded sub-list inside the drawer. */ .nav.is-open .nav-links .mm { display: block; position: static; opacity: 1; pointer-events: auto; transform: none; background: transparent; border: 0; box-shadow: none; min-width: 0; padding: 4px 0 10px; } .nav.is-open .nav-links .mm-grid { display: block; } .nav.is-open .nav-links .mm-item { padding: 9px 4px 9px 14px; border-radius: 0; } .nav.is-open .nav-links .mm-ic, .nav.is-open .nav-links .mm-desc { display: none; } .nav.is-open .nav-links .mm-name { font-size: 14.5px; color: rgba( 255, 255, 255, 0.82 ); } } /* Slim the utility bar on mobile: drop the announcement text + secondary links, keep the status pill + language toggle so it stays one clean line. */ @media ( max-width: 900px ) { .ubar .wrap > span[style], .ubar .wrap > a[href="#docs"], .ubar .sep { display: none; } } @media ( max-width: 640px ) { .ubar { font-size: 11px; padding: 7px 0; } .ubar .wrap { gap: 12px; } .ubar .wrap > a { display: none; } .ubar .wrap > a.pill { display: inline-flex; } .ubar .pill { white-space: nowrap; } } /* Small-phone polish (widths this build can't render in-browser). Lets the hero eyebrow/CTAs wrap instead of overflow, and tightens the wrap gutter. */ @media ( max-width: 520px ) { .wrap, .kwrap { padding-left: 20px; padding-right: 20px; } .hero-eyebrow { font-size: 10px; letter-spacing: 0.08em; white-space: normal; line-height: 1.5; } /* Hero CTAs stack full-width via kepler.css (≤640px); no flex-basis here — a 46% basis in the column direction squashes the pills' height. */ .pod-result, .cta-band .wrap { text-align: left; } .cta-band .ctas { flex-wrap: wrap; } .cta-band .ctas .btn { flex: 1 1 46%; justify-content: center; } }