/* =========================================
MAPLEMETRICS — GLOBAL THEME TWEAKS
Paste into Design → Custom CSS
========================================= */
/* --------- Brand Tokens --------- */
:root {
--mm-navy: #2f3f50; /* logo navy */
--mm-ink: #0f1420; /* headings on light */
--mm-body: #4d5c69; /* body copy on light */
--mm-white:#ffffff;
--mm-soft :#e6edf3; /* soft white on navy */
--mm-muted:#586272; /* secondary on light */
--mm-radius: 18px;
--mm-shadow: 0 14px 28px rgba(0,0,0,.12), 0 6px 14px rgba(0,0,0,.08);
--mm-wrap: 1180px;
--mm-sec-pad-d: 96px; /* desktop section padding */
--mm-sec-pad-m: 64px; /* mobile section padding */
}
/* --------- Base Typography --------- */
body { color: var(--mm-body); }
h1, .mm-h1 {
color: var(--mm-ink);
font-weight: 800;
line-height: 1.12;
font-size: clamp(42px, 5vw, 56px);
letter-spacing: 0;
}
h2, .mm-h2 {
color: var(--mm-ink);
font-weight: 800;
line-height: 1.15;
font-size: clamp(28px, 4vw, 42px);
}
h3, .mm-h3 {
color: var(--mm-ink);
font-weight: 800;
line-height: 1.3;
font-size: 20px;
text-transform: uppercase;
letter-spacing: .02em;
}
p { line-height: 1.7; font-size: 16px; }
/* Lead paragraph style (subheads under H2) */
.mm-lead { color: var(--mm-body); font-size: 18px; max-width: 760px; }
/* --------- Section Spacing & Wrapper --------- */
#mm-what, #mm-who, #mm-who-cards, #mm-why {
padding: var(--mm-sec-pad-m) 20px;
}
@media (min-width: 900px){
#mm-what, #mm-who, #mm-who-cards, #mm-why {
padding: var(--mm-sec-pad-d) 20px;
}
}
#mm-what .wrap, #mm-who .wrap, #mm-who-cards .wrap, #mm-why .wrap {
max-width: var(--mm-wrap);
margin: 0 auto;
}
/* --------- Cards: unified look --------- */
.mm-card,
#mm-what .card,
#mm-who .card,
#mm-who-cards .card,
#mm-why .card {
border-radius: var(--mm-radius);
box-shadow: var(--mm-shadow);
padding: 32px 28px;
}
/* Corner bracket motif only where used (kept intact) */
#mm-who .card::before,
#mm-who .card::after { border-color: var(--mm-navy); }
/* --------- Grids: consistent gaps --------- */
.mm-grid,
#mm-what .grid,
#mm-who .grid,
#mm-who-cards .grid,
#mm-why .grid { display: grid; gap: 26px; }
/* 3-up grid default, 2-up where needed is set in each section already */
@media (min-width: 900px){
#mm-what .grid { grid-template-columns: repeat(3, 1fr); }
#mm-why .grid { grid-template-columns: repeat(2, 1fr); }
#mm-who-cards .grid { grid-template-columns: repeat(3, 1fr); }
}
/* --------- Section Background Rhythm --------- */
/* White sections */
#mm-what, #mm-why { background: var(--mm-white); }
/* Navy sections */
#mm-who, #mm-who-cards { background: var(--mm-navy); }
/* Light text on navy */
#mm-who h2, #mm-who-cards h2 { color: var(--mm-white); }
#mm-who .lead, #mm-who-cards .lead { color: var(--mm-soft); }
/* White cards on navy sections */
#mm-who .card, #mm-who-cards .card {
background: var(--mm-white);
color: var(--mm-ink);
}
/* Blue cards on white sections */
#mm-what .card, #mm-why .card {
background: var(--mm-navy);
color: var(--mm-white);
}
#mm-what .card h3, #mm-why .card h3 { color: var(--mm-white); }
#mm-what .card p, #mm-why .card p { color: var(--mm-soft); }
/* Icon tiles (if used) */
.icon-wrap {
width: 70px; height: 70px; margin: 0 0 14px 0;
border-radius: 16px; background: var(--mm-navy);
display: inline-flex; align-items: center; justify-content: center;
}
.icon-wrap svg { width: 36px; height: 36px; stroke: #fff; fill: none; stroke-width: 2; }
/* --------- Buttons: one primary, one secondary --------- */
/* Base button look */
.sqs-block-button .sqs-block-button-element,
.header-actions .sqs-button-element,
a.mm-btn {
display: inline-block;
padding: 12px 20px;
border-radius: 999px;
font-weight: 800;
text-decoration: none;
transition: transform .08s ease, filter .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
border: 1px solid transparent;
}
/* Primary (solid navy with white text) */
.mm-btn--primary,
.sqs-block-button .sqs-block-button-element--primary,
.header-actions .sqs-button-element { /* header CTA unified */
background: var(--mm-navy);
color: var(--mm-white);
border-color: var(--mm-navy);
}
.mm-btn--primary:hover,
.sqs-block-button .sqs-block-button-element--primary:hover,
.header-actions .sqs-button-element:hover {
transform: translateY(-1px);
filter: brightness(1.05);
}
/* Secondary (ghost on light, inverse on dark sections) */
.mm-btn--ghost,
.sqs-block-button .sqs-block-button-element--secondary {
background: transparent;
color: var(--mm-navy);
border-color: var(--mm-navy);
}
.mm-btn--ghost:hover,
.sqs-block-button .sqs-block-button-element--secondary:hover {
background: var(--mm-navy);
color: var(--mm-white);
}
/* On navy sections, flip the ghost to white border/text by default */
#mm-who .sqs-block-button .sqs-block-button-element--secondary,
#mm-who-cards .sqs-block-button .sqs-block-button-element--secondary,
#mm-who a.mm-btn--ghost {
color: var(--mm-white);
border-color: var(--mm-white);
}
#mm-who .sqs-block-button .sqs-block-button-element--secondary:hover,
#mm-who-cards .sqs-block-button .sqs-block-button-element--secondary:hover,
#mm-who a.mm-btn--ghost:hover {
background: var(--mm-white);
color: var(--mm-navy);
}
/* --------- Hero consistency (optional but nice) --------- */
/* Make hero H1 and sub clean when over dark images */
.sqs-block-image + .sqs-block-html h1 { color: var(--mm-ink); }
/* --------- Small polish --------- */
.sqs-block-button .sqs-block-button-element:focus-visible,
.header-actions .sqs-button-element:focus-visible { outline: 2px solid var(--mm-navy); outline-offset: 2px; }
.sqs-block-html p + p { margin-top: 10px; } /* tame stacked paragraphs */
/* Ensure max-width on long text rows in cards */
#mm-what .card p, #mm-why .card p, #mm-who .card p, #mm-who-cards .card p {
max-width: 42rem; margin-left: auto; margin-right: auto;
}
