/* ============================================================
Sierra — layout layer.
This file replaces the 1,535 rules of SiteOrigin-generated CSS that the
static prototype carried (section (C) of the original sierra.css, plus the
two builder-ID blocks from section (G)). Those rules were selected by
per-instance builder IDs — #pg-8-1, #pgc-8-1-0, #pl-8 — which do not exist
in a hand-built theme, and they only ever expressed column widths, row
gutters, flex-direction and row padding.
Every value below was measured from the prototype, so output is unchanged:
gutter 30px
mobile stack <= 780px (SiteOrigin's breakpoint)
row padding 7 distinct values -> the .s-sec scale
row surfaces 6 distinct colors -> the .s-sec colour modifiers
column splits 11 distinct combos -> the .s-row modifiers
Mobile-first: .s-row is a single column by default and only becomes
multi-column above the breakpoint, which avoids needing !important to
unwind the desktop templates.
============================================================ */
/* ---- Rows ------------------------------------------------------------- */
/* CSS Grid with `gap` expresses exactly what SiteOrigin emulated with
`width: calc(60% - (0.4 * 30px))` and a trailing margin-right, but without
the per-instance arithmetic. Fractional units distribute the space left
after the gap in the same proportions. */
.s-row {
display: grid;
gap: 30px;
grid-template-columns: 1fr;
align-items: start;
}
/* Rows whose columns should stretch to equal height (cards, bordered cells).
Mirrors the prototype's `align-items: flex-start` vs `stretch` split. */
.s-row--stretch { align-items: stretch; }
@media (min-width: 781px) {
.s-row--15-85 { grid-template-columns: 15fr 85fr; }
.s-row--20-80 { grid-template-columns: 20fr 80fr; }
.s-row--30-70 { grid-template-columns: 30fr 70fr; }
.s-row--40-60 { grid-template-columns: 40fr 60fr; }
.s-row--50-50 { grid-template-columns: 1fr 1fr; }
.s-row--60-40 { grid-template-columns: 60fr 40fr; }
.s-row--70-30 { grid-template-columns: 70fr 30fr; }
.s-row--thirds { grid-template-columns: repeat(3, 1fr); }
.s-row--fourths{ grid-template-columns: repeat(4, 1fr); }
.s-row--fifths { grid-template-columns: repeat(5, 1fr); }
.s-row--sixths { grid-template-columns: repeat(6, 1fr); }
}
/* ---- Cells ------------------------------------------------------------ */
.s-col { box-sizing: border-box; min-width: 0; }
/* No owl selector here. The prototype spaced stacked widgets with
`#pl-X .so-panel { margin-bottom: 30px }`, which the restored builder CSS still
provides for imported rows. Adding margin between *every* child also hit the
footer columns — four elements each — inflating the footer by 67px. */
/* ---- Section padding scale -------------------------------------------- */
/* Measured frequencies from the prototype are noted so the common case stays
the default and nobody has to guess which modifier is "normal". */
.s-sec { padding: 70px 0; } /* 27 rows — the default band */
.s-sec--flush { padding: 0; } /* 20 rows */
.s-sec--sm { padding: 50px 0; } /* 9 rows */
.s-sec--xs { padding: 40px 0; } /* 7 rows */
.s-sec--tall { padding: 140px 0; } /* 1 row — parallax band */
.s-sec--indent { padding: 0 150px; } /* 8 rows — side-indented copy */
/* Inner-page hero band: 196px top / 150px left in the prototype, measured from
where its
actually lands (x=150, y=196). */
.s-hero-band,
.s-sec--hero { padding: 196px 0 80px 150px; }
/* ---- Row overlay ------------------------------------------------------- */
/* SiteOrigin tinted a row by painting an absolutely-positioned child over the
row's own background colour at low opacity — a dark base, then ~15% of the
photo on top, then the content above both. Reproduced with a pseudo-element
so a section stays one DOM node. The z-index:1 here matters: it makes the
section a stacking context, so ::before at -1 sits above the section's own
background instead of disappearing behind it. */
.s-sec--overlay { position: relative; z-index: 1; overflow: hidden; }
.s-sec--overlay > * { position: relative; }
.s-sec--overlay::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-color: var(--s-overlay-bg, #111318);
background-image: var(--s-overlay-img, none);
background-position: center center;
background-size: cover;
opacity: var(--s-overlay-opacity, 0.15);
}
/* ---- Section surfaces -------------------------------------------------- */
.s-sec--charcoal { background-color: #111318; } /* 18 rows */
.s-sec--red { background-color: #c0272d; } /* 16 rows — CTA bands */
.s-sec--black { background-color: #0a0a0a; } /* 7 rows */
.s-sec--slate { background-color: #1a1d24; } /* 6 rows */
.s-sec--ink { background-color: #0c0c0c; }
.s-sec--ink-alt { background-color: #0b0b0b; }
/* Background-image bands. The prototype used one fixed-attachment parallax
(facility exterior) and two cover/repeat bands (testimonials). */
.s-sec--bg { background-position: center center; background-size: cover; }
.s-sec--bg-fixed { background-attachment: fixed; }
.s-sec--bg-repeat { background-repeat: repeat; background-size: auto; }
/* ---- Responsive ------------------------------------------------------- */
/* Kept verbatim from section (G): breathing room below the transparent header
on the home hero. The two blocks that sat beside it targeted builder IDs and
are re-expressed as the semantic rules underneath. */
@media (max-width: 1024px) {
.sm-headline { margin-top: 100px; }
}
@media (max-width: 921px) {
/* Inner-page hero banners kept their desktop 196px/150px padding on mobile
because SiteOrigin emitted it unconditionally. Replace with spacing that
clears the transparent mobile header. Same specificity as the base rule
and declared later, so no !important is needed. */
.s-hero-band,
.s-sec--hero { padding: 110px 22px 50px; }
/* Rows using the 150px desktop side indent drop it on mobile. */
.s-sec--indent { padding-left: 22px; padding-right: 22px; }
}
@media (max-width: 780px) {
/* Parallax is unreliable on mobile browsers and causes jank; the prototype's
fixed attachment is dropped in favour of a normal cover background. */
.s-sec--bg-fixed { background-attachment: scroll; }
}