/* ==========================================================================
base.css — design tokens, reset, typography, background, shared primitives
========================================================================== */
:root {
/* Palette — sampled from assets/img/bg-page.png, top to bottom */
--violet: #a99ad9;
--violet-warm: #b39acf;
--mauve: #c294bb;
--rose: #c5849c;
--crimson: #c06a72;
--crimson-lit: #bb7079;
--maroon: #8c1d3a;
--maroon-lit: #a01f42;
--maroon-deep: #6d1430;
/* Header bar gradient, taken from the reference SVG. */
--nav-lavender: 173, 168, 233; /* #ADA8E9, fades to transparent at the top */
--nav-burgundy: 128, 0, 32; /* #800020, 0.594 alpha at the bottom */
/* Ink */
--ink: #ffffff;
--ink-soft: rgba(255, 255, 255, 0.82);
--ink-faint: rgba(255, 255, 255, 0.55);
--ink-ghost: rgba(255, 255, 255, 0.22);
/* Glass */
--glass-bg: rgba(255, 255, 255, 0.10);
--glass-line: rgba(255, 255, 255, 0.28);
--glass-blur: blur(14px);
/* Geometry */
--radius-sm: 10px;
--radius: 20px;
--radius-lg: 28px;
/* Header geometry, from the reference SVG (1443x134).
The reference starts the bar 22px down, which left page content showing
through a transparent strip along the top edge, so the bar is extended up
to y=0. Its bottom edge stays at 131 where the design puts it, and the
labels are centred on that 0..131 bar. */
--nav-h: 134px; /* full header block, incl. the logo overhang */
--nav-bar-h: 131px; /* bar runs 0..131, flush with the top edge */
/* Section rhythm and gutters, as tokens so the breakpoints at the foot of
this file can retune the whole page from one place. */
--section-pad: 90px;
--section-pad-sm: 56px;
--gutter: 32px;
/* Type — the families live in css/fonts.css, as --font-body,
--font-heading, --font-display and friends. Nothing here. */
}
/* --- Reset ------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
/* Fallback colour lives here, not on body, so body stays transparent and the
.bg-layers artwork behind it is never covered. */
background: var(--violet);
}
body {
margin: 0;
/* No min-width: the layout reflows all the way down to a phone. Long,
unbreakable strings are the one thing that can still force a sideways
scroll, so they wrap instead. */
overflow-wrap: break-word;
/* font-family comes from css/fonts.css. */
font-weight: 400;
color: var(--ink);
-webkit-font-smoothing: antialiased;
/* Containing block for .bg-layers, so the artwork spans the whole document. */
position: relative;
}
img,
svg {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
color: inherit;
border: 0;
background: none;
cursor: pointer;
}
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
p {
margin: 0 0 1em;
}
p:last-child {
margin-bottom: 0;
}
/* --- Background ---------------------------------------------------------
One artwork spans the whole document: purple at the top of the page through
to crimson at the footer, however long the page is. The CSS gradient beneath
approximates it so the palette holds if the file is missing.
------------------------------------------------------------------------ */
.bg-layers {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
overflow: hidden;
}
.bg-gradient,
.bg-image {
position: absolute;
inset: 0;
}
.bg-gradient {
background: linear-gradient(
180deg,
var(--violet) 0%,
var(--violet) 42%,
var(--violet-warm) 58%,
var(--mauve) 70%,
var(--rose) 80%,
var(--crimson) 92%,
var(--crimson-lit) 100%
);
}
.bg-image {
background-image: url("../assets/img/bg-page.png");
background-size: 100% 100%;
background-position: top center;
background-repeat: no-repeat;
}
/* --- Typography --------------------------------------------------------- */
h1,
h2,
h3,
h4 {
margin: 0;
font-weight: 800;
letter-spacing: 0.01em;
line-height: 1.05;
}
.display {
font-size: clamp(2.6rem, 5vw, 4.6rem);
text-transform: uppercase;
}
.body-copy,
.body-copy-left,
.body-copy-right {
font-size: 1rem;
/* Regular, matching the body default. Poppins Light was too thin to hold
up as white text over the photographic background. */
font-weight: 400;
line-height: 1.85;
color: var(--ink-soft);
}
.body-copy { text-align: justify; }
.body-copy-left { text-align: left; }
.body-copy-right { text-align: right; }
/* --- Reflection heading -------------------------------------------------
NOMINEES
The ::after clone is flipped vertically and faded out beneath the heading.
------------------------------------------------------------------------ */
.reflect {
position: relative;
display: inline-block;
font-size: clamp(2.6rem, 5.2vw, 4.4rem);
font-weight: 800;
text-transform: uppercase;
text-align: center;
letter-spacing: 0.005em;
text-shadow: 0 4px 26px rgba(255, 255, 255, 0.35);
}
.reflect::after {
content: attr(data-text);
position: absolute;
left: 0;
right: 0;
top: calc(100% - 0.21em);
transform: scaleY(-1);
transform-origin: center;
color: var(--ink);
opacity: 0.45;
text-shadow: none;
pointer-events: none;
-webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, transparent 90%);
mask-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, transparent 90%);
}
/* --- Linked reflection heading ------------------------------------------
The participants' design heading on the landing page is the only .reflect
that is also a link. .reflect already carries a standing white bloom, so
the hover state lifts that same bloom into a brighter, tighter halo rather
than introducing a different effect -- and the mirrored clone brightens
with it instead of staying flat behind a glowing original.
focus-within, not focus: the takes the focus, and the glow belongs to
the that owns the ::after.
------------------------------------------------------------------------ */
.reflect--link {
cursor: pointer;
transition: text-shadow 0.3s ease;
}
.reflect--link::after {
transition: opacity 0.3s ease;
}
.reflect--link:hover,
.reflect--link:focus-within {
text-shadow: 0 0 12px rgba(255, 255, 255, 0.9),
0 0 34px rgba(255, 255, 255, 0.6),
0 4px 30px rgba(255, 255, 255, 0.5);
}
.reflect--link:hover::after,
.reflect--link:focus-within::after {
opacity: 0.62;
}
/* Subtitle sitting directly under a reflect heading, above the reflection. */
.reflect-sub {
position: relative;
z-index: 1;
margin-top: 0.35rem;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
/* --- Shared primitives --------------------------------------------------- */
.container {
width: 100%;
margin-inline: auto;
padding-inline: var(--gutter);
}
/* A 100px gutter outside the container box, on top of its 32px padding, with
a hard ceiling of 1400px. min() takes whichever is smaller: the gutter term
holds on normal widths, the ceiling only takes over once the viewport passes
1600px. margin-inline: auto above splits whatever is left evenly. */
.page-home .container,
.page-projects .container {
max-width: min(1400px, calc(100% - 200px));
}
.section {
padding-block: var(--section-pad);
}
.section--tight {
padding-block: var(--section-pad-sm);
}
.section__head {
text-align: center;
margin-bottom: 68px;
}
.glass {
background: var(--glass-bg);
border: 1px solid var(--glass-line);
border-radius: var(--radius);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.72rem 2rem;
border-radius: 999px;
background: var(--maroon);
color: var(--ink);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
transition: background 0.2s ease, transform 0.2s ease;
}
.btn:hover {
background: var(--maroon-lit);
transform: translateY(-2px);
}
/* Image placeholder used when an asset file is not present yet. */
.img-placeholder {
display: block;
background: rgba(255, 255, 255, 0.14);
border: 1px dashed rgba(255, 255, 255, 0.3);
border-radius: var(--radius-sm);
min-height: 60px;
}
.site-img {
object-fit: cover;
}
.is-hidden {
display: none !important;
}
/* ==========================================================================
Responsive — the shared primitives
--------------------------------------------------------------------------
Three steps down from the 1440px design width:
<= 1024px tablet the 100px outer gutter goes, sections tighten
<= 860px phone nav collapses to a drawer (see css/layout.css)
<= 480px small type and spacing take their last step down
Everything is a token override where possible, so a component only needs a
rule of its own when its shape actually changes.
========================================================================== */
@media (max-width: 1024px) {
:root {
--section-pad: 64px;
--section-pad-sm: 44px;
--gutter: 24px;
}
/* The 100px outer gutter is a desktop luxury: at this width it is eating
a fifth of the screen, so the container falls back to its own padding. */
.page-home .container,
.page-projects .container {
max-width: 100%;
}
.section__head {
margin-bottom: 48px;
}
}
@media (max-width: 860px) {
:root {
/* No logo overhang below the bar on the drawer nav, so the two
heights match and .site-main's top padding is exact. */
--nav-h: 72px;
--nav-bar-h: 72px;
--section-pad: 52px;
--section-pad-sm: 36px;
--gutter: 20px;
}
/* clamp()'s 2.6rem floor is a desktop floor — it overflows a 375px screen
once a heading is as long as "Participants' Design". Below the drawer
breakpoint the headings scale with the viewport instead. */
.reflect {
font-size: clamp(1.6rem, 7vw, 2.6rem);
}
.reflect-sub {
font-size: 0.85rem;
letter-spacing: 0.12em;
}
.display {
font-size: clamp(1.9rem, 8vw, 2.6rem);
}
.body-copy,
.body-copy-left,
.body-copy-right {
font-size: 0.95rem;
line-height: 1.7;
}
/* Justified text opens rivers of whitespace in a narrow column. */
.body-copy {
text-align: left;
}
.section__head {
margin-bottom: 36px;
}
/* Comfortable tap target: the desktop pill is 0.72rem tall. */
.btn {
padding: 0.85rem 1.6rem;
min-height: 44px;
}
}
@media (max-width: 480px) {
:root {
--section-pad: 40px;
--section-pad-sm: 28px;
--gutter: 16px;
}
.btn {
width: 100%;
padding-inline: 1rem;
}
}
/* Touch devices have no hover, so anything revealed by :hover alone would be
unreachable. Each component opts in below; this is only the shared switch
for the transitions that go with them. */
@media (hover: none) {
.btn:hover {
transform: none;
}
}