/* ===================================================================== THE LAST STYLESHEET ON THE PAGE, ON PURPOSE. It was called responsive.css for an afternoon. It is called corrections because that is what it is: the place where a rule that has to beat a ported page's own stylesheet goes, whatever the rule is about. Most of it is about small screens. The last section is about colour. James, 11 September 2026: "for the mobile and tablet version, i want you to use Oxford University website as a good example. You need to ensure our pages are well optimised for these devices... CONSISTENT AND QUALITY, IF IT FALLS BELOW THE QUALITY OF OXFORD IN TERMS OF IT'S LAYOUT AND CLARITY, IMPROVE IT." WHY A SECOND SHEET RATHER THAN MORE OF site.css. `site.css` is linked in the head BEFORE `head_extra`, and `head_extra` is where a ported page prints its own Elementor stylesheet. So a rule in site.css loses to a ported rule of the same specificity, every time, on exactly the pages that need correcting most. This sheet is linked after it, so it wins by order rather than by an arms race of selectors. It is for corrections that must reach every page, ported or not. It is not a place to design in. Anything that belongs to one section belongs in that section's own rules. WHAT OXFORD ACTUALLY DOES, measured in James's own browser on 11 September 2026 at three widths (ox.ac.uk, home page): 500px 834px 1440px side gutter 21 32 51 heading (h2) 29/35 35/42 45/54 ratio 1.20 sub-heading (h3) 22/26 25/30 30/36 ratio 1.18 body 17/27 18/29 20/32 ratio 1.59 heading weight 500 500 500 grid columns 1 1 3 or 4 section padding 36 to 50 WHAT WE WERE DOING, measured the same way: side gutter 24 24 40 nothing between heading 30 to 36 48 to 52 - ratio 1.00 to 1.10 body 16 to 17 16 to 20 - grid columns 1 or 2 2, 3, 4 - Three faults, and the first is the one that shows: 1. HEADINGS SET SOLID. A 52px heading on a 1.02 line-height wraps onto a second line whose ascenders touch the descenders above it. Oxford never goes below 1.18. Every heading on this site is corrected to 1.16 on anything narrower than a laptop, which is where headings wrap. 2. NOTHING BETWEEN PHONE AND DESKTOP. 24px gutters held all the way to 1100px, so a tablet showed a 772px column inside an 820px window, nearly edge to edge. The gutter is now fluid. 3. TYPE BELOW THE COMFORTABLE MINIMUM. Eyebrow labels at 11px and dates at 12px. Oxford's smallest text is 13px. ===================================================================== */ /* ------------------------------------------------ 1. headings wrap --- Element selectors lose to the class selectors in a ported stylesheet however late this sheet is loaded, so this is one of the two places on the site that uses `!important`. It is doing exactly what !important is for: overriding a stylesheet that cannot be edited from here, in one documented rule, for one property. 1.16 rather than Oxford's 1.20, because our display face is heavier and its own line spacing is tighter; 1.20 opened gaps in the two-line headings that already fit. */ @media (max-width: 1100px) { h1, h2, h3, .wsset-hero-heading, [class*="-heading"], [class*="__heading"] { line-height: 1.16 !important; } } /* ------------------------------------------------- 2. the gutter --- A tablet is not a wide phone. 24px at 390, about 32px at 820, 40px from 1100 up, in one expression rather than three breakpoints, which is how Oxford does it and why their layout never has an awkward width. Applied to the wrappers both halves of the site use: `.spine` on the pages written for this site, `-inner` on every ported section, which is the old site's own naming convention. */ @media (max-width: 1100px) { .spine, [class$="-inner"] { padding-left: clamp(24px, 4vw, 40px); padding-right: clamp(24px, 4vw, 40px); } } /* --------------------------------------------- 3. the small type --- Nothing on a phone reads below 12px, and a label in capitals with 0.15em of tracking reads smaller than its size. Oxford's smallest is 13px. These are the two families of small text this site has: the green eyebrow above a heading, and the date or meta line under one. */ @media (max-width: 900px) { .eyebrow, [class*="-label"], [class*="__label"] { font-size: 12px; } .wsset-hp-news-date, .gtile__meta, [class*="-meta"], [class*="__meta"], [class*="-date"] { font-size: 13px; } } /* ----------------------------------------- 4. something to press --- "All news →" was a 21px-tall target. Anything that is a link on its own line gets a 44px box around it, which is the size a thumb actually is. Padding rather than height, so the text stays where it was. */ @media (max-width: 900px) { .wsset-hp-news-link, [class*="-stat-link"] { display: inline-flex; align-items: center; min-height: 44px; } } /* ------------------------------------------ 5. cards that got thin --- Measured at 390 and 820 with a browser, not guessed. A card with a heading and a sentence in it stops working below about 200px, and these were the ones under it: 390px set-prev-grid 170px conference cards wsset-s3-highlights 165px what the conference offers set-hero-stats 102px three figures across a phone 820px wsset-prev-conf-grid 235px James's own 380px card design Oxford's answer at both widths is one column, and it holds one column all the way to 1024. These stop short of that, because two columns of photographs still work where two columns of prose do not, but nothing is asked to carry a sentence in 170 pixels any more. */ @media (max-width: 700px) { /* One column, but only for the ones that carry prose. `set-prev-grid` and `wsset-values-tabs` were in this list for one pass and came back out: their cards hold a flag, a year and a place, or a single word like "Collaboration". Those read perfectly well at 170px, and making them full width only made two long pages longer. Column count is not the measure; what is in the column is. */ .wsset-s3-highlights { grid-template-columns: 1fr !important; } /* Three figures across a phone gave each of them 102px, and "Countries hosted" wrapped onto three lines under an 8,800+. Two across, and the third sits under them. */ .set-hero-stats { grid-template-columns: 1fr 1fr !important; gap: 24px 16px; } } @media (min-width: 701px) and (max-width: 1000px) { /* James's conference card is drawn for 380px. At 820 it was getting 235, which crops the 28px title onto three lines. */ .wsset-prev-conf-grid, .set-prev-grid, .wsset-sdgs-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* --------------------------------- 6. pictures that ate the screen --- James, 11 September 2026: "i don't want really long images taking up full viewports with no interaction, that's not good web design on mobile, the space has to be used efficiently like good mobile/tablet websites do." He is describing the ported pages' two-column sections. On a laptop they are text beside a picture; on a phone the picture drops under the text at the full width of the screen and keeps its portrait proportion. Measured on a 390x844 phone: /awards/ 635px 75% of the screen, no text on it /about-us/ 520px 62% /get-involved/ 520px and 500px /journals/ 520px, then five covers at 453px each Two and a half screens of scrolling on the journals page before the reader reaches a journal. A photograph illustrating a paragraph is a band beside it, not a page of its own. The wrapper is always named `-image` in the old site's own convention, which is what makes this one rule rather than eight. */ @media (max-width: 700px) { [class$="-image"] > img, [class*="-image"] > img { height: 240px; object-fit: cover; object-position: center; } /* A journal cover is portrait by nature and must not be cropped, so this one is contained rather than covered: the card keeps its width and the cover sits inside it at a sensible size. */ .wsset-journal-cover { height: 260px; object-fit: contain; background: var(--tint); } } /* ------------------------------- 7. the row you push, on a phone --- The previous conferences on the home page are James's own card: a photograph 380px tall with the year and the place set over the foot of it. Three of them, stacked at the full width of a phone, is 1,475px of page, which is 1.7 screens to see three cards. They become a row that scrolls sideways and snaps, the same way the photograph strip does, which is what a phone is for: the cards keep their proportion, the screen keeps its space, and there is something to push instead of something to scroll past. The third card's edge shows, so it is obvious there is more. Only where the row is short and each card is a picture. A list of twenty-two conferences is a list and stays a list. */ @media (max-width: 700px) { .wsset-prev-conf-grid { display: flex !important; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; /* The gutter is on the section, so the row is pulled out to the edge of the screen and the padding put back inside it. A row that stops short of the edge does not read as scrollable. */ margin-inline: calc(-1 * clamp(24px, 4vw, 40px)); padding-inline: clamp(24px, 4vw, 40px); scroll-padding-inline: clamp(24px, 4vw, 40px); } .wsset-prev-conf-card { flex: 0 0 min(76%, 300px); scroll-snap-align: start; } .wsset-prev-conf-card > img { height: 320px; } } /* ----------------------------------------- 8. two corrections found by looking at the rendered page rather than by measuring it --- THE COMMUNITY CARD'S SENTENCES. Rule 3 above catches anything whose class contains "-label", which is the old site's name for the small green eyebrow above a heading. It is also, on one element, the name for a whole sentence: `wsset-mem-cta-stat-label` is the paragraph beside the Fellows and Representatives figures. Setting that to 12px made the only prose in a navy card the smallest text on the page. THE HERO'S FOUR CHIPS. Four pills separated by rules, which on a phone wrapped three onto their own lines and then two side by side, with the separators left hanging. Two by two, and the separators are not drawn: a rule between things that are not in a row is a mark with no job. */ @media (max-width: 900px) { .wsset-mem-cta-stat-label { font-size: 15px; line-height: 1.5; } } @media (max-width: 700px) { .wsset-hero-pillars { display: flex; flex-wrap: wrap; gap: 10px; } .wsset-hero-pillar { flex: 1 1 calc(50% - 5px); justify-content: flex-start; } .wsset-hero-pillar-sep { display: none; } } /* ================================================================ COLOUR: A BUTTON ON NAVY IS THE BUTTON THIS SITE ALREADY USES ================================================================ James, 11 September 2026: "i suggest to use the white or transparent cta consistently on blue backgrounds, you do it for some sections, but use green cta's for others, which looks a bit ugly on a blue backgrounds, needs fixing site wide." And: "ensure it's consistent, not asking you to invent new cta's." So nothing here is designed. These are the values already used by `wsset-btn-hero-primary`, `wsset-btn-set-primary`, `.phero__actions a` and `.cta-band a`, which are the four places on this site where a button already sits on navy and already looks right: background #ffffff colour #003150 border 2px solid #ffffff radius 40px 15px / 700 Roboto Four buttons on the ported pages were the Society's green on the Society's navy instead. That is the one pairing in the palette with nowhere to go: 4.4:1 against each other, so the button reads as a smudge rather than as something to press. Found by walking every live page and asking each button what colour was behind it. / wsset-mem-cta-card-btn "Join WSSET" / wsset-btn-journals "View all journals" /get-involved/ wsset-btn-sig-primary "Join WSSET to access SIGs" /get-involved/ wsset-btn-s4-primary "View all journals" `!important` because two of the four are styled through their section as well as through their own class, so a single class here loses. The first pass did not use it, and the result was white text on a white button: an invisible CTA on the front page. Caught by reading the computed colour back out of the browser rather than by looking at the rule. Green on WHITE is untouched. That is the brand working properly, and it is what the conference page's tabs use. */ .wsset-mem-cta-card-btn, .wsset-btn-journals, .wsset-btn-sig-primary, .wsset-btn-s4-primary { background: #ffffff !important; color: #003150 !important; border: 2px solid #ffffff !important; border-radius: 40px; font-weight: 700; } /* The hover the house buttons use: the fill drops out and the edge and the words stay. */ .wsset-mem-cta-card-btn:hover, .wsset-btn-journals:hover, .wsset-btn-sig-primary:hover, .wsset-btn-s4-primary:hover { background: transparent !important; color: #ffffff !important; border-color: #ffffff !important; } /* ------------------------ 9. text you cannot read, on Awards and SET Proceedings --- Found by `scripts/check_contrast.py`'s own probe, run in James's browser against both pages on 11 September 2026, when they were touched to take their em dashes out. Every one is the ported page's own rule, and every fix keeps the look and changes only how much of it can be read. White at 40% and 50% on the navy is 3.4:1 and 4.5:1 to one decimal place short. At 60% it is 5.8:1 and reads the same at a glance. #888 is a grey from no brand document, at 3.5:1. The muted navy tint in site.css is 6.7:1 on white and 6.4:1 on the light ground. "Prohibited" was set in the brand red, which is 4.2:1 and which the brand guidelines keep for the logo and small accents, never for text. The words go navy. The red stays where it is an accent: the bullet in front of each prohibited item. James: "stick to the branding". */ .wsset-award-item-num { color: rgba(255, 255, 255, 0.6); } .proc-hero-badge-label, .proc-aims-card-row-label { color: rgba(255, 255, 255, 0.6); } .proc-office-label, .proc-board-sub { color: var(--muted); } .proc-ai-sub.prohibited { color: var(--navy); } /* -------------------------------- 10. faces cut off on the board --- James, 23 September 2026: "the our team section, everyones facing got cut off on tablet, mobile". The two card pictures on `/our-board/` are given a fixed pixel height and a fluid width, and the portraits behind them are square: 956x956 for the officers, 712x712 and 600x600 for the team. `object-fit: cover` then fills the width and takes the overflow off the bottom, and `object-position: center top` decides that the bottom is what goes. Measured at three widths on 23 September 2026: frame ratio of the portrait shown desktop 1280 235 x 220 1.07 93% phone 390 340 x 220 1.55 65% tablet 820 363 x 220 1.65 61% On a laptop the frame is nearly square and it crops a little off the shoulders, which is why this was never seen there. On a tablet it takes two fifths of the picture, and since these are head-and-shoulders portraits that is the mouth and the chin. Mr Ruihong Weng was cut across the mouth and Ms Jialu Xu across the chin. A square frame for a square portrait crops nothing at any width, and it is the shape the pictures were taken in. `!important` because the rule it has to beat is printed inside the page's own body, which is stored in the database rather than in this repository. */ .wsset-exec-card-img, .wsset-team-card-img { height: auto !important; aspect-ratio: 1 / 1; }