/* The document itself.
mina2.css deliberately styles no bare element, so nothing was resetting the
user agent's 8px body margin. Phase one was immune only because it styled
.mina-page on the body. Locally every phase two page rendered inside an 8px
white frame. Relying on the theme to supply it would be an assumption
affecting all 50 pages, so it is stated here instead. */
body.mina2-body { margin: 0; background: #00155D; }
/* ===========================================================================
mina2.css · MINA Medical Marketing design system, v2
===========================================================================
A port of the Dental Marketing Canada system (docs/DMC-DESIGN-SPEC.md) onto
MINA's own brand anchors. Single file, no parts, no imports.
DELIBERATE CLEAN SLATE. This file does not build on mina.css or on any of the
22 assets/parts/*.css files. Those carry 90 duplicate selectors across files
that load in filename order and have silently regressed pages four times.
Nothing here may ever be split back into parts.
THREE SCOPE ROOTS, exactly as DMC has:
.mina2-page page body
.mina2-hd global header
.mina2-ft global footer
Tokens are declared on all three. No bare element selector is styled at
document level, so this can coexist with the theme and with Elementor while
the swap is in progress.
WHAT IS DIFFERENT FROM DMC, AND WHY
-----------------------------------
1. Colour. The token STRUCTURE is DMC's (5 navy steps, 5 sky steps, an ink
set, two hairlines, a light field, one rising gradient) but every ramp is
generated from MINA's two brand anchors, navy #00155D and sky #71B6FF,
rather than copied from DMC's hexes. MINA's logo is white on navy and
roughly 2,000 existing images already sit on those surfaces.
Switching brand is a four line change: the two hue variables and the two
channel triplets in section 1.1. Every other colour derives from them.
2. Fonts are self hosted woff2. No Google Fonts request, ever.
3. h4, h5 and h6 exist. DMC has none and MINA's pages use them heavily,
/privacy-policy/ alone carries 21 h5s.
4. The six documented cascade traps in DMC spec section 13 are fixed here
rather than reproduced. See section 0 below.
THE SIX TRAPS AND THE FIX APPLIED
---------------------------------
A. The image reset out-specified icon classes. `.dmc-page img` is (0,1,1)
and beat `.dmc-eyebrow__ico` at (0,1,0), so icons rendered at intrinsic
size. FIX: every element level default in this file is wrapped in
`:where()`, which contributes zero specificity. A single class now beats
the reset. No belt and braces width/height attributes needed.
B. Child combinator rules beat utility classes. `.dmc-serv-row__body > p` is
(0,1,1) and silently downgraded `.dmc-serv-note` from its designed 14.5px
to 16px everywhere the note was actually used, and made a bare
`class="dmc-lead"` do nothing. FIX: no component in this file styles a
bare element inside itself. Every text node carries exactly one role
class, and every typography selector is class only at (0,1,0) or (0,2,0).
C. Element qualified selectors beat BEM element classes. `.dmc-node > span`
out ranked `.dmc-node__dot`. FIX: same rule, class only inside components.
D. Media queries add no specificity, so source order decides, and pillar
responsive overrides written early lost to equally specific base rules
written later. The pillar hero shipped broken on mobile twice. FIX: every
media query in this file lives in section 12, at the end, in descending
width order. There are no media queries anywhere above it.
E. The invisible straddle. A section with a negative margin overlap painted
its own opaque background over the thing it was supposed to overlap.
FIX: `.mina2-stats` is transparent and only its card paints. The rule is
written next to it and must not be removed.
F. Surface flips failing inside components. DMC solved this with doubled
ancestor selectors at (0,3,0), which works but has to be repeated for
every property on every component. FIX: surfaces set semantic colour
custom properties (--c-head, --c-body, --c-accent, --c-rule and friends)
and components consume them. Inheritance does the work, so there is no
specificity contest left to lose. Three doubled ancestor rules survive,
each labelled, where a component genuinely repaints rather than recolours.
No em dashes and no en dashes anywhere in this file, including comments.
=========================================================================== */
/* ===========================================================================
0 · FONTS, self hosted
Montserrat is the display face, Plus Jakarta Sans the body face, the same
pairing DMC runs. Both are variable, one file per subset per style.
=========================================================================== */
@font-face{
font-family:'Montserrat'; font-style:normal; font-weight:100 900; font-display:swap;
src:url('fonts/montserrat-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:'Montserrat'; font-style:normal; font-weight:100 900; font-display:swap;
src:url('fonts/montserrat-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
font-family:'Montserrat'; font-style:italic; font-weight:100 900; font-display:swap;
src:url('fonts/montserrat-italic-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:'Montserrat'; font-style:italic; font-weight:100 900; font-display:swap;
src:url('fonts/montserrat-italic-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:200 800; font-display:swap;
src:url('fonts/plusjakartasans-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:200 800; font-display:swap;
src:url('fonts/plusjakartasans-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
font-family:'Plus Jakarta Sans'; font-style:italic; font-weight:200 800; font-display:swap;
src:url('fonts/plusjakartasans-italic-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:'Plus Jakarta Sans'; font-style:italic; font-weight:200 800; font-display:swap;
src:url('fonts/plusjakartasans-italic-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* ===========================================================================
1 · TOKENS
Declared once on all three scope roots.
=========================================================================== */
.mina2-page, .mina2-hd, .mina2-ft{
/* --- 1.1 THE BRAND ANCHORS. Change these four lines to rebrand. ---------
navy #00155D = hsl(226.45 100% 18.24%) rgb 0 21 93
sky #71B6FF = hsl(210.85 100% 72.16%) rgb 113 182 255
Every colour below is generated from them. The two rgb triplets exist
only so translucent hairlines and glows can be written in one place. */
--navy-h:226.45;
--sky-h:210.85;
--navy-rgb:0 21 93;
--sky-rgb:113 182 255;
/* --- 1.2 Navy ramp, 5 steps -------------------------------------------
Lightness curve and saturation falloff are DMC's; the hue is MINA's.
The middle step resolves to MINA's brand navy exactly. */
--n-950:hsl(var(--navy-h) 100% 10.00%); /* #000C33 deepest, overlays, text on sky */
--n-900:hsl(var(--navy-h) 100% 13.92%); /* #001047 page field, every dark section */
--n-800:hsl(var(--navy-h) 100% 18.24%); /* #00155D THE brand navy, header bar, ink button */
--n-700:hsl(var(--navy-h) 85.71% 21.96%); /* #081E68 elevated surfaces, ink button hover */
--n-600:hsl(var(--navy-h) 76.47% 26.67%); /* #102778 card gradient tops */
/* --- 1.3 Sky ramp, 5 steps plus one gradient stop --------------------- */
--sky-250:hsl(var(--sky-h) 100% 86.27%); /* #B9DBFF gradient tail only */
--sky-300:hsl(var(--sky-h) 100% 91.96%); /* #D6EAFF hero lead, ghost hover text */
--sky-400:hsl(var(--sky-h) 100% 82.94%); /* #A8D2FF accents ON DARK */
--sky-500:hsl(var(--sky-h) 100% 72.16%); /* #71B6FF THE brand sky, button fill, focus ring */
--sky-600:hsl(var(--sky-h) 71.67% 45.50%); /* #2172C7 accents and links ON LIGHT */
--sky-700:hsl(var(--sky-h) 75% 32.94%); /* #155293 link hover on light */
/* --sky-600 sits 1.6 points darker than the same step in DMC. DMC's
#2273CE measures 4.32:1 on its light field, which is under AA for normal
text, and the DMC spec flags it as the weakest pairing in the system.
45.5% lightness lifts it to 4.58:1 on --bg-light and 4.89:1 on white.
That is the only deliberate departure from DMC's lightness curve. */
/* --- 1.4 Ink set, navy hue, for light surfaces and body copy ---------- */
--ink:hsl(var(--navy-h) 75.86% 11.37%); /* #071133 headings on light */
--ink-soft:hsl(var(--navy-h) 29.23% 38.24%); /* #45527E body on light */
--soft:hsl(var(--navy-h) 52.50% 84.31%); /* #C2CBEC body on navy */
--soft-2:hsl(var(--navy-h) 36.59% 67.84%); /* #8F9DCB dim body on navy */
--strong-dark:hsl(var(--sky-h) 100% 94.5%); /* strong inside dark copy */
/* --- 1.5 Hairlines and fields ---------------------------------------- */
--line:rgb(var(--sky-rgb) / .16);
--line-strong:rgb(var(--sky-rgb) / .36);
--line-light:hsl(var(--sky-h) 57.89% 92.55%); /* #E1ECF7 hairline on light */
--line-card:hsl(var(--sky-h) 56% 92.0%); /* card border on light */
--bg-light:hsl(var(--sky-h) 71.43% 97.25%); /* #F3F8FD THE light section field */
--bg-input:hsl(var(--sky-h) 71% 98.0%);
--white:#fff;
/* --- 1.6 The one gradient ------------------------------------------- */
--grad-rise:linear-gradient(120deg,var(--sky-600) 0%,var(--sky-500) 50%,var(--sky-250) 100%);
/* --- 1.7 Support colours, tokenised because DMC left them loose ------ */
--err-line:hsl(354 58% 63%);
--err-text:hsl(354 41% 53%);
--err-field:hsl(354 60% 98%);
--err-bg:hsl(354 62% 96%);
--err-strong:hsl(354 44% 43%);
--ok:hsl(150 44% 42%);
--placeholder:hsl(var(--navy-h) 24% 67%);
--fineprint:hsl(var(--navy-h) 20% 62%);
/* --- 1.8 Geometry ---------------------------------------------------- */
--rad-lg:36px; /* the final CTA panel only */
--rad:28px; /* every large card */
--rad-md:22px;
--rad-sm:16px; /* icon tiles, notes, dropdown */
--rad-xs:12px; /* pills, burger, dropdown rows */
--rad-in:14px; /* inputs */
--pill:999px;
--wrap:1400px;
/* --- 1.8b The straddle, declared here rather than on one component.
Two elements in two different sections have to agree on these numbers:
the section below the hero, which pulls its card up, and the hero
itself, which has to leave the card the right amount of artwork to
land on. A value declared on either one of them is invisible to the
other, and the two drifting apart is exactly the defect this pair of
tokens now prevents. Section 9.2b is where they are used and reasoned
about; only the declaration lives here.
--straddle-lift how far the card's top edge sits ABOVE the hero's
bottom edge. Measured off the live captures at 180px
on the pillar page and 210px on the homepage.
--art-sink how much of the hero ARTWORK the card covers. It is
NOT the same number, and assuming it was is what
buried half the artwork on a phone. See 9.2b. */
--straddle-lift:clamp(176px,12vw,180px);
--art-sink:78px;
/* --- 1.9 Shadows. Very large blur, very negative spread, low alpha.
They must read as lift, never as a drawn edge. --------------------- */
--sh-sky:0 18px 40px -12px rgb(var(--sky-rgb) / .45);
--sh-ink:0 18px 40px -14px rgb(var(--navy-rgb) / .40);
--sh-hd:0 18px 50px -20px hsl(var(--navy-h) 100% 5% / .75);
--sh-drop:0 40px 80px -25px hsl(var(--navy-h) 100% 5% / .85);
--sh-card:0 40px 80px -30px hsl(var(--navy-h) 100% 4% / .70);
--sh-form-dark:0 50px 100px -40px hsl(var(--navy-h) 100% 4% / .85);
--sh-form-light:0 44px 90px -44px hsl(var(--navy-h) 76% 11% / .28);
--sh-panel:0 60px 120px -50px hsl(var(--navy-h) 100% 2% / .85);
--sh-proc:0 30px 60px -30px hsl(var(--navy-h) 76% 11% / .25);
--sh-modal:0 30px 80px hsl(var(--navy-h) 100% 10% / .45);
/* --- 1.10 Motion ----------------------------------------------------- */
--ease:cubic-bezier(.2,.7,.3,1);
--ease-rev:cubic-bezier(.2,.65,.3,1);
--ease-off:cubic-bezier(.2,.7,.25,1);
--t-micro:.25s;
--t-std:.35s;
--t-card:.45s;
--t-slow:.9s;
/* --- 1.11 Type ------------------------------------------------------- */
--font-d:'Montserrat',system-ui,sans-serif;
--font-b:'Plus Jakarta Sans',system-ui,sans-serif;
}
/* ===========================================================================
2 · PAGE BASE
Every element default below is wrapped in :where(), specificity (0,0,1) or
(0,0,0). That is trap A and trap B closed at the source: a single class
always wins over a reset in this file.
=========================================================================== */
.mina2-page{
font-family:var(--font-b);
font-size:17px; line-height:1.75;
background:var(--n-900);
color:var(--c-body,var(--soft));
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
overflow-x: clip; /* clip, NOT hidden.
overflow-x:hidden forces overflow-y to compute to auto, which makes this
element a scroll container. Every position:sticky on the page then anchors
to a box that never scrolls, so sticky is silently inert site wide. Measured:
an element that should have held at 32px moved to -687px. clip prevents the
horizontal bleed without creating a scroll container. */;
/* Default surface, the page field. Surface classes in section 4 override
these on the sections that carry them, and every component reads them. */
--c-surface:var(--n-900);
--c-head:var(--white);
--c-body:var(--soft);
--c-dim:var(--soft-2);
--c-accent:var(--sky-400);
--c-link:var(--sky-500);
--c-link-h:var(--sky-300);
--c-strong:var(--strong-dark);
--c-rule:var(--line);
--c-rule-strong:var(--line-strong);
--c-tick:var(--sky-500);
--c-tick-mark:var(--sky-400);
}
:where(.mina2-page,.mina2-hd,.mina2-ft) *,
:where(.mina2-page,.mina2-hd,.mina2-ft) *::before,
:where(.mina2-page,.mina2-hd,.mina2-ft) *::after{ box-sizing:border-box; margin:0; padding:0; }
:where(.mina2-page,.mina2-hd,.mina2-ft) img{ display:block; max-width:100%; height:auto; }
:where(.mina2-page,.mina2-hd,.mina2-ft) svg{ display:block; }
:where(.mina2-page,.mina2-hd,.mina2-ft) a{ text-decoration:none; color:inherit; }
:where(.mina2-page,.mina2-hd,.mina2-ft) ul,
:where(.mina2-page,.mina2-hd,.mina2-ft) ol{ list-style:none; }
:where(.mina2-page,.mina2-hd,.mina2-ft) button{ background:none; border:none; font:inherit; color:inherit; cursor:pointer; }
:where(.mina2-page,.mina2-hd,.mina2-ft) input,
:where(.mina2-page,.mina2-hd,.mina2-ft) select,
:where(.mina2-page,.mina2-hd,.mina2-ft) textarea{ font:inherit; color:inherit; }
.mina2-page ::selection{ background:var(--sky-500); color:var(--n-950); }
.mina2-hd ::selection{ background:var(--sky-500); color:var(--n-950); }
.mina2-ft ::selection{ background:var(--sky-500); color:var(--n-950); }
.mina2-page a:focus-visible, .mina2-page button:focus-visible,
.mina2-page input:focus-visible, .mina2-page select:focus-visible,
.mina2-page textarea:focus-visible,
.mina2-hd a:focus-visible, .mina2-hd button:focus-visible,
.mina2-ft a:focus-visible, .mina2-ft button:focus-visible{
outline:2px solid var(--sky-500); outline-offset:3px; border-radius:6px;
}
.mina2-container{ max-width:var(--wrap); margin:0 auto; padding:0 48px; }
.mina2-container--wide{ max-width:calc(var(--wrap) + 120px); }
/* Screen reader helper and honeypot. */
.mina2-vh{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.mina2-hp{ position:absolute; left:-5000px; width:1px; height:1px; opacity:0; overflow:hidden; }
/* Suppressed block. A live page sometimes carries a section that is display:none
at every width and still contributes headings, copy and links to what a crawler
reads. Removing it would change the page; styling it would invent a section the
site does not show. It is reproduced in the DOM and hidden, and the class says
so out loud rather than leaving an inline style that reads as an accident.
NOT a utility. Use it only to mirror a section the live page already hides. */
.mina2-suppressed{ display:none; }
/* The width gated pair. Same family as .mina2-suppressed above and governed by
the same discipline: it exists to MIRROR something live already does, never to
invent a responsive behaviour of our own.
Live authors a repeated element twice and lets Elementor's elementor-hidden-*
classes show exactly one of the pair. Two shapes of this are on the site:
the four process steps on all 31 archetype 1 service pages carry the SAME
image twice, identical src and identical alt, once in the copy column and
once in the media column;
/contact-us/ carries the telephone card twice, once beside the copy and once
under the form, and the two carry DIFFERENT headings, so both are content
and neither can go.
Rendering both members would duplicate the element on screen, which live never
does. Deleting one would drop an , which is why DMC never declared them, but MINA's live pages put body
voice text inside HEADING elements: the homepage hero lead is an h2 and its
closing subheading is an h3, and a rebuild may not change a heading's level.
Without an explicit weight those inherit the browser's bold and the voice
silently becomes a heading again. Declared once here rather than patched per
page. On a
the value is identical to what the browser already computed,
so nothing that existed before this line moves. -------------------------- */
.mina2-lead{ font-size:clamp(1.05rem,1.35vw,1.22rem); line-height:1.8; color:var(--c-body); }
.mina2-copy{ font-size:16px; line-height:1.85; color:var(--c-body); }
.mina2-copy--tight{ font-size:15px; line-height:1.8; }
.mina2-small{ font-size:14.5px; line-height:1.75; color:var(--c-body); }
.mina2-fine{ font-size:12.5px; line-height:1.5; color:var(--fineprint); }
.mina2-lead, .mina2-copy, .mina2-small, .mina2-fine,
.mina2-hero__lead, .mina2-note-line{
font-family:var(--font-b); font-weight:400; font-style:normal;
}
.mina2-lead strong, .mina2-copy strong, .mina2-small strong{ color:var(--c-strong); font-weight:600; }
.mina2-lead b, .mina2-copy b, .mina2-small b{ color:var(--c-strong); font-weight:600; }
.mina2-lead em, .mina2-copy em, .mina2-small em{ font-style:italic; }
.mina2-lead a, .mina2-copy a, .mina2-small a{
color:var(--c-link); text-decoration:underline; text-underline-offset:3px;
text-decoration-thickness:1px; transition:color var(--t-micro);
}
.mina2-lead a:hover, .mina2-copy a:hover, .mina2-small a:hover{ color:var(--c-link-h); }
/* --- 3.4 Eyebrow. The signature small element.
Italic body face, brand mark before it, no rule, no caps, no tracking.
Decorative lines and letterspaced smallcaps before an eyebrow were both
rejected by name and must not come back.
The mark is an inline , never an on several
list items and nothing was colouring it, so it read as bold body text on a row
the surface had already dimmed.
The text element is .mina2-checks__text on purpose, including where live wraps
it in a : the row is a flex container, so any class the 1080 order scale
names, .mina2-copy above all, would take an order value INSIDE the row and
swap the tick to the far side of the line. Measured at 390 on the Oakville
case study, where every tick landed to the right of its own sentence. */
.mina2-checks strong, .mina2-checks b{ color:var(--c-strong); font-weight:600; }
/* --- 7.2 Trust item. COPY component. Only usable where the page already
carries a short promise. Do not invent one. ---------------------------- */
.mina2-trust-item{
display:inline-flex; align-items:center; gap:10px;
font-family:var(--font-b); font-size:14px; font-weight:500;
letter-spacing:.01em; color:rgb(255 255 255 / .92);
}
.mina2-trust-item svg{ flex:none; color:var(--sky-500); }
/* --- 7.3 Breadcrumbs. COPY component, needs a real hierarchy. ----------- */
.mina2-crumbs{
display:flex; flex-wrap:wrap; align-items:center; gap:10px;
font-size:13.5px; color:var(--c-dim); margin-bottom:22px;
}
.mina2-crumbs a{ color:var(--c-accent); transition:color .3s; }
.mina2-crumbs a:hover{ color:var(--white); }
.mina2-crumbs svg{ opacity:.55; flex:none; }
/* --- 7.4 Inline note. COPY component. A white callout on a light band.
Sized 14.5px and it STAYS 14.5px: in DMC this component silently rendered
at 16px everywhere it was actually used, because the media row styled its
own child paragraphs with a child combinator. Nothing in this file styles
a bare element inside a component, so the note keeps its size. --------- */
.mina2-note{
font-size:14.5px; line-height:1.75; color:var(--ink);
background:var(--white); border:1px solid var(--line-card); border-radius:var(--rad-sm);
padding:20px 26px;
}
.mina2-note a{ color:var(--sky-600); text-decoration:underline; text-underline-offset:3px; }
.mina2-note a:hover{ color:var(--sky-700); }
/* --- 7.5 Decorative devices. There are no shape dividers in this system.
No waves, no angled seams, no clip paths. Surfaces meet on a hard edge and
these three devices carry the depth instead. -------------------------- */
.mina2-lines{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.mina2-wm{
position:absolute; top:50%; right:-7%; transform:translateY(-50%);
width:clamp(320px,34vw,600px); opacity:.05;
user-select:none; pointer-events:none; color:var(--sky-500);
}
.mina2-glow{ position:absolute; inset:0; pointer-events:none;
background:radial-gradient(900px 520px at 82% 8%, rgb(var(--sky-rgb) / .10) 0%, rgb(var(--sky-rgb) / 0) 60%); }
/* --- 7.6 Icon link row. NEW.
Section 11 already has one of these, .mina2-ft__social, but it is a footer
element: it reads the footer's field, sits left aligned in a footer column and
is coloured for the deepest navy. MINA's /contact-us/ closes with the same
three destinations set in the middle of a full width SKY band, where the
footer's sky-400 glyph on a sky field would be invisible.
So this is the body's own version and it reproduces the live treatment rather
than substituting the footer's: a navy rounded square with a white glyph,
which is what live paints and which is also the only pairing allowed on sky.
White on sky is the one hard rule this system states twice, and it is a
background here rather than a foreground, so the glyph is white on navy.
The label inside each link is a .mina2-vh span. It is the anchor text the
LINKS gate matches on, so it cannot be dropped, and it is not shown because
live does not show it either. --------------------------------------------- */
.mina2-social{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.mina2-social a{
width:44px; height:44px; flex:none; border-radius:var(--rad-xs);
display:flex; align-items:center; justify-content:center;
background:var(--n-800); color:var(--white);
transition:background var(--t-micro),transform var(--t-std) var(--ease);
}
.mina2-social a:hover{ background:var(--n-700); transform:translateY(-2px); }
.mina2-social svg{ width:17px; height:17px; fill:currentColor; }
/* --- 7.7 The alternative rule. COPY component.
A short centred separator between two ways of doing the same thing, on live a
literal "- OR -" between the contact form and the telephone card once the two
stack. It carries its own words, so like every other COPY component it may
only be used where the page already has the line. Do not invent one. ------ */
.mina2-or{
font-family:var(--font-b); font-size:14px; font-weight:600;
letter-spacing:.14em; line-height:1; text-align:center;
color:var(--c-dim); margin:26px 0 22px;
}
/* ===========================================================================
8 · SECTION SYSTEM
Ten slots. Vertical padding only; horizontal padding comes from the
container. The curve is DMC's, measured, not estimated.
=========================================================================== */
.mina2-sec{ position:relative; padding:clamp(96px,10vw,150px) 0; }
.mina2-sec--intro{ padding:clamp(110px,12vw,175px) 0; }
.mina2-sec--serv{ padding:clamp(100px,11vw,170px) 0; }
.mina2-sec--serve{ padding:clamp(100px,11vw,165px) 0; }
.mina2-sec--lead{ padding:clamp(100px,11vw,165px) 0; }
.mina2-sec--band{ padding:clamp(72px,7.5vw,110px) 0; }
/* A STATEMENT BAND THAT LANDS ON ITS OWN SURFACE PAYS ONE GAP, NOT TWO.
Section padding is sized for a surface CHANGE: the band closes on one colour
and the next section opens on another, and the two paddings together are what
separates them. Where the band and the section under it are both dark there is
no change to separate, the field is continuous, and the two paddings simply
add up into a void. Measured on /home/ at 1440: 108px of band bottom plus
158px of the services section's top, so 266px of empty navy between the lead
ending "so patients can find the care they deserve." and the first service
heading. Dean called it, and it is arithmetic rather than taste.
Two selector forms because .mina2-suppressed is display:none but is still a
DOM sibling, so it breaks the adjacency the first form asks about. /home/
carries exactly that: a suppressed services section, reproduced in position
because live emits it hidden, sits between the band and the visible one.
Deliberately narrow. It asks for a dark band followed by a dark section, so a
band that closes onto white or sky keeps the full separation it needs. On the
current set /home/ is the only page it matches; it is written structurally
rather than page scoped so the next page built this way inherits it. */
.mina2-sec--band.mina2-dark:has(+ .mina2-sec.mina2-dark),
.mina2-sec--band.mina2-dark:has(+ .mina2-suppressed + .mina2-sec.mina2-dark){
padding-bottom:clamp(34px,3.4vw,50px);
}
.mina2-sec--band.mina2-dark + .mina2-sec.mina2-dark,
.mina2-sec--band.mina2-dark + .mina2-suppressed + .mina2-sec.mina2-dark{
padding-top:clamp(48px,5vw,76px);
}
.mina2-sec--clip{ overflow:hidden; }
/* The section a card in the NEXT section straddles up INTO, where that section
is not the hero. The hero solves this for itself in 9.2b, by padding its own
inner so the artwork keeps its clearance; an ordinary section has no
equivalent and, without it, a card rising --straddle-lift out of the section
below lands on top of the last line of copy above it.
The clearance is written as the base section padding PLUS --straddle-lift, so
the two numbers can never drift apart: change the lift in 1.8b and this
follows. Both terms are fluid, so there is no media query to keep in step
either.
/medical-marketing-services/ is the case this exists for. Live pulls a navy
panel up out of the sky band into the white page title band above it, which
is the same move the hero straddle makes, one section further down the page. */
.mina2-sec--straddled{ padding-bottom:calc(clamp(96px,10vw,150px) + var(--straddle-lift)); }
.mina2-sec-head{ max-width:900px; margin:0 auto clamp(52px,6vw,80px); text-align:center; }
.mina2-sec-head .mina2-eyebrow{ justify-content:center; }
/* An h1 in a section head rather than in a hero. Not every MINA page opens on a
navy hero: some open on a centred title block on a LIGHT field, and rule 1
says a section that is light on live stays light, so those pages cannot
borrow the hero. Only .mina2-hero .mina2-h1 carried a margin, so the h1
landed flush on the lead paragraph under it. */
.mina2-sec-head .mina2-h1{ margin:0 0 20px; }
.mina2-sec-head .mina2-h2{ margin:0 0 18px; }
.mina2-sec-head .mina2-copy{ font-size:16px; line-height:1.8; }
/* The h3 subheading under an h2 needs its own air or it reads as part of the
paragraph below it. Added late in DMC, after live pages shipped without it. */
.mina2-sec-head .mina2-h3,
.mina2-ref__copy .mina2-h3,
.mina2-serv__head .mina2-h3{ margin-top:14px; margin-bottom:12px; }
.mina2-sec-head .mina2-copy + .mina2-h3{ margin-top:18px; }
/* A section head carrying two intro paragraphs. DMC's only ever carries one, so
the second ran flush against the first. */
.mina2-sec-head .mina2-copy + .mina2-copy{ margin-top:16px; }
.mina2-serv__head{ text-align:center; max-width:900px; margin:0 auto clamp(64px,7vw,96px); }
.mina2-serv__head .mina2-h2{ margin:0; }
.mina2-serv__head .mina2-eyebrow{ justify-content:center; }
/* Two column grid set. Every one uses minmax(0,...) and every child carries an
explicit min-width:0 guard below. Without it a grid child's default
min-width:auto lets a long unbroken string blow the column out at ANY width
and no breakpoint will save it. This is not a media query, it is a guard. */
.mina2-hero__inner > *, .mina2-intro__grid > *, .mina2-row > *,
.mina2-consult__grid > *, .mina2-serve__grid > *, .mina2-proc-grid > *,
.mina2-sys-grid > *, .mina2-ref__grid > *, .mina2-lead__grid > *,
.mina2-cases__row > *, .mina2-anns__row > *, .mina2-posts > *,
.mina2-ft__inner > *{ min-width:0; }
.mina2-page .mina2-consult__contact a, .mina2-ft__contact-item span{ overflow-wrap:anywhere; }
/* ===========================================================================
9 · COMPONENTS
=========================================================================== */
/* --- 9.1 Hero. Full bleed, two column, copy left, art or form right.
The gradient runs TO BOTTOM and ends on a uniform --n-950 with both glows
lifted away from the bottom edge. That is deliberate: it is the only way a
straddling card below it reads as an overlap rather than as a cut off card.
Hero art is borderless. No frames, no cards, no borders around any imagery
anywhere in this system. Named brand rule. ---------------------------- */
.mina2-hero{ padding:0; background:var(--n-900); }
.mina2-hero__media{
position:relative; overflow:hidden;
min-height:min(86vh,880px); display:flex; align-items:center;
background:
radial-gradient(1100px 640px at 80% 12%, hsl(var(--sky-h) 71% 46% / .32) 0%, hsl(var(--sky-h) 71% 46% / 0) 58%),
radial-gradient(760px 560px at 10% 32%, hsl(var(--navy-h) 76% 27% / .50) 0%, hsl(var(--navy-h) 76% 27% / 0) 62%),
linear-gradient(to bottom, hsl(var(--navy-h) 92% 21%) 0%, var(--n-800) 52%, var(--n-950) 100%);
}
.mina2-hero__inner{
position:relative; z-index:2; width:100%;
max-width:calc(var(--wrap) + 96px); margin:0 auto;
padding:clamp(72px,8vw,116px) 48px clamp(100px,10vw,150px);
display:grid; grid-template-columns:minmax(0,1fr) 520px;
gap:clamp(44px,5vw,88px); align-items:center;
}
.mina2-hero--pillar .mina2-hero__inner{
grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
padding-bottom:clamp(76px,8vw,120px); /* no stats band straddling a pillar */
}
/* The straddling hero modifier is defined once, with the rest of the straddle
geometry, in section 9.2b. Nothing about it belongs here. */
.mina2-hero .mina2-eyebrow{ margin-bottom:26px; }
.mina2-hero .mina2-h1{ margin:0 0 28px; }
.mina2-hero__lead{
max-width:760px; font-size:clamp(1.05rem,1.3vw,1.22rem); line-height:1.8; color:var(--sky-300);
}
.mina2-hero__lead strong{ color:var(--white); font-weight:600; }
.mina2-hero__lead em{ font-style:italic; }
.mina2-hero__lead a{ color:var(--white); text-decoration:underline; text-underline-offset:4px;
text-decoration-color:rgb(var(--sky-rgb) / .6); transition:text-decoration-color var(--t-micro); }
.mina2-hero__lead a:hover{ text-decoration-color:currentColor; }
/* A hero carrying TWO lead paragraphs. DMC's never does, and the reset has
zeroed every margin, so the second ran flush against the first with no gap at
all. Several MINA service heroes carry two. */
.mina2-hero__lead + .mina2-hero__lead{ margin-top:18px; }
/* A quiet note under the hero lead. Added for batch R5. Live's case study hero
carries a running UPDATE line under its lead, set small and grey, and it is a
rather than a
on live so it must stay one: anything put in a
becomes a COPY entry. It needs its own rule because the hero content column
has no default spacing at all, every voice in it states its own, and without a
top margin the note ran flush into the lead above it. */
.mina2-hero__note{
margin-top:22px; max-width:640px; font-family:var(--font-b); font-weight:400;
font-size:13.5px; line-height:1.7; color:var(--soft-2);
}
.mina2-hero__cta{ display:flex; flex-wrap:wrap; gap:18px; margin-top:42px; }
.mina2-hero__trust{
display:flex; flex-wrap:wrap; gap:14px 38px; margin-top:48px;
padding-top:32px; border-top:1px solid rgb(255 255 255 / .14);
}
.mina2-phero-art{
width:100%; max-width:560px; justify-self:center;
opacity:0; transform:translateY(26px); animation:minaRise 1s var(--ease-rev) .45s forwards;
}
.mina2-phero-art img{ width:100%; height:auto; }
.mina2-hero__form{ opacity:0; transform:translateY(26px); animation:minaRise 1s var(--ease-rev) .5s forwards; }
/* --- 9.2 Stats band. CONTENT in DMC's transfer matrix: it is four figures,
four captions and three client logos. The SHELL is style and is built here,
but it may only ever carry evidenced figures. Never invent a statistic.
TRAP E LIVES HERE. .mina2-stats has NO background and must never be given
one. The card straddles the hero edge with a negative margin; an opaque
background on the section collapses through and paints over the very
overlap it is meant to create. That bug cost three rounds on DMC. -------- */
.mina2-stats{ padding:0 28px; position:relative; z-index:5; background:none; }
.mina2-stats__card{
max-width:var(--wrap); margin:-78px auto 0;
background:linear-gradient(180deg,var(--n-600) 0%,hsl(var(--navy-h) 82% 21%) 100%);
border:1px solid var(--line); border-radius:var(--rad);
padding:56px 64px 50px; display:grid; grid-template-columns:repeat(4,1fr);
box-shadow:var(--sh-card);
}
.mina2-stat{ padding:0 36px; border-left:1px solid var(--line); }
.mina2-stat:first-child{ border-left:none; padding-left:0; }
.mina2-stat__num{
font-family:var(--font-d); font-weight:300; font-size:clamp(2.7rem,3.9vw,4rem);
line-height:1; color:var(--white); display:flex; align-items:baseline; gap:6px; white-space:nowrap;
}
.mina2-stat__pre{ font-size:.5em; font-weight:400; color:var(--sky-500); }
.mina2-stat__suffix{ font-size:.38em; font-weight:600; letter-spacing:.12em; color:var(--sky-500); text-transform:uppercase; }
.mina2-stat__label{ margin-top:14px; font-size:13.5px; line-height:1.6; color:var(--soft-2); }
.mina2-stats__note{ max-width:var(--wrap); margin:18px auto 0; padding:0 8px; font-size:11.5px; line-height:1.6; color:var(--soft-2); }
/* --- 9.2b Hero straddle. NEW, and the archetype move for MINA's service
pages. LAYOUT-RULES rule 3.
On the live pages the lead form card sits PARTLY INSIDE the hero and partly
below it, with the hero art running down behind and under it, so the card
reads as lifting off the hero. It is the single most recognisable thing
about these pages and it is not the same as a card in the section below.
Geometry, and it is the stats band's geometry rather than a new one:
the host section declares its own top padding as --straddle-pt,
the card cancels that padding and then some, by --straddle-lift,
so the card's top edge lands --straddle-lift ABOVE the section's top
edge, which is the hero's bottom edge.
TRAP E, restated because it applies here exactly as it does to the stats
band: the host section must NOT paint over the overlap it is creating. It
may carry a surface class, because a surface paints only inside the section
box and the card overflows above that box, but it must never carry
.mina2-sec--clip. overflow:hidden clips the overflowing card AND silently
disables the sticky below it, with no warning in any devtool.
The hero's own .mina2-hero__inner is position:relative z-index:2, so the
card has to out-rank it or the hero copy paints over the card. z-index 5,
the same value the stats band uses, for the same reason.
The hero modifier bottom-anchors the art so the art runs down behind the
card. Without it the art floats in the vertical centre and the card
overlaps empty gradient.
HOW DEEP THE ART GOES UNDER THE CARD IS ITS OWN NUMBER
------------------------------------------------------
--straddle-lift and --art-sink are not the same value and the first build
treated them as one. Anchoring the art's bottom edge flush to the hero's
bottom edge makes the card swallow the FULL lift, which is 176px of
artwork at every width. On a 520px tall desktop illustration that is 34%
of it. On the 322px one a 390px phone renders it is 55%: the doctor is cut
off at the chest, the laptop she is holding disappears completely, and the
image reads as ending rather than as continuing behind the card.
Live does not do that. Measured off the phase one clone, which visual-diff
has already matched to the frozen captures at every width, the live card
covers the bottom of the hero artwork by:
home 1440 72px of 487 14.8% pillar 1440 15px of 497 3.1%
home 1280 72px of 487 14.8% pillar 1280 15px of 497 3.1%
home 1080 46px of 461 9.9% pillar 1080 none, 31px clear
home 768 none, 100px clear pillar 768 none, 110px clear
home 390 10px of 320 3.1% pillar 390 no artwork, hidden
So live's deepest overlap anywhere is 14.8%, at 1440 and 1280, and Dean's
reference for the move is that capture: the card's edge crossing the lower
part of the figure with the whole laptop still visible. --art-sink holds
that one proportion at every width instead of reproducing live's collapse
to nothing at 768, which would lose the move on a tablet. 78px is 15.0% of
the 520px desktop artwork, and the responsive overrides keep it at 15% as
the artwork shrinks.
The clearance is taken as padding on .mina2-hero__inner rather than as a
transform or a margin on the art itself, for three reasons. A transform is
clobbered by the art's own entry animation. A margin on the art alone
bottom-aligns the copy column against a taller row and drags the headline
down with it. Padding on the inner moves the hero's bottom edge down and
leaves everything inside the hero exactly where it was, which is the only
one of the three that changes nothing except the overlap. ------------- */
/* STRETCH, not flex-end, and it is the second half of section 9.2c below.
.mina2-hero__media carries min-height:min(86vh,880px) and is a flex box, so
a hero whose content is shorter than that has surplus height to place.
flex-end put all of it ABOVE the inner, which is a void over the h1 rather
than under the artwork. It was already visible on six heroes before any of
this work: 269px of headroom on /chiropractor-marketing-agency-and-web-design/,
220px on the Oakville case study, 198px on the weight loss one, against the
116px the inner's own padding-top asks for. Reclaiming the copy column's
dead padding in 9.2c shortened fourteen more inners past the min-height and
pushed those down too, which is how this one surfaced.
stretch hands the surplus to the grid row instead. Measured at 1440, the h1
lands at 115px on every straddling hero, and on the pages whose artwork can
scale the art takes the extra height with it, so the row grows and the void
does not simply reappear underneath.
It moves the straddle by 2px, 82 to 80 and 45 to 43, which is the stretched
box's bottom edge rounding rather than anything structural. Nothing here is
load bearing on flex-end: the bottom of the inner is still the bottom of the
hero, which is what the card measures --straddle-lift up from. .mina2-lines
is position:absolute and therefore not a flex item, so it is untouched.
The 1080 block in section 12 re-declares flex-end, so this is desktop only
by construction and the stacked hero is byte identical either way. */
.mina2-hero--straddle .mina2-hero__media{ align-items:stretch; }
.mina2-hero--straddle .mina2-hero__inner{
align-items:end;
/* The gap between the artwork's bottom edge and the hero's bottom edge.
The card's top is --straddle-lift above the hero's bottom, so what the
card actually covers is lift minus this, which is --art-sink. */
padding-bottom:calc(var(--straddle-lift) - var(--art-sink));
}
/* --- 9.2c THE ART TOP EDGE. Desktop only, and it is a correction to 9.2b.
-------------------------------------------------------------------------
9.2b bottom anchors the art so the card lands on artwork rather than on
empty gradient. That is right for the card and wrong for the top of the
column: a grid row is as tall as its TALLEST item, and on 37 of the 43
heroes here the copy is the taller one. The art therefore sank to the
bottom of a row the headline had sized, and the space it vacated opened
as a void of bare gradient above it. Measured at 1440 before this rule:
medical-website-design 307px of void
ophthalmology / optometry / physio 286px
chiropractic-seo 268px
medical-seo 40px
chiropractor-marketing-agency -63px (art already the taller)
Live does not do this. There the art's top sits level with the h1 and the
section's height comes off the ARTWORK, not off the copy.
Three things are in tension and only two can hold at once on a page whose
copy outruns its art: the art's top level with the h1, the art's bottom
under the card, and the art WHOLE at its own ratio inside its own track.
Content is frozen, so the copy cannot give. The straddle is the archetype
move, so the bottom cannot give.
AN EARLIER BUILD RESOLVED THAT BY LETTING THE ART GIVE: it scaled up to
fill the row and object-fit:cover discarded what would not fit, up to 11%
of the image's width, capped at 1.12x the track. **That is reversed. The
artwork is never cropped, at any width, on any page. It is now the hard
constraint and the top edge is what gives.** What is left of the void is
accepted, and the per page cost is recorded in audits/hero-gap.md.
So this rule closes the void with the three things that cost the artwork
nothing: the copy column's dead padding, the full width of the art track,
and the hero's own unmeasured height floor. Then the copy's internal
spacing tightens, and what remains remains.
HOW EACH PIECE EARNS ITS PLACE
align-self:end on the art, at its natural height. The bottom lands exactly
where 9.2b put it, so every straddle number survives untouched: --art-sink
still measures from the row's bottom edge and the card still crosses it.
The top lands wherever the artwork's own ratio puts it.
align-self:start on the copy. Without it the mirror defect appears on the
six pages whose art is the taller item: --straddle-lift's align-items:end
sank the COPY instead and the h1 dropped 130px below the art's top. It is
the same bug seen from the other side, and one line answers both.
padding-bottom:0 on the copy, restored below 1080. That padding is 115px
of empty box at 1440 and it is inside the taller item, so it inflated the
row by 115px of nothing. Removing it costs nothing: the inner's own 98px
bottom padding still holds the copy clear of the hero's edge. Below 1080 it
is the gap between the copy and the art stacked under it, so it comes back.
max-width:none. The 560px cap was narrower than the 604px track it sits
in at 1440, so the art was leaving 44px of its own column unused while a
void sat above it. On artwork that is never cropped this is the ONLY thing
that makes the picture bigger, and it is free: a square PNG in a 604px
track is 604px tall instead of 560px. --art-sink is a pixel constant and
reads off the row's bottom edge, so widening the art does not move the
overlap.
NOBODY OPTS OUT ANY MORE, and that is the point of the reversal. The
lockup heroes, the portrait artwork and the morph stack each carried an
opt out from the scale up, for three different measured reasons. With no
scale up there is one rule and it is the one they were opting out to get:
the image, whole, at its own ratio, bottom anchored under the card. The
modifiers survive because they still carry OTHER behaviour, --art-sink on
--art-wide and the clearance on --art-clear, both in 9.2b.
Everything is routed through custom properties so section 12 can stand
the whole rule down at 1080 in ONE declaration. Trap D: that declaration
carries .mina2-page for (0,2,0), because the opt outs below are (0,2,0)
and a media query adds no specificity of its own. ---------------------- */
.mina2-hero--straddle .mina2-hero__content{ align-self:var(--copy-self,start); padding-bottom:var(--copy-pb,0); }
.mina2-hero--straddle .mina2-phero-art{
/* end, and the bottom edge is the load bearing one. The box's bottom sits on
the row's bottom edge whatever height the artwork resolves to, which is
what --art-sink measures the card's overlap from. Anchoring anywhere else
loses the straddle: measured on an earlier build, top anchoring took the
card's overlap of the artwork from 82px to 6px on /medical-website-design/
and to -43px on the orthopedic case study. */
align-self:var(--art-self,end); height:var(--art-h,auto);
max-width:var(--art-cap,none);
/* NO CEILING, because there is nothing left to bound. An earlier build
stretched the box to the row and let object-fit:cover discard the surplus
width, capped at 1.12x the track, which is up to 11% of the artwork. That
tradeoff is REVERSED, on Dean's instruction: the artwork is never cropped,
at any width, on any page. The box is therefore the size the image wants
to be inside its track, the residual void above it is accepted, and the
per page cost is recorded in audits/hero-gap.md.
Everything the ceiling existed to police goes with it. It cannot crop
vertically on portrait artwork any more, so --art-tall no longer needs an
opt out; it cannot crop horizontally on square artwork, so neither do the
lockup heroes. What is left is one rule for every straddling hero. */
max-height:var(--art-max-h,none);
}
.mina2-hero--straddle .mina2-phero-art > img{
/* height:auto and object-fit:fill together are the statement that the box is
never anything but the image's own aspect ratio. .mina2-phero-art img in
section 9.1 already sets width:100%;height:auto, so fill has nothing to
stretch and the two agree by construction rather than by luck. A rendered
box measured against the PNG's intrinsic ratio is the test, and it runs
over every page in the report for this change. */
height:var(--art-img-h,auto);
object-fit:var(--art-img-fit,fill);
/* Inert while the box matches the image. It reads bottom so that if a future
artwork ever did arrive with a fit that could crop, the edge the card
overlaps is the one that stays. */
object-position:50% 100%;
}
/* A STRADDLING HERO IS AS TALL AS ITS CONTENT, and with the scale up gone this
is the largest single thing left that closes the void.
.mina2-hero__media asks for min(86vh,880px) whatever it holds. On a hero
whose copy and artwork together come to less than that, every surplus pixel
lands in the grid row, and the row hands it to the space ABOVE the bottom
anchored artwork. It is a void bought with a number that was never measured
against these pages.
It was already dropped for the two lockup modifiers, where it was worth 100px
of void each. Measured across the whole set it is worth the same or more on
the illustration heroes now that nothing scales to absorb it, so it is
dropped for every straddling hero rather than for two of them.
The straddle is untouched: the card is positioned --straddle-lift above the
hero's BOTTOM edge and the artwork is anchored to the same edge, so both
move together whatever the hero's height turns out to be.
NOT inert below 1080, which is why section 12 puts the floor back for every
straddling hero. A stacked hero lands under the 860px floor rather than over
it, so dropping it there shortens the hero and takes the card up with it.
Caught by re-measuring the stacked layout, not by reasoning about it. */
.mina2-hero--straddle .mina2-hero__media{ min-height:0; }
/* THE COPY COLUMN'S OWN SPACING, tightened on a straddling hero only.
Third of the three levers Dean named, and the only one that acts on the item
that is actually setting the row's height. The row is as tall as the copy
column on nearly every one of these pages, the artwork may no longer be
scaled to meet it, so what is left is to spend fewer pixels between the
voices in the copy itself. Measured at 1440, this takes 30px to 46px out of
the column, and every one of those is a pixel of void that does not open
above the artwork.
It is deliberately modest. The eyebrow, headline and lead keep their own
sizes and line heights; only the gaps between them close, and none of them
goes below the value the same voice uses elsewhere in the system.
Restored to the base values below 1080 in section 12, where the artwork sits
under the copy rather than beside it and the gaps are read as rhythm rather
than as a void. */
.mina2-hero--straddle .mina2-hero__content .mina2-eyebrow{ margin-bottom:var(--hero-eyebrow-mb,18px); }
.mina2-hero--straddle .mina2-hero__content .mina2-h1{ margin-bottom:var(--hero-h1-mb,20px); }
.mina2-hero--straddle .mina2-hero__content .mina2-hero__lead + .mina2-hero__lead{ margin-top:var(--hero-lead-mt,14px); }
.mina2-hero--straddle .mina2-hero__content .mina2-hero__cta{ margin-top:var(--hero-cta-mt,30px); }
.mina2-hero--straddle .mina2-hero__content .mina2-hero__trust{
margin-top:var(--hero-trust-mt,34px); padding-top:var(--hero-trust-pt,24px);
}
/* --art-sink INVERTED, for a hero whose artwork is a lockup rather than a
figure. NEW, and it is a measured correction rather than a preference.
--art-sink assumes a tall illustration: 78px of a 520px figure is 15%, and
what the card crosses is the lower part of a person or a device, which is
the read the whole move is built on. The case study heroes carry something
different: a short landscape lockup, the client's logo above a badge stating
the result, 800x419, which renders 293px tall at 1440 and 177px at 390. The
same 78px is 27% of it, and it is the wrong 27%. The badge sits in exactly
that band, so the card hides the one piece of evidence the page exists to
show. Screenshotted at 1440 and 390 before this rule was written.
Live does not do it either. On
_live/shots/case-study-chiropractor-ranks-top-5...@1440.png the card top is
179px above the hero's bottom edge and the artwork's bottom edge is 237px
ABOVE the card, entirely clear of it.
So the sink becomes a clearance. The straddle itself is untouched: the card
still crosses the hero's bottom edge by --straddle-lift at every width,
which is the move. Only the artwork steps out of its way.
Doubled ancestor, labelled. (0,3,0), because section 12 restates
`.mina2-hero--straddle .mina2-hero__inner` at (0,2,0) for the collapse and a
modifier at equal weight written earlier would lose it at and below 1080,
which is the width where burying the lockup is worst. */
.mina2-page .mina2-hero--straddle.mina2-hero--art-clear .mina2-hero__inner{
padding-bottom:calc(var(--straddle-lift) + clamp(20px,2.5vw,40px));
}
/* WIDE HERO ARTWORK. --art-sink is a PIXEL constant, 78px, and it is 15% of one
specific thing: the 520px tall SQUARE illustration every archetype 1 service
page carries. A case study hero carries the client's own lockup instead, and
those are wide banners, 800x419 on the Scarborough page, which renders 272px
tall at 1440. The same 78px is 28.7% of that, measured, so the card ate more
than a quarter of the client's mark and cut into the callout inside it.
Same intent, expressed against a 1.9:1 banner rather than a square: 7.9vw
tracks 15% of the artwork's rendered width down to the 480px cap, the 41px
ceiling holds it at 15% of the 520px art column above 1080, and the 26px
floor keeps the overlap readable at 390. Measured 15.1% at 1440 and 17.3% at
390, against 15% and 3.1% on live.
The selector is (0,2,0) on purpose. The 1080 block in section 12 re-declares
--art-sink on .mina2-page at (0,1,0), and a media query adds no specificity,
so a (0,1,0) modifier written up here would be silently overwritten below
1080 and the overlap would jump back. That is trap D and it is why this rule
carries the page scope root. */
.mina2-page .mina2-hero--art-wide{ --art-sink:clamp(26px,7.9vw,41px); }
.mina2-sec--straddle{
--straddle-pt:clamp(110px,12vw,175px);
/* FLUID AT EVERY WIDTH, and the floor is the load bearing number. The first
build clamped the floor at 56px and then switched the straddle off below
1080 entirely, so the whole move existed only on a desktop screen. Live
straddles on a phone too: measured off _live/shots/home@390.png the card
top is 206px above the hero's bottom edge, and 176px on the pillar page.
12vw keeps the lift proportional to the hero, which is shorter at 390 than
at 1440, and the 112px floor keeps the overlap unmistakable once 12vw
falls below it at 933px. Nothing above 933px changes value. */
/* Floor is 176px, not a smaller mobile value.
Measured on the live captures: the overlap is roughly constant at 176px to
206px across 390, 768 and 1440. It does not scale down with the hero. An
earlier brief of mine assumed it should, which produced 112px at 390 and a
shallower straddle than live. Corrected to match measurement.
--straddle-lift itself is declared in section 1.8b, not here, because the
hero above has to read the same number to work out how much artwork to
leave under the card. It was local to this rule and the hero could not
see it. */
padding-top:var(--straddle-pt);
}
/* position:relative, NOT sticky, and that is a decision rather than an
oversight. The pilot made this column .mina2-ref__side--sticky. A sticky
card works only while it is shorter than the viewport; this one is a nine
field form roughly 1,000px tall, so pinning its top 20px below the viewport
top puts the submit button permanently below the fold for the whole time it
is stuck. Welding the card to the hero edge is also the point of the
straddle: a card that detaches on the first scroll stops reading as lifting
off the hero, which is the move being reproduced. */
.mina2-straddle{
position:relative; z-index:5;
margin-top:calc(-1 * (var(--straddle-pt) + var(--straddle-lift)));
}
/* THE STRADDLE CARD NEVER ANIMATES IN. It is painted, in full, on the first
frame, at every width, and it does not depend on JavaScript to be visible.
Dean's reason is precise and it is a rendering one rather than a taste one:
while the card fades and rises into place it is transparent, so for the
length of the transition the part of the hero artwork the card exists to
cover is on screen. Anything wrong with that edge is exposed once per page
load. A card that is simply always there never shows it.
Belt and braces on purpose. The .mina2-reveal class is off the markup on
every straddling card, and this rule makes the card immune to it being put
back: opacity and transform are stated at their resting values, and the
transition and animation that would move them are switched off. It is
(0,2,0) against .mina2-reveal's (0,1,0) and lives after it in source order,
so it wins on both counts. It names the card and the wrapper only, so the
fields, buttons and pills inside keep their own focus and hover motion.
.mina2-hero__form is the same element on a hero that carries the form inside
itself rather than straddling the edge below it, and it is held to the same
rule for the same reason. */
.mina2-page .mina2-straddle,
.mina2-straddle .mina2-form-card,
.mina2-page .mina2-hero__form{
opacity:1; transform:none; transition:none; animation:none;
}
/* --- 9.3 Dark intro. Editorial two column, head and CTA left, lead copy
right. Relative and clipped so the watermark can hang off the edge. ---- */
.mina2-intro{ position:relative; overflow:hidden; }
.mina2-intro__grid{
position:relative; display:grid;
grid-template-columns:minmax(0,5.5fr) minmax(0,6.5fr);
gap:clamp(48px,6vw,96px); align-items:start;
}
.mina2-intro__head .mina2-h2{ margin:0 0 34px; }
.mina2-intro__head .mina2-btn{ margin-top:6px; }
.mina2-intro__copy > * + *{ margin-top:22px; }
/* --- 9.4 Media row. Image one side, copy and checks and a CTA the other.
Works on all three surfaces, because every colour it uses is a surface
property rather than a hardcoded value.
NOTE: no child combinator anywhere in this component. That is trap B. --- */
.mina2-row{
display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(48px,6vw,100px); align-items:center;
}
.mina2-row + .mina2-row{ margin-top:clamp(88px,9vw,140px); }
/* ONE image per media slot. LAYOUT-RULES rule 2.
The website design row carries two distinct images, a desktop mockup and a
phone mockup, different files with different alt text, and neither may be
dropped. The pilot put BOTH in this slot, where they sat adjacent and neither
read as belonging to the block. Live does not do that: it puts one opposite
the copy and one in the copy flow directly under the paragraph. So does this
system now. The second image goes in .mina2-media--inflow, in the body. */
.mina2-row__media{ display:flex; align-items:center; justify-content:center; gap:clamp(14px,2vw,28px); flex-wrap:wrap; }
.mina2-row__media img{ max-height:520px; width:auto; max-width:100%; object-fit:contain; }
.mina2-row--flip .mina2-row__media{ order:2; }
.mina2-row--flip .mina2-row__body{ order:1; }
.mina2-row__body{ max-width:640px; }
.mina2-row__body .mina2-h3{ font-size:clamp(1.5rem,2vw,1.9rem); margin-bottom:18px; }
.mina2-row__body .mina2-copy{ margin-bottom:26px; }
.mina2-row__body .mina2-lead{ margin-bottom:26px; }
.mina2-row__body .mina2-checks{ margin-bottom:28px; }
.mina2-row__body .mina2-note{ margin-bottom:28px; }
.mina2-row__body .mina2-eyebrow{ margin-bottom:14px; }
/* A row whose block is headed by an h2 rather than an h3. Added for batch R5:
the two story blocks on
/case-study-157-new-patients-in-one-month-at-6-20-per-family-doctor-patient/
are h2 on live and a heading's level may not change, so the row has to accept
one. Without these two the reset's zeroed margins ran the heading straight
into the line under it. The size cap is the same reasoning as the h3 rule
above: the base .mina2-h2 scale is a section headline and reads as one inside
a two column row. Live sets this title at 38px; the cap resolves to 37.6px.
The h5 is live's own lead-in line above the paragraph run, and MINA uses h5
heavily, so it gets the same treatment rather than a per page value. */
.mina2-row__body .mina2-h2{ font-size:clamp(1.7rem,2.4vw,2.35rem); margin-bottom:18px; }
.mina2-row__body .mina2-h5{ margin-bottom:14px; }
/* The plain bulleted list gets the same closing gap the check list gets. Some
live blocks argue with an ordinary
rather than a tick list, and without
this the list ran flush into the call to action below it. Same value as
.mina2-checks so the two are interchangeable inside a row. */
.mina2-row__body .mina2-list{ margin-bottom:28px; }
.mina2-ref__copy .mina2-list{ margin-bottom:20px; }
/* .mina2-row__media--pair and .mina2-media__inset were the pilot's answer to a
block with two images and they are deliberately gone rather than left unused.
A slot that can hold two images is the mechanism that produced the defect;
keeping it available invites the same build on the next page. Two images in
one block means one opposite the copy and one in the flow. */
/* Feature row. A titled note stacked under a copy column, hairline separated on
the check list rhythm. MINA's why-us section carries two, and on live their
titles are NOT headings: they take the .mina2-h4 CLASS on a , because
promoting them to h4 elements would add two entries to the heading sequence
and change the page's outline. */
.mina2-features{ margin:26px 0 32px; }
.mina2-feature{ padding:20px 2px; border-top:1px solid var(--c-rule); }
.mina2-features .mina2-feature:last-child{ border-bottom:1px solid var(--c-rule); }
.mina2-feature .mina2-h4{ font-size:1.06rem; margin-bottom:8px; }
.mina2-feature .mina2-copy{ font-size:15px; line-height:1.7; }
/* Standalone figure. Same borderless treatment as the media row, for an image
that sits in the flow of a copy column rather than opposite it. No frame,
no card, no border: transparent artwork sits directly on the section field.
Named brand rule, and the reason MINA's existing transparent PNGs drop into
this system without re-cutting any of them. */
.mina2-media{ display:flex; align-items:center; justify-content:center; }
.mina2-media img{ max-height:520px; width:auto; max-width:100%; object-fit:contain; }
.mina2-media--wide img{ max-height:none; width:100%; }
.mina2-media--tall img{ max-height:640px; }
/* LAYOUT-RULES rule 2. An image that live puts INSIDE the copy flow, directly
under the paragraph it illustrates, rather than opposite the copy. It is not
a second slot to hoist things into: it exists so an image that belongs to a
paragraph can stay attached to it instead of being parked in a media column
next to another image. Left aligned to the copy measure and held well under
the column width, because an image set to the full measure stops reading as
an illustration of the paragraph and starts reading as its own block. */
.mina2-media--inflow{ justify-content:flex-start; margin:6px 0 30px; }
.mina2-media--inflow img{ max-height:300px; width:auto; }
/* --- 9.5 Procedure card. The workhorse card, icon led, on light or white.
DMC never restyled it for a dark surface and shipped it there twice, an
untested state. Here the card reads --c-surface, so it does have a dark
state, and the doubled ancestor below is the one place a repaint is
genuinely required. ---------------------------------------------------- */
.mina2-proc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
/* Two up. The note below this component says a grid runs 3, 6 or 8 cards and
never 4, because a four card run leaves an orphan in a three column grid.
Where live already lays a set out 2x2 the answer is the two column grid, not
a merged or dropped card: content is frozen, so the grid adapts. It collapses
to one column with the three column grid at 768 and needs no rule of its own
at 1080, where the three column grid is already going two up. */
.mina2-proc-grid--2{ grid-template-columns:repeat(2,1fr); }
.mina2-proc{
background:var(--white); border:1px solid var(--line-card); border-radius:var(--rad);
padding:34px 32px 32px;
transition:transform .4s var(--ease),border-color .4s,box-shadow .4s;
}
.mina2-proc:hover{ transform:translateY(-5px); border-color:rgb(var(--sky-rgb) / .45); box-shadow:var(--sh-proc); }
.mina2-proc__ico{
width:56px; height:56px; border-radius:var(--rad-sm);
background:rgb(var(--sky-rgb) / .15); color:var(--sky-600);
display:flex; align-items:center; justify-content:center; margin-bottom:20px; flex:none;
}
/* Artwork led variant of the same tile. DMC's card is always icon led, which
means an inline SVG on a tinted tile, and inline SVG is free. MINA's live
/contact-us/ cards lead on a supplied PNG instead, and that PNG already carries
its own rounded tinted tile: the artwork IS the tile. Painting the component's
tint behind it would either double the tile or fringe it.
So the modifier drops the tint and the fixed 56px box and lets the artwork set
the size, capped at 118px, which is what live renders (30% of the card, 112px
on the first card and 118px on the other two). Everything else about the tile
is kept, including the 20px bottom margin and the auto side margins the 768
rule already gives it, so the artwork centres with the card exactly as the icon
does and no second rule is needed at any width.
The image sits ABOVE the heading here, which is where live puts it and
therefore where it stays. LAYOUT-RULES rule 2 is about not HOISTING an image
out of its position into a uniform slot; this artwork's position in the content
flow already is the top of its card. */
.mina2-proc__ico--art{ width:auto; height:auto; max-width:118px; background:none; border-radius:0; }
.mina2-proc__title{ font-family:var(--font-d); font-weight:600; font-size:1.1rem; line-height:1.35; color:var(--ink); margin-bottom:12px; }
.mina2-proc__copy{ font-size:14.5px; line-height:1.75; color:var(--ink-soft); }
/* Doubled ancestor, labelled: the card is a white panel, so on a dark surface
it must genuinely repaint rather than recolour. */
.mina2-page .mina2-dark .mina2-proc{
background:linear-gradient(180deg,rgb(var(--navy-rgb) / .5) 0%,rgb(var(--navy-rgb) / .22) 100%);
border-color:var(--line);
}
.mina2-page .mina2-dark .mina2-proc__ico{ color:var(--sky-400); }
.mina2-page .mina2-dark .mina2-proc__title{ color:var(--white); }
.mina2-page .mina2-dark .mina2-proc__copy{ color:var(--soft-2); }
/* A NAVY card on a LIGHT section. NEW, and it exists for LAYOUT-RULES rule 1
rather than for variety.
The rule is usually read at section level: a section that is light on live
stays light. On several MINA pages the section is genuinely light AND the
cards inside it are genuinely navy, with card artwork drawn in sky blue on
transparent specifically for that navy panel. Rebuilding those cards white
deletes most of each illustration, which is the exact failure rule 1 names,
and rebuilding the whole section dark contradicts the gutter measurement.
Both stay true at once: the section follows the measurement, the card follows
its image.
The fill is opaque, not the translucent navy the .mina2-dark ancestor rule
uses. That rule composites against a dark section behind it; over a white
field the same value renders as pale blue and the sky artwork disappears
just as thoroughly as it would on white. */
.mina2-page .mina2-proc--dark{
background:linear-gradient(180deg,var(--n-800) 0%,var(--n-900) 100%);
border-color:var(--line);
}
.mina2-page .mina2-proc--dark:hover{ border-color:var(--line-strong); box-shadow:var(--sh-card); }
/* Colour only, never background. .mina2-proc__ico--art switches the tile off so
supplied artwork that already carries its own tile is not double tiled, and a
background restated here at (0,3,0) would beat that and put the tile back. */
.mina2-page .mina2-proc--dark .mina2-proc__ico{ color:var(--sky-400); }
.mina2-page .mina2-proc--dark .mina2-proc__title{ color:var(--white); }
.mina2-page .mina2-proc--dark .mina2-proc__copy{ color:var(--soft); }
/* Card grids run 3, 6 or 8 cards. Never 4 and never 5, or the last row leaves
an orphan. Merge topics to hit the count, never drop one. */
/* --- 9.6 Numbered step. The stroke outline numeral is the distinguishing
mark. It carries a solid colour fallback first, because there is no
unprefixed text-stroke and without the fallback the numerals VANISH in a
browser that lacks it. DMC shipped without the fallback. ---------------- */
.mina2-sys-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.mina2-sys{
position:relative; display:flex; flex-direction:column;
background:linear-gradient(180deg,rgb(var(--navy-rgb) / .5) 0%,rgb(var(--navy-rgb) / .22) 100%);
border:1px solid var(--c-rule); border-radius:var(--rad); padding:30px 28px; overflow:hidden;
transition:transform var(--t-card) var(--ease),border-color var(--t-card);
}
.mina2-sys::after,
.mina2-spec-card::after{
content:''; position:absolute; left:0; right:0; top:0; height:3px;
background:var(--grad-rise); opacity:0; transform:scaleX(.3); transform-origin:left;
transition:opacity var(--t-card),transform .55s var(--ease);
}
.mina2-sys:hover{ transform:translateY(-6px); border-color:var(--c-rule-strong); }
.mina2-sys:hover::after, .mina2-spec-card:hover::after{ opacity:1; transform:scaleX(1); }
.mina2-sys__num{
font-family:var(--font-d); font-weight:300; font-size:3.2rem; line-height:1;
color:rgb(var(--sky-rgb) / .34); margin-bottom:20px;
}
@supports (-webkit-text-stroke:1px red){
.mina2-sys__num{ color:transparent; -webkit-text-stroke:1px rgb(var(--sky-rgb) / .40); }
}
.mina2-sys__title{ font-family:var(--font-d); font-weight:600; font-size:1.06rem; line-height:1.4; color:var(--c-head); margin-bottom:12px; }
.mina2-sys__copy{ font-size:14px; line-height:1.75; color:var(--c-dim); margin-bottom:20px; }
.mina2-sys .mina2-arrow-link{ margin-top:auto; font-size:14px; }
/* --- 9.7 Specialty card. The only card in the system that carries a
photograph. Everything else is icon or numeral led. ------------------- */
.mina2-serve__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.mina2-spec-card{
position:relative; display:flex; flex-direction:column;
background:linear-gradient(180deg,rgb(var(--navy-rgb) / .5) 0%,rgb(var(--navy-rgb) / .22) 100%);
border:1px solid var(--c-rule); border-radius:var(--rad); overflow:hidden;
transition:transform var(--t-card) var(--ease),border-color var(--t-card),background var(--t-card);
}
.mina2-spec-card:hover{ transform:translateY(-6px); border-color:var(--c-rule-strong); }
.mina2-spec-card__media{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.mina2-spec-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.mina2-spec-card:hover .mina2-spec-card__media img{ transform:scale(1.05); }
.mina2-spec-card__media::after{
content:''; position:absolute; inset:0;
background:linear-gradient(to top,hsl(var(--navy-h) 100% 10% / .42) 0%,hsl(var(--navy-h) 100% 10% / 0) 45%);
}
.mina2-spec-card__body{ display:flex; flex-direction:column; flex:1; padding:30px 32px 32px; }
.mina2-spec-card__body .mina2-h3{ font-size:1.16rem; margin-bottom:13px; }
.mina2-spec-card__body .mina2-small{ color:var(--c-dim); margin-bottom:22px; }
.mina2-spec-card__body .mina2-arrow-link{ margin-top:auto; font-size:14.5px; }
/* --- 9.8 Two column argument. The signature section slot. Copy left, a check
list or a graphic right. ---------------------------------------------- */
.mina2-ref__grid{
display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr);
gap:clamp(48px,6vw,96px); align-items:start;
}
.mina2-ref__grid--even{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; }
.mina2-ref__grid--wide-right{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); }
.mina2-ref__copy .mina2-h2{ margin:0 0 24px; }
.mina2-ref__copy .mina2-h3{ margin:0 0 20px; }
.mina2-ref__copy .mina2-copy{ margin-bottom:20px; }
.mina2-ref__copy .mina2-copy:last-child{ margin-bottom:0; }
.mina2-ref__copy .mina2-checks{ margin:26px 0 28px; }
/* MORE THAN ONE TOPIC IN ONE COPY COLUMN. NEW, and it is a correctness fix at
the 1080 collapse rather than a spacing convenience. Measured at 390, not
reasoned about.
Below 1080 .mina2-ref__copy becomes display:contents and its children become
grid items carrying the order scale in section 12: every heading to -60, every
paragraph to -50, every check list to -30. That rebuilds the live reading
order perfectly for a column holding ONE topic, which is all DMC has. Give it
two, as MINA's case studies do, and it sorts by ROLE across the whole column:
both headings float to the top, then both paragraphs, then both lists. On
/case-study-clinic-ranking-1-for-20-seo-keywords-in-5-months/ at 390 that
printed "About Our Client:" and "The Challenge:" back to back above every
paragraph on the page. It looked like a design choice and it was a defect.
A plain wrapper fixes it because `order` only applies to the children of a
flex or grid container. Wrapped, each topic is a single grid item at order 0
and its internals are laid out in source order by an ordinary block box.
Use one per topic, or none at all. A column with a single topic must NOT be
wrapped: the order scale is what puts its image between the paragraph and the
check list, and a wrapper would opt out of that too. */
.mina2-ref__copy .mina2-topic + .mina2-topic{ margin-top:clamp(38px,4vw,56px); }
.mina2-ref__side .mina2-checks{ margin-bottom:28px; }
/* A form card opposite a long copy column follows the reader down. The
host section must NOT carry .mina2-sec--clip: overflow:hidden on any
ancestor silently disables position:sticky and there is no warning. */
.mina2-ref__side--sticky{ position:sticky; top:32px; }
.mina2-ref--flip .mina2-ref__copy{ order:2; }
.mina2-ref--flip .mina2-ref__side{ order:1; }
/* --- 9.9 FAQ. NOT an accordion. No details element, no toggle, no script.
A static stack of hairline separated question and answer blocks, fully
expanded, which is also why it indexes cleanly. ----------------------- */
.mina2-faq{ max-width:920px; margin:0 auto; }
.mina2-faq__item{ border-top:1px solid var(--c-rule); padding:30px 6px; }
.mina2-faq__item:last-child{ border-bottom:1px solid var(--c-rule); }
.mina2-faq__q{ font-family:var(--font-d); font-weight:600; font-size:1.08rem; line-height:1.4; color:var(--c-head); margin-bottom:12px; }
.mina2-faq__a{ font-size:15px; line-height:1.8; color:var(--c-body); }
.mina2-faq__a a{ color:var(--c-link); text-decoration:underline; text-underline-offset:3px; }
/* --- 9.10 Band. A full width statement or CTA slot between sections.
New in this system: MINA's pages carry standalone heading bands that DMC
has no equivalent for. Two variants, a quiet centred statement and a
raised panel. Both are pure style; the text is always the page's own. -- */
.mina2-band{ position:relative; }
.mina2-band__inner{ max-width:1020px; margin:0 auto; text-align:center; }
.mina2-band__inner .mina2-lead{ margin:26px auto 0; max-width:820px; }
.mina2-band__inner .mina2-copy{ margin:22px auto 0; max-width:820px; }
/* A band that carries a short list of its own. The band centres everything,
and a centred tick column reads as broken for the same reason the check list
is pulled back to the left inside a centred column at 768. So the list keeps
its own left aligned measure inside the centred band. */
.mina2-band__inner .mina2-checks{ max-width:760px; margin:32px auto 0; text-align:left; }
.mina2-band__cta{ margin-top:38px; display:flex; justify-content:center; flex-wrap:wrap; gap:16px; }
.mina2-band__panel{
position:relative; overflow:hidden; max-width:var(--wrap); margin:0 auto;
border-radius:var(--rad-lg); padding:clamp(44px,5vw,72px) clamp(28px,5vw,72px);
background:
radial-gradient(900px 520px at 88% 6%, hsl(var(--sky-h) 71% 46% / .30) 0%, hsl(var(--sky-h) 71% 46% / 0) 62%),
linear-gradient(120deg,var(--n-950) 0%,var(--n-800) 60%,hsl(var(--navy-h) 82% 24%) 100%);
border:1px solid var(--line); box-shadow:var(--sh-panel);
--c-head:var(--white); --c-body:var(--soft); --c-accent:var(--sky-400);
--c-link:var(--sky-500); --c-link-h:var(--sky-300); --c-strong:var(--strong-dark);
--c-rule:var(--line); --c-tick:var(--sky-500);
color:var(--c-body);
}
.mina2-band__panel .mina2-band__inner{ position:relative; z-index:2; }
/* SKY variant of the raised panel. NEW, and it is polarity rather than variety,
the same argument .mina2-sky already makes at section level in section 4.
DMC has no sky panel: its raised panel is always navy. Several MINA pages put
a contained sky block on a white section rather than a full width sky band,
/doctor-marketing-agency-and-web-design/ sets its whole FAQ inside one,
measured on the frozen capture at x=150..1290 of 1440 and y=3645..5000. That
block is the one thing a visitor remembers about the page, so rebuilding it
as the navy panel inverts exactly the surface the pilot was corrected for.
The panel restates the sky surface properties rather than borrowing
.mina2-sky, because the base panel above sets them at the same weight and is
written first; a marker class on the same element would lose to it. Type on
sky is deep navy, never white, which is the same hard rule the sky surface and
the sky button both carry. */
.mina2-band__panel--sky{
background:var(--sky-500);
border-color:rgb(var(--navy-rgb) / .12);
box-shadow:var(--sh-card);
--c-head:var(--n-950);
--c-body:hsl(var(--navy-h) 100% 19%);
--c-dim:hsl(var(--navy-h) 62% 26%);
--c-accent:var(--n-800);
--c-link:var(--n-800);
--c-link-h:var(--n-950);
--c-strong:var(--n-950);
--c-rule:rgb(var(--navy-rgb) / .24);
--c-rule-strong:rgb(var(--navy-rgb) / .45);
--c-tick:var(--n-800);
--c-tick-mark:var(--n-800);
color:var(--c-body);
}
/* --- 9.11 CTA panel plus lead form. The closing section on every page.
Compact by design: large type in a final CTA reads blocky. Brand rule.
The overlay is opaque enough that ANY background image works, which is why
the media slot ships as a labelled comment. ---------------------------- */
.mina2-consult{ padding:clamp(90px,9vw,130px) 28px; background:var(--n-900); }
.mina2-consult__panel{
position:relative; max-width:var(--wrap); margin:0 auto;
border-radius:var(--rad-lg); overflow:hidden;
padding:clamp(48px,5.5vw,84px) clamp(28px,5vw,84px);
border:1px solid var(--line); box-shadow:var(--sh-panel);
background:linear-gradient(120deg,var(--n-950) 0%,var(--n-800) 55%,hsl(var(--navy-h) 82% 28%) 100%);
color:var(--c-body);
}
.mina2-consult__bg{ position:absolute; inset:0; }
.mina2-consult__bg img{ width:100%; height:100%; object-fit:cover; }
.mina2-consult__overlay{
position:absolute; inset:0;
background:linear-gradient(120deg,hsl(var(--navy-h) 100% 10% / .97) 0%,hsl(var(--navy-h) 100% 18% / .93) 55%,hsl(var(--navy-h) 82% 28% / .88) 100%);
}
.mina2-consult__grid{
position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:clamp(40px,5vw,72px); align-items:center;
}
.mina2-consult__info .mina2-eyebrow{ font-size:15px; margin-bottom:18px; }
.mina2-consult__info .mina2-h2{ margin:0 0 20px; font-size:clamp(1.6rem,2.3vw,2.3rem); line-height:1.28; }
.mina2-consult__info .mina2-lead{ margin-bottom:28px; color:var(--sky-300); font-size:.99rem; line-height:1.75; }
.mina2-consult__info .mina2-note-line{ font-size:15.5px; line-height:1.8; color:var(--sky-300); margin-bottom:28px; }
.mina2-consult__contact{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 32px; margin-bottom:26px; }
.mina2-page .mina2-consult__contact a{
display:inline-flex; align-items:center; gap:11px; font-family:var(--font-d);
font-size:13.5px; font-weight:600; letter-spacing:.08em; color:var(--sky-300); transition:color .3s;
}
.mina2-page .mina2-consult__contact a:hover{ color:var(--white); }
.mina2-consult__assure{ display:flex; flex-wrap:wrap; gap:12px 30px; }
.mina2-consult .mina2-trust-item{ font-size:13px; }
/* Telephone card. New: MINA's closing sections lead on a phone number set as
a heading. Borderless surfaces only, in line with the imagery rule. */
.mina2-telcard{
display:block; border-radius:var(--rad); padding:22px 26px;
background:rgb(var(--sky-rgb) / .07); border:1px solid var(--line);
transition:background var(--t-micro),border-color var(--t-micro),transform var(--t-std) var(--ease);
}
.mina2-telcard:hover{ background:rgb(var(--sky-rgb) / .12); border-color:var(--line-strong); transform:translateY(-2px); }
.mina2-telcard__num{ font-family:var(--font-d); font-weight:300; font-size:clamp(1.7rem,2.6vw,2.4rem); line-height:1.1; color:var(--white); }
.mina2-telcard__note{ margin-top:8px; font-size:13.5px; line-height:1.6; color:var(--sky-300); }
/* --- 9.12 Forms. Chrome is style; the option lists are content and belong to
the page. Field names are shared site wide so one webhook serves every
form. The unwired guard lives in mina2.js: with no webhook configured the
form tells the visitor to call and NEVER fakes a success state. --------- */
.mina2-form-card{
position:relative; background:var(--white); border-radius:26px;
padding:clamp(28px,3.2vw,44px); box-shadow:var(--sh-form-dark);
color:var(--ink-soft);
}
.mina2-light .mina2-form-card, .mina2-white .mina2-form-card{ border:1px solid var(--line-card); box-shadow:var(--sh-form-light); }
.mina2-form-card--compact{ padding:clamp(24px,2.6vw,36px); }
/* Sky form card. NEW. LAYOUT-RULES rule 4: this is the treatment the live hero
card has and it is reproduced rather than replaced by the white DMC card.
Same proportions, same order, centred head over a marked rule over a left
aligned field stack, restyled into the new palette and type.
It also has to be sky for a structural reason. This card straddles a navy
hero and a white section. A white card reads as a card on the top half and
as nothing at all on the bottom half. Sky holds an edge against both.
Doubled ancestor, labelled: the light and white hosts repaint the base form
card's border and shadow at (0,2,0) one rule above, so the sky variant has
to answer at the same weight or it inherits a hairline drawn for a white
card on a light field. */
.mina2-page .mina2-form-card--sky{
background:var(--sky-500);
border:1px solid rgb(var(--navy-rgb) / .12);
box-shadow:var(--sh-card);
}
.mina2-form-card--sky .mina2-form__head{ text-align:center; }
.mina2-form-card--sky .mina2-form__title{ color:var(--n-950); }
.mina2-form-card--sky .mina2-form__title u{ text-decoration-color:var(--n-950); }
/* Lighter body text than the title, which is the relationship the live card
has. Not the full strength ink, and not a second heading weight. */
.mina2-form-card--sky .mina2-form__sub{ color:rgb(var(--navy-rgb) / .76); }
.mina2-form-card--sky .mina2-form__sub strong{ color:var(--n-950); }
.mina2-form-card--sky .mina2-flabel,
.mina2-form-card--sky .mina2-form__kicker{ color:var(--n-950); }
.mina2-form-card--sky .mina2-input,
.mina2-form-card--sky .mina2-select,
.mina2-form-card--sky .mina2-textarea,
.mina2-form-card--sky .mina2-pill__lb{ background:var(--white); border-color:rgb(var(--navy-rgb) / .14); }
.mina2-form-card--sky .mina2-input:focus,
.mina2-form-card--sky .mina2-select:focus,
.mina2-form-card--sky .mina2-textarea:focus{ border-color:var(--n-800); box-shadow:0 0 0 4px rgb(var(--navy-rgb) / .16); }
.mina2-form-card--sky .mina2-pill__in:checked + .mina2-pill__lb{ border-color:var(--n-800); background:rgb(var(--navy-rgb) / .10); color:var(--n-800); }
.mina2-form-card--sky .mina2-form__submit{ background:var(--n-800); color:var(--white); }
.mina2-form-card--sky .mina2-form__submit:hover{ background:var(--n-700); color:var(--white); box-shadow:var(--sh-ink); }
/* The rule under the note, carrying a centre mark. The live card has exactly
this device and it is the one piece of ornament on the card. Built from a
pseudo element so it costs no markup and no image. */
.mina2-form__rule--mark{ position:relative; overflow:visible; margin-bottom:26px; }
.mina2-form__rule--mark::after{
content:''; position:absolute; left:50%; top:50%; width:7px; height:7px;
transform:translate(-50%,-50%) rotate(45deg);
background:var(--c-surface,var(--white));
box-shadow:0 0 0 1px currentColor;
}
.mina2-form-card--sky .mina2-form__rule--mark{ background:rgb(var(--navy-rgb) / .28); color:rgb(var(--navy-rgb) / .28); }
.mina2-form-card--sky .mina2-form__rule--mark::after{ background:var(--sky-500); }
.mina2-form__title{ font-family:var(--font-d); font-weight:600; font-size:clamp(1.35rem,1.8vw,1.65rem); line-height:1.3; color:var(--ink); margin-bottom:10px; }
.mina2-form__title u{ text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--sky-500); text-decoration-thickness:2px; }
.mina2-form__sub{ font-size:14.5px; line-height:1.7; color:var(--ink-soft); margin-bottom:24px; }
.mina2-form__sub strong{ color:var(--ink); font-weight:600; }
.mina2-form-card--compact .mina2-form__sub{ margin-bottom:18px; }
.mina2-form__rule{ height:1px; background:var(--line-light); margin:0 0 22px; border:0; }
.mina2-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.mina2-field{ margin-bottom:14px; }
.mina2-form-card--compact .mina2-field{ margin-bottom:12px; }
.mina2-flabel{ display:block; font-family:var(--font-b); font-size:13px; font-weight:600; letter-spacing:.01em; color:var(--ink); margin:0 0 7px 2px; }
.mina2-form-card--compact .mina2-flabel{ font-size:12.5px; margin-bottom:6px; }
.mina2-input, .mina2-select, .mina2-textarea{
width:100%; font-family:var(--font-b); font-size:15.5px; color:var(--ink);
background:var(--bg-input); border:1.5px solid var(--line-card); border-radius:var(--rad-in);
padding:15px 17px; appearance:none; -webkit-appearance:none;
transition:border-color var(--t-micro),box-shadow var(--t-micro),background var(--t-micro);
}
.mina2-input::placeholder, .mina2-textarea::placeholder{ color:var(--placeholder); }
.mina2-input:focus, .mina2-select:focus, .mina2-textarea:focus{
outline:none; border-color:var(--sky-600); background:var(--white);
box-shadow:0 0 0 4px rgb(var(--sky-rgb) / .18);
}
.mina2-select{
background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%232172C7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 18px center; padding-right:46px; cursor:pointer;
}
.mina2-select option{ color:var(--ink); }
.mina2-textarea{ min-height:104px; resize:vertical; }
.mina2-form-card--compact .mina2-input, .mina2-form-card--compact .mina2-select{ padding:13px 15px; font-size:15px; }
.mina2-form-card--compact .mina2-textarea{ min-height:80px; padding:13px 15px; font-size:15px; }
.mina2-form__kicker{ font-family:var(--font-b); font-size:13px; font-weight:600; letter-spacing:.01em; color:var(--ink); margin:6px 0 10px; }
/* Pill toggles. Native checkboxes kept, so the payload builder, the browser's
own validation and assistive tech all behave exactly as before. Only the
presentation is a pill. DMC used buttons plus a hidden input, which needed
script to work at all. */
.mina2-pills{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.mina2-form-card--compact .mina2-pills{ margin-bottom:14px; }
.mina2-pill{ position:relative; display:block; }
.mina2-pill__in{ position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.mina2-pill__lb{
display:block; font-family:var(--font-b); font-size:13.5px; font-weight:500;
color:var(--ink-soft); background:var(--white);
border:1.5px solid var(--line-card); border-radius:var(--rad-xs);
padding:13px 6px; text-align:center; cursor:pointer;
transition:border-color var(--t-micro),background var(--t-micro),color var(--t-micro);
}
.mina2-form-card--compact .mina2-pill__lb{ padding:11px 6px; }
.mina2-pill__in:hover + .mina2-pill__lb{ border-color:var(--sky-500); color:var(--sky-700); }
.mina2-pill__in:checked + .mina2-pill__lb{ border-color:var(--sky-600); background:rgb(var(--sky-rgb) / .14); color:var(--sky-700); font-weight:600; }
.mina2-pill__in:focus-visible + .mina2-pill__lb{ outline:2px solid var(--sky-500); outline-offset:3px; }
.mina2-form__submit{ width:100%; justify-content:center; margin-top:4px; font-size:14.5px; padding:16px 24px; }
.mina2-form__submit:disabled{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }
.mina2-field.has-error .mina2-input,
.mina2-field.has-error .mina2-select,
.mina2-field.has-error .mina2-textarea{ border-color:var(--err-line); background:var(--err-field); box-shadow:none; }
.mina2-error-msg{ display:none; font-size:12.5px; line-height:1.4; color:var(--err-text); margin:7px 2px 0; }
.mina2-field.has-error .mina2-error-msg{ display:block; }
.mina2-form__status{ display:none; margin-top:14px; font-size:14px; line-height:1.55; border-radius:var(--rad-xs); padding:13px 16px; }
.mina2-form__status.is-note{ display:block; background:var(--err-bg); color:var(--err-strong); }
.mina2-form__status.is-ok{ display:block; background:rgb(var(--sky-rgb) / .14); color:var(--sky-700); }
.mina2-form__fineprint{ margin-top:16px; text-align:center; font-size:12.5px; line-height:1.5; color:var(--fineprint); }
/* --- 9.13 Modal. Opened by any href="#" anchor, so a link to a page that does
not exist yet costs the visitor nothing. When the real page ships, the href
changes and the interception simply stops firing for that link.
Unlike DMC's, this one reads the page tokens rather than hardcoding three
hexes of its own. ------------------------------------------------------ */
.mina2-modal{ position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; padding:20px; }
.mina2-modal[hidden]{ display:none; }
.mina2-modal__scrim{ position:absolute; inset:0; background:hsl(var(--navy-h) 100% 10% / .72); backdrop-filter:blur(3px); }
.mina2-modal__panel{
position:relative; z-index:1; background:var(--white); border-radius:18px;
width:100%; max-width:520px; max-height:calc(100vh - 40px); overflow-y:auto;
padding:38px 36px 32px; box-shadow:var(--sh-modal); color:var(--ink-soft);
}
.mina2-modal__title{ font-family:var(--font-d); font-weight:600; font-size:clamp(1.5rem,3vw,1.95rem); line-height:1.15; color:var(--ink); margin-bottom:12px; }
.mina2-modal__x{
position:absolute; top:14px; right:16px; width:38px; height:38px;
border:0; background:transparent; font-size:26px; line-height:1;
color:var(--ink-soft); border-radius:50%; transition:background var(--t-micro),color var(--t-micro);
}
.mina2-modal__x:hover{ background:var(--bg-light); color:var(--n-800); }
body.mina2-modal-open{ overflow:hidden; }
/* --- 9.14 Client logo wall. NEW.
DMC has no equivalent: its only client mark is the single logo under a stat
figure. MINA's homepage carries 29, every one of them a white lockup on
transparent, which is why they sit on a dark surface and never on light.
They rest at opacity .6, which is the live behaviour and is also the only
thing keeping 29 different lockups from reading as noise. Sizing is by
max-height, never by width, so a wordmark and a stacked mark carry the same
optical weight.
THE CELL AND THE MARK SCALE TOGETHER, and that is the whole of the density
argument. Because the mark is sized by max-height and centred in its cell,
any cell wider than 2.5 x that height is dead space, and 2.5 is the aspect
ratio 24 of the 29 lockups share. The first pass paired a 44px cap with a
144px cell and a 46px column gap at 1440, so each mark drew about 113px of a
190px pitch: 61% ink, which is what made the wall read as sparse dots rather
than as a band. Cell and cap are now the same ratio to each other at every
width, 10.8vw against 4.15vw, and the gap is roughly half what it was, which
puts ink at about 80% of pitch from 1080 through 1440 with the row count at
seven across all three. Raising the cap alone would not have worked: the
mark would have hit max-width:100% on the cell and stopped growing.
4.15vw rather than the 4.4vw that would fill the cell exactly, and a 20px
floor under the column gap rather than 16px, for one reason: at 1080 a cell
that the mark fills edge to edge leaves the visible separation equal to the
column gap alone, and 1080 is where that gap is smallest. Measured, the two
widest lockups in row two came within 17px of each other and the wall read
as crowded rather than dense. The mark now keeps a few pixels inside its own
cell at every width, so the separation a reader sees is the gap plus that,
about 25px at 1080 and 29px at 1440. Crowding and sparseness are the two
failure modes of this component and it sits between them by 6px.
------------------------------------------------------------------------- */
.mina2-logos{
display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
gap:clamp(20px,2vw,30px) clamp(20px,1.6vw,24px);
}
.mina2-logos__cell{ display:flex; align-items:center; justify-content:center; width:clamp(112px,10.8vw,168px); }
.mina2-logos__cell img{
max-height:clamp(44px,4.15vw,64px); width:auto; max-width:100%; object-fit:contain;
opacity:.6; transition:opacity var(--t-std);
}
.mina2-logos__cell:hover img{ opacity:1; }
/* --- 9.15 Evidence card and the clipped evidence grid. NEW.
MINA's homepage argues from named client results: a figure, what the figure
measures, the client's own mark, and the story headline, all inside one link
to the case study. DMC's nearest component is the stats band, which is four
bare numerals with no headline and no link, so it cannot carry this.
The card is a dark panel over the client's own photograph. The photo arrives
as a custom property so the component owns every other pixel, and the overlay
is opaque enough that any photograph works, the same contract the CTA panel
uses. Cards with no photograph simply omit the property: an undefined var
makes background-image invalid at computed value time, which resolves to
none, and the navy field underneath is already correct.
THAT FALLBACK IS SILENT, AND IT HAS ALREADY COST ONE ROUND. The three
announcement cards shipped with no --case-bg at all and were read as a
variant that was designed without a photograph. They were not. Live sets a
background image on all three containers, a846d85, 6fefbcf and 40dfe1e0 in
post-67.css, under the same 180deg navy overlay this component draws. The
markup simply never carried the property across, and because an undefined
var fails to none rather than to an error, the cards rendered as flat navy
at 1440 exactly as they did at 390, with nothing in the console. If a card
in this family looks flat, read the computed background-image before
suspecting a media query or an overlay. The answer is almost always that
the property is absent.
The grid is deliberately clipped. The live page shows two and a half rows
and opens the rest on Load More; that is content the page chooses to hold
back, not content to drop. mina2.js does not own this because no other page
has the component.
LAYOUT-RULES rule 4. This card is one of three treatments Dean named as
things he likes on live, so the proportions and the internal relationships
are LIVE'S, restyled into this palette and type rather than replaced by a
DMC card. Everything below with a number in it was measured off
dist/pages/home-body.html and parts/home.css, which are the phase one clone
and were themselves measured off the live page:
row height 420px here min-height 400px
card split 60 / 40 here 1.5fr / 1fr, which is 60 / 40
padding 30px here clamp(24px,2.2vw,32px)
figure 42px / 700 here up to 42px, weight 600
label 18px / 400 here 15.5px, on the soft body colour
kicker 18px / 700 sky here 14.5px / 600 sky
title 28px / 400 here up to 25.6px, weight 400
logo column 25% of the card, top right, nudged up 10px
arrow 54px, SOLID sky
The two that were most wrong in the pilot are the title and the logo. The
title was 16.8px at weight 600, which is a caption, and live's is a 28px
regular that is the loudest thing in the lower half of the card. The logo
was capped at 160x32 regardless of the card's width, so it read as a
footnote rather than as the client's name on their own result.
The arrow keeps a navy glyph on the sky disc rather than live's white one.
That is the one deliberate departure: white on sky is the single hard rule
this system states twice, and an icon is not exempt from it. ---------- */
.mina2-cases{ position:relative; }
.mina2-cases__grid{
display:grid; gap:clamp(18px,2vw,26px);
max-height:1020px; overflow:hidden;
-webkit-mask-image:linear-gradient(to bottom,#000 74%,transparent 100%);
mask-image:linear-gradient(to bottom,#000 74%,transparent 100%);
transition:max-height var(--t-slow) var(--ease);
}
.mina2-cases__grid.is-open{
max-height:none;
-webkit-mask-image:none; mask-image:none;
}
.mina2-cases__row{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(18px,2vw,26px); }
.mina2-cases__row--flip{ grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); }
.mina2-cases__more{ margin-top:clamp(28px,3vw,44px); display:flex; justify-content:center; }
.mina2-case{
position:relative; isolation:isolate; overflow:hidden;
display:flex; flex-direction:column; justify-content:space-between; gap:clamp(32px,4.5vw,60px);
min-height:400px; padding:clamp(24px,2.2vw,32px);
border:1px solid var(--line); border-radius:var(--rad);
background-color:var(--n-800);
background-image:var(--case-bg);
background-size:cover; background-position:center;
transition:transform var(--t-card) var(--ease),border-color var(--t-card);
}
/* Live's overlay runs top to bottom and is LIGHTER at the top, so the client's
own photograph is legible behind the figure and the lower half stays flat
enough to set a 25px headline on. The pilot ran it on a 155 degree diagonal,
darkest at the top, which is the opposite and buried every photograph. */
.mina2-case::before{
content:''; position:absolute; inset:0; z-index:-1;
background:linear-gradient(180deg,hsl(var(--navy-h) 100% 15% / .78) 0%,hsl(var(--navy-h) 100% 12% / .93) 100%);
transition:opacity var(--t-card);
}
.mina2-case--link:hover{ transform:translateY(-5px); border-color:var(--line-strong); }
.mina2-case--link:hover::before{ opacity:.88; }
.mina2-case__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
/* The card's two text columns. Named so they carry the min-width:0 guard: an
unbroken client name or URL inside a flex child otherwise blows the card out
at any width, and no breakpoint recovers it. */
.mina2-case__col{ min-width:0; }
.mina2-case__figure{
font-family:var(--font-d); font-weight:600; line-height:1;
font-size:clamp(1.95rem,2.75vw,2.62rem); color:var(--white);
}
.mina2-case__label{ margin-top:12px; max-width:340px; font-size:15.5px; line-height:1.5; color:var(--soft); }
/* The logo column is a PROPORTION of the card, not a fixed pixel cap, which is
what live does and is the reason the mark scales with the card it belongs
to. The 10px lift is live's: these lockups carry transparent headroom and
without it they sit visually low against the figure beside them. */
.mina2-case__logo{ flex:0 0 25%; max-width:25%; display:flex; align-items:flex-start; justify-content:flex-end; }
.mina2-case__logo img{ width:100%; height:auto; max-height:none; max-width:none; margin-top:-10px; object-fit:contain; }
.mina2-case__logos{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 20px; }
.mina2-case__logos img{ width:152px; height:auto; max-height:none; max-width:100%; object-fit:contain; }
/* The two up announcement cards put one mark at each end of the row. The lead
card keeps its cross and its run of four. */
.mina2-case__logos--ends{ flex-wrap:nowrap; justify-content:space-between; width:100%; }
.mina2-case__x{ width:22px; height:22px; flex:none; color:var(--white); opacity:.75; }
.mina2-case__foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:22px; }
/* No tracking and no text-transform on the kicker. The live copy is already
uppercase; letterspaced smallcaps are banned outside the five permitted
places and adding them here would be adding the banned thing by accident. */
.mina2-case__kicker{ font-family:var(--font-b); font-size:14.5px; font-weight:600; color:var(--sky-400); margin-bottom:12px; }
/* Weight 400, not 600. Live sets this at regular and it is the lighter body
voice Dean asked for: at 600 the card reads as a label stack, at 400 it
reads as a sentence about a client, which is what it is. */
.mina2-case__title{ font-family:var(--font-d); font-weight:400; font-size:clamp(1.16rem,1.55vw,1.6rem); line-height:1.28; color:var(--white); }
.mina2-case__go{
flex:none; width:54px; height:54px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background:var(--sky-500); color:var(--n-950); border:0;
transition:background var(--t-micro),transform var(--t-std) var(--ease);
}
.mina2-case__go svg{ width:22px; height:22px; }
.mina2-case--link:hover .mina2-case__go{ background:var(--sky-400); transform:translate(3px,-3px); }
.mina2-case--ann{ min-height:370px; gap:clamp(28px,4vw,48px); }
.mina2-case--ann.mina2-case--lead{ min-height:440px; }
.mina2-anns{ display:grid; gap:clamp(18px,2vw,26px); }
.mina2-anns__row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,2vw,26px); }
/* --- 9.16 Insight post. NEW.
DMC's component list records "blog post layout" as one of the things that
does not exist and will need building. This is it, kept to the imagery rule:
no frame, no card, no border. Cropped thumbnail, headline, nothing else. -- */
.mina2-posts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,2.8vw,36px); }
.mina2-post{ display:flex; flex-direction:column; gap:20px; }
.mina2-post__thumb{ display:block; overflow:hidden; border-radius:var(--rad-md); }
.mina2-post__thumb img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; transition:transform var(--t-slow) var(--ease); }
.mina2-post:hover .mina2-post__thumb img{ transform:scale(1.04); }
.mina2-post__title{ font-family:var(--font-d); font-weight:600; font-size:1.06rem; line-height:1.45; color:var(--c-head); transition:color var(--t-micro); }
.mina2-post:hover .mina2-post__title{ color:var(--c-link); }
/* --- 9.16b Single post layout. NEW, added for batch R4.
9.16 above is the post CARD, the thing a listing page shows. This is the post
PAGE: the theme's single post template, an article column with a sidebar
beside it, which DMC's inventory records as "sidebar, blog post layout" among
the components that do not exist and will need building.
It is a system component rather than a page one. MINA has roughly twenty of
these posts and every one of them is the same template, so the next blog page
reuses this and adds nothing.
The article measure is held by .mina2-prose--doc, which already exists. The
sidebar is a fixed 370 rather than a fraction: a fractional sidebar grows with
the viewport and a column of 16px form labels does not want to be 500px wide
at 1600. ---------------------------------------------------------------- */
.mina2-postgrid{
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,370px);
gap:clamp(40px,4.5vw,72px); align-items:start;
}
.mina2-postgrid > *{ min-width:0; }
.mina2-postside{ display:flex; flex-direction:column; gap:clamp(26px,3vw,40px); }
.mina2-postside .mina2-post + .mina2-post{ margin-top:26px; }
.mina2-postside__head{
font-family:var(--font-d); font-weight:600; font-size:1.06rem; line-height:1.4;
color:var(--c-head); margin-bottom:22px;
}
.mina2-postmeta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 22px; font-size:13.5px; color:var(--c-dim); }
.mina2-postmeta a{ color:var(--c-link); transition:color var(--t-micro); }
.mina2-postmeta a:hover{ color:var(--c-link-h); }
.mina2-share{ display:flex; flex-wrap:wrap; gap:10px; }
.mina2-share__item{
display:inline-flex; align-items:center; gap:9px;
font-family:var(--font-b); font-size:13px; font-weight:600; color:var(--c-body);
border:1px solid var(--c-rule); border-radius:var(--pill); padding:8px 16px;
}
.mina2-share__dot{ width:8px; height:8px; border-radius:50%; background:var(--c-accent); flex:none; }
/* A navy panel sitting on a light or white section. NOT a repaint of an
existing card: it is the surface classes' own trick applied to a box, so it
declares the dark colour properties locally and every component nested inside
it recolours by inheritance with no specificity contest, exactly as
.mina2-band__panel does at section scale.
It exists because of LAYOUT-RULES rule 1 rather than for decoration. Live's
post sidebar is a navy panel and the five article thumbnails inside it sit on
navy. Rebuilding the sidebar as a white card would move five images from a
dark surface to a light one, which is the flip the SURFACE gate is there to
catch. The surface follows the image. */
.mina2-panel-dark{
border-radius:var(--rad); padding:clamp(24px,2.4vw,32px);
background:linear-gradient(180deg,var(--n-800) 0%,var(--n-900) 100%);
border:1px solid var(--line);
--c-surface:var(--n-900);
--c-head:var(--white);
--c-body:var(--soft);
--c-dim:var(--soft-2);
--c-accent:var(--sky-400);
--c-link:var(--sky-500);
--c-link-h:var(--sky-300);
--c-strong:var(--strong-dark);
--c-rule:var(--line);
--c-rule-strong:var(--line-strong);
--c-tick:var(--sky-500);
--c-tick-mark:var(--sky-400);
color:var(--c-body);
}
/* --- 9.R8a Figure card. NEW, added for batch R8.
Numbered by batch rather than by sequence: 9.17 and 9.18 were claimed by two
other batches while this was being written.
Every MINA case study closes its evidence with three panels: an icon, the
headline figure, and one line saying what the figure measures. DMC has no
equivalent. Its stats band is four bare numerals with no artwork and is
CONTENT in the transfer matrix, and .mina2-case is a link card built around a
client photograph, so neither carries this.
The panel is OPAQUE navy and it sits on a light band, which is what live does
and what LAYOUT-RULES rule 1 requires: the icons are transparent PNGs drawn in
sky and white for a navy field, so the surface follows the image. A
translucent card would composite to a pale lavender against the white band and
the artwork would lose half of itself.
The icon is an
and therefore content. It keeps its URL and its alt, and
the only thing this component decides about it is how wide it renders. -- */
.mina2-figcards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2vw,26px); }
.mina2-figcard{
display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px;
padding:clamp(30px,3.2vw,44px) clamp(20px,2.4vw,34px);
background:var(--n-800); border:1px solid var(--line); border-radius:var(--rad);
box-shadow:var(--sh-card);
transition:transform var(--t-card) var(--ease),border-color var(--t-card);
}
.mina2-figcard:hover{ transform:translateY(-5px); border-color:var(--line-strong); }
.mina2-figcard__ico{ width:clamp(76px,7.5vw,108px); }
.mina2-figcard__ico img{ width:100%; height:auto; max-height:none; }
.mina2-figcard__title{ font-family:var(--font-d); font-weight:600; font-size:clamp(1.4rem,1.9vw,1.8rem); line-height:1.2; color:var(--white); }
.mina2-figcard__note{ font-size:15px; line-height:1.65; color:var(--soft); }
/* --- 9.17 Ink card and ink grid. NEW, added for batch R11.
An OPAQUE navy card that carries its own dark colour tokens whatever surface
it is dropped on.
It is a constraint, not a preference. LAYOUT-RULES rule 1: the weight loss
case study's three impact icons are transparent PNGs whose line art is sky
blue, and live paints them on a navy card inside a WHITE section. The section
is light and the surface under the IMAGE is dark, and it has to stay dark.
Nothing already in this file can carry that. .mina2-proc is a white card and
its dark state is a repaint of the section, not of the card. .mina2-sys and
.mina2-spec-card are TRANSLUCENT navy panels: they resolve correctly only
over a dark field and wash out to pale blue over white, which is exactly the
polarity flip the gate exists to catch. This one paints an opaque gradient
between --n-800 and --n-900, the same two steps the page field uses, so the
luminance under the icon is the live luminance.
Two contents so far, both measured off the phase one clone:
impact strip icon tile, figure heading, note /case-study-weight-loss-*
review card star row, review, reviewer /gift-baskets/
---------------------------------------------------------------------- */
.mina2-inkgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2vw,26px); }
.mina2-inkgrid > *{ min-width:0; }
/* Four up, so a twenty card wall fills five whole rows and never leaves an
orphan. Same reasoning as the footer's five up article strip. */
.mina2-inkgrid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
/* An ink grid under a band's own head needs the head's air. .mina2-band__inner
has no bottom margin, by design, because normally nothing follows it. */
.mina2-sec--band .mina2-inkgrid{ margin-top:clamp(40px,5vw,64px); }
.mina2-inkcard{
display:flex; flex-direction:column; align-items:center; text-align:center;
padding:clamp(26px,2.6vw,34px) clamp(20px,2.2vw,30px);
background:linear-gradient(180deg,var(--n-800) 0%,var(--n-900) 100%);
border:1px solid var(--line); border-radius:var(--rad);
transition:transform var(--t-card) var(--ease),border-color var(--t-card);
--c-surface:var(--n-800);
--c-head:var(--white); --c-body:var(--soft); --c-dim:var(--soft-2);
--c-accent:var(--sky-400); --c-link:var(--sky-500); --c-link-h:var(--sky-300);
--c-strong:var(--strong-dark); --c-rule:var(--line);
--c-tick:var(--sky-500); --c-tick-mark:var(--sky-400);
color:var(--c-body);
}
.mina2-inkcard:hover{ transform:translateY(-4px); border-color:var(--line-strong); }
.mina2-inkcard--left{ align-items:flex-start; text-align:left; }
/* The icon here is an
, never an inline SVG, and that is the opposite of
the eyebrow's rule for a reason: on these pages the icon carries its own URL
and its own alt text on the live page, so it IS content and the IMAGES gate
measures it. Sized by max-height so line art and solid marks read at the same
optical weight, which is how the logo wall sizes its lockups too. */
.mina2-inkcard__ico{ width:76px; height:76px; flex:none; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.mina2-inkcard__ico img{ max-height:76px; width:auto; max-width:100%; object-fit:contain; }
.mina2-inkcard__figure{ font-family:var(--font-d); font-weight:600; line-height:1.1; color:var(--white); font-size:clamp(1.7rem,2.4vw,2.2rem); margin-bottom:12px; }
.mina2-inkcard__note{ font-size:14.5px; line-height:1.7; color:var(--soft); }
.mina2-inkcard__stars{ display:flex; gap:5px; margin-bottom:16px; color:var(--sky-500); }
.mina2-inkcard__stars svg{ width:15px; height:15px; fill:currentColor; flex:none; }
.mina2-inkcard__text{ font-size:14.5px; line-height:1.75; color:var(--soft); margin-bottom:16px; }
.mina2-inkcard__author{ display:block; margin-top:auto; font-size:13px; line-height:1.5; font-style:italic; color:var(--soft-2); }
/* The width gated pair a live page authors twice is NOT solved here. It is
.mina2-wide-only / .mina2-narrow-only in section 2, which already covers the
same image twice inside a process step. Nothing was added for it. ------ */
/* A hero whose artwork is WIDE rather than square is handled by
.mina2-hero--art-wide, declared in section 9.2b next to the rest of the
straddle geometry. Batch R11 needs it for the case study hero and adds
nothing: the rule already there covers it. */
/* Doubled ancestor, labelled: the telephone card is a translucent sky panel
with a white numeral, which is right on navy and is the one banned pairing
inside the sky form card. On sky it repaints to the ink surface, which is the
same answer the primary button already gives in section 5. */
.mina2-page .mina2-form-card--sky .mina2-telcard{
margin:0 0 22px; background:var(--n-800); border-color:rgb(var(--navy-rgb) / .30);
}
.mina2-page .mina2-form-card--sky .mina2-telcard:hover{ background:var(--n-700); border-color:rgb(var(--navy-rgb) / .5); }
/* --- 9.18 The WEB DESIGN CASE STUDY archetype. NEW, added for batch R2.
Four components that nothing already in this file can carry, all measured off
the phase one clone dist/pages/bariatric-surgeon-web-design-case-study-body.html
and parts/batch12.css, which were themselves measured off the live page.
/wellness-spa-salon-web-design-case-study/ is the same shape and should
assemble itself from these without adding anything.
1. A SOLO HERO. The case study hero is a centred headline and one lead
paragraph. No artwork, no form, no second column. Dropped into the two
column hero it leaves half the row empty, so the inner goes to one track
and narrows to the reading measure.
The bottom padding is the load bearing part. The fact row below straddles
the hero's bottom edge, and unlike a service page there is no illustration
down there for it to land on, only flat gradient. The clamp floor of 150px
is what keeps a 96px lift clear of the lead paragraph at 390, where the
hero's own bottom padding is 64px and the cards would otherwise sit on top
of the copy.
TRAP D, and it is why this is written at (0,2,0) on the MODIFIER rather
than as a plain override. `.mina2-hero__inner` is restated at (0,1,0)
inside the 1080 and 768 blocks in section 12, which are later in the file;
a (0,1,0) rule here would lose to both. The modifier out-specifies them at
every width, so nothing has to be repeated in section 12.
The hero also deliberately does NOT carry .mina2-hero--pillar: that
modifier is restated at (0,2,0) inside the 1080 block and would tie. */
.mina2-hero--case .mina2-hero__inner{
grid-template-columns:minmax(0,1fr);
max-width:calc(900px + 96px);
padding-bottom:clamp(150px,14vw,220px);
}
.mina2-hero--case .mina2-hero__content{ text-align:center; }
.mina2-hero--case .mina2-hero__lead{ margin-left:auto; margin-right:auto; }
.mina2-hero--case .mina2-hero__cta{ justify-content:center; }
/* 2. THE SHALLOW STRADDLE. LAYOUT-RULES rule 3 with a different number, and it
is measured rather than inherited: live lifts this row 96px into the hero,
against the 176px to 210px a service page form card uses. A form card is
1,000px tall and can afford to cross deep; a 240px fact card lifted 176px
would sit 73% inside the hero and stop reading as a row below it.
--straddle-lift is declared on the straddling ELEMENT, so it beats the
inherited page value without touching it. --art-sink is not involved:
there is no artwork under this card, which is exactly why the hero above
has to supply the clearance itself. */
.mina2-sec--straddle-flat .mina2-straddle{ --straddle-lift:96px; }
/* 3. THE FACT CARD ROW. Three white cards, an icon over a label over a value,
straddling the hero's bottom edge so half of each card is on navy.
White, not navy, and that is polarity rather than taste: the three icons
are transparent PNGs drawn in NAVY line art, so they need a light field.
Live paints them on white and the surface follows the image.
Three across, then one. Never two: three cards in a two up grid leave an
orphan, which is the same rule the card grids in section 9.5 follow. */
.mina2-facts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,26px); }
.mina2-facts > *{ min-width:0; }
.mina2-fact{
display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
padding:clamp(26px,2.6vw,34px) clamp(16px,2vw,26px);
background:var(--white); border:1px solid var(--line-card); border-radius:var(--rad);
box-shadow:var(--sh-form-light);
transition:transform var(--t-card) var(--ease),border-color var(--t-card);
}
.mina2-fact:hover{ transform:translateY(-4px); border-color:rgb(var(--sky-rgb) / .45); }
/* The icon is an
and therefore content: it keeps its URL and its alt, and
the only thing this component decides is how wide it renders. */
.mina2-fact__fig{ width:clamp(64px,7vw,96px); }
.mina2-fact .mina2-fact__fig img{ width:100%; height:auto; max-height:none; }
/* The label is the quiet one and the value is the loud one, which is the
relationship live has: "Client:" is a 16px caption and the client's name is
the 18px line under it. */
.mina2-fact__title{ font-family:var(--font-b); font-size:13px; font-weight:600; letter-spacing:.01em; color:var(--sky-600); }
.mina2-fact__note{ font-family:var(--font-d); font-weight:600; font-size:clamp(1.02rem,1.25vw,1.18rem); line-height:1.35; color:var(--ink); }
/* The lead into the first content row, live's 140px. The fact row cancels the
section's whole top padding, so this is the only thing separating the cards
from the block under them. */
.mina2-facts + .mina2-row{ margin-top:clamp(72px,8vw,120px); }
/* 4. THE CLIENT QUOTE PANEL. DMC has no testimonial component at all: its own
spec records one as deliberately absent for Canadian regulatory reasons.
MINA's case studies carry a real client quote and it is content, so the
component has to exist here.
OPAQUE navy on a white section, which is what live does and what
LAYOUT-RULES rule 1 requires. The portrait sits on navy on live and it
stays on navy. A translucent panel would composite to pale blue over the
white band and flip the surface under the photograph.
The quote body and the two attribution lines are DIVs on live, not
paragraphs, and they stay divs: promoting any of them would add entries to
what the COPY gate reads. */
.mina2-quote{
position:relative; display:flex; flex-direction:column; gap:24px; width:100%;
padding:clamp(30px,3.2vw,44px);
background:linear-gradient(180deg,var(--n-800) 0%,var(--n-900) 100%);
border:1px solid var(--line); border-radius:var(--rad); box-shadow:var(--sh-card);
--c-surface:var(--n-800);
--c-head:var(--white); --c-body:var(--soft); --c-dim:var(--soft-2);
--c-accent:var(--sky-400); --c-strong:var(--strong-dark); --c-rule:var(--line);
color:var(--c-body);
}
.mina2-quote__mark{ width:34px; height:34px; flex:none; color:var(--sky-500); }
.mina2-quote__body{ font-family:var(--font-b); font-size:16px; line-height:1.85; color:var(--soft); }
.mina2-quote__who{ display:flex; align-items:center; gap:16px; margin-top:auto; }
/* NO background on the portrait ring. It was white for one build and
surface-check caught it: the portrait is a transparent PNG whose subject is
cut out, live paints it straight onto the navy panel, and a white disc behind
it flipped the measured surface under the image from DARK to LIGHT. The
surface follows the image, and here the image is already on the panel. */
.mina2-quote__portrait{ width:52px; height:52px; flex:none; border-radius:50%; overflow:hidden; }
.mina2-quote .mina2-quote__portrait img{ width:100%; height:100%; max-height:none; max-width:none; object-fit:cover; }
.mina2-quote__name{ font-family:var(--font-d); font-weight:600; font-size:15px; line-height:1.3; color:var(--white); }
.mina2-quote__role{ font-family:var(--font-b); font-size:13.5px; line-height:1.5; color:var(--soft-2); }
/* 5. THE DEVICE MOCK. The frame is a PNG and the "screen" is a positioned box
carrying the captured client site as a background, which slides from the
top of that page to the bottom over 15 seconds on hover. Live does exactly
this and it is reproduced, not replaced by a static crop.
The capture arrives as a custom property, the same contract .mina2-case
and .mina2-consult use for their photographs, so the component owns every
other pixel and the page body carries no layout in a style attribute.
The frame and the screen live in their own positioned box rather than in
the block that also holds the caption. Live measured its percentages
against a box that included the caption, which means they drift whenever
the caption wraps to a second line. Registering them to the frame alone is
the same geometry with one fewer thing able to move it. */
.mina2-mock{ display:flex; flex-direction:column; gap:14px; width:100%; }
.mina2-mock__device{ position:relative; width:100%; }
.mina2-mock .mina2-mock__frame{ display:block; width:100%; height:auto; max-height:none; }
.mina2-mock__screen{
position:absolute; top:6%; left:4.3%; width:91.6%; padding-top:51.5%;
background-color:var(--sky-500);
background-image:var(--mock-capture);
background-position:top center; background-repeat:no-repeat; background-size:100% auto;
transition:background-position 15s linear;
}
.mina2-mock__device:hover .mina2-mock__screen{ background-position:bottom center; }
/* Italic sky, the one voice this system allows for a note under a figure. The
two notes are a width gated pair: live authors both and shows one. */
.mina2-mock__note{
font-family:var(--font-b); font-style:italic; font-weight:500;
font-size:14px; line-height:1.5; color:var(--c-accent); text-align:center;
}
/* 6. A hero lead carrying
rather than . Several live heroes do, and
without this the bold run stays on the dimmer lead colour while every
beside it lifts to white. Same pairing .mina2-copy already has in
section 3.3. */
.mina2-hero__lead b{ color:var(--white); font-weight:600; }
/* 7. THE BEFORE AND AFTER PLATE. Added for batch R7,
/dental-tourism-agency-web-design-case-study/, which argues its rebrand by
showing both logos in one frame: the new mark on the left half and the old
one on the right, split down the middle. Live builds it from twentytwenty,
two full width images stacked and each clipped to its own half, with a two
arrow handle on the seam. Nothing already in this file can hold two images
in one frame, so the component has to exist.
Both images are CONTENT. Each keeps its URL and its alt text and neither
is cropped: clip-path decides which half is painted, it does not touch the
file, and both s on live and the label class is written for a
, so nothing
here invites a page to promote one to a paragraph. */
.mina2-compare{
position:relative; overflow:hidden;
background:var(--n-800);
border:3px solid var(--sky-500); border-radius:var(--rad-sm);
}
.mina2-compare .mina2-compare__half{ display:block; width:100%; height:auto; max-height:none; }
.mina2-compare__half--l{ clip-path:inset(0 50% 0 0); }
.mina2-compare__half--r{ position:absolute; top:0; left:0; clip-path:inset(0 0 0 50%); }
.mina2-compare__seam{ position:absolute; top:0; bottom:0; left:50%; width:1px; transform:translateX(-50%); background:rgb(var(--sky-rgb) / .55); }
.mina2-compare__seam::before, .mina2-compare__seam::after{
content:''; position:absolute; top:50%; width:0; height:0;
margin-top:-6px; border:6px solid transparent;
}
.mina2-compare__seam::before{ right:100%; margin-right:5px; border-right-color:var(--sky-500); }
.mina2-compare__seam::after{ left:100%; margin-left:5px; border-left-color:var(--sky-500); }
.mina2-compare__label{
font-family:var(--font-b); font-size:13.5px; font-weight:600;
letter-spacing:.01em; line-height:1.5; color:var(--c-accent);
}
.mina2-compare__label--top{ margin-bottom:14px; }
.mina2-compare__label--bottom{ margin-top:14px; text-align:right; }
/* ===========================================================================
9.R3 · COMPONENTS ADDED FOR BATCH R3
Section numbers 9.17 and 9.18 were already claimed by parallel batches, so
this block is labelled by batch rather than by number. Every selector below
is new and collides with nothing above it.
=========================================================================== */
/* --- 9.R3a Standalone figure, two more modifiers ------------------------
Both belong with .mina2-media in section 9.4 and are declared here only so
the whole batch is one edit to a file many agents are writing to. */
/* A small mark rather than an illustration: a wordmark or a logo lockup set in
the flow. Live renders /coming-soon/'s script wordmark at roughly a tenth of
its intrinsic 400px, and the default 520px cap makes it the loudest thing on
a page that is eleven words long. */
.mina2-media--sm img{ max-height:150px; }
/* The responsive twin, LAYOUT-RULES rule 2a, is NOT redeclared here. A parallel
batch already built it as .mina2-wide-only / .mina2-narrow-only in section 2
and it covers exactly this case, so the three pages in this batch that carry
a live duplicate use that pair rather than a second mechanism for the same
job. A system with two ways to hide the same twin gets one of them wrong. */
/* A figure inside a centred band, e.g. a brand mark above the headline. The
reset zeroes every margin, so without this the mark sits flush against the
heading below it. */
.mina2-band__inner .mina2-media{ margin:0 auto clamp(24px,3vw,38px); }
/* --- 9.R3b Hero foot ----------------------------------------------------
A full width strip across the bottom of the hero, under both columns, in its
own grid row. MINA's landing hero puts its client logo strip there and the
straddling form card crosses it, which is exactly what live does. It takes
the hero grid's own row gap, so it declares no margin of its own. */
.mina2-hero__foot{ grid-column:1 / -1; width:100%; }
/* --- 9.R3c The hero "or" separator ---------------------------------------
A label between two stacked calls to action inside a hero. COPY component:
usable only where the page already carries the word. The healthcare clinic
landing page carries a literal "or..." as an h2 between its two hero
buttons, so the element stays an h2 and only its type treatment changed.
Never invent one.
NAMED __or RATHER THAN .mina2-or, and that is a collision fix rather than a
preference. Section 7.7 already owns .mina2-or: a letterspaced grey rule
reading "- OR -" between the contact form and the telephone card on
/contact-us/. This is a different thing in a different place, italic sky on
navy inside a hero, and shipping it under the same name would have silently
restyled that page, because this block sits 1,400 lines later at the same
weight. Two components, two names. */
.mina2-hero__or{
margin-top:26px; font-family:var(--font-b); font-style:italic; font-weight:600;
font-size:15px; letter-spacing:.02em; color:var(--sky-300);
}
.mina2-hero__or + .mina2-hero__cta{ margin-top:14px; }
/* Restated at (0,4,0) against 9.2c's straddle copy tightening, which names
.mina2-hero__cta at (0,3,0) and would otherwise take this pair apart. The 14px
here is not the gap between the copy and its call to action, it is the gap
between the word "or..." and the button it introduces, so it must not track
the other number in either direction. Caught by re-measuring at 768, where
the tightening restores 42px and this line was silently getting it: the hero
on /canadas-healthcare-clinic-web-design-agency/ grew 28px on a tablet and a
phone, which is the whole of that page's regression in this change. */
.mina2-hero--straddle .mina2-hero__content .mina2-hero__or + .mina2-hero__cta{ margin-top:14px; }
/* --- 9.R3d Morph. NEW. ---------------------------------------------------
A stack of images with one visible at a time, cross fading.
It exists because three live pages run Unlimited Elements "morph slider"
widgets that paint their current slide into a
and leave every source
image in the DOM but invisible. That is unclonable and phase one had to waive
the IMAGES gate over it. Here every slide is a real , every