/* Synergas theme layer.
*
* WHY THIS FILE EXISTS
* --------------------
* wagtail-base ships the block LIBRARY (cv + brilliance) but NOT the stylesheet
* that gives those blocks an appearance. The `b-*` component classes their
* templates emit - b-cta, b-ctaband, b-card, b-pill and ~120 more - are defined
* in no CSS file anywhere in the base: mysite.css is purely the built Tailwind
* output, and input.css is only its source. The Brilliance RGB site keeps its
* own 881-line brilliance.css for them, in that project rather than in the base.
*
* So a downstream site owns its own component layer, and this is Synergas'. The
* job is to DEFINE those components in the current Litho site's visual language,
* not to override anything - dropped into Base 8 as it stands, a mapped block
* renders with correct, semantic, entirely unstyled markup.
*
* That is the good news: there is no competing design to unpick, and no
* specificity fight. The markup hooks are already in place and correct.
*
* RULES
* -----
* 1. Override base's `b-*` component classes. Do NOT restyle Tailwind utility
* classes: base's templates use them directly and a change here would leak
* across unrelated blocks.
* 2. Colours and fonts do NOT belong here. Those come from BrandingSettings and
* DefaultFontSettings via the CSS custom properties base already defines
* (--theme-color, --alt-theme-color, --text-color, --main-font-family, ...).
* Reach for the variable, never a literal hex, or the editor loses control
* of the palette.
* 3. One section per base block, in the same order as
* docs/wagtail8-migration/block-mapping.md, with a comment naming the legacy
* block whose appearance is being reproduced. That comment is how the next
* person knows what "correct" looks like.
* 4. Litho's own class names (padding-100px-tb, col-xl-7, bg-dark-slate-blue,
* interactive-banners-style-08, ...) must NOT appear here. They belong to
* Bootstrap + the Litho stylesheet, neither of which Base 8 loads. Reproduce
* the LOOK, not the class names.
*
* Sections are added as each block is restyled; an empty file is the correct
* starting state.
*/
/* Comfortaa, for buttons. Litho pulls this in with an @import inside style.css
rather than a ` here is a bare, un-utility-scaled heading - 2.85rem/3.4rem
line-height (see the global `h4` rule this panel used to fall through to
before it got its own font-family). It was previously shrunk to 1.75rem,
which read small against a 300-650px-tall panel; matched back to the
legacy size. */
.sg-tslider__heading {
margin: 0;
font-family: var(--alt-font-family);
font-size: 2.85rem;
line-height: 1.2;
font-weight: 500;
}
.sg-tslider__panel {
position: relative;
}
/* No 991px step of its own here - the legacy right panel only defines lg
(≤1199) and sm (≤767), so it stays at 550px from 1199px down to 768px. */
.sg-tslider__slider {
height: 450px;
/* Overrides the base .sg-fslider's `overflow: hidden` (there to crop a
100dvh hero to the viewport) - the nav buttons sit at a negative
left offset, hanging over the info panel, and would otherwise be
clipped at this element's own left edge. */
overflow: visible;
}
@media (min-width: 768px) { .sg-tslider__slider { height: 550px; } }
@media (min-width: 1200px) { .sg-tslider__slider { height: 650px; } }
/* Overrides .sg-fslider__caption: bottom-anchored white box over ~55-80% of
the slide's width, not the base component's full-height centred white
text - this is the caption-over-image "info card" reading production has,
not a hero caption. */
.sg-tslider__slider .sg-fslider__caption {
top: auto;
left: 0;
right: auto;
bottom: 0;
width: 80%;
align-items: flex-start;
justify-content: flex-end;
/* legacy only defines a padding override at "lg" (≤1199) and the base
(≥1200) - there is no finer-grained padding step to match the width
one below, so this stays constant until 1200px. */
padding: 3.5rem 4rem;
background: #fff;
color: #1a1a1a;
text-align: left;
}
@media (min-width: 576px) { .sg-tslider__slider .sg-fslider__caption { width: 75%; } }
@media (min-width: 768px) { .sg-tslider__slider .sg-fslider__caption { width: 60%; } }
@media (min-width: 992px) { .sg-tslider__slider .sg-fslider__caption { width: 75%; } }
@media (min-width: 1200px) { .sg-tslider__slider .sg-fslider__caption { width: 55%; padding: 4.5rem 6rem; } }
.sg-tslider__text {
margin: 0;
font-size: 0.95rem;
font-weight: 400;
}
/* Legacy's `.slider-arrow-rb`: `position:absolute; bottom:0; right:100%` on
the wrapper - "right:100%" puts the wrapper's RIGHT edge at the panel's
LEFT edge (the seam with the info panel), so a 62px-wide wrapper sits 62px
to the left of it, hanging over the info panel's bottom-right corner, not
over the slide at all. Inside it, `.swiper-button-next/prev` get
`transform:none; position:static; margin-top:1px`, which strips their own
absolute centering and stacks them - prev above next, 1px apart - instead
of the base component's vertically-centred, screen-edge chevrons.
`.slider-navigation-style-01` (no `.light`/`.dark`/`.rounded-circle`
modifier in the legacy markup) is a plain 62px SQUARE, `rgba(0,0,0,.5)`
background, white icon - not the base circle. */
.sg-tslider__slider .sg-fslider__nav {
top: auto;
left: -62px;
right: auto;
transform: none;
width: 62px;
height: 62px;
border-radius: 0;
background: rgb(0 0 0 / 50%);
}
.sg-tslider__slider .sg-fslider__nav:hover,
.sg-tslider__slider .sg-fslider__nav:focus-visible {
background: #fff;
}
.sg-tslider__slider .sg-fslider__nav:hover .sg-fslider__chev,
.sg-tslider__slider .sg-fslider__nav:focus-visible .sg-fslider__chev {
border-right-color: #232323;
border-bottom-color: #232323;
}
.sg-tslider__slider .sg-fslider__nav--prev { bottom: 63px; }
.sg-tslider__slider .sg-fslider__nav--next { bottom: 0; }
.sg-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ---------------------------------------------------------------------------
* Card slider (synergas/blocks/card_slider, legacy: Content_Slider_Block)
*
* A one-slide-at-a-time carousel of numbered, captioned photo cards. Reuses
* .sg-fslider's markup and JS (initSlider() only cares about [data-sg-slider]
* / .sg-fslider__slide / the prev/next data attributes, not which block owns
* them) but NOT its cross-fade CSS: that positions every slide absolutely
* over a fixed-height parent so two can overlap mid-transition, which only
* works when every slide is the same height. This card's height comes from
* its own content (an image plus a variable-length caption), so slides here
* swap with a plain display toggle instead - only ever one in flow, sized to
* its own content, no fixed height to pick.
* ------------------------------------------------------------------------ */
.sg-cslider {
position: relative;
/* No cap: production's own swiper is col-lg-8 of an UNCONSTRAINED,
edge-to-edge half-column (~720-750px at a 1440px viewport, ~480px
slide) - narrowing this further on top of that would double the
shrink, since this column already sits inside a width-capped,
gutter-separated container (var(--sg-container), 4rem gutter) that
production's own version never had. Filling the column it already has
gets closer to production's absolute pixel size than any fraction of
it would. */
margin: 0 auto;
}
.sg-cslider__track {
margin: 0;
padding: 0;
list-style: none;
}
.sg-cslider.sg-fslider {
height: auto;
overflow: visible;
}
.sg-cslider .sg-fslider__track {
position: static;
height: auto;
}
.sg-cslider .sg-fslider__slide {
position: static;
display: none;
opacity: 1;
visibility: visible;
transition: none;
}
.sg-cslider .sg-fslider__slide.is-active,
.sg-cslider.sg-fslider--static .sg-fslider__slide:first-child {
display: block;
}
.sg-cslider__card {
position: relative;
background: #fff;
box-shadow: 0 0 30px rgb(0 0 0 / 8%);
}
.sg-cslider__img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
}
/* Litho's `padding-4-half-rem-lr padding-3-half-rem-tb`, stepped down a
breakpoint early: at this card's own (already-halved-then-66%) width, 4.5rem
a side reads closer to production's own tablet/`lg-padding-2-half-rem-lr`
step than to its unconstrained desktop value. */
.sg-cslider__caption {
display: flex;
align-items: flex-start;
gap: 1.25rem;
padding: 2.25rem 2.5rem; /* Litho's own lg-padding-2-half-rem-lr step */
}
/* Litho's feature-box number is a bare `` (2.85rem) inside the card;
sized down here for the same reason as the caption padding above - this
card is already a fraction of the column, not the full swiper width Litho
measured that size against. */
.sg-cslider__number {
flex: 0 0 auto;
font-family: var(--alt-font-family);
font-size: 1.875rem;
font-weight: 600;
line-height: 1.2;
color: var(--theme-color, #00aeff);
}
.sg-cslider__body {
padding-left: 1.25rem;
border-left: 2px solid rgb(0 0 0 / 10%);
}
/* Litho: `.text-extra-dark-gray.alt-font.font-weight-500.text-extra-medium`
(16px/28px). */
.sg-cslider__title {
display: block;
margin-bottom: 0.35rem;
font-family: var(--alt-font-family);
font-size: 1rem;
line-height: 1.75;
font-weight: 500;
color: var(--text-color, #232323);
}
.sg-cslider__text {
margin: 0;
font-size: 0.9rem;
color: #6f6f6f;
}
/* Litho's `.slider-navigation-style-08.dark`: a 50x50 dark circle inset
15px from the edge, vertically centred over the WHOLE slide (card + its
caption below the image, not just the photo) - `top: 50%` here is relative
to `.sg-cslider`, which wraps both. Overrides the base component's larger,
translucent-white, photo-only nav (sized for a full-viewport hero, not a
card sitting on its own white background). */
.sg-cslider__nav {
width: 50px;
height: 50px;
background: rgb(35 35 35 / 85%);
box-shadow: none;
}
.sg-cslider .sg-fslider__nav--prev { left: 15px; }
.sg-cslider .sg-fslider__nav--next { right: 15px; }
.sg-cslider__nav:hover,
.sg-cslider__nav:focus-visible {
background: #232323;
}
.sg-cslider__chev {
width: 0.6rem;
height: 0.6rem;
border-right-color: #fff;
border-bottom-color: #fff;
}
/* ---------------------------------------------------------------------------
* Video hero (legacy: HeroBannerBackroundVideoBlock)
*
* Litho's full-screen video banner: video covering the viewport, dark tint,
* centred title over a subtitle and CTA.
*
* Shares the slider's 100dvh reasoning - vh includes mobile browsers'
* retracting toolbar, so a 100vh hero overflows and jumps as the bar hides.
* ------------------------------------------------------------------------ */
.sg-vhero {
position: relative;
width: 100%;
min-height: 100dvh;
display: grid;
place-items: center;
overflow: hidden;
color: #fff;
}
.sg-vhero__media {
position: absolute;
inset: 0;
z-index: 0;
}
/* The element's class is applied by wagtailvideos' {% video %} tag, so
these three selectors all describe "the thing covering the viewport". */
.sg-vhero__video,
.sg-vhero__poster,
.sg-vhero__iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border: 0;
display: block;
}
.sg-vhero__iframe {
/* A 16:9 iframe cannot object-fit, so scale it up until it covers and let
the overflow crop. 177.78vh = 16/9 of the viewport height. */
width: max(100%, 177.78vh);
height: max(100%, 56.25vw);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
inset: auto;
/* Never let the iframe take a click intended for the CTA above it. */
pointer-events: none;
}
.sg-vhero__scrim {
position: absolute;
inset: 0;
background: rgb(0 0 0 / 45%);
}
/* The legacy hero put its copy in a Bootstrap .container, so the line length is
Bootstrap's breakpoint ladder rather than a chosen max-width. Reproduced here
because it decides where the heading wraps at every width. */
.sg-vhero__inner {
position: relative;
z-index: 1;
width: 100%;
max-width: var(--sg-container);
margin-inline: auto;
padding-inline: var(--sg-gutter);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
/* Bootstrap .display-3 .fw-bold .mb-3. .fw-bold overrides .display-3's own
font-weight: 300, and 1.2 is .display-3's line-height. */
.sg-vhero__title {
margin: 0 0 1rem;
font-size: calc(1.525rem + 3.3vw);
font-weight: 700;
line-height: 1.2;
}
@media (min-width: 1200px) {
.sg-vhero__title { font-size: 4rem; }
}
/* Bootstrap .lead .mb-4. */
.sg-vhero__subtitle {
margin: 0 0 1.5rem;
font-size: 1.25rem;
font-weight: 300;
}
.sg-vhero__cta {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
}
/* ---------------------------------------------------------------------------
* Buttons — .b-cta (legacy: .btn and its size/colour variants)
*
* Every block's call to action funnels through brilliance's CTABlock, so this
* is the single highest-leverage component in the layer.
*
* Values are Litho's .btn verbatim, including two easy-to-miss decisions:
* square corners (border-radius: 0), and a 2px TRANSPARENT border on the base
* class - the border is always there, so a variant only has to recolour it and
* nothing shifts by 4px when it does.
* ------------------------------------------------------------------------ */
.b-cta {
display: inline-block;
width: auto;
border: 2px solid transparent;
border-radius: 0;
text-transform: uppercase;
font-family: "Comfortaa", var(--alt-font-family);
font-weight: 500;
/* Bootstrap's .btn line-height. Litho's own .btn rule does not set one, so
without this the button inherits the body's 30px and stands 58px tall
instead of 48 - which then sets the height of every band it sits in.
Confirmed against the live site's .btn-large computing to 19.5px. */
line-height: 1.5;
text-decoration: none;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
/* Litho's size ladder. brilliance's sm/md/lg map onto
.btn-small / .btn-medium / .btn-large.
`height: auto` on each is load-bearing: brilliance sizes its buttons by a
FIXED height (`.b-cta` 60px, `.b-cta--lg` 70px) rather than by padding.
Restating the padding without clearing the height left a 70px-tall button
whose label sat centred in dead space - the CTA band's button was 62px
against production's 46px. Litho's .btn has no height at all; padding and
line-height set it. */
.b-cta { height: auto; }
.b-cta--sm { font-size: 11px; padding: 8px 22px; height: auto; }
.b-cta--md { font-size: 12px; padding: 10px 26px; height: auto; }
.b-cta--lg { font-size: 13px; padding: 12px 32px; height: auto; }
/* Litho .btn-white: solid white, near-black label, inverting to transparent on
hover. The hover colour is #fff on purpose - these sit on dark imagery. */
.b-cta--light {
background: #ffffff;
border-color: #ffffff;
color: #232323;
}
.b-cta--light:hover,
.b-cta--light:focus-visible {
background: transparent;
color: #ffffff;
}
/* Litho .btn-dark-gray. */
.b-cta--dark {
background: #232323;
border-color: #232323;
color: #ffffff;
}
.b-cta--dark:hover,
.b-cta--dark:focus-visible {
background: transparent;
color: #232323;
}
/* Litho .btn-transparent-white. */
.b-cta--outline {
background: transparent;
border-color: #ffffff;
color: #ffffff;
}
.b-cta--outline:hover,
.b-cta--outline:focus-visible {
background: #ffffff;
border-color: #ffffff;
color: #232323;
}
/* Litho .btn-link.text-theme: no button chrome, theme-coloured label. */
.b-cta--link {
padding: 0;
border-color: transparent;
background: transparent;
color: var(--text-theme-color, var(--theme-color));
}
.b-cta--link:hover,
.b-cta--link:focus-visible {
text-decoration: underline;
}
/* The site's PRIMARY button is Litho's `.btn.bg-theme` - theme background,
white label - which none of brilliance's four variant names describes. Until
a `theme` choice is added to CTABlock upstream, content that used bg-theme
should carry this class alongside .b-cta. See
docs/wagtail8-migration/block-mapping.md. */
.b-cta--theme {
background-color: var(--theme-color);
border-color: var(--theme-color);
/* #212529 - Bootstrap's default .btn colour, NOT white. The legacy markup
is `btn btn-large bg-theme` with no text-colour class, so the label keeps
Bootstrap's body colour over the blue. Measured on the live CTA band as
rgb(33, 37, 41). Looks like an oversight; reproducing it is the brief. */
color: #212529;
}
.b-cta--theme:hover,
.b-cta--theme:focus-visible {
background: transparent;
color: var(--theme-color);
}
/* ---------------------------------------------------------------------------
* CTA band — .b-ctaband (legacy: Background_CTA_Block, 12 pages)
*
* Litho markup this reproduces:
* section.fix-background.padding-50px-tb.md-padding-40px-tb.sm-padding-30px-tb
* div.opacity-medium.bg-dark-slate-blue <- the tint
* div.container > div.row.align-items-center.justify-content-center
* div.col-12.col-xl-7.col-md-8 h4.alt-font.font-weight-600.text-white
* div.col-12.col-xl-5.col-md-4 a.btn.btn-large.bg-theme
*
* Heading left, button right, collapsing to centred and stacked below 768px.
* The tint is #1f232c at 0.75 - NOT black; guessing that wrong is very visible
* on a 12-page component.
* ------------------------------------------------------------------------ */
.b-ctaband {
position: relative;
overflow: hidden;
/* brilliance rounds the band with `border-radius: var(--r-md)`. Litho's is
a full-bleed square band, and the rounded corners were one of the
"everything looks rounded" symptoms. */
border-radius: 0;
/* `.b-ctaband--dark` also draws a 1px inset white hairline frame
(`inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(255,255,255,
.05)`), which reads as a faint outline around a full-bleed band.
Production has no shadow and no border on this section. Found by
probing box-shadow, which the earlier property checks never looked at. */
box-shadow: none;
border: none;
/* base's `dark-section` (added by tone: dark) paints an OPAQUE slate-900
background on this element, which sits above the styled wrapper's
background image and hides it completely - the band renders as a flat
dark slab. On the Synergas band the darkening is the ::before tint, so
the band itself has to stay transparent. Any tone: dark block carrying a
background image has the same problem. */
background-color: transparent;
padding-top: 50px;
padding-bottom: 50px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
/* `.b-ctaband--dark` (brilliance.css) sets its own `background:` SHORTHAND -
three RGB brand-glow radial gradients (cyan/green/red) plus a linear-gradient
fallback - not just a colour. `background-color: transparent` above does not
touch `background-image`, and `.b-ctaband--dark` (two classes) is EQUAL
specificity to `.b-ctaband` (one class) plus the two-class selectors below,
so without an explicit override here brilliance's glow painted over the
band's real photo, reading as a colour-washed card instead of the plain dark
tint Litho uses. synergas.css loads after brilliance.css, so this wins on
load order at equal specificity. `.b-ctaband--light` gets the same shorthand
reset for the same reason, even though no content currently uses it. */
.b-ctaband--dark,
.b-ctaband--light {
background: transparent;
box-shadow: none;
border: none;
}
@media (max-width: 991px) {
.b-ctaband { padding-top: 40px; padding-bottom: 40px; }
}
@media (max-width: 767px) {
.b-ctaband { padding-top: 30px; padding-bottom: 30px; }
}
/* Litho's .opacity-medium over .bg-dark-slate-blue, as a pseudo-element so the
block needs no extra markup. */
.b-ctaband::before {
content: "";
position: absolute;
inset: 0;
background-color: #1f232c;
opacity: 0.75;
pointer-events: none;
}
/* Bootstrap .container + .row.align-items-center.justify-content-center. */
.b-ctaband__inner {
position: relative;
z-index: 1;
width: 100%;
/* brilliance gives this `padding: clamp(44px, 6vw, 80px) clamp(24px, 4vw,
60px)`. Not declaring padding here left that in force, so the band stood
350px tall against production's 143px: the 50px band padding was being
added to 80px of inner padding top and bottom. Litho's band has padding
on the SECTION only, so this element must explicitly have none. */
padding: 0;
max-width: var(--sg-container);
margin-inline: auto;
/* No padding here, and the gutter moves onto the columns instead.
Bootstrap's .container pads 15px, then .row cancels it with a -15px
margin and each .col re-adds it - so a column's width is a percentage of
the FULL container width, not of its content box. Padding the flex
parent instead makes every column ~15px narrow: measured 665px against
the live site's 683px at 1440. */
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
row-gap: 30px;
}
.b-ctaband__heading,
.b-ctaband__ctas {
padding-inline: var(--sg-gutter);
}
/* h4.alt-font.font-weight-600.text-white.mb-0 — Outfit at 600, white, and the
heading's default 25px bottom margin removed by .mb-0. Size comes from the
h4 rule above, so it rides the root-font ladder. */
.b-ctaband__heading {
flex: 1 1 100%;
margin: 0;
/* brilliance caps this at `max-width: 760px`, which wrapped "Ready to
Elevate Your Gas Supply?" onto two lines. Production keeps it on one:
the column is 58.33% of a 1140px container, so the width comes from the
flex basis below and nothing else may constrain it. */
max-width: none;
font-family: var(--alt-font-family);
font-weight: 600;
color: #ffffff;
text-align: center;
}
/* The heading block renders its own h-tag inside this wrapper. Only the
margin and colour are reset - NOT `font`, which would override the h4 scale
with the wrapper's inherited 15px body size. Family and weight inherit from
the wrapper, and the size comes from the global heading scale, which is what
keeps it on the root-font ladder. */
.b-ctaband__heading :is(h1, h2, h3, h4, h5, h6, p) {
margin: 0;
color: inherit;
}
.b-ctaband__ctas {
flex: 1 1 100%;
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
/* col-sm-10 on the heading between 576 and 767px - it does NOT go full width
until below 576. Measured live: 450px of a 540px container. */
@media (min-width: 576px) and (max-width: 767px) {
.b-ctaband__heading { flex: 0 0 83.333333%; }
}
/* col-md-8 / col-md-4 split: heading left, button right from 768px up. */
@media (min-width: 768px) {
.b-ctaband__heading { flex: 0 0 66.666667%; text-align: left; }
.b-ctaband__ctas { flex: 0 0 33.333333%; justify-content: flex-end; }
}
/* col-xl-7 / col-xl-5 at 1200px and above. */
@media (min-width: 1200px) {
.b-ctaband__heading { flex: 0 0 58.333333%; }
.b-ctaband__ctas { flex: 0 0 41.666667%; }
}
/* Brilliance's RGB accent strip and eyebrow have no counterpart on the Synergas
site. They only render if an editor turns them on, and they are left unstyled
rather than hidden so that choice still does something visible if made
deliberately. */
/* ---------------------------------------------------------------------------
* FAQ accordion — .sg-faq (legacy: FAQ_Accordion_Style02, 7 pages)
*
* Litho markup this reproduces:
* .container > .row.justify-content-center > .col-lg-6.col-md-10
* .panel-group.accordion-event.accordion-style-02
* .panel > .panel-heading.border-color-white-transparent
* a.accordion-toggle > span.alt-font
* i.icon-feather-plus (absolute, right)
* > .panel-collapse.collapse > .panel-body
*
* All values measured off the live accordion, which is the composite of
* Litho's .accordion-style-02 rules plus the Bootstrap grid:
* heading row padding 15px 25px 15px 0, border-bottom 1px rgba(255,255,255,.1)
* question Outfit 15px/30px w400 #000
* body padding 30px 20px 30px 0, 15px/30px #000
*
* Two quirks preserved deliberately:
* - The divider is white at 10% opacity on a #f7f7f7 section, so it is
* effectively INVISIBLE on the live site. It looks like a mistake (the
* class is .border-color-white-transparent, meant for dark sections) but
* reproducing it is the brief.
* - No panel is expanded on load - every legacy toggle carries `collapsed`.
* ------------------------------------------------------------------------ */
.sg-faq__container {
width: 100%;
max-width: var(--sg-container);
margin-inline: auto;
padding-inline: var(--sg-gutter);
}
/* col-lg-6 centred, widening to col-md-10 and then full width. Percentages of
the container, matching Bootstrap's column maths. */
.sg-faq__col {
margin-inline: auto;
padding-inline: var(--sg-gutter);
}
@media (min-width: 768px) { .sg-faq__col { width: 83.333333%; } }
@media (min-width: 992px) { .sg-faq__col { width: 50%; } }
.sg-faq__heading {
font-family: var(--alt-font-family);
text-align: center;
}
.sg-faq__panel + .sg-faq__panel { margin-top: 0; }
.sg-faq__head {
/* A button, so the browser's default appearance has to be cleared before
Litho's heading-row styling applies. */
appearance: none;
-webkit-appearance: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
width: 100%;
background: none;
border: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding: 15px 25px 15px 0;
text-align: left;
cursor: pointer;
position: relative;
}
/* .accordion-style-02 .panel:last-child .panel-heading { border: none } - but
it comes BACK when that last panel is open (.active-accordion). */
.sg-faq__panel:last-child .sg-faq__head { border-bottom: 0; }
.sg-faq__panel:last-child.is-open .sg-faq__head {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.sg-faq__q {
font-family: var(--alt-font-family);
font-size: 15px;
line-height: 30px;
font-weight: 400;
color: var(--text-color, #000);
display: inline-block;
}
/* Litho positions the marker absolutely at the right edge, vertically centred. */
.sg-faq__marker {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 15px;
height: 15px;
flex: 0 0 auto;
color: var(--text-color, #000);
transition: transform 0.25s ease;
}
/* Plus becomes minus: rotating 45deg would make an x, so the vertical stroke is
hidden instead - which is what the legacy data-active-icon="minus" swap did. */
.sg-faq__panel.is-open .sg-faq__marker path {
d: path("M5 12h14");
}
@supports not (d: path("M5 12h14")) {
/* Older engines ignore the `d` property; rotate to a minus-like bar. */
.sg-faq__panel.is-open .sg-faq__marker { transform: translateY(-50%) rotate(90deg); }
}
.sg-faq__body {
padding: 30px 20px 30px 0;
font-size: 15px;
line-height: 30px;
color: var(--text-color, #000);
}
.sg-faq__body > :last-child { margin-bottom: 0; }
/* ---------------------------------------------------------------------------
* Grid + feature card — .b-grid / .b-card
* (legacy: feature_grid, Service_Banner_Grid_Block,
* Interactive_Banner_Grid_Block09, icon_feature_box — 7 pages)
*
* Litho markup this reproduces:
* .container > .row.row-cols-lg-3.row-cols-sm-2.justify-content-center
* .col.md-margin-50px-bottom.wow.animate__fadeIn
* .feature-box.padding-3-rem-lr
* .feature-box-icon.bg-white.w-130px.h-130px.rounded-circle
* .box-shadow-large.margin-40px-bottom > i.icon-large
* .feature-box-content > span (title) + p
*
* Measured live at 1440px: grid 1140 wide, three 380px cells, each padded
* 0 15px; card padding 0 42px (padding-3-rem-lr = 3rem at the 14px root);
* icon 130x130 white circle, shadow 0 0 30px rgba(0,0,0,.08), 40px below it;
* glyph 50px; title Outfit 15px/30px w500 #232323 with 15px beneath;
* body 15px/30px.
* ------------------------------------------------------------------------ */
.b-grid {
display: grid;
/* Litho's row-cols-lg-3 row-cols-sm-2: the editor's column count applies
from 992px, halving to 2 below that and 1 below 576. Gap stays 0 - the
spacing is the cells' own 15px gutters, as in the Bootstrap grid. */
grid-template-columns: repeat(var(--grid-cols, 3), minmax(0, 1fr));
gap: 0;
/* See "the .row negative margin" near the top: every legacy block that
lands on this grid renders as a Bootstrap `.row`, so the grid spans its
container's BOX and the cells' own 15px gutters live inside that. Its
container now supplies the content span, 30px narrower, so those 30px
have to be reclaimed here or every cell comes out 7.5-10px short:
measured 247.5 against the live 255 on a 4-up row, 370 against 380 on a
3-up one. `width: auto` is required - a `width: 100%` element ignores
its own negative right margin and overflows. */
width: auto;
margin-inline: calc(var(--sg-gutter) * -1);
}
@media (max-width: 991px) {
.b-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
.b-grid { grid-template-columns: minmax(0, 1fr); }
}
.b-grid__cell {
padding-inline: var(--sg-gutter);
}
/* Litho's .md-margin-50px-bottom on each column: once the grid narrows, the
cells need vertical separation that the 3-up desktop layout does not. */
@media (max-width: 991px) {
.b-grid__cell { margin-bottom: 50px; }
}
/* --- the card ------------------------------------------------------------ */
.b-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
z-index: 1;
/* .padding-3-rem-lr, tapering the way Litho's lg-/sm- variants do. */
padding: 0 3rem;
/* Litho's .feature-box sets no background or border. base's
b-card--outline would draw one in the Brilliance design; here it must
not. */
background: none;
border: 0;
text-decoration: none;
transition-duration: 0.4s;
}
@media (max-width: 1199px) { .b-card { padding: 0 2rem; } }
@media (max-width: 767px) { .b-card { padding: 0 1rem; } }
/* base's card template hardcodes `animate__fadeInUp` in its class attribute,
so it cannot be turned off through the styling panel. Litho used plain
fadeIn - no upward translate - so the animation is renamed rather than the
template forked. */
.b-card.animate__fadeInUp {
animation-name: fadeIn;
}
/* The icon disc: a 130px white circle with a soft shadow, 40px above the copy. */
.b-card__glyph {
display: grid;
place-items: center;
width: 130px;
height: 130px;
margin-bottom: 40px;
border-radius: 50%;
background-color: #ffffff;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.08);
color: var(--text-color, #000);
/* .icon-large */
font-size: 50px;
transition: all 0.3s ease-in-out;
}
.b-card__glyph svg {
width: 50px;
height: 50px;
}
@media (max-width: 767px) {
.b-card__glyph { margin-bottom: 30px; }
}
/* The title renders in a real heading tag, so this has to beat the global
heading scale - it is a class on that element, so it does. Litho's title is
a 15px span, not a display heading. */
.b-card__title {
font-family: var(--alt-font-family);
font-size: 15px;
line-height: 30px;
font-weight: 500;
letter-spacing: normal;
color: #232323;
margin: 0 0 15px;
}
.b-card__body {
font-size: 15px;
line-height: 30px;
color: var(--text-color, #000);
}
.b-card__body > :last-child { margin-bottom: 0; }
/* ---------------------------------------------------------------------------
* Parallax hero section (legacy: hero_parallax, 14 of 18 pages)
*
* Litho gave the hero section a FIXED height via .one-fifth-screen - 900px,
* stepping to 750px below 1200 and 600px below 768 - not a viewport unit. A
* section with only a heading inside collapses to the height of its text
* otherwise, which clips the h1 under the navbar.
*
* Applied to a styled wrapper that carries a parallax background and the dark
* scheme, which is what the transform emits for this hero.
* ------------------------------------------------------------------------ */
.block-styled.b-bg-parallax.dark-section {
height: 900px;
display: flex;
flex-direction: column;
justify-content: center;
}
@media (max-width: 1199px) { .block-styled.b-bg-parallax.dark-section { height: 750px; } }
@media (max-width: 767px) { .block-styled.b-bg-parallax.dark-section { height: 600px; } }
/* dark-section paints an opaque slate background, which would hide the hero's
own image - the same problem as the CTA band. */
.block-styled.b-bg-parallax.dark-section {
background-color: transparent;
}
/* ---------------------------------------------------------------------------
* Media + content split — .b-mediacta
* (legacy: Image_Content_CTA_Block, 7 pages)
*
* Litho markup this reproduces:
* section.big-section.cover-background
* .container > .row.align-items-center
* .col-12.col-xl-4.col-lg-5.col-md-6.order-2.order-md-1 (text)
* .col-12.col-lg-7.offset-xl-1.col-md-6.order-1.order-md-2 (image)
*
* Measured live: title Outfit 32.2px/42px w400 UPPERCASE (2.3rem, Litho's h5);
* the highlight paragraph is 16px/28px behind a 4px solid #232323 left border
* with 25px of padding and 40px/30px margins - a pull-quote accent that is the
* block's most recognisable feature.
*
* Base's own design is a rounded, bordered, clipped card with a dark panel.
* None of that belongs here, so the card chrome is removed: Litho's version is
* two plain columns side by side.
*
* Note the ORDER SWAP. Litho puts the image first on mobile (order-1) and
* second from 768px up (order-md-2), so the picture leads on a phone and the
* copy leads on desktop. Reproducing the desktop layout alone would silently
* change the mobile reading order.
* ------------------------------------------------------------------------ */
.b-mediacta {
display: flex;
flex-wrap: wrap;
align-items: center;
/* No card chrome - base rounds, borders and clips this; Litho does not. */
border: 0;
border-radius: 0;
overflow: visible;
background: none;
/* .row's negative gutters, so the columns line up with every other grid. */
margin-inline: calc(var(--sg-gutter) * -1);
}
.b-mediacta__media,
.b-mediacta__panel {
padding-inline: var(--sg-gutter);
flex: 0 0 100%;
max-width: 100%;
}
/* Image first on mobile, copy first from 768px - Litho's order-1/order-md-2. */
.b-mediacta__media { order: 1; }
.b-mediacta__panel { order: 2; margin-bottom: 5rem; }
@media (min-width: 768px) {
.b-mediacta__media { order: 2; flex: 0 0 50%; max-width: 50%; }
.b-mediacta__panel { order: 1; flex: 0 0 50%; max-width: 50%; margin-bottom: 0; }
}
@media (min-width: 992px) {
.b-mediacta__media { flex: 0 0 58.333333%; max-width: 58.333333%; }
.b-mediacta__panel { flex: 0 0 41.666667%; max-width: 41.666667%; }
}
/* col-xl-4 + offset-xl-1: the text column narrows and a twelfth of a gap opens
between the two at 1200px and up. */
@media (min-width: 1200px) {
.b-mediacta__panel { flex: 0 0 33.333333%; max-width: 33.333333%; }
.b-mediacta__media {
flex: 0 0 58.333333%;
max-width: 58.333333%;
margin-left: 8.333333%;
}
}
/* The dark panel is a Brilliance motif; Litho's text column has no background. */
.b-mediacta__panel {
background: none;
color: inherit;
/* brilliance pads the panel 70px top and bottom, which Litho's column does
not have at all - production's computed padding is `0 0 0 15px`. Those
140px made the panel 378 tall against the live 303.3, and the section's
own `big-section` rhythm already provides the space. */
padding-block: 0;
}
/* `pe-lg-0` on the legacy column: no right gutter, so the copy uses the full
365px rather than 350. Litho drops it below lg, where the columns stack. */
@media (min-width: 992px) {
.b-mediacta__panel { padding-right: 0; }
}
.b-mediacta__img {
display: block;
width: 100%;
height: auto;
border-radius: 0;
}
/* .alt-font.text-uppercase at Litho's h5 size. */
.b-mediacta__panel :is(h1, h2, h3, h4, h5, h6) {
font-family: var(--alt-font-family);
font-size: 2.3rem;
line-height: 3rem;
font-weight: 400;
text-transform: uppercase;
/* Litho's h5 keeps its bottom margin here - measured 25px, and without it
the pull-quote's 40px top margin collapsed against the heading. */
margin: 0 0 25px;
}
/* The pull-quote accent: .border-width-4px.padding-25px-left.text-extra-medium
with 40px above and 30px below, held to 85% width on desktop. */
.b-mediacta__panel > p,
.b-mediacta__panel .b-mediacta__text {
font-size: 16px;
line-height: 28px;
/* `text-extra-medium` carries weight 500 and Litho's extra-dark-gray;
brilliance's panel copy is 300 at 78% black, which read noticeably
lighter than production's. */
font-weight: 500;
color: #232323;
border-left: 4px solid #232323;
padding-left: 25px;
margin: 40px 0 30px;
width: 85%;
}
@media (max-width: 991px) {
.b-mediacta__panel > p,
.b-mediacta__panel .b-mediacta__text { width: 100%; }
}
@media (max-width: 575px) {
.b-mediacta__panel > p,
.b-mediacta__panel .b-mediacta__text { margin-top: 30px; }
}
.b-mediacta__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
/* ---------------------------------------------------------------------------
* Numbered steps — .b-numlist
* (legacy: Process_Step_Style_02_Block 3 pages, and the checklist 2 pages)
*
* Litho's .process-step-style-02, verbatim from style.css:
* .process-step-item flex, row wrap, align-items stretch, text-align left
* .process-step-icon 50x50, border-radius 100%, 19px/48px, colour #fff
* .process-step-icon-wrap margin-right 40px, and a 1px CONNECTOR line
* absolutely positioned at bottom 20px, left 50%,
* height calc(100% - 90px)
*
* That connector is the block's signature - a vertical thread joining the step
* discs down the list. Easy to miss reading the template, since it is drawn by
* an empty and exists only in CSS.
* ------------------------------------------------------------------------ */
.b-numlist {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}
.b-numlist__item {
display: flex;
position: relative;
flex-flow: row wrap;
align-items: stretch;
justify-content: flex-start;
text-align: left;
flex: 0 0 100%;
transition: box-shadow 0.3s ease, background 0.3s ease;
}
/* The step disc, plus the connector to the next one. The line stops 90px short
so it runs between the discs rather than through them. */
.b-numlist__n {
position: relative;
display: grid;
place-items: center;
width: 50px;
height: 50px;
flex: 0 0 50px;
margin-right: 40px;
border-radius: 100%;
font-family: var(--alt-font-family);
font-size: 19px;
line-height: 48px;
font-weight: 500;
color: #fff;
background-color: var(--theme-color);
}
.b-numlist__item:not(:last-child) .b-numlist__n::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: calc(100% + 40px);
background-color: rgba(0, 0, 0, 0.12);
}
.b-numlist__item:hover .b-numlist__n {
transform: scale(1.1);
transition: transform 0.3s ease-in-out;
}
/* Badge LEFT, copy stacked beside it — Litho wraps the label and description in
one `.process-content` div next to the numbered disc.
`flex: 0 0 calc(100% - 90px)` was not enough on its own: brilliance.css sets
`.b-numlist__item { display: flex; flex-direction: column }` and this file had
no `display` rule for that element to beat, so the disc sat ABOVE the label at
the same x and each step ran 179px tall against production's ~57px. An
explicit 2-column grid states the intent instead of fighting the flex
direction, and places the three children by name so their source order does
not matter. */
.b-numlist__item {
display: grid;
grid-template-columns: 50px minmax(0, 1fr);
column-gap: 40px;
align-items: start;
}
.b-numlist__n {
grid-column: 1;
grid-row: 1 / span 2;
}
.b-numlist__label,
.b-numlist__text {
grid-column: 2;
min-width: 0;
}
.b-numlist__label {
padding-bottom: 0;
}
.b-numlist__text {
padding-bottom: 40px;
}
/* Measured live: the step label is a 15px/30px span at weight 500, NOT a
display heading. base renders it in a heading tag, so without an explicit
size it inherits the global heading scale and comes out at 39.9px - nearly
three times too large. The `letter-spacing-minus-1px` class in the legacy
markup has no visible effect at this size and is not reproduced. */
.b-numlist__label {
font-family: var(--alt-font-family);
font-size: 15px;
line-height: 30px;
font-weight: 500;
color: #232323;
letter-spacing: normal;
margin: 0 0 5px;
}
.b-numlist__text { font-size: 15px; line-height: 30px; }
/* ---------------------------------------------------------------------------
* Stat strip — .b-statstrip (legacy: Stats_Counter_Block, 2 pages)
*
* Litho renders these as ONE white card floating on a section boundary:
* .col-12.box-shadow-medium.bg-white.padding-4-rem-all (0 0 20px rgba(0,0,0,.08), 4rem)
* .row.overlap-section
* .col.border-right.border-color-medium-gray.text-center per stat
*
* DEGRADED: the numbers no longer count up. Litho drove that with a `counter`
* plugin bundled inside theme-vendors.min.js, which Base 8 does not carry.
* ------------------------------------------------------------------------ */
.b-statstrip {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
background-color: #ffffff;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
padding: 4rem;
position: relative;
transition: all 0.3s ease-in-out;
}
@media (max-width: 767px) {
.b-statstrip { padding: 0 15px; box-shadow: none; }
}
.b-statstrip__item {
flex: 1 1 0;
min-width: 0;
text-align: center;
/* .border-right.border-color-medium-gray, dropped on the last one and on
small screens (.sm-no-border-right). */
border-right: 1px solid #e4e4e4;
}
.b-statstrip__item:last-child { border-right: 0; }
@media (max-width: 767px) {
.b-statstrip__item {
flex: 0 0 100%;
border-right: 0;
margin-bottom: 30px;
}
}
/* .alt-font.font-weight-500 - the big number. */
/* The legacy counter is an , so it takes Litho's h4 scale - 2.85rem/3.4rem
at weight 500 in the alt font, theme-coloured. */
.b-statstrip__num,
.b-statstrip__suffix {
font-family: var(--alt-font-family);
font-size: 2.85rem;
line-height: 3.4rem;
font-weight: 500;
color: var(--theme-color);
margin-bottom: 0.5rem;
}
/* .alt-font.text-extra-dark-gray.font-weight-500.line-height-14px */
.b-statstrip__label {
display: block;
font-family: var(--alt-font-family);
font-weight: 500;
color: #232323;
line-height: 14px;
}
/* Brilliance draws an accent bar under the strip; Litho has none. */
.b-statstrip__bar { display: none; }
/* ---------------------------------------------------------------------------
* Images — .b-figure / .b-img (legacy: simple_image_block, 2 pages)
* Litho renders a plain responsive image with square corners.
* ------------------------------------------------------------------------ */
.b-figure { margin: 0; }
/* The reset above loads after brilliance.css's `.b-figure--{center,left,right}`
* (equal specificity, one class each) and its `margin: 0` shorthand wins
* outright, zeroing the left/right auto-margins those alignment modifiers
* set - a sized figure (Image block → Size) rendered flush left regardless
* of the editor's Alignment choice. Re-assert them here, after the reset. */
.b-figure--center { margin-left: auto; margin-right: auto; }
.b-figure--left { margin-right: auto; }
.b-figure--right { margin-left: auto; }
.b-img {
display: block;
max-width: 100%;
height: auto;
border-radius: 0;
}
.b-caption {
font-size: 15px;
line-height: 30px;
color: #757575;
margin-top: 10px;
}
/* ---------------------------------------------------------------------------
* Divider — .b-divider (used by scaffolded title sections)
* Litho's separator under a Fancy Title is a thin theme-coloured rule.
* ------------------------------------------------------------------------ */
.b-divider {
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
margin: 30px 0;
}
/* ---------------------------------------------------------------------------
* Parallax hero contents (legacy: hero_parallax, 14 of 18 pages)
*
* Litho markup this reproduces:
* section.parallax.one-fifth-screen (background-position 50% 0)
* .opacity-extra-medium.bg-extra-dark-gray <- #232323 at 0.5
* .container > .row.one-third-screen
* .col-12.page-title-extra-small.text-center.d-flex...flex-column
* h1.alt-font.opacity-6.margin-20px-bottom
* h2.alt-font.font-weight-500.w-55.letter-spacing-minus-1px
* .line-height-50px.no-margin-bottom
*
* The type hierarchy here is INVERTED from what the tag names suggest, and
* getting it wrong is very visible on 14 pages:
*
* h1 -> .page-title-extra-small h1 { font-size: 16px; line-height: 20px }
* plus opacity-6. It is a small, faint EYEBROW, not the headline.
* h2 -> Litho's h2 scale (3.9rem) with line-height forced to 50px and
* weight 500. THIS is the focus text.
*
* The dark wash is #232323 at 0.5 opacity - not black, and heavier than the
* CTA band's 0.75-over-#1f232c.
* ------------------------------------------------------------------------ */
.block-styled.b-bg-parallax.dark-section {
/* .parallax sets background-position: 50% 0, and the JS ratio scroll
effect is approximated by the fixed attachment already applied by
.b-bg-parallax. */
background-position: 50% 0;
}
/* .opacity-extra-medium over .bg-extra-dark-gray, as a pseudo-element so no
extra markup is needed. */
.block-styled.b-bg-parallax.dark-section::before {
content: "";
position: absolute;
inset: 0;
background-color: #232323;
opacity: 0.5;
pointer-events: none;
z-index: 0;
}
/* Keep the copy above the wash. */
.block-styled.b-bg-parallax.dark-section > * {
position: relative;
z-index: 1;
}
/* Litho centres the hero copy in the section, both axes. */
.block-styled.b-bg-parallax.dark-section .b-grid,
.block-styled.b-bg-parallax.dark-section [class*="fedit-grid"] {
text-align: center;
}
/* The faint eyebrow. */
.block-styled.b-bg-parallax.dark-section .b-h1 {
font-size: 16px;
line-height: 20px;
font-family: var(--alt-font-family);
opacity: 0.6;
margin: 0 0 20px;
/* No letter-spacing override. This rule used to force `normal`, on the
assumption that 16px text should not be tracked in — but the live eyebrow
measures -0.5px, so the assumption was wrong and the heading scale's own
default is already correct. */
color: #ffffff;
}
/* The focus text: Litho's h2 scale at weight 500, held to 55% of the container
so it wraps the way the live site does.
*
* Line-height is DELIBERATELY not overridden. The legacy markup asks for
* `line-height-50` (plus `sm-line-height-45` / `xs-line-height-30`), but Litho
* defines `.line-height-50px` - the class names do not match, so none of those
* rules ever applied and the live h2 keeps its natural 4.2rem (58.8px).
* Implementing the INTENDED 50px produced something the live site does not do.
* Measured live: 54.6px/58.8px. */
.block-styled.b-bg-parallax.dark-section .b-subheading {
display: block;
font-family: var(--alt-font-family);
font-size: 3.9rem;
line-height: 4.2rem;
font-weight: 500;
letter-spacing: -1px;
color: #ffffff;
margin: 0 auto;
width: 55%;
text-align: center;
}
@media (max-width: 991px) {
.block-styled.b-bg-parallax.dark-section .b-subheading { width: 65%; }
}
@media (max-width: 767px) {
.block-styled.b-bg-parallax.dark-section .b-subheading { width: 80%; }
}
@media (max-width: 575px) {
.block-styled.b-bg-parallax.dark-section .b-subheading { width: 100%; }
}
/* ---------------------------------------------------------------------------
* Header (legacy: Utilities_headersettings + wagtailmenus)
*
* Legacy config, from the dump:
* header_style "transparent", logo_position "left",
* navigation_style "center", show_language_switcher true,
* cta_button_text "JCC Portal", cta_button_style "primary"
*
* Measured live at 1440px:
* header 72px tall, background TRANSPARENT, position fixed
* links Outfit 14px w500 #fff, no padding, no text-transform
* logo 189x36
* CTA Comfortaa 10px on #0d6efd, white, 6px 16px, radius 4px, UPPERCASE
*
* The CTA blue is Bootstrap's default primary (#0d6efd), NOT the Synergas theme
* blue - the legacy setting is cta_button_style: "primary", so it inherits
* .btn-primary. It reads like an oversight; reproducing it is the brief.
*
* base's nav is styled with inline Tailwind (backdrop-blur, border-b, shadow)
* plus an inline background-color from --nav-background-color. Element+class
* selectors beat the utilities, but the inline background needs !important -
* the one place in this layer that does. It is a single site-wide element, and
* BrandingSettings' colour field cannot express "transparent".
* ------------------------------------------------------------------------ */
nav.fixed {
background-color: transparent !important;
backdrop-filter: none;
border-bottom: 0;
box-shadow: none;
}
/* The header row: logo left, nav centred, language + CTA right. */
nav.fixed > div {
max-width: var(--sg-container);
min-height: 72px;
padding-inline: var(--sg-gutter);
/* base's inner row carries py-2, which at Litho's 14px root adds 14px and
made the header 86px against the live site's 72. The links' 72px
line-height sets the height instead. */
padding-block: 0;
}
/* The logo. `:not(.sg-langs__flag)` is load-bearing: this selector is
(0,1,2) and beats `.sg-langs__flag` at (0,1,0), so without the exclusion it
sized the three language flags to 36px tall as well. That overflowed the
header, base's inner row carries `flex-wrap`, and the nav wrapped to 258px
against the live site's 72. */
nav.fixed img:not(.sg-langs__flag) {
height: 36px;
width: auto;
}
/* --- top-level items --------------------------------------------------- */
.sg-nav__item {
position: relative;
}
.sg-nav__link {
display: inline-block;
padding: 0 16px;
font-family: var(--alt-font-family);
font-size: 16px;
font-weight: 500;
color: #ffffff;
text-decoration: none;
text-transform: none;
line-height: 72px;
/* A flex item's box can be squeezed narrower than its own content by its
siblings (see the 992-1199px note below); without this, that squeeze
wraps the label onto a second line instead of just running tight. */
white-space: nowrap;
transition: color 0.3s ease;
}
.sg-nav__link:hover,
.sg-nav__link.is-current {
color: var(--theme-color);
}
/* --- dropdowns --------------------------------------------------------- */
/* CSS-only: :focus-within keeps it usable from the keyboard, which the legacy
hover-only menu was not. */
.sg-nav__submenu {
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
padding: 10px 0;
background-color: #ffffff;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
z-index: 10;
}
.sg-nav__item--has-children:hover .sg-nav__submenu,
.sg-nav__item--has-children:focus-within .sg-nav__submenu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.sg-nav__sublink {
display: block;
padding: 8px 20px;
font-family: var(--alt-font-family);
font-size: 16px;
font-weight: 500;
color: #232323;
text-decoration: none;
white-space: nowrap;
transition: color 0.3s ease;
}
.sg-nav__sublink:hover,
.sg-nav__sublink.is-current {
color: var(--theme-color);
}
/* --- the JCC Portal button --------------------------------------------- */
/* base renders NavigationSettings items through nav_menu.html, which is not
ours to reshape, so the button is targeted by its position in the header. */
nav.fixed a[href*="jccsmart.com"] {
display: inline-block;
margin-left: 12px;
padding: 6px 16px;
/* Litho's .btn carries `border: 2px solid transparent` so a solid button
and an outline one are the same size. Without it this measured 113x27
against the live button's 117x31 — exactly 2px per side. */
border: 2px solid transparent;
border-radius: 4px;
background-color: #0d6efd;
color: #ffffff;
font-family: "Comfortaa", var(--alt-font-family);
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
text-decoration: none;
line-height: 1.5;
}
/* Production's button is `JCC Portal`.
nav_menu.html is base-derived and renders only the label, so the icon is
attached here as generated content rather than by forking that template. */
nav.fixed a[href*="jccsmart.com"]::after {
content: "\f061";
/* FA6, not FA5 as everywhere else - see base.html's note on why this
project renders with Font Awesome 5. There is no "Font Awesome 6 Free"
on the page, so the glyph silently failed to paint: no error, no
fallback box, just an empty 8px margin where the arrow should be. */
font-family: "Font Awesome 5 Free";
font-weight: 900;
margin-left: 8px;
font-size: 9px;
vertical-align: middle;
}
nav.fixed a[href*="jccsmart.com"]:hover {
background-color: #0b5ed7;
color: #ffffff;
}
/* ---------------------------------------------------------------------------
* Footer (legacy: .footer-dark.bg-extra-dark-gray + Utilities_footersettings)
*
* Measured live at 1440px: 553px tall, background #232323, body text
* rgb(136,144,164) at 15px, column headings uppercase, a 210x40 logo and a
* full-width partner banner.
*
* Base 8 has no footer markup at all, so there was nothing to override - the
* template in synergas/templates/synergas/footer.html is new.
* ------------------------------------------------------------------------ */
.sg-footer {
background-color: #232323;
color: #8890a4;
font-size: 15px;
line-height: 30px;
}
.sg-footer__container {
width: 100%;
max-width: var(--sg-container);
margin-inline: auto;
padding-inline: var(--sg-gutter);
display: flex;
flex-wrap: wrap;
}
.sg-footer__top {
padding: 5rem 0 3rem;
}
@media (max-width: 767px) {
.sg-footer__top { padding: 3rem 0 2rem; }
}
.sg-footer__col {
padding-inline: var(--sg-gutter);
margin-bottom: 30px;
box-sizing: border-box;
}
/* The nav columns (everything but the brand) share their own flex row, so they
wrap as a GROUP rather than shedding one column at a time onto a lone row -
see the comment in footer.html. Desktop: equal-width columns filling the
remaining space next to the brand, same as Litho's col-lg. Tablet: 2-up,
same as col-sm-6. Phone: full width, same as col-12. */
.sg-footer__nav {
display: flex;
flex-wrap: wrap;
flex: 1 1 auto;
min-width: 0;
}
.sg-footer__nav .sg-footer__col {
flex: 1 1 0;
min-width: 0;
}
@media (max-width: 991px) {
.sg-footer__nav .sg-footer__col { flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 575px) {
.sg-footer__nav .sg-footer__col { flex: 0 0 100%; max-width: 100%; }
}
/* Litho's footer column headings are uppercase alt-font at body size. */
.sg-footer__heading {
display: block;
font-family: var(--alt-font-family);
font-size: 15px;
font-weight: 500;
text-transform: uppercase;
color: #ffffff;
margin-bottom: 15px;
}
.sg-footer__list {
list-style: none;
margin: 0;
padding: 0;
}
.sg-footer__list a {
color: #8890a4;
text-decoration: none;
transition: color 0.3s ease;
}
.sg-footer__list a:hover {
color: var(--theme-color);
}
/* The logo sits as the first column of the top row, as on the live site - not
in the bottom bar. */
.sg-footer__col--brand {
flex: 0 0 auto;
width: 210px;
min-width: 0;
margin-right: 40px;
}
@media (max-width: 575px) {
.sg-footer__col--brand { width: 100%; margin-right: 0; }
}
.sg-footer__bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 30px 0;
}
.sg-footer__container--bottom {
align-items: center;
justify-content: space-between;
gap: 20px;
}
.sg-footer__home {
color: #ffffff;
text-decoration: none;
transition: color 0.3s ease;
}
.sg-footer__home:hover { color: var(--theme-color); }
.sg-footer__logo img {
height: 40px;
width: auto;
display: block;
}
.sg-footer__legal {
margin: 0;
font-size: 15px;
color: #8890a4;
}
/* The co-funding banner sits on WHITE below the dark footer, full-bleed, as on
the live site. */
.sg-footer__banner {
background-color: #ffffff;
padding: 10px 0;
}
.sg-footer__banner img {
display: block;
/* Constrained to the container, not full-bleed: measured 1039px wide on the
live site inside a 1440px viewport, i.e. held within the grid. */
width: 100%;
max-width: var(--sg-container);
height: auto;
margin-inline: auto;
padding-inline: var(--sg-gutter);
box-sizing: border-box;
}
/* ---------------------------------------------------------------------------
* Embedded form — .b-formcard (legacy: mesage_form_block, 4 pages)
*
* Litho's submit is
* .btn.btn-extra-large.btn-expand-ltr.btn-rounded.bg-theme
* which resolves to: 14px, padding 15px 28px, border-radius 50px, theme
* background. The success message is a Bootstrap .alert.alert-success.
*
* base's form card is a bordered, rounded panel with its own glow; Litho's form
* sits directly on the section, so the panel chrome is removed.
* ------------------------------------------------------------------------ */
.b-formcard,
.b-formsec {
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
padding: 0;
}
.b-formglow { display: none; }
.b-field {
margin-bottom: 20px;
}
.b-field input,
.b-field textarea,
.b-field select,
.b-inputs input,
.b-inputs textarea,
.b-inputs select {
width: 100%;
font-family: var(--main-font-family);
font-size: 15px;
line-height: 30px;
color: var(--text-color, #000);
background-color: #ffffff;
border: 1px solid #e4e4e4;
border-radius: 0;
padding: 10px 15px;
}
.b-field input:focus,
.b-field textarea:focus,
.b-inputs input:focus,
.b-inputs textarea:focus {
outline: 0;
border-color: var(--theme-color);
}
.b-field__err,
.b-field--err input,
.b-field--err textarea {
border-color: var(--alt-theme-color);
color: var(--alt-theme-color);
}
.b-field__hint {
font-size: 13px;
line-height: 24px;
color: #757575;
}
/* Litho's submit: rounded pill, theme background, white label. */
.b-formcard .b-cta,
.b-formsec .b-cta,
.b-formcard button[type="submit"],
.b-formsec button[type="submit"] {
font-size: 14px;
padding: 15px 28px;
border-radius: 50px;
background-color: var(--theme-color);
border-color: var(--theme-color);
color: #ffffff;
}
.b-formcard .b-cta:hover,
.b-formsec .b-cta:hover,
.b-formcard button[type="submit"]:hover,
.b-formsec button[type="submit"]:hover {
background-color: transparent;
color: var(--theme-color);
}
/* Bootstrap .alert.alert-success, which is what the legacy block rendered. */
.b-formcard__status,
.b-formstatus {
text-align: center;
padding: 12px 20px;
border: 1px solid #badbcc;
background-color: #d1e7dd;
color: #0f5132;
margin-bottom: 20px;
}
.b-formcard__status--err,
.b-formstatus--err {
border-color: #f5c2c7;
background-color: #f8d7da;
color: #842029;
}
/* ---------------------------------------------------------------------------
* Testimonial / content carousel
* (legacy: Testimonial_Slider_Block 3 pages, plus the two text sliders)
*
* Almost nothing to do here, which is worth recording. brilliance's
* CarouselBlock exposes only two component hooks - .b-slider__actions and
* .b-slider__btn - and lays its track out with inline Tailwind. Its slides are
* .b-card items, already styled by the grid/card section above. So the
* carousel needs only its control buttons.
*
* It also accepts card / media_stat_card / image children ONLY: there is no
* quote child, so the transform turns each testimonial into a card (author as
* title, quote as body) rather than emitting a `quote` that would render as
* nothing.
*
* DEGRADED: Litho drove these with Swiper. base's is a CSS snap-scroll track,
* so the layout holds but the drag and easing feel differ.
* ------------------------------------------------------------------------ */
.b-slider__btn {
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
border: 0;
border-radius: 999px;
background: rgb(0 0 0 / 8%);
color: #232323;
cursor: pointer;
transition: background 0.2s ease;
}
.b-slider__btn:hover,
.b-slider__btn:focus-visible {
background: rgb(0 0 0 / 16%);
}
/* ---------------------------------------------------------------------------
* Location map (legacy: Location_Map_Block, 3 pages)
* Litho renders the map full-width at a fixed 500px (.w-100.h-500px).
* ------------------------------------------------------------------------ */
.location-map-wrapper { margin: 0; }
.location-map {
width: 100%;
height: 500px;
border-radius: 0;
}
@media (max-width: 767px) {
.location-map { height: 350px; }
}
/* ---------------------------------------------------------------------------
* Data table — .b-table (legacy: Features_table)
* Litho uses Bootstrap's .table.table-striped.table-hover.table-bordered with
* a .table-dark header row and .align-middle cells.
* ------------------------------------------------------------------------ */
.b-table-wrap { overflow-x: auto; }
.b-table {
width: 100%;
border-collapse: collapse;
font-size: 15px;
line-height: 30px;
}
.b-table th,
.b-table td,
.b-table__cell {
border: 1px solid #dee2e6;
padding: 12px 15px;
vertical-align: middle;
}
/* .table-dark on the header row. */
.b-table thead th {
background-color: #212529;
color: #ffffff;
font-family: var(--alt-font-family);
font-weight: 500;
}
/* .table-striped */
.b-table tbody tr:nth-child(odd) {
background-color: rgba(0, 0, 0, 0.03);
}
/* .table-hover */
.b-table tbody tr:hover {
background-color: rgba(0, 0, 0, 0.06);
}
/* ---------------------------------------------------------------------------
* Icon point — .b-usp (used inside grids for icon feature lists)
* Litho's inline icon+text row: icon left, text beside it, body type.
* ------------------------------------------------------------------------ */
/* Litho's `.feature-box.feature-box-left-icon`:
.feature-box-left-icon flex row wrap, align-items stretch,
justify-content flex-start, text-align left
.feature-box-icon margin-right: 35px
.feature-box-content overflow: hidden; flex: 1
No gap here — the spacing rides on the icon's own Litho margin class, because
the two variants of this block space differently (35px vs 10px). */
.b-usp {
display: flex;
flex-flow: row wrap;
align-items: flex-start;
justify-content: flex-start;
gap: 0;
text-align: left;
}
/* The size and colour of the glyph come from the Litho utility classes the
transform now passes through on the `` itself (see the utilities block
below), NOT from here. brilliance styles this span as a 48x48 dark rounded
TILE with a 20px glyph — `width`, `height`, `background`, `border-radius`
and `display` all have to be cleared explicitly or its rule keeps supplying
them, which is how a bare Litho icon rendered as a dark tile. */
.b-usp__ico {
flex: 0 0 auto;
display: inline-block;
width: auto;
height: auto;
margin: 0;
padding: 0;
background: none;
border: 0;
border-radius: 0;
color: inherit;
font-size: inherit;
line-height: 1;
}
.b-usp__ico svg,
.b-usp__ico .cx-icon {
width: 1em;
height: 1em;
}
.b-usp__txt {
flex: 1;
overflow: hidden;
min-width: 0;
}
.b-usp__label {
margin: 0 0 10px;
font-family: var(--alt-font-family);
font-size: 15px;
line-height: 30px;
font-weight: 500;
color: #232323;
}
/* `.last-paragraph-no-margin p:last-of-type { margin-bottom: 0 }` */
.b-usp__body {
margin: 0;
font-size: 15px;
line-height: 30px;
color: var(--text-color, #000);
}
/* ---------------------------------------------------------------------------
* Litho icon/type utilities, carried on the element itself
* ---------------------------------------------------------------------------
* The legacy templates hardcode an icon's size, colour and spacing as classes
* on the `` — and they differ per block, not per item, so no single rule on
* `.b-usp__ico` can be right for all of them. Measured across the live pages,
* `feature-box-left-icon` icons are:
*
* BusinessFeaturesBlock icon-medium text-extra-light-gray 40px #b7b7b7
* ImageSliderFeaturesBlock text-large text-theme 18px cyan
* FeatureSectionAbout icon-medium text-theme 40px cyan
* NumberedFeatureBoxesBlock icon-medium text-fast-blue 40px #0038e3
* IconFeatureGridBlock icon-medium + the editor's own text_settings
*
* So the transform passes the legacy classes through and these define them —
* which is also how the legacy site does it. Only the ones actually reachable
* from migrated content are defined; `.text-theme` already comes from base's
* input.css.
* ------------------------------------------------------------------------- */
.icon-medium { font-size: 40px; }
.icon-large { font-size: 50px; }
.text-large { font-size: 18px; line-height: 22px; }
.text-extra-light-gray { color: #b7b7b7; }
.text-extra-dark-gray { color: #232323; }
.text-fast-blue { color: #0038e3; }
.margin-10px-right { margin-right: 10px; }
.margin-35px-right { margin-right: 35px; }
.margin-35px-bottom { margin-bottom: 35px; }
/* ---------------------------------------------------------------------------
* Progress bars — .sg-progress (legacy: Progress_Bars_Block, 1 page: home)
*
* Litho markup this reproduces (scripts/litho_rules.py progress progress-bar
* progress-title progress-step-style-01):
* .container > .row
* .col-xl-4.col-lg-5.col-md-6 heading + description
* .col-lg-6.offset-xl-2.offset-lg-1.col-md-6 bars
* .progress.progress-step-style-01 { overflow: visible; height: 8px;
* border-radius: 0; margin-top: 30px; }
* .progress-title { position: absolute; top: -28px; text-uppercase }
* .progress-bar.bg-theme { border-radius: 6px; width: 0 -> N%;
* transition: width .6s ease; }
*
* Two columns, ~33% / 66% (xl-4 / lg-6 with an lg-1 offset), matching Litho's
* grid maths; collapses to one stacked column below tablet, same breakpoint as
* the rest of this file (991px — see .sg-faq__col above). The bar itself is
* flattened to a simple flex row (label above the track) rather than Litho's
* absolutely-positioned title/percentage, which is unnecessary complexity once
* neither has to share a line with anything else.
* ------------------------------------------------------------------------ */
/* The legacy row is `col-xl-4` + `col-lg-6 offset-xl-2`, and an OFFSET cannot
be approximated by a gap: it is 2/12 of the row, not a fixed distance. A
"4 : 7 split with a clamped gap" put the bars at x=605 w=670 against the
live x=735 w=540 - out by 130px, the single largest per-block error left on
the site.
So this reproduces Bootstrap literally: 12 equal tracks across the row (the
container BOX, hence the negative margin - see "the .row negative margin"),
each column claiming its own span with its 15px gutters inside. That lands
the head content at 350@165 and the bars at 540@735, exactly. It also
degrades the way Litho does, since the lg and md spans are just different
`grid-column` values rather than another set of guessed proportions. */
.sg-progress {
display: grid;
grid-template-columns: minmax(0, 1fr);
width: 100%;
}
@media (min-width: 768px) {
.sg-progress {
grid-template-columns: repeat(12, minmax(0, 1fr));
align-items: start;
width: auto;
margin-inline: calc(var(--sg-gutter) * -1);
}
.sg-progress__col { padding-inline: var(--sg-gutter); }
/* col-md-6 + col-md-6 */
.sg-progress__col--head { grid-column: 1 / span 6; }
.sg-progress__col--bars { grid-column: 7 / span 6; }
}
@media (min-width: 992px) {
/* col-lg-5 + col-lg-6 offset-lg-1 */
.sg-progress__col--head { grid-column: 1 / span 5; }
.sg-progress__col--bars { grid-column: 7 / span 6; }
}
@media (min-width: 1200px) {
/* col-xl-4 + col-lg-6 offset-xl-2 */
.sg-progress__col--head { grid-column: 1 / span 4; }
.sg-progress__col--bars { grid-column: 7 / span 6; }
}
.sg-progress__heading {
font-family: var(--alt-font-family);
font-weight: 600;
letter-spacing: -1px;
color: var(--text-color, #232323);
margin-bottom: 1.5rem;
}
.sg-progress__desc {
color: var(--text-color, #000);
max-width: 90%;
}
@media (max-width: 767px) {
.sg-progress__desc { max-width: 100%; }
}
.sg-progress__col--bars {
display: flex;
flex-direction: column;
min-width: 0;
}
.sg-progress__item { min-width: 0; }
/* `margin-4-half-rem-bottom`, dropped on the last bar as legacy does with
`{% if not forloop.last %}`. */
/* 33px, not 63. Litho's 63px sits between two 8px TRACKS and its title is
absolutely positioned INSIDE the gap (30px above its own track), so the
track-to-track distance is 8 + 63 = 71. Our flattened item carries that
title in normal flow, so 63 here would add its 30px on top and space the
tracks 93 apart. 33 + 30 restores the 71. */
.sg-progress__item + .sg-progress__item { margin-top: 33px; }
@media (max-width: 767px) {
/* sm-margin-6-rem-bottom: 84px between tracks, less the same 30px. */
.sg-progress__item + .sg-progress__item { margin-top: 54px; }
}
.sg-progress__title {
display: block;
font-family: var(--alt-font-family);
/* `text-small`: a fixed 13px/22px. The rem values here resolved against
this project's 14px root and came out 11.4px/15.9px - a fifth smaller
than production - and `0.02em` of tracking that Litho does not have. */
font-size: 13px;
line-height: 22px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: normal;
color: #232323;
/* 22 + 8 + the 8px track = the 30px Litho reserves above its own
absolutely-positioned title, so the tracks land on the same y. */
margin-bottom: 8px;
}
.sg-progress__track {
position: relative;
width: 100%;
height: 8px;
/* NO trough. Litho's `.progress` computes to a transparent background with
square corners - only the filled bar is visible, over whatever the
section behind it is. We were drawing an 8% black rail production does
not have, and rounding it. */
border-radius: 0;
background-color: transparent;
overflow: visible;
}
.sg-progress__bar {
position: relative;
height: 100%;
border-radius: 6px;
background: var(--theme-color);
/* Set to 0 inline by the template; JS (initProgress) animates it up to
data-target once the track scrolls into view. */
transition: width 1s ease;
/* No min-width. Litho's `.progress-bar` has none: the percentage label is
absolutely positioned ABOVE the track, not inside it, so a narrow bar has
nothing to hold open. A floor here made every low percentage read high. */
}
.sg-progress__pct {
position: absolute;
/* `-30px`, not `-1.6em`. `em` on an absolutely-positioned offset resolves
against the element's OWN font-size, so 1.6em of a 0.8125rem (11.4px at
this project's 14px root) label lifted it a mere 18px - it sat on the
8px track. Litho pins it at a flat `top: -30px`, and with the 13px/22px
box below that puts its bottom edge exactly 8px clear of the track,
sharing the line with `.sg-progress__title` on the left. */
top: -30px;
right: 0;
font-family: var(--alt-font-family);
/* Matched to the title's fixed 13px/22px rather than left to inherit, so
both halves of that line sit on one baseline. */
font-size: 13px;
line-height: 22px;
font-weight: 500;
color: var(--text-color, #232323);
}
@media (prefers-reduced-motion: reduce) {
.sg-progress__bar { transition: none; }
}
/* ── Language switcher + footer credit ──────────────────────────────────────
Both close gaps that scripts/compare_with_production.py found against the
live site: the switcher showed bare locale codes ("el") where production
shows a flag and the language's own name, and the footer carried no
copyright/credit line at all. */
.sg-langs {
position: relative;
display: flex;
align-items: center;
margin-left: 0.5rem;
}
/* Collapsed trigger: flag + code + caret, matching production's dropdown
toggle. Sized off the header's 72px row so it sits on the single line. */
.sg-langs__toggle {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0 12px;
height: 72px;
background: none;
border: 0;
cursor: pointer;
font-family: var(--alt-font-family);
font-size: 16px;
font-weight: 500;
/* Matches .sg-nav__link — the nav sits over a dark hero, so the black
--text-color the inline version used was invisible there. */
color: #ffffff;
line-height: 72px;
}
.sg-langs__code {
letter-spacing: 0.5px;
}
.sg-langs__caret {
font-size: 11px;
transition: transform 0.25s ease;
}
.sg-langs__flag {
width: 20px;
height: 15px;
flex: 0 0 auto;
border-radius: 2px;
object-fit: cover;
}
/* Same hover/focus-within mechanism as .sg-nav__submenu — no JS. */
.sg-langs__menu {
position: absolute;
top: 100%;
right: 0;
min-width: 180px;
padding: 10px 0;
background-color: #ffffff;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
z-index: 10;
}
.sg-langs:hover .sg-langs__menu,
.sg-langs:focus-within .sg-langs__menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.sg-langs:hover .sg-langs__caret,
.sg-langs:focus-within .sg-langs__caret {
transform: rotate(180deg);
}
.sg-langs__item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 8px 20px;
font-family: var(--alt-font-family);
font-size: 16px;
color: var(--text-color, #000);
text-decoration: none;
white-space: nowrap;
}
.sg-langs__item:hover,
.sg-langs__item:focus-visible {
color: var(--theme-color, #00aeff);
}
.sg-langs__item--current {
color: var(--theme-color, #00aeff);
font-weight: 600;
}
/* The two-letter code used to be visually hidden here, because the switcher
sat in the header row and there was no width for it on a phone. It now sits
inside the collapsing panel as a full-width row, so there is room - and
production's own mobile switcher shows a language label too. Hiding it left
a bare flag with a caret and nothing to read. */
@media (max-width: 767px) {
.sg-langs__toggle {
padding-inline: 8px;
}
}
.sg-footer__copyright {
margin: 0;
font-size: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
line-height: 1.6;
opacity: 0.85;
}
.sg-footer__credit a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
.sg-footer__credit a:hover,
.sg-footer__credit a:focus-visible {
color: var(--theme-color, #00aeff);
}
/* On a phone the credit reads better on its own line, as it does on the live
site (Bootstrap's d-block d-md-inline pair). */
@media (max-width: 640px) {
.sg-footer__credit {
display: block;
}
}
/* ==========================================================================
Brilliance component tokens -> the Synergas palette
--------------------------------------------------------------------------
mysite/static/css/brilliance.css supplies the geometry for every `b-*`
component and paints it from its own brand tokens, which its own comments
describe as "fallback defaults ... overridden from BrillianceBrandSettings".
This project has no such settings model, so the remap lives here — and it is
expressed in terms of the SAME custom properties BrandingSettings already
drives (--theme-color, --alt-theme-color, --theme-color-5), so an editor
changing the palette in Settings -> Branding restyles these components too,
rather than being silently overridden by another brand's navy.
--navy carries 172 of the uses in that file (text, surfaces, borders), so it
is mapped to the dominant dark of the live site rather than to a blue:
Litho's `text-extra-dark-gray` is #232323 and production uses it for
essentially all body copy and headings.
Loaded after brilliance.css, so these win. Values resolve at use time, so it
does not matter that base.html's inline :root block sets --theme-color later.
========================================================================== */
:root {
--navy: var(--theme-color-5, #232323);
--cyan: var(--theme-color, #00aeff);
--sky: color-mix(in srgb, var(--theme-color, #00aeff) 55%, #ffffff);
--red: var(--alt-theme-color, #da0f32);
/* Synergas has no green in its palette; pointing it at the theme blue keeps
any component that reaches for --green on-brand instead of off-brand. */
--green: var(--theme-color, #00aeff);
--deep-navy: #0b0b0b;
}
/* The role-card background is the one asset brilliance.css references by
relative path (../img/brilliance/images/role-card-bg.jpg). That image was not
part of the port, so the rule would request a 404 on every page that uses the
component; neutralised until a Synergas equivalent exists. */
.b-role-card,
.b-rolecard {
background-image: none;
}
/* --------------------------------------------------------------------------
Overlap repairs, where brilliance.css out-specifies this file
--------------------------------------------------------------------------
57 of the 66 `b-*` classes styled here are also styled by brilliance.css:
this file is a deliberate re-skin of those components to match Litho. Loading
brilliance.css underneath fills the 419 classes this file never covered
(member and news cards, sliders, dots, page wrappers, the card variants), and
because this file loads LAST it still wins at equal specificity. It only
loses where brilliance's selector is more specific, which needs repairing
here rather than by dropping the component sheet.
-------------------------------------------------------------------------- */
/* brilliance frames the glyph as a 60px BLACK tile and so paints the icon white
(`.b-card__glyph i { color: var(--white); font-size: 26px }`). This file
frames the glyph as a 130px WHITE circle to match Litho's
`feature-box-icon`, so that rule left the icon white-on-white and invisible.
The font-size half matters just as much and was missed: brilliance's
`.b-card__glyph i` is (0,2,0), so it beat the 50px INHERITED from
`.b-card__glyph`, and the icons drew at 26px against production's 50px
(`icon-large`). Restating it here at the same specificity, later in the
cascade, is what fixes it.
An earlier version of this comment said production puts `text-fast-blue`
(#0038e3) on these icons. It does not — that class appears nowhere in any
rendered page. The icons in the circular feature boxes carry
`text-theme--not-important`, which is not a Litho class at all, so they
inherit and render BLACK; see `.b-card--outline` below. Other icons on the
site do use a real `text-theme`, which is why the default here stays the
theme colour. */
.b-card__glyph i,
.b-card__glyph svg,
.b-card__glyph .cx-icon {
color: var(--theme-color, #00aeff);
fill: currentColor;
/* .icon-large */
font-size: 50px;
line-height: 1;
}
/* The circular feature boxes (legacy `icon_feature_box`) are the instances
whose icons carry the typo'd `text-theme--not-important`, so production
renders them black rather than cyan — measured rgb(0, 0, 0) on the live home
page. Reproduced because the brief is 1:1 with production; it looks like an
unintended regression there, and reverting it is a one-line change if the
branded colour is preferred. */
.b-card--outline .b-card__glyph i,
.b-card--outline .b-card__glyph svg,
.b-card--outline .b-card__glyph .cx-icon {
color: inherit;
}
/* Litho's `.feature-box` has no surface at all, so no corner to round.
The single-class `.b-card--outline` rule below is NOT enough on its own:
brilliance also ships `.b-card--outline.b-card--h-auto:not(.b-card--rgb)
:not(.b-card--bar) { border-radius: 20px }` for the "auto height" outline
card variant (used by the two-up media+text bands, e.g. the "Pioneer in
Cyprus Energy" card), and that selector's four classes outweigh this
file's one - it kept its 20px rounded corners regardless of load order.
Restated here at matching specificity so the cascade's tie-break (later
sheet wins) actually applies. */
.b-card--outline {
border-radius: 0;
}
.b-card--outline.b-card--h-auto:not(.b-card--rgb):not(.b-card--bar) {
border-radius: 0;
}
/* brilliance sets small labels — card kickers, member roles, CTA-band eyebrows —
in Roboto Mono via `--mono`, 33 uses. Synergas has no monospace in its type
system; the live site sets these in the alt font. Remapping the TOKEN fixes
every one of those uses at once, rather than chasing each component. */
:root {
--mono: var(--alt-font-family), "Helvetica Neue", sans-serif;
}
/* --------------------------------------------------------------------------
Section rhythm — production's `section { padding: 40px 0 }`
--------------------------------------------------------------------------
The legacy sections got their vertical padding from a bare `section` rule.
Nothing reproduced it here, so the migrated pages had no vertical rhythm at
all: computed padding 0 on 51 of 51 sections, and the pages read as one dense
wall of text.
40px, NOT the 130px this first shipped as. That number came from the vendored
"Litho Theme/html/css/style.css" in this repo, which is the stock theme —
production's own served stylesheet overrides it:
section { padding: 40px 0; overflow: hidden; }
section.half-section { padding: 80px 0; }
section.big-section { padding: 160px 0; }
section.extra-big-section { padding: 200px 0; }
(verified by fetching https://synergas.com.cy/static/css/style.55e0a0c57433.css)
At 130px every page ran ~60% taller than production, with ~260px voids
between sections. The lesson is to measure the DEPLOYED stylesheet, not the
theme the site was built from.
The three -section modifiers are not reproduced: the transform carries no
per-section legacy class, and the pages audited use the 40px base throughout.
A section needing 160px will have to carry that intent through block data.
This has to be CSS, not block data. `_style_open.html` renders
`pt-{{ pt|default:'0' }}`, and Django's `default` filter fires on the empty
string, so the spacing field's "Default" choice still emits `pt-0` — no value
means "no padding utility".
`section > .block-styled` targets ONLY the section-level wrapper: the same
class is on every container, column, row and card, and those must stay at 0
or they would double up. At (0,2,1) it also out-specifies the `pt-0`/`pb-0`
utilities on the element itself.
-------------------------------------------------------------------------- */
section > .block-styled {
padding-block: 40px;
}
/* A section painting a full-bleed background image is a hero: it sizes itself
from the image and the copy inside it, and production's heroes are `p-0`.
NOTE the selector shape. The parallax/background wrapper is `main`'s DIRECT
CHILD DIV, ABOVE the — not the section's own child — so the obvious
`section > .block-styled.b-bg-parallax` never matched anything and heroes kept
the full section padding. An audit pass caught that ("hero exception FAILED")
and it took reading the real nesting to see why. */
main > .b-bg-parallax section > .block-styled,
main > .b-bg-fit-width section > .block-styled {
padding-block: 0;
}
/* --------------------------------------------------------------------------
Media CTA on a light section
--------------------------------------------------------------------------
brilliance.css hard-codes `.b-mediacta__title { color: #fff }` and
`.b-mediacta__text { color: rgba(255,255,255,.78) }` because in the reference
app that block always sits on a dark panel. This project emits it on white
sections too, and the result was a completely INVISIBLE section — the audit
caught "Our Purpose" on /about-us/ as white-on-white with only a stray rule
visible. Default to the body colours here and let the dark-section wrapper
opt back into white, which is the same shape as the glyph repair above.
-------------------------------------------------------------------------- */
.b-mediacta__title {
color: var(--text-color, #232323);
}
.b-mediacta__text {
color: color-mix(in srgb, var(--text-color, #232323) 78%, transparent);
}
.dark-section .b-mediacta__title,
.b-bg-parallax .b-mediacta__title,
.b-ctaband--dark .b-mediacta__title {
color: #ffffff;
}
.dark-section .b-mediacta__text,
.b-bg-parallax .b-mediacta__text,
.b-ctaband--dark .b-mediacta__text {
color: rgba(255, 255, 255, 0.78);
}
/* --------------------------------------------------------------------------
A column carrying a background colour reads as a contained panel
--------------------------------------------------------------------------
`cv/blocks/layout/templates/column.html` puts `.b-col-card` on the inner
wrapper to "paint the column's background on the inner card (padding +
rounded + shadow)", but the class is defined NOWHERE in the project — the
template is the only occurrence. So a coloured column got its colour with
zero padding and only content height, which is wrong for
`three_column_hero`'s middle panel: Litho's `.bg-theme` columns are padded
(`padding-5-half-rem-lr` / `lg-padding-3-rem-lr`) and fill the row height.
Lives here rather than in mysite/static/css/input.css — the audit's spec
suggested input.css, but that file is a Tailwind source compiled into
mysite.css and this checkout has no package.json and no tailwindcss binary,
so there is no build step to run. synergas.css loads last and needs none.
-------------------------------------------------------------------------- */
.b-col-card {
padding: 3rem;
height: 100%;
}
@media (max-width: 991px) {
.b-col-card {
padding: 2rem;
}
}
/* --------------------------------------------------------------------------
Nav link colour must follow what is BEHIND the nav
--------------------------------------------------------------------------
`.sg-nav__link` was hardcoded white, which is right on the pages whose first
section is a full-bleed dark hero — the nav is fixed and transparent, so it
sits over the photo. It is wrong on every page without one: on
/about-us/business-profile/ the links were white on white at a contrast ratio
of 1.00, so four of the five nav items were invisible. Production shows dark
text on its white header there.
Default to the branding's own `--nav-text-color`, then go white only when the
page's FIRST section is a dark/parallax hero. `:has()` is doing real work
here: the hero is a DESCENDANT OF A SIBLING of the nav, so there is no
ancestor to hang this on and no way to express it without looking forward.
-------------------------------------------------------------------------- */
.sg-nav__link,
.sg-langs__toggle,
.sg-langs__code {
color: var(--nav-text-color, #0f172a);
}
/* The hero classes land on MAIN'S FIRST CHILD DIV, above the — not
on `section > .block-styled`. The earlier selector asked for them on the
inner element, so it matched nothing and every hero page kept the dark
default: on /our-products/ four of five nav links were navy on a near-black
photo. Same mistake the hero padding rule made; measured against the real
DOM this time (`main > div.block-styled.dark-section.b-bg-parallax`). */
/* DESKTOP ONLY. Below 992px the header is an opaque white bar whatever is
behind it, so white link text there is invisible - it is what made every
label in the open mobile panel disappear. These selectors are (0,3,2), so
no mobile rule on `.sg-nav__link` could outrank them; scoping the behaviour
to the band it belongs to is the fix, not more !important.
The whole NINE-selector list has to be inside the media query. Wrapping
only its last three left the first six dangling on a trailing comma, which
swallowed the `@media` and destroyed the rule outright - every hero page's
nav links fell back to `--nav-text-color` and went navy on a dark photo. */
@media (min-width: 992px) {
body:has(main > div:first-child.b-bg-parallax) .sg-nav__link,
body:has(main > div:first-child.b-bg-parallax) .sg-langs__toggle,
body:has(main > div:first-child.b-bg-parallax) .sg-langs__code,
body:has(main > div:first-child.dark-section) .sg-nav__link,
body:has(main > div:first-child.dark-section) .sg-langs__toggle,
body:has(main > div:first-child.dark-section) .sg-langs__code,
body:has(.sg-vhero) .sg-nav__link,
body:has(.sg-vhero) .sg-langs__toggle,
body:has(.sg-vhero) .sg-langs__code {
color: #ffffff;
}
/* `.sg-nav__link:hover { color: var(--theme-color) }` further up this file
never wins here: adding `:hover` to a class selector only adds one to the
specificity's B column, so its (0,2,0) is still below this block's
(0,3,2). The extra `:hover`/`:focus-visible` pseudo-class below pushes
these selectors to (0,4,2), which is enough to win without `!important`. */
body:has(main > div:first-child.b-bg-parallax) .sg-nav__link:hover,
body:has(main > div:first-child.b-bg-parallax) .sg-nav__link:focus-visible,
body:has(main > div:first-child.dark-section) .sg-nav__link:hover,
body:has(main > div:first-child.dark-section) .sg-nav__link:focus-visible,
body:has(.sg-vhero) .sg-nav__link:hover,
body:has(.sg-vhero) .sg-nav__link:focus-visible {
color: var(--theme-color);
}
}
/* --------------------------------------------------------------------------
Neutralise brilliance's opinionated card GEOMETRY
--------------------------------------------------------------------------
Loading brilliance.css filled 419 previously-unstyled classes, but its card
is a fixed-size portrait tile — `max-width: 380px` with `aspect-ratio: 38/50`
— because in the reference app that is the design. Here the cards sit in grid
cells up to 585px wide, so every one rendered as a 380x500 box with 205px of
dead space beside it, and the aspect ratio forced `.b-card__title` down by
~177px of margin. Production's equivalent cards are content-height and fill
their cell.
Geometry only — brilliance keeps supplying the surface, border and shadow.
-------------------------------------------------------------------------- */
.b-card {
max-width: none;
aspect-ratio: auto;
height: auto;
}
/* The title drop is driven by a custom property, so the fix is to neutralise
THAT rather than fight the margin: brilliance's
`.b-card:not(.b-card--h-auto):not(.b-card--inline) .b-card__title` is (0,3,0)
and a plain `.b-card__title { margin-top: 0 }` at (0,1,0) never won. The 64%
drop exists to push the title down inside the fixed 38/50 portrait tile; with
the aspect ratio gone it was just ~177px of dead space between the icon and
its title. Same selector shape, loaded later, so it wins on order. */
.b-card:not(.b-card--h-auto):not(.b-card--inline) {
--card-stack-drop: 0%;
}
/* --------------------------------------------------------------------------
Image cards: the title has to be light like the rest of the card
--------------------------------------------------------------------------
brilliance sets `.b-card--img { color: var(--white) }` and whitens
`.b-card--img .b-card__body` explicitly, but has no rule for the TITLE, so
this file's `.b-card__title { color: #232323 }` won and the titles rendered
dark-on-dark over the photo — measured at a 1.52:1 contrast ratio, i.e.
invisible, on 13 cards across the product pages while the kicker beside them
was correctly white. Third instance of the same cascade clash as the
white-on-white media CTA, so it is worth stating the rule once: whenever
brilliance colours a CONTAINER, this file must not colour its children
unconditionally.
-------------------------------------------------------------------------- */
.b-card--img .b-card__title,
.b-card--img .b-card__title--h3 {
color: #ffffff;
}
/* --------------------------------------------------------------------------
Sliders show ONE slide, as every legacy slider did
--------------------------------------------------------------------------
brilliance's carousel is a multi-card rail: its slides are
`w-[min(380px,80vw)]` in an `overflow-x-auto snap-x` track, so 1.5 of them
showed at 1440px and the rest sat clipped off-canvas. Every slider this site
migrates from was Swiper at `slidesPerView: 1` — verified in the legacy
templates: ImageSliderFeaturesBlock, TextSliderBlockStyle04,
VideoBackgroundHeroBlock all hardcode 1, and ContentSliderBlock defaults to
1 — and production's testimonial slider likewise shows a single centred quote.
The track already carries `snap-x snap-mandatory`, so widening each slide to
the full track is all that is needed: one slide per view, the arrows page
through them, and it degrades to a swipe on touch.
Targeted by DATA ATTRIBUTE, not by class: the slide's own classes are
Tailwind arbitrary values (`w-[min(380px,80vw)]`) which are not a stable
hook, whereas `data-b-slider-track` is what the block template and its JS
both key on. (An audit pass read that attribute as a `.b-slider-track` class
and concluded the CSS was missing — it is not; the track is styled by inline
utilities.)
-------------------------------------------------------------------------- */
[data-b-slider-track] > * {
width: 100%;
max-width: 100%;
}
/* The coverflow/"selectable" variant is a deliberate centre-focus rail — it
centres the active card with its neighbours peeking — so it keeps its own
card width. */
[data-b-coverflow] [data-b-slider-track] > * {
width: auto;
max-width: none;
}
/* --------------------------------------------------------------------------
The heading scale — Litho's, from production's own stylesheet
--------------------------------------------------------------------------
`.b-h1` .. `.b-h6` had NO rule in either stylesheet, so every heading tier
rendered at the same ~30px and the two tiers production clearly distinguishes
(a 39.9px section title vs a 48px page title) looked identical. The audit
measured production's h4 at 39.9px, which is 2.85rem at this project's 14px
root — exactly the value below, so the scale is production's rather than
approximated.
From https://synergas.com.cy/static/css/style.55e0a0c57433.css:
h1 5rem/5rem h2 3.9rem/4.2rem h3 3.4rem/3.9rem
h4 2.85rem/3.4rem h5 2.30rem/3rem h6 1.80rem/2.5rem
h1..h6 { margin: 0 0 25px; letter-spacing: -0.5px; font-weight: inherit }
`font-weight: inherit` is deliberate and load-bearing in Litho: a heading is
NOT bold unless a class makes it so, which is why the legacy markup carries
`font-weight-500`/`-600` everywhere. Reproducing it here keeps migrated
headings at the same weight as the live ones.
Sizes are in rem and the root already steps down at Litho's breakpoints
(14/13/12/11px), so the whole scale is responsive with no extra queries —
which is the mechanism Litho relies on.
-------------------------------------------------------------------------- */
.b-h1, .b-h2, .b-h3, .b-h4, .b-h5, .b-h6 {
margin: 0 0 25px;
padding: 0;
/* Litho's defaults, but as var() FALLBACKS so a per-block Advanced styling
choice can win. `--fw` / `--ls` are set inline on the .block-styled wrapper
from the block's Text settings; with no choice made, the fallback is what
Litho ships and the heading is indistinguishable from before.
`inherit` as a var() fallback is legal and keeps the original meaning: a
heading has no weight of its own, so it takes the surrounding weight unless
the editor says otherwise. That is the whole reason the live site's markup
carries `font-weight-600` on individual headings. */
letter-spacing: var(--ls, -0.5px);
font-weight: var(--fw, inherit);
font-family: var(--alt-font-family), sans-serif;
}
.b-h1 { font-size: 5rem; line-height: 5rem; }
.b-h2 { font-size: 3.9rem; line-height: 4.2rem; }
.b-h3 { font-size: 3.4rem; line-height: 3.9rem; }
.b-h4 { font-size: 2.85rem; line-height: 3.4rem; }
.b-h5 { font-size: 2.30rem; line-height: 3rem; }
.b-h6 { font-size: 1.80rem; line-height: 2.5rem; }
/* Card and member titles are component text, not page headings — they keep
whatever their component sets, or the scale above would blow them up. */
.b-card__title,
.b-card__title--h3,
.b-member__name,
.b-ncard__title,
.b-numlist__label {
font-size: inherit;
line-height: inherit;
letter-spacing: normal;
margin: 0;
}
/* --------------------------------------------------------------------------
Section eyebrows — the small uppercase label above a section title
--------------------------------------------------------------------------
Every legacy block that pairs a subtitle with a heading renders that subtitle
as an uppercase, letter-spaced, half-opacity label. From the templates:
CtaTitleBlock.html