/* Sitekit V2 — glue only. Everything else is Elementor settings. */
/* Hello Elementor prints its own header/footer above canvas templates. */
body.page header.site-header,
body.page footer.site-footer { display: none !important; }
/* Sticky/fixed needs clip, never hidden. */
html, body { overflow-x: clip; }
/* ── WordPress admin bar ───────────────────────────────────────────────────
Logged-in users get a fixed toolbar at z-index 99999, and the site header is
itself `position: fixed`, so without an offset the logo slides underneath it.
In-flow content is already handled by WP's own `html { margin-top }`; only
fixed elements need this.
The height is NOT hard-coded. WordPress publishes it as a custom property on
and flips it 32px → 46px at its own 782px breakpoint
(wp-includes/css/admin-bar.css), so deriving from that variable tracks the
switch for free and stays correct if core ever changes the numbers.
Below 600px core switches the bar to `position: absolute` (admin-bar.css
line 1112) — it scrolls away with the document rather than staying put.
Offsetting there would pin the header 46px down and leave a permanent strip
of page showing above it for the whole scroll, so the offset returns to 0 and
the only cost is an overlap at the very top of the page. That is the better
trade: it self-corrects the moment you scroll. */
:root { --sk-admin-offset: 0px; }
body.admin-bar { --sk-admin-offset: var(--wp-admin--admin-bar--height, 32px); }
@media screen and (max-width: 600px) {
body.admin-bar { --sk-admin-offset: 0px; }
}
/* ── Header ────────────────────────────────────────────────────────────────
position/offset/z-index are Elementor settings; only the backdrop blur is
here, because the classic container has no backdrop-filter control (it
exists solely in the v4 atomic-widget schema). */
.sk-header {
background-color: rgba(255, 255, 255, 0.9) !important;
-webkit-backdrop-filter: blur(32px);
backdrop-filter: blur(32px);
}
/* The hero paints its photo under the bar; every other page starts below it. */
.sk-hero { position: relative; }
/* ── Mobile navigation ─────────────────────────────────────────────────────
The panel drops out of the header as one white rounded card. There is ONE
button: the header sits above the panel in z-order, so the toggle occupies
identical pixels open or closed and simply morphs into an X. */
.sk-mnav-toggle {
display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
width: 30px; height: 30px; justify-content: center;
padding: 0; margin: 0; background: none; border: 0; cursor: pointer;
}
.sk-mnav-toggle:hover,
.sk-mnav-toggle:focus,
.sk-mnav-toggle:active { background: none; outline: none; }
.sk-mnav-toggle:focus-visible { outline: 2px solid #F06218; outline-offset: 4px; }
.sk-mnav-toggle span {
display: block; height: 2px; width: 30px; background: #4A4A4A;
transition: transform .3s ease, opacity .2s ease;
}
@media (max-width: 1024px) {
body.sk-mnav-open .sk-mnav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.sk-mnav-open .sk-mnav-toggle span:nth-child(2) { opacity: 0; }
body.sk-mnav-open .sk-mnav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}
.sk-mnav {
position: fixed !important;
/* Must equal the mobile bar's real height, or the first menu item slides up
under it. The bar is 14 + 32 (logo) + 14 = 60; the logo's mobile size is an
Elementor setting, so changing it here means changing it there too. */
top: calc(60px + var(--sk-admin-offset, 0px)); left: 0; right: 0;
z-index: 9990;
max-height: calc(100vh - 60px - var(--sk-admin-offset, 0px));
overflow-y: auto; overscroll-behavior: contain;
border-radius: 0 0 20px 20px;
box-shadow: 0 8px 8px -4px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.12);
/* No `display:flex !important` — it would beat .elementor-hidden-desktop and
leave the panel in the DOM on desktop. */
flex-direction: column; flex-wrap: nowrap;
transform: translateY(-8px);
opacity: 0; visibility: hidden;
transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.sk-mnav.is-open {
transform: none; opacity: 1; visibility: visible; transition-delay: 0s;
}
body.sk-mnav-open { overflow: hidden; }
/* Flex items shrink by default; on a short screen that squashes the panel. */
.sk-mnav > * { flex-shrink: 0; }
.sk-mnav__links .elementor-nav-menu a { padding-left: 0 !important; }
/* ── Decoration ────────────────────────────────────────────────────────────
Both are deliberate overhangs: the hero confetti spills onto the white
section below, the testimonial coil rides up into the section above. */
.sk-hero-decor, .sk-coil { pointer-events: none; }
/* ── Testimonial card ──────────────────────────────────────────────────────
Avatar hangs above the card and the quote mark is pinned inside its corner;
neither is in the flow, which Elementor's own controls cannot express for a
widget inside a flex column. */
.sk-testimonial {
position: relative; overflow: visible; margin-top: 41px;
/* Figma 1:4772 carries TWO drop shadows and Elementor's box-shadow control is
single-layer, so this cannot be expressed as a setting. Kept here in full
rather than emitting a native shadow the glue would then have to override —
Elementor's per-element CSS outranks a class, so the panel would show a
value that does nothing. */
box-shadow: -32px 36px 12px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.07);
}
.sk-testimonial__avatar { position: absolute; top: -34px; left: 50%; transform: translateX(-50%); }
.sk-testimonial__avatar img { border-radius: 50%; display: block; }
.sk-testimonial__mark { position: absolute; top: 31px; left: 25px; }
/* ── Footer ────────────────────────────────────────────────────────────────
Link lists are text widgets so the client can edit them; the anchors need to
stack. Note the trap: a text-editor only wraps content in
when it has
no markup, so both selectors are needed. */
.sk-foot-links, .sk-foot-links p { margin: 0; }
.sk-foot-links a { display: block; color: inherit; text-decoration: none; }
.sk-foot-links a:hover { color: #F06218; }
.sk-foot-address a { color: inherit; text-decoration: underline; }
.sk-foot-legal a { color: inherit; text-decoration: none; }
.sk-foot-legal a:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
.sk-mnav, .sk-mnav-toggle span { transition: none; }
}