/*
Theme Name: Ebstar Child Theme
Theme URI: https://www.figma.com/design/8msAEt21JX3jzFgqSV8eAP/Ebstar
Description: High-performance bespoke child theme built for Ebstar engineering.
Author: Ebstar
Template: underscores
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: ebstar
*/
/* =========================================================
Design tokens — sourced from Figma "Ebstar" UI Sheet
https://www.figma.com/design/8msAEt21JX3jzFgqSV8eAP/Ebstar?node-id=236-398
========================================================= */
:root {
/* Colour palette (Figma variable names in comments) */
--ebstar-color-bg: #FBFCFB; /* Core White — main web background */
--ebstar-color-white: #FFFFFF;
--ebstar-color-black: #0C0C0C; /* Core Black — body / heading text */
--ebstar-color-charcoal: #1A1A1A; /* Charcoal */
--ebstar-color-slate: #4A4A4A; /* Slate */
--ebstar-color-cool-grey: #8A8A94; /* Cool Grey */
--ebstar-color-light-grey: #D8D8DD; /* Light Grey */
/* The Light Grey *section background* is this tint, not the solid colour —
derived from the value above so the two cannot drift apart. */
--ebstar-color-light-grey-30: color-mix(in srgb, var(--ebstar-color-light-grey) 30%, transparent);
--ebstar-color-orange: #FF7633; /* Core Orange — links, CTA border */
--ebstar-color-red: #E1384D; /* Core Red */
--ebstar-color-purple: #9F62E6; /* Core Purple */
--ebstar-color-purple-light: #AC77E9; /* gradient stop */
/* Primary gradient — CTA fill (purple -> red -> orange, left to right) */
--ebstar-gradient-primary: linear-gradient(
90deg,
var(--ebstar-color-purple-light) 0%,
var(--ebstar-color-red) 50%,
var(--ebstar-color-orange) 100%
);
/* Typography — "Web font is Poppins" (Figma dev note) */
--ebstar-font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--ebstar-font-weight-light: 300;
--ebstar-font-weight-regular: 400;
--ebstar-font-weight-medium: 500;
--ebstar-font-weight-semibold: 600;
--ebstar-font-weight-bold: 700;
--ebstar-font-size-base: 16px;
/* Heading scale from the UI Sheet: 66 / 38 / 26, fluid down to mobile */
--ebstar-h1: clamp(2.5rem, 5vw + 1rem, 66px);
--ebstar-h2: clamp(1.875rem, 3vw + 1rem, 38px);
--ebstar-h3: clamp(1.375rem, 1.5vw + 1rem, 26px);
/* Page title — the h1 that opens a page (Insights header, Contact).
Sits between h1 and h2 on the scale, as in Figma. */
--ebstar-page-title: clamp(2rem, 4.2vw + 0.5rem, 58px);
/* Shape */
--ebstar-radius-pill: 999px;
--ebstar-shadow-btn: 0 7px 14px rgba(0, 0, 0, 0.05);
--ebstar-shadow-btn-hover: 0 7px 18px rgba(0, 0, 0, 0.10);
--ebstar-btn-glow: inset 0 0 120px rgba(204, 215, 255, 0.15);
/* Layout — design is drawn at 1440 with an 80px gutter */
--ebstar-container-max: 1440px;
--ebstar-container-pad: clamp(20px, 5.56vw, 80px);
/* Breakpoints (reference — drive the media queries below) */
--breakpoint-mobile: 480px;
--breakpoint-tablet: 768px;
--breakpoint-desktop: 1024px;
--breakpoint-cinematic: 1440px;
/* Section spacing scale — drives the Padding Top / Bottom sliders on
every Page Content layout's Style tab. A flat 5px per slider step, so
the number in the editor maps to a predictable size: 0 = none through
10 = 50px. Fixed rather than fluid, so a chosen value is the value at
every screen width. */
--ebstar-space-0: 0;
--ebstar-space-1: 20px;
--ebstar-space-2: 40px;
--ebstar-space-3: 60px;
--ebstar-space-4: 80px;
--ebstar-space-5: 100px;
--ebstar-space-6: 120px;
--ebstar-space-7: 140px;
--ebstar-space-8: 160px;
--ebstar-space-9: 180px;
--ebstar-space-10: 200px;
}
/* Legacy aliases — the blueprint's header.php / footer.php / page.php still
reference these var names in inline styles. Mapped onto the Figma palette so
those templates render correctly until they're rebuilt against the
--ebstar-* tokens. */
:root {
--brand-primary: var(--ebstar-color-charcoal);
--brand-accent: var(--ebstar-color-orange);
--neutral-dark: var(--ebstar-color-black);
--neutral-light: var(--ebstar-color-light-grey);
--white: var(--ebstar-color-white);
--font-heading: var(--ebstar-font-family);
--font-body: var(--ebstar-font-family);
}
/* =========================================================
Base
========================================================= */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background-color: var(--ebstar-color-bg);
color: var(--ebstar-color-black);
font-family: var(--ebstar-font-family);
font-weight: var(--ebstar-font-weight-regular);
font-size: var(--ebstar-font-size-base);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* The parent theme gives .post/.page a 1.5em bottom margin, and WordPress puts
those classes on , which left a white strip under the footer. */
body.page,
body.post {
margin: 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 0.5em;
font-family: var(--ebstar-font-family);
font-weight: var(--ebstar-font-weight-semibold);
line-height: 1.2;
color: var(--ebstar-color-black);
}
h1 { font-size: var(--ebstar-h1); }
h2 { font-size: var(--ebstar-h2); }
h3 { font-size: var(--ebstar-h3); }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }
p { margin: 0 0 1rem; }
img {
max-width: 100%;
height: auto;
}
/* =========================================================
Links
Figma dev note: on hover the cursor becomes the hand/finger point;
links are Core Orange and underline on hover.
========================================================= */
a {
color: var(--ebstar-color-orange);
text-decoration: none;
cursor: pointer;
transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
a:hover,
a:focus {
color: var(--ebstar-color-orange);
text-decoration: underline;
}
/* Arrow glyph shown after text links, buttons and CTAs.
UI Sheet (node 236:398): the arrow sits on the up-right diagonal at rest and
rotates to point straight right on hover. The glyph is drawn diagonally, so
rest is 0deg and hover is a 45deg turn. */
.ebstar-cta-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 14px;
height: 14px;
transform: rotate(0deg);
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.ebstar-cta-arrow svg {
display: block;
width: 100%;
height: 100%;
}
/* Rotate whenever the thing the arrow lives in is hovered or keyboard-focused */
a:hover .ebstar-cta-arrow,
a:focus-visible .ebstar-cta-arrow,
button:hover .ebstar-cta-arrow,
button:focus-visible .ebstar-cta-arrow,
.btn-primary:hover .ebstar-cta-arrow,
.btn-primary:focus-visible .ebstar-cta-arrow,
.btn-outline:hover .ebstar-cta-arrow,
.btn-outline:focus-visible .ebstar-cta-arrow,
.ebstar-btn:hover .ebstar-cta-arrow,
.ebstar-btn:focus-visible .ebstar-cta-arrow {
transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
.ebstar-cta-arrow { transition: none; }
}
/* =========================================================
Buttons
Primary = gradient fill, white text, orange border, pill
Outline = transparent fill, orange border, black text (fills on hover)
========================================================= */
.btn-primary,
.ebstar-btn,
button:not(.menu-toggle),
input[type="submit"],
input[type="button"],
.wpcf7-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: var(--ebstar-font-family);
font-size: 16px;
font-weight: var(--ebstar-font-weight-regular);
line-height: normal;
color: var(--ebstar-color-white);
/* No border — the Figma button (28:8918) is a plain gradient pill; the
old orange outline stood out against the purple end of the gradient.
Padding absorbs the removed 2px border so the footprint is unchanged. */
background: var(--ebstar-gradient-primary);
border: 0;
border-radius: var(--ebstar-radius-pill);
padding: 14px 34px;
box-shadow: var(--ebstar-shadow-btn), var(--ebstar-btn-glow);
text-decoration: none;
cursor: pointer;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
/* Keyboard focus ring — the solid border no longer provides an edge affordance */
.btn-primary:focus-visible,
.ebstar-btn:focus-visible,
button:not(.menu-toggle):focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
.wpcf7-submit:focus-visible {
outline: 2px solid var(--ebstar-color-orange);
outline-offset: 2px;
}
.btn-primary:hover,
.ebstar-btn:hover,
button:not(.menu-toggle):hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.wpcf7-submit:hover {
color: var(--ebstar-color-white);
text-decoration: none;
box-shadow: var(--ebstar-shadow-btn-hover), var(--ebstar-btn-glow);
transform: translateY(-2px);
}
.btn-outline,
.ebstar-btn-outline {
background: transparent;
color: var(--ebstar-color-black);
border: 2px solid var(--ebstar-color-orange);
padding: 12px 32px; /* border makes up the removed 2px */
box-shadow: none;
}
.btn-outline:hover,
.ebstar-btn-outline:hover {
color: var(--ebstar-color-white);
background: var(--ebstar-gradient-primary);
box-shadow: var(--ebstar-shadow-btn);
}
/* =========================================================
Site header — Figma "Nav & drop down" (nodes 116:8715 / 169:1751)
Sticky dark bar: utility strip + logo + centre nav capsule + Contact CTA
========================================================= */
.site-header {
position: sticky; /* Figma dev note: "Menu is a sticky nav." */
top: 0;
z-index: 1000;
background: var(--ebstar-color-charcoal);
color: var(--ebstar-color-white);
}
/* Overlay variant — transparent, laid over a dark hero on landing pages.
Add class "overlay-active" to #masthead (or filter body_class) to use it. */
.site-header.overlay-active {
position: absolute;
inset: 0 0 auto 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 100%);
}
.site-header a { color: var(--ebstar-color-white); }
.site-header a:hover,
.site-header a:focus { color: var(--ebstar-color-white); }
/* --- Utility strip ------------------------------------------------------- */
.ebstar-utility-bar {
display: flex;
justify-content: flex-end;
max-width: var(--ebstar-container-max);
margin-inline: auto;
padding: 10px var(--ebstar-container-pad) 0;
font-size: 15px;
}
.ebstar-utility-menu {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
.ebstar-utility-menu li {
position: relative;
padding: 0 16px;
}
.ebstar-utility-menu li + li::before {
content: "";
position: absolute;
left: 0;
top: 50%;
height: 14px;
border-left: 1px solid rgba(255, 255, 255, 0.4);
transform: translateY(-50%);
}
.ebstar-utility-menu a { text-decoration: none; }
.ebstar-utility-menu a:hover { text-decoration: underline; }
/* --- Main bar --------------------------------------------------------- */
.ebstar-header-inner {
position: relative;
display: flex;
align-items: center;
gap: 24px;
max-width: var(--ebstar-container-max);
margin-inline: auto;
padding: 14px var(--ebstar-container-pad);
}
/* Logo (custom-logo when set, otherwise the wordmark fallback) */
.site-branding {
flex: 1 1 0;
}
.custom-logo,
.custom-logo-link img {
display: block;
height: auto;
max-height: 44px;
width: auto;
}
/* Header logo — the built-in ebstar mark, or an image set in Ebstar Settings */
.ebstar-logo {
display: inline-flex;
text-decoration: none;
}
.ebstar-logo:hover,
.ebstar-logo:focus { text-decoration: none; }
.ebstar-logo__img {
display: block;
height: 37px; /* Figma logo is 180 x 36.8 */
width: auto;
max-height: 44px;
}
@media (max-width: 600px) {
.ebstar-logo__img { height: 30px; }
}
/* --- Centre nav capsule --------------------------------------------------- */
.main-navigation {
flex: 0 0 auto;
width: auto; /* override the _s parent's .main-navigation { width: 100% } */
}
#primary-menu {
display: flex;
align-items: center;
gap: 2px;
width: max-content; /* hug the items instead of filling the row */
max-width: 100%;
margin: 0;
padding: 6px 10px;
list-style: none;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--ebstar-radius-pill);
background: rgba(255, 255, 255, 0.07);
box-shadow: var(--ebstar-shadow-btn);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
.main-navigation li {
position: relative;
margin: 0;
padding: 0;
}
.main-navigation a {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 16px;
font-size: 16px;
line-height: normal;
color: var(--ebstar-color-white);
text-decoration: none;
white-space: nowrap;
border-radius: var(--ebstar-radius-pill);
transition: background-color 0.2s ease;
}
.main-navigation li:hover > a,
.main-navigation li:focus-within > a,
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a {
text-decoration: none;
background: rgba(255, 255, 255, 0.12);
}
/* Caret on items that open a submenu — the exact filled chevron from the
Figma mobile menu (116:8622 / vector 39e24ba9), not a CSS border-corner:
the border-triangle this replaced read noticeably thinner than the design's
solid wedge shape. Masked so it still takes currentColor. */
.main-navigation .menu-item-has-children > a::after {
content: "";
display: inline-block;
width: 9px;
height: 6px;
margin-top: -1px;
background-color: currentColor;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath d='M4.02454 5.79526L0.198343 1.8456C-0.0661144 1.5726 -0.0661144 1.13117 0.198343 0.861084L0.834167 0.204743C1.09862 -0.0682478 1.52626 -0.0682478 1.7879 0.204743L4.5 3.00436L7.2121 0.204743C7.47656 -0.0682478 7.90419 -0.0682478 8.16583 0.204743L8.80166 0.861084C9.06611 1.13408 9.06611 1.57551 8.80166 1.8456L4.97546 5.79526C4.71663 6.06825 4.289 6.06825 4.02454 5.79526Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath d='M4.02454 5.79526L0.198343 1.8456C-0.0661144 1.5726 -0.0661144 1.13117 0.198343 0.861084L0.834167 0.204743C1.09862 -0.0682478 1.52626 -0.0682478 1.7879 0.204743L4.5 3.00436L7.2121 0.204743C7.47656 -0.0682478 7.90419 -0.0682478 8.16583 0.204743L8.80166 0.861084C9.06611 1.13408 9.06611 1.57551 8.80166 1.8456L4.97546 5.79526C4.71663 6.06825 4.289 6.06825 4.02454 5.79526Z'/%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
transform: rotate(0deg);
transition: transform 0.2s ease;
}
.main-navigation .menu-item-has-children:hover > a::after,
.main-navigation .menu-item-has-children:focus-within > a::after {
transform: rotate(180deg);
}
/* On mobile the dedicated toggle button (below) takes over the caret's job */
@media (max-width: 1024px) {
.main-navigation .menu-item-has-children > a::after { content: none; }
}
/* --- Dropdown panel ----------------------------------------------------- */
.main-navigation ul ul.sub-menu {
position: absolute;
top: calc(100% + 14px);
left: 50%;
display: flex; /* always laid out; shown/hidden via visibility */
flex-direction: column; /* stack the pills regardless of _s float rules */
gap: 10px;
min-width: 237px;
margin: 0;
padding: 14px;
list-style: none;
background: var(--ebstar-color-charcoal);
border-radius: 18px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
z-index: 99999;
/* Toggle via visibility (not display) so the hide can be delayed —
this, plus the .menu-item-has-children::after bridge below, stops the
panel vanishing while the cursor crosses the gap from the parent. */
visibility: hidden;
opacity: 0;
pointer-events: none;
transform: translateX(-50%) translateY(6px);
transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.25s;
}
/* The parent theme sets `left: auto` on hover/focus at a higher specificity
(.main-navigation ul li:hover > ul), which would drop the panel back to its
static position against the parent's left edge — taking the peak with it.
Restating `left` here, with the .sub-menu class in the selector, keeps the
panel centred on its parent once it opens. */
.main-navigation ul li:hover > ul.sub-menu,
.main-navigation ul li.focus > ul.sub-menu,
.main-navigation ul li:focus-within > ul.sub-menu {
left: 50%;
}
.main-navigation li:hover > ul.sub-menu,
.main-navigation li.focus > ul.sub-menu,
.main-navigation li:focus-within > ul.sub-menu {
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
transition: opacity 0.16s ease, transform 0.16s ease;
}
/* Invisible bridge spanning the visual gap, so the pointer never leaves a
hoverable area between the parent item and the panel. */
.main-navigation .menu-item-has-children::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 16px;
}
/* Notch pointing up at the parent item */
.main-navigation ul ul.sub-menu::before {
content: "";
position: absolute;
top: -7px;
left: 50%;
width: 16px;
height: 16px;
background: inherit;
border-radius: 3px;
transform: translateX(-50%) rotate(45deg);
}
/* Submenu items = light-grey pills, gradient fill on hover / current */
.main-navigation ul ul.sub-menu li {
float: none;
width: 100%;
margin: 0;
}
.main-navigation ul ul.sub-menu a {
/* Figma 116:8715 — 209 x 35 pills, label centred on both axes */
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 100%;
min-height: 35px;
padding: 4px 20px;
text-align: center;
font-size: 16px;
color: var(--ebstar-color-black);
background: var(--ebstar-color-light-grey);
border-radius: var(--ebstar-radius-pill);
white-space: normal;
}
.main-navigation ul ul.sub-menu a:hover,
.main-navigation ul ul.sub-menu a:focus,
.main-navigation ul ul.sub-menu .current-menu-item > a {
color: var(--ebstar-color-white);
background: var(--ebstar-gradient-primary);
}
/* --- Contact CTA ------------------------------------------------------- */
.ebstar-header-cta {
flex: 1 1 0;
display: flex;
justify-content: flex-end;
}
.ebstar-header-cta .btn-primary {
padding: 13px 30px;
}
.ebstar-header-cta .btn-primary:hover {
font-weight: var(--ebstar-font-weight-semibold);
}
/* --- Hamburger toggle (hidden until the capsule is collapsed) --------- */
.menu-toggle {
display: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
cursor: pointer;
}
.menu-toggle__bar,
.menu-toggle__bar::before,
.menu-toggle__bar::after {
content: "";
display: block;
width: 22px;
height: 2px;
background: var(--ebstar-color-white);
}
.menu-toggle__bar { position: relative; }
.menu-toggle__bar::before { position: absolute; top: -7px; left: 0; }
.menu-toggle__bar::after { position: absolute; top: 7px; left: 0; }
@media (max-width: 1024px) {
.menu-toggle { display: inline-flex; }
.main-navigation #primary-menu { display: none; }
/* Frosted translucent glass, not a solid dark panel (Figma 116:8662):
50% black over a 14px backdrop blur, so the hero gradient behind reads
through it as colour — that show-through IS the "gradient" in the
design, there is no gradient fill on the panel itself. The radial wash
is the design's own 10%-opacity darkening at the top edge. */
.main-navigation.toggled #primary-menu {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
position: absolute;
/* Flush with .ebstar-header-inner's padding box, which already sits
15px in from each screen edge — the design's own panel inset. Using
--ebstar-container-pad here instead stacked that inset a second time
and left the panel ~56px narrower than the design. */
left: 0;
right: 0;
top: calc(100% + 8px);
width: auto;
padding: 6px 21px 18px;
border: 1.425px solid var(--ebstar-color-white);
border-radius: 27px;
background-color: rgba(0, 0, 0, 0.5);
background-image: radial-gradient(146% 118% at 50% -15%,
rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
box-shadow: 0 7px 14px rgba(0, 0, 0, 0.05),
inset 0 0 143px rgba(204, 215, 255, 0.15);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
/* neutralise the _s parent's floated submenu / list items */
.main-navigation.toggled #primary-menu li { float: none; width: 100%; }
.main-navigation.toggled #primary-menu .menu-item-has-children::after { content: none; }
/* The toggle button is absolutely positioned against this (below), which
keeps the link spanning the full row width so its border-bottom draws
the design's divider edge to edge — a flex sibling would cut the line
short at the chevron. */
.main-navigation.toggled #primary-menu > li { position: relative; }
/* Top-level rows: plain white label + hairline divider, NO background in
any state (Figma 116:8685/8691/8688/8694). This outranks the desktop
li:hover/:focus-within/.current-menu-ancestor pill (0,2,2) on
specificity (1,2,2), which otherwise lit a grey pill behind the label
as soon as its chevron took focus. 18/19px padding around a 24px line
box gives the design's 61px row pitch. */
.main-navigation.toggled #primary-menu > li:not(.ebstar-nav-extra) > a {
display: block;
width: 100%;
padding: 18px 0 19px;
font-size: 16px;
line-height: 24px;
color: var(--ebstar-color-white);
background: none;
border-radius: 0;
border-bottom: 1px solid var(--ebstar-color-light-grey);
white-space: normal;
}
/* A divider follows every row in the design because the support links and
Contact pill sit below — so the last nav item keeps its line. Should
those ever be absent, this stops it becoming a stray line on the edge. */
.main-navigation.toggled #primary-menu > li:not(.ebstar-nav-extra):last-child > a {
border-bottom: 0;
}
/* --- Panel tail: utility links + Contact pill (Figma 116:8714 / 116:8702)
These ride along inside #primary-menu so they sit within the frosted
panel; they are list items only structurally, and opt out of the menu
row rhythm above via :not(.ebstar-nav-extra). */
.main-navigation.toggled #primary-menu > .ebstar-nav-extra {
display: block;
}
.main-navigation.toggled #primary-menu .ebstar-nav-support {
padding-top: 23px;
}
.main-navigation.toggled #primary-menu .ebstar-nav-support__link {
display: block;
width: 100%;
padding: 0;
font-size: 16px;
line-height: 24px;
color: var(--ebstar-color-white);
background: none;
border: 0;
border-radius: 0;
text-decoration: none;
white-space: normal;
}
.main-navigation.toggled #primary-menu .ebstar-nav-support__link:hover,
.main-navigation.toggled #primary-menu .ebstar-nav-support__link:focus {
text-decoration: underline;
background: none;
}
/* 14px above the pill; 9px here plus the panel's own 18px bottom padding
gives the design's 27px beneath it. */
.main-navigation.toggled #primary-menu .ebstar-nav-cta {
padding: 14px 0 9px;
}
/* Restating the gradient: .main-navigation li:hover > a (0,2,2) would
otherwise swap it for the nav's flat white tint on hover. */
.main-navigation.toggled #primary-menu .ebstar-nav-cta .btn-primary,
.main-navigation.toggled #primary-menu .ebstar-nav-cta .btn-primary:hover,
.main-navigation.toggled #primary-menu .ebstar-nav-cta .btn-primary:focus {
display: flex;
width: 100%;
min-height: 35px;
padding: 5px 20px;
font-size: 14px;
font-weight: var(--ebstar-font-weight-semibold);
line-height: 24px;
color: var(--ebstar-color-white);
background: var(--ebstar-gradient-primary);
border-radius: var(--ebstar-radius-pill);
text-decoration: none;
white-space: normal;
}
.main-navigation.toggled #primary-menu .sub-menu {
position: static;
display: flex; /* keep flex so the 10px gap between pills holds */
float: none;
width: 100%;
transform: none;
min-width: 0;
/* The Figma 19px/12px breathing room lives on the end pills' margins,
not this element's padding: a border box cannot shrink below its own
padding, so max-height:0 would still leave a 31px dead strip under
every collapsed row. Margins sit inside the content box, so they
clip away to nothing — and still count toward scrollHeight. */
padding: 0;
box-shadow: none;
background: transparent;
/* Progressive enhancement: with ebstar.js not running, there is no
toggle button and no way to open it, so it stays fully visible —
the pre-collapsible behaviour. ebstar-has-toggle (below) is what
switches a submenu over to starting closed. */
visibility: visible;
opacity: 1;
pointer-events: auto;
transition: none;
}
.main-navigation.toggled #primary-menu .sub-menu::before { display: none; }
.main-navigation.toggled #primary-menu .sub-menu a { width: 100%; }
/* Figma 116:8622 — 19px below the row's divider, 12px before the next row. */
.main-navigation.toggled #primary-menu .sub-menu > li:first-child { margin-top: 19px; }
.main-navigation.toggled #primary-menu .sub-menu > li:last-child { margin-bottom: 12px; }
/* Once ebstar.js has added a toggle button the submenu starts collapsed and
opens only via .is-submenu-open, animating to --ebstar-submenu-h (the
script's measured scrollHeight) so it lands on the exact height rather
than an arbitrary large one. max-height is declared only in here, so the
measured value can never reach the desktop dropdown.
The padding stays put through the animation: box-sizing is border-box
globally, so max-height:0 already collapses it away, and scrollHeight
then reports content + padding — exactly the height being animated to.
Transitioning the padding as well would leave max-height 31px short of
the grown box and clip the last pill. */
.main-navigation.toggled #primary-menu .menu-item-has-children.ebstar-has-toggle > .sub-menu {
max-height: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: max-height 0.25s ease, opacity 0.2s ease,
visibility 0s linear 0.25s;
}
.main-navigation.toggled #primary-menu .menu-item-has-children.ebstar-has-toggle.is-submenu-open > .sub-menu {
/* Fallback keeps it openable if the property is somehow unset. */
max-height: var(--ebstar-submenu-h, 100vh);
opacity: 1;
visibility: visible;
transition: max-height 0.25s ease, opacity 0.2s ease;
}
/* The toggle button — a dedicated chevron, separate from the link, so
tapping the label still goes to that item's own page (Figma 116:8622). */
/* Right-aligned over the label's own row — 40px square for a usable tap
target, centred on the 61px row (18 + 24 + 19). No background: the
design shows a bare chevron here, so only :focus-visible draws a ring. */
.main-navigation.toggled #primary-menu .ebstar-submenu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
right: 0;
top: 10px;
width: 40px;
height: 40px;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
box-shadow: none;
color: var(--ebstar-color-white);
cursor: pointer;
}
.main-navigation.toggled #primary-menu .ebstar-submenu-toggle:hover,
.main-navigation.toggled #primary-menu .ebstar-submenu-toggle:active {
background: transparent;
box-shadow: none;
transform: none;
}
.main-navigation.toggled #primary-menu .ebstar-submenu-toggle:focus-visible {
outline: 2px solid var(--ebstar-color-white);
outline-offset: 2px;
background: transparent;
box-shadow: none;
transform: none;
}
.ebstar-submenu-toggle__icon {
width: 9px;
height: 6px;
transition: transform 0.2s ease;
}
.menu-item-has-children.is-submenu-open > .ebstar-submenu-toggle .ebstar-submenu-toggle__icon {
transform: rotate(180deg);
}
}
/* The toggle button only exists inside the mobile panel. Two classes here
(0,2,0) rather than one, so this reliably outranks the global button reset
button:not(.menu-toggle) (0,1,1) — a bare .ebstar-submenu-toggle rule lost
to it on specificity and the button sat visible, CTA-styled, on desktop. */
.main-navigation .ebstar-submenu-toggle { display: none; }
/* The panel tail belongs to the mobile menu only — on desktop these links live
in the utility bar and the CTA sits beside the nav. Two classes (0,2,0) for
the same reason as above: it has to outrank the global element resets. */
.main-navigation .ebstar-nav-extra { display: none; }
/* Belt-and-braces: guarantee the highlighted/current pill reads white-on-
-gradient inside the mobile panel specifically, never black-on-grey — the
#id in this selector outranks any class-only rule regardless of source
order, so nothing added later can quietly regress it back to black. */
@media (max-width: 1024px) {
.main-navigation.toggled #primary-menu .sub-menu a:hover,
.main-navigation.toggled #primary-menu .sub-menu a:focus,
.main-navigation.toggled #primary-menu .sub-menu a:active,
.main-navigation.toggled #primary-menu .sub-menu .current-menu-item > a {
color: var(--ebstar-color-white);
background: var(--ebstar-gradient-primary);
}
}
@media (max-width: 600px) {
.ebstar-utility-bar { display: none; }
.ebstar-header-inner { gap: 10px; }
.ebstar-logo { font-size: 22px; }
.menu-toggle { width: 40px; }
.ebstar-header-cta .btn-primary { padding: 10px 18px; font-size: 14px; }
}
/* =========================================================
Site footer — Figma "Footer" (node 28:9514)
Dark panel, 4-part top row, divider, bottom bar, plus a
decorative gradient wash + giant wordmark + spark bleeding off.
========================================================= */
.site-footer {
position: relative;
overflow: hidden;
background: var(--ebstar-color-black);
color: var(--ebstar-color-white);
}
.site-footer a {
color: var(--ebstar-color-white);
}
.site-footer a:hover,
.site-footer a:focus {
color: var(--ebstar-color-orange);
}
/* --- decorative layers ------------------------------------------------- */
/* Same layer recipe as the hero (Figma nodes 23:1719 / 23:1720), starting
30.35% down the footer: black from the top fading downward, a diagonal
wedge across the upper right, then the brand gradient. Keeping the upper
part dark is what lets the white asterisk read against it. */
.site-footer__glow {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 69.65%;
pointer-events: none;
background-image:
linear-gradient(181.32deg, rgb(12, 12, 12) 25.06%, rgba(12, 12, 12, 0.1) 98.07%),
linear-gradient(229.6deg, rgb(0, 0, 0) 33.86%, rgba(0, 0, 0, 0) 68.67%),
radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
linear-gradient(to left, #ff7633 0%, #e1384d 50%, #ac77e9 100%);
background-size: cover, cover, 4px 4px, cover;
background-repeat: no-repeat, no-repeat, repeat, no-repeat;
}
/* Wordmark + asterisk — Figma places them in flow below the bottom bar,
spanning the container gutters and fully visible (never cropped). */
.site-footer__mark {
position: relative;
margin-top: clamp(28px, 5vw, 56px);
pointer-events: none;
user-select: none;
/* Lets the wordmark size off the container rather than the viewport —
the container caps at 1440, so vw units kept growing past it and
overflowed the letters. */
container-type: inline-size;
}
.site-footer__wordmark {
display: block;
font-family: var(--ebstar-font-family);
font-weight: var(--ebstar-font-weight-bold);
font-size: 27.7cqw; /* Figma 28:9514: "ebstar" spans 86.6% of the 1280 container */
line-height: 0.78;
letter-spacing: -0.04em;
color: rgba(255, 255, 255, 0.16);
white-space: nowrap;
}
/* Superscript position: up and right of the "r", per Figma */
.site-footer__asterisk {
position: absolute;
right: 0;
bottom: 74%;
width: 8.95%;
height: auto;
max-width: 124px;
}
/* --- content --------------------------------------------------------- */
.site-footer__inner {
position: relative;
z-index: 2;
max-width: var(--ebstar-container-max);
margin-inline: auto;
padding: clamp(48px, 7vw, 88px) var(--ebstar-container-pad) clamp(28px, 3.9vw, 38px);
}
.site-footer__top {
display: grid;
/* Figma 28:9514 — the columns start at 0 / 554 / 768 / 994 across the 1280
container, so once the 48px gaps are removed the tracks are 506 / 166 /
178 / 286. The fr values are those widths: the brand column is about
three times a link column, not the 1.5x it was. */
/* minmax(0, …) because an fr track otherwise floors at its min-content:
the nowrap location name below widened its own track and pulled the
other three off the design's positions. */
grid-template-columns:
minmax(0, 506fr) minmax(0, 166fr) minmax(0, 178fr) minmax(0, 286fr);
gap: 40px 48px;
align-items: start;
}
.site-footer__tagline {
margin: 0 0 clamp(28px, 4vw, 44px);
font-size: var(--ebstar-h2);
font-weight: var(--ebstar-font-weight-semibold);
color: var(--ebstar-color-white);
}
.site-footer__lead .btn-primary {
margin-top: 22px;
}
.site-footer__heading {
margin: 0;
font-size: 16px;
font-weight: var(--ebstar-font-weight-semibold);
color: var(--ebstar-color-white);
}
.site-footer__links,
.site-footer__locations {
margin: 16px 0 0;
padding: 0;
list-style: none;
}
/* Locations is editor-authored HTML, so take whatever structure the WYSIWYG
produces — a list or plain paragraphs — and give both the same rhythm. */
.site-footer__locations ul,
.site-footer__locations ol {
margin: 0;
padding: 0;
list-style: none;
}
.site-footer__links li,
.site-footer__locations li,
.site-footer__locations p {
margin: 0 0 8px;
line-height: 1.7;
}
.site-footer__locations > :last-child,
.site-footer__locations ul > li:last-child { margin-bottom: 0; }
/* "Newcastle-under-Lyme" is a shade wider than its track, and the design keeps
it on one line, letting it run into the 48px gap rather than wrap. Only
while the four columns are side by side — once they stack there is room. */
@media (min-width: 1025px) {
.site-footer__locations li,
.site-footer__locations p { white-space: nowrap; }
}
/* A linked location reads like the Quick Links beside it: white, brand orange
on hover. The :visited pair is needed for the same reason as there — the
plain a:visited rule below would otherwise repaint them. */
.site-footer__locations a,
.site-footer__locations a:visited {
color: var(--ebstar-color-white);
text-decoration: none;
}
.site-footer__locations a:hover,
.site-footer__locations a:focus,
.site-footer__locations a:visited:hover,
.site-footer__locations a:visited:focus {
color: var(--ebstar-color-orange);
text-decoration: underline;
}
.site-footer__address {
margin: 16px 0 12px;
font-style: normal;
line-height: 1.7;
}
.site-footer__contact-lines {
margin: 0 0 4px;
line-height: 1.9;
}
.site-footer__social {
display: flex;
gap: 16px;
margin-top: 22px;
}
.site-footer__social-link {
display: inline-flex;
color: rgba(255, 255, 255, 0.8);
}
.site-footer__social-link:hover { color: var(--ebstar-color-white); }
.site-footer__social-link svg { display: block; width: 24px; height: 24px; } /* Figma: 24x24 frame */
/* --- newsletter (Contact Form 7) ------------------------------------- */
.ebstar-newsletter {
margin-top: 26px;
/* Figma 28:9514 — the pill is 486 of the 506 brand track, so it is a
proportion of the column rather than a fixed width; the flat 460px cap
it replaces left it ~26px short at desktop. The 486px ceiling keeps it
from running away once the footer stacks and the track is the full
container. */
max-width: min(96%, 486px);
}
.ebstar-newsletter__title {
margin: 0 0 12px;
font-size: 16px;
font-weight: var(--ebstar-font-weight-semibold);
color: var(--ebstar-color-white);
}
.ebstar-newsletter .wpcf7 { margin: 0; }
.ebstar-newsletter form.wpcf7-form {
/* Anchors the absolutely-placed spinner below */
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
border: 1px solid rgba(255, 255, 255, 0.85);
border-radius: 70px;
/* Matching left/right insets so the arrow sits as far from the right curve
as the placeholder does from the left. */
padding: 4px 22px;
}
.ebstar-newsletter form.wpcf7-form > .hidden-fields-container,
.ebstar-newsletter form.wpcf7-form > .akismet-fields-container {
display: none;
}
.ebstar-newsletter form.wpcf7-form > p {
display: flex;
flex: 1 1 100%;
align-items: center;
gap: 8px;
margin: 0;
}
.ebstar-newsletter .wpcf7-form-control-wrap {
display: block;
flex: 1 1 auto;
min-width: 0;
}
.ebstar-newsletter input.wpcf7-form-control.wpcf7-email {
width: 100%;
/* Block, so the field does not sit on a text baseline — as an inline-block
its wrapper picked up the descender gap and stood 2px taller than it. */
display: block;
/* 4px here + the form's own 4px + the 1px borders on a 16.8px line box
makes the design's 35px pill; at 10px it stood 46.8px, a third too tall. */
padding: 4px 0;
background: transparent;
border: 0;
color: var(--ebstar-color-white);
font: 400 12px/1.4 var(--ebstar-font-family);
}
.ebstar-newsletter input.wpcf7-email::placeholder { color: rgba(255, 255, 255, 0.8); }
.ebstar-newsletter input.wpcf7-email:focus { outline: none; }
/* "Subscribe" = quiet text link with an arrow, not the global gradient button */
.ebstar-newsletter input.wpcf7-submit {
flex: 0 0 auto;
margin: 0;
/* 6px keeps this just under the email field's 25px line box, so the field
stays the tallest item and sets the pill's height; at 8px the button
became the tallest and pushed the pill 3px past the design. */
padding: 6px 24px 6px 10px;
background-color: transparent;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 11 11 3M4.2 3H11v6.8' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right center;
background-size: 12px 12px;
border: 0;
border-radius: 0;
box-shadow: none;
color: var(--ebstar-color-white);
font: 300 12px/1 var(--ebstar-font-family);
cursor: pointer;
}
/* Same 45deg turn as .ebstar-cta-arrow — an has no child to rotate, so
swap in the glyph pre-rotated inside the SVG instead. */
.ebstar-newsletter input.wpcf7-submit:hover,
.ebstar-newsletter input.wpcf7-submit:focus-visible {
transform: none;
box-shadow: none;
color: var(--ebstar-color-orange);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 11 11 3M4.2 3H11v6.8' fill='none' stroke='%23ff7633' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' transform='rotate(45 7 7)'/%3E%3C/svg%3E");
}
.ebstar-newsletter__consent {
margin: 12px 0 0;
font-size: 12px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.6);
}
.ebstar-newsletter__consent a {
color: rgba(255, 255, 255, 0.85);
text-decoration: underline;
}
.ebstar-newsletter .wpcf7-response-output {
flex: 0 0 100%;
order: 9;
margin: 10px 2px 0 !important;
padding: 8px 12px !important;
border-radius: 8px;
font-size: 12px;
}
/* CF7 keeps this in the flow at all times — only hiding it with visibility —
so while idle it still reserved 14px plus its margin plus the row's 8px gap,
holding Subscribe and its arrow ~14px further from the right curve than the
placeholder is from the left. Out of flow it costs nothing, and on submit it
appears over the arrow, reading as the arrow becoming a spinner. */
.ebstar-newsletter .wpcf7-spinner {
position: absolute;
right: 22px;
top: 50%;
transform: translateY(-50%);
margin: 0;
}
.ebstar-newsletter .wpcf7-not-valid-tip {
margin-top: 4px;
font-size: 11px;
color: #ffb3b3;
}
/* --- divider + bottom bar ------------------------------------------- */
.site-footer__divider {
max-width: var(--ebstar-container-max);
margin: clamp(32px, 5vw, 56px) auto 0;
border: 0;
border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.site-footer__bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 16px 24px;
margin-top: 24px;
font-size: 12px;
line-height: 1.8;
color: rgba(255, 255, 255, 0.75);
}
.site-footer__bottom p { margin: 0; }
.site-footer__legal-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 4px 0 0;
padding: 0;
list-style: none;
}
/* 24px tap height for the small legal links (WCAG 2.2 target size) */
.site-footer__legal-links a {
display: inline-block;
min-height: 24px;
line-height: 24px;
}
.site-footer__legal-links li + li::before {
content: "|";
margin-right: 8px;
color: rgba(255, 255, 255, 0.4);
}
.site-footer__credit { white-space: nowrap; }
@media (max-width: 1024px) {
.site-footer__top { grid-template-columns: 1fr 1fr; }
.site-footer__lead { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
.site-footer__top { grid-template-columns: 1fr; }
.site-footer__bottom { flex-direction: column; }
.ebstar-newsletter form.wpcf7-form { flex-wrap: wrap; border-radius: 22px; }
}
/* =========================================================
Page builder — "Page Content" flexible-content layouts
page.php -> template-parts/blocks/.php
========================================================= */
.ebstar-container {
max-width: var(--ebstar-container-max);
margin-inline: auto;
padding-inline: var(--ebstar-container-pad);
}
.ebstar-section {
position: relative;
}
/* --- Style tab: padding scale (section_pt / section_pb) ---------------- */
.ebstar-pt-0 { padding-top: var(--ebstar-space-0); }
.ebstar-pt-1 { padding-top: var(--ebstar-space-1); }
.ebstar-pt-2 { padding-top: var(--ebstar-space-2); }
.ebstar-pt-3 { padding-top: var(--ebstar-space-3); }
.ebstar-pt-4 { padding-top: var(--ebstar-space-4); }
.ebstar-pt-5 { padding-top: var(--ebstar-space-5); }
.ebstar-pt-6 { padding-top: var(--ebstar-space-6); }
.ebstar-pt-7 { padding-top: var(--ebstar-space-7); }
.ebstar-pt-8 { padding-top: var(--ebstar-space-8); }
.ebstar-pt-9 { padding-top: var(--ebstar-space-9); }
.ebstar-pt-10 { padding-top: var(--ebstar-space-10); }
.ebstar-pb-0 { padding-bottom: var(--ebstar-space-0); }
.ebstar-pb-1 { padding-bottom: var(--ebstar-space-1); }
.ebstar-pb-2 { padding-bottom: var(--ebstar-space-2); }
.ebstar-pb-3 { padding-bottom: var(--ebstar-space-3); }
.ebstar-pb-4 { padding-bottom: var(--ebstar-space-4); }
.ebstar-pb-5 { padding-bottom: var(--ebstar-space-5); }
.ebstar-pb-6 { padding-bottom: var(--ebstar-space-6); }
.ebstar-pb-7 { padding-bottom: var(--ebstar-space-7); }
.ebstar-pb-8 { padding-bottom: var(--ebstar-space-8); }
.ebstar-pb-9 { padding-bottom: var(--ebstar-space-9); }
.ebstar-pb-10 { padding-bottom: var(--ebstar-space-10); }
/* --- Style tab: background + text colour (section_bg / section_text) --- */
.ebstar-section.ebstar-has-bg { background-color: var(--ebstar-section-bg); }
.ebstar-section.ebstar-bg-gradient {
background-color: transparent;
background-image: var(--ebstar-gradient-primary);
}
.ebstar-has-text { color: var(--ebstar-section-text); }
.ebstar-has-text :is(h1, h2, h3, h4, h5, h6) { color: var(--ebstar-section-text); }
/* Underlines prose links inside a recoloured section. .ebstar-textlink is
exempt: it is a CTA, not body copy, and underlines only on hover — but its
own rule is a single class (0,1,0) and lost to this one (0,3,1), so it sat
permanently underlined wherever a section set its own text colour. */
.ebstar-has-text a:not(.btn-primary):not(.btn-outline):not(.ebstar-textlink) {
color: var(--ebstar-section-text);
text-decoration: underline;
}
/* On a gradient section the primary button reads better solid white */
.ebstar-bg-gradient .btn-primary {
background: var(--ebstar-color-white);
color: var(--ebstar-color-black);
}
.ebstar-bg-gradient .btn-primary:hover {
background: var(--ebstar-color-black);
color: var(--ebstar-color-white);
}
/* Buttons row shared by future layouts */
.ebstar-block__buttons {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 28px;
}
/* Rich-text / prose */
.ebstar-prose {
max-width: 70ch;
}
.ebstar-prose--narrow { max-width: 54ch; }
.ebstar-prose--wide { max-width: 92ch; }
.ebstar-prose > :first-child { margin-top: 0; }
.ebstar-prose > :last-child { margin-bottom: 0; }
.ebstar-prose p { margin: 0 0 1.1em; }
.ebstar-prose :is(h2, h3, h4) { margin: 1.6em 0 0.5em; }
.ebstar-prose ul, .ebstar-prose ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.ebstar-prose li { margin: 0 0 0.4em; }
.ebstar-prose img { border-radius: 10px; }
/* Post body — Figma 28:7759 */
.ebstar-post__content img {
width: 100%;
height: auto;
border-radius: 20px;
}
.ebstar-post__content ul,
.ebstar-post__content ol { padding-left: 24px; } /* Figma */
.ebstar-post__content li { line-height: 30px; } /* Figma */
.ebstar-prose a { text-decoration: underline; }
/* Breadcrumbs — Figma 116:6943: "Home / Insights / Blogs / Blog Page".
14px Poppins Light in Core Black, slash separators, no background band. */
.ebstar-breadcrumbs {
background: none;
font-size: 14px;
font-weight: 300;
text-transform: capitalize;
}
.ebstar-breadcrumbs .ebstar-container {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
padding-block: clamp(18px, 2.4vw, 32px);
}
.ebstar-breadcrumbs a,
.ebstar-breadcrumbs span {
color: var(--ebstar-color-black);
}
.ebstar-breadcrumbs a { text-decoration: none; }
.ebstar-breadcrumbs a:hover,
.ebstar-breadcrumbs a:focus { color: var(--ebstar-color-orange); text-decoration: underline; }
.ebstar-breadcrumbs__current {
color: var(--ebstar-color-black);
font-weight: 300;
}
/* --- Blocks: text blocks ----------------------------------------------
3/4 (28:8859), 2 column (28:8891), 2/3 column with headings (28:8908).
Figma gutter between columns is 40px; body text is 16px/30px. */
.ebstar-text__heading {
margin: 0 0 clamp(20px, 3vw, 34px);
font-size: var(--ebstar-h2); /* 38px */
font-weight: var(--ebstar-font-weight-semibold);
}
.ebstar-text__body {
font-size: 16px;
line-height: 1.875; /* Figma 30px on 16px */
}
/* 3/4 Text Block — body runs to 838px of the 1280 container, as a ratio so it
keeps its proportion as the container narrows */
.ebstar-block-text-34 .ebstar-text__body {
max-width: 65.5%;
}
/* 2 Column Text Block — one flow of text split into two equal columns.
40px gutter at the 1440 design width, scaled with the viewport. */
.ebstar-block-text-2col .ebstar-text__body {
max-width: none;
column-count: 2;
column-gap: clamp(24px, 2.78vw, 40px);
}
/* Keep headings and list items from breaking across the column boundary */
.ebstar-block-text-2col .ebstar-text__body > * {
break-inside: avoid-column;
}
.ebstar-block-text-2col .ebstar-text__body > :first-child {
margin-top: 0;
}
@media (max-width: 782px) {
.ebstar-block-text-2col .ebstar-text__body { column-count: 1; }
.ebstar-block-text-34 .ebstar-text__body { max-width: none; }
}
/* Headed column grids */
.ebstar-text__grid {
display: grid;
gap: clamp(24px, 2.78vw, 40px);
}
.ebstar-text__grid--2 { grid-template-columns: repeat(2, 1fr); }
.ebstar-text__grid--3 { grid-template-columns: repeat(3, 1fr); }
.ebstar-text__col-heading {
margin: 0 0 clamp(12px, 1.5vw, 18px);
font-size: var(--ebstar-h3); /* 26px */
font-weight: var(--ebstar-font-weight-semibold);
}
.ebstar-text__col .ebstar-prose {
max-width: none;
}
@media (max-width: 900px) {
.ebstar-text__grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.ebstar-text__grid--2,
.ebstar-text__grid--3 { grid-template-columns: 1fr; }
}
/* =========================================================
Downloads (custom content type)
========================================================= */
.ebstar-download {
max-width: var(--ebstar-post-col);
margin-inline: auto;
}
.ebstar-download__head {
display: flex;
align-items: center;
gap: clamp(16px, 2vw, 24px);
}
.ebstar-download__icon {
flex: 0 0 auto;
width: 64px;
height: 64px;
object-fit: contain;
}
.ebstar-download__heading { min-width: 0; }
.ebstar-download__title {
margin: 0;
font-size: var(--ebstar-h2);
font-weight: var(--ebstar-font-weight-semibold);
line-height: 1.25;
}
.ebstar-download__meta {
margin: 6px 0 0;
font-size: 16px;
letter-spacing: -0.32px;
color: color-mix(in srgb, var(--ebstar-color-cool-grey) 87%, transparent);
}
.ebstar-download__actions { margin-top: clamp(24px, 3vw, 34px); }
.ebstar-download__missing {
margin-top: clamp(24px, 3vw, 34px);
font-size: 16px;
color: var(--ebstar-color-slate);
}
/* =========================================================
"Our Downloads" block — page_content layout "downloads"
Figma 28:8948 — three 400x243 cards, alternating Core Black / Slate
========================================================= */
.ebstar-downloads__title {
margin: 0 0 clamp(28px, 3.2vw, 46px);
font-size: var(--ebstar-h2);
font-weight: var(--ebstar-font-weight-semibold);
line-height: 1.2;
}
.ebstar-downloads__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
/* Every row the same height, not just every card within a row */
grid-auto-rows: 1fr;
gap: clamp(20px, 2.78vw, 40px);
}
.ebstar-download-card {
position: relative;
display: flex;
flex-direction: column;
/* 400x243 in the design, but as a floor rather than a fixed ratio: a
title that wraps to two lines grows the card instead of pushing the
links past the bottom padding. Grid stretch keeps the row level. */
min-height: clamp(180px, 16.875vw, 243px);
/* 30px / 42px / 37px of a 400px-wide card */
padding: 10.5% 7.5% 9.25%;
border-radius: 20px;
color: var(--ebstar-color-bg);
background: var(--ebstar-color-black);
transition: background-color 0.2s ease;
}
/* The design's two card colours are one card's two states, not a per-card
tone: Core Black at rest, Slate on hover (28:8948 — 25:3810/25:3813 black,
25:3812 the hovered card). :focus-within carries the same state to keyboard
users, since the card's only control is the download link inside it. */
.ebstar-download-card:hover,
.ebstar-download-card:focus-within {
background: var(--ebstar-color-slate);
}
.ebstar-download-card__icon {
width: clamp(32px, 3vw, 41px);
height: clamp(32px, 3vw, 41px);
object-fit: contain;
}
.ebstar-download-card__title {
/* Sits with the meta at the foot of the card, under the icon */
margin: auto 0 0;
font-size: var(--ebstar-h3);
font-weight: var(--ebstar-font-weight-semibold);
line-height: 1.2;
color: inherit;
}
.ebstar-download-card__size {
margin: 7px 0 0;
font-size: 16px;
font-weight: var(--ebstar-font-weight-light);
letter-spacing: -0.32px;
color: inherit;
}
.ebstar-download-card__get {
display: inline-flex;
align-items: center;
/* Figma: 22px between the label and the arrow */
gap: 22px;
/* Only as wide as its own content, so the rest of the card stays inert */
align-self: flex-start;
font-size: 16px;
line-height: 1.4;
color: inherit;
text-decoration: none;
/* Padding cancelled by the margin — a bigger hit area, same position */
padding: 8px;
margin: -1px -8px -8px;
}
.ebstar-download-card__get:hover,
.ebstar-download-card__get:focus {
color: inherit;
}
.ebstar-download-card__get:hover .ebstar-download-card__label,
.ebstar-download-card__get:focus-visible .ebstar-download-card__label {
text-decoration: underline;
}
.ebstar-download-card__arrow {
display: block;
width: 18px;
height: 18px;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.ebstar-download-card__get:hover .ebstar-download-card__arrow,
.ebstar-download-card__get:focus-visible .ebstar-download-card__arrow {
transform: translateY(3px);
}
.ebstar-download-card__get:focus-visible {
outline: 2px solid var(--ebstar-color-orange);
outline-offset: 0;
border-radius: 6px;
}
@media (max-width: 900px) {
.ebstar-downloads__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.ebstar-downloads__grid { grid-template-columns: 1fr; }
.ebstar-download-card {
min-height: 0;
padding: 42px 30px 37px;
}
}
@media (prefers-reduced-motion: reduce) {
.ebstar-download-card__arrow,
.ebstar-download-card { transition: none; }
}
/* =========================================================
Card Slider — page_content layouts "services_slider" and "industries_slider"
Figma 28:9598 — the card grid's cards on one sideways-scrolling row,
with the listing link and two 46px arrows above them on the right.
The __services-slider names predate the second use; both layouts share
these rules, differing only in the icon sizing they inherit from
.ebstar-block-services / .ebstar-block-industries.
========================================================= */
.ebstar-services-slider__head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px 24px;
margin-bottom: 59px; /* Figma: head to cards */
}
.ebstar-services-slider__heading {
margin: 0;
font-size: var(--ebstar-h2); /* Figma 38px */
font-weight: var(--ebstar-font-weight-semibold);
line-height: 1.2;
}
.ebstar-services-slider__tools {
display: flex;
align-items: center;
gap: clamp(20px, 3vw, 48px);
}
.ebstar-services-slider__nav {
display: flex;
align-items: center;
gap: 17px; /* Figma: 1251 and 1314 */
}
/* Scoped past the global button rule, which would give these the CTA fill */
.ebstar-services-slider .ebstar-services-slider__btn,
.ebstar-services-slider__nav .ebstar-services-slider__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px; /* Figma, as the pagination */
height: 46px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--ebstar-color-light-grey);
box-shadow: none;
color: var(--ebstar-color-black);
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
/* Darkens to Slate with a white arrow — the same darken-on-hover the download
cards use. It previously went to white, which against the Light Grey resting
circle was barely a change at all. */
.ebstar-services-slider__nav .ebstar-services-slider__btn:hover:not([disabled]),
.ebstar-services-slider__nav .ebstar-services-slider__btn:focus-visible:not([disabled]) {
background: var(--ebstar-color-slate);
color: var(--ebstar-color-white);
box-shadow: none;
transform: none;
}
.ebstar-services-slider__nav .ebstar-services-slider__btn:focus-visible {
outline: 2px solid var(--ebstar-color-orange);
outline-offset: 2px;
}
.ebstar-services-slider__btn svg { display: block; width: 18px; height: 18px; }
.ebstar-services-slider__btn--prev svg { transform: rotate(180deg); }
/* A disabled button still matches :hover in CSS, so the global CTA button
hover was reaching it — lifting it 2px, adding the glow and whitening the
arrow on a control that cannot be used. Refused here rather than in a
:hover rule: at (0,3,0) this outranks that (0,2,1) selector in every state. */
.ebstar-services-slider__nav .ebstar-services-slider__btn[disabled] {
opacity: 0.35;
cursor: default;
background: var(--ebstar-color-light-grey);
color: var(--ebstar-color-black);
box-shadow: none;
transform: none;
}
.ebstar-services-slider__track {
/* Gap is shared with the slide width below, so a slide is an exact third */
--ebstar-slider-gap: clamp(20px, 2.78vw, 40px);
--ebstar-slider-visible: 3; /* Figma: three at a time */
display: flex;
gap: var(--ebstar-slider-gap);
margin: 0;
padding: 0;
list-style: none;
/* A plain scroll container, so with JavaScript off it is still a complete,
swipeable list rather than a broken slider. */
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
}
.ebstar-services-slider__track::-webkit-scrollbar { display: none; }
.ebstar-services-slider__track:focus-visible {
outline: 2px solid var(--ebstar-color-orange);
outline-offset: 4px;
}
.ebstar-services-slider__slide {
flex: 0 0 calc(
(100% - (var(--ebstar-slider-visible) - 1) * var(--ebstar-slider-gap))
/ var(--ebstar-slider-visible)
);
scroll-snap-align: start;
}
@media (max-width: 900px) {
.ebstar-services-slider__track { --ebstar-slider-visible: 2; }
.ebstar-services-slider__head { margin-bottom: clamp(28px, 5vw, 59px); }
}
@media (max-width: 560px) {
.ebstar-services-slider__track { --ebstar-slider-visible: 1; }
}
@media (prefers-reduced-motion: reduce) {
.ebstar-services-slider__track { scroll-behavior: auto; }
.ebstar-services-slider__nav .ebstar-services-slider__btn { transition: none; }
}
/* =========================================================
Team Slider — page_content layout "team_slider"
Staff photos three at a time, name and job role over a dark scrim; the
description is revealed over a gradient on hover.
========================================================= */
.ebstar-team-slider__head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px 24px;
margin-bottom: clamp(28px, 3.4vw, 48px);
}
.ebstar-team-slider__heading {
margin: 0;
font-size: var(--ebstar-h2);
font-weight: var(--ebstar-font-weight-semibold);
line-height: 1.2;
}
.ebstar-team-slider__nav {
display: flex;
align-items: center;
gap: 17px;
}
/* Scoped past the global button rule, which would give these the CTA fill */
.ebstar-team-slider__nav .ebstar-team-slider__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--ebstar-color-light-grey);
box-shadow: none;
color: var(--ebstar-color-black);
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
/* Same darken-to-Slate as the services slider — this button was copied from it
and inherited the same near-invisible white hover. */
.ebstar-team-slider__nav .ebstar-team-slider__btn:hover:not([disabled]),
.ebstar-team-slider__nav .ebstar-team-slider__btn:focus-visible:not([disabled]) {
background: var(--ebstar-color-slate);
color: var(--ebstar-color-white);
box-shadow: none;
transform: none;
}
.ebstar-team-slider__nav .ebstar-team-slider__btn:focus-visible {
outline: 2px solid var(--ebstar-color-orange);
outline-offset: 2px;
}
/* Same refusal as the services slider — see the note there. */
.ebstar-team-slider__nav .ebstar-team-slider__btn[disabled] {
opacity: 0.35;
cursor: default;
background: var(--ebstar-color-light-grey);
color: var(--ebstar-color-black);
box-shadow: none;
transform: none;
}
.ebstar-team-slider__btn svg { display: block; width: 18px; height: 18px; }
.ebstar-team-slider__btn--prev svg { transform: rotate(180deg); }
.ebstar-team-slider__track {
/* Gap is shared with the slide width below, so a slide is an exact third */
--ebstar-slider-gap: clamp(20px, 2.78vw, 40px);
--ebstar-slider-visible: 3;
display: flex;
gap: var(--ebstar-slider-gap);
margin: 0;
padding: 0;
list-style: none;
/* A plain scroll container, so with JavaScript off it is still a complete,
swipeable list rather than a broken slider. */
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
}
.ebstar-team-slider__track::-webkit-scrollbar { display: none; }
.ebstar-team-slider__track:focus-visible {
outline: 2px solid var(--ebstar-color-orange);
outline-offset: 4px;
}
.ebstar-team-slider__slide {
flex: 0 0 calc(
(100% - (var(--ebstar-slider-visible) - 1) * var(--ebstar-slider-gap))
/ var(--ebstar-slider-visible)
);
scroll-snap-align: start;
margin: 0;
padding: 0;
list-style: none;
}
/* --- the card ---------------------------------------------------------- */
.ebstar-team-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end; /* name sits at the foot until hover */
aspect-ratio: 286 / 296; /* from the reference */
overflow: hidden; /* keeps the photo inside the radius */
padding: 26px 24px;
border-radius: 20px;
color: var(--ebstar-color-white);
}
.ebstar-team-card:focus-visible {
outline: 2px solid var(--ebstar-color-orange);
outline-offset: 3px;
}
.ebstar-team-card__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Resting scrim — enough at the foot to carry the name, barely there above */
.ebstar-team-card::before,
.ebstar-team-card::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
.ebstar-team-card::before {
background: linear-gradient(to top,
rgba(0, 0, 0, 0.72) 0%,
rgba(0, 0, 0, 0.28) 46%,
rgba(0, 0, 0, 0.18) 100%);
}
/* Hover state — the brand gradient showing through at the foot, going almost
solid upward so the description reads. Kept as a second layer at opacity 0
rather than swapping ::before's background, since background-image itself
cannot transition. */
.ebstar-team-card::after {
background:
linear-gradient(to top,
rgba(12, 12, 12, 0.25) 0%,
rgba(12, 12, 12, 0.95) 62%,
rgba(12, 12, 12, 0.97) 100%),
var(--ebstar-gradient-primary);
opacity: 0;
transition: opacity 0.3s ease;
}
.ebstar-team-card:hover::after,
.ebstar-team-card:focus-visible::after,
.ebstar-team-card:focus-within::after {
opacity: 1;
}
.ebstar-team-card__body {
position: relative; /* above both scrims */
z-index: 1;
}
.ebstar-team-card__name {
margin: 0;
font-size: 20px;
font-weight: var(--ebstar-font-weight-semibold);
line-height: 1.25;
color: inherit;
}
.ebstar-team-card__role {
margin: 4px 0 0;
font-size: 13px; /* "much smaller" than the name */
font-weight: var(--ebstar-font-weight-regular);
line-height: 1.4;
color: rgba(255, 255, 255, 0.82);
}
/* Clipped rather than display:none, so it stays in the accessibility tree and
is announced whether or not the card is hovered. */
.ebstar-team-card__text {
margin: 0;
max-height: 0;
overflow: hidden;
font-size: 14px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.92);
opacity: 0;
transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.3s ease;
}
.ebstar-team-card__text > :first-child { margin-top: 0; }
.ebstar-team-card__text > :last-child { margin-bottom: 0; }
.ebstar-team-card:hover .ebstar-team-card__text,
.ebstar-team-card:focus-visible .ebstar-team-card__text,
.ebstar-team-card:focus-within .ebstar-team-card__text {
max-height: 12em;
margin-top: 16px;
opacity: 1;
}
@media (max-width: 900px) {
.ebstar-team-slider__track { --ebstar-slider-visible: 2; }
}
@media (max-width: 560px) {
.ebstar-team-slider__track { --ebstar-slider-visible: 1; }
}
/* No hover on touch, so show the description outright */
@media (hover: none) {
.ebstar-team-card::after { opacity: 1; }
.ebstar-team-card__text { max-height: 12em; margin-top: 16px; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.ebstar-team-slider__track { scroll-behavior: auto; }
.ebstar-team-slider__nav .ebstar-team-slider__btn,
.ebstar-team-card::after,
.ebstar-team-card__text { transition: none; }
}
/* =========================================================
Card grid — page_content layouts "industries_grid" and "services_grid"
Figma 357:2213 (Industries) and 357:1991 (Our Services): the same
component — 400x416 cards, r20, icon / title / excerpt / link
========================================================= */
.ebstar-block-industries { --ebstar-cardgrid-icon: 36px; --ebstar-cardgrid-icon-top: 46px; }
.ebstar-block-services { --ebstar-cardgrid-icon: 45px; --ebstar-cardgrid-icon-top: 40px; }
.ebstar-cardgrid__heading {
margin: 0 0 clamp(30px, 3.5vw, 50px); /* Figma: heading 72.5, cards 139/153 */
font-size: var(--ebstar-h2); /* Figma 38px */
font-weight: var(--ebstar-font-weight-semibold);
line-height: 1.2;
}
.ebstar-cardgrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-rows: 1fr; /* every row the same height */
gap: 35px clamp(20px, 2.78vw, 40px); /* Figma row gap 35 */
margin: 0;
padding: 0;
list-style: none;
}
.ebstar-cardgrid__item {
margin: 0;
padding: 0;
list-style: none;
}
.ebstar-cardgrid__card {
display: flex;
flex-direction: column;
height: 100%;
/* 400x416 in the design, as a floor so a longer excerpt grows the card */
min-height: clamp(320px, 28.9vw, 416px);
padding: var(--ebstar-cardgrid-icon-top, 44px) 34px 34px;
border-radius: 20px; /* Figma */
background: var(--ebstar-color-black);
color: var(--ebstar-color-bg);
text-decoration: none;
transition: background-color 0.25s ease;
}
/* Figma shows the hover card in Slate with the link revealed.
text-decoration is restated because the whole card is one : the global
a:hover/a:focus underline would otherwise be drawn through every descendant,
striking the title and excerpt as well. A descendant cannot cancel an
ancestor's decoration, so it has to be refused here and applied to the foot
link on its own (below). */
.ebstar-cardgrid__card:hover,
.ebstar-cardgrid__card:focus,
.ebstar-cardgrid__card:focus-visible {
background: var(--ebstar-color-slate);
color: var(--ebstar-color-bg);
text-decoration: none;
}
.ebstar-cardgrid__card:focus-visible {
outline: 2px solid var(--ebstar-color-orange);
outline-offset: 3px;
}
.ebstar-cardgrid__icon {
/* Icons are content and vary in shape, so cap the height and let the width
follow — Figma runs 36x34 through 50x38 across the two grids. */
height: var(--ebstar-cardgrid-icon, 40px);
width: auto;
max-width: 64px;
object-fit: contain;
object-position: left center;
}
.ebstar-cardgrid__title {
margin: 30px 0 0;
font-size: var(--ebstar-h3); /* Figma 26px */
font-weight: var(--ebstar-font-weight-semibold);
line-height: 1.2;
color: inherit;
}
.ebstar-cardgrid__excerpt {
margin: 22px 0 0;
font-size: 16px;
line-height: 1.5;
color: inherit;
}
.ebstar-cardgrid__more {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: auto; /* sits at the foot of the card */
padding-top: 22px;
font-size: 16px;
line-height: 1.4;
color: inherit;
/* Revealed on hover, as in the design — but always there for keyboard and
screen-reader users, since the whole card is the link. */
opacity: 0;
transition: opacity 0.25s ease;
}
.ebstar-cardgrid__card:hover .ebstar-cardgrid__more,
.ebstar-cardgrid__card:focus-visible .ebstar-cardgrid__more {
opacity: 1;
text-decoration: underline;
}
@media (max-width: 900px) {
.ebstar-cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.ebstar-cardgrid { grid-template-columns: 1fr; gap: 20px; }
.ebstar-cardgrid__card { min-height: 0; padding: 34px 28px 28px; }
}
/* Touch screens have no hover, so keep the link visible there */
@media (hover: none) {
.ebstar-cardgrid__more { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.ebstar-cardgrid__card,
.ebstar-cardgrid__more { transition: none; }
}
/* =========================================================
Full Image — page_content layout "full_image"
========================================================= */
.ebstar-full-image {
/* The centred 1440 channel, edge to edge — no container gutters, and
anchored to the channel rather than the viewport so it stays put on
screens wider than 1440. */
width: 100%;
max-width: var(--ebstar-container-max);
margin-inline: auto;
}
.ebstar-full-image__img {
display: block;
width: 100%;
height: auto;
border-radius: 20px;
}
/* =========================================================
Logo Cloud — page_content layout "logo_cloud"
Figma 28:8822 — ruled 200px strip, logos stepping right to left
========================================================= */
/* No padding-block reset here: at one class it tied with the .ebstar-pt-*
classes and won on source order, so this was the one layout whose Style-tab
padding sliders did nothing. Set both to 0 in the editor for the design's
flush strip. */
.ebstar-logo-cloud {
/* The two full-width rules, 100px apart in the design */
border-top: 1px solid var(--ebstar-color-light-grey);
border-bottom: 1px solid var(--ebstar-color-light-grey);
}
.ebstar-logo-cloud__inner {
display: flex;
align-items: center;
gap: 0;
min-height: 100px; /* Figma */
}
.ebstar-logo-cloud__label {
display: flex;
align-items: center;
gap: 32px; /* Figma: motif 80, text 163 */
/* Figma: the vertical rule sits at x 469 — 389px in from the container
edge — so fix the label's width rather than letting the title set it. */
flex: 0 0 clamp(240px, 27vw, 389px);
padding-right: 24px;
border-right: 1px solid var(--ebstar-color-light-grey);
/* Figma: the keyline runs 52px, centred — about the height of the logos,
not the full height of the strip. */
align-self: center;
min-height: 52px;
}
.ebstar-logo-cloud__motif {
flex: 0 0 auto;
width: 51px; /* Figma */
height: 51px;
align-self: center;
}
.ebstar-logo-cloud__title {
margin: 0;
align-self: center;
font-size: 20px; /* Figma */
font-weight: var(--ebstar-font-weight-regular);
line-height: 1.3;
color: var(--ebstar-color-black);
}
.ebstar-logo-cloud__strip {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
/* Lets the cells size off the strip, so a whole number of logos is always
in view — no half-logo peeking past the edge. */
container-type: inline-size;
/* Fade the logos out as they reach the edges of the strip */
mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.ebstar-logo-cloud__track {
/* How many logos are in view at once — never more than there are */
--ebstar-logo-visible: min(var(--ebstar-logo-max, 4), 4);
display: flex;
align-items: center;
width: max-content;
margin: 0;
padding: 0;
list-style: none;
}
/* One discrete jump per logo, then a seamless restart: the track holds
--ebstar-logo-copies identical sets, and one animation cycle shifts it by
exactly one set. steps() is what makes it hop rather than glide. */
.ebstar-logo-cloud__track.is-stepping {
animation: ebstar-logo-step var(--ebstar-logo-duration, 10s)
steps(var(--ebstar-logo-count, 5)) infinite;
}
.ebstar-logo-cloud__track.is-stepping:hover {
animation-play-state: paused;
}
@keyframes ebstar-logo-step {
to { transform: translateX(calc(-100% / var(--ebstar-logo-copies, 2))); }
}
.ebstar-logo-cloud__item {
display: flex;
align-items: center;
justify-content: center;
/* Equal cells keep every step the same distance, and dividing the strip
exactly means the window slides one whole logo at a time */
flex: 0 0 auto;
width: calc(100cqw / var(--ebstar-logo-visible, 4));
padding: 0 clamp(12px, 1.5vw, 20px);
margin: 0;
list-style: none;
}
.ebstar-logo-cloud__item img {
max-width: 100%;
max-height: 74px; /* Figma tallest logo */
width: auto;
height: auto;
object-fit: contain;
}
.ebstar-logo-cloud__item a {
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 1180px) {
.ebstar-logo-cloud__track { --ebstar-logo-visible: min(var(--ebstar-logo-max, 4), 3); }
}
@media (max-width: 620px) {
.ebstar-logo-cloud__track { --ebstar-logo-visible: min(var(--ebstar-logo-max, 4), 2); }
}
@media (max-width: 860px) {
.ebstar-logo-cloud__inner {
flex-direction: column;
align-items: stretch;
gap: 20px;
padding-block: 24px;
}
.ebstar-logo-cloud__label {
flex: 0 0 auto;
padding-right: 0;
border-right: 0;
justify-content: center;
gap: 16px;
}
}
@media (prefers-reduced-motion: reduce) {
.ebstar-logo-cloud__track.is-stepping { animation: none; }
}
/* =========================================================
Stat Block — page_content layout "stats"
Figma 28:9077 — gradient band, 4 metrics divided by 1px rules
========================================================= */
.ebstar-block-stats {
position: relative;
color: var(--ebstar-section-text, var(--ebstar-color-bg));
}
/* The designed background, unless the Style tab picks its own colour.
Layers top-down: two black scrims, the overlay-blended texture, gradient. */
.ebstar-block-stats:not(.ebstar-has-bg) {
background-image:
linear-gradient(198.93deg, rgb(0, 0, 0) 25.93%, rgba(0, 0, 0, 0.1) 81.72%),
linear-gradient(227.28deg, rgb(0, 0, 0) 33.86%, rgba(0, 0, 0, 0) 68.67%),
url("assets/images/stat-block-texture.webp"),
linear-gradient(to left, #ff7633 0%, #e1384d 50%, #ac77e9 100%);
background-size: cover, cover, 107.88% 107.88%, cover;
background-position: center, center, -1.5% -3.89%;
background-repeat: no-repeat;
background-blend-mode: normal, normal, overlay, normal;
}
.ebstar-stats__title {
margin: 0;
max-width: 48.4%; /* Figma: 620 of the 1280 container */
font-size: var(--ebstar-h2);
font-weight: var(--ebstar-font-weight-semibold);
line-height: 1.16; /* Figma: 88px over two lines */
color: inherit;
}
.ebstar-stats__intro {
margin-top: 32px; /* Figma */
max-width: 79.8%; /* Figma: 1021 of 1280 */
font-size: 16px;
line-height: 1.5;
color: inherit;
}
.ebstar-stats__intro > *:first-child { margin-top: 0; }
.ebstar-stats__intro > *:last-child { margin-bottom: 0; }
.ebstar-stats__grid {
display: grid;
/* Follows the repeater, so 2 or 3 stats lay out on their own */
grid-template-columns: repeat(var(--ebstar-stats-count, 4), minmax(0, 1fr));
gap: 0;
margin: 63px 0 0; /* Figma: intro bottom to rule top */
}
.ebstar-stats__item {
/* The 1px rule the design draws at the head of each column. Figma trims its
text boxes to the cap height, so the padding here is set to land the caps
where the design does: rule top to metric cap 11px, label baseline to
rule bottom 11px, giving the designed 100px rule. */
border-left: 1px solid var(--ebstar-color-bg);
padding: 1px 16px 7px 42px; /* Figma: 42px in from the rule */
min-width: 0;
}
.ebstar-stats__metric {
margin: 0;
font-size: var(--ebstar-h1); /* Figma: 66px */
font-weight: var(--ebstar-font-weight-medium); /* Figma: Poppins Medium */
line-height: 0.985; /* Figma: 65px */
color: inherit;
}
.ebstar-stats__qualifier {
margin: 8px 0 0; /* Figma: 21px baseline to cap */
font-size: 16px;
font-weight: var(--ebstar-font-weight-regular);
line-height: 1.2;
color: inherit;
}
.ebstar-stats__links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 35px; /* Figma: button edge to text link */
margin-top: 43px; /* Figma: rule bottom to buttons */
}
/* The section colour is light-on-dark here, as on the heroes */
.ebstar-block-stats .ebstar-textlink {
color: var(--ebstar-section-text, var(--ebstar-color-bg));
}
@media (max-width: 1024px) {
.ebstar-stats__title { max-width: 70%; }
.ebstar-stats__intro { max-width: 100%; }
.ebstar-stats__item { padding-left: clamp(16px, 3vw, 42px); }
}
@media (max-width: 782px) {
.ebstar-stats__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px 0;
margin-top: clamp(36px, 6vw, 63px);
}
.ebstar-stats__title { max-width: 100%; }
.ebstar-stats__links { margin-top: clamp(28px, 5vw, 43px); }
}
@media (max-width: 420px) {
.ebstar-stats__grid { grid-template-columns: 1fr; }
}
/* =========================================================
Testimonial Slider — page_content layout "testimonials"
Figma 28:9300 — centred quote over black-into-brand-gradient
========================================================= */
.ebstar-block-testimonials {
position: relative;
color: var(--ebstar-section-text, var(--ebstar-color-bg));
}
/* The designed background, unless the Style tab picks its own colour */
.ebstar-block-testimonials:not(.ebstar-has-bg) {
background-image:
linear-gradient(187.79deg, rgb(0, 0, 0) 49.51%, rgba(0, 0, 0, 0) 100.12%),
linear-gradient(to left, #ff7633 0%, #e1384d 50%, #ac77e9 100%);
background-size: cover, cover;
background-repeat: no-repeat, no-repeat;
}
.ebstar-testimonials {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.ebstar-testimonials__viewport {
display: grid;
width: 100%;
/* 1096 of the 1280 container in the design */
max-width: 85.6%;
}
.ebstar-testimonials__slide {
/* Every slide shares one cell, so the block is as tall as the longest
quote and never jumps as the slider advances. */
grid-area: 1 / 1;
/* That shared height is why this centres: a slide stretches to the cell,
so a quote shorter than the longest one would otherwise sit against the
top with all the slack below it. */
display: flex;
flex-direction: column;
justify-content: center;
margin: 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}
/* The inner keeps quote + caption semantics without adding a box,
so the blockquote and caption stay flex items of the slide. */
.ebstar-testimonials__figure {
display: contents;
margin: 0;
}
.ebstar-testimonials__slide.is-current {
opacity: 1;
visibility: visible;
transition: opacity 0.45s ease, visibility 0s linear 0s;
}
.ebstar-testimonials__quote {
margin: 0;
padding: 0;
border: 0;
font-size: var(--ebstar-h2);
font-weight: var(--ebstar-font-weight-semibold);
line-height: 1.4; /* Figma: 320px over 6 lines */
color: inherit;
}
.ebstar-testimonials__quote > *:first-child { margin-top: 0; }
.ebstar-testimonials__quote > *:last-child { margin-bottom: 0; }
/* Curly quotes come from the design, not the editor's copy */
.ebstar-testimonials__quote > *:first-child::before { content: "\201C"; }
.ebstar-testimonials__quote > *:last-child::after { content: "\201D"; }
/* The run the editor wraps in */
.testimonial-highlight {
color: var(--ebstar-color-orange);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
.testimonial-highlight {
background-image: var(--ebstar-gradient-primary);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
}
.ebstar-testimonials__source {
margin-top: 35px; /* Figma */
font-size: 16px;
font-weight: var(--ebstar-font-weight-regular);
line-height: 1.2;
color: inherit;
}
.ebstar-testimonials__name,
.ebstar-testimonials__role {
display: block;
}
.ebstar-testimonials__dots {
display: flex;
align-items: center;
justify-content: center;
gap: 3px; /* Figma pitch: 24.7px */
margin-top: 68px; /* Figma */
}
/* Scoped past the global button rule, which would give these the CTA fill */
.ebstar-testimonials .ebstar-testimonials__dot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
padding: 0;
border: 0;
border-radius: var(--ebstar-radius-pill);
background: none;
box-shadow: none;
cursor: pointer;
}
.ebstar-testimonials .ebstar-testimonials__dot::before {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
background: color-mix(in srgb, var(--ebstar-color-light-grey) 60%, transparent);
transition: background-color 0.25s ease;
}
.ebstar-testimonials .ebstar-testimonials__dot:hover::before {
background: color-mix(in srgb, var(--ebstar-color-bg) 80%, transparent);
}
.ebstar-testimonials .ebstar-testimonials__dot.is-current::before {
background: var(--ebstar-color-bg);
}
.ebstar-testimonials .ebstar-testimonials__dot:hover,
.ebstar-testimonials .ebstar-testimonials__dot:focus {
background: none;
box-shadow: none;
transform: none;
}
.ebstar-testimonials .ebstar-testimonials__dot:focus-visible {
outline: 2px solid var(--ebstar-color-orange);
outline-offset: 0;
}
@media (max-width: 900px) {
.ebstar-testimonials__viewport { max-width: 100%; }
.ebstar-testimonials__source { margin-top: clamp(24px, 4vw, 35px); }
.ebstar-testimonials__dots { margin-top: clamp(36px, 6vw, 68px); }
}
@media (prefers-reduced-motion: reduce) {
.ebstar-testimonials__slide,
.ebstar-testimonials__slide.is-current { transition: none; }
.ebstar-testimonials .ebstar-testimonials__dot::before { transition: none; }
}
/* =========================================================
Gallery block — page_content layout "gallery"
Figma 28:9566 — three 400x416 tiles per row, rounded 20px
========================================================= */
.ebstar-gallery__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(20px, 2.78vw, 40px);
margin: 0;
padding: 0;
list-style: none;
}
.ebstar-gallery__item {
margin: 0;
list-style: none;
}
.ebstar-gallery__link {
display: block;
position: relative;
overflow: hidden;
border-radius: 20px;
/* Figma tile proportion; the fill shows while the image loads */
aspect-ratio: 400 / 416;
background: var(--ebstar-color-black);
}
.ebstar-gallery__item:nth-child(even) .ebstar-gallery__link {
background: var(--ebstar-color-slate);
}
.ebstar-gallery__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.ebstar-gallery__link:hover .ebstar-gallery__img,
.ebstar-gallery__link:focus-visible .ebstar-gallery__img {
transform: scale(1.04);
}
.ebstar-gallery__link:focus-visible {
outline: 2px solid var(--ebstar-color-orange);
outline-offset: 3px;
}
@media (max-width: 900px) {
.ebstar-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.ebstar-gallery__grid { grid-template-columns: 1fr; }
}
/* --- Lightbox (assets/js/ebstar-lightbox.js) -------------------------- */
html.ebstar-lightbox-open { overflow: hidden; }
.ebstar-lightbox {
/* The