/*
* Elepa Consultancy brand overrides.
* The Glorify theme drives its accent colour off these CSS custom properties
* (see landing_assets/assets/css/style.css :root). Overriding them here,
* loaded after style.css/responsive.css, re-themes every component (buttons,
* links, icon backgrounds, borders) without touching the vendor CSS.
*/
/* :root {
--glorify-base: #C8102E;
--glorify-base-rgb: 200, 16, 46;
--glorify-black: #241417;
--glorify-black-rgb: 36, 20, 23;
--glorify-primary: #FBEFEE;
--glorify-primary-rgb: 200, 16, 46;
} */
/*
* Banner circle/photo (.banner-one__slider-outer) and the floating
* "Leaders Coached" card sit at position: absolute relative to
* .banner-one__left (see style.css), so on desktop they don't add to its
* height - the section's overall height is driven purely by how tall the
* left-column text happens to be. The original Glorify demo copy was
* long/multi-line enough to accidentally clear the ~600px circle + card
* underneath it; Elepa's shorter banner copy isn't, so the circle
* overflows past the section's bottom padding and gets squeezed against
* (or overlapped by) the next section. Reserving min-height here - sized
* to the circle's own fixed offset/height/card-overhang from style.css,
* not to any particular copy length - fixes this regardless of how long
* the banner text is. Below 991px the theme already switches
* .banner-one__slider-outer back to position: relative (see
* responsive.css), so it's back in normal flow and doesn't need this.
*/
@media only screen and (min-width: 1320px) {
.banner-one__left {
min-height: 620px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1319px) {
.banner-one__left {
min-height: 550px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.banner-one__left {
min-height: 500px;
}
}
/*
* Typed.js phrase in the banner heading (.typed-effect) sits inline
* right after the static title text. While it's typing, each phrase
* starts back at zero characters and initially fits on the same line as
* the title, then jumps down to its own line once it's typed enough
* characters to no longer fit - a visible reflow/"flicker" every time a
* new phrase starts. This is fixed with a hard before the span in
* home/index.html.twig (deterministic, content-length-independent)
* rather than here, since forcing .typed-effect to display:block would
* also push its blinking cursor - which typed.js inserts as a plain
* inline sibling right after the span - onto its own line, breaking the
* "text|" cursor look.
*
* The typed text also needs a z-index above .banner-one__slider-outer:
* both .banner-one__title-box and .banner-one__slider-outer are
* position:relative/absolute with z-index:auto inside
* .banner-one__left's stacking context (see style.css), so whichever
* comes later in the DOM - the circle - paints on top by default,
* letting long typed phrases disappear behind it instead of sitting
* above it.
*/
.banner-one__title-box {
position: relative;
z-index: 5;
}
/*
* .banner-one__title has no max-width in the vendor theme at all - the
* original demo relied entirely on short, hand-picked words ("We Build
* Digital") plus manual tags to keep every line well clear of the
* circle photo, rather than any actual layout constraint. Elepa's real
* copy is longer, so at 70px/bold it can run wide enough to reach past
* the circle's left edge before wrapping on its own - worse on the
* narrower end of the desktop range, since Bootstrap's own container
* caps at 1140px until the viewport hits 1400px, well before our
* 1320px circle-size breakpoint kicks in. Constraining the width (and
* trimming the font-size slightly at the top breakpoint) keeps the
* heading wrapping safely inside the left column across that whole
* range. The z-index fix above remains as a backstop for any edge case
* this doesn't fully cover, so text is never actually invisible even if
* it brushes the photo.
*/
.banner-one__title-box,
.banner-one__text {
max-width: 680px;
}
@media only screen and (min-width: 1320px) {
.banner-one__title {
font-size: 58px;
}
}
/*
* The typed.js phrase (.typed-effect) inherits the same font-size as the
* static title text. That's fine for short phrases ("Leaders show up"),
* but a longer one ("Cultures include everyone") can be wide enough to
* wrap onto a second line within the max-width above. Sizing it down
* slightly relative to the title (rather than a fixed px value) keeps it
* proportional at every breakpoint and gives longer phrases typed into
* this field later some extra room before they wrap, without it looking
* mismatched against the static heading.
*/
.banner-one__title .typed-effect {
font-size: 0.85em;
}
/*
* Product detail page price badge - not part of the original Glorify
* theme (which only ships a full e-commerce price/discount layout tied to
* banner/pricing-table markup), so this is a small custom addition rather
* than misusing an unrelated theme class.
*/
.product-details__header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 20px;
}
.product-details__header .service-details__title-1 {
margin-bottom: 0;
}
.product-details__price {
display: inline-block;
background-color: var(--glorify-base);
color: var(--glorify-white);
font-family: var(--glorify-font-two);
font-size: 22px;
font-weight: 600;
padding: 10px 24px;
border-radius: var(--glorify-bdr-radius);
white-space: nowrap;
}
/*
* Contact form input boxes - the theme's .contact-one__input-box styling
* assumes a plain /