: 30px/42px) */
p { font-family: var(--font-body); font-size: 30px; line-height: 42px; margin: 0 0 1rem; }
.lead { font-family: var(--font-body); font-size: 30px; line-height: 42px; color: var(--ink); max-width: none; }
.bodycopy { font-family: var(--font-body); font-size: 30px; line-height: 42px; color: var(--ink); max-width: none; }
p.small, .lead.small, .bodycopy.small { font-size: 18px; line-height: 26px; }
/* display heading (mirrors h2 scale) */
.display { font-family: var(--font-head, var(--font-body)); font-size: 94px; line-height: 100px; letter-spacing: -1px; font-weight: 400; }
/* links: a{ color: inherit } */
a { color: inherit; text-decoration: none; }
/* .link — small uppercase, red ($red #F45446 -> --accent-3), underline offset 10px */
.link {
display: inline-flex; align-items: center;
font-family: var(--font-head, var(--font-body));
font-size: 18px; line-height: 20px; letter-spacing: 2px;
text-transform: uppercase; position: relative;
color: var(--accent-3);
text-decoration: underline; text-underline-offset: 10px;
margin-right: 40px; cursor: pointer;
}
/* buttons — modelled on .gform_button: yellow ($yellow -> --accent),
black text, radius 10px, uppercase, letter-spacing 3px, padding 24px 32px */
.btn {
display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
background: var(--accent); color: var(--ink-deep); border: 0;
padding: 24px 32px; border-radius: var(--radius-sm);
font-family: var(--font-head, var(--font-body));
font-weight: 400; font-size: 18px; letter-spacing: 3px; text-transform: uppercase;
text-align: left; text-decoration: none;
transition: filter .2s, transform .2s cubic-bezier(.33,1,.68,1), box-shadow .2s, background-color .25s linear, color .25s linear;
}
.btn:hover { background: var(--ink-deep); color: #fff; }
.btn.ghost { background: transparent; color: var(--brand-ink); border: 1.5px solid var(--line); }
.btn.ghost:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); }
.btn.sm { padding: 14px 20px; font-size: 14px; letter-spacing: 2px; }
.btn.lg { padding: 28px 40px; font-size: 20px; }
/* nav CTA — yellow accent bar, uppercase 18px */
.btn-cta { font-family: var(--font-head, var(--font-body)); font-size: 18px; letter-spacing: 3px; text-transform: uppercase; }
/* section vertical rhythm — themes use .row margin-bottom 65px -> 50px (md) -> 30px (sm) */
section.block { padding: 65px 0; }
section.block.tight { padding: 44px 0; }
section.block.warm { background: var(--warm); }
section.block.ink { background: var(--ink-deep); color: #fff; }
section.block.ink h1, section.block.ink h2, section.block.ink h3, section.block.ink h4 { color: #fff; }
section.block.ink .lead, section.block.ink .bodycopy { color: rgba(255,255,255,.85); }
section.block.ink .label, section.block.ink .eyebrow { color: rgba(255,255,255,.6); }
/* ===== responsive (resp-max => max-width) ===== */
@media screen and (max-width: 1800px) {
h2, .display { font-size: 76px; line-height: 80px; }
h3 { font-size: 56px; line-height: 60px; }
h4 { font-size: 28px; line-height: 30px; }
h5, .label, .eyebrow { font-size: 16px; line-height: 20px; }
p, .lead, .bodycopy { font-size: 28px; line-height: 30px; }
p.small, .lead.small, .bodycopy.small { font-size: 18px; line-height: 26px; }
}
@media screen and (max-width: 1200px) {
h1 { font-size: 56px; line-height: 60px; }
h2, .display { font-size: 56px; line-height: 60px; }
h3 { font-size: 40px; line-height: 42px; }
h4 { font-size: 24px; line-height: 28px; }
p, .lead, .bodycopy { font-size: 24px; line-height: 28px; }
p.small, .lead.small, .bodycopy.small { font-size: 18px; line-height: 26px; }
}
@media screen and (max-width: 880px) {
h1 { font-size: 38px; line-height: 40px; letter-spacing: -1px; }
h2, .display { font-size: 38px; line-height: 40px; }
h3 { font-size: 30px; line-height: 32px; }
h4 { font-size: 18px; line-height: 24px; }
h5, .label, .eyebrow { font-size: 12px; line-height: 14px; }
p, .lead, .bodycopy { font-size: 18px; line-height: 24px; }
p.small, .lead.small, .bodycopy.small { font-size: 18px; line-height: 26px; }
.link { font-size: 14px; line-height: 16px; }
section.block { padding: 50px 0; }
}
@media screen and (max-width: 480px) {
section.block { padding: 30px 0; }
}
/* ---------------- header-nav ---------------- */
/* ---- Site header / nav — ECF base (resolved from nav{} in layout/_main.scss) ----
resp-max($size) => @media screen and (max-width:$size) (exact, per config/_mixins.scss).
Breakpoints xl 1800 / lg 1200 / md 880 / sm 480. nav: fixed dark bar, h64 (h44 <=880),
bg #242039 = --ink-deep, accent CTA. Shared DOM single flex row approximated as .site-header. */
.site-header {
background: var(--ink-deep);
position: sticky; top: 38px; z-index: 50;
box-shadow: 0 0 15px 0 rgba(0,0,0,.35);
}
.site-header .wrap {
display: flex; align-items: stretch; gap: 20px;
height: 64px; padding: 0 32px;
max-width: none;
}
@media screen and (max-width: 1200px) {
.site-header .wrap { padding: 0 44px; }
}
@media screen and (max-width: 880px) {
.site-header .wrap { height: 44px; padding: 0 22px; }
}
/* logo (#menuLogo a h5: uppercase, fontMedium=--font-body, 18/24 ls 3px) */
.logo {
display: flex; align-items: center; gap: 11px;
color: #fff; text-decoration: none;
font-family: var(--font-body);
font-weight: 600; font-size: 18px; line-height: 24px;
letter-spacing: 3px; text-transform: uppercase;
}
.logo .mark {
width: 34px; height: 34px; border-radius: var(--radius-sm); flex: none;
background: var(--accent); color: var(--ink-deep);
display: grid; place-items: center;
font-weight: 800; font-size: 13px; letter-spacing: 0; font-family: var(--font-head);
}
@media screen and (max-width: 1800px) {
.logo { font-size: 16px; line-height: 20px; }
}
@media screen and (max-width: 880px) {
.logo { font-size: 12px; line-height: 14px; }
}
/* main nav (.mainNav li a > h5): uppercase, fontMedium, 18/24 ls 3px, white.
ECF reserves CTA space via padding-right:305px on .mainNav; on shared DOM the CTA is
in-flow so margin-left:auto pushes the group right. li padding 0 25px (no md change). */
.site-nav {
display: flex; align-items: stretch; gap: 0;
margin-left: auto; flex-wrap: wrap;
}
.site-nav a {
display: flex; align-items: center;
color: #fff; text-decoration: none;
padding: 0 25px;
font-family: var(--font-body);
font-weight: 600; font-size: 18px; line-height: 24px;
letter-spacing: 3px; text-transform: uppercase;
}
@media screen and (max-width: 1800px) {
.site-nav a { font-size: 16px; line-height: 20px; }
}
@media screen and (max-width: 880px) {
.site-nav a { font-size: 12px; line-height: 14px; }
}
.site-nav a:hover { color: #fff; }
/* ECF gives the current link no distinct treatment — active stays plain white. */
.site-nav a.active { color: #fff; }
.site-nav a.active::after { content: none; display: none; }
/* CTA (.navCta): accent bg #FFC24D=--accent, text on accent ~ --ink-deep, uppercase fontMedium,
full-height (source height:100% translateY-centered, padding 18px 32px) -> in-flow stretch + pad 0 32px. */
.btn-cta {
display: inline-flex; align-items: center; gap: 32px;
background: var(--accent); color: var(--ink-deep);
text-decoration: none;
font-family: var(--font-body); font-weight: 600;
font-size: 18px; line-height: 24px; letter-spacing: 3px; text-transform: uppercase;
padding: 0 32px; align-self: stretch;
transition: all .3s cubic-bezier(.075,.82,.165,1);
}
@media screen and (max-width: 1800px) {
.btn-cta { font-size: 16px; line-height: 20px; }
}
@media screen and (max-width: 880px) {
.btn-cta { font-size: 12px; line-height: 14px; }
}
.site-nav .btn-cta { margin-left: 0; }
/* arrow icon (.arrowIcon): pre-rotated 180deg; wireframe-added slide on hover (not in ECF source) */
.btn-cta span {
display: inline-flex; flex-shrink: 0;
transition: transform .6s cubic-bezier(.33,1,.68,1);
}
.btn-cta:hover span { transform: translateX(-5px); }
/* ---------------- footer ---------------- */
/* ---- Footer (ECF base) -------------------------------------------------
ECF footer.scss: footer{background:$blue->--ink-deep; color:#fff; display:flex;
flex-wrap:wrap; padding:64px; mobile padding 22px 0}. .top block: h4 26/34 #fff
margin-bottom:0; p 26/34 #fff opacity .5 margin-bottom:34px; a colour $yellow
(--accent) text-underline-offset:10px. Register CTA mapped to .signup (bg
$yellow/--accent, colour $black/--ink-deep, padding 24px 32px, ls 3px). Legal
.row3/.logosRow: border-top rgba(255,255,255,.1), padding 64px, 20/26, a #fff.
resp-max($breakpoint-md=880) = @media(max-width:880px) exactly. */
footer.site-footer {
position: relative;
background-color: var(--ink-deep);
color: #fff;
padding: 0;
}
.foot-top { border-bottom: 1px solid rgba(255,255,255,.1); border-top: 0; }
.foot-top .wrap {
max-width: none;
margin: 0;
padding: 64px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 34px;
flex-wrap: wrap;
}
.foot-top p {
margin: 0;
color: #fff;
opacity: .5;
font-size: 26px;
line-height: 34px;
max-width: none;
}
.foot-top p [data-brand-name] { opacity: 1; }
.foot-top .btn-cta {
background: var(--accent);
color: var(--ink-deep);
padding: 24px 32px;
letter-spacing: 3px;
text-transform: uppercase;
font-size: 12px;
align-self: auto;
}
.foot-cols {
max-width: none;
margin: 0;
padding: 64px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.foot-cols > div {
padding: 0 34px;
border-left: 1px solid rgba(255,255,255,.1);
}
.foot-cols > div:first-child { border-left: 0; padding-left: 0; }
.foot-cols h4 {
color: #fff;
font-size: 26px;
line-height: 34px;
letter-spacing: -.02em;
text-transform: none;
font-family: var(--font-head);
font-weight: 600;
opacity: 1;
margin: 0;
}
/* body copy line (ECF .top p: 26/34 #fff opacity .5, margin-bottom 34px) */
.foot-cols a {
color: #fff;
opacity: .5;
text-decoration: none;
display: block;
padding: 0;
margin: 8px 0 34px;
font-size: 26px;
line-height: 34px;
}
/* ECF .top a accent action link ($yellow/--accent, underline offset 10px) */
.foot-cols a.link-sm {
margin: 16px 0 0;
color: var(--accent);
opacity: 1;
font-weight: 400;
font-size: 26px;
line-height: 34px;
letter-spacing: normal;
text-transform: none;
text-decoration: underline;
text-underline-offset: 10px;
}
.foot-legal { border-top: 1px solid rgba(255,255,255,.1); }
.foot-legal .wrap {
max-width: none;
margin: 0;
padding: 64px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
font-size: 20px;
line-height: 26px;
color: rgba(255,255,255,.75);
}
.foot-legal .wrap span,
.foot-legal .wrap a { color: #fff; }
@media (max-width: 880px){
.foot-top .wrap { padding: 22px; }
/* ECF footer p resp-max(md): 15px/26px !important (NOT 18px) */
.foot-top p { font-size: 15px; line-height: 26px; }
.foot-cols {
padding: 22px;
grid-template-columns: 1fr;
}
.foot-cols > div { padding: 22px 0; border-left: 0; }
.foot-cols > div:first-child { padding-top: 0; }
/* footer h4 resp-max(md): 18px/26px margin-bottom 0 */
.foot-cols h4 { font-size: 18px; line-height: 26px; margin-bottom: 0; }
/* column body/links derive from footer p (15px/26px) */
.foot-cols a { font-size: 15px; line-height: 26px; margin-bottom: 0; }
.foot-cols a.link-sm { font-size: 15px; line-height: 26px; }
.foot-legal .wrap { padding: 22px; font-size: 12px; line-height: 26px; }
}
/* ---------------- hero ---------------- */
/* ---- Full-bleed photographic hero (.imageBanner) -----------------------
ECF base. Real theme centres the heading; the dark tint sits over the
photo via a pseudo-element. Home height = calc(100vh - 160px) (160px is the
fixed header offset in the real theme). Inner pages add 98px bottom margin. */
.hero-full {
position: relative;
width: 100%;
height: calc(100vh - 160px);
background: var(--ink-deep);
background-size: cover;
background-position: center;
color: #fff;
/* real theme centres content; was bottom-left flex */
display: block;
}
/* tint overlay (.imageBg:after) — ECF opacity 0.1 black */
.hero-full::after {
content: "";
position: absolute;
inset: 0;
background: #000;
opacity: 0.1;
z-index: 1;
}
.hero-full .wrap {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: none;
padding: 0 24px;
text-align: center;
z-index: 9;
}
.hero-full .label {
color: rgba(255,255,255,.8);
margin-bottom: 16px;
}
.hero-full h1 {
margin: 0;
width: 100%;
max-width: none;
text-align: center;
font-family: var(--font-head);
font-size: 92px;
line-height: 92px;
letter-spacing: -0.04em;
color: #fff;
}
@media screen and (max-width: 1200px) {
.hero-full h1 { font-size: 78px; line-height: 78px; }
}
@media screen and (max-width: 1000px) {
.hero-full h1 { font-size: 66px; line-height: 66px; }
}
@media screen and (max-width: 880px) {
.hero-full { height: 75vh; min-height: 500px; }
.hero-full h1 { font-size: 46px; line-height: 46px; }
}
@media screen and (max-width: 525px) {
.hero-full h1 { font-size: 32px; line-height: 32px; }
}
/* ---------------- intro ---------------- */
/* ---- Intro statement = themes' .headerBlock (label column + big heading
with a left-border divider). ECF base.
.headerBlock padding 128px 64px; flex-wrap.
.headerLeft 25% (label) padding 0 64px 0 0; .projectDetail 24/32 #7f7f7f
regular, margin-bottom 32px.
.headerRight 75% padding 0 128px 0 64px, border-left 1px rgba(36,32,57,.1).
headerBlock h1,h2,h3 margin-bottom 64px (md 44px).
resp-max($s) = @media screen and (max-width:$s). lg=1200, md=880.
At lg ONLY flex-basis->100% (divider+padding stay); at md padding->0 44px 0 22px.
h2 element scale (_main.scss): 94/100 -1px; xl(1800) 76/80; lg(1200) 56/60;
md(880) 38/40. ----------------------------------------------------------- */
section.block.intro { padding: 128px 64px; }
.intro .wrap {
display: grid;
grid-template-columns: 25% 1fr;
gap: 0;
align-items: start;
max-width: none;
padding: 0;
}
/* headerLeft — label column (projectDetail: 24/32 grey, regular) */
.intro .label {
display: block;
grid-column: 1;
margin: 0 0 32px 0;
padding: 0 64px 0 0;
max-width: 25%;
overflow: hidden;
font-family: var(--font-body);
font-weight: 400;
font-size: 24px;
line-height: 32px;
letter-spacing: normal;
text-transform: none;
color: var(--muted);
}
/* headerRight — heading column with the left divider */
.intro h2 {
grid-column: 2;
margin: 0 0 64px 0;
padding: 0 128px 0 64px;
border-left: 1px solid color-mix(in srgb, var(--ink-deep) 10%, transparent);
max-width: none;
font-family: var(--font-head);
font-weight: 600;
font-size: 94px;
line-height: 100px;
letter-spacing: -1px;
color: var(--ink);
}
@media screen and (max-width: 1800px) {
.intro h2 { font-size: 76px; line-height: 80px; }
}
@media screen and (max-width: 1200px) {
section.block.intro { padding: 64px 0; }
/* lg: columns stack (flex-wrap), divider + heading padding RETAINED */
.intro .wrap { grid-template-columns: 1fr; }
.intro .label {
grid-column: 1;
max-width: 75%;
padding: 0 64px 0 64px;
margin: 0 0 32px 0;
}
.intro h2 {
grid-column: 1;
font-size: 56px;
line-height: 60px;
/* border-left + padding 0 128px 0 64px still apply here */
}
}
@media screen and (max-width: 880px) {
section.block.intro { padding: 44px 0; }
.intro .label {
max-width: 100%;
font-size: 15px;
line-height: 20px;
padding: 0 44px 0 22px;
margin: 0 0 32px 0;
}
.intro h2 {
font-size: 38px;
line-height: 40px;
margin-bottom: 44px;
padding: 0 44px 0 22px;
}
}
/* ---------------- text-image-row ---------------- */
/* ===== Text + image row (ECF base) =====
SCSS: ecf .textImageBlock. Non-reverse row == .image_left (image left, text right);
.reverse == .image_right. ECF uses flex with 64px imageCol side margins; wireframe
uses 1fr/1fr grid so the 64px channel is the grid gap. image min-height 614px,
border-radius 12px == var(--radius). Large 256px text bottom padding drops .link low.
resp-max($breakpoint-md)=880px -> @media (max-width:880px); stacks, image first. */
.row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: stretch; margin-bottom: 96px; }
.row-split .rs-media { order: 1; }
.row-split .rs-text { order: 2; display: flex; flex-direction: column; position: relative; max-width: none; padding: 0 64px 256px 0; }
.row-split.reverse > .rs-media { order: 2; }
.row-split.reverse > .rs-text { order: 1; padding: 0 64px 256px 64px; }
.row-split .media { min-height: 614px; border-radius: var(--radius); background-position: center; background-repeat: no-repeat; background-size: cover; }
.row-split .rs-text h2, .row-split .rs-text h3 { width: 100%; margin-bottom: 64px; padding-right: 64px; }
.row-split .rs-text .bodycopy, .row-split .rs-text p { width: 100%; margin-bottom: 64px; padding-right: 64px; color: inherit; max-width: none; }
.row-split .rs-text .link { margin-top: auto; }
@media (max-width: 880px){
.row-split { grid-template-columns: 1fr; gap: 0; margin-bottom: 96px; }
.row-split .rs-media, .row-split.reverse > .rs-media { order: 1; }
.row-split .rs-text, .row-split.reverse > .rs-text { order: 2; padding: 22px 64px 0 22px; }
.row-split .media { min-height: 0; height: auto; padding-bottom: 66%; }
.row-split .rs-text h2, .row-split .rs-text h3 { margin-bottom: 22px; padding-right: 0; }
.row-split .rs-text .bodycopy, .row-split .rs-text p { padding-right: 44px; margin-bottom: 44px; }
}
/* ---------------- overlap-card ---------------- */
/* ---- "A unique vision": card overlapping a wide render =========================
ECF base. .overlap -> .textImageBlock.style3, .ov-media/.media -> .imageCol
(absolute, fills block), .ov-card -> .textCol(style3). resp-max($breakpoint-md)=@media (max-width:880px). */
.overlap {
position: relative;
display: flex;
width: 100%;
margin-bottom: 96px;
}
.overlap .ov-media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
border-radius: 0;
}
.overlap .ov-media .media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
min-height: 614px;
margin: 0;
border-radius: 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.overlap .ov-card {
position: relative;
z-index: 1;
flex-basis: calc(50% - 128px);
margin: 64px;
padding: 64px;
display: flex;
flex-wrap: wrap;
align-content: space-between;
border-radius: var(--radius);
background: var(--card);
width: auto;
min-width: 0;
left: auto;
top: auto;
transform: none;
}
.overlap .ov-card .label { width: 100%; }
.overlap .ov-card h2 {
width: 100%;
margin-bottom: 64px;
padding-right: 64px;
}
.overlap .ov-card p {
width: 100%;
margin-bottom: 64px;
padding-right: 64px;
color: inherit;
opacity: .5;
}
@media (max-width: 880px){
.overlap { flex-wrap: wrap; }
.overlap .ov-card {
flex-basis: 100%;
margin: 22px;
margin-top: 300px;
padding: 22px;
}
.overlap .ov-card h2 {
margin-bottom: 22px;
padding-right: 0;
}
.overlap .ov-card p {
padding-right: 44px;
margin-bottom: 44px;
}
.overlap .ov-media .media { min-height: auto; }
}
/* ---------------- partners ---------------- */
/* Partners block — maps wireframe .grid.g2 (.partner logo tile + description)
to ECF .partnersBlock .partnerLogos .swiper-slide.
ECF logo tile bg = $yellow (#FFC24D) which is the brand accent role (chrome.js ecf --accent=#FFC24D), NOT $warm.
resp-max($breakpoint-md) => @media screen and (max-width:880px). */
/* logo tile */
.partner {
display: flex;
justify-content: center;
align-items: center;
background: var(--accent);
height: auto;
padding: 128px 0;
border-radius: 10px;
}
.partner .plogo {
font-family: var(--font-head);
font-weight: 800;
font-size: 1.6rem;
letter-spacing: .02em;
color: var(--ink-deep);
/* stand-in for theme : width:100%;max-width:200px;max-height:100px;margin:auto;display:flex;mix-blend-mode:multiply;object-fit:contain */
width: 100%;
max-width: 200px;
max-height: 100px;
margin: auto;
text-align: center;
mix-blend-mode: multiply;
}
@media screen and (max-width: 880px) {
.partner { padding: 23vw 0; }
}
/* ---------------- big-cta ---------------- */
/* ---- Have Your Say (big CTA) — ECF base -------------------------------
SCSS map: .bigCta (white frame) > .inner (coloured/rounded panel) with
.upper (text), .lower (arrow CTA) and .bgGraphic (illustration, absolute right).
The wireframe .colorblock IS that coloured .inner panel on shared DOM.
resp-max($size) => @media screen and (max-width:$size) (value used directly).
Breakpoints: xl 1800, lg 1200, md 880, sm 480. */
.colorblock {
position: relative;
display: flex;
flex-wrap: wrap;
align-content: space-between;
width: 100%;
background: var(--accent);
color: var(--ink-deep);
/* .inner big-cta radius is a fixed 10px literal (NOT the --radius token, which is 2px for ECF) */
border-radius: 10px;
overflow: hidden;
/* outer .bigCta padding 64px collapsed onto the panel */
padding: 64px;
gap: 0;
}
/* .upper — constrained text column */
.colorblock > div:first-child {
flex-basis: 100%;
max-width: 50%;
display: flex;
flex-wrap: wrap;
margin-bottom: 100px;
}
.colorblock h2 {
flex-basis: 100%;
margin: 0 0 20px;
color: inherit;
}
.colorblock p {
flex-basis: 100%;
margin: 0;
max-width: 60%;
color: inherit;
}
/* the arrow CTA = .lower h5.withArrow (ECF: display flex, NO align-items) */
.colorblock .btn-cta {
display: inline-flex;
}
.colorblock .btn-cta span {
margin-top: 2px;
width: 16px;
height: 16px;
margin-left: 10px;
transition: transform .6s cubic-bezier(0.33, 1, 0.68, 1);
will-change: transform;
}
.colorblock .btn-cta:hover span { transform: translateX(-5px); }
/* .bgGraphic — illustration pinned right, clipped by panel overflow */
.colorblock .cb-art {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: auto;
max-width: 45%;
padding: 40px 40px 0;
}
.colorblock .cb-art svg { height: 100%; width: auto; }
/* xl 1800: text column widens to 75% */
@media screen and (max-width: 1800px) {
.colorblock > div:first-child { max-width: 75%; }
}
/* md 880: panel padding shrinks, art flows below full-width */
@media screen and (max-width: 880px) {
.colorblock { padding: 44px 22px; }
.colorblock > div:first-child { max-width: 80%; }
.colorblock .cb-art {
position: relative;
top: 0;
right: 0;
width: 100%;
max-width: 100%;
height: auto;
padding: 40px 40px 0;
}
.colorblock .cb-art svg { width: 100%; height: auto; }
}
/* sm 480: text column full-width */
@media screen and (max-width: 480px) {
.colorblock > div:first-child { max-width: 100%; }
}
/* ---------------- news-stories ---------------- */
/* ===== News / stories cards (ECF base) =====================================
Source: ecf .storiesBlock / .titleBar / .storyCardsHolder .storyCards .storyCard.
resp-max($breakpoint-md) => @media screen and (max-width:880px) (mixin uses max-width:$size verbatim).
Real block is a horizontal carousel of 544px cards (image-top 320px / text-bottom 320px) with a
320px backdrop band (.storyCardsHolder:before) and a separate .bottomLinkHolder nav/link row.
Wireframe DOM is a fixed 3-col vertical-card grid; mapped the visual DNA onto it.
NOT reproduced: carousel scroll, fixed px card widths, 320px backdrop band, .bottomLinkHolder. */
/* --- section shell (.storiesBlock: bg #F8F8F8, pad-top 0, pad-bottom 64px) - */
section.block#news { background: #F8F8F8; padding-top: 0; padding-bottom: 64px; }
/* --- header (.titleBar: flex space-between, baseline; pad 64px / top 96px) -- */
#news .carousel-head { display: flex; justify-content: space-between; align-items: baseline;
padding: 96px 64px 64px; margin-bottom: 0; }
#news .carousel-head .label { margin: 0; }
/* --- arrows (.circleBtn: white round, hover bg $blue=var(--brand); storyPrev mr:0) */
#news .carousel-head .arrows { display: flex; gap: 0; flex-basis: fit-content; }
#news .carousel-head .arrows button { width: 40px; height: 40px; border: 1px solid var(--line);
background: #fff; cursor: pointer; font-size: 16px; border-radius: 50%; }
#news .carousel-head .arrows button:hover { background: var(--brand); }
/* --- card grid (.storyCards: gutter 64px) ---------------------------------- */
#news .grid.g3 { padding: 0 64px; gap: 64px; }
/* --- card (.storyCard: transparent, vertical hairline divider between cards) - */
#news .card.news { position: relative; background: transparent; border-radius: 0; }
#news .card.news::after { content: ""; position: absolute; top: 0; right: -32px;
width: 1px; height: 100%; background: rgba(0,0,0,.1); }
#news .grid.g3 > .card.news:last-child::after { display: none; }
/* --- media (.topHalf: 320px tall, radius 12px, cover) ----------------------- */
#news .card.news .media { min-height: 320px; margin-bottom: 0; border-radius: var(--radius);
background-size: cover; background-position: center; }
/* --- body (.bottomHalf: pad 30px 30px 30px 0) ------------------------------ */
#news .card.news .card-body { position: relative; box-sizing: border-box;
padding: 30px 30px 30px 0; }
#news .card.news .card-body .label { margin-bottom: 8px; }
/* h3 stands in for .bottomHalf p: padding-right:64px, max-height:168px, overflow:hidden, line-height:42px */
#news .card.news h3 { margin: 0; line-height: 42px; max-height: 168px; overflow: hidden;
padding-right: 64px; }
/* read-more (.link: bottom:30px/left:0 in theme; flows under title on this light card) */
#news .card.news .link { margin-top: 18px; }
@media screen and (max-width: 880px){
#news .carousel-head { padding: 44px 22px; }
#news .grid.g3 { padding: 0 22px; grid-template-columns: 1fr; gap: 44px; }
#news .card.news::after { display: none; }
#news .card.news .media { min-height: 0; aspect-ratio: 3 / 2; }
#news .card.news h3 { line-height: 24px; }
}
/* ---------------- downloads ---------------- */
/* ---- Coloured download tiles (downloads block) -------------------------
Wireframe interpretation of the themes' .downloadsBlock. The real themes
render a horizontal carousel of 544px story cards (topHalf preview cover +
bottomHalf text). The wireframe collapses this to a .g4 grid of coloured
tiles, each carrying a white "booklet" cover mock that maps to the theme
.topHalf .preview (white card, 0 3px 6px shadow), plus a title (h4) and a
Download .link that maps to .bottomHalf .link.
ECF section bg = #F8F8F8; cover rounding (theme .topHalf border-radius) = 12px. */
/* section wrapper — themes set bg #F8F8F8 on .downloadsBlock; the wireframe
section uses .warm. Keep the warm token surface (ECF warm = #FBF4EC per
chrome but the real downloads bg is a neutral #F8F8F8 — see fidelityNotes). */
.dl { text-align: left; }
/* the coloured tile = theme .topHalf cover. Real cover is 544x320 (aspect
~1.7:1); wireframe keeps a calmer 4/3 box on the grid. ECF cover
border-radius = 12px (hardcoded in theme, not $border-radius). */
.dl-tile {
position: relative;
aspect-ratio: 4 / 3;
display: grid;
place-items: center;
margin-bottom: 14px;
border-radius: 12px;
background-position: center;
background-size: cover;
}
.dl-tile.c1 { background: var(--accent); }
.dl-tile.c2 { background: var(--accent-2); }
.dl-tile.c3 { background: var(--accent-3); }
.dl-tile.c4 { background: var(--ink-deep); }
/* booklet = theme .preview: white card, contained, drop shadow 0 3px 6px rgba(0,0,0,.2). */
.dl-tile .booklet {
width: 92px;
background: #fff;
padding: 8px;
box-shadow: 0 3px 6px rgba(0, 0, 0, .2);
}
.dl-tile .booklet .bk-img { min-height: 70px; }
.dl-tile .booklet .bk-cap {
font-weight: 800;
font-size: 9px;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--ink-deep);
padding: 6px 2px 2px;
}
/* title = theme card heading; link = theme .bottomHalf .link.
ECF link arrow icon is inverted to white (filter brightness(0) invert(1)). */
.dl h4 { font-size: 1rem; margin: 0 0 8px; }
/* responsive: themes collapse cards at max-width:880px (resp-max($breakpoint-md));
the wireframe collapses .g4 to a single column at 920px (shared rule). */
@media (max-width: 880px) {
.dl-tile { aspect-ratio: auto; padding-bottom: 66%; }
}
/* ---------------- newsletter ---------------- */
/* ---- Newsletter "Keep up to date" / register interest --------------------
Source: ECF layout/_contact.scss .enquiryForm (resolved).
Flex two-column block: .formTitle (50%) left, .formWrapper (50%) right.
Wireframe maps .enquiryForm -> .newsletter .wrap, .formTitle -> first