/* ========================================================================= Societal Socks — the public website. Staged at /work-in-progress-site/. Nothing here is shared with the CRM: app.css is an admin design system (dense, grey, information-first) and this is a shop window. They are deliberately separate stylesheets. THE BRAND, TAKEN FROM societalsocks.com RATHER THAN INVENTED (task P155-#25). The live site was loaded and measured on 10 Sep 2026. Everything in the :root block below is a value read off it, not a preference: * Type is BLACK. rgb(0,0,0) on white, rgb(255,255,255) on black. There is no slate blue anywhere on the live site; the slate-blue palette the first pass invented is gone, variables and all. * The one accent is #ab96ff, the periwinkle the live site puts behind "Discover More", "Our Work", "Get Started" and "Send". It is measured from rgb(171,150,255). It is a BACKGROUND ONLY — black on it is 8.5:1, but it is 2.0:1 on white, so it never carries text of its own. * Sora 700 with negative tracking is the display face: the live site sets its 8,242 figure in sora/700/135px/-2.7px and its section headings in sora/700/56-59px/-1.18px. Those ratios are reproduced here. * Space Grotesk carries the live site's buttons, steps and labels (space grotesk/700/24-26px). * Montserrat is the third face in the live site's font set and is the workhorse here: every paragraph, every nav item, every caption. FLATNESS IS A DECISION, NOT AN OVERSIGHT — WITH ONE MEASURED EXCEPTION. There is no texture overlay, no border-radius and no drop shadow in this file, and every section change is made with flat black or flat white and with space, the way the live site does it. THE EXCEPTION IS THE OPENING, and it is the live site's own (task P155-#62, Toby: "add in original colour gradient background for landing page"). The top of societalsocks.com is a six-colour mesh gradient, not white; this file said otherwise for eleven days because the first pass measured the site's BANDS and not its TOP. The six colours and their six positions are transcribed from the live page's computed style in the "#opening" block below. It is the only gradient here that is decoration rather than a mask, and it exists because it is on the real site. ========================================================================= */ /* THE TOKENS MOVED. The :root block that used to sit here — the measured black, the periwinkle, the three faces, --wrap — plus the box-sizing reset are now in ../brand.css, which this page links BEFORE this file. Task P155-#31 gave the customer's reorder page the same design language, and a second copy of these values would have been a second thing to keep in step. Nothing about them changed; they are the same lines in a different file. Every rule below still reads them as variables exactly as it did. */ body { margin: 0; /* Belt and braces against a wide child: nothing on this page may make the document scroll sideways on a phone. Every marquee is inside its own overflow:hidden track, but a single mis-measured element should not be able to shift the whole page. */ overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: var(--ink); } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; } h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; /* the live site's -2.7px on 135px = -0.02em */ margin: 0; } /* The one label style on the site. Space Grotesk, because that is what the live site sets its short bold statements in. */ .eyebrow { font: 700 12px/1 var(--alt); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); margin: 0 0 18px; } /* ---- BUTTONS ------------------------------------------------------------ Rectangles. The live site's buttons are rectangles with black type on the periwinkle; the pill shape that was here before is a template default and is not on societalsocks.com anywhere. */ .btn { display: inline-flex; align-items: center; padding: 14px 28px; border-radius: 0; font: 700 14px/1 var(--alt); letter-spacing: .02em; text-decoration: none; background: var(--accent); color: #000; border: 2px solid var(--accent); transition: background .15s, border-color .15s, color .15s; } .btn:hover { background: #000; border-color: #000; color: var(--on-dark); } .btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); } .btn.ghost:hover { background: var(--ink); color: var(--on-dark); } /* ========================================================================= 1. THE STICKY TOP BAR — THE MASTHEAD, AND NOTHING ELSE NOW. IT USED TO BE TICKER + NAV IN ONE STICKY CONTAINER. Task P155-#74 moved the ticker to the foot of the page (Toby, 22 Sep 2026: "move the ticker tape to the bottom of the website (not fixed) but just as a ribbon above the footer"), so #topbar wraps one child and the bar is the masthead's height. The wrapper is kept rather than collapsed because it is what carries the stickiness, and nav-site.js's outside-click handler asks it whether a click landed in the bar. It does not COVER anything. A sticky element keeps its space in normal flow, so the page begins below the bar rather than under it. The only thing that could land beneath it is an in-page anchor jump, which is what the scroll-margin-top rule further down is for. THE RIBBON'S OWN STYLES ARE AT THE END OF SECTION 9, beside the footer it now sits on top of. Only the keyframes stayed here, because #opening's wall and the logo wall both live in this half of the file and a reader looking for "what animates on this page" should find them together. ========================================================================= */ #topbar { position: sticky; top: 0; z-index: 60; } @keyframes ticker-run { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---- 2. THE NAV -------------------------------------------------------- Flat black, like the live site's header. No blur, no translucency. SIX ITEMS AND A BUTTON. Task P155-#56 cut the bar from nine: four of the nine were anchors into sections of the home page, two of those present only when the database had something to put in the section they pointed at. The anchors moved to an in-page bar, which task P155-#65 has since removed from the home page altogether at Toby's request; the category pages are one menu rather than siblings, and that menu gained Businesses in #65, which is what makes it six. The markup is written by tools/apply-header.js into every page; this styles it. THE BREAKPOINT MOVED FROM 860px TO 900px. Five items, a logo half as large again and a button no longer fit on an 834px tablet, and the old rule below 860px did not fold the bar into a menu — it deleted every link from it and left a phone with no route into the site at all. ------------------------------------------------------------------------ */ #masthead { background: var(--ink); position: relative; } /* MORE BLACK AROUND THE LOGO. Task P155-#68. Toby, 22 Sep 2026: "Make the black boarder around the societal socks logo at the top thicker." WHICH "BLACK BORDER" THIS IS. The wordmark is an SVG with no stroke in it and no frame drawn around it anywhere; the only black around it is THIS BAR, which is `background: var(--ink)` on #masthead and is exactly what a reader sees as a black border around the logo. So the bar is what got thicker. The alternative reading - a stroke inside the artwork - would have meant editing ../logo.svg, which is the shared company mark used by the CRM, the favicon and the invoice templates, and a heavier outline there would have changed the logo everywhere for a request about one bar on one site. IT IS PADDING, NOT A SMALLER LOGO. 12px -> 26px of vertical padding, so +28px of black in total and the mark is untouched at 52px. Measured on the rendered page: the masthead goes 76px -> 104px on a desktop and the whole sticky bar (ticker + masthead) 107px -> 135px. THE NAV DOES NOT WRAP BECAUSE OF IT. This changes the row's HEIGHT only; its width is the same logo, the same links and the same gaps it was before. What DID change the width is the seventh nav item this task adds ("Gallery"), and that is paid for at the fold breakpoint further down rather than here. AND THE OPENING STILL FILLS THE SCREEN. #opening's min-height subtracts --topbar-h, which nav-site.js MEASURES off the real bar on load, on resize and from a ResizeObserver on the bar itself - so a taller bar is subtracted the moment it is painted, with no number in this file to keep in step. The two --topbar-fallback constants below, which cover only the frame before that script runs, have been re-measured to match. */ .masthead-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 26px 28px; max-width: var(--wrap); margin: 0 auto; } /* THE WORDMARK. 20px before this task, which is what "the logo appears too small across our website" was about: at 20px the mark was shorter than the nav text beside it was tall, so the bar read as a row of links that happened to have a picture at one end. 30px is half as large again and now leads the bar. The vertical padding came down from 16px to 12px to pay for most of it: measured on the deployed page the masthead goes 55px -> 59px on a desktop and 64px -> 51.5px below the breakpoint. The 4px it does gain on a desktop is not the logo, it is the call to action finally getting its own padding (see .nav-cta below); the phone, where 4px would matter, gets 12.5px back. The file carries no fill attribute, so it paints black; inverting it gives the white mark the live site puts on its black header. --------------------------------------------------------------------------- AND 30px WAS STILL NOT ENOUGH. Task P155-#62. Toby, 21 Sep 2026: "Make the main societal socks logo larger." It is now 52px on a desktop, which is 1.73x the 30px above and 2.6x the 20px this started at. For scale: the live societalsocks.com sets its wordmark at about 90px on a header with nothing else in it but a burger. This bar carries six nav items and a button, so it cannot go there — but it can stop being the smallest thing in its own row. THE STEPS DOWN ARE ABOUT THE NAV WRAPPING, NOT ABOUT TASTE. The row is logo + gap + nav, inside a 1180px measure, and the nav does not collapse to the burger until 900px. A 52px mark is ~340px wide, so between 900px and ~1060px the three would not fit on one line and the nav would break onto a second — which is the one thing the brief rules out. The mark therefore steps 52 -> 48 -> 42 on the way down to the burger breakpoint, where it stops mattering because the nav is no longer beside it and it can go back up to 36px. Every step was measured against the real rendered nav width, not estimated; see the note on .masthead-nav's gap immediately below. THE BAR GREW WITH IT and that is intended, not a side effect: 59px -> 76px on a desktop. A wordmark cannot lead a bar it is crammed into. */ .brandmark { display: flex; flex: 0 0 auto; } .brandmark img { height: 52px; width: auto; filter: invert(1); display: block; } @media (max-width: 1180px) { .brandmark img { height: 48px; } } @media (max-width: 1060px) { .brandmark img { height: 40px; } } /* THE GAPS CAME IN FROM 26px TO 20px to buy the wordmark its extra width (task P155-#62). Six nav items and a button at 26px spent 156px on air alone; at 20px they spend 120px, which is most of one step of logo height. SEVEN items since task P155-#68, so 20px now buys 140px of air; the single step down to 12px below 1080px is immediately BELOW these two declarations, and the 15px step that used to sit there has gone rather than fighting it - two overlapping gap rules in opposite directions is how a bar ends up wider at 1050px than it is at 1070px. */ .masthead-nav { display: flex; align-items: center; gap: 20px; } .nav-top { display: flex; align-items: center; gap: 20px; list-style: none; margin: 0; padding: 0; } /* THE LAST 40px BEFORE THE BURGER. The bar carries SEVEN items now, not six - task P155-#68 added Gallery - and the fold has moved up to 1040px to pay for it (see the note on the fold breakpoint below). So the narrowest the desktop bar is ever asked to be is 1041px, and this is the step that makes it fit: 40px of mark rather than 48, and 12px of gap rather than 20. It has to come AFTER the two declarations above, not before them, or the unconditional 20px simply wins on source order and the step does nothing. */ @media (max-width: 1080px) { .masthead-nav { gap: 12px; } .nav-top { gap: 12px; } } .nav-item { position: relative; } /* One rule for a top-level link and for the disclosure button, so the two are indistinguishable to a reader: same face, same size, same underline. */ .nav-link { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 var(--body); letter-spacing: .03em; color: var(--on-dark); text-decoration: none; /* THE LINE IS THICKER. Task P155-#82. Toby, 23 Sep 2026: "please make the line 1.5X the size it currently is". It is a 3px rule now. THE RESTING BORDER IS 3px OF TRANSPARENT, NOT NONE, and that is the whole of why nothing moves when you hover. The border is part of this element's box, so a border that appeared only on hover would make the item 3px taller at the moment the pointer arrived and shunt the row. Reserving the space at the FINAL weight means hover changes a colour and not a layout. Measured on the deployed bar: the topbar is 104px and every nav item's top is identical with and without a hover. */ padding: 4px 0; border: 0; border-bottom: 3px solid transparent; background: none; cursor: pointer; white-space: nowrap; } /* THE UNDERLINE BELONGS TO THE LINK, NOT TO THE PAGE. Task P155-#82, which corrects task P155-#81. Toby, 23 Sep 2026: "I want the underline colour to be for each page. So no matter what page i'm on if i hover over how it works it should be that shade of green." WHAT #81 GOT WRONG. It read --hue-on-dark, which resolves off the `body.hue-*` class, so every underline in the bar was the SAME colour and that colour CHANGED as the visitor moved around the site: all seven items were ochre on the FAQ page and all seven were olive on How it works. Toby's sentence asks for the opposite — a bar of seven FIXED colours, where "How it works" is the olive green from everywhere, including from the Blog. THE MAPPING IS KEYED ON THE DESTINATION, WHICH THE MARKUP ALREADY CARRIES. Every item's `href` is its destination and every page writes the same flat relative form of it (verified across all 17 pages), so an attribute selector is a per-link mapping that needs no new class, no data- attribute and no JavaScript. Each link declares its own --nav-hue; the two state rules at the bottom read that one token and nothing else, so they no longer know what page they are on. THE VALUES ARE #81'S OWN TABLE, NOT A NEW ONE. Each destination takes the "on dark" value of the hue that destination's actually carries — the hue at full strength where it clears 3:1 on this black bar, and the hue's lighter --hue-tint where it does not (olive 2.99:1 and navy 1.32:1 are the two that do not). Measured on #000000 with the WCAG formula, as in section 12, and re-measured on the deployed page for task P155-#82: nav item destination page body hue value used on bar How it works how-it-works.html hue-olive --c-olive-tint 11.41:1 FAQs faq.html hue-ochre --c-ochre 9.98:1 Our work our-work.html hue-corn --c-corn 11.49:1 Gallery gallery.html hue-navy --c-navy-tint 8.96:1 Blog blog.html hue-peri --c-peri 8.54:1 Private shop shop.html hue-peach --c-peach 10.99:1 Socks for (no single page) — --on-dark 21.00:1 "SOCKS FOR" IS THE ONE ITEM WITH NO COLOUR, because it is a disclosure button with no href and therefore no destination to take a colour from. It falls through to the base --nav-hue below, which is the white the bar's type is already set in — a neutral underline rather than a borrowed hue. Its five CHILDREN do each have a destination, and they are coloured the same way further down, on the submenu's own ground. HOVER AND CURRENT ARE THE SAME COLOUR, as they were under #81, and now that is not merely deliberate but automatic: on the page a link points at, "the link's colour" and "the page's colour" are the same value, so the current-page underline is that page's own colour with no second rule to write. #81's separate --hue-driven current-page rule is gone rather than left behind. THE TEXT IS UNTOUCHED. Every .nav-link is --on-dark at 21:1 exactly as it was; these rules move the border colour and nothing else. */ .nav-link { --nav-hue: var(--on-dark); } .nav-link:is([href="how-it-works.html"], [href="/how-it-works"]) { --nav-hue: var(--c-olive-tint); } .nav-link:is([href="faq.html"], [href="/faq"]) { --nav-hue: var(--c-ochre); } .nav-link:is([href="our-work.html"], [href="/our-work"]) { --nav-hue: var(--c-corn); } .nav-link:is([href="gallery.html"], [href="/gallery"]) { --nav-hue: var(--c-navy-tint); } .nav-link:is([href="blog.html"], [href="/blog"]) { --nav-hue: var(--c-peri); } .nav-link:is([href="shop.html"], [href="/shop"]) { --nav-hue: var(--c-peach); } .nav-link:hover { border-bottom-color: var(--nav-hue); } .nav-link[aria-current="page"], .nav-link.is-current { border-bottom-color: var(--nav-hue); } /* THE PRIVATE SHOP IS NO LONGER DIMMED. Task P155-#68. Toby, 22 Sep 2026: "Make the 'private shop' button the same colour as the other ones (socks for, how it works, FAQs, Our work, Blog)." `.nav-quiet` set that one link in --on-dark-mute (#b3b3b3) rather than --on-dark (#ffffff), on the reasoning that it sells nothing to a visitor who arrived from a search. Toby has looked at the result and overruled it, so the RULE is gone and not merely neutralised, and `quiet: true` is gone from tools/apply-header.js with it. There is now no selector anywhere that can make one item in this bar render dimmer than its siblings: every .nav-link takes --on-dark from the rule above, on every page, generated by one template. */ .nav-caret { width: 7px; height: 7px; flex: 0 0 auto; margin-left: 1px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; } .nav-has-menu.is-open .nav-caret { transform: translateY(1px) rotate(-135deg); } /* ---- the "Socks for" menu ---------------------------------------------- CLOSED IS display:none, NOT the `hidden` attribute and not opacity. A menu left in the layer tree with opacity:0 is still tabbable, which is how a keyboard ends up focused on something nobody can see. And it is opened by a class the script sets, never by :hover — see nav-site.js. Before nav-site.js has run, .nav-js is absent and the block below does not apply: the submenu is then a plain visible list, so a visitor with JavaScript off is never shown a button that does nothing. */ .nav-sub { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; } .nav-js .nav-sub { display: none; position: absolute; top: calc(100% + 11px); left: -18px; z-index: 5; min-width: 288px; padding: 8px; background: var(--ink); border: 1px solid var(--dark-line); flex-direction: column; gap: 0; } .nav-js .nav-has-menu.is-open .nav-sub { display: flex; } .nav-sub a { display: block; padding: 11px 12px; text-decoration: none; color: var(--on-dark); border-bottom: 0; } /* THE FIVE SUBMENU ROWS CARRY THEIR OWN DESTINATIONS' COLOURS TOO, on the same per-link principle as the bar above and for the same reason: "Socks for" has no colour, but Schools, Clubs, Universities, Fundraising and Businesses each lead to a page that does. Task P155-#82. THE INDICATOR HERE IS A LEFT EDGE, NOT AN UNDERLINE, because a submenu row is a full-width block with a two-line label and has no underline to take. Under #81 only the CURRENT row carried it and hover was a bare background change, so hovering a submenu row showed no colour at all. Hover now takes the same coloured edge as current, which is what makes these five items answer Toby's sentence the way the seven above it do. THE GROUND HERE IS #1a1a1a, NOT THE BAR'S BLACK, so the ratios are measured against that and not reused from the table above. All five clear the 3:1 floor for a non-text indicator with room to spare: submenu row destination page value on #1a1a1a Schools custom-socks-for-schools.html olive-tint 9.46:1 Clubs custom-socks-for-clubs.html --c-corn 9.52:1 Universities custom-socks-for-universities.html --c-peri 7.08:1 Fundraising custom-socks-for-fundraising.html --c-peach 9.11:1 Businesses custom-socks-for-businesses.html --c-sage 7.73:1 (Below the fold the submenu drops its own background and sits on the panel's var(--ink) #000000 instead, where the same five run 11.41, 11.49, 8.54, 10.99 and 9.33:1. #1a1a1a is the LIGHTER of the two grounds and so the harder one, which is why it is the ground the floor is cleared against and the one tabulated above.) THE EDGE IS 3px, UP FROM 2px — exactly the 1.5x Toby asked for, applied here as well so the bar's line and the submenu's marker stay the same weight as each other. A box-shadow is drawn inside the border box and takes no space, so unlike the underline above this one cannot shift anything whatever its width. */ .nav-sub a { --nav-hue: var(--on-dark); } .nav-sub a:is([href="custom-socks-for-schools.html"], [href="/custom-socks-for-schools"]) { --nav-hue: var(--c-olive-tint); } .nav-sub a:is([href="custom-socks-for-clubs.html"], [href="/custom-socks-for-clubs"]) { --nav-hue: var(--c-corn); } .nav-sub a:is([href="custom-socks-for-universities.html"], [href="/custom-socks-for-universities"]) { --nav-hue: var(--c-peri); } .nav-sub a:is([href="custom-socks-for-fundraising.html"], [href="/custom-socks-for-fundraising"]) { --nav-hue: var(--c-peach); } .nav-sub a:is([href="custom-socks-for-businesses.html"], [href="/custom-socks-for-businesses"]) { --nav-hue: var(--c-sage); } .nav-sub a:hover, .nav-sub a:focus-visible { background: #1a1a1a; box-shadow: inset 3px 0 0 var(--nav-hue); } .nav-sub a[aria-current="page"] { background: #1a1a1a; box-shadow: inset 3px 0 0 var(--nav-hue); } .nav-sub-label { display: block; font: 700 13px/1.2 var(--body); letter-spacing: .02em; } .nav-sub-note { display: block; margin-top: 3px; font: 400 11.5px/1.35 var(--body); color: var(--on-dark-mute); } /* THE ONE CALL TO ACTION, and the only thing in the bar that is not a plain link. It was a cramped chip before — `.masthead-nav a`'s 3px padding beat `.btn`'s on specificity — so it is given its own padding here rather than losing the argument by accident. */ .masthead-nav .btn.nav-cta { flex: 0 0 auto; font: 700 13px/1 var(--alt); letter-spacing: .02em; color: #000; padding: 9px 18px; border: 2px solid var(--accent); } .masthead-nav .btn.nav-cta:hover { background: var(--on-dark); border-color: var(--on-dark); color: #000; } /* Focus must be visible on black. */ #masthead a:focus-visible, #masthead button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ---- the phone button --------------------------------------------------- */ .nav-burger { display: none; align-items: center; gap: 9px; background: none; border: 1px solid var(--dark-line); cursor: pointer; color: var(--on-dark); padding: 8px 12px; font: 700 11.5px/1 var(--alt); letter-spacing: .14em; text-transform: uppercase; } .burger-bars, .burger-bars::before, .burger-bars::after { display: block; width: 16px; height: 2px; background: currentColor; content: ""; position: relative; } .burger-bars::before { top: -5px; } .burger-bars::after { top: 3px; } .nav-open .nav-burger { border-color: var(--on-dark); } .nav-open .burger-bars { background: transparent; } .nav-open .burger-bars::before { top: 0; transform: rotate(45deg); } .nav-open .burger-bars::after { top: -2px; transform: rotate(-45deg); } /* ---- below the breakpoint ----------------------------------------------- THE FOLD MOVED FROM 900px TO 1040px. Task P155-#68. The bar gained a SEVENTH top-level item - Gallery - and seven items plus a 40px wordmark plus the call to action do not fit on one line between 900px and about 1030px: the nav broke onto a second row, which is the one outcome the brief rules out. The answer is to fold into the Menu button sooner rather than to shrink the mark further or to drop an item, because below the fold the panel carries all seven at full size and nothing is lost. A tablet at 900-1040px now gets the phone's menu, which is the same menu it already got at 899px. THE PADDING HERE IS 22px, NOT THE DESKTOP'S 26px. Toby asked for more black around the logo; below the fold the bar is the mark and a button with no nav competing for the row, so it can afford the black without the bar eating a third of a phone screen. 11px -> 22px is still double what it was. */ @media (max-width: 1040px) { .masthead-in { padding: 22px 20px; gap: 12px; } /* 26px -> 36px, task P155-#62. Below this width the nav is a burger and is no longer competing with the mark for the row, so the constraint that held it to 42px just above has gone and the only limit is the width of the phone: 36px of height is ~235px of width, which still leaves room for the Menu button on a 360px screen. */ .brandmark img { height: 36px; } .nav-burger { display: inline-flex; } /* THE PANEL. Absolutely positioned under the bar rather than in flow, so opening it does not make the sticky container a screen tall. */ .masthead-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 55; flex-direction: column; align-items: stretch; gap: 0; padding: 6px 20px 22px; background: var(--ink); border-top: 1px solid var(--dark-line); max-height: calc(100vh - 100%); overflow-y: auto; } #masthead.nav-open .masthead-nav { display: flex; } .nav-top { flex-direction: column; align-items: stretch; gap: 0; } /* THE BORDER IN THIS PANEL IS A ROW SEPARATOR, NOT THE SELECTION INDICATOR, so it is NOT taking the 1.5x of task P155-#82 and it is NOT taking the per-link colours either. Every row in the stacked panel carries this rule whether or not it is hovered or current — that is what makes it a divider — and the hover rule immediately below deliberately holds it at --dark-line so hovering does not light a divider up. Taking it to 3px would thicken fourteen hairlines between menu rows, which is not the line Toby was looking at. It stays 1px of --dark-line. These two declarations come AFTER the desktop rules in source order and inside a media query of equal specificity, so they are what actually applies below 1040px: the 3px transparent border and the --nav-hue colour above are both overridden here, by design. The panel's own current-page mark is the colour rule further down. */ .nav-link { padding: 14px 0; border-bottom: 1px solid var(--dark-line); font-size: 15px; } .nav-link:hover { border-bottom-color: var(--dark-line); } /* THE PHONE PANEL MARKS THE CURRENT PAGE ON THE TEXT, not on a border: every row in this panel already carries a --dark-line rule under it as a divider, so an underline here would be a divider that changed colour rather than a mark. It followed --accent, which is the one periwinkle task P155-#81 is removing from the bar's state colours — leaving it would have put a periwinkle label and an ochre divider on the same row of the FAQ page's menu. It reads --hue-on-dark with the rest of them. The panel's ground is var(--ink), the same #000000 as the bar, so the numbers are the bar's numbers: 8.54:1 at worst, against the 4.5:1 this one needs as text. Every OTHER row in the panel stays --on-dark. THIS ONE KEEPS --hue-on-dark, AND TASK P155-#82 LEFT IT ALONE ON PURPOSE. It is the one rule in the nav that is genuinely ABOUT THE PAGE rather than about the link: it answers "which page am I on" in a collapsed panel, so the page's own hue is the correct source for it. Three things follow, and all three are why it was not converted to --nav-hue: * It colours TEXT, not a border. It is not an underline, so the per-link mapping above does not contradict it, and the brief for #82 rules the nav's text colours out of scope explicitly. * On every top-level destination the two tokens RESOLVE TO THE SAME VALUE anyway — on faq.html the page hue is ochre and the FAQs link's --nav-hue is ochre — so converting it would change no rendered colour on any page in the bar. * On the five segment pages the current item is the "Socks for" DISCLOSURE, which has no destination and so has no --nav-hue of its own; driving this from --nav-hue would render it white, identical to every other row, and the phone panel would silently lose its current-page mark on those five pages. */ /* THE SEPARATOR STAYS A SEPARATOR ON THE CURRENT ROW TOO. Task P155-#82. The desktop current-page rule sets border-bottom-color: var(--nav-hue) and it is not otherwise overridden in here, so without this declaration the current row's hairline took a SELECTION colour in a panel whose border is explicitly not the selection indicator. On the five segment pages that was visibly wrong: the current item there is the "Socks for" disclosure, which has no destination and so falls back to --nav-hue's white, painting one white hairline among six --dark-line ones. Holding it at --dark-line makes all seven rows separate identically and leaves the current-page mark to the text colour on the same line, which is what the comment above says this panel does. */ .nav-link[aria-current="page"], .nav-link.is-current { color: var(--hue-on-dark); border-bottom-color: var(--dark-line); } .nav-disclosure { width: 100%; justify-content: space-between; } /* The submenu opens in flow inside the panel — a second floating layer on a phone would be a menu on top of a menu. */ .nav-js .nav-sub { position: static; min-width: 0; border: 0; padding: 4px 0 10px 14px; background: none; box-shadow: none; } .nav-sub a { padding: 10px 10px; } .masthead-nav .btn.nav-cta { margin-top: 18px; justify-content: center; padding: 14px 18px; font-size: 13px; } } /* AN ANCHOR JUMP MUST NOT LAND UNDER THE STICKY BAR. --topbar-h is written by nav-site.js from the bar's measured height on load, on resize and whenever the bar changes shape, because that height is not a constant: the ticker is on the home page only, it appears only once the database has something for it to say, and the bar folds at 900px. The two values below are the fallback for the moment before the script runs, and they are the heights actually measured on the built page: 90px with the ticker up on a desktop, 82px folded. The pair they replace — 108px and 92px — were a guess: 18px too generous on a laptop and, on a phone, 2.5px SHORT of the 94.5px bar, which put the target heading under the bar it was supposed to clear. RE-MEASURED FOR THE BIGGER WORDMARK, task P155-#62. The mark went 30px -> 52px and took the bar with it: 90px -> 107px with the ticker up on a desktop, 82px -> 89px folded. Both numbers below are read off the rendered page at 1440px and at 390px, not adjusted by arithmetic — the bar is padding plus the taller of the mark and the nav, and which of those two wins changes at the breakpoint. */ /* RE-MEASURED WITH THE TICKER GONE FROM THE TOP, task P155-#74. The bar is now the masthead alone: the ticker's 30.5px has left it, and these two fallbacks come down by exactly that. Read off the rendered page, not adjusted by arithmetic: 1440 x 900 #masthead 104px (was #topbar 134.5px, incl. 30.5px ticker) 390 x 844 #masthead 80px (was #topbar 110.5px) nav-site.js measures #masthead and publishes those same numbers as --topbar-h. These matter for exactly one frame - the one before that script runs - but a fallback that is 31px too GENEROUS is a 31px white gap under the opening on first paint, and one that is short is 31px of the next section showing, which is the bug task P155-#66 existed to fix. (Before P155-#74 these were 135px and 111px, re-measured by P155-#68 when the masthead's vertical padding went 12px -> 26px.) */ :root { --topbar-fallback: 104px; } section[id] { scroll-margin-top: calc(var(--topbar-h, var(--topbar-fallback)) + 14px); } @media (max-width: 1040px) { :root { --topbar-fallback: 80px; } } /* ========================================================================= 3. THE OPENING — the sock counter, as the live site opens. societalsocks.com opens on the words "Socks Knitted:" and the figure 8,242 set in Sora 700 at 135px. Not a hero headline with the number tucked into a card beside it: the NUMBER IS THE FIRST THING. That composition is the one reproduced here, at the same ratio of label to figure. --------------------------------------------------------------------------- THE GRADIENT IS BACK, AND IT IS THE REAL ONE. Task P155-#62. Toby, 21 Sep 2026: "Add in original colour gradient background for landing page." It had been flattened to white by task P155-#25, whose note further up this file still says "there is no gradient, no radial wash" — that was a correct reading of the live site's SECTIONS and a wrong one of its TOP, because the thing it measured was the band behind the counter and the band under it, both of which are mesh gradients and neither of which is flat. MEASURED, NOT CHOSEN. societalsocks.com was opened on 21 Sep 2026 and the computed `background-image` of the element behind the opening was read straight out of the browser. It is six overlapping radial gradients, and these are its six colours and its six positions, transcribed: rgb( 77, 96, 1) dark olive at 4% 7% (top left) rgb(214, 222, 72) acid yellow at 47% 12% (top centre) rgb(250, 170, 99) peach at 93% 10% (top right) rgb(151, 180, 157) sage at 4% 93% (bottom left) rgb(147, 195, 255) cornflower at 51% 90% (bottom centre) rgb(201, 198, 255) periwinkle at 95% 90% (bottom right) A seventh stop in the original is a black radial at dead centre whose two stops are both at 100%; it contributes nothing visible and is not copied. The periwinkle in the bottom right corner is #c9c6ff, one step off the --accent the buttons already use — which is why the live page looks like one thing rather than a gradient with a purple button sitting on it. WHY IT IS ON ::before AND NOT ON THE SECTION. The gradient needs to be BEHIND the text at reduced strength, and `opacity` on the section itself would fade the counter with it. A pseudo-element takes the opacity on its own; `z-index: 0` on it and `position: relative` on the children put every word in front of it at full black. THE TINT IS GONE AND THE GRADIENT IS AT FULL STRENGTH. Task P155-#65. Toby, 21 Sep 2026: "Remove the tint/shadow over the gradient background on the landing page." WHAT THE TINT ACTUALLY WAS. Not a scrim, not a shadow, not a second layer over the top: `opacity: .55` on this pseudo-element, which painted the gradient itself at 55% over white and is what made it look washed out. It is now `opacity: 1`. There is no overlay on this band of any kind - no ::after (its computed `content` is `none`), no rgba wash, no `filter`, no `background-blend-mode`, and the section's own background is transparent. The six radial stops below are the whole of what is painted here. AND THE CONTRAST WAS FIXED IN THE TYPE, NOT BY PUTTING THE TINT BACK. Removing it genuinely did cost contrast, so both halves were measured off the rendered page at a 1919px viewport rather than reasoned about: the copy was hidden, the bare gradient sampled at every second pixel inside each text box, and the worst pixel under any glyph taken. The BLACK type was never the problem. The counter label, the 150px figure and the h1 measured 6.71:1, 6.74:1 and 7.57:1 - all past AA, and past AAA for large text. The old note over this block feared black numerals at "3:1" on the dark olive corner; that corner is at 3.7% / 6.9%, which is off the left edge of where the copy column actually sits, so the type never crosses it. THE GREY WAS. #opening-sub and .opening-note were --ink-mute, rgb(92,92,92), and measured 2.62:1 and 3.11:1 against the untinted gradient - both under the 4.5:1 that body text needs. Both are now --ink, which takes the same two worst pixels to 8.23:1 and 9.77:1. That is the whole fix, it is in the type, and --ink-mute is unchanged everywhere else on the site. The worst pixel under any glyph in the opening is now 6.71:1. ONE BAND, NOT TWO. The live Wix page puts a second gradient strip below the hero as a separator. That is a Wix section divider; here the opening simply ends and "Socks we have actually made" begins on white, which is the same effect with one fewer element. ========================================================================= */ /* --------------------------------------------------------------------------- THE OPENING FILLS THE SCREEN, AND THE NEXT SECTION STARTS BELOW THE FOLD. Task P155-#66. Toby, 22 Sep 2026: "Make sure the landing page gradient background fills screen, so there you cant see the top of the next section below." It did not. Measured on the deployed page before this change: at 1440x900 the opening's bottom edge was at y=746, so 154px of the strip below it was on screen at first paint; at 390x844 it ended at y=574 and showed 270px of it. The band was a fixed 92px+84px of padding around whatever the copy happened to be, which is a height that has nothing to do with the screen. WHAT IT SUBTRACTS, AND WHY IT IS NOT A GUESS. #topbar is `position: sticky`, and a sticky element KEEPS ITS SPACE IN NORMAL FLOW — so the opening does not start at the top of the viewport, it starts below the ticker and the masthead. Filling the rest of the screen therefore means the viewport MINUS that bar, and the bar's height is not a constant: the ticker only appears once the database has something for it to say, and the whole thing folds at 900px. --topbar-h is the bar's REAL measured height, written onto the root by nav-site.js on load, on resize and from a ResizeObserver on the bar itself. --topbar-fallback is the value for the frame before that script has run and is itself a measurement (107px desktop / 89px folded), not an estimate. This reads the measurement rather than assuming a number. svh, WITH vh UNDERNEATH IT. The first declaration is the fallback for a browser that does not know the new units; the second wins wherever it is understood. `svh` is the SMALL viewport height — the screen as it is when the mobile browser's toolbars are SHOWN, which is exactly the state at first load, and it is the one unit of the three that cannot leave a strip of the next section peeking out from under a retracted toolbar. `dvh` would resize the band mid-scroll as the toolbar slides away, which is visible as a jolt; `lvh` would overflow the screen on first paint, which is the bug this is fixing. THE +1px IS A ROUNDING GUARD, not padding. nav-site.js rounds the measured height to a whole pixel, so on a bar that is genuinely 106.5px tall it publishes 107px and this calculation subtracts half a pixel too much — enough to leave a hairline of the section below showing along the bottom edge. 1px covers the worst case in the safe direction; the cost is that the opening can be up to 1.5px taller than the space available, which nobody can see and which pushes the next section further out of view rather than into it. min-height, NEVER height, AND THE CENTRING IS OVERFLOW-SAFE. If the copy is ever taller than the screen — a short laptop, a phone on its side, a visitor who has scaled the text up — a fixed `height` would crop the buttons or the MOQ line off the bottom with no way to reach them. `min-height` lets the band grow past the viewport and the page simply scrolls. The centring is done with `margin-block: auto` on the child rather than `align-items: center`, because an auto margin resolves to ZERO when free space runs out, whereas centre alignment keeps centring and pushes the top of the content above the top of the band, where it cannot be scrolled back to. Same look when it fits, no unreachable copy when it does not. --------------------------------------------------------------------------- */ /* ========================================================================= THE SOCK STRIPE ARTWORK, REBUILT IN CSS. Task P155-#71. Toby, 22 Sep 2026, attaching a picture of eight knitted sock stripe patterns: "Please put this as the background instead of the current gradient one." THE ARTWORK IS IN THE REPO AND IS NOT WHAT IS SERVED. His file is committed at images/sock-stripes-reference.png and is the source of truth for what these patterns ARE - the colours below and the stripe weights below were both measured off it, pixel row by pixel row, not eyeballed. It is not used as an image anywhere, and the reason is its size: 672x447. The opening fills the viewport, which on a desktop is 1920 wide and routinely 2560, so serving that file means upscaling it about 3x and every stripe edge arrives soft. The first thing a visitor sees cannot be a blurred bitmap. THESE ARE FLAT HORIZONTAL STRIPES, WHICH IS THE ONE THING CSS REPRODUCES EXACTLY. A repeating-linear-gradient with hard stops is resolution independent: it is rasterised at whatever the device's pixel density is, so it is as crisp on a 3x phone as on a 1x monitor, and it costs no bytes. HOW THE WEIGHTS WERE TAKEN. A script walked the centre column of each of the eight swatches in the reference and recorded every run of constant colour. That produced, for each pattern, its repeat PERIOD and the width of each band inside it - which is the part a two-colour approximation throws away. The eight are not eight versions of the same rhythm: navy/orange period 37 two 4-wide pinstripes 5 apart on a 24 ground sky/white period 47 a 9 white band on a 38 sky ground navy/gold period 61 a 14 gold band on a 47 indigo ground red/white period 58 29 and 29, even broad bands yellow/black period 98 49 and 49, the broadest pair in the set navy/red/white period 45 red 4, white 4, red 4, on a 33 midnight ground purple/white period 28 white 3, purple 7, white 3, purple 15 green/white period 45 a 16 white band on a 29 green ground ONE UNIT, --u, SCALES ALL EIGHT TOGETHER. Every number above is multiplied by --u, so the whole set keeps its relative rhythm at any size and a single declaration makes the wall finer or bolder. It is a LENGTH, not a factor, and it is deliberately a whole number of pixels at every breakpoint: a hard gradient stop that lands on a fractional pixel is the one way this technique can go soft, and integers avoid it. THEY ARE CLASSES, NOT A ONE-OFF BACKGROUND. The brief asks for them to be reusable, and they are: `.sock-stripe` plus one `.ss-*` modifier paints any element - a band, a rule, a card edge, a divider - with any of the eight. Nothing outside the opening uses one yet, and that is on purpose: task P155-#70 has just finished careful work on how colour is applied across the site and this task is not allowed to disturb it. ------------------------------------------------------------------------- */ :root { /* Sampled from images/sock-stripes-reference.png. Where Toby's brief named a hex and the sample differed by a shade, his hex is the one used - the artwork was supplied with those values and they are the ones he means. */ --ss-navy: #001e57; /* 1 ground */ --ss-orange: #d95000; /* 1 pinstripe */ --ss-sky: #00a3d7; /* 2 ground */ --ss-white: #ffffff; /* 2, 4, 6, 7, 8 */ --ss-indigo: #33418c; /* 3 ground */ --ss-gold: #e2aa00; /* 3 band */ --ss-red: #c81c23; /* 4 band, 6 pinstripe */ --ss-yellow: #fec700; /* 5 band */ --ss-black: #000000; /* 5 ground */ --ss-midnight: #120c3e; /* 6 ground */ --ss-purple: #5b0e77; /* 7 ground */ --ss-green: #4f7a28; /* 8 ground */ } .sock-stripe { --u: 2px; } /* 1. NAVY WITH FINE ORANGE PINSTRIPES. The one pattern in the set whose character is entirely in the GAP: two hairlines close together, then a wide run of navy. Rendered as two even stripes it stops being this pattern at all. */ .ss-navy-orange { background-color: var(--ss-navy); background-image: repeating-linear-gradient(to bottom, var(--ss-orange) 0 calc(var(--u) * 4), var(--ss-navy) calc(var(--u) * 4) calc(var(--u) * 9), var(--ss-orange) calc(var(--u) * 9) calc(var(--u) * 13), var(--ss-navy) calc(var(--u) * 13) calc(var(--u) * 37)); } /* 2. SKY BLUE WITH A NARROWER WHITE BAND. Not a 50/50 stripe: the white is about a quarter of the repeat, so the swatch reads as blue with white through it rather than as blue and white. */ .ss-sky-white { background-color: var(--ss-sky); background-image: repeating-linear-gradient(to bottom, var(--ss-white) 0 calc(var(--u) * 9), var(--ss-sky) calc(var(--u) * 9) calc(var(--u) * 47)); } /* 3. INDIGO WITH A GOLD BAND. Same shape as 2 at a larger scale - a 14 band on a 47 ground - which is why the two must not be collapsed into one rule with different colours. */ .ss-navy-gold { background-color: var(--ss-indigo); background-image: repeating-linear-gradient(to bottom, var(--ss-gold) 0 calc(var(--u) * 14), var(--ss-indigo) calc(var(--u) * 14) calc(var(--u) * 61)); } /* 4. RED AND WHITE, EVEN. The only true 50/50 in the set apart from 5. */ .ss-red-white { background-color: var(--ss-red); background-image: repeating-linear-gradient(to bottom, var(--ss-white) 0 calc(var(--u) * 29), var(--ss-red) calc(var(--u) * 29) calc(var(--u) * 58)); } /* 5. YELLOW AND BLACK, EVEN AND BROAD. Period 98 against the navy/orange's 37: nearly three times the band. This is the loudest swatch in the set and it is loud because of its SIZE, not its colour. */ .ss-yellow-black { background-color: var(--ss-yellow); background-image: repeating-linear-gradient(to bottom, var(--ss-black) 0 calc(var(--u) * 49), var(--ss-yellow) calc(var(--u) * 49) calc(var(--u) * 98)); } /* 6. MIDNIGHT WITH A RED-WHITE-RED TRIPLET. Three 4-wide lines touching, then 33 of ground. The triplet reading as one thick stripe is the failure mode; each of the three stays 4. */ .ss-navy-red-white { background-color: var(--ss-midnight); background-image: repeating-linear-gradient(to bottom, var(--ss-red) 0 calc(var(--u) * 4), var(--ss-white) calc(var(--u) * 4) calc(var(--u) * 8), var(--ss-red) calc(var(--u) * 8) calc(var(--u) * 12), var(--ss-midnight) calc(var(--u) * 12) calc(var(--u) * 45)); } /* 7. PURPLE WITH WHITE LINES AT TWO SPACINGS. The subtlest of the eight: the purple bands ALTERNATE 7 and 15, so the white lines are unevenly spaced and the swatch has a beat to it. A single even repeat loses that. */ .ss-purple-white { background-color: var(--ss-purple); background-image: repeating-linear-gradient(to bottom, var(--ss-white) 0 calc(var(--u) * 3), var(--ss-purple) calc(var(--u) * 3) calc(var(--u) * 10), var(--ss-white) calc(var(--u) * 10) calc(var(--u) * 13), var(--ss-purple) calc(var(--u) * 13) calc(var(--u) * 28)); } /* 8. GREEN WITH A WIDE WHITE BAND. 16 of white to 29 of green - much more white than 2 or 3 carry, which is what makes it the lightest swatch. */ .ss-green-white { background-color: var(--ss-green); background-image: repeating-linear-gradient(to bottom, var(--ss-white) 0 calc(var(--u) * 16), var(--ss-green) calc(var(--u) * 16) calc(var(--u) * 45)); } /* --------------------------------------------------------------------------- THE WALL: EIGHT SWATCHES IN A GRID, BEHIND THE OPENING. THE COMPOSITION IS THE ARTWORK'S OWN. Toby's picture is a GRID of eight swatches, four across and two down, and that is what this paints. The alternative - picking two or three and running them full width - would have been a different piece of design from the one he sent, and the grid is also the only arrangement that shows all eight patterns at a size where each one's rhythm is legible. A viewport is wider and shorter than his 672x447 file, so the cells come out squarer than his; the stripes inside them do not change shape with the cell, because they are sized in --u and not in percentages. IT REFLOWS RATHER THAN SQUASHING. Four columns down to 560px, two columns below it: at 390px a four-column grid gives 97px cells, which is narrower than one of Toby's swatches and reads as a barcode. Two columns at that width give 195px cells - almost exactly his 168 - so the phone sees the same artwork rearranged, not a compressed one. The reading order is unchanged either way: navy/orange, sky, navy/gold, red, then yellow/black, navy/red, purple, green. --u IS SET AGAINST THE CELL, NOT AGAINST THE SCREEN WIDTH, and the control that matters is HEIGHT, because the stripes run horizontally. On a 1080 or 1200 screen a cell is ~475-550 tall and --u: 2px puts 2.4 repeats of the broadest pattern in it, which is what the reference has. On a 650px laptop the cell is ~270 and the same 2px would show ONE band of yellow/black - a plain yellow rectangle, not a stripe - so --u drops to 1px there and the count comes back to 2.8. The phone gets 1px for the same reason. Both values are whole pixels, so every gradient stop lands on a pixel boundary and no edge is antialiased. IT IS PRESENTATIONAL AND CARRIES NO CONTENT. aria-hidden, no text inside it, pointer-events none, and no data-copy block anywhere in it, so copy-edit.js and copy.js are untouched by it. --------------------------------------------------------------------------- */ .stripe-wall { position: absolute; inset: 0; z-index: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); pointer-events: none; } .stripe-wall > * { --u: 2px; } @media (max-height: 760px) { .stripe-wall > * { --u: 1px; } } @media (max-width: 560px) { .stripe-wall { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); } .stripe-wall > * { --u: 1px; } } #opening { min-height: calc(100vh - var(--topbar-h, var(--topbar-fallback)) + 1px); min-height: calc(100svh - var(--topbar-h, var(--topbar-fallback)) + 1px); display: flex; flex-direction: column; padding: 48px 0; position: relative; isolation: isolate; /* the wash can never paint over the sticky bar */ overflow: hidden; } /* THE SIX-COLOUR GRADIENT THAT WAS HERE IS GONE. Task P155-#71. Toby, 22 Sep 2026, attaching the sock-stripe artwork: "Please put this as the background instead of the current gradient one." What stood here was `#opening::before`, six radial-gradient stops transcribed off the live societalsocks.com in September and painted over --paper. It has been deleted rather than overlaid, so there is no gradient left underneath the stripes to bleed through at the cell seams. The background of this section is now the `.stripe-wall` element in index.html and the eight `.ss-*` pattern classes above, and nothing else paints here. THE FIVE PALETTE COLOURS ARE UNAFFECTED BY THAT. The palette in section 12 was DERIVED from the gradient's stops back in P155-#61, but it does not read them - each of the five is a literal hex in its own custom property. Removing the gradient changes no value anywhere else on the site. */ /* IN FRONT OF THE WASH. Without this the two columns are painted in the same stacking context as ::before and the gradient lands on top of the numerals. `margin-block: auto` is the overflow-safe centring described in the note over #opening — left and right stay `auto` from the .wrap rule, so the column is still horizontally centred and still capped at --wrap. */ #opening > .wrap { position: relative; z-index: 1; margin-top: auto; margin-bottom: auto; } /* --------------------------------------------------------------------------- THE WHITE STRIPES, BEHIND THE COUNTER AND BEHIND THE MOQ LINE. Task P155-#66. Toby, 22 Sep 2026: "Put a white stripe behind the socks knitted count and to the MOQ 100 pairs on the initial landing page. Like the original website." WHAT THE ORIGINAL ACTUALLY DOES, read off societalsocks.com at 1440px on 22 Sep 2026 rather than remembered: its opening is a stack of FULL-BLEED HORIZONTAL BANDS that alternate gradient, white, gradient. A warm gradient strip runs edge to edge under the masthead; beneath it a WHITE band, also edge to edge, carries "Socks Knitted:" and the 8,242; beneath that a cool gradient strip, edge to edge again. The white is not a card, a panel or a rounded box sitting on the gradient — there is no corner radius, no border and no shadow anywhere on it, and it does not stop at the text column. It is a stripe the full width of the page that the type happens to sit on. SO THESE RUN THE FULL PAGE WIDTH, NOT JUST BEHIND THE TEXT BLOCK. That is the choice, and the original's own construction is the reason for it: a white rectangle that ended at the text column would read as a label stuck onto the gradient, which is the card treatment Toby has already had removed from this opening once. Running it edge to edge reads as the page being built in bands, which is what his site does. HOW THE FULL BLEED IS DONE FROM INSIDE A CENTRED COLUMN. The counter and the MOQ line both live inside `.wrap`, which is capped at --wrap and padded 28px. The stripe is a pseudo-element pinned to its own element's top and bottom and then pushed 100vw past it on BOTH sides. Stretching it outward from the element, rather than centring a 100vw box on the viewport, means it reaches both edges whatever the column's width or offset and does not depend on the copy being centred. #opening is `overflow: hidden` and body is `overflow-x: hidden`, so the excess is clipped and nothing can scroll sideways. z-index: -1 PUTS IT BETWEEN THE GRADIENT AND THE WORDS. `#opening > .wrap` is z-index 1 and so is a stacking context of its own; a negative child sits behind the text but still inside that context, which is above the gradient on #opening::before at z-index 0. Gradient, then stripe, then type. THE STRIPE IS PART OF THE COUNTER, NOT PART OF THE BAND. It is drawn BY #counter-block, so when site.js leaves that block `hidden` — which is the shipped state until site/counter holds a value — the stripe goes with it and the opening is gradient all the way down to the headline. A stripe painted by the section, or by a spacer element, would have left an empty white band across a page whose counter was switched off. CONTRAST. --paper is #ffffff and every glyph on both stripes is --ink, #000000: the counter label, the figure and the MOQ line all measure 21:1. AA wants 4.5:1 for body text and 3:1 for large, so the MOQ line at 11.5px clears the stricter bar with 16.5 points to spare. Nothing here is translucent — the stripe is flat opaque white, so the gradient underneath cannot drag the ratio down the way a tinted panel would. --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- ONE STRIPE, NOT THREE. Task P155-#68. Toby, 22 Sep 2026: "Make the white stripe one singular stripe not 3 separate ones." #66 gave the counter a white stripe and the MOQ line a second; #67 gave the headline block a third. Each of the three drew its OWN ::before, so what was on screen was three white bands with two strips of gradient cutting across between them. #67's note argued those gaps were the point - that they kept the opening reading as a gradient opening. Toby has looked at it and does not agree, and his reading is the one that decides. THERE IS NOW EXACTLY ONE ELEMENT THAT PAINTS A STRIPE, and it is the wrapper around all four things: `.opening-white`. The counter, the headline, the two buttons and the MOQ line are its children and sit on it; none of them paints anything itself any more. One band, edge to edge, no seams. THE FULL BLEED IS #66's, UNCHANGED - a pseudo-element pinned to its own element's top and bottom and pushed 100vw past it on BOTH sides, so it reaches both screen edges whatever the column's width or offset, with the excess clipped by #opening's `overflow: hidden`. Flat opaque white, no radius, no border, no shadow, and it does not stop at the text column: a white rectangle that ended at the copy would read as a card on the gradient, which is the treatment Toby has had removed from this opening once already. z-index: -1 PUTS IT BETWEEN THE GRADIENT AND THE WORDS. `#opening > .wrap` is z-index 1 and so is a stacking context of its own; a negative child sits behind the text but still inside that context, which is above the gradient on #opening::before at z-index 0. Gradient, then stripe, then type. IT RESIZES WHEN THE COUNTER IS HIDDEN, AND THAT IS THE WHOLE REASON THE STRIPE HANGS OFF A WRAPPER RATHER THAN OFF #opening. `hidden` on #counter-block is display:none, so the counter contributes no height and no margin; the wrapper is shorter by exactly the counter's box and the band closes up around the headline, the buttons and the MOQ line. A stripe drawn by the SECTION, or sized by a fixed height, would have left a white band with an empty top third - a hole - on the shipped state where site/counter has no value yet. The padding below is on the wrapper, not on the counter, for the same reason: padding that belonged to a display:none child would vanish with it and the headline would sit against the top edge of the white. CONTRAST. --paper is #ffffff. The counter label and the figure are --ink (#000000) at 21:1; the MOQ line is --ink at 21:1; the h1 is --c-peri-deep (#4d4473) at 8.79:1. AA wants 4.5:1 for body text and 3:1 for large, so the MOQ line at 11.5px clears the stricter bar with 16.5 points to spare and the headline clears it with 4.3. Nothing here is translucent - the stripe is flat opaque white, so the gradient underneath cannot drag any of those down the way a tinted panel would. --------------------------------------------------------------------------- */ .opening-white { position: relative; /* the stripe anchors to this box */ padding: 26px 0 22px; } /* THE STRIPE GETS TWO RULES. Task P155-#71. It used to sit on a soft six-colour gradient, where a bare white band was already the strongest thing on screen. It now sits on eight saturated knitted stripe patterns, and against those a plain white rectangle stops reading as a band that was PUT there and starts reading as a gap where the artwork failed to load. A 3px black rule along its top and bottom edge fixes that at the cost of nothing: it is the same move the artwork itself makes - every one of the eight swatches is bands separated by lines - so the white reads as one more stripe in the wall, the widest one, rather than as a hole in it. 5px is the weight the rest of the site already uses for a rule: the 56px mark over a section heading is 5px and so is the left edge of a category row, so the band is edged in the site's own furniture and not in a new one. THE RULES ARE INSIDE THE BAND, NOT ADDED TO IT. This element is positioned with top:0 and bottom:0 and no height, so its used height is fixed by those two offsets and the borders resolve INWARDS. The white band is therefore exactly as tall as it was, the type sits in exactly the same place, and nothing below the opening moved. STILL EXACTLY ONE WHITE STRIPE. This is the same single element P155-#68 reduced three stripes to; the counter, the headline, the buttons and the MOQ line are all still on it, and no other element on this page paints white. The rules are --ink, not paper, so they cannot be mistaken for a second band. CONTRAST IS UNCHANGED BY THIS: the ground is still flat opaque --paper with no transparency, so the stripes behind cannot reach any glyph. Measured on the rendered page - counter label and figure --ink 21.00:1, MOQ line --ink 21.00:1, headline --ss-purple #5b0e77 11.85:1. */ .opening-white::before { content: ""; position: absolute; top: 0; bottom: 0; left: -100vw; right: -100vw; /* past both edges, clipped by #opening */ background: var(--paper); border-top: 5px solid var(--ink); border-bottom: 5px solid var(--ink); z-index: -1; pointer-events: none; } /* Belt and braces for the hidden counter. `hidden` is display:none in every UA stylesheet already; stating it here means no later rule can give #counter-block a display and quietly put an empty gap back inside the band. */ #counter-block[hidden] { display: none; } .counter-label { font: 700 clamp(20px, 2.4vw, 34px)/1.1 var(--display); letter-spacing: -0.02em; color: var(--ink); margin: 0; } /* THE SPACING IS NOW INSIDE ONE BAND, NOT BETWEEN THREE. Task P155-#68. #66 and #67 had to keep each stripe's padding tight against its own type, because padding inside a stripe was visible white hanging off the end of it, and the GAPS between the three were separate margins again. With one band there is no such thing as a gap: the wrapper's 26/22 padding is the white above the counter and below the MOQ line, and the margins below are simply the space between one line of type and the next, measured on white. 28px BETWEEN THE COUNTER AND THE HEADLINE, not #67's 40px. 40 was the width of a gradient band that had to be unmistakably a band; there is no band to make legible any more, so the number is set against the TYPE - it is a little more than the headline's line height, which reads as a paragraph break rather than as a seam. */ #counter-block { padding: 0; margin: 0 0 28px; } .opening-band { padding: 0; } #counter-value { font-family: var(--display); font-weight: 700; font-size: clamp(76px, 13.5vw, 150px); line-height: .96; letter-spacing: -0.035em; margin: 4px 0 0; color: var(--ink); font-variant-numeric: tabular-nums; } /* THE HEADLINE IS PURPLE. Task P155-#68. Toby, 22 Sep 2026: "Change 'Socks for schools, clubs & organisations.' to purple." --c-peri-deep, #4d4473, AND NOT --c-peri. Both are the brand periwinkle and both are already in the palette, so no sixth colour is introduced either way, but only one of them can be read on this stripe: --c-peri #ab96ff on #ffffff = 2.46:1 --c-peri-deep #4d4473 on #ffffff = 8.79:1 WHICH THRESHOLD APPLIES, AND WHY IT DOES NOT ACTUALLY MATTER HERE. The h1 is Montserrat 700 at clamp(19px, 2.3vw, 27px) - 27px bold at 1440px, 19px bold at the small end. WCAG counts bold text at 14pt (18.66px) or more as LARGE, so this heading is large text at every width it is ever set at, and its threshold is the 3:1 one rather than 4.5:1. #ab96ff fails BOTH: at 2.46:1 it is under even the large-text bar, so there is no size at which the light shade would have been usable on white. #4d4473 clears the large-text bar with 5.8 points to spare and the stricter body bar with 4.3, so it is past AA on the reading a strict reviewer would take as well as on the correct one. The periwinkle at full strength is not lost from the page: it is still the Get Started button's background (black on it, 8.54:1), the ticker's dot and the accent under a nav link. It simply cannot be TYPE on white. */ /* AND IT IS NOW THE ARTWORK'S OWN PURPLE. Task P155-#71. Toby asked for this line in purple and it stays purple. What changed under it is the background: the periwinkle-deep #4d4473 was chosen to sit on a gradient built from the same five palette colours, and the opening is not built from those any more. Toby's sock-stripe artwork contains a purple of its own - #5b0e77, the ground of swatch 7 - and his brief for this task says in as many words that it may be used here if it reads better now the background has changed. It does, for two reasons and neither is taste. It is the deeper colour, so the headline gains contrast rather than losing it: --c-peri-deep #4d4473 on #ffffff = 8.79:1 (what it was) --ss-purple #5b0e77 on #ffffff = 11.85:1 (what it is) And it is a colour a visitor can SEE on the page a few centimetres away, in the purple/white swatch, so the one coloured line on the white band is picked out of the artwork behind it instead of being a sixth thing. WCAG: the h1 is Montserrat 700 at clamp(19px, 2.3vw, 27px), which is bold at 14pt or more at every width, so it is LARGE text and its bar is 3:1. At 11.85:1 it clears that by 8.85 and clears the stricter 4.5:1 body bar by 7.35, so it passes on either reading. NOTHING ELSE MOVED TO THIS COLOUR. --ss-purple is used on this one line and in the wall behind it. The five palette colours are untouched and no rule outside the opening reads it. */ #opening-statement { font: 700 clamp(19px, 2.3vw, 27px)/1.32 var(--body); letter-spacing: -0.01em; margin: 0; max-width: 20ch; color: var(--ss-purple); } .opening-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } /* Black on white, 21:1. The 14px of padding it used to carry was there to give its own stripe something to be; it has no stripe of its own any more, so the space above it is one margin and nothing else. */ .opening-note { margin: 30px 0 0; padding: 0; font: 700 11.5px/1 var(--alt); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); } @media (max-width: 860px) { #opening { padding: 36px 0; } } /* SHORT SCREENS: A LAPTOP AT 650px, A PHONE ON ITS SIDE. Task P155-#66. The opening has to fill the screen without its own copy outgrowing it, and the 150px figure is most of the height. These trim the padding and let the figure scale against the VIEWPORT instead of the text column, so the whole band — counter, headline, buttons and MOQ line — still fits above the fold on a short laptop rather than pushing the MOQ line under it. Nothing here changes the layout at a normal height; min-height still means a screenful that is genuinely too short just scrolls. */ @media (max-height: 780px) { #opening { padding: 28px 0; } #counter-value { font-size: clamp(56px, 12vh, 150px); } /* The band's own padding is the white above the counter and below the MOQ line; on a short screen it is the cheapest height on the page to spend, because losing it costs white rather than type. What it buys back is the figure staying legible: 12vh rather than 13.5vw on this branch. */ .opening-white { padding: 16px 0 14px; } #counter-block { margin-bottom: 18px; } .opening-actions { margin-top: 20px; } .opening-note { margin-top: 20px; } } /* ========================================================================= 4. SECTION FURNITURE Sections are separated by flat colour and by space. `.dark` is pure black and is the page's structural weight — the live site uses exactly this for "Why Socks?", the invitation and the contact block. ========================================================================= */ section.band { padding: 96px 0; } section.band.alt { background: var(--paper-alt); } section.band.dark { background: var(--ink); color: var(--on-dark); } section.band.dark h2, section.band.dark h3 { color: var(--on-dark); } section.band.dark p { color: var(--on-dark-mute); } section.band.dark .eyebrow { color: var(--accent); } section.band.dark a { color: var(--on-dark); } h2 { font-size: clamp(34px, 5.2vw, 58px); } /* The section heads are LEFT-ALIGNED and set to a measure, not centred over the full width. Centred everything was one of the things that made the old page read as a template. */ .band-head { max-width: 640px; margin-bottom: 46px; } .band-head p { color: var(--ink-mute); margin: 18px 0 0; font-size: 17px; } section.band.dark .band-head p { color: var(--on-dark-mute); } @media (max-width: 860px) { section.band { padding: 60px 0; } } /* ========================================================================= 5. OUR PROCESS — asymmetric on purpose. The live site sets its process as a narrow column of three bold lines with a picture beside it, not as three equal cards in a row. The three-up grid of rounded cards with numbered circles that used to be here is the single most generic thing a landing page can do, and it is gone. What replaces it is a 1.35 / 1 split: the steps on the left as a rule-separated list, and one flat black panel on the right carrying the one commercial fact the live site puts in that spot — MOQ 100 Pairs — and the button. ========================================================================= */ .process-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 64px; align-items: start; } .steps { border-top: 1px solid var(--line); } .step { display: grid; grid-template-columns: 46px 1fr; gap: 12px; padding: 26px 0; border-bottom: 1px solid var(--line); } /* A number set in the display face, not a badge inside a coloured circle. */ .step .n { font: 700 15px/1.35 var(--alt); letter-spacing: .1em; color: var(--ink-mute); } .step p { margin: 0; font: 700 clamp(17px, 1.8vw, 21px)/1.4 var(--alt); letter-spacing: -0.01em; color: var(--ink); } .moq { background: var(--ink); color: var(--on-dark); padding: 44px 38px 40px; } .moq .moq-fig { font: 700 clamp(40px, 5vw, 62px)/1 var(--display); letter-spacing: -0.03em; margin: 0; } .moq .moq-cap { font: 700 12px/1.4 var(--alt); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; } .moq p.moq-note { color: var(--on-dark-mute); font-size: 15px; margin: 16px 0 28px; } .moq .btn:hover { background: var(--on-dark); border-color: var(--on-dark); color: #000; } @media (max-width: 900px) { .process-grid { grid-template-columns: 1fr; gap: 40px; } } /* ========================================================================= 6. WHY SOCKS? — the black band, in the live site's own words. Two columns of running text, not three feature cards. ========================================================================= */ /* --------------------------------------------------------------------------- "WHY SOCKS?" IS A TWO-UP NOW. Task P155-#71. Toby, 22 Sep 2026: "put a picture next to why socks". THE COPY KEEPS ITS COLUMN, THE PICTURE TAKES THE OTHER. `.why-two-up` is a two-track grid: the text track is flexible with a 420px floor, the picture track is capped at 520px so the photograph never grows into the dominant half of a section that is fundamentally an argument in prose. `align-items: center` hangs the picture against the middle of the copy rather than the top of it, because the copy is the taller of the two at every width. `.why-cols` DROPS TO ONE COLUMN. It was `columns: 2` across a 900px measure, which gave two 420px columns. Inside a track that is now around 520px wide those two become 230px each - about 28 characters, which is a newspaper classified rather than body copy. One column at 520px is 62 characters, which is inside the 45-75 that is comfortable to read. No word was cut to achieve this and none needed to be; the section is taller than it was and that is the correct trade. BELOW 980px IT STACKS, COPY FIRST. The argument is the point of the section and the photograph supports it, so on a phone the reader meets the words first and the picture underneath. `.why-cols` stays at one column there too - it already did below 760px - so the stacked version is one continuous measure with a picture under it. THE BAND IS UNTOUCHED. `.band.deep` still paints it, the heading, the type colours, the 56px mark and the email rule are all exactly as P155-#70 left them. This block adds a grid and nothing else. */ .why-two-up { display: grid; grid-template-columns: minmax(420px, 1fr) minmax(0, 520px); gap: 56px; align-items: center; } /* --------------------------------------------------------------------------- PHOTOGRAPH SLOTS, PLURAL. Task P155-#75. Toby, 22 Sep 2026: "Add photo slots in next to the text in the 'why socks?' Section." P155-#71 put ONE picture in this column. This is the same column holding a DELIBERATE GROUP, and the shape of the group was chosen against the shape of the text rather than picked off a list: the copy beside it two paragraphs plus the email line, about 440px tall at the 520px desktop measure three in one column 3 x 260px + gaps = about 810px. That stops being a picture beside an argument and becomes a gallery with a caption, and it would have made the section nearly twice as tall as the words in it. a lead over a pair 260px + 14px + 169px = about 443px. The pictures start where the words start and finish where they finish, which is what makes it read as one block rather than as two things that happen to be level. WHAT EACH COUNT DOES, and `data-count` on the container is what selects it - set in the HTML for the shipped three and rewritten by site.js when Toby's list replaces them: 1 one photograph across the whole track, 2:1 2 two side by side, 3:2 each 3 a 2:1 lead across the track with two 3:2 under it <- the shipped case 4 a 2x2 grid, 3:2 each Four is the ceiling. A fifth picture in a 520px track is a thumbnail, and site.js stops reading the list at four rather than shrinking the grid. `object-fit: cover` AND NOT `contain`, which is the opposite of the choice the design gallery below makes, and the difference is what is in the frame. A design RENDER cropped is a design misrepresented - the crest is at the cuff and the cuff is the first thing cover throws away. A PHOTOGRAPH of an order is a scene, it survives a crop, and every photograph strip this site has ever had has used cover for that reason. The alternative here is a grid whose rows are different heights depending on what Toby uploaded, which is the ragged stack the arrangement above exists to avoid. THE BORDER IS UNCHANGED from #71: a hairline in the page's tint rather than a frame, because on black an unbordered photograph floats and a heavy border would be the highlighter effect P155-#70 spent a whole task removing. --------------------------------------------------------------------------- */ .why-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .why-figures[data-count="1"] { grid-template-columns: minmax(0, 1fr); } .why-figure { margin: 0; } .why-figure img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; /* A hairline in the page's tint rather than a frame: on black an unbordered photograph floats, and a heavy border would be the highlighter effect P155-#70 spent a whole task removing. */ border: 1px solid var(--hue-tint); } /* THE LEAD PHOTOGRAPH: the whole track, and 2:1 because that is the shape the three photographs in this repository are actually cut to, so it crops none of them. It exists at one picture and at three, and not at two or four - with two, a full-width lead would leave a single half-width picture stranded on the row under it, and with four the 2x2 is the point. */ .why-figures[data-count="1"] .why-figure:first-child, .why-figures[data-count="3"] .why-figure:first-child { grid-column: 1 / -1; } .why-figures[data-count="1"] .why-figure:first-child img, .why-figures[data-count="3"] .why-figure:first-child img { aspect-ratio: 2 / 1; } @media (max-width: 980px) { .why-two-up { grid-template-columns: 1fr; gap: 34px; } .why-figures { order: 2; } } /* ON A PHONE THE GROUP BECOMES ONE COLUMN OF WIDE PICTURES. Two columns across 334px of measure gives each photograph about 160px, which is a contact sheet rather than a picture of a sock. One column at 2:1 gives each of them 167px of height on the same screen and all three are legible; the section gets taller, which is what a phone is for. */ @media (max-width: 560px) { .why-figures { grid-template-columns: minmax(0, 1fr); } .why-figures .why-figure { grid-column: 1 / -1; } .why-figures .why-figure img { aspect-ratio: 2 / 1; } } .why-cols { columns: 1; column-gap: 56px; max-width: 900px; } .why-cols p { margin: 0 0 20px; break-inside: avoid; font-size: 16.5px; } .why-mail { margin-top: 34px; } .why-mail a { font: 700 15px/1 var(--alt); letter-spacing: .04em; color: var(--on-dark); text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 4px; } @media (max-width: 760px) { .why-cols { columns: 1; } } /* ========================================================================= 7. THE CLIENT LOGO WALL — unbounded. TASK P155-#25, TOBY'S AMENDMENT: "remove the holders for the logos just have them 'loose' (unbounded)". Every trace of the tile is gone — the 196x126 box, the white ground, the border, the radius, the padding, and the hover state that used to add a border colour, a shadow and a 2px lift. A `.wall-logo` is a