/* Theme Name: GeneratePress Child Theme URI: https://generatepress.com Description: Default GeneratePress child theme Author: Tom Usborne Author URI: https://tomusborne.com Template: generatepress Version: 0.1 */ /* ========================================================================= BEFELLO — SINGLE TEMPLATE STYLES · REFERENCE DESIGN SYSTEM ADAPTATION Opportunity (single-opportunity.php) + Essay (single-essay.php) ------------------------------------------------------------------------- FILE MAP Section 0 · Theme layout overrides (GeneratePress, both post types) Section 0.5 · Icon layer — the uploaded set in /assets Section 1 · Opportunity single template → tokens: --bf-* Section 2 · Essay single template → tokens: --bfe-* Section 3 · Reduced motion + print (both) TOKEN NAMESPACES Section 1 defines --bf-* on :root Section 2 defines --bfe-* on .befello-essay-page The two prefixes never overlap, so both templates coexist in one file without either overwriting the other. SCOPING Every rule is scoped to a .befello-* class or a body.single-{type} selector. Nothing here leaks onto blog posts, pages, or archives. ========================================================================= */ /* ========================================================================= SECTION 0 — THEME LAYOUT OVERRIDES (GeneratePress) ------------------------------------------------------------------------- PREFERRED FIX: add befello-fullwidth-layout.php to functions.php. It uses GeneratePress's own "no sidebar" + "full width content" hooks, so GP renders both templates edge-to-edge and none of this is needed. This is the CSS-only fallback. The critical detail: GeneratePress puts its `grid-container` width constraint on #page — the OUTERMOST wrapper, a sibling level above .site-content — and also on #content. Targeting only .site-content or .content-area misses it entirely and the page stays boxed with grey gutters. The rules below therefore reset the wrapper chain from the outside in: #page → #content/.site-content → .content-area → #primary. Both post types are handled together: this is theme-shell behaviour, not component styling. ========================================================================= */ /* No overflow-x: hidden here. It was masking real overflow rather than fixing it, and on a scrolling body it also puts position: sticky in a different containing block. Every component that used to poke past the viewport is fixed at the component instead — see the notes on the timeline, the key-info grid and the full-bleed blocks below. */ body.single-essay, body.single-opportunity { background: var(--befello-surface); } /* THE ACTUAL CONSTRAINT. Any .grid-container inside these two templates — #page, #content, or a nested one — gives up its max-width and horizontal padding. Scoped to the body class, so every other page on the site keeps GP's normal boxed layout untouched. */ body.single-essay .grid-container, body.single-opportunity .grid-container { max-width: none; width: 100%; padding-left: 0; padding-right: 0; } /* The outer page wrapper also carries GP's own margin, background and separation shadow — the reason the white area reads as a floating sheet with grey either side. */ body.single-essay #page, body.single-opportunity #page { max-width: none; width: 100%; margin: 0; padding: 0; background: transparent; box-shadow: none; border: 0; } body.single-essay #content, body.single-essay .site-content, body.single-essay .content-area, body.single-essay .site-main, body.single-opportunity #content, body.single-opportunity .site-content, body.single-opportunity .content-area, body.single-opportunity .site-main { max-width: none; width: auto; padding: 0; margin: 0; background: transparent; box-shadow: none; border: 0; } body.single-essay .site-content, body.single-opportunity .site-content { display: block; } body.single-essay #primary, body.single-opportunity #primary { float: none; width: 100%; max-width: none; } /* If a sidebar column still renders — i.e. the PHP filter isn't active — hide it so #primary can use the full row. */ body.single-essay #right-sidebar, body.single-essay #left-sidebar, body.single-essay .widget-area, body.single-opportunity #right-sidebar, body.single-opportunity #left-sidebar, body.single-opportunity .widget-area { display: none; } /* The hero and layout blocks keep their own 1240px reading measure via --bf-container-max / .essay-shell. Full-bleed here means the PAGE SHELL is unconstrained; the content still centres itself at a sane width. */ /* ========================================================================= SECTION 0.5 — ICON LAYER (the uploaded set in /assets) ------------------------------------------------------------------------- The uploaded icons are PNGs, so they cannot inherit `color:` the way the inline SVGs they replace could. Painting them as would mean every `color: var(--bf-ink-subtle)` in this file silently stopped working. So they are applied as CSS MASKS instead. Each file is black line art on a transparent background, which means its alpha channel is exactly the icon's shape: mask with it, fill the box with `background-color: currentColor`, and the raster icon takes its colour from the cascade just like the SVG did. Every existing `color:` rule below keeps working. HOW IT IS WIRED · The template helpers emit class="… befello-ico befello-ico--{name}". · `.befello-ico` alone carries only inert mechanics — with no mask-image it changes nothing, so an icon name this set does not cover keeps rendering its inline SVG paths untouched. · The ACTIVATION block below names the covered icons: it fills the box with currentColor and hides the SVG's own paths. Adding an icon is therefore two edits here — one line in each list — and no PHP. URLs are written out in full rather than held in custom properties: relative url() inside a custom property has resolved against the document in some engines and against the stylesheet in others, and getting that wrong means every icon 404s. Written directly in the rule it always resolves against this stylesheet, i.e. the child theme folder. Raster icons stay raster: these are 512×512 sources drawn at 16–20px, so they are sharp on 1x and 2x/3x displays alike. ========================================================================= */ /* Inert on its own — safe to put on every icon, mapped or not. */ .befello-ico { display: inline-block; flex: 0 0 auto; /* never let a flex row crush an icon */ -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* ACTIVATION — only the names the uploaded set covers. */ .befello-ico--globe, .befello-ico--pin, .befello-ico--clock, .befello-ico--coin, .befello-ico--tag, .befello-ico--award, .befello-ico--doc, .befello-ico--check, .befello-ico--ruler, .befello-ico--contract, .befello-ico--link, .befello-ico--flag, .befello-ico--webcam, .befello-ico--format { background-color: currentColor; /* the mask decides what stays */ } /* The PNG supplies the shape, so the SVG's own paths must go. */ .befello-ico--globe > *, .befello-ico--pin > *, .befello-ico--clock > *, .befello-ico--coin > *, .befello-ico--tag > *, .befello-ico--award > *, .befello-ico--doc > *, .befello-ico--check > *, .befello-ico--ruler > *, .befello-ico--contract > *, .befello-ico--link > *, .befello-ico--flag > *, .befello-ico--webcam > *, .befello-ico--format > * { display: none; } /* THE MAP — semantic name → uploaded file. Names deliberately left out because the set has no honest match: calendar, monitor, user, arrow, back. They keep their inline SVG. This map is the counterpart to the $from_library list in single-opportunity.php — adding an icon means one entry in each. */ .befello-ico--globe { -webkit-mask-image: url("assets/002-earth.png"); mask-image: url("assets/002-earth.png"); } .befello-ico--pin { -webkit-mask-image: url("assets/015-pin-map.png"); mask-image: url("assets/015-pin-map.png"); } .befello-ico--clock { -webkit-mask-image: url("assets/014-wall-clock.png"); mask-image: url("assets/014-wall-clock.png"); } .befello-ico--coin { -webkit-mask-image: url("assets/007-fiat.png"); mask-image: url("assets/007-fiat.png"); } /* Opportunity type / essay theme. */ .befello-ico--tag { -webkit-mask-image: url("assets/021-star.png"); mask-image: url("assets/021-star.png"); } /* Selection outcome — the rosette. */ .befello-ico--award { -webkit-mask-image: url("assets/013-badge.png"); mask-image: url("assets/013-badge.png"); } .befello-ico--doc { -webkit-mask-image: url("assets/017-document.png"); mask-image: url("assets/017-document.png"); } .befello-ico--check { -webkit-mask-image: url("assets/016-checklist.png"); mask-image: url("assets/016-checklist.png"); } /* Word/length limits — the sorting bars read as "measured". */ .befello-ico--ruler { -webkit-mask-image: url("assets/004-sorting.png"); mask-image: url("assets/004-sorting.png"); } /* Participation format. The library has no generic "person", so `user` deliberately keeps its inline path rather than borrowing a wrong mark. */ .befello-ico--flag { -webkit-mask-image: url("assets/003-mission.png"); mask-image: url("assets/003-mission.png"); } .befello-ico--webcam { -webkit-mask-image: url("assets/001-surveillance-camera.png"); mask-image: url("assets/001-surveillance-camera.png"); } .befello-ico--format { -webkit-mask-image: url("assets/004-sorting.png"); mask-image: url("assets/004-sorting.png"); } /* The Opportunity Card's copy-link control. */ .befello-ico--link { -webkit-mask-image: url("assets/011-connection.png"); mask-image: url("assets/011-connection.png"); } /* The application record — used by the hero's deadline sentence. */ .befello-ico--contract { -webkit-mask-image: url("assets/018-contract.png"); mask-image: url("assets/018-contract.png"); } /* Safety net. Without mask support, `background-color: currentColor` would paint a solid block, so hand the icon back to its inline SVG instead. Every engine in current use supports one of these two properties; this exists so the failure mode is "old icon", never "grey square". */ @supports not ((-webkit-mask-image: url("assets/021-star.png")) or (mask-image: url("assets/021-star.png"))) { .befello-ico { background-color: transparent; } .befello-ico > * { display: revert; } } /* ------------------------------------------------------------------------- 0.5b Icons rendered as — befello_icon_img() in inc/icons.php Used by the Befello plugins (the Alumni Advice heart, for one) where the icon's own colour matters and masking it away would be wrong. These guards exist because an inside a flex row is the exact thing that gets crushed to 0px wide; sizing stays with the width/height attributes. ------------------------------------------------------------------------- */ .befello-icon-img { display: block; flex: 0 0 auto; /* the crush guard */ max-width: none; /* beats the theme's img { max-width: 100% } */ height: auto; object-fit: contain; } /* ========================================================================= SECTION 1 — OPPORTUNITY SINGLE TEMPLATE ------------------------------------------------------------------------- Design system notes: · Every value comes from the Befello Design System core tokens below. Nothing in this section invents a colour, radius, or type size. · Type scale is the design system's, expressed in rem so it respects user browser font-size settings (accessibility requirement). 1rem = 16px, so --bf-text-base: 1rem is the system's 16px Body. · Spacing scale is a 4px base. Every margin/padding uses a scale token, not an arbitrary value — that's what produces consistent vertical rhythm rather than eyeballed gaps. · Scoped to .befello-* classes so nothing else on the site is affected. ========================================================================= */ /* ------------------------------------------------------------------------- 1.0 DESIGN SYSTEM CORE TOKENS The single source of truth. §19 of the design system, one-for-one, with a --befello- prefix: bare names like --space-4 or --color-blue on :root in WordPress are a real collision risk with GeneratePress, Elementor and plugin stylesheets, and a repainted --color-blue three layers away is a miserable bug to chase. Design-system name → token here: --color-blue → --befello-blue --radius-md → --befello-radius-md --color-text → --befello-text --space-4 → --befello-space-4 … and so on for every token in §19. Both template namespaces (--bf-* for Opportunity, --bfe-* for Essay) alias these, so the brand is changed in exactly one place. ------------------------------------------------------------------------- */ :root { /* Typography */ --befello-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Brand */ --befello-blue: #0281e8; --befello-blue-dark: #0069c7; /* Pressed/hover step below blue-dark. Derived, not invented: blue-dark at 88%. Needed because the button fill moved down to blue-dark for contrast, so hover had to move with it. */ --befello-blue-darker: #005caf; --befello-yellow: #ffda55; --befello-yellow-soft: #ffeb99; /* Neutral */ --befello-text: #252a27; --befello-text-secondary: #494e4a; --befello-border: #dde2df; --befello-surface: #ffffff; /* Semantic */ --befello-error: #f66e6e; --befello-success: #119b49; --befello-success-soft: #e3ffd6; /* Radius */ --befello-radius-none: 0px; --befello-radius-sm: 2px; --befello-radius-md: 4px; --befello-radius-max: 5px; /* Spacing */ --befello-space-1: 4px; --befello-space-2: 8px; --befello-space-3: 12px; --befello-space-4: 16px; --befello-space-5: 20px; --befello-space-6: 24px; --befello-space-8: 32px; --befello-space-10: 40px; --befello-space-12: 48px; --befello-space-16: 64px; /* --- Derived, not new ------------------------------------------------ Two tints of --befello-blue and one darker red. Rule 10 of the system says reuse tokens before introducing colours, so these are stated as what they are: the brand blue mixed with white, and the semantic red darkened only where it has to carry TEXT. #f66e6e on white is 2.85:1 — fine for a heart or a status dot beside a label, not for the words "3 days left". --befello-error-text is the same red at 5.4:1 so an urgent deadline stays readable. The dot, the heart and any red border still use --befello-error itself. */ --befello-blue-soft: #ebf5fd; /* --befello-blue at 8% on white */ --befello-blue-soft-border: #b3d9f8; /* --befello-blue at 30% on white */ --befello-error-text: #c4342e; /* 5.42:1 on white, 4.72:1 on the soft red */ --befello-error-soft: #feebeb; /* --befello-error at 14% on white */ /* §8 writes the funded badge as #119B49 on #E3FFD6, which measures 3.36:1 for a 14px label — under AA. §3 also says to maintain WCAG-compliant contrast, and §17 makes accessibility a default requirement, so the two rules disagree and the accessible one wins: the same green darkened to 4.74:1. #119B49 itself still paints the badge icon and the benefit ticks, where the 3:1 graphics bar applies and it passes. */ --befello-success-text: #0e7f3c; } /* Tokens live on :root rather than on .befello-opportunity because .befello-mobile-cta is rendered OUTSIDE the article element and still needs access to them. Every name is --bf-* prefixed, so nothing here can collide with theme or plugin variables. */ :root { /* --- Colour — every value aliases a core token --------------------- */ /* Surface is both the page and the card background (§3): cards are separated by a 1px border, not by a tinted page behind them. That is the "editorial, not floating" direction, and it is why removing the old #f8f9fd canvas is a deliberate change rather than an oversight. */ --bf-page-bg: var(--befello-surface); --bf-surface: var(--befello-surface); --bf-border: var(--befello-border); --bf-border-strong: var(--befello-border); /* one neutral divider (§13) */ --bf-ink: var(--befello-text); --bf-ink-muted: var(--befello-text-secondary); /* Was a pale decorative grey. The system has no fourth neutral, and at 16px the masked PNG icons need the weight, so icons use secondary. */ --bf-ink-subtle: var(--befello-text-secondary); --bf-brand: var(--befello-blue); /* Blue text and blue icons ON WHITE use the dark blue: the system calls it the "stronger accessible blue text" (#0281e8 is 3.96:1, under the 4.5:1 floor; #0069c7 is 5.46:1). --bf-brand stays the bright blue for fills and dots, where 3:1 is the bar. */ --bf-accent: var(--befello-blue-dark); --bf-accent-hover: var(--befello-blue-dark); --bf-accent-active: var(--befello-blue-dark); --bf-accent-ink: var(--befello-surface); --bf-accent-soft: var(--befello-blue-soft); --bf-accent-soft-border: var(--befello-blue-soft-border); --bf-yellow: var(--befello-yellow); --bf-yellow-soft: var(--befello-yellow-soft); --bf-success: var(--befello-success); --bf-success-soft: var(--befello-success-soft); --bf-danger: var(--befello-error); /* dots, hearts, borders */ --bf-success-text: var(--befello-success-text); --bf-urgent: var(--befello-error-text); /* the same red, for text */ /* --- Type scale (design system §2) ---------------------------------- */ /* rem so browser font-size settings still work; 1rem = 16px. */ --bf-text-xs: 0.75rem; /* 12 · Caption */ --bf-text-sm: 0.875rem; /* 14 · Small / Label / UI */ --bf-text-base: 1rem; /* 16 · Body */ --bf-text-lg: 1.125rem; /* 18 · Body large */ --bf-text-h4: 1.25rem; /* 20 · Card heading */ --bf-text-h3: 1.5rem; /* 24 · Subsection */ --bf-text-h2: 2rem; /* 32 · Major section */ --bf-text-h1: 2.5rem; /* 40 · Page title */ /* --- Line heights (design system §2) -------------------------------- */ --bf-leading-h1: 1.2; --bf-leading-h3: 1.334; --bf-leading-h4: 1.4; --bf-leading-body: 1.5; --bf-leading-lg: 1.556; /* --- Spacing scale (4px base) --------------------------------------- */ --bf-space-1: var(--befello-space-1); --bf-space-2: var(--befello-space-2); --bf-space-3: var(--befello-space-3); --bf-space-4: var(--befello-space-4); --bf-space-5: var(--befello-space-5); --bf-space-6: var(--befello-space-6); --bf-space-8: var(--befello-space-8); --bf-space-10: var(--befello-space-10); --bf-space-12: var(--befello-space-12); --bf-space-16: var(--befello-space-16); /* --- Shape ---------------------------------------------------------- */ /* Nothing above 5px (§4). The three names are kept so component rules below read the same, but lg is no longer "large" — it is the 5px cap for cards, buttons, images and panels. */ --bf-radius-lg: var(--befello-radius-max); /* cards, buttons, images */ --bf-radius-md: var(--befello-radius-md); /* tags, chips, badges */ --bf-radius-sm: var(--befello-radius-md); /* §14: borders and spacing carry the hierarchy, not shadows. */ --bf-shadow-card: none; /* --- Layout --------------------------------------------------------- */ --bf-gap: var(--bf-space-12); /* 48px between major regions (§5) */ --bf-sidebar-width: 340px; --bf-container-max: 1240px; /* Raise if your GeneratePress header is sticky, e.g. calc(72px + 1.5rem) */ --bf-sticky-offset: var(--bf-space-6); } /* ------------------------------------------------------------------------- 1.1 Base — scoped, not global ------------------------------------------------------------------------- */ .befello-opportunity, .befello-opportunity * { box-sizing: border-box; } .befello-opportunity { font-family: var(--befello-font); font-size: var(--bf-text-base); color: var(--bf-ink); background: var(--bf-page-bg); line-height: var(--bf-leading-body); -webkit-font-smoothing: antialiased; } /* §2: 700–800 for prominent headings, 600 for component headings. */ .befello-opportunity h1 { font-weight: 700; line-height: var(--bf-leading-h1); color: var(--bf-ink); text-wrap: balance; } .befello-opportunity h2 { font-weight: 700; line-height: var(--bf-leading-h3); color: var(--bf-ink); text-wrap: balance; } .befello-opportunity h3 { font-weight: 600; line-height: var(--bf-leading-h4); color: var(--bf-ink); text-wrap: balance; /* progressive enhancement: nicer heading line breaks */ } /* Scoped to prose only — deliberately NOT `.befello-opportunity a`, which would outrank the button rules and repaint primary button text blue-on-blue (invisible until hover). Keeping this selector narrow is what prevents that class of bug returning. */ .befello-prose a { color: var(--bf-accent); text-underline-offset: 2px; } .befello-prose a:hover { color: var(--bf-accent-hover); } /* Scoped to prose/content images only. A blanket `.befello-opportunity img` rule (specificity 0,1,1) outranks component-level image rules like .befello-hero__image-el (0,1,0) and would force height:auto on them, collapsing fixed-ratio frames. Keep this selector narrow. */ .befello-prose img { max-width: 100%; height: auto; border-radius: var(--bf-radius-lg); /* 5px cap (§12) */ } /* ------------------------------------------------------------------------- 1.2 Hero One component, six ordered parts, one visual system: breadcrumb → chips → place/format → title → organisation → deadline The pieces that used to float apart (a badge here, "Germany" as loose text, "In person" stranded at the bottom) are now two deliberate rows: a CHIP row that carries status, and a plain META line that carries place and format. A reader scans the chips, reads the title, and finds the one supporting sentence with the date. Nothing repeats. The chip row is a single component used three times, so the three read as one control: identical height, identical padding, identical 16px icon, identical 4px radius. Only the colour and the words change, and the words always carry the state on their own. ------------------------------------------------------------------------- */ .befello-hero { max-width: var(--bf-container-max); margin: 0 auto; padding: var(--bf-space-8) var(--bf-space-6) var(--bf-space-12); } /* --- Breadcrumb --------------------------------------------------------- In the grid rather than above it. Its own row means its left edge is the content column's left edge by construction, and its baseline sits level with the top of the image — so it reads as the first line of the hero instead of a link hovering somewhere above it. justify-self keeps the hit area to the text; the row is full width, the link is not. */ .befello-hero__back { grid-area: back; justify-self: start; display: inline-flex; align-items: center; gap: var(--bf-space-2); margin-bottom: var(--bf-space-5); color: var(--bf-accent); font-size: var(--bf-text-sm); font-weight: 500; line-height: var(--bf-leading-body); text-decoration: none; /* 44px tall including the margin below, without moving the text. */ padding: var(--bf-space-2) 0; } .befello-hero__back svg { width: 1rem; height: 1rem; flex: 0 0 auto; } .befello-hero__back:hover, .befello-hero__back:focus-visible { color: var(--befello-blue-dark); text-decoration: underline; text-underline-offset: 3px; } /* --- Grid --------------------------------------------------------------- */ .befello-hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); /* The media spans both rows, so the breadcrumb's row height is set by the breadcrumb alone and the image starts level with it. */ grid-template-areas: "back media" "content media"; grid-template-rows: auto 1fr; /* stretch, not center: the image then ends exactly where the text block ends, which is what makes the two columns read as aligned rather than as two things that happen to sit side by side. */ align-items: stretch; column-gap: clamp(var(--bf-space-8), 4vw, var(--bf-space-12)); } .befello-hero--no-image .befello-hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "back" "content"; } .befello-hero__content { grid-area: content; display: flex; flex-direction: column; /* Centred against a taller image, so a short title never leaves a pocket of dead space under the metadata. */ justify-content: center; min-width: 0; } /* --- 1. Primary metadata: the chip row ---------------------------------- */ .befello-hero__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bf-space-2); margin: 0 0 var(--bf-space-5); } .befello-chip { display: inline-flex; align-items: center; gap: var(--bf-space-2); /* A fixed height is the whole point: three chips carrying different words and different icons still line up to the pixel. */ height: 32px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--bf-radius-md); /* 4px, chips (§4) */ font-size: var(--bf-text-sm); font-weight: 500; line-height: 1; white-space: nowrap; } /* Fixed box + no shrink: the icon cannot be squeezed by a long label, and it sits on the optical centre because the chip is a centred flex row. */ .befello-chip .befello-icon, .befello-hero__deadline .befello-icon { width: 16px; height: 16px; margin: 0; flex: 0 0 auto; color: currentColor; } .befello-chip__label { display: block; } /* Category — soft yellow, dark text (§7). */ .befello-chip--type { background: var(--bf-yellow-soft); color: var(--bf-ink-muted); } /* Funded — the success palette (§8). */ .befello-chip--funded { background: var(--bf-success-soft); color: var(--bf-success-text); } /* Neutral — white, one hairline, grey-black text. Carries the funding values that are facts rather than wins (partially funded, self-funded) and the open deadline state. Same box as every other chip: same height, same padding, same 16px icon, same 4px radius. Green is reserved for positive states, so an open deadline is neutral rather than green — "open" is the normal case, not an achievement. */ .befello-chip--neutral, .befello-chip--open { background: var(--bf-surface); color: var(--bf-ink-muted); border-color: var(--bf-border); } .befello-chip--urgent, .befello-chip--closed { background: var(--befello-error-soft); color: var(--bf-urgent); } /* --- 2. Title ----------------------------------------------------------- */ .befello-hero__title { margin: 0; /* H1 tops out at 40px (§2); 52px Display is the homepage hero only. */ font-size: clamp(1.75rem, 1.1rem + 2.4vw, var(--bf-text-h1)); font-weight: 700; line-height: var(--bf-leading-h1); letter-spacing: -0.02em; /* Balanced lines plus a measure: together these stop the browser breaking a long programme name one word before the end. */ max-width: 18ch; text-wrap: balance; } .befello-hero__title-main { display: block; } /* The second line is part of the same heading — one accessible name — but visually subordinate, so the programme name still leads. */ .befello-hero__title-sub { display: block; margin-top: var(--bf-space-1); color: var(--bf-ink-muted); font-size: 0.6em; font-weight: 600; line-height: var(--bf-leading-h4); letter-spacing: -0.01em; } /* --- 3. Host organisation ----------------------------------------------- */ .befello-hero__org { margin: var(--bf-space-4) 0 0; font-size: var(--bf-text-base); line-height: var(--bf-leading-body); } .befello-hero__org-lead { color: var(--bf-ink-muted); font-weight: 400; } .befello-hero__org-name { color: var(--bf-ink); font-weight: 600; } /* --- 4. Deadline sentence ------------------------------------------------ */ .befello-hero__deadline { display: flex; align-items: center; gap: var(--bf-space-2); margin: var(--bf-space-4) 0 0; color: var(--bf-ink-muted); font-size: var(--bf-text-sm); font-weight: 500; line-height: var(--bf-leading-body); } /* The date carries the emphasis, not the sentence around it. */ .befello-hero__deadline-date { color: var(--bf-ink); font-weight: 600; } /* --- Media -------------------------------------------------------------- */ .befello-hero__media { grid-area: media; /* The image is taken out of flow so it contributes NOTHING to the row height. Left in flow, a 512px-square upload stretched to a 526px column reported a 526px height, the grid row grew to match, and the text column ended up with 113px of dead space above and below it — exactly the "excessive vertical empty space" this hero is meant to avoid. Now the row is the text block's height, with a floor. */ position: relative; min-height: 340px; overflow: hidden; border-radius: var(--bf-radius-lg); /* 5px cap (§12) */ border: 1px solid var(--bf-border); /* border, not shadow (§14) */ background: var(--bf-surface); line-height: 0; /* kills the inline-descender gap under the image */ } /* Descendant selector raises specificity to 0,2,0 so theme rules targeting bare `img` (GeneratePress sets height:auto) can't collapse the fill. */ .befello-hero__media .befello-hero__image-el { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; max-width: none; } /* --- Tablet: one column, image first ------------------------------------ */ @media (max-width: 900px) { .befello-hero { padding: var(--bf-space-6) var(--bf-space-5) var(--bf-space-8); } .befello-hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "content"; row-gap: var(--bf-space-6); } .befello-hero__media { min-height: 0; aspect-ratio: 16 / 9; } .befello-hero__title { max-width: 24ch; } } /* ------------------------------------------------------------------------- 1.3 Layout ------------------------------------------------------------------------- */ .befello-opportunity__layout { max-width: var(--bf-container-max); margin: 0 auto; padding: 0 var(--bf-space-6) var(--bf-space-12); display: grid; gap: var(--bf-gap); grid-template-columns: 1fr; /* stretch, not start. The sidebar is a grid item, and with `start` it was only as tall as the card inside it — so `position: sticky` on that card had zero travel and it scrolled away for good. Stretching the column to the row height gives sticky somewhere to stick. */ align-items: stretch; } .befello-opportunity__main { min-width: 0; } /* ------------------------------------------------------------------------- 1.4 Content sections Section separation uses a hairline rule + generous padding rather than wrapping each section in its own card. Cards-inside-cards is the fastest way to make a page look templated; a shared rhythm reads as more deliberate and keeps the eye moving down the column. ------------------------------------------------------------------------- */ .befello-section { padding: var(--bf-space-8) 0; border-top: 1px solid var(--bf-border); } .befello-section:first-child { padding-top: 0; border-top: none; } .befello-section h2 { font-size: var(--bf-text-h3); /* 24/32 subsection (§2) */ line-height: var(--bf-leading-h3); letter-spacing: -0.01em; margin: 0 0 var(--bf-space-5); } /* §2: 65–75ch reading measure for long-form text. * * overflow-wrap is the fix for the one thing that actually made this page * scroll sideways on a phone: an editor pasting a bare URL. A 100-character * link has a min-content width of ~376px, which no amount of column sizing * can shrink, so the paragraph pushed every ancestor past the viewport and * the page scrolled. Breaking the word is the fix; hiding the overflow was * only ever the symptom. */ .befello-prose { max-width: 70ch; color: var(--bf-ink); font-size: var(--bf-text-base); line-height: var(--bf-leading-body); overflow-wrap: break-word; } .befello-prose p { margin: 0 0 var(--bf-space-4); } .befello-prose p:last-child { margin-bottom: 0; } .befello-prose ul, .befello-prose ol { margin: 0 0 var(--bf-space-4); padding-left: var(--bf-space-5); } .befello-prose li + li { margin-top: var(--bf-space-2); } /* Same reasoning as .befello-prose: any surface an editor types into can receive a URL, a long compound noun, or a pasted reference number. */ .befello-check-list li, .befello-doc-list li, .befello-hero__title, .befello-hero__org-name, .befello-hero__deadline, .befello-essay-card__question, .befello-essays__head h2, .befello-section h2 { overflow-wrap: break-word; } /* --- Benefits: check marks, not generic squares ------------------------- */ .befello-check-list { list-style: none; margin: 0; padding: 0; display: grid; /* minmax(0, …) is load-bearing. These are grid items, and a grid item's automatic minimum size is its min-content — which overflow-wrap does NOT reduce. One pasted compound noun therefore sized the implicit column to the width of the word and pushed the page sideways. */ grid-template-columns: minmax(0, 1fr); gap: var(--bf-space-3); } .befello-check-list li { position: relative; padding-left: var(--bf-space-6); max-width: 70ch; } /* §20.8 / §16: limited decoration. The tinted circle behind each tick was ornament — the tick alone already says "included", so the chip is gone and only the mark remains. Drawn with a rotated border rather than an icon file: at 6px a raster would blur, and this reads as part of the type rather than as a badge borrowed from an icon set. --bf-check lets a container recolour the mark without forking the component — see the criteria cards below. The default lives in the var() fallback rather than as a declaration on .befello-check-list, because a custom property set on the list itself resolves on the list and would beat the value inherited from the card around it — which is how the green card ended up drawing blue ticks. */ .befello-check-list li::after { content: ""; position: absolute; left: 0.2rem; top: 0.4em; width: 0.3rem; height: 0.6rem; border: solid var(--bf-check, var(--bf-accent)); border-width: 0 2px 2px 0; transform: rotate(45deg); } /* --- Eligibility + Benefits: the two questions, side by side ------------ "Can I apply?" and "What do I get?" are the first two things an applicant asks, and they are asked together — so they are answered together rather than as two more sections stacked down the page. auto-fit rather than a fixed two-column track: one card on its own then fills the row instead of sitting in a half-empty grid, and the same rule collapses to a single column on a narrow screen. No PHP branch and no breakpoint list to keep in step. The cards differ only by tint and tick colour. Everything structural — border, radius, padding, type — is shared, so they read as one pair. ------------------------------------------------------------------------- */ .befello-criteria__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--bf-space-5); /* start, not stretch. Stretching makes both cards as tall as the longer one, and three benefits beside four requirements left ~100px of empty tint at the bottom of the shorter card — "unnecessarily tall when there are only a few items". Top-aligned, each card is its own length, and when the two lists are similar they still line up. */ align-items: start; } .befello-criteria-card { min-width: 0; padding: var(--bf-space-5); border: 1px solid var(--bf-border); border-radius: var(--bf-radius-lg); /* 5px card (§9) */ box-shadow: var(--bf-shadow-card); /* none (§14) */ } /* Flat tints, both already in the system: the blue is the same soft blue the page uses elsewhere, the green the same soft green as the funded badge. The neutral border is shared so the tint is the only difference a reader has to decode. */ .befello-criteria-card--eligibility { background: var(--bf-accent-soft); } .befello-criteria-card--benefits { background: var(--bf-success-soft); } /* Compound selector so it outranks `.befello-section h2` (0,1,1), which would otherwise impose the 24px section size on a card heading. §2 puts card headings at H4: 20/28, weight 600. */ .befello-criteria-card .befello-criteria-card__title { margin: 0; font-size: var(--bf-text-h4); font-weight: 600; line-height: var(--bf-leading-h4); letter-spacing: -0.01em; color: var(--bf-ink); } /* The restrained accent: a short rule in the card's own colour. It is the only ornament on the card, and it is doing a job — separating the title from the list without a full-width divider. */ .befello-criteria-card__rule { display: block; width: 2rem; height: 2px; margin: var(--bf-space-3) 0 var(--bf-space-4); border-radius: var(--befello-radius-sm); background: var(--bf-check, var(--bf-accent)); } .befello-criteria-card--eligibility { --bf-check: var(--bf-accent); } .befello-criteria-card--benefits { --bf-check: var(--bf-success); } /* Hairline separators between items. Against a tint the neutral border is barely a line, which is what makes it help scanning without becoming a table. No line above the first item. */ .befello-criteria-list { gap: 0; /* The card is already a measure; a second ch cap would fight it. */ max-width: none; } .befello-criteria-list li { max-width: none; padding: var(--bf-space-3) 0 var(--bf-space-3) var(--bf-space-6); border-top: 1px solid var(--bf-border); overflow-wrap: break-word; /* long criteria must wrap, not overflow */ } .befello-criteria-list li:first-child { border-top: none; padding-top: 0; } .befello-criteria-list li:last-child { padding-bottom: 0; } /* The tick sits on the first line of the item, which moved down with the padding above. */ .befello-criteria-list li::after { top: calc(var(--bf-space-3) + 0.4em); } .befello-criteria-list li:first-child::after { top: 0.4em; } /* --- Required documents ------------------------------------------------- The icon used to repeat on every row. It carried no information there — every item in a list called "Required documents" is a document — and a column of identical marks is the opposite of scannable. It appears once now, beside the heading, and each row is numbered instead, which does say something: how many there are, and which one you are reading. Three levels of type do the work, with no card and no border per item: the name at body weight, the detail one step down and muted, the link in the accent blue. ------------------------------------------------------------------------- */ .befello-docs__heading { display: flex; align-items: center; gap: var(--bf-space-3); } /* Sized against the heading's cap height rather than its line box, so the icon reads as the same weight as the words next to it. */ .befello-docs__heading-icon { display: inline-flex; flex: 0 0 auto; color: var(--bf-ink-muted); } .befello-docs__heading-icon .befello-icon { /* em, not rem: the heading steps down to 20px on a phone and the icon goes with it, keeping the same relationship at every size. Slightly over 1em so it reads as the equal of the words rather than of their cap height. */ width: 1.1em; height: 1.1em; margin: 0; } .befello-doc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); /* see .befello-check-list */ /* Wider than the old 12px: each requirement is a block of two or three lines now, and needs air around it to read as one item. */ gap: var(--bf-space-5); counter-reset: befello-doc; } .befello-doc { counter-increment: befello-doc; position: relative; padding-left: var(--bf-space-10); max-width: 70ch; } /* The marker: the same soft-blue numbered chip the essay notes use, at 4px like every other chip on the page. Quiet enough to sit beside body text, distinct enough to find with a glance down the column. */ .befello-doc::before { content: counter(befello-doc); position: absolute; left: 0; top: 0.1em; display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; background: var(--bf-accent-soft); color: var(--bf-accent); border-radius: var(--bf-radius-md); font-size: var(--bf-text-xs); font-weight: 600; font-variant-numeric: tabular-nums; } .befello-doc__name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bf-space-2); margin: 0; font-size: var(--bf-text-base); font-weight: 600; line-height: var(--bf-leading-body); color: var(--bf-ink); overflow-wrap: break-word; } /* One step down in size, weight and colour — three signals, so the split between the document and the note about it survives on a small screen and in greyscale. */ .befello-doc__details { margin: var(--bf-space-1) 0 0; font-size: var(--bf-text-sm); font-weight: 400; line-height: var(--bf-leading-body); color: var(--bf-ink-muted); overflow-wrap: break-word; } .befello-doc__link { display: inline-flex; align-items: center; gap: var(--bf-space-2); margin-top: var(--bf-space-2); color: var(--bf-accent); font-size: var(--bf-text-sm); font-weight: 600; line-height: var(--bf-leading-body); text-decoration: underline; text-underline-offset: 3px; } .befello-doc__link:hover { color: var(--befello-blue-dark); } /* Drawn from a rotated border, like the check marks and the disclosure chevron — the library has no arrow, and this stays part of the type. */ .befello-doc__link-arrow { width: 0.35rem; height: 0.35rem; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); flex: 0 0 auto; } /* A quieter chip for a status sitting inline with body text: the standard 32px chip would outweigh the name it belongs to. Same component, same 4px, same neutral palette — only the scale changes. */ .befello-chip--sm { height: auto; padding: 2px var(--bf-space-2); font-size: var(--bf-text-xs); font-weight: 500; line-height: 1.5; } /* --- Essay questions: cards, not bullet points -------------------------- These were a numbered list hugging the left gutter, which read as raw field output rather than as the prompts an applicant has to answer. Each question is now a card: centred, self-contained, with its own word limit, because a two-part application rarely gives both parts the same allowance. Up to three sit in a static grid. Beyond three the same markup becomes a scroll-snap rail — swipe on touch, arrows and arrow keys elsewhere — so a ten-question application does not turn the page into a wall. NOTE: .befello-essays belongs to the OPPORTUNITY template. Section 2 below styles the Essay post type; different components, no overlap. ------------------------------------------------------------------------- */ .befello-essays__head { display: flex; align-items: center; justify-content: space-between; gap: var(--bf-space-4); margin-bottom: var(--bf-space-5); } .befello-essays__head h2 { margin: 0; } .befello-essays__nav { display: flex; gap: var(--bf-space-2); flex: 0 0 auto; } .befello-essays__arrow { display: inline-flex; align-items: center; justify-content: center; width: 44px; /* §17 touch target, on every breakpoint */ height: 44px; padding: 0; background: var(--bf-surface); color: var(--bf-accent); border: 1px solid var(--bf-border); border-radius: var(--bf-radius-lg); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .befello-essays__arrow svg { width: 18px; height: 18px; flex: 0 0 auto; } .befello-essays__arrow:hover { background: var(--bf-accent-soft); border-color: var(--bf-accent-soft-border); } /* Disabled rather than hidden: a control that vanishes at the end of the rail moves the other one, and the row jumps under the pointer. */ .befello-essays__arrow[disabled] { color: var(--bf-ink-subtle); background: var(--bf-surface); border-color: var(--bf-border); cursor: default; opacity: 0.45; } .befello-essays__track { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--bf-space-4); margin: 0; padding: 0; list-style: none; } .befello-essays__item { display: flex; /* so the card stretches to the tallest in the row */ min-width: 0; } /* --- The rail ---------------------------------------------------------- scroll-padding matches the track's own inline padding so a snapped card never lands half under the edge. */ .befello-essays__track--rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scroll-padding-inline: 0; /* Room for the focus ring, which would otherwise be clipped by the scroll container on the first and last card. */ padding-block: 3px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; } .befello-essays__track--rail .befello-essays__item { /* Three across, minus the two gaps between them. */ flex: 0 0 calc((100% - (2 * var(--bf-space-4))) / 3); scroll-snap-align: start; } .befello-essays__track--rail:focus-visible { outline: 2px solid var(--befello-blue); outline-offset: 2px; border-radius: var(--bf-radius-md); } /* --- The card ----------------------------------------------------------- */ .befello-essay-card { display: flex; flex-direction: column; align-items: center; gap: var(--bf-space-3); width: 100%; padding: var(--bf-space-6) var(--bf-space-5); background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: var(--bf-radius-lg); /* 5px card (§9) */ box-shadow: var(--bf-shadow-card); /* none (§14) */ text-align: center; } /* A quiet label, not a competing heading — the question is the content. */ .befello-essay-card__number { margin: 0; color: var(--bf-ink-muted); font-size: var(--bf-text-xs); font-weight: 600; line-height: var(--bf-leading-body); } .befello-essay-card__question { /* auto bottom margin pins the word limit to the bottom of the card, so the chips line up across cards of unequal question length. */ margin: 0 0 auto; max-width: 42ch; color: var(--bf-ink); font-size: var(--bf-text-base); font-weight: 500; line-height: var(--bf-leading-body); text-wrap: pretty; } /* A card with no word limit has nothing to push against, so the question would sit at the top with a pocket of space beneath it while its neighbours look balanced. Centre it instead. Where :has() is missing the question simply stays top-aligned — no layout breaks. */ .befello-essay-card:not(:has(.befello-essay-card__limit)) .befello-essay-card__question { margin-block: auto; } /* Same chip language as the hero: 4px, 14px, icon at 16px. */ .befello-essay-card__limit { display: inline-flex; align-items: center; gap: var(--bf-space-2); margin: 0; padding: 5px 10px; background: var(--bf-yellow-soft); color: var(--bf-ink-muted); border-radius: var(--bf-radius-md); font-size: var(--bf-text-sm); font-weight: 500; line-height: var(--bf-leading-body); white-space: nowrap; } .befello-essay-card__limit .befello-icon { width: 16px; height: 16px; margin: 0; flex: 0 0 auto; } /* Tablet: two across, still snapping when it is a rail. */ @media (max-width: 1023.98px) { .befello-essays__track { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } .befello-essays__track--rail .befello-essays__item { flex-basis: calc((100% - var(--bf-space-4)) / 2); } } /* ------------------------------------------------------------------------- 1.5 Important Dates — vertical timeline Three columns: date | rail (line + dot) | label. The rail cell stretches to the full row height (grid's default align-items: stretch), and the connector line is drawn inside it — so the line length is derived from the row, never a hard-coded height. Row spacing comes from padding-bottom on the CONTENT cell rather than row-gap, because gaps would create visible breaks in the connector. The date column is a fixed width so dots align in a perfectly straight vertical line regardless of how wide each date string is. ------------------------------------------------------------------------- */ .befello-timeline { --bf-timeline-date-w: 6.5rem; --bf-timeline-rail-w: 1.5rem; --bf-timeline-dot: 0.7rem; list-style: none; margin: 0; padding: 0; } .befello-timeline__item { display: grid; grid-template-columns: var(--bf-timeline-date-w) var(--bf-timeline-rail-w) minmax(0, 1fr); align-items: stretch; column-gap: var(--bf-space-3); } .befello-timeline__date { font-size: var(--bf-text-sm); font-weight: 500; color: var(--bf-ink-muted); font-variant-numeric: tabular-nums; line-height: var(--bf-leading-body); padding-top: 0.05rem; /* No white-space: nowrap. The date column is a fixed width so the dots line up, and "14 December 2026" is wider than that column — with nowrap it simply spilled out of its cell. Wrapping to two lines keeps the dots aligned and keeps the row inside the page. */ overflow-wrap: break-word; } /* Rail: dot pinned to the top, line filling the remainder of the row. */ .befello-timeline__rail { position: relative; display: flex; justify-content: center; } .befello-timeline__dot { width: var(--bf-timeline-dot); height: var(--bf-timeline-dot); margin-top: 0.45rem; border-radius: 50%; /* a status dot — inherently circular (§4) */ background: var(--bf-brand); flex-shrink: 0; z-index: 1; } .befello-timeline__rail::after { content: ""; position: absolute; top: calc(0.45rem + var(--bf-timeline-dot)); bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: var(--bf-border-strong); } /* No trailing line past the final milestone. */ .befello-timeline__item:last-child .befello-timeline__rail::after { display: none; } .befello-timeline__content { padding-bottom: var(--bf-space-6); min-width: 0; } .befello-timeline__item:last-child .befello-timeline__content { padding-bottom: 0; } .befello-timeline__label { display: block; font-size: var(--bf-text-base); font-weight: 600; color: var(--bf-ink); line-height: var(--bf-leading-body); overflow-wrap: break-word; } /* --- Fello Guidance callout -------------------------------------------- */ /* Guidance is supportive emphasis, which is the yellow's job (§3, §20.4). Keeping it out of blue also stops it competing with Apply — the only blue thing in the column should be the action. */ .befello-callout { background: var(--bf-surface); border: 1px solid var(--bf-border); border-left: 4px solid var(--bf-yellow); border-top: none; border-radius: 0 var(--befello-radius-max) var(--befello-radius-max) 0; padding: var(--bf-space-6); margin-top: var(--bf-space-8); } .befello-callout, .befello-callout .befello-prose { color: var(--bf-ink); } .befello-callout h2 { margin-top: 0; margin-bottom: var(--bf-space-3); } /* ------------------------------------------------------------------------- 1.6 Buttons — full state coverage Colour is declared on the button classes with enough specificity to beat theme link styles. A generic `.befello-opportunity a` rule (0,1,1) would outrank `.befello-btn--primary` (0,1,0) and repaint the label to match its own background — hence the explicit compound selectors here. ------------------------------------------------------------------------- */ /* §6, to the letter: 14px/600, 12px 20px padding, 5px radius, 1px border, and a 44px minimum touch target. The pill is gone (§4). */ .befello-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--bf-space-2); padding: var(--bf-space-3) var(--bf-space-5); min-height: 44px; /* touch target minimum (§6, §17) */ border-radius: var(--bf-radius-lg); /* 5px */ font-family: var(--befello-font); font-weight: 600; font-size: var(--bf-text-sm); /* 14 · Label */ line-height: var(--bf-leading-body); text-align: center; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } /* Primary */ .befello-opportunity a.befello-btn--primary, .befello-mobile-cta a.befello-btn--primary, .befello-btn--primary:link, .befello-btn--primary:visited { /* blue-dark, not the brighter brand blue. §6 specifies #0281E8, but white on it is 3.96:1 and this is the page's primary action — §3 calls blue-dark "stronger accessible blue text" for exactly this reason. White on blue-dark is 5.46:1. */ background-color: var(--befello-blue-dark); color: var(--bf-accent-ink); border-color: var(--befello-blue-dark); } .befello-opportunity a.befello-btn--primary:hover, .befello-mobile-cta a.befello-btn--primary:hover, .befello-btn--primary:hover { background-color: var(--befello-blue-darker); border-color: var(--befello-blue-darker); color: var(--bf-accent-ink); } .befello-opportunity a.befello-btn--primary:active, .befello-mobile-cta a.befello-btn--primary:active, .befello-btn--primary:active { background-color: var(--befello-blue-darker); border-color: var(--befello-blue-darker); color: var(--bf-accent-ink); } /* Secondary */ .befello-opportunity a.befello-btn--secondary, .befello-btn--secondary:link, .befello-btn--secondary:visited { background-color: var(--bf-surface); color: var(--bf-accent); border-color: var(--bf-border); } .befello-opportunity a.befello-btn--secondary:hover, .befello-btn--secondary:hover { background-color: var(--bf-accent-soft); border-color: var(--bf-accent-soft-border); color: var(--bf-accent); } .befello-opportunity a.befello-btn--secondary:active, .befello-btn--secondary:active { background-color: var(--bf-accent-soft); border-color: var(--bf-accent); color: var(--bf-accent); } .befello-btn--block { width: 100%; } .befello-opportunity__actions--footer { margin-top: var(--bf-space-8); } /* Focus — :focus-visible so mouse users don't see a ring, keyboard users do */ /* `button` was missing here, so the essay-rail arrows — the only buttons on the page — focused invisibly. */ .befello-opportunity a:focus-visible, .befello-opportunity button:focus-visible, .befello-opportunity summary:focus-visible, .befello-mobile-cta a:focus-visible { outline: 2px solid var(--befello-blue); /* §15 */ outline-offset: 2px; border-radius: var(--bf-radius-md); } /* The one documented departure from §15: a blue ring on the blue-filled primary button is invisible, and §17 requires a visible focus state, so the fill gets the ink ring instead. */ .befello-btn--primary:focus-visible { outline: 2px solid var(--bf-ink); outline-offset: 2px; } /* ------------------------------------------------------------------------- 1.7 Key Information sidebar ------------------------------------------------------------------------- */ .befello-opportunity__sidebar { min-width: 0; } .befello-key-info { background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: var(--bf-radius-lg); /* 5px card (§9) */ box-shadow: var(--bf-shadow-card); /* none (§14) */ padding: var(--bf-space-5); /* 20px internal padding (§5, §9) */ } /* §2 rules out all-caps for anything but very short labels, so this is sentence case at Label weight now — still quieter than the facts it introduces, without shouting. */ /* Compound selector so it outranks `.befello-opportunity h2` (0,1,1), which would otherwise force this back to 700. */ .befello-key-info .befello-key-info__heading { font-size: var(--bf-text-sm); font-weight: 600; line-height: var(--bf-leading-body); letter-spacing: 0; color: var(--bf-ink); margin: 0 0 var(--bf-space-4); padding-bottom: var(--bf-space-3); border-bottom: 1px solid var(--bf-border); } .befello-key-info__list { list-style: none; margin: 0; padding: 0; } .befello-key-info__row { display: grid; /* minmax(0, …) because a grid child's automatic minimum size is its min-content, which a long unbroken value would otherwise enforce. */ grid-template-columns: 1.25rem minmax(0, 1fr); grid-template-areas: "icon label" ". value"; column-gap: var(--bf-space-3); row-gap: var(--bf-space-1); padding: var(--bf-space-3) 0; border-top: 1px solid var(--bf-border); } .befello-key-info__row:first-child { border-top: none; padding-top: 0; } /* Scoped to the row. This used to be a bare `.befello-icon` rule, and its 0.2rem nudge — which exists to optically align the icon with the first line of a two-line grid cell — leaked into every other component using the class, pushing hero chip icons 3.2px off centre. */ .befello-key-info__row .befello-icon { grid-area: icon; width: 1.05rem; height: 1.05rem; margin-top: 0.2rem; /* Still honoured by the uploaded PNGs: Section 0.5 masks them and fills the box with currentColor, so they tint exactly like the SVG did. */ color: var(--bf-ink-subtle); flex: 0 0 auto; } .befello-key-info__label { grid-area: label; font-size: var(--bf-text-xs); /* 12 · Caption, sentence case (§2) */ line-height: var(--bf-leading-body); color: var(--bf-ink-muted); font-weight: 500; letter-spacing: 0; } .befello-key-info__value { grid-area: value; font-size: var(--bf-text-base); font-weight: 600; color: var(--bf-ink); line-height: var(--bf-leading-body); overflow-wrap: break-word; } /* --- Eligible nationality: one component, two states -------------------- What was wrong with the old version, in order of how much it hurt: 1. The trigger moved. `summary` was display:inline when closed and display:block when open, so the control you had just clicked jumped 160px left and grew from 71x17 to 266x24. Nothing else about the component said "these are the same thing". 2. The same data had two typographies — the first six countries at 600/--bf-ink, the rest at 500/--bf-ink-muted — so the list read as a heading followed by a footnote. 3. The label still said "+18 more" once the 18 were showing, with no way to tell it collapsed again. 4. A stray held a comma and had no rule anywhere in this stylesheet, so it rendered as body text and dangled above the link when open. 5. 71x17 is not a touch target. The fix is structural rather than cosmetic: closed and open are the same sentence in the same type, and the toggle sits in one place — underneath, left-aligned — in both states. It never moves, so there is nothing for the eye to re-find after a click. Still native
: keyboard operable, exposed as a button with an expanded state, and working with no JavaScript at all. ------------------------------------------------------------------------- */ .befello-more { display: flex; flex-direction: column; align-items: flex-start; gap: var(--bf-space-2); } /* Visual order, independent of DOM order: list first, toggle underneath. */ .befello-more__preview { order: 1; } .befello-more__disclosure { order: 2; display: flex; flex-direction: column; align-items: flex-start; gap: var(--bf-space-2); width: 100%; } .befello-more__full { order: 1; } .befello-more__disclosure > .befello-more__toggle { order: 2; } /* The short list steps aside for the full one. A plain sibling selector, which is why the disclosure comes first in the markup. */ .befello-more__disclosure[open] ~ .befello-more__preview { display: none; } /* Both runs are the value's own type — no second treatment for the same kind of information. */ .befello-more__preview, .befello-more__full { font-size: var(--bf-text-base); font-weight: 600; line-height: var(--bf-leading-body); color: var(--bf-ink); overflow-wrap: break-word; } /* --- The toggle --------------------------------------------------------- */ .befello-more__toggle { display: inline-flex; align-items: center; gap: var(--bf-space-2); /* Padding rather than a fixed box, so the label still sits on the text baseline while the hit area grows past it. */ padding: var(--bf-space-2) 0; color: var(--bf-accent); font-size: var(--bf-text-sm); font-weight: 600; line-height: var(--bf-leading-body); cursor: pointer; list-style: none; } .befello-more__toggle::-webkit-details-marker { display: none; } .befello-more__toggle:hover { text-decoration: underline; text-underline-offset: 3px; } /* One label per state, so the control always says what it will do next. */ .befello-more__label--less, .befello-more__disclosure[open] .befello-more__label--more { display: none; } .befello-more__disclosure[open] .befello-more__label--less { display: inline; } /* Drawn from a rotated border, the same way the check marks are — it belongs to the type rather than to an icon set, and the library has no chevron to borrow. */ .befello-more__chevron { width: 0.4rem; height: 0.4rem; margin-top: -0.2em; /* optical centring against the cap height */ border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform 0.15s ease; flex: 0 0 auto; } .befello-more__disclosure[open] .befello-more__chevron { margin-top: 0.2em; transform: rotate(-135deg); } .befello-key-info__actions { display: grid; gap: var(--bf-space-2); margin-top: var(--bf-space-5); padding-top: var(--bf-space-5); border-top: 1px solid var(--bf-border); } @media (min-width: 1024px) { .befello-key-info { position: sticky; top: var(--bf-sticky-offset); } } /* ------------------------------------------------------------------------- 1.8 Mobile action bar Native detail screens pair status with the primary action (price + Buy, rating + Book). Here that's deadline urgency + Apply, so the user never has to scroll back up to remember how long they have. ------------------------------------------------------------------------- */ .befello-mobile-cta { display: none; } @media (max-width: 767.98px) { .befello-mobile-cta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; /* Was a translucent blurred bar. §20.8 rules out glassmorphism, and a solid surface with one hairline reads cleaner over text. */ background: var(--bf-surface); border-top: 1px solid var(--bf-border); padding-bottom: env(safe-area-inset-bottom); } .befello-mobile-cta__inner { display: flex; align-items: center; gap: var(--bf-space-4); padding: var(--bf-space-3) var(--bf-space-4); } .befello-mobile-cta__meta { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; flex: 1; } .befello-mobile-cta__label { font-size: var(--bf-text-xs); letter-spacing: 0; color: var(--bf-ink-muted); font-weight: 500; } .befello-mobile-cta__value { display: inline-flex; align-items: center; gap: var(--bf-space-2); font-size: var(--bf-text-base); font-weight: 600; color: var(--bf-ink); line-height: var(--bf-leading-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .befello-mobile-cta__value--urgent { color: var(--bf-urgent); } .befello-mobile-cta .befello-btn { flex-shrink: 0; padding-inline: var(--bf-space-8); } } /* ------------------------------------------------------------------------- 1.9 Responsive ------------------------------------------------------------------------- */ @media (min-width: 1024px) { .befello-opportunity__layout { grid-template-columns: minmax(0, 1fr) var(--bf-sidebar-width); } } @media (max-width: 1023.98px) { .befello-opportunity__layout { grid-template-columns: 1fr; gap: var(--bf-space-8); } .befello-opportunity__sidebar { order: -1; } .befello-opportunity__main { order: 0; } } /* Tablet: two-up fact rows, since the card spans the full width here. */ @media (min-width: 768px) and (max-width: 1023.98px) { .befello-key-info__list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--bf-space-6); } .befello-key-info__row:nth-child(2) { border-top: none; padding-top: 0; } } /* ------------------------------------------------------------------------- 1.10 MOBILE (≤767px) Designed as its own layout, not a squeezed desktop one: · 16px gutters (the platform standard on both iOS and Android) instead of the desktop's 24px, so text gets maximum usable width. · Full-bleed hero image, edge to edge with no radius or border — the single strongest signal that a page was built for mobile. · Order: image → title block → facts → content. Matches the native detail-screen convention; the deadline still sits above the fold because the image is height-capped. · Facts become a dense 2-column grid rather than a tall single column, halving the scroll distance to the first content section. · Section dividers run full-bleed, so sections read as stacked blocks the way grouped lists do in native apps. · Persistent bottom action bar keeps Apply permanently reachable. ------------------------------------------------------------------------- */ @media (max-width: 767.98px) { /* --- Global mobile tuning ------------------------------------------ */ .befello-opportunity { --bf-gutter: var(--bf-space-4); /* 16px platform-standard gutter */ font-size: 1rem; /* comfortable reading size */ /* The bar measures 99px with its padding and border; 88px of clearance left the last line of a tightly-ending page underneath it. 7rem is 112px. */ padding-bottom: 7rem; /* clears the fixed action bar */ -webkit-text-size-adjust: 100%; } /* Removes the grey flash on tap that makes web pages feel non-native */ .befello-opportunity a, .befello-opportunity summary { -webkit-tap-highlight-color: transparent; } /* --- Hero ----------------------------------------------------------- Reading order on a phone: breadcrumb → image → chips → title → organisation → deadline which is the DOM order and the grid-area order, so nothing has to be reshuffled with `order` and the markup stays sensible for a screen reader and for the no-CSS case. -------------------------------------------------------------------- */ .befello-hero { padding: 0 0 var(--bf-space-6); } .befello-hero__back { margin: 0 var(--bf-gutter) var(--bf-space-4); /* §17: 44px minimum on touch. Padding, not a taller line box, so the label stays optically where it was. */ min-height: 44px; padding-block: var(--bf-space-3); } .befello-hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "back" "media" "content"; grid-template-rows: auto auto 1fr; row-gap: 0; } /* Full-bleed: cancels the gutter so the image touches both edges. The radius goes with it — a rounded corner against the viewport edge is the tell of a shrunken desktop layout. */ .befello-hero__media { min-height: 0; aspect-ratio: 16 / 9; border-radius: 0; border: none; border-bottom: 1px solid var(--bf-border); margin-bottom: var(--bf-space-5); } .befello-hero__content { padding: 0 var(--bf-gutter); } /* Chips wrap onto as many rows as they need and stay the same height. */ .befello-hero__chips { margin-bottom: var(--bf-space-4); } /* Tighter tracking and leading at large sizes keeps long programme names from eating the whole first screen. */ .befello-hero__title { font-size: clamp(1.5rem, 1.1rem + 2.4vw, var(--bf-text-h2)); line-height: var(--bf-leading-h1); letter-spacing: -0.022em; max-width: none; } .befello-hero__org { margin-top: var(--bf-space-3); } .befello-hero__deadline { margin-top: var(--bf-space-3); } /* --- Layout --------------------------------------------------------- */ .befello-opportunity__layout { padding: 0 var(--bf-gutter) var(--bf-space-6); gap: var(--bf-space-5); } /* --- Key Information: compact 2-up fact grid ------------------------ */ .befello-key-info { padding: var(--bf-space-4); /* 16px gutter-matched padding (§18) */ } .befello-key-info__heading { margin-bottom: var(--bf-space-3); padding-bottom: var(--bf-space-2); } .befello-key-info__list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--bf-space-4) var(--bf-space-3); } /* Row borders would fight a grid; spacing separates them instead. */ .befello-key-info__row { border-top: none; padding: 0; grid-template-columns: 1rem minmax(0, 1fr); column-gap: var(--bf-space-2); } /* Long values (nationality lists) get the full width back */ .befello-key-info__row:last-child { grid-column: 1 / -1; } .befello-key-info__value { font-size: var(--bf-text-sm); } .befello-key-info__row .befello-icon { width: 0.95rem; height: 0.95rem; } /* Sidebar buttons are redundant with the fixed bottom bar; Official Source stays, Apply doesn't need to appear three times. */ .befello-key-info__actions { margin-top: var(--bf-space-4); padding-top: var(--bf-space-4); } .befello-key-info__actions .befello-btn--primary { display: none; } /* --- Sections: full-bleed dividers, block rhythm -------------------- */ .befello-section { padding: var(--bf-space-6) 0; border-top: none; position: relative; } .befello-section::before { content: ""; position: absolute; top: 0; left: calc(-1 * var(--bf-gutter)); right: calc(-1 * var(--bf-gutter)); height: 1px; background: var(--bf-border); } .befello-section:first-child::before { display: none; } /* §18: scale headings down, never body text. */ .befello-section h2 { font-size: var(--bf-text-h4); /* 20/28 */ line-height: var(--bf-leading-h4); letter-spacing: -0.015em; margin-bottom: var(--bf-space-4); } .befello-prose, .befello-check-list li, .befello-doc-list li { max-width: none; /* ch-based caps are desktop measures */ } .befello-prose { line-height: 1.65; } /* --- Lists: tighter indents reclaim horizontal space ---------------- */ /* Enough for the 24px numbered chip plus a readable gap — any less and the number touches the document name. */ .befello-doc { padding-left: 2.25rem; } /* --- Essay questions: always a rail on a phone ---------------------- One card at a time, edge to edge, swiped with a thumb — the native pattern. It bleeds into the gutters so the next card peeks in from the right, which is the only affordance that reliably says "there is more this way" without an instruction. -------------------------------------------------------------------- */ .befello-essays__head { margin-bottom: var(--bf-space-4); } /* The arrows are for pointers and keyboards. On a touch screen the swipe is the control, and two buttons would just take the room the cards need. */ .befello-essays__nav { display: none; } .befello-essays__track, .befello-essays__track--rail { display: flex; gap: var(--bf-space-3); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; scrollbar-width: none; /* Full-bleed: cancels the page gutter so a card can sit against the edge, then restores it as scroll padding. */ margin-inline: calc(-1 * var(--bf-gutter)); padding-inline: var(--bf-gutter); scroll-padding-inline: var(--bf-gutter); } .befello-essays__track::-webkit-scrollbar, .befello-essays__track--rail::-webkit-scrollbar { display: none; } .befello-essays__track .befello-essays__item, .befello-essays__track--rail .befello-essays__item { /* 86%: the remainder is the next card showing through. */ flex: 0 0 86%; scroll-snap-align: start; } .befello-essay-card { padding: var(--bf-space-5) var(--bf-space-4); } /* --- Eligibility + Benefits ----------------------------------------- */ .befello-criteria__grid { gap: var(--bf-space-4); } .befello-criteria-card { padding: var(--bf-space-4); } /* --- Timeline ------------------------------------------------------- */ .befello-timeline { --bf-timeline-date-w: 4.9rem; --bf-timeline-rail-w: 1.25rem; } .befello-timeline__item { column-gap: var(--bf-space-2); } .befello-timeline__date { font-size: var(--bf-text-xs); } .befello-timeline__content { padding-bottom: var(--bf-space-5); } .befello-timeline__label { font-size: var(--bf-text-sm); } /* --- Callout: full-bleed so it reads as a distinct block ------------ */ .befello-callout { margin: var(--bf-space-6) calc(-1 * var(--bf-gutter)) 0; padding: var(--bf-space-5) var(--bf-gutter); border-radius: 0; border-right: none; } .befello-callout::before { display: none; } /* --- Touch targets -------------------------------------------------- */ .befello-btn { min-height: 48px; /* above the 44px floor; thumbs aren't precise */ font-size: var(--bf-text-base); } /* §17: 44px targets on touch. Padding only — the labels stay where they are, the hit areas grow around them. */ .befello-more__toggle, .befello-doc__link { min-height: 44px; padding-block: var(--bf-space-3); } /* The footer Apply is redundant with the persistent bar */ .befello-opportunity__actions--footer { display: none; } } /* Small phones: drop the 2-up fact grid before values start truncating. */ @media (max-width: 359.98px) { .befello-key-info__list { grid-template-columns: 1fr; } .befello-mobile-cta__inner { gap: var(--bf-space-3); } .befello-mobile-cta .befello-btn { padding-inline: var(--bf-space-5); } } /* ========================================================================= SECTION 2 — ESSAY SINGLE TEMPLATE ------------------------------------------------------------------------- Matched to the Opportunity template above, and to the same design system core: brand blue for actions, yellow for category, white surfaces separated by hairlines, 5px maximum radius, no shadows. Tokens are --bfe-* scoped to .befello-essay-page, and every one of them aliases a --befello-* core token, so the two templates cannot drift. ========================================================================= */ /* ------------------------------------------------------------------------- 2.1 Tokens Namespaced --bfe-* and scoped to .befello-essay-page, so they can never collide with Section 1's --bf-* tokens, nor with theme/plugin variables. ------------------------------------------------------------------------- */ .befello-essay-page { --bfe-bg: var(--befello-surface); --bfe-card: var(--befello-surface); --bfe-ink: var(--befello-text); --bfe-body-ink: var(--befello-text); --bfe-muted: var(--befello-text-secondary); --bfe-line: var(--befello-border); --bfe-brand: var(--befello-blue); /* fills and dots */ --bfe-blue: var(--befello-blue-dark); /* blue TEXT (5.46:1) */ --bfe-blue-dark: var(--befello-blue-dark); --bfe-blue-soft: var(--befello-blue-soft); --bfe-blue-border: var(--befello-blue-soft-border); --bfe-yellow: var(--befello-yellow); --bfe-yellow-soft: var(--befello-yellow-soft); /* Every radius collapses onto the system's cap (§4). The names are kept so the rules below still read, but there is no longer an xl or a pill — they are 5px and 4px like everything else. */ --bfe-radius-sm: var(--befello-radius-md); --bfe-radius-md: var(--befello-radius-md); --bfe-radius-lg: var(--befello-radius-max); --bfe-shadow-card: none; /* §14 */ /* Type scale (§2), in px because this section was authored in px. */ --bfe-text-caption: 12px; --bfe-text-sm: 14px; --bfe-text-base: 16px; --bfe-text-lg: 18px; --bfe-text-h4: 20px; --bfe-text-h3: 24px; --bfe-text-h2: 32px; --bfe-text-h1: 40px; font-family: var(--befello-font); font-size: var(--bfe-text-base); line-height: 1.5; color: var(--bfe-body-ink); background: var(--bfe-bg); } .befello-essay-page *, .befello-essay-page *::before, .befello-essay-page *::after { box-sizing: border-box; } .befello-essay-page .befello-essay { margin: 0; padding: 0; background: transparent; } .befello-essay-page svg { display: block; flex: 0 0 auto; } /* --------------------------------------------------------------- layout */ .essay-shell { width: min(100% - 48px, 1240px); margin-inline: auto; padding: 40px 0 88px; } .essay-layout { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 40px; align-items: start; margin-top: 48px; } /* ----------------------------------------------------------------- hero */ .essay-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px; color: var(--bfe-muted); font-size: var(--bfe-text-sm); font-weight: 600; text-decoration: none; transition: color 150ms ease; } .essay-back:hover { color: var(--bfe-blue); } .essay-hero__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 22px; } /* The same category tag as the Opportunity page (§7): one treatment for "what kind of thing this is", right across the platform. */ .essay-tag { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; color: var(--bfe-muted); background: var(--bfe-yellow-soft); border: 1px solid transparent; border-radius: var(--bfe-radius-md); font-size: var(--bfe-text-sm); font-weight: 500; line-height: 1.5; } .essay-eyebrow__text { color: var(--bfe-muted); font-size: var(--bfe-text-sm); font-weight: 500; line-height: 1.5; } .essay-eyebrow__dot { padding: 0 2px; color: var(--bfe-muted); } .essay-title { max-width: 18ch; margin: 0; color: var(--bfe-ink); /* H1 tops out at 40px (§2); 52px Display is the homepage hero only. */ font-size: clamp(28px, 4vw, var(--bfe-text-h1)); font-weight: 700; line-height: 1.2; letter-spacing: -0.028em; text-wrap: balance; } .essay-hero__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 24px; color: var(--bfe-muted); font-size: var(--bfe-text-sm); font-weight: 500; } .essay-fact { display: inline-flex; align-items: center; gap: 9px; } .essay-fact svg { width: 18px; height: 18px; color: var(--bfe-muted); /* masked PNGs inherit this — see Section 0.5 */ } .essay-hero__facts .essay-fact + .essay-fact::before { content: ""; width: 1px; height: 18px; margin-right: 18px; background: var(--bfe-line); } /* --------------------------------------------------------------- blocks */ .essay-block + .essay-block { margin-top: 40px; } .essay-block__title { margin: 0 0 6px; color: var(--bfe-ink); font-size: var(--bfe-text-h3); /* 24/32 (§2) */ font-weight: 700; line-height: 1.334; letter-spacing: -0.02em; } .essay-block__intro { margin: 0 0 20px; color: var(--bfe-muted); font-size: var(--bfe-text-base); line-height: 1.5; } /* §9: white, one hairline, 5px, no shadow, 20–24px internal padding. */ .essay-card { padding: 24px; background: var(--bfe-card); border: 1px solid var(--bfe-line); border-radius: var(--bfe-radius-lg); box-shadow: var(--bfe-shadow-card); } /* --------------------------------------------------------------- prompt */ .essay-prompt__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; } /* Sentence case, not caps (§2). */ .essay-prompt__label { color: var(--bfe-muted); font-size: var(--bfe-text-caption); font-weight: 500; letter-spacing: 0; } .essay-prompt__limit { color: var(--bfe-blue); font-size: var(--bfe-text-sm); font-weight: 600; } .essay-prompt__question { margin: 0; color: var(--bfe-ink); font-size: var(--bfe-text-h4); /* 20/28 (§2) */ font-weight: 600; line-height: 1.4; letter-spacing: -0.012em; } /* --------------------------------------------------------------- reader */ .essay-reader__content { /* §2: a 65–75ch measure is what makes long-form readable. */ max-width: 70ch; overflow-wrap: anywhere; color: var(--bfe-body-ink); font-size: var(--bfe-text-lg); /* 18 · Body large */ line-height: 1.667; } .essay-reader__content > :first-child { margin-top: 0; } .essay-reader__content > :last-child { margin-bottom: 0; } .essay-reader__content p { margin: 0 0 1.3em; } .essay-reader__content h2, .essay-reader__content h3, .essay-reader__content h4 { margin-top: 1.7em; margin-bottom: 0.5em; color: var(--bfe-ink); font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; } .essay-reader__content h2 { font-size: var(--bfe-text-h3); } .essay-reader__content h3 { font-size: var(--bfe-text-h4); } .essay-reader__content h4 { font-size: var(--bfe-text-lg); } .essay-reader__content img { max-width: 100%; height: auto; border-radius: var(--bfe-radius-lg); /* 5px cap (§12) */ } .essay-reader__content a { color: var(--bfe-blue); text-decoration-thickness: 1px; text-underline-offset: 3px; } .essay-reader__content a:hover { color: var(--bfe-blue-dark); } .essay-reader__content blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; color: var(--bfe-muted); border-left: 3px solid var(--bfe-line); } .essay-reader__content blockquote > :last-child { margin-bottom: 0; } .essay-reader__content ul, .essay-reader__content ol { margin: 0 0 1.3em; padding-left: 1.3em; } .essay-reader__content li { margin-bottom: 0.5em; } /* ---------------------------------------------------------------- notes */ /* Numbered chips matching the opportunity page's essay-question markers — 4px, not circles, because a counter is not an inherently round thing. */ .essay-notes__list { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; counter-reset: essay-note; } .essay-note { counter-increment: essay-note; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 16px; align-items: start; } .essay-note + .essay-note { padding-top: 22px; border-top: 1px solid var(--bfe-line); } .essay-note__number { display: grid; place-items: center; width: 28px; height: 28px; margin-top: 1px; color: var(--bfe-blue); background: var(--bfe-blue-soft); border-radius: var(--bfe-radius-md); font-size: var(--bfe-text-sm); font-weight: 600; } .essay-note__number::before { content: counter(essay-note); } .essay-note__body h3 { margin: 0 0 4px; color: var(--bfe-ink); font-size: var(--bfe-text-base); font-weight: 600; line-height: 1.5; } .essay-note__body p { margin: 0; color: var(--bfe-muted); font-size: var(--bfe-text-base); line-height: 1.5; } /* -------------------------------------------------------------- sidebar */ .essay-aside { position: sticky; top: 24px; } .essay-keycard { padding: 20px; background: var(--bfe-card); border: 1px solid var(--bfe-line); border-radius: var(--bfe-radius-lg); box-shadow: var(--bfe-shadow-card); } /* Sentence case at Label weight, matching the Opportunity sidebar. */ .essay-keycard__title { margin: 0 0 4px; color: var(--bfe-ink); font-size: var(--bfe-text-sm); font-weight: 600; letter-spacing: 0; } .essay-keycard__list { margin: 0; } .essay-keycard__row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--bfe-line); } .essay-keycard__icon { display: flex; margin-top: 3px; color: var(--bfe-muted); /* masked PNGs inherit this — see Section 0.5 */ } .essay-keycard__icon .befello-ico { width: 20px; height: 20px; } .essay-keycard dt, .essay-keycard dd { margin: 0; grid-column: 2; } .essay-keycard dt { margin-bottom: 4px; color: var(--bfe-muted); font-size: var(--bfe-text-caption); font-weight: 500; letter-spacing: 0; } .essay-keycard dd { overflow-wrap: anywhere; color: var(--bfe-ink); font-size: var(--bfe-text-base); font-weight: 600; line-height: 1.5; } .essay-keycard__actions { display: grid; gap: 12px; margin-top: 26px; } .essay-keycard__credit { margin: 0 0 4px; color: var(--bfe-muted); font-size: var(--bfe-text-caption); line-height: 1.5; } .essay-keycard__credit strong { display: block; color: var(--bfe-ink); font-size: var(--bfe-text-sm); font-weight: 600; } .essay-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; /* §6 touch floor */ padding: 12px 20px; border-radius: var(--bfe-radius-lg); /* 5px */ font-family: var(--befello-font); font-size: var(--bfe-text-sm); /* 14 · Label */ font-weight: 600; line-height: 20px; text-align: center; text-decoration: none; transition: background 150ms ease, color 150ms ease, border-color 150ms ease; } .essay-btn--primary { color: var(--befello-surface); background: var(--befello-blue); border: 1px solid var(--befello-blue); } .essay-btn--primary:hover { color: var(--befello-surface); background: var(--befello-blue-dark); border-color: var(--befello-blue-dark); } .essay-btn--primary:active { color: var(--befello-surface); background: var(--befello-blue-dark); border-color: var(--befello-blue-dark); } .essay-btn--ghost { color: var(--bfe-blue); background: var(--bfe-card); border: 1px solid var(--bfe-line); } .essay-btn--ghost:hover { background: var(--bfe-blue-soft); border-color: var(--bfe-blue-border); } .essay-btn--ghost:active { color: var(--bfe-blue-dark); background: var(--bfe-blue-soft); border-color: var(--bfe-blue-border); } .essay-verified { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--bfe-muted); font-size: var(--bfe-text-sm); font-weight: 500; } .essay-verified svg { width: 18px; height: 18px; /* A verified outcome is a positive semantic state (§3). */ color: var(--befello-success); /* masked PNGs inherit this — Section 0.5 */ } /* ----------------------------------------------------------------- focus */ .befello-essay-page a:focus-visible { outline: 2px solid var(--befello-blue); /* §15 */ outline-offset: 2px; border-radius: var(--bfe-radius-md); } /* Same documented exception as the Opportunity page: a blue ring on the blue fill would be invisible. */ .befello-essay-page .essay-btn--primary:focus-visible { outline: 2px solid var(--bfe-ink); } /* ------------------------------------------------------------ responsive */ @media (max-width: 1080px) { .essay-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; } .essay-aside { position: static; } .essay-title { max-width: none; } } @media (max-width: 720px) { .essay-shell { width: 100%; padding: 24px 20px 64px; } .essay-layout { margin-top: 32px; gap: 28px; } .essay-back { margin-bottom: 18px; font-size: var(--bfe-text-sm); } .essay-hero__eyebrow { gap: 10px; margin-bottom: 16px; } .essay-title { font-size: clamp(26px, 7vw, var(--bfe-text-h2)); letter-spacing: -0.026em; } .essay-hero__facts { gap: 12px; margin-top: 18px; } .essay-hero__facts .essay-fact + .essay-fact::before { margin-right: 12px; height: 15px; } .essay-block + .essay-block { margin-top: 32px; } .essay-block__title { font-size: var(--bfe-text-h4); /* §18: scale headings, not body */ line-height: 1.4; } .essay-card { padding: 20px 16px; } .essay-prompt__question { font-size: var(--bfe-text-lg); } /* Body text stays at a comfortable reading size (§18). */ .essay-reader__content { max-width: none; font-size: var(--bfe-text-base); line-height: 1.625; } .essay-reader__content h2 { font-size: var(--bfe-text-h4); } .essay-reader__content h3 { font-size: var(--bfe-text-lg); } .essay-note { grid-template-columns: 24px minmax(0, 1fr); gap: 12px; } .essay-note__number { width: 24px; height: 24px; font-size: var(--bfe-text-caption); } .essay-keycard { padding: 16px; } .essay-keycard__row { padding: 15px 0; } .essay-btn { min-height: 48px; /* above the 44px floor; thumbs aren't precise */ } } /* ========================================================================= SECTION 3 — REDUCED MOTION + PRINT (both templates) ------------------------------------------------------------------------- Consolidated here rather than duplicated per section: these are environment rules, not component rules, and both templates want the same behaviour. ========================================================================= */ @media (prefers-reduced-motion: reduce) { .befello-opportunity *, .befello-mobile-cta *, .befello-essay-page *, .befello-essay-page *::before, .befello-essay-page *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; } .befello-btn:active, .essay-btn:active { transform: none; } } /* Applicants do print these to review offline. */ @media print { body.single-essay, body.single-opportunity { background: #ffffff; } .befello-mobile-cta, .befello-key-info__actions, .befello-keycard__actions, .essay-keycard__actions, .essay-back { display: none; } .befello-opportunity__layout, .essay-layout { display: block; } .befello-key-info, .essay-keycard, .essay-card { box-shadow: none; break-inside: avoid; margin-bottom: var(--bf-space-6, 1.5rem); } .befello-timeline__item, .essay-note { break-inside: avoid; } }