/* ==========================================================================
AlexMotion — global stylesheet
Palette + type lifted from the live Squarespace theme (see CONTENT.md).
========================================================================== */
/* --- Fonts ---------------------------------------------------------------
Poppins is SIL OFL, so it is self-hosted here.
Cubano is an Adobe Fonts (Typekit) face and CANNOT be self-hosted — add the
site's own Adobe Fonts kit in each page's , and Cubano will
pick up automatically via --font-display. Until then it falls back to
Poppins 700, which keeps the layout intact.
------------------------------------------------------------------------ */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../assets/fonts/poppins-600.woff2') format('woff2');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../assets/fonts/poppins-700.woff2') format('woff2');
}
/* Stand-in for Cubano (which is weight 400 only). Poppins Bold is remapped to
weight 400 so the display stack never triggers faux-bolding on real Cubano. */
@font-face {
font-family: 'Display Fallback';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../assets/fonts/poppins-700.woff2') format('woff2');
}
/* ---------------------------------------------------------------------------
Every colour in the site resolves from this block — no rule below it hard-codes
one (bar the two error reds). Restyling starts here.
--------------------------------------------------------------------------- */
:root {
--bg: #0073FF; /* page background */
--ink: #ffffff; /* body text */
--accent: #FFEA49; /* headings, borders, buttons */
--outline: #0A1D54; /* display stroke/shadow; text on accent fills */
--muted: #A5FFFF; /* secondary text, input underlines */
--mark: #EDFFEF; /* SYMBOL default fill */
--mark-hover: #0A1D54; /* SYMBOL hover fill */
--white: #EDFFEE; /* the minty off-white, referred to as "white" */
--focus: #EDFFEF; /* focus ring */
--well: rgba(10, 29, 84, .35); /* backing behind video slots */
--font-display: 'Cubano', 'Display Fallback', system-ui, sans-serif;
--font-body: 'Poppins', system-ui, -apple-system, sans-serif;
--wrap: 1200px;
--gutter: clamp(1.25rem, 4vw, 3rem);
--radius: 20px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-weight: 600;
font-size: 1.0625rem;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
/* height:auto is required — the width/height attributes on ![]()
would otherwise
hold the intrinsic height while max-width shrinks the width, stretching them. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.wrap {
width: 100%;
max-width: var(--wrap);
margin-inline: auto;
padding-inline: var(--gutter);
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
background: var(--accent);
color: var(--outline);
padding: .75rem 1.25rem;
z-index: 999;
}
.skip-link:focus { left: 0; }
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* --- Display type --------------------------------------------------------
Yellow fill, navy outline, stacked navy offset shadow — the signature look.
------------------------------------------------------------------------ */
h1, h2, h3, .display {
font-family: var(--font-display);
font-weight: 400;
text-transform: uppercase;
color: var(--accent);
line-height: 1.05;
letter-spacing: .02em;
margin: 0 0 .5em;
-webkit-text-stroke: 2px var(--outline);
text-shadow: -1px 1px var(--outline), -2px 2px var(--outline), -3px 3px var(--outline);
}
h1 { font-size: clamp(2.25rem, 6vw, 4rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
@media (max-width: 768px) {
h1, h2, h3, .display { -webkit-text-stroke-width: 1px; }
}
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
/* --- Header / nav -------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--bg);
padding-block: 1.25rem;
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.site-logo { display: block; flex: 0 0 auto; }
.site-logo img { width: 200px; height: auto; }
.nav-toggle {
display: none;
background: none;
border: 0;
padding: .25rem;
cursor: pointer;
line-height: 0;
}
.nav-toggle svg { display: block; }
.nav-toggle rect { fill: var(--accent); stroke: var(--outline); stroke-width: 2; }
.site-nav ul {
list-style: none;
display: flex;
align-items: center;
gap: 2rem;
margin: 0;
padding: 0;
/* The logo GIF parks its wordmark ~29% down its own canvas (the space above is
used by the fly-in animation, so it can't be cropped out). Centring the two
boxes therefore leaves the nav sitting low — this aligns the ink instead.
Measured against the 26px nav; re-measure if that size changes. */
transform: translateY(-4.7px);
}
/* Sized and weighted to sit alongside the logo mark rather than out-shout it:
smaller than the page headings, with a 2-layer shadow instead of the 3-layer stack. */
/* The Work