/* ============================================================================
footer.css — SITE-WIDE
Linked from Site Settings → Custom Code → Head code. The Global Footer is a
component on all 20 pages, so EVERY RULE HERE LANDS ON ALL OF THEM AT ONCE.
Rewritten whole at S253 after four patch commits. The earlier versions were
correct CSS aimed at a surface nobody had read: every fault in this file's
history was a value WEBFLOW ALREADY SET that this file did not know about.
▶▶ THE STANDING RULE, PAID FOR SIX TIMES IN ONE SESSION: ON A SURFACE THE
DESIGNER ALREADY STYLES, READ THE COMPUTED VALUES BEFORE WRITING THE RULE.
Structure alone is not enough — display, flex, order, text-align and margin
were every one of them owned by something else.
⚠⚠ THE SEVEN WEBFLOW VALUES THIS FILE EXISTS TO OVERRIDE, ALL MEASURED LIVE.
Remove any one of these rules and the matching fault returns:
.footer-brand flex: 1 1 0% → brand and links split the width evenly
(621px against 473px for all three
columns on a 1120 container)
.footer-brand flex-direction: column
→ children order by `order`, all sat at
0, so they fell back to DOM order and
the social row rendered ABOVE the phrase
.footer-columns flex: 1 1 0% → the same starvation from the other side
.footer-column display: flex → a ROW, so links laid out side by side
and squashed to 136px each
.footer-heading display:none @767→ the group headings vanished on phones
.footer-link text-align:center + margin-bottom
→ a centred list, and the margin stacked
on top of a 41.6px line-height
.footer-logo margin-top: 60px → dead space above the wordmark
⚠⚠⚠ EVERY SELECTOR IS NAMESPACED UNDER .footer-* OR .instagram-preview-ribbon.
Nothing here can reach /signup, /dashboard, /browse or /admin/grading. Check
that before adding a rule — a bare class name in a site-wide file is what
caused the S228 outage.
⚠ NO SCRIPT HALF, DELIBERATELY. header.css's behaviour lives in a separate
Footer-code field and the two halves came apart once. The wordmark's turn is
a CSS animation, so there is nothing to strand.
⚠ NO var() TOKENS. --section-gap and friends are defined in home.css, which
only /old-home loads; a var() here would resolve to nothing on 19 pages.
Values are literal on purpose. DO NOT "TIDY" THEM INTO TOKENS.
============================================================================ */
/* ---- THE BAND -------------------------------------------------------------
60/24 is the footer convention rather than this page's 44 rhythm, knowingly. */
.footer-section {
background-color: #EDECE0;
padding: 60px 0 24px;
}
/* THE SPINE — 60 / 40 / 20, the same text edge every section on /old-home uses.
On the other 19 pages it simply reads as sane gutters. */
.footer-section .footer-container {
max-width: 1240px;
margin: 0 auto;
padding: 0 60px;
}
/* ---- THE ROW --------------------------------------------------------------
Brand left, three link columns right. HER RULING off the live render: the
column version put the logo left, the phrase and socials centred and the
links below — three alignments in one footer, with ~200px of dead space
between the brand and the columns. */
.footer-section .footer-main {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 40px;
}
/* flex IS PINNED, NOT INHERITED. Webflow's `1 1 0%` here makes the brand and the
links split the row evenly; 32% is the share, stated. */
.footer-section .footer-brand {
flex: 0 0 32%;
width: auto;
text-align: left;
margin-bottom: 0;
/* THE PERSPECTIVE BELONGS ON THE PARENT. Without it a rotateY has no depth and
the wordmark squashes horizontally, which reads as a glitch, not a turn. */
perspective: 1600px;
}
/* ⚠⚠⚠ .footer-brand IS A WEBFLOW FLEX COLUMN, so these three order by `order`.
All compute 0 by default and fall back to DOM order, where the social row sits
BEFORE the phrase. STATE THE SEQUENCE — never rely on the markup here. */
.footer-section .footer-logo { order: 1; }
.footer-section .footer-tagline { order: 2; }
.footer-section .footer-social { order: 3; }
/* ---- THE WORDMARK ---------------------------------------------------------
⚠ IT IS AN ![]()
, NOT TEXT — so this is a width, never a font-size, and the
turn has no font dependency. It renders constrained by its own aspect ratio,
which is why an over-generous max-width appears to do nothing. Cap it.
⚠ margin-top:0 OVERRIDES A WEBFLOW 60px that pushed it down inside its block. */
.footer-section .footer-logo {
display: inline-block;
width: min(230px, 100%);
height: auto;
margin-top: 0;
animation: ks-footer-mark-turn 16s linear infinite;
}
@keyframes ks-footer-mark-turn {
from { transform: rotateY(0deg); }
to { transform: rotateY(360deg); }
}
/* BANKED, NOT LIVE — the resting version. Point animation-name at this and it
turns once every 11 seconds instead of never stopping. HER CHOICE WAS
CONTINUOUS, and the named cost is that a full rotateY leaves the wordmark
MIRROR-REVERSED for half of every cycle: 8 seconds out of 16. */
@keyframes ks-footer-mark-rest {
0%, 78% { transform: rotateY(0deg); }
100% { transform: rotateY(360deg); }
}
/* ⚠⚠ MOTION IS ADDED, NEVER USED TO HIDE. With no animation the wordmark is
fully visible and still, so reduced motion, an old browser or a stylesheet
that never arrives all end in the same safe place. Her S224 rule. */
@media (prefers-reduced-motion: reduce) {
.footer-section .footer-logo { animation: none; }
}
/* ---- THE PHRASE AND THE SOCIAL LINK --------------------------------------- */
.footer-section .footer-tagline {
font-family: "Instrument Serif", Georgia, serif;
/* 400 IS THE ONLY WEIGHT THIS FAMILY SHIPS. Anything heavier is a fake. */
font-weight: 400;
font-style: italic;
font-size: 19px;
line-height: 1.35;
color: #1E1A19;
max-width: 30ch;
/* NO auto MARGINS — they centred this inside a left-aligned column. */
margin: 12px 0 16px;
}
.footer-section .footer-social {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 16px;
margin-top: 4px;
}
/* ---- THE LINK COLUMNS ----------------------------------------------------- */
.footer-section .footer-columns {
flex: 1 1 auto;
width: auto;
display: flex;
align-items: flex-start;
gap: 32px;
}
/* ⚠⚠⚠ display:block IS LOAD-BEARING. Webflow has this as a flex container with
no direction set, i.e. a ROW — links side by side, squashed to 136px, and
"Browse The Closet" breaking onto two lines. The links are plain stacked
blocks; nothing here needs flex at all. */
.footer-section .footer-column {
display: block;
flex: 1 1 0;
min-width: 0;
}
/* ⚠⚠ GREEN IS MEASURED, NOT PICKED. On this cream her amber #EDA920 reads 1.9
and is unusable for text; green #309359 reads 3.25 — the same value she
knowingly accepted for the how-it-works header at S236. It is the page's own
eyebrow treatment reused rather than a new one invented.
⚠ display:block OVERRIDES A DESIGNER HIDE AT ≤767 that removed the group
headings on phones and left eighteen links as one undifferentiated list. Set
at every width so a future hide cannot silently take the groups away again. */
.footer-section .footer-heading {
display: block;
font-family: Quicksand, sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #309359;
margin: 0 0 8px;
}
/* ⚠⚠ TWO CLASSES so it beats the `All Links` TAG selector, which styles every
on all 20 pages and which this project reads and never edits.
⚠ 16px AND ~44px OF VERTICAL ROOM PER LINK is the documented tap-target
floor, applied at every width because there is no reason for desktop to be
worse. LINE-HEIGHT IS THE TAP TARGET — do not trade it for a shorter footer.
⚠ text-align AND margin-bottom BOTH OVERRIDE WEBFLOW: the links compute
centred on mobile, and carry a margin (20px there, 8 on desktop) ON TOP of a
41.6px line-height, which double-spaced the entire list. */
.footer-section .footer-link,
.footer-section a.footer-link {
display: block;
font-family: Quicksand, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 2.6;
color: #1E1A19;
text-align: left;
margin-bottom: 0;
text-decoration: none;
}
.footer-section .footer-link:hover {
color: #E54F25;
}
.footer-section .footer-link:focus-visible {
outline: 2px solid #E54F25;
outline-offset: 3px;
border-radius: 2px;
}
/* ---- THE JOIN BUTTON ------------------------------------------------------
⚠ THIS ELEMENT DOES NOT EXIST IN THE MARKUP. The rule is here so that adding
a Link Block classed footer-join needs no second commit; until then it matches
nothing and paints nothing, which is the safe direction.
⚠ Her header already carries a sticky Join on every page, so this would be the
second one on screen — that is why it is optional. */
.footer-section .footer-join,
.footer-section a.footer-join {
display: inline-block;
background-color: #E54F25;
color: #FFFFFF;
font-family: Quicksand, sans-serif;
font-weight: 500;
font-size: 16px;
padding: 13px 28px;
border-radius: 50px;
text-decoration: none;
margin-bottom: 18px;
}
.footer-section .footer-join:hover {
background-color: #B23D22;
}
/* ---- THE BOTTOM ROW -------------------------------------------------------
⚠ #75736E reads 4.0 on this cream — under the 4.5 bar, and the exact value she
ruled for the email footers at S158 for the same reason. Knowingly. It was
previously so light it was unreadable in a screenshot. */
.footer-section .footer-bottom {
border-top: 1px solid #C9C7BC;
margin-top: 44px;
padding-top: 20px;
text-align: center;
}
.footer-section .footer-copyright,
.footer-section a.footer-copyright {
font-family: Quicksand, sans-serif;
font-size: 13px;
line-height: 1.9;
color: #75736E;
text-decoration: none;
}
/* ---- THE RIBBON SEAM ------------------------------------------------------
⚠⚠⚠ THE ONE RULE HERE THAT IS NOT ABOUT THE FOOTER'S CONTENTS, and it lives in
this file rather than home.css because the seam sits between a section and the
GLOBAL footer — home.css is page-linked to /old-home only.
THE FAULT: the embed reserves 22px of real flow height with a transparent
background, so a 22px strip of whatever is behind it sits between the two
sections. That was the pale sliver hunted across three commits; setting the
body colour made it invisible rather than absent.
⚠⚠ height:0 AND NOT display:none — the ribbon inside must still render and
still hang half its own height below. overflow-y:visible is required or a
zero-height box clips its own child, and overflow-x:clip contains the band's
deliberate 6% bleed, which otherwise drags the page sideways.
⚠ The class exists only on /old-home, so this can match nowhere else. */
.w-embed:has(> .instagram-preview-ribbon) {
height: 0;
overflow-x: clip;
overflow-y: visible;
}
/* ⚠⚠⚠ THE 60px GAP ABOVE THE FOOTER — MEASURED, NOT DERIVED. With the embed
correctly collapsed to zero, the Instagram section still ended at 1366 and the
footer still began at 1426: SIXTY PIXELS OF NOTHING between two sections that
should butt together, showing the body's background through the join.
⚠⚠ IT IS INVISIBLE ON DESKTOP AND VISIBLE ON HER PHONE, AND BOTH ARE TRUE.
Body and footer both compute #EDECE0, so on a Mac the strip is the same colour
as its neighbours and cannot be seen. iOS renders one of those blocks on its
own compositing layer — there is a marquee and a turning wordmark in the tree —
and two identical hex values on different layers come out a shade apart across
a hard edge. THE SHADE IS THE PHONE. THE SEAM IS REAL, and closing it removes
both.
▶ THE LESSON: "I can only see it on my phone" DID NOT MEAN THE PHONE WAS
WRONG. It meant the phone was the only instrument sensitive enough to show a
gap that the desktop was hiding behind a colour match.
⚠⚠ BOTH SIDES ARE ZEROED BECAUSE ADJACENT SIBLING MARGINS COLLAPSE — the 60
could be the footer's margin-top or the section's margin-bottom, and the
collapsed result is identical either way. Setting one and guessing wrong
leaves the gap and looks like the rule did nothing.
⚠ margin-top:0 ON THE FOOTER IS SITE-WIDE AND SAFE: a footer should sit flush
against whatever precedes it, and its own 60px top padding carries the air.
⚠ The Instagram rule can only ever match /old-home; that class exists nowhere
else. */
.footer-section {
margin-top: 0;
}
.instagram-preview-section {
margin-bottom: 0;
}
/* ============================================================================
TABLET
============================================================================ */
@media screen and (max-width: 991px) {
.footer-section .footer-container {
padding: 0 40px;
}
.footer-section .footer-main {
gap: 28px;
}
.footer-section .footer-brand {
flex: 0 0 28%;
}
.footer-section .footer-logo {
width: min(190px, 100%);
}
.footer-section .footer-columns {
gap: 24px;
}
}
/* ============================================================================
PHONE — the row becomes a column and the three groups stack, one at a time.
⚠ NOT two columns and NOT accordions. Two columns makes you read across;
accordions are the documented pattern for footers with forty links across six
groups, and this has eighteen across three, one of which holds two items.
Both were mocked and rejected.
============================================================================ */
@media screen and (max-width: 767px) {
/* 28px, NOT 44 — the footer's own top padding plus the brand's spacing was
landing the wordmark ~97px below the section's top edge, which reads as an
empty band of a different colour. IT IS NOT A SECOND CREAM: body and footer
both compute #EDECE0, measured. */
.footer-section {
padding: 28px 0 24px;
}
.footer-section .footer-container {
padding: 0 20px;
}
.footer-section .footer-main {
flex-direction: column;
gap: 0;
}
.footer-section .footer-brand {
flex: 0 0 auto;
width: 100%;
margin-bottom: 34px;
}
.footer-section .footer-logo {
width: min(210px, 70%);
}
.footer-section .footer-tagline {
font-size: 18px;
margin: 10px 0 18px;
}
/* Links stay LEFT aligned even in one column — a centred list reads as a menu,
and a footer is a directory you scan. */
.footer-section .footer-columns {
flex-direction: column;
gap: 26px;
}
.footer-section .footer-column {
flex: 0 0 auto;
width: 100%;
}
.footer-section .footer-bottom {
margin-top: 32px;
}
}
/* ⚠⚠ WEBFLOW HAS FOUR BREAKPOINTS AND THIS FILE SPEAKS AT THREE. Below 479 its
own rules run unopposed unless something here says otherwise. Nothing is set
there deliberately — the phone block already stacks everything to full width
and there is no layout left to break. If a value ever misbehaves under 479,
this is the block that does not exist yet. */