/* ==========================================================================
EU Gold Mining Inc. — site stylesheet
--------------------------------------------------------------------------
One stylesheet for every page. Load it from each page's :
Conventions
-----------
Naming ls-block__element--modifier, plus is-* for states set by JS
or by the page (is-active, is-light, is-compact).
Layers Order is declared once, below. Later layers win regardless of
where the rule sits in the file, so a page-scoped tweak never
has to fight a component and nothing needs !important.
`responsive` is last, so every breakpoint lives in one block at
the foot of the file and always wins. One breakpoint carries
the layout change: 900px, where the nav becomes a drawer and
the article/aside pair stacks.
Theming Components that appear on both light and dark bands read their
colours from custom properties set by a surface class, rather
than duplicating the whole component per background.
Values Colours, type sizes and spacing come from the token block. Add
a token before hard-coding a new value, so the palette stays
countable.
========================================================================== */
@layer tokens, base, layout, components, pages, utilities, responsive, motion;
/* ==========================================================================
TOKENS
========================================================================== */
@layer tokens {
:root {
/* --- Brand surfaces ------------------------------------------------- */
--ls-abyss: #061c24; /* deepest teal: footer, hero gradient tail */
--ls-deep: #08262f; /* page backdrop, dark bands */
--ls-teal: #0b3543; /* mid dark band */
--ls-teal-mid: #0d4759;/* link hover on light, gradient head */
--ls-paper: #fbfaf6; /* light band */
--ls-white: #ffffff;
/* --- Brand gold ------------------------------------------------------ */
--ls-gold: #e7cf8f; /* accent on dark: headings, buttons, rules */
--ls-gold-deep: #cbaa5e; /* kickers on dark, hairline rules */
--ls-gold-light: #f3e3b4; /* hover lift on dark */
--ls-gold-ink: #8a6e31; /* the AA-safe gold for text on light */
/* --- Ink ------------------------------------------------------------- */
--ls-ink: #182726; /* body text on light */
--ls-ink-soft: #4c5a58;
--ls-cream: #f3eee2; /* body text on dark */
--ls-mute: #777463;
/* Channel triplets, so alpha ramps below stay in one place. */
--ls-ink-rgb: 24, 39, 38;
--ls-cream-rgb: 243, 238, 226;
--ls-teal-rgb: 13, 71, 89;
--ls-gold-rgb: 231, 207, 143;
--ls-gold-deep-rgb: 203, 170, 94;
--ls-abyss-rgb: 6, 28, 36;
/* --- Text alpha ramps ------------------------------------------------
Three steps per channel, no more. Alpha never drops below .65: past
that these stop clearing WCAG AA on their own backgrounds. Hierarchy
comes from size and weight, not from fading text further. */
--ls-ink-strong: rgba(var(--ls-ink-rgb), .80);
--ls-ink-body: rgba(var(--ls-ink-rgb), .72);
--ls-ink-meta: rgba(var(--ls-ink-rgb), .65);
--ls-cream-strong: rgba(var(--ls-cream-rgb), .86);
--ls-cream-body: rgba(var(--ls-cream-rgb), .72);
--ls-cream-meta: rgba(var(--ls-cream-rgb), .65);
/* --- Hairlines and washes -------------------------------------------- */
--ls-rule-ink: rgba(var(--ls-ink-rgb), .12);
--ls-rule-ink-soft: rgba(var(--ls-ink-rgb), .09);
--ls-rule-teal: rgba(var(--ls-teal-rgb), .14);
--ls-rule-gold: rgba(var(--ls-gold-rgb), .12);
--ls-rule-gold-strong: rgba(var(--ls-gold-rgb), .25);
--ls-wash-gold-hover: rgba(var(--ls-gold-deep-rgb), .2);
/* --- Type ------------------------------------------------------------ */
--ls-font-sans: 'Archivo', system-ui, sans-serif;
--ls-font-serif: 'Libre Caslon Display', serif;
--ls-font-mono: ui-monospace, monospace;
/* Three reading steps, not six. The old ramp ran 15.5 / 14.5 / 14 / 13.5,
four sizes inside two points, which reads as variance rather than
hierarchy: at those deltas the reader cannot tell the ranks apart, so
the distinctions cost legibility and bought nothing. Rank now comes
from size, weight and colour together. The kicker step is separate
because it is set in tracked capitals, where 11px is the intent.
Every step is fluid, display and reading alike, and both ends of each
clamp are load bearing. The floor is the size the step was designed at
and holds from the phone up to ~1400px, so nothing below a large
desktop moves. Above that the ramp steps up together — the slopes are
ordered as the sizes are, so prose > prose-sm > meta at every width —
and finishes at ~1570px, which is where --ls-wrap finishes growing to
its 1440 ceiling, so type and column arrive at full size together.
The ×1.12 here is deliberately less than the ×1.161 the column and every
fixed width grow by, which is the whole difference between a large
screen that is airier and one that is merely bigger. It costs about four
per cent on the measure — a 104-character line becomes a 108-character
one — which is inside the noise, and buys a page whose proportions a
reader recognises as the same design at any size. */
--ls-fs-h1: clamp(34px, 4.6vw, 67px);
--ls-fs-h2: clamp(28px, 3.4vw, 49.5px);
--ls-fs-h3: clamp(26px, 2.6vw, 40.5px);
--ls-fs-lead: clamp(17px, 1.5vw, 22.5px);
--ls-fs-prose: clamp(16.5px, 1.18vw, 18.5px); /* body copy: the size text is read at */
--ls-fs-prose-sm: clamp(15px, 1.07vw, 16.5px); /* dense copy: table cells, notes, captions */
--ls-fs-meta: clamp(13.5px, .96vw, 15px); /* timestamps, file sizes, footnotes */
--ls-fs-kicker: clamp(11px, .78vw, 12px); /* tracked capitals only */
/* --- Tracking ---------------------------------------------------------
Small caps need tracking; body text does not. Seven steps, by role.
Uppercase micro-labels all share one value, as do all section kickers:
before this, near-identical labels carried five different values. */
--ls-track-link: .04em; /* nav and inline links */
--ls-track-label: .06em; /* small meta labels, card CTAs */
--ls-track-wide: .08em; /* uppercase buttons and pills, tracked text */
--ls-track-caps: .13em; /* uppercase micro-labels, 10-12.5px */
--ls-track-tag: .16em; /* tags and feature kickers */
--ls-track-kicker: .22em; /* section kickers */
--ls-track-airy: .34em; /* the home page's airy kicker */
--ls-lh-tight: 1.12;
--ls-lh-snug: 1.5;
--ls-lh-body: 1.65;
--ls-lh-loose: 1.75;
/* --- Shape and depth -------------------------------------------------- */
/* Four radii, by the size of the thing being rounded. The house radius
is nearly square: it is what makes the chips and buttons feel precise. */
--ls-radius: 2px; /* chips, buttons, badges, fields, menus */
--ls-radius-md: 8px; /* cards and figures */
--ls-radius-lg: 12px; /* framed panels, callouts, embedded maps */
--ls-radius-xl: 18px; /* full-width feature blocks */
--ls-shadow-menu: 0 18px 40px rgba(var(--ls-teal-rgb), .16);
--ls-shadow-card: 0 14px 34px rgba(var(--ls-teal-rgb), .13);
--ls-shadow-lift: 0 24px 50px rgba(var(--ls-abyss-rgb), .28);
/* --- Rhythm ------------------------------------------------------------ */
/* The content measure. 92vw to 1440px, which it reaches at a 1565px
viewport; past that the page grows its margins rather than its column.
Nothing below 1348px moves, because 92vw is still the smaller term
there — the widening happens entirely in the large-desktop range this
ceiling was raised for.
Anything that has to line up with the band edge reads this token rather
than restating the expression: the nav, the footer, the page heroes and
the home hero all did restate it, and a container width written in five
places is a container width that will only be changed in four. */
--ls-wrap: min(1440px, 92vw);
/* One design pixel: a 1240th of the content measure, and never less than
1px. Every fixed width in the file is written as calc(N * var(--ls-px))
and so holds exactly N pixels up to 1348px — where --ls-wrap is still
92vw and equals the 1240 it was designed against — then grows with the
column, in step, reaching N × 1.161 at the same 1565px viewport the
column stops at. Two consequences worth having: the interior of a band
keeps the proportions it was drawn with at every width, so a column that
ended 42px short of the band edge does not drift out to 156; and the
ratio cannot fall out of step with the container, because it is derived
from it rather than restated as a slope at each of the thirty sites.
N stays legible at the use site, so ls-measure-640 still says what it
is, and the type ramp deliberately grows a little less (×1.12) over the
same band — large screens should get airier, not merely bigger. */
--ls-px: max(1px, calc(var(--ls-wrap) / 1240));
--ls-band-y: clamp(60px, 7.5vw, 111px); /* section top/bottom padding */
--ls-head-gap: clamp(30px, 3.6vw, 56px); /* section head to its content */
--ls-anchor-offset: 64px; /* fixed nav clearance */
--ls-ease: .2s ease;
--ls-ease-theme: .35s ease;
/* --- Surface contract -------------------------------------------------
Components that appear on both light and dark bands read this instead
of hard-coding a colour. Every dark surface re-points it, so dropping a
kicker into a new band needs no extra class. */
--ls-accent-label: var(--ls-gold-ink);
}
/* Dark surfaces. Listed in one place so the set stays reviewable. */
.ls-band--teal, .ls-band--deep, .ls-band--sink, .ls-band--sweep,
.ls-pagehero, .ls-ctaband, .ls-statstrip, .ls-footer {
--ls-accent-label: var(--ls-gold-deep);
}
}
/* ==========================================================================
BASE
========================================================================== */
@layer base {
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--ls-deep);
color: var(--ls-ink);
font-family: var(--ls-font-sans);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: var(--ls-gold-ink); text-decoration: none; }
a:hover { color: var(--ls-teal-mid); }
::selection { background: var(--ls-gold); color: var(--ls-deep); }
input, button { font-family: var(--ls-font-sans); }
/* One focus ring for the whole site. It is drawn in gold with a contrasting
outer shadow so that it reads on the cream bands and on the deep teal
ones without a per-surface variant, and :focus-visible keeps it off
mouse clicks. Fields set outline: none, so without this they would have
had only a faint border-colour shift to signal focus. */
:focus-visible {
outline: 2px solid var(--ls-gold);
outline-offset: 2px;
border-radius: 1px;
box-shadow: 0 0 0 4px rgba(var(--ls-abyss-rgb), .35);
}
.ls-field:focus-visible { outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
}
/* ==========================================================================
LAYOUT — the page skeleton: bands, the centred measure, section heads
========================================================================== */
@layer layout {
/* The single content measure used by every band, nav and footer. */
.ls-wrap { width: var(--ls-wrap); margin: 0 auto; }
/* --- Bands ------------------------------------------------------------
A band is a full-bleed horizontal stripe. The surface modifier sets both
the background and the text colours the components inside it inherit. */
.ls-band { padding: var(--ls-band-y) 0; }
/* Only bands that are jump targets need to clear the fixed bar. */
.ls-band--anchor { scroll-margin-top: var(--ls-anchor-offset); }
.ls-band--flush-bottom { padding-bottom: 0; }
/* An article band sits under a page hero, so it needs less lead-in above. */
.ls-band--article { padding: clamp(56px, 7vw, 104px) 0 clamp(60px, 7.5vw, 111px); }
.ls-band--rule-top { border-top: 1px solid var(--ls-rule-ink-soft); }
.ls-band--rule-top-gold { border-top: 1px solid var(--ls-rule-gold); }
.ls-band--paper { background: var(--ls-paper); color: var(--ls-ink); }
.ls-band--white { background: var(--ls-white); color: var(--ls-ink); }
.ls-band--teal { background: var(--ls-teal); color: var(--ls-cream); }
.ls-band--deep { background: var(--ls-deep); color: var(--ls-cream); }
.ls-band--sink {
background: linear-gradient(160deg, var(--ls-teal) 0%, var(--ls-deep) 60%, var(--ls-abyss) 100%);
color: var(--ls-cream);
}
.ls-band--sweep {
background: linear-gradient(120deg, var(--ls-teal-mid), #0a3543 70%);
color: var(--ls-cream);
}
/* --- Section head: kicker, title, and an optional trailing aside ------- */
.ls-head { margin-bottom: var(--ls-head-gap); }
.ls-head--split {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 24px;
flex-wrap: wrap;
}
.ls-head__title-col { max-width: calc(640 * var(--ls-px)); }
/* --- Generic responsive grids ------------------------------------------
Named for the minimum comfortable column, not for a column count, so the
same class behaves at any wrap width. */
.ls-grid { display: grid; gap: clamp(16px, 1.8vw, 26px); }
/* Column minimum, then gap: two independent axes, so any pairing composes. */
.ls-grid--170 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ls-grid--220 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ls-grid--240 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ls-grid--250 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.ls-grid--260 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ls-grid--290 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.ls-grid--300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ls-grid--420 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.ls-grid--one { grid-template-columns: 1fr; gap: 14px; }
.ls-grid--gap-10 { gap: 10px; }
.ls-grid--gap-14 { gap: 14px; }
.ls-grid--gap-18 { gap: 18px; }
.ls-grid--gap-40 { gap: clamp(24px, 3vw, 46px); }
/* carries a 40px UA side margin, so this zeroes all sides. */
.ls-grid--gap-b { margin: 0 0 20px; }
}
/* ==========================================================================
COMPONENTS
========================================================================== */
@layer components {
/* --- Typography -------------------------------------------------------
Display type is the serif; everything else is the sans. These carry no
colour, so they read correctly on whichever band they sit in. */
.ls-display { font-family: var(--ls-font-serif); font-weight: 400; margin: 0; }
.ls-h1 {
font-family: var(--ls-font-serif); font-weight: 400; margin: 0;
font-size: var(--ls-fs-h1); line-height: 1.08; letter-spacing: -0.01em;
}
.ls-h2 {
font-family: var(--ls-font-serif); font-weight: 400; margin: 0;
font-size: var(--ls-fs-h2); line-height: var(--ls-lh-tight); letter-spacing: -0.01em;
}
.ls-h3 {
font-family: var(--ls-font-serif); font-weight: 400; margin: 0 0 18px;
font-size: var(--ls-fs-h3); line-height: var(--ls-lh-tight);
}
.ls-subhead { margin: 0 0 10px; font-size: 18px; font-weight: 700; }
/* Kicker: the letterspaced label above a title. Two steps are in use —
the tighter .22em/.26em on section heads, the airier .34em on the home
page bands. Colour follows the band. */
.ls-kicker {
display: block;
font-size: var(--ls-fs-kicker); font-weight: 700;
letter-spacing: var(--ls-track-kicker); text-transform: uppercase;
color: var(--ls-accent-label);
/* Margin is written long-hand so the class can be worn by a heading — the
footer's group labels are
— without the UA's top margin on h1-h6
pushing it off the line its neighbours sit on. A no-op on the