/* ==========================================================================
Melbourne Echo Clinic - Base
--------------------------------------------------------------------------
Minimal reset, base typography, and the two documented emphasis patterns.
Depends on tokens.css - load that first.
Foundation only. No page or component styles belong in this file.
========================================================================== */
/* ==========================================================================
1. Reset
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
margin: 0;
}
/* Only strip list styling where a list role has been removed deliberately.
Semantic lists keep their markers so screen readers still announce them. */
ul[role='list'],
ol[role='list'] {
list-style: none;
margin: 0;
padding: 0;
}
img,
picture,
svg,
video {
display: block;
max-width: 100%;
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
/* Long clinical words and URLs shouldn't force horizontal scroll on mobile */
p, li, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ==========================================================================
2. Base typography
========================================================================== */
body {
font-family: var(--font-body);
font-size: 1rem;
font-weight: 400;
line-height: 1.6;
color: var(--ink);
background-color: var(--paper);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Headings inherit the display face by default. Sizing is applied via the
.display classes below rather than by element, so heading level stays a
semantic decision and never a visual one. */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
color: var(--ink);
}
/* --mec-blue is the brand link colour in design-system.md. It used to be
#4A82AA at 3.97:1 on --paper, below the 4.5:1 AA floor for body-size text,
which is why links were moved to --mec-blue-deep.
As of 2026-08-11 --mec-blue is #006EDF at 4.67:1 and would now pass. Links
are staying on --mec-blue-deep (6.83:1) anyway, deliberately: 4.67:1 clears
the floor by 0.17, and links are the one thing on the page a reader has to
pick out mid-sentence, often on --cream (4.34:1) rather than --paper. The
headroom is worth more here than the extra brightness. Revisit only with a
real reason, not because the number now passes. */
a {
color: var(--mec-blue-deep);
font-weight: 600;
text-decoration-thickness: 1px;
text-underline-offset: 0.15em;
}
a:hover {
color: var(--mec-navy);
}
strong, b {
font-weight: 600;
}
hr {
border: 0;
border-top: 1px solid var(--rule);
margin: 0;
}
/* Body copy should never exceed 70ch - design-system.md, Whitespace */
.measure {
max-width: 70ch;
}
/* ==========================================================================
3. Type scale
--------------------------------------------------------------------------
Starting scale from design-system.md, to be refined when the first page
is built.
========================================================================== */
.display--hero {
font-size: clamp(3rem, 6vw, 5.5rem);
line-height: 1.05;
}
.section-title {
font-size: 2.5rem;
line-height: 1.15;
}
.subheading {
font-family: var(--font-body);
font-size: 1.5rem;
font-weight: 600;
letter-spacing: normal;
line-height: 1.4;
}
.body-lg {
font-size: 1.125rem;
line-height: 1.6;
}
.small {
font-size: 0.875rem;
}
/* ==========================================================================
4. Emphasis patterns
--------------------------------------------------------------------------
Two established vocabularies with distinct roles. They MUST NEVER appear
together in the same headline.
========================================================================== */
/* Shared display base - both patterns build on this */
.display {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--ink);
}
/* --------------------------------------------------------------------------
Pattern A - Colour-swap (loud, punchy)
--------------------------------------------------------------------------
Key phrase swaps from ink to --signal-blue.
USE FOR: homepage hero, primary CTAs, big-number data points, high-impact
conversion moments.
LIMIT: one signal moment per page maximum, or it stops signalling.
Hospital-grade cardiac imaging,
closer to home.
-------------------------------------------------------------------------- */
.display--signal {
color: var(--ink);
}
.display__signal {
color: var(--signal-blue);
}
/* --------------------------------------------------------------------------
Pattern B - Quiet colour-swap (editorial)
--------------------------------------------------------------------------
Key phrase swaps to --mec-blue. Nothing else changes: same Instrument Sans,
same weight, same size, same letter-spacing as the rest of the headline.
USE FOR: About copy, For Patients pages, Team page, section headings the
reader will take time over.
May repeat across a page - it's subtle enough not to fatigue.
WHEN IN DOUBT, USE THIS ONE.
Hospital-grade cardiac imaging, bulk-billed and
closer to home.
WAS ITALIC SERIF UNTIL 2026-08-10. It set the phrase in Instrument Serif
italic; that was removed on request because the italic read as a different
voice rather than as emphasis. Colour is now the ONLY difference from the
surrounding sentence - if you reintroduce a font, weight, style or size
change here, you are rebuilding the pattern that was deliberately taken out.
Two consequences of that removal, both intentional:
- The full stop now sits INSIDE the . It could not before, because the
serif's period was a small light dot next to Instrument Sans' heavy
square one. Same face now, so it simply inherits the colour and the
separate .display__stop class it used to need is gone.
- Instrument Serif is no longer referenced by this pattern. It is still
exported as --font-serif, but as of 2026-08-23 it is no longer downloaded
by anything: the fonts are self-hosted now and it was not among the files
brought across. See the @font-face block in tokens.css.
THE ELEMENT STAYS , NOT . Colour alone carries the emphasis
visually, so is what carries it to a screen reader or to anyone who
can't distinguish the blue. Pattern A uses because its phrase is the
headline's subject rather than an emphasis within it.
-------------------------------------------------------------------------- */
/* Colour only - every other property is inherited from .display on purpose.
font-style: normal is NOT redundant. is italic by UA default, so
dropping this line does not fall back to upright - it slants the phrase,
which is the thing that was just removed. Caught exactly that way on
2026-08-10 by diffing the computed styles of the against its parent
.display; it is invisible in a quick glance.
That was true when a real Instrument Sans italic was being downloaded from
Google (`ital,wght@0,...;1,...`) and it is still true now that the fonts are
self-hosted and no italic file is shipped: without this line the browser
SYNTHESISES an oblique by shearing the upright, which looks worse, not
better. Removing the italic font did not make this rule safe to delete.
--mec-blue on --paper is 4.67:1 as of 2026-08-11 - passes WCAG AA for normal
text as well as large. This used to read "3.65:1, safe here SOLELY because
.display is large, never reuse at body size"; that restriction died with the
old #4A82AA and does not apply to the current value. */
.display em {
font-style: normal;
color: var(--mec-blue);
}
/* Guard rail: Pattern B's must not go italic inside a Pattern A headline.
Until 2026-08-11 this rule also reset the COLOUR, because the two patterns
took deliberately different blues and stacking them was a design-system
violation. --mec-blue and --signal-blue are now the same value (see
tokens.css), so resetting to `inherit` would do the opposite of what the
rule was written for: it would strip the emphasis off the phrase instead of
protecting it. Only the font-style reset still earns its place - is
italic by UA default, and without this the browser slants it (a real italic
before 2026-08-23, a synthesised oblique since). */
.display--signal em {
font-style: normal;
}
/* A serif emphasis pattern (.display--editorial, "Pattern C") sat here for part
of 2026-08-15: Instrument Serif italic on the , no colour swap, used by
the /for-patients h1 and nothing else. Removed the same day when that
headline went back to Pattern B to match the other hub headings.
That is the THIRD time Instrument Serif has been tried and withdrawn as a
heading face - 2026-08-10, 2026-08-13, 2026-08-15. The site's headings are
bold Instrument Sans with a blue colour swap for emphasis, and every attempt
to introduce a second face has been reversed within days. --font-serif still
exists, but the family is no longer downloaded at all - the fonts have been
self-hosted since 2026-08-23 and Instrument Serif was left behind. A fourth
attempt now means adding a font file; see design-system.md first. */
/* ==========================================================================
5. Eyebrow labels
--------------------------------------------------------------------------
Small caps between em-dashes above section headings.
- A New Partnership -
========================================================================== */
/* --mec-blue is what design-system.md specifies here. It now measures 4.67:1,
which passes AA - but eyebrows are small uppercase text set in a tracked-out
600 weight, and that is exactly where a 4.67:1 pairing gets thin. Staying on
--mec-blue-deep (6.83:1) is a deliberate margin, not a leftover from the old
blue failing. Don't "simplify" this to --mec-blue on the grounds that it now
passes. */
.eyebrow {
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
line-height: 1.4;
color: var(--mec-blue-deep);
}
/* ==========================================================================
6. Accessibility primitives
--------------------------------------------------------------------------
Required by the accessibility baseline in CLAUDE.md, not optional.
========================================================================== */
/* Visible focus on keyboard navigation only */
:focus-visible {
outline: 3px solid var(--signal-blue);
outline-offset: 2px;
border-radius: 2px;
}
/* Visually hidden but available to screen readers */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* Skip-to-content link - first focusable element on every page.
Skip to content */
.skip-link {
position: absolute;
top: 0;
left: 0;
z-index: 100;
padding: 0.75rem 1.25rem;
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 600;
color: var(--white);
background-color: var(--mec-navy);
text-decoration: none;
transform: translateY(-100%);
}
.skip-link:focus {
transform: translateY(0);
color: var(--white);
}
/* Programmatically focused landmarks shouldn't show a focus ring */
[tabindex='-1']:focus {
outline: none;
}
/* ==========================================================================
7. Layout primitives
========================================================================== */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--space-md);
}
.section {
padding-block: var(--space-section);
}
@media (max-width: 40em) {
:root {
--space-section: 3.5rem; /* 56px - design-system.md sections still breathe */
}
.section-title {
font-size: 1.875rem;
}
}