/* ==========================================================================
creaturecrafter.com
Rebuild of playcreature.com (WordPress + Divi + WooCommerce) as static HTML.
Original layout values were measured from the live site and recorded in the
original brief or read from the curl mirror rendered in Chromium. Nothing is
guessed in that initial rebuild. The visual foundation below supersedes it.
Where an original number looks arbitrary (23.8px line-height, 0.024 alpha,
337x239 gallery items) it is because that is what Divi actually produces.
No inline styles anywhere in the HTML, so a CSP without 'unsafe-inline'
works (PLAN §10.2).
========================================================================== */
/* --------------------------------------------------------------- fonts -- */
/* Poppins: self-hosted. PLAN §2.6 — fonts.googleapis.com resets in Chromium
through this egress, and we do not want a third-party font dependency. */
@font-face {
font-family: "Soup of Justice";
font-display: swap;
src: url("../fonts/SoupOfJustice.woff2") format("woff2"),
url("../fonts/SoupOfJustice.ttf") format("truetype");
}
/* --------------------------------------------------------------- tokens -- */
:root {
--accent: #2ea3f2; /* buttons, links (§3.1) */
--accent-strong: #0c71c3; /* stat numbers (§3.1) */
/* Accent applied to TEXT.
#2ea3f2 is 2.75:1 on white — it fails WCAG AA for body text (4.5:1) and
even the 3:1 floor for UI components. #0c71c3 is 5.04:1 and is already in
the site's palette as the stat-number blue, so links and button labels use
that and the brand stays the brand. Measured, not eyeballed. */
--accent-text: var(--accent-strong);
--text: #555555; /* body text (§3.1) */
--text-secondary: #333333; /* secondary (§3.1) */
--text-body: #666666; /* default, measured (§3.1) */
--black: #000000;
--near-black: #111111;
--white: #ffffff;
--tint: rgba(0, 0, 0, 0.024); /* alternating section background */
--footer-link: #bababa;
--on-dark: rgba(255, 255, 255, 0.75);
--header-h: 86px;
--workshop-h: 150px;
--row-max: 1080px; /* Divi content width, measured */
--font-body: "Poppins", Helvetica, Arial, Lucida, sans-serif;
--font-display: "Soup of Justice", Helvetica, Arial, Lucida, sans-serif;
--line: 23.8px; /* Divi's 1.7em of 14px */
--shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.3);
}
/* ---------------------------------------------------------------- base -- */
*, *::before, *::after { box-sizing: border-box; }
/* [hidden] loses to any rule that sets display — and several below do, on the
very elements progressive enhancement toggles (the captcha field is a flex
row). !important here is the cheaper fix than guarding every one of them. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
line-height: var(--line);
color: var(--text-body);
background: var(--white);
overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; border: 0; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.visually-hidden {
position: absolute; width: 1px; height: 1px; margin: -1px;
padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: 8px; top: -60px; z-index: 100;
background: var(--white); color: var(--accent);
padding: 10px 16px; border-radius: 3px; transition: top 150ms ease;
}
.skip-link:focus { top: 8px; }
.row { width: 80%; max-width: var(--row-max); margin: 0 auto; }
/* ------------------------------------------------------------ headings -- */
/* §3.1: every section heading is Soup of Justice 80px / 500 / #555 / uppercase.
In the original these are ; the rebuild uses real
s (§3.1, §6). */
.section-title {
margin: 0 0 30px;
font-family: var(--font-display);
font-size: 80px;
font-weight: 500;
line-height: 1.2;
color: var(--text);
text-transform: uppercase;
height: auto;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.section-copy {
margin: 0;
text-align: center;
color: var(--text);
line-height: var(--line);
}
.section-copy + .section-copy { margin-top: 14px; } /* Divi p padding-bottom: 1em */
/* A link inside a paragraph cannot be signalled by colour alone. */
.section-copy a { text-decoration: underline; text-underline-offset: 2px; }
/* ------------------------------------------------------------- buttons -- */
/* §3.13 — every Divi button on the site. */
.button {
display: inline-flex;
align-items: center;
justify-content: center;
height: 50px;
padding: 6px 20px;
border: 2px solid var(--accent-text);
border-radius: 3px;
background: transparent;
color: var(--accent-text);
font-family: var(--font-body);
font-size: 20px;
font-weight: 500;
line-height: 1;
cursor: pointer;
transition: background-color 300ms ease, color 300ms ease;
}
.button:hover { background: var(--accent-text); color: var(--white); text-decoration: none; }
/* -------------------------------------------------------------- header -- */
/* §3.3 — 86px, #000, padding 5px 15px, logo 171x50, nav 14px/500. */
.site-header {
position: sticky;
top: 0;
z-index: 30;
height: var(--header-h);
padding: 5px 15px;
background: var(--black);
box-shadow: 0 10px 10px -6px rgba(0, 0, 0, 0.3);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
padding: 0 15px;
}
.site-header__logo img { display: block; width: 171px; height: 50px; }
.site-nav ul {
display: flex;
gap: 22px;
margin: 0;
padding: 0;
list-style: none;
}
.site-nav a {
font-size: 14px;
font-weight: 500;
color: var(--on-dark);
line-height: var(--line);
}
.site-nav a:hover { color: var(--white); text-decoration: none; }
/* CSS-only disclosure: works with JavaScript disabled and is keyboard
operable (the checkbox takes focus, Space toggles). */
.nav-toggle { display: none; position: absolute; opacity: 0; width: 44px; height: 44px; margin: 0; cursor: pointer; }
.nav-toggle-label { display: none; }
/* ---------------------------------------------------------------- hero -- */
/* §3.2 rows 1–2 / §3.4. Height is calc(100vh - header - workshop strip),
min 625px — measured 664px at a 900px-tall viewport, at every width. */
.hero-wrap {
position: relative;
height: calc(100vh - var(--header-h) - var(--workshop-h));
min-height: 625px;
}
/* Divi marks the hero video "desktop only" and falls back to the static frame
below 981px. Matching that keeps mobile from downloading the video at all. */
.hero-video {
position: absolute;
inset: 0;
overflow: hidden;
}
.hero-video video {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 100%; height: 100%;
max-width: none;
object-fit: cover;
}
.hero {
position: relative;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
padding: 54px 0;
box-shadow: var(--shadow);
}
/* 682x400 natural, max-width:100%, rotated -2deg — this is what produces the
686px / 396px bounding boxes quoted in §3.4. */
/* The logo is the page's ; the wrapper must not add heading margins. */
.hero__heading { margin: 0; padding: 0; line-height: 0; font-size: 0; }
.hero__logo {
display: block;
width: 682px;
/* The -2deg rotation makes the bounding box ~2% wider than the element, so
a flat 100% overflows the viewport on narrow screens. 97% keeps the
rotated box inside it; at desktop the 682px width binds first, so this
changes nothing there. */
max-width: 97%;
height: auto;
transform: rotate(-2deg);
}
.hero__stores {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
width: 200px;
margin-top: 26px;
padding: 0;
list-style: none;
}
.hero__stores a { display: block; filter: opacity(50%); transition: transform 300ms ease, filter 300ms ease; }
.hero__stores a:hover, .hero__stores a:focus-visible { filter: opacity(100%); transform: scale(1.1); }
.hero__stores img { display: block; width: 63px; height: 63px; }
/* --------------------------------------------------- workshop carousel -- */
/* §3.5. Hidden below 981px on the live site — that is a real responsive rule
from the page's own stylesheet, not an omission. */
.workshop {
position: relative;
z-index: 10;
height: var(--workshop-h);
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
background: var(--white);
box-shadow: var(--shadow);
}
.workshop__viewport { display: flex; align-items: center; gap: 4px; min-height: 70px; }
.workshop__viewport a { display: block; line-height: 0; }
.workshop__viewport img { display: block; width: 67px; height: 67px; filter: grayscale(1); }
.workshop__btn {
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
border: 0; background: transparent;
color: var(--text); font-size: 28px; line-height: 1; cursor: pointer;
}
.workshop__btn:hover { color: var(--accent-text); }
/* ------------------------------------------------------------ sections -- */
/* §3.2 — backgrounds and padding, measured. */
.section { position: relative; }
.section--plain { background: var(--white); }
.section--tint { background: var(--tint); }
.section--create { padding: 50px 0 0; background: var(--white); }
.section--engage { padding: 100px 0; background: var(--tint); }
.section--share { padding: 50px 0; background: var(--white); }
.section--educate { padding: 100px 0; background: var(--tint); }
.section--support { padding: 50px 0; background: var(--white); }
.section--download { padding: 50px 0; background: var(--tint); }
/* Faint SVG background patterns, extracted from the Divi CSS (§3.2) rather
than redrawn. rgba(0,0,0,0.025) in each. */
.section__pattern {
position: absolute;
inset: 0;
pointer-events: none;
background-position: 0 0; /* Divi's own values for .et_pb_background_pattern */
background-repeat: repeat;
}
.section--engage > .section__pattern,
.section--educate > .section__pattern {
background-image: url("data:image/svg+xml;base64,PHN2ZyAgZmlsbD0icmdiYSgwLDAsMCwwLjAyNSkiIGhlaWdodD0iMzAwcHgiIHdpZHRoPSI0MDBweCIgdmlld0JveD0iMCAwIDQwMCAzMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE1MC4yNSw1OGwtNy4yLTMuNWEyMC40MiwyMC40MiwwLDEsMSwzNi43MSwxNy44OGwtNy4xOS0zLjVBMTIuNDIsMTIuNDIsMCwwLDAsMTUwLjI1LDU4Wk0yMC45Myw0OC42OGwtNi4xNy01LjFBMTIuNDEsMTIuNDEsMCwwLDEsMCw0Ni45NHY4LjQ4YTIwLjYsMjAuNiwwLDAsMCw1LjE3LjY3QTIwLjM4LDIwLjM4LDAsMCwwLDIwLjkzLDQ4LjY4Wm0zNzYuMzUtMy40M2ExMi40MywxMi40MywwLDAsMS0xLjY3LTE3LjQ4bC02LjE3LTUuMDlhMjAuNDQsMjAuNDQsMCwwLDAsMi43NSwyOC43NCwyMC4xOSwyMC4xOSwwLDAsMCw3LjgxLDRWNDYuOTRBMTIuMTcsMTIuMTcsMCwwLDEsMzk3LjI4LDQ1LjI1Wm0tMTM3LjYyLDE1M2gtLjA5bDAsOGExMi40MywxMi40MywwLDAsMSwxMi40NywxMi4zN2w4LDBBMjAuNDQsMjAuNDQsMCwwLDAsMjU5LjY2LDE5OC4yWk05NywyMTAuMzlhMTIuNDEsMTIuNDEsMCwwLDEtMjAuNDUsMTAuMzgsMTIuMjgsMTIuMjgsMCwwLDEtNC4zLTguNDdsLTgsLjYyYTIwLjQ0LDIwLjQ0LDAsMCwwLDIwLjM0LDE4Ljg0cS44LDAsMS41OS0uMDZBMjAuNDMsMjAuNDMsMCwwLDAsMTA1LDIwOS43N1pNMjI3LjY5LDQyLjA4bDYuNjIsNC41LDIyLTMyLjMzLTYuNjItNC41Wk0zNi43NSwxNTQuNjcsOC4xNSwxMjgsMi43LDEzMy44NGwyOC41OSwyNi42OFpNMzU5LjI4LDI1OGw1LjQ4LDUuODMsMjguNTEtMjYuNzctNS40Ny01LjgzWk0zMTAuMzMsMTE1LjMzYTEzLDEzLDAsMSwxLTEzLTEzQTEzLDEzLDAsMCwxLDMxMC4zMywxMTUuMzNabS04LDBhNSw1LDAsMSwwLTUsNUE1LDUsMCwwLDAsMzAyLjMzLDExNS4zM1pNMzgsMjY4LjYyYTEzLDEzLDAsMSwxLTEzLTEzQTEzLDEzLDAsMCwxLDM4LDI2OC42MlptLTgsMGE1LDUsMCwxLDAtNSw1QTUsNSwwLDAsMCwzMCwyNjguNjJabTE2NS40NS00My40N2E5LDksMCwxLDAsOSw5QTksOSwwLDAsMCwxOTUuNDcsMjI1LjE1Wk0zNjUuMTQsNTcuNDhhOSw5LDAsMSwwLTksOUE5LDksMCwwLDAsMzY1LjE0LDU3LjQ4Wk0xNzIuODMsMTY0LjI2YTYuMzYsNi4zNiwwLDEsMC02LjM2LDYuMzZBNi4zNyw2LjM3LDAsMCwwLDE3Mi44MywxNjQuMjZabTE3Niw2LjczYTQuNjksNC42OSwwLDEsMCw0LjY4LDQuNjlBNC42OSw0LjY5LDAsMCwwLDM0OC44LDE3MVpNMjYzLjE1LDI4Ny4zMmE0LjY4LDQuNjgsMCwxLDAsNC42OCw0LjY4QTQuNjcsNC42NywwLDAsMCwyNjMuMTUsMjg3LjMyWk03Ny40Nyw5Ni43M2E5LDksMCwxLDAtOS05QTksOSwwLDAsMCw3Ny40Nyw5Ni43M1ptMjQuNjMsMzMuNjktNy4xNiwxNy4wOUwxMTIsMTU0LjY4QTE4LjU0LDE4LjU0LDAsMCwwLDEwMi4xLDEzMC40MlpNMjE3LDEyOS4xbDE4LTQuMzctNC4zNy0xOEExOC41MiwxOC41MiwwLDAsMCwyMTcsMTI5LjFaTTg4Ljc2LDBINzQuMDdsNi41MSw3LjNaTTY4LjI1LDI5My40Niw3NC4wNywzMDBIODguNzZsNS42NS01QTE4LjU0LDE4LjU0LDAsMCwwLDY4LjI1LDI5My40NloiLz48L3N2Zz4=");
}
.section--workshop > .section__pattern {
background-image: url("data:image/svg+xml;base64,PHN2ZyAgZmlsbD0icmdiYSgwLDAsMCwwLjAyNSkiIGhlaWdodD0iNjRweCIgd2lkdGg9IjY0cHgiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMzIsMCwwLDMyVjBabTAsNjRMNjQsMzJWMEwwLDY0WiIvPjwvc3ZnPg==");
}
.section--download > .section__pattern {
background-image: url("data:image/svg+xml;base64,PHN2ZyAgZmlsbD0icmdiYSgwLDAsMCwwLjAyNSkiIGhlaWdodD0iNzJweCIgd2lkdGg9IjcycHgiIHZpZXdCb3g9IjAgMCA3MiA3MiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cG9seWdvbiBwb2ludHM9IjQwIDI0IDMyIDI0IDMyIDMyIDI0IDMyIDI0IDQwIDMyIDQwIDMyIDQ4IDQwIDQ4IDQwIDQwIDQ4IDQwIDQ4IDMyIDQwIDMyIDQwIDI0Ii8+PC9zdmc+");
}
/* Section dividers — Divi triangles, 50px, #ffffff, extracted as-is (§3.2).
#engage renders them scale(1,1); #educate mirrors them scale(-1,1). */
.divider { position: absolute; left: 0; width: 100%; height: 50px; z-index: 1; pointer-events: none; background-size: 100% 50px; }
.divider--top {
top: 0;
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSI1MHB4IiB2aWV3Qm94PSIwIDAgMTI4MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTEyODAgMTQwVjBIMGwxMjgwIDE0MHoiLz48L2c+PC9zdmc+");
}
.divider--bottom {
bottom: 0;
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSI1MHB4IiB2aWV3Qm94PSIwIDAgMTI4MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTAgMHYxNDBoMTI4MEwwIDB6Ii8+PC9nPjwvc3ZnPg==");
}
.section--educate .divider { transform: scale(-1, 1); }
.section > .row { position: relative; z-index: 2; }
/* ------------------------------------------------------------ galleries -- */
.gallery { display: grid; margin: 0; padding: 0; list-style: none; }
.gallery li { margin: 0; }
/* The box is 400:284 in every gallery (Divi sets it from the img's width and
height attributes). The live site fills that box with object-fit: fill,
which squashes 16:9 screenshots and square creature renders alike. Daniel
asked for that distortion fixed, so images are cropped to the box instead
of stretched and keep their true proportions. */
.gallery__link {
display: block; position: relative; line-height: 0; overflow: hidden;
aspect-ratio: 400 / 284;
}
.gallery__link img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Creature cards are the exception. A centre crop clips real artwork on 11 of
the 20 credited creations (Gnax -11%, TV-man loses his feet), and because
these renders are 77-89% transparent, containing them shows no letterbox
bars against the white section. Nothing is cropped and nothing is squashed. */
.gallery--creatures .gallery__link img { object-fit: contain; }
/* Gallery A — BUILD / PLAY / PAINT. 3 items, 337x239 at 1440. */
.gallery--bpp { grid-template-columns: repeat(3, 1fr); gap: 3.2%; margin: 27px 0 34px; }
.gallery--bpp .gallery__link { border-radius: 15px; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3); }
/* Gallery B — 13 items, 4 across, 246x174 at 1440, paginated 4 per page. */
.gallery--create { grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 0; }
.gallery--create .gallery__link { box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.3); }
/* Share — 20 creatures, 8 visible, 4 across x 2 rows, 225x182. */
.creatures { position: relative; }
.gallery--creatures { grid-template-columns: repeat(4, 1fr); gap: 60px 60px; margin-top: 54px; }
.creatures__btn {
position: absolute;
top: calc(50% + 27px);
transform: translateY(-50%);
width: 44px; height: 64px;
display: flex; align-items: center; justify-content: center;
border: 0; border-radius: 3px;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
color: var(--text); font-size: 28px; line-height: 1; cursor: pointer;
}
.creatures__btn:hover { color: var(--accent-text); }
.creatures__btn--prev { left: -22px; }
.creatures__btn--next { right: -22px; }
.gallery--creatures figure { margin: 0; }
.gallery--creatures figcaption {
margin-top: 10px;
font-size: 12px;
font-weight: 500;
line-height: 12px;
color: var(--text);
text-align: center;
}
/* Pagination — matches the live control exactly: Prev 1 2 3 4 Next (§3.6). */
.pagination {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 12px;
width: 100%;
margin: 33px 0 0;
padding: 25px 0;
border-top: 1px solid #e2e2e2;
list-style: none;
}
.pagination button {
border: 0; background: transparent; cursor: pointer;
font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--text);
padding: 0 6px; line-height: 23px;
}
.pagination button[aria-current="true"] { color: var(--accent-text); }
.pagination button:disabled { opacity: 0.35; cursor: default; }
/* -------------------------------------------------------------- engage -- */
/* §3.7 — 72px/600/#0c71c3 numbers, 18px/500/#555 labels. */
.stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
margin: 27px 0 0;
padding: 0;
list-style: none;
text-align: center;
}
.stats__value {
display: block;
height: 72px;
margin-bottom: 20px;
font-size: 72px;
font-weight: 600;
line-height: 72px;
color: var(--accent-strong);
}
.stats__label {
display: block;
height: 28px;
margin: 0;
font-size: 18px;
font-weight: 500;
line-height: 28px;
color: var(--text);
}
/* --------------------------------------------------------------- share -- */
.share__more { display: flex; justify-content: center; margin: 54px 0 0; }
/* ------------------------------------------------------------- educate -- */
.educate__price s { color: var(--text-secondary); }
/* Education seat picker (§7). */
.seats { margin: 30px 0 0; text-align: center; }
.seats__field { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.seats__field label { font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.seats__control { display: flex; align-items: center; gap: 8px; }
.seats__input {
width: 96px; height: 44px; padding: 6px 10px;
border: 2px solid var(--accent-text); border-radius: 3px;
background: var(--white);
font-family: var(--font-body); font-size: 20px; font-weight: 500;
color: var(--text); text-align: center;
}
/* Created by JS, so they are never present-but-dead with scripting off. */
.seats__step {
width: 44px; height: 44px;
border: 2px solid var(--accent-text); border-radius: 3px;
background: transparent; color: var(--accent-text);
font-family: var(--font-body); font-size: 24px; line-height: 1; cursor: pointer;
}
.seats__step:hover:not(:disabled) { background: var(--accent-text); color: var(--white); }
.seats__step:disabled { opacity: 0.35; cursor: default; }
.seats__total { margin: 16px 0 0; font-size: 18px; font-weight: 500; color: var(--text); }
.seats__actions { display: flex; justify-content: center; margin: 20px 0 0; }
.seats__error { margin: 12px 0 0; color: #b3261e; font-weight: 500; }
.seats [data-education-submit][aria-disabled="true"] { opacity: 0.6; cursor: default; }
/* ------------------------------------------------------------- support -- */
.support__placeholder { margin-top: 30px; text-align: center; color: var(--text); }
/* ------------------------------------------------------------ download -- */
.downloads {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 60px;
align-items: center;
margin: 0;
padding: 27px 0; /* Divi row padding, measured */
list-style: none;
}
/* These are Divi image modules 4-6: 15px radius and a 2px/10px shadow. */
.downloads a {
display: block;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);
transition: transform 300ms ease;
}
.downloads a:hover, .downloads a:focus-visible { transform: scale(1.05); }
.downloads img { display: block; width: 100%; height: auto; aspect-ratio: 950 / 296; }
/* -------------------------------------------------------------- footer -- */
/* Measured across all four widths: the social row is a fixed 275px wide and
centred, three columns with the icon at each column's left edge. */
.footer-social {
background: var(--near-black);
padding: 27px 0;
position: relative; z-index: 10;
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.3);
}
.footer-social .row { width: 275px; max-width: none; }
.footer-social ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14.5px;
justify-items: start;
margin: 0; padding: 0; list-style: none;
}
.footer-social a { display: block; transition: transform 300ms ease; }
.footer-social a:hover, .footer-social a:focus-visible { transform: scale(1.1); }
.footer-social img { display: block; width: 64px; height: 64px; }
.footer-links { background: var(--black); padding: 54px 0; }
/* This band uses a 60% row, not the 80%/1080px content row — measured 864px
wide at 1440, four 180px columns with 48px gutters and 27px of row padding. */
.footer-links .row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 48px;
width: 60%;
max-width: none;
padding: 27px 0;
}
/* Measured: 20px / 500 / #333 / line-height 20px / padding-bottom 10px. Yes,
#333 on black is what the live site ships — see the note in the summary. */
.footer-links h2 {
margin: 0;
padding-bottom: 10px;
font-size: 20px;
font-weight: 500;
line-height: 20px;
/* The live site sets #333 here, which is 1.66:1 against the black band —
the headings are effectively invisible. Reproducing that faithfully would
be reproducing a defect, so these use the footer's own light grey. */
color: var(--on-dark);
}
.footer-links ul { margin: 0; padding: 0; list-style: none; }
.footer-links li + li { margin-top: 0; }
.footer-links a { font-size: 14px; line-height: 23.8px; color: var(--footer-link); }
.footer-links a:hover { color: var(--white); }
.footer-links__rating { justify-self: end; }
.footer-links__rating img { display: block; width: 106px; height: 150px; }
/* The legal band uses the same 60% row, and its text is left-aligned inside
it — not centred, which is easy to assume and wrong. */
.footer-legal { background: var(--near-black); padding: 27px 0; }
.footer-legal .row { width: 60%; max-width: none; }
.footer-legal p { margin: 0; font-size: 14px; line-height: 23.8px; color: var(--footer-link); text-align: left; }
/* ------------------------------------------------------------- lightbox -- */
/* A closed