/*
Theme Name: Stratus — Neve Child
Theme URI: https://cms.stratusbusiness.co
Description: Child theme for Stratus Business. Houses brand-level styling on top of Neve + Elementor.
Author: Stratus Business
Template: neve
Version: 0.12.0
Text Domain: neve-stratus
*/
/* ---- Brand tokens (mirror Elementor kit; single source of truth in CSS) ---- */
:root {
--sb-primary: #1B3B44;
--sb-secondary: #2E5560;
--sb-ink: #0E1A1D;
--sb-text: #2E3A40;
--sb-muted: #5F6E73;
--sb-cream: #FBF8EF;
--sb-rule: #E7EEF0;
--sb-accent: #FAE293;
--sb-teal-mid: #5BA8B5;
}
/* ---- #1 Remove global H2 uppercase; introduce .sb-kicker utility ----
* The Elementor kit applies text-transform: uppercase to every globally,
* which forces a single shouty treatment onto headings of very different roles
* (kicker, section title, card title). Reset that here, then opt back into the
* uppercase look deliberately via a .sb-kicker class added in a heading
* widget's "CSS Classes" field for the few short labels where caps work.
*/
.elementor-widget-heading h2.elementor-heading-title {
text-transform: none;
}
.elementor-widget-heading.sb-kicker .elementor-heading-title {
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.8125rem;
font-weight: 600;
color: var(--sb-secondary);
line-height: 1.4;
}
/* ---- #2 Hero zone layout primitive ----
* Targets the .sb-hero-video utility class (added via Elementor's "CSS
* Classes" field on each surface's video container). All 5 hero surfaces
* — homepage + 3 geo pages + dormant template — inherit identically.
*
* What's here is a layout primitive: viewport-relative min-height + fluid
* vertical padding for the hero zone. That's design-system territory:
* Site Settings can't express a clamp on a specific zone; CSS owns it.
*
* What's deliberately NOT here: H1/H2 sizing, color, tracking, max-width.
* Those are heading typography — owned by Elementor Site Settings (sitewide
* defaults) and per-widget Elementor settings (per-page composition). See
* "Where authoring decisions live" in CLAUDE.md.
*
* (Earlier versions of this block carried H1/H2 sizing rules scoped to the
* empty video container. They never matched, never shipped, and were
* removed in Pass 9. The actual hero typography lives in Elementor.)
*/
.sb-hero-video {
--min-height: clamp(560px, 80vh, 760px);
min-height: clamp(560px, 80vh, 760px);
padding-block: clamp(80px, 12vh, 140px);
}
/* ---- #3 Body text sizing ----
* Sitewide body-text typography spec on text-editor widgets — fluid font-size
* + line-height for consistent rhythm. This is design-system territory:
* typography defaults that apply everywhere.
*
* Body text *width* used to live here too (`max-width: 65ch` on p/ul/ol) but
* was removed in v0.11.1 — width is per-widget authoring (Elementor
* Advanced → Width → Custom), not a sitewide CSS override. The sitewide rule
* was overruling per-page composition decisions on the geo pages' centered
* Section 2 intros:
blocks shrunk to 65ch flush-left while
blocks
* stayed full-width, breaking the centered intent the author had set in
* Elementor's WYSIWYG. See "Where authoring decisions live" in CLAUDE.md.
*
* Migration path: homepage widgets b914a88 (Section D body text) and 47334a9
* (Section F About Me bio) carry the equivalent setting now via per-widget
* `_element_width: 'initial'` + `_element_custom_width: { unit: 'custom',
* size: '65ch' }`. Their rendering is preserved without the sitewide rule.
*
* (Color was also originally proposed in this block but withdrawn — the
* homepage's text-editor widgets are intentionally cream-on-dark via per-
* widget __globals__ bindings, and a global color rule would dark-on-dark
* them. Color stays in authoring/Site Settings.)
*/
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
font-size: clamp(1.0625rem, 1.5vw, 1.125rem);
line-height: 1.6;
}
.sb-muted,
.sb-muted p,
.sb-muted li {
color: var(--sb-muted);
}
/* ---- #4 Section rhythm ----
* Replace Elementor's mixed 20-25px top/bottom padding on each section with a
* fluid clamp giving consistent vertical breathing room. Horizontal padding
* (Elementor's --padding-left/right) is left alone so content alignment doesn't
* shift. Inter-section spacer widgets are hidden — their gap is now expressed
* via the section padding itself. Backgrounds, overlays, hero containers, and
* the parallax+85% overlay on parent 4ffa6c6 are not touched per the dark
* commitment lock.
*
* Pass 9 extension: same rhythm applies across all 5 surfaces (homepage + 3
* geo pages + dormant template). Selector lists below are grouped per page.
* New geo pages add their 6 inner sections + 1 resources section to the
* padding list, and 5 inter-section spacers to the display:none list.
*/
/* Homepage 5550 — sections A–F */
body.elementor-page .elementor-element.elementor-element-1a83381,
body.elementor-page .elementor-element.elementor-element-232c501,
body.elementor-page .elementor-element.elementor-element-6393918,
body.elementor-page .elementor-element.elementor-element-ace0550,
body.elementor-page .elementor-element.elementor-element-130b88d,
body.elementor-page .elementor-element.elementor-element-b0f5a18,
/* Geo: Wolverhampton 7726 — 6 inner sections + 1 resources */
body.elementor-page .elementor-element.elementor-element-25e424ae,
body.elementor-page .elementor-element.elementor-element-678e5f88,
body.elementor-page .elementor-element.elementor-element-0709a0c,
body.elementor-page .elementor-element.elementor-element-2fda4164,
body.elementor-page .elementor-element.elementor-element-4392dc2b,
body.elementor-page .elementor-element.elementor-element-6a4a1ea6,
body.elementor-page .elementor-element.elementor-element-3ef5df4e,
/* Geo: Dubai 7746 — 6 inner sections + 1 resources */
body.elementor-page .elementor-element.elementor-element-4bd457fc,
body.elementor-page .elementor-element.elementor-element-6d967531,
body.elementor-page .elementor-element.elementor-element-3d50c50d,
body.elementor-page .elementor-element.elementor-element-1c753ae3,
body.elementor-page .elementor-element.elementor-element-5d81bc4c,
body.elementor-page .elementor-element.elementor-element-556b373f,
body.elementor-page .elementor-element.elementor-element-6be6b87e,
/* Geo: Hong Kong 7752 — 6 inner sections + 1 resources */
body.elementor-page .elementor-element.elementor-element-40fc4653,
body.elementor-page .elementor-element.elementor-element-66955b04,
body.elementor-page .elementor-element.elementor-element-2ea667f7,
body.elementor-page .elementor-element.elementor-element-28e817ce,
body.elementor-page .elementor-element.elementor-element-26733594,
body.elementor-page .elementor-element.elementor-element-4544f654,
body.elementor-page .elementor-element.elementor-element-637a43be,
/* Template 7743 — 6 inner sections + 1 resources */
body.elementor-page .elementor-element.elementor-element-39650e1,
body.elementor-page .elementor-element.elementor-element-30d6a888,
body.elementor-page .elementor-element.elementor-element-3c070c6c,
body.elementor-page .elementor-element.elementor-element-2049aa08,
body.elementor-page .elementor-element.elementor-element-e7ff21c,
body.elementor-page .elementor-element.elementor-element-7bc458db,
body.elementor-page .elementor-element.elementor-element-fda444b {
--padding-top: clamp(48px, 7vh + 1vw, 128px);
--padding-bottom: clamp(48px, 7vh + 1vw, 128px);
}
/* Inter-section spacers hidden across all 5 surfaces */
.elementor-element.elementor-element-0cee7d9,
.elementor-element.elementor-element-62052e3,
.elementor-element.elementor-element-6400bd3,
.elementor-element.elementor-element-c34016b,
/* Wolverhampton 7726 — 5 spacers */
.elementor-element.elementor-element-472c731e,
.elementor-element.elementor-element-b7fcf41,
.elementor-element.elementor-element-9c7405f,
.elementor-element.elementor-element-bae6855,
.elementor-element.elementor-element-74aef11f,
/* Dubai 7746 — 5 spacers */
.elementor-element.elementor-element-28595f59,
.elementor-element.elementor-element-19886f97,
.elementor-element.elementor-element-b48e515,
.elementor-element.elementor-element-70191941,
.elementor-element.elementor-element-4b8fb870,
/* Hong Kong 7752 — 5 spacers */
.elementor-element.elementor-element-7b9e0605,
.elementor-element.elementor-element-124a897c,
.elementor-element.elementor-element-1a3f0c64,
.elementor-element.elementor-element-4f106341,
.elementor-element.elementor-element-6febeacd,
/* Template 7743 — 5 spacers */
.elementor-element.elementor-element-1d22093b,
.elementor-element.elementor-element-53eef86e,
.elementor-element.elementor-element-2fab1e1,
.elementor-element.elementor-element-39625cc0,
.elementor-element.elementor-element-14641be8 {
display: none;
}
/* ---- #5 Resource cards (carousel in section F) ----
* Card framing on top of the existing transparent loop-item template (post 7076).
* Cards get a secondary-teal background lift, internal padding, hover with
* subtle accent-teal border + title color shift to yellow. Carousel chrome
* (arrows + dots) gets brand-color treatment. Mobile flips to vertical via
* flex-direction; we override Elementor's --width var to make columns full-
* width on phone. Dark commitment preserved throughout.
*/
.elementor-global-7418 .e-loop-item {
background-color: var(--e-global-color-nvlightbg);
border-radius: 12px;
padding: 24px;
border: 1px solid transparent;
transition: transform 280ms ease, border-color 280ms ease;
}
.elementor-global-7418 .e-loop-item:hover {
transform: translateY(-3px);
border-color: rgba(91, 168, 181, 0.4);
}
.elementor-global-7418 .elementor-widget-theme-post-featured-image img {
aspect-ratio: 16 / 9;
object-fit: cover;
width: 100%;
height: auto;
display: block;
border-radius: 8px;
}
/* Per-card image focal-point overrides. The Assessment image (post 7124) has
* its key subject — the value-prop heading — at the top of the source; default
* center crop removed the heading top. Anchor to top so heading + features +
* most of CTA button stay visible. */
.elementor-global-7418 .e-loop-item-7124 .elementor-widget-theme-post-featured-image img {
object-position: center top;
}
.elementor-global-7418 .e-loop-item .elementor-widget-theme-post-title .elementor-heading-title,
.elementor-global-7418 .e-loop-item .elementor-widget-theme-post-title .elementor-heading-title a {
color: var(--e-global-color-nvtextdarkbg);
transition: color 280ms ease;
}
.elementor-global-7418 .e-loop-item:hover .elementor-widget-theme-post-title .elementor-heading-title,
.elementor-global-7418 .e-loop-item:hover .elementor-widget-theme-post-title .elementor-heading-title a {
color: var(--e-global-color-nvprimaryaccent);
}
/* Desktop & tablet: no line-clamp — full excerpt reads. The original logic
* assumed a multi-up grid where uniform card heights matter; this is a 1-up
* carousel, so each slide is solo and excerpt length is its own affair.
* Mobile retains a clamp (4 lines) since vertical card height matters more
* on a phone-sized viewport. */
.elementor-global-7418 .elementor-swiper-button {
color: var(--e-global-color-nvtextdarkbg);
transition: color 280ms ease;
}
.elementor-global-7418 .elementor-swiper-button:hover {
color: var(--e-global-color-nvprimaryaccent);
}
.elementor-global-7418 .swiper-pagination-bullet {
background-color: var(--e-global-color-nvc1);
opacity: 0.4;
transition: background-color 280ms ease, opacity 280ms ease;
}
.elementor-global-7418 .swiper-pagination-bullet:hover {
opacity: 0.7;
}
.elementor-global-7418 .swiper-pagination-bullet-active {
background-color: var(--e-global-color-nvprimaryaccent);
opacity: 1;
}
@media (max-width: 600px) {
body.elementor-page .elementor-global-7418 .e-loop-item {
padding: 20px;
}
body.elementor-page .elementor-global-7418 .elementor-element-1e46e83 {
--flex-direction: column;
}
body.elementor-page .elementor-global-7418 .elementor-element-a5a1506,
body.elementor-page .elementor-global-7418 .elementor-element-773bbde {
--width: 100%;
}
.elementor-global-7418 .elementor-widget-theme-post-excerpt .elementor-widget-container {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
line-clamp: 4;
overflow: hidden;
}
}
/* ---- #6 Header polish ----
* Default header state is solid (safe baseline). The IntersectionObserver in
* functions.php toggles `body.sb-over-hero` based on a 1px sentinel anchored
* to the bottom of the hero text container — class is on while the sentinel
* is at-or-below viewport top, off once the sentinel crosses above.
*
* Transitions deliberately include `transform 0.5s ease` to match ShiftNav's
* panel-open animation (otherwise our shorthand `transition` overrides the
* plugin's transform transition and the bar snaps while the panel slides).
* Color/bg/gradient transitions use 500ms with cubic-bezier(0.16, 1, 0.3, 1)
* for a softer contextual fade.
*
* ShiftNav admin text_color (#fae293) and background_color (#1b3b44) are
* intentionally kept as fallbacks/intent markers; the actual rendering is
* controlled here. Future header color changes go in this block.
*/
body #shiftnav-toggle-main {
background-color: var(--e-global-color-nvsitebg);
color: var(--e-global-color-nvprimaryaccent);
transition: background-color 500ms cubic-bezier(0.16, 1, 0.3, 1),
color 500ms cubic-bezier(0.16, 1, 0.3, 1),
transform 0.5s ease;
}
body.sb-over-hero #shiftnav-toggle-main {
background-color: transparent;
color: var(--e-global-color-nvtextdarkbg);
}
/* Joining-edge gradient band — rotated 90° from the Slate panel's right-edge
* pattern (15px width, peak alpha 0.8, fade to 0). Sits BELOW the bar so it
* doesn't darken the wordmark. Fades to opacity 0 in the over-hero state so
* the bar reads fully clear over the hero composition. */
#shiftnav-toggle-main::after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 15px;
background: linear-gradient(to bottom,
rgba(0, 0, 0, 0.8) 0%,
rgba(0, 0, 0, 0) 100%);
pointer-events: none;
opacity: 1;
transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
body.sb-over-hero #shiftnav-toggle-main::after {
opacity: 0;
}
/* Hamburger always yellow regardless of header context. Specificity (1,1,2)
* beats `body.sb-over-hero #shiftnav-toggle-main` (1,1,1). */
body #shiftnav-toggle-main button.shiftnav-toggle-burger {
color: var(--e-global-color-nvprimaryaccent);
}
/* Logo treatment inside the toggle bar's right slot. Wordmark default;
* icon-only at mobile. The icon is inline SVG with fill=currentColor, so
* it inherits the contextual color from the rules above. */
.sb-toggle-logo {
display: inline-flex;
align-items: center;
color: inherit;
text-decoration: none;
}
.sb-toggle-logo-wordmark {
height: 44px;
width: auto;
display: block;
}
.sb-toggle-logo-icon {
height: 28px;
width: auto;
display: none;
fill: currentColor;
}
@media (max-width: 600px) {
.sb-toggle-logo-wordmark { display: none; }
.sb-toggle-logo-icon { display: block; }
}
/* ---- #7 Footer ----
* Third elevated surface in the elevation/shadow language. Solid dark teal
* matching the toggle bar's site-bg variable; 15px gradient band at the top
* edge fading upward into page content above (mirrors the toggle bar's
* bottom-edge band, rotated 180°). Single centered column on all viewports —
* minimal composition, deliberate, unfussy.
*
* Markup lives in an Elementor HTML widget inside template post 7574, so
* Elementor wraps it in .elementor-location-footer + .e-con. We use
* .sb-footer-inner as the styling root; the Elementor wrappers get neutralised
* here so they don't fight the layout.
*/
footer.elementor-location-footer {
position: relative;
background-color: var(--e-global-color-nvsitebg);
color: var(--e-global-color-nvtextdarkbg);
}
/* Elementor emits a `:before` clearfix on .elementor-location-footer
* (`content:""; display:table; clear:both;`) which cascades into the SAME
* pseudo-element we use for the elevation band. Explicit `display: block`
* overrides Elementor's `display: table`; `z-index: 10` ensures the band
* paints above any z-indexed content in the section above. */
footer.elementor-location-footer::before {
content: '';
display: block;
position: absolute;
bottom: 100%;
left: 0;
right: 0;
height: 15px;
background: linear-gradient(to top,
rgba(0, 0, 0, 0.8) 0%,
rgba(0, 0, 0, 0) 100%);
pointer-events: none;
z-index: 10;
}
footer.elementor-location-footer > .e-con {
padding: 0;
grid-template-columns: 1fr;
}
.sb-footer-inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 18px;
max-width: 720px;
margin-inline: auto;
padding-inline: clamp(20px, 5vw, 48px);
padding-block: clamp(16px, 2.5vh, 32px);
}
/* Logo is height-constrained on all viewports — capped at 60px so the footer
* reads as the toggle bar's slim cousin, not a marketing block. SVG aspect
* ratio (380×120 ≈ 3.17:1) keeps the wordmark proportional. */
.sb-footer-logo img {
width: auto;
height: clamp(36px, 7vw, 60px);
display: block;
}
.sb-footer-cta {
display: inline-block;
padding: 10px 24px;
border: 1px solid var(--e-global-color-nvprimaryaccent);
border-radius: 999px;
background: transparent;
color: var(--e-global-color-nvprimaryaccent);
font-family: var(--e-global-typography-text-font-family, 'Sora'), sans-serif;
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.01em;
text-decoration: none;
cursor: pointer;
transition: background-color 280ms ease, color 280ms ease, transform 280ms ease;
}
.sb-footer-cta:hover,
.sb-footer-cta:focus-visible {
background-color: var(--e-global-color-nvprimaryaccent);
color: var(--e-global-color-nvsitebg);
transform: translateY(-1px);
}
.sb-footer-social {
display: flex;
align-items: center;
justify-content: center;
gap: 22px;
margin: 0;
padding: 0;
list-style: none;
}
.sb-footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: var(--e-global-color-nvtextdarkbg);
text-decoration: none;
transition: color 220ms ease, transform 220ms ease;
}
.sb-footer-social a:hover,
.sb-footer-social a:focus-visible {
color: var(--e-global-color-nvprimaryaccent);
transform: translateY(-2px);
}
.sb-footer-social svg {
width: 22px;
height: 22px;
display: block;
}
.sb-footer-menu svg {
/* Hamburger reads slightly heavier than the brand-mark glyphs around it */
width: 24px;
height: 24px;
}
.sb-footer-copyright {
margin: 0;
font-family: var(--e-global-typography-text-font-family, 'Sora'), sans-serif;
font-size: 0.8125rem;
font-weight: 400;
letter-spacing: 0.02em;
color: rgba(251, 248, 239, 0.5);
}
/* ---- #7 Footer — desktop layout ----
* On ≥900px viewports the footer becomes a slim two-row composition:
* row 1: [logo left] [hamburger + 4 socials centered] [CTA right]
* row 2: [copyright tucked under logo on the left edge]
* Sized to feel like the toggle bar's visual cousin at the bottom — same
* slim band, same visual weight, content arranged for footer purposes.
* Mobile centered-column stack above is left intact under 900px.
*/
@media (min-width: 900px) {
.sb-footer-inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-areas:
"logo social cta"
"copy . .";
align-items: center;
column-gap: 32px;
row-gap: 6px;
max-width: 1200px;
text-align: left;
padding-block: clamp(16px, 2.5vh, 32px);
}
.sb-footer-logo {
grid-area: logo;
justify-self: start;
}
.sb-footer-social {
grid-area: social;
justify-self: center;
}
.sb-footer-cta {
grid-area: cta;
justify-self: end;
}
.sb-footer-copyright {
grid-area: copy;
justify-self: start;
text-align: left;
margin: 0;
}
}
/* ---- #8 Hero zone elevation (content-panel sub-pattern) ----
* The hero text block is a content band detached from both adjacent zones —
* video above, parallax-overlay zone below. The content-panel sub-pattern of
* the elevation language calls for two-edge shadows at peak alpha 0.6 (vs
* chrome's single-edge / 0.8).
*
* Pass 9 update: switched from per-ID selectors to the .sb-hero-video and
* .sb-hero-text utility classes so all 5 hero surfaces (homepage + 3 geo +
* dormant template) inherit the elevation language identically.
*
* IMPLEMENTATION DETAIL — host shadows on the *previous container*, not
* the panel itself, when shadows need to overlay the previous zone's
* pixels rather than sit in the gap between zones.
*
* - Top shadow → ::after on .sb-hero-video at bottom: 0. Overlays the
* video's bottom 15px, darkening it where it meets the text block.
* Reads as a shadow being cast onto the video.
* - Bottom shadow → ::after on .sb-hero-text at top: 100%. Casts down
* into Section A's top 15px.
*
* The earlier ::before-on-51bc69b approach (Pass 8b initial) sat in the
* seam *between* the video and text block, reading as a stripe in a gap
* rather than overlay onto the video. Hosting on the previous container
* fixes that.
*
* `display: block` and `z-index: 10` on each pseudo defend against any
* Elementor :before/:after clearfix that might cascade `display: table`
* into the same pseudo (the footer hit this in Pass 7b).
*
* Hero lock (CLAUDE.md "Hero Composition"): explicitly opened only for
* these pseudo-elements. Video container carries a single ::after; text
* container carries a single ::after. Padding, background, layout, content
* all remain locked on both containers. The video container's ::before is
* reserved by Elementor (background overlay) — do not touch.
*
* Codified rule for the elevation language going forward:
* alpha 0.8 = chrome at viewport edge meeting page content (single-edge)
* alpha 0.6 = content panel detached from adjacent zones (two-edge,
* with each shadow hosted on the container whose pixels it
* should overlay).
*/
.sb-hero-video {
position: relative;
}
.sb-hero-video::after {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 15px;
background: linear-gradient(to top,
rgba(0, 0, 0, 0.6) 0%,
rgba(0, 0, 0, 0) 100%);
pointer-events: none;
z-index: 10;
}
.sb-hero-text {
position: relative;
}
.sb-hero-text::after {
content: '';
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 15px;
background: linear-gradient(to bottom,
rgba(0, 0, 0, 0.6) 0%,
rgba(0, 0, 0, 0) 100%);
pointer-events: none;
z-index: 10;
}
/* ---- #9 Sitewide button system (Pass 8) ----
* Two-tier system shared across every Elementor button on the site.
* Primary tier (the default `.elementor-button`): filled brand-yellow
* background, dark-teal text, 999px pill, sentence-case typography (no
* uppercase), 16px 32px padding. On hover the fill inverts — background
* → transparent, text → yellow — with a 1px lift.
* Secondary tier (opt-in via `.sb-button-secondary` in Elementor's
* "CSS Classes" field): outline only, transparent background, yellow
* text. On hover the inverse — fills to yellow with dark-teal text.
*
* Both tiers share shape (999px pill), case (sentence), typography
* stack, and padding. Difference is fill state at rest. Hover gesture
* is "invert in opposite directions" — that's the system signature.
*
* Multi-class selectors used to beat Elementor's per-size rules
* (`.elementor-button.elementor-size-sm` etc., specificity 0,2,0).
* Each selector here is at least (0,2,0) so we tie or exceed.
*
* The hand-coded `.sb-footer-cta` (footer template post 7574) is
* styled separately in block #7 but kept visually identical to this
* secondary tier — they're the same vocabulary applied via different
* CSS hosts (footer's hand-coded markup vs Elementor's button widget).
*/
.elementor-button.elementor-button-link,
a.elementor-button {
background-color: var(--e-global-color-nvprimaryaccent);
color: var(--e-global-color-nvsitebg);
font-family: var(--e-global-typography-text-font-family, 'Sora'), sans-serif;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.01em;
text-transform: none;
padding: 10px 24px;
border: 1px solid var(--e-global-color-nvprimaryaccent);
border-radius: 999px;
text-decoration: none;
cursor: pointer;
transition: background-color 280ms ease,
color 280ms ease,
border-color 280ms ease,
transform 280ms ease;
}
.elementor-button.elementor-button-link:hover,
.elementor-button.elementor-button-link:focus-visible,
a.elementor-button:hover,
a.elementor-button:focus-visible {
background-color: transparent;
color: var(--e-global-color-nvprimaryaccent);
border-color: var(--e-global-color-nvprimaryaccent);
transform: translateY(-1px);
}
.elementor-button.elementor-button-link.sb-button-secondary,
a.elementor-button.sb-button-secondary {
background-color: transparent;
color: var(--e-global-color-nvprimaryaccent);
}
.elementor-button.elementor-button-link.sb-button-secondary:hover,
.elementor-button.elementor-button-link.sb-button-secondary:focus-visible,
a.elementor-button.sb-button-secondary:hover,
a.elementor-button.sb-button-secondary:focus-visible {
background-color: var(--e-global-color-nvprimaryaccent);
color: var(--e-global-color-nvsitebg);
}
/* Inner spans inherit color so the button-text picks up the tier color
* cleanly (Elementor wraps the label in `.elementor-button-text` inside
* `.elementor-button-content-wrapper`). */
.elementor-button .elementor-button-content-wrapper,
.elementor-button .elementor-button-text {
color: inherit;
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
}
/* ---- #10 Article + Podcast cards (Pass 10) ----
* Extends the resource-card vocabulary (block #5) to loop-item template
* 7563. Same card language — secondary-teal background, 12px corners,
* 16:9 image, hover lift, accent-teal border, line-clamped excerpt.
*
* Scope: .elementor-7563 .e-loop-item — covers both the Articles index
* (post 7130 /articles/) and the Startup Stories Podcast index (post
* 7128 /podcasts/). Same card vocabulary for "grid of content cards"
* surfaces; podcast-specific affordances (play buttons, episode
* metadata) can be added additively later if needed. Path A: style
* both surfaces identically.
*
* Differences from block #5 (resource cards):
* - 7418 is a global widget (.elementor-global-7418); 7563 is a loop
* item template (.elementor-7563). Different scope prefix mechanism
* because Elementor distinguishes global widgets from loop item
* templates at the registration layer.
* - Articles + podcast indexes show multiple cards at once (3-col
* grid) vs resource carousel's 1-up. Excerpt line-clamp tightened
* for multi-card density: 3 lines desktop, 4 lines mobile (resource
* cards are unclamped on desktop because each carousel slide is solo
* and excerpt length is its own affair).
* - Title color stays where it's authored. Template 7563 binds title
* to globals/colors?id=nvprimaryaccent (yellow). Cards sit on the
* page's dark wash where yellow reads correctly. CSS does not
* override title color (per "Where authoring decisions live" —
* heading typography stays in authoring).
*
* No title color shift on hover. Article card titles are already brand-
* yellow at rest per template authoring (template 7563 binds
* nvprimaryaccent). Distinguished from resource carousel cards (block
* #5) which start cream and use yellow shift as the hover affordance.
* Hover gesture here is translateY + border only — same vocabulary,
* adapted starting point.
*
* Image rendering: aspect-ratio is not exposed by Widget_Image (parent
* of theme-post-featured-image) — Site Settings can't express it for
* this widget, so CSS owns the rule. Paired with a JSON cleanup of
* template 7563's widget 02736d3 per-instance height + object-fit
* settings (cleared so this CSS is the single source of truth for card
* image rendering — same justification as Pass 8 button cleanup, CSS
* legitimately replaces what's being cleared because consistent card
* images are systemic, not per-page authoring).
*/
.elementor-7563 .e-loop-item {
background-color: var(--e-global-color-nvlightbg);
border-radius: 12px;
padding: 24px;
border: 1px solid transparent;
transition: transform 280ms ease, border-color 280ms ease;
}
.elementor-7563 .e-loop-item:hover {
transform: translateY(-3px);
border-color: rgba(91, 168, 181, 0.4);
}
.elementor-7563 .elementor-widget-theme-post-featured-image img {
aspect-ratio: 16 / 9;
object-fit: cover;
width: 100%;
height: auto;
display: block;
border-radius: 8px;
}
/* Multi-card excerpt clamp — 3 lines desktop, 4 lines mobile.
* Tighter than resource cards (unclamped desktop) because the articles
* grid shows 3 cards side by side and uniform card height matters.
* Selector targets .elementor-widget-container directly (excerpt text
* sits in the container without a
wrapper — same DOM shape as
* resource cards). */
.elementor-7563 .elementor-widget-theme-post-excerpt .elementor-widget-container {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
line-clamp: 3;
overflow: hidden;
}
@media (max-width: 600px) {
body.elementor-page .elementor-7563 .e-loop-item {
padding: 20px;
}
.elementor-7563 .elementor-widget-theme-post-excerpt .elementor-widget-container {
-webkit-line-clamp: 4;
line-clamp: 4;
}
}