/* ========================================================================= Societal Socks — the case studies. Task P155-#54. /our-work/ and /our-work//. Loaded only by those pages, after brand.css and site.css, and it defines no token of its own: every colour, face and measure below is a variable read from brand.css, so these pages cannot drift away from the rest of the site. FLAT, like every other stylesheet here. No radius, no shadow, no gradient. Sections separate on flat white, flat grey and flat black, and on space. THE ONE THING WORTH EXPLAINING is why the logos on the index are NOT greyscale, when the home page's wall is. On the wall they are a texture — nine marks read as one strip, and colour would make it a jumble. Here each one is the subject of its own card, sitting above that client's name, and a client's mark in its own colours is the right way to show it on a page that is about them. ========================================================================= */ /* ---------- the index ---------------------------------------------------- */ .work-head { padding: 72px 0 36px; } .work-head h1 { font-family: var(--display); font-weight: 700; font-size: clamp(42px, 7vw, 76px); letter-spacing: -0.03em; line-height: 1.02; margin: 4px 0 18px; } .work-intro { max-width: 46ch; color: var(--ink-soft); font-size: 19px; margin: 0; } .work-list { padding: 18px 0 84px; } /* THE GRID IS CENTRED, AND SO IS EVERY LOGO IN IT. Task P155-#58. Toby, 15 Sep 2026: "centre the logos for it". TWO THINGS WERE OFF-CENTRE AND THEY NEEDED DIFFERENT ANSWERS. 1. EACH MARK INSIDE ITS OWN CARD. `.work-card .mark` was `justify-content: flex-start`, so a 206x300 coat of arms and a 290x111 wordmark both hung off the left edge of a 280px card and the row read as a ragged left margin with white to the right of it. That is one word, below. 2. A SHORT FINAL ROW. This was a CSS Grid of `auto-fill` tracks, which always lays a full set of columns whether or not there are cards to put in them. Nine clients in a three-column grid left the last card hard left with two empty tracks beside it - and because the container's background WAS the hairline colour and the gaps were what showed it, those two empty tracks rendered as a grey block. The page ended on a visible hole. So it is a centred flex row instead. Cards keep a common basis and grow to fill the line, exactly as `1fr` tracks did, so a full row is indistinguishable from the grid it replaces; a SHORT row is centred rather than flushed left, and the space either side of it is paper rather than grey. THE HAIRLINES MOVED WITH IT. They used to be the container's background showing through 1px gaps, which only works when the cards tile the box completely. Each card now carries its own 1px `box-shadow` outline: the 1px gap between two cards is filled by BOTH their outlines, which overlap into one line of the same weight, the outside of the block is drawn by the outermost cards, and empty space is not drawn at all. */ .work-grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1px; } .work-grid li { background: var(--paper); box-shadow: 0 0 0 1px var(--line); /* the outlines ARE the hairlines */ /* The same measure the grid's `minmax(232px, 1fr)` used: at least 232px, then share out what is left. The ceiling stops a lone card on a wide screen stretching into a banner. */ flex: 1 1 232px; max-width: 300px; } .work-card { display: flex; flex-direction: column; gap: 18px; padding: 30px 26px 26px; height: 100%; text-decoration: none; color: var(--ink); transition: background .18s ease; } .work-card:hover, .work-card:focus-visible { background: var(--paper-alt); } /* A FIXED BOX FOR A SET OF LOGOS OF EVERY SHAPE. They range from a 290x111 wordmark to a 206x300 coat of arms; without a fixed box the cards would be ten different heights. object-fit: contain keeps every one un-squashed. */ .work-card .mark { height: 92px; display: flex; align-items: center; justify-content: center; } .work-card .mark img { max-height: 92px; width: auto; object-fit: contain; } .work-card h2 { font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: -0.01em; line-height: 1.25; margin: 0; } .work-card .says { margin: 0; color: var(--ink-mute); font-size: 14.5px; } .work-card .go { margin-top: auto; font-family: var(--alt); font-weight: 700; font-size: 14px; letter-spacing: .02em; } /* ---------- one client --------------------------------------------------- */ .crumbs { font-size: 14px; margin: 0 0 26px; font-family: var(--alt); font-weight: 700; } .crumbs a { color: var(--ink-mute); text-decoration: none; } .crumbs a:hover { color: var(--ink); text-decoration: underline; } .case-head { padding: 64px 0 40px; } .case-top { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; } .case-top .case-mark { width: 132px; height: 112px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); padding: 12px; } .case-top .case-mark img { max-height: 88px; width: auto; object-fit: contain; } .case-head h1 { font-family: var(--display); font-weight: 700; font-size: clamp(34px, 5.4vw, 60px); letter-spacing: -0.025em; line-height: 1.04; margin: 4px 0 0; } .case-summary { font-size: 20px; color: var(--ink-soft); max-width: 52ch; margin: 26px 0 0; } .case-body { max-width: 62ch; margin: 22px 0 0; } .case-body p { margin: 0 0 16px; color: var(--ink-soft); } .case-visit { margin: 26px 0 0; font-family: var(--alt); font-weight: 700; font-size: 15px; } /* THE PICTURES. One per row on a phone, two up from 760px. A figure is an image plus ITS CAPTION — Toby's words, shown to everybody. The alt text is a different string saying what the photograph shows, and it is on the img. */ .case-media { padding: 12px 0 64px; } .case-figs { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .case-figs figure { margin: 0; } /* aspect-ratio holds the box before the bytes arrive, so a lazy image below the fold cannot shove the caption down when it loads. width/height on the img itself does the same job for a browser that does not support this. */ .case-figs img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper-alt); } .case-figs figcaption { margin: 12px 0 0; font-size: 15px; color: var(--ink-mute); max-width: 48ch; } .work-cta { padding: 66px 0; } .work-cta h2 { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 4.2vw, 46px); letter-spacing: -0.02em; margin: 0 0 26px; } @media (max-width: 600px) { .work-head { padding: 48px 0 28px; } .case-head { padding: 40px 0 28px; } .case-top { gap: 20px; } .case-top .case-mark { width: 104px; height: 92px; } } /* ========================================================================= THE PAGE'S COLOUR. Task P155-#64. our-work.html is `body class="hue-corn"`, so --hue is the cornflower blue out of the six-stop gradient on societalsocks.com and --hue-wash is that colour mixed 14% into white (#f0f7ff). Both are declared in section 12 of site.css and nothing here invents a value. IT IS A RULE AND A HOVER, AND NOTHING ELSE. A card on this page carries a client's own logo, in that client's own colours, and a coloured card behind a coloured logo is how a page of nine logos turns into a page of nine clashes. So the card stays white, takes a 4px rule of the hue across the top - the same mark the segment pages' cards carry - and washes to #f0f7ff on hover instead of to flat grey. Black on that wash is 19.45:1. THESE RULES ARE HERE RATHER THAN IN site.css because this file is linked AFTER it, and `.work-card`'s own box-shadow outline and background would win over anything site.css said about them. ========================================================================= */ .work-card { border-top: 4px solid var(--hue); } .work-card:hover, .work-card:focus-visible { background: var(--hue-wash); } /* ========================================================================= THE BROWN GOES, AND AN OMBRE LEADS THE PAGE. Task P155-#69. Toby, 22 Sep 2026: "Replace the poo brown in the 'our work' page to an ombre or an orange." And, separately the same day: "Make the background blue on the our work section (skyblue)." WHERE THE BROWN ACTUALLY WAS, because it was never a colour anybody typed. This page had drifted to `body class="hue-peach"`, and the peach family's deep shade is #714c2d. That one variable painted three things: the whole closing band (`.band.deep.work-cta`), every `.eyebrow` on the page, and the 5px rule on any panel. #714c2d is the brown. The note at the top of this file has said "our-work.html is `body class='hue-corn'`" the whole time - the markup drifted off it, the documentation never did. SO THE PAGE GOES BACK TO CORNFLOWER, which is the sky blue Toby named for it, and the brown leaves with the variable rather than being painted over. There is now no peach anywhere on this page: --hue-deep is #425873, a slate blue. AND THE REPLACEMENT IS THE OMBRE, NOT THE ORANGE. He offered either. Orange means the peach family, and the peach family's deep shade IS the brown he is objecting to - taking it would have left the same #714c2d one variable away, and it would have contradicted "skyblue" for the same page in the same day's messages. The ombre keeps the page blue and gives the head the thing the flat tint could not: the page's own cornflower resolving into the brand's periwinkle, two of the five palette colours and no sixth. THIS IS THE ONE GRADIENT OUTSIDE THE HERO, AND THAT IS A RULE BEING OVERRULED, NOT FORGOTTEN. Restraint rule 4 in section 12 of site.css says "nothing adds a border-radius, a drop shadow or a gradient". Toby has asked for an ombre by name, exactly as he overruled "the black bands stay black" in #68. It is confined to these two page heads; nothing else on the site gains one. MEASURED AT BOTH ENDS, so every point along it is covered - the ramp runs between two light tints and never leaves the band between them. ground --c-corn-tint #d6e8ff -> --c-peri-tint #dfd7ff h1 --ink 16.85:1 15.30:1 .work-intro / .case-summary --ink-soft 10.89:1 9.89:1 .eyebrow --c-corn-deep #425873 5.86:1 5.32:1 .crumbs --ink-mute #5c5c5c 5.36:1 4.87:1 The lowest number is 4.87 and it clears the 4.5:1 AA body bar, which is the stricter of the two; the eyebrow and the crumbs are both bold besides. ========================================================================= */ /* BOTH GRADIENTS ARE GONE AND THE HEAD IS A SOLID BLOCK. Task P155-#73. Toby, 22 Sep 2026: "Make the section behind the titles in block colour... No weird faded gradients please." That retires the whole of the note above: the 158-degree cornflower-to-periwinkle ramp AND the paper overlay P155-#70 laid over it to stop it hitting white. THE HEAD IS `.bg-block` NOW, the one page-head treatment every page on this site shares, declared once in section 13 of site.css. It is a flat fill of --hue at FULL strength - #93c3ff on both these pages - with the title in --hue-on and the sentence under it in --hue-on-soft. Nothing is declared here, which is the point: our-work.html and our-work-client.html stop being the two pages with a head of their own. MEASURED ON THE FLAT #93c3ff, which is darker than either tint the ramp used and is therefore the real worst case rather than a floor: h1 --ink #000000 11.49:1 .work-intro --hue-on-soft #2e2e2e 7.43:1 .case-summary --hue-on-soft #2e2e2e 7.43:1 .eyebrow --hue-on #000000 11.49:1 .crumbs a --hue-on-soft #2e2e2e 7.43:1 The lowest number on the block is 7.43:1 against a 4.5:1 bar. The old worst case was 4.87:1, so every pair on these two heads improved. THE TWO RULES BELOW ARE THE ONLY THING THIS FILE STILL SAYS ABOUT THE HEAD, and they exist because our-work.css is linked AFTER site.css: `.crumbs a` and `.work-intro` set their own colour above and would otherwise keep --ink-mute / --ink-soft on a ground the block has already chosen type for. */ .work-head.bg-block .work-intro, .case-head.bg-block .case-summary, .case-head.bg-block .case-body p { color: var(--hue-on-soft); } .case-head.bg-block .crumbs a { color: var(--hue-on-soft); } .case-head.bg-block .crumbs a:hover { color: var(--hue-on); } .case-head.bg-block .case-visit a { color: var(--hue-on); }