/* Theme Name: Lucas Rey Theme URI: https://lucasrey.com Description: The site's own theme. Generated by app/local/build_theme.py from lucas-rey plus app/theme-next. Do not edit anything in this directory: it is output, and the next build overwrites it. Author: Lucas Rey Version: 1.12.6 Requires PHP: 8.1 Text Domain: lucas-rey Everything below this header is the site's real stylesheet, carried over from lucas-rey unchanged. It has to live at the theme root: includes/lr-assets.php serves this file whenever assets/css/style.min.css is stale, so a root style.css holding only a header would leave the site unstyled. Do not put a comment terminator inside this header. */ /* Inter is loaded via wp_enqueue_style('lr-google-fonts') in includes/lr-assets.php, a render-blocking @import here would delay first paint, so it lives in the as a parallel instead. */ /* Property ordering convention (within each rule): Layout/Positioning -> Box Model -> Typography -> Visuals -> Effects/Misc. */ /* This declares five layers and fixes their priority order. */ @layer reset, tokens, primitives, components, adapter; /* ========================================================================== LAYER: RESET -------------------------------------------------------------------------- Purpose: Establish a consistent baseline across all browsers by removing default browser styling and normalising common HTML elements. Contains: • box-sizing • default margins and padding • typography resets • image and media defaults • form element normalisation • accessibility defaults Never place: • colours • spacing scales • layouts • components • WordPress overrides ========================================================================== */ @layer reset { /* ========================================================= 1. SAFETY, GLOBAL RESETS & ACCESSIBILITY ========================================================= */ html { overflow-x: hidden; scroll-behavior: smooth; scroll-padding-top: 120px; /* Reserve scrollbar gutter so layout does not shift horizontally between short pages (no scrollbar) and long pages (scrollbar visible). No-op on platforms with overlay scrollbars (macOS, iOS, modern Android). */ scrollbar-gutter: stable; /* Firefox custom scrollbar support */ scrollbar-width: thin; scrollbar-color: rgba(var(--lr-color-text-muted-rgb), 0.4) var(--lr-color-bg-section); /* Prevent iOS Safari from auto-inflating text in landscape orientation, which silently breaks our typography rhythm. The unprefixed property is for spec compliance, the -webkit- prefix is what iOS actually reads today. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { /* Cream, deliberately NOT --lr-color-bg-light: that token is the soft panel tint used by math blocks, panels and table headers, which still need to sit visibly *on* the page. The cream body is one half of the section alternation (brief §3A, restacked onto the two-band cream/blue scheme); --lr-color-band-blue is the other. Pure white is no longer a ground at all, it now belongs to cards, so a white card reads as raised on either band without needing a shadow. */ background-color: var(--lr-color-band-cream); /* Both families are now loaded as variable fonts carrying an optical size axis (see includes/lr-assets.php), so glyph contrast and spacing adapt to the rendered size. This is the default, stated explicitly so it is not switched off by accident. */ font-optical-sizing: auto; /* Real italic and the full weight range are loaded, so the browser never needs to fake either. Faux styles, a slanted upright, or an emboldened outline, are the clearest giveaway of a page that has not had its type set properly. Guarded for MathJax below. */ font-synthesis: none; margin: 0; padding: 0; width: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; accent-color: var(--lr-color-accent); text-wrap: pretty; overflow-wrap: break-word; hyphens: manual; /* Suppress default mobile tap highlight */ -webkit-tap-highlight-color: transparent; } body, button, input, select, textarea { font-family: var(--lr-font-family) !important; } /* Headings render in the serif display face. Class selectors are included alongside element selectors because .lr-display/.lr-title/.lr-heading/ .lr-subheading are reusable primitives sometimes applied to non-heading elements. Deliberately NOT !important. Astra never targets headings with font-family (only `body`), so headings reach here by inheritance and a plain layered declaration that matches the element directly already wins. Marking it important would make it unbeatable by later layers, cascade layers invert for important declarations, so an important reset-layer rule outranks every component-layer rule, which would stop .lr-eyebrow and other components opting into the monospace face. */ h1, h2, h3, h4, h5, h6, .wp-block-heading, .entry-title, .site-title, .lr-display, .lr-title, .lr-heading, .lr-subheading { font-family: var(--lr-font-heading); } .site { overflow-x: hidden; /* Safely scopes horizontal bounds */ } /* MathJax ships its own font set and leans on synthesis for some bold/italic math variants. font-synthesis is inherited, so the body rule above would reach into every equation on the ESAT papers and could silently flatten emphasis in the maths. Restore the default inside rendered math only. */ mjx-container, mjx-container * { font-synthesis: auto; } *, *::before, *::after { box-sizing: border-box; } img, .wp-block-image img, figure img, .entry-content img { display: block; max-width: 100% !important; height: auto !important; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; word-break: keep-all; hyphens: none; overflow-wrap: normal; /* Keep words whole by default */ } /* Fallback: Only allow harsh word breaks on tiny mobile screens */ @media (max-width: 480px) { h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; } } /* Custom Text Selection */ ::selection { background-color: var(--lr-color-accent); color: #ffffff; } /* Keyboard Accessibility Focus Rings --lr-shadow-focus-ring is an OUTER box-shadow, which clip-path removes along with everything else an element paints outside its polygon. The chamfered CTAs therefore have to supply their own inset ring (see the button rules in the adapter layer), and because layer precedence inverts for important declarations, this reset-layer rule would otherwise outrank those adapter rules and reinstate the very outer ring that gets clipped, leaving the primary call to action with no visible keyboard focus at all. The chamfered classes are excluded here so the adapter rules can own focus for them. Anything given a clip-path in future must be added to these exclusions too. */ a:where(:not(.wp-block-button__link):not(.lr-btn-primary):not(.lr-btn-outline)):focus-visible, button:where(:not(.wp-block-button__link):not(.lr-btn-primary):not(.lr-btn-outline)):focus-visible, .wp-element-button:where(:not(.wp-block-button__link):not(.lr-btn-primary):not(.lr-btn-outline)):focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a.lr-tag:focus-visible, a.wp-block-tag:focus-visible, a.pill:focus-visible, a.lr-ms:focus-visible, a.lr-doi:focus-visible, .lr-tooltip:focus-visible { outline: none !important; box-shadow: var(--lr-shadow-focus-ring) !important; border-radius: var(--lr-radius-small); transition: box-shadow var(--lr-duration-moderate) var(--lr-easing-mechanical) !important; } /* Forced Colors Mode (Windows high-contrast). System swaps colours wholesale and box-shadows do not render, so we re-introduce a real outline for keyboard focus. CanvasText resolves to the user's preferred foreground colour. */ @media (forced-colors: active) { a:focus-visible, button:focus-visible, .wp-element-button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a.lr-tag:focus-visible, a.wp-block-tag:focus-visible, a.pill:focus-visible, a.lr-ms:focus-visible, a.lr-doi:focus-visible, .lr-tooltip:focus-visible { outline: 2px solid CanvasText !important; outline-offset: 2px; box-shadow: none !important; } } /* Custom Mechanical Scrollbar (Webkit) UPGRADE v1.4: Enhanced scrollbar with hover expansion, thumb widens from 8px to 12px on hover, accent intensifies. */ ::-webkit-scrollbar { width: 10px; background-color: var(--lr-color-bg-section); transition: width var(--lr-duration-base) var(--lr-easing-standard); } ::-webkit-scrollbar-thumb { background-color: rgba(var(--lr-color-text-muted-rgb), 0.25); border-radius: 10px; border: 2px solid var(--lr-color-bg-section); transition: background-color var(--lr-duration-base) var(--lr-easing-standard); } ::-webkit-scrollbar-thumb:hover { background-color: var(--lr-color-accent); border-width: 1px; } } /* ========================================================================== LAYER: TOKENS -------------------------------------------------------------------------- Purpose: Define the design system. This layer contains the project's reusable design decisions as CSS custom properties (design tokens). Contains: • colour palette • typography scale • spacing scale • border radii • shadows • z-index values • animation timings • breakpoints (if stored as variables) Never place: • component styles • layouts • selectors with visual styling ========================================================================== */ @layer tokens { /* ========================================================= 2. CSS TOKENS ========================================================= */ :root { /* TYPOGRAPHY */ /* "Inter Fallback" / "Source Serif 4 Fallback" are local system faces (Arial, Georgia) wrapped in size-adjust/ascent/descent overrides so their lines measure the same as the web font; declared alongside the self-hosted @font-face rules in includes/lr-fonts.php. They sit immediately after the web font so the pre-swap render lands on the matched face and the swap itself does not move layout. */ --lr-font-family: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /* Display/heading face, a serif pairing reads editorial-academic rather than generic-SaaS; body copy and UI controls stay on Inter for legibility. Loaded alongside Inter in includes/lr-assets.php. */ --lr-font-heading: 'Source Serif 4', 'Source Serif 4 Fallback', Georgia, 'Times New Roman', serif; /* Technical/blueprint face. Per the platform design brief (reference_websites/combined_analysis_report.md §3C), structural metadata, section numbers, "[01]"-style markers, category labels, is set in monospace to evoke engineering schematics. IBM Plex Mono rather than Courier New: same blueprint read, contemporary drawing. */ --lr-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Courier New', monospace; /* TYPE SCALE (added 1.11.2) Before this, the stylesheet carried 135 font-size declarations across 41 distinct values: 25 fixed and 16 fluid. That is not a scale, it is accumulation, and it is why sizes one step apart in the design were sometimes 0.4px apart in the CSS. Ten steps, in rem so the browser's own font-size setting is respected. Ratio is roughly 1.2 through the reading sizes, opening to 1.25 at the display end where a wider interval reads as hierarchy rather than as a mistake. The four display steps are fluid: they interpolate on viewport width so a heading does not have to be re-declared per breakpoint. Every existing fixed value maps to a step within 2px, and all but two within 1px, so adopting these is not a redesign of the page. The mapping table is in docs/CSS-CASCADE-FINDINGS.md. Note --lr-text-sm already had one reference, at the .lr-meta rule, written as var(--lr-text-sm, 0.9rem) against a token that did not exist. Defining it here retires that fallback and moves that one site by -0.4px, which is the intended consolidation rather than a regression. --------------------------------------------------------------- READ THIS BEFORE CONVERTING ANY px FONT-SIZE TO ONE OF THESE. 1rem is NOT 16px on this site. Astra's Customizer sets a responsive root font-size and emits html{font-size:91.2%} below its mobile breakpoint, so the root computes to 14.592px at a 390px viewport, measured. Every rem value therefore shrinks by about 8.8 percent on mobile, which is Astra's deliberate global mobile type reduction. The consequence is that a px font-size in this file is not automatically a mistake. Several are there precisely to OPT OUT of that shrink, and converting them to rem is a regression rather than an accessibility improvement: - the (pointer: coarse) and (max-width: 782px) form-control rules need an absolute 16px, because the iOS zoom-on-focus threshold is absolute; 1rem falls under it on mobile and iOS then zooms - the (max-width: 480px) .lr-btn rule sets 16px specifically to hold the CTA at full size against the 91.2% root That was learned the expensive way in 1.11.2: eleven px sizes were converted to these tokens, and the primary CTA buttons silently went from 16px to 14.592px at 390px. All eleven were reverted. These tokens are therefore DECLARED but not yet adopted: adopting them is a deliberate typographic decision about whether a given piece of text should ride Astra's mobile shrink, and each one needs checking at a real mobile viewport, not assumed from the desktop rendering. */ --lr-text-2xs: 0.6875rem; /* 11px mono micro labels */ --lr-text-xs: 0.75rem; /* 12px captions, metadata */ --lr-text-sm: 0.875rem; /* 14px secondary copy, nav */ --lr-text-base: 1rem; /* 16px body copy */ --lr-text-md: 1.125rem; /* 18px lead paragraphs */ --lr-text-lg: clamp(1.25rem, 1.18rem + 0.35vw, 1.5rem); /* 20 to 24px h4, card titles */ --lr-text-xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem); /* 24 to 30px h3 */ --lr-text-2xl: clamp(1.875rem, 1.6rem + 1.35vw, 2.5rem); /* 30 to 40px h2 */ --lr-text-3xl: clamp(2.25rem, 1.8rem + 2.25vw, 3.25rem); /* 36 to 52px h1 */ --lr-text-4xl: clamp(2.75rem, 2rem + 3.75vw, 4.5rem); /* 44 to 72px hero display */ /* LINE HEIGHT Inter and Source Serif 4 do not want the same line-height at the same size: the serif has the larger x-height here and carries more colour, so the display steps take the tighter figure. 1.6 for body is what the design brief asks for in section 4. Graduated by size, which is the point. The stylesheet previously ran one --lr-line-height-heading of 1.15 across h1, h2 and h3 alike, so a 44px h1 and a 23px h3 were set to the same ratio. A large display line wants a tighter ratio because its leading is already generous in absolute terms; a small heading that wraps to two lines needs a looser one or the lines collide. --lr-line-height-heading is kept at 1.15 for anything still referencing it. */ --lr-leading-display: 1.1; /* hero and h1 */ --lr-leading-h2: 1.2; --lr-leading-h3: 1.3; --lr-leading-ui: 1.5; /* nav, buttons, list items, captions */ --lr-leading-body: 1.6; /* prose, the figure the design brief asks for */ /* TRACKING A serif display face set large needs negative tracking or it reads loose; the brief asks for -0.01em in section 5A and this extends that across the display steps in proportion to size. Mono and all-caps labels want the opposite. */ --lr-tracking-display: -0.02em; /* 3xl, 4xl */ --lr-tracking-2xl: -0.015em; --lr-tracking-xl: -0.01em; --lr-tracking-normal: 0; --lr-tracking-label: 0.08em; /* mono blueprint labels, all-caps */ /* COLORS */ --lr-color-text-main: #1f374e; /* Alias for legacy `var(--lr-color-text)` references; keep in sync with --lr-color-text-main. */ --lr-color-text: #1f374e; --lr-color-text-heading: #1f374e; /* Re-derived for the two-band scheme. The blue band is the darker of the two grounds, so it sets the floor: an earlier candidate (#5c7186) held 4.96:1 on cream but only 4.35:1 on blue, an AA failure for every muted lead and caption sitting on a band. This value holds 5.57:1 on cream, 4.89:1 on the blue band and 5.67:1 on white. */ --lr-color-text-muted: #55697d; --lr-color-text-subtle: #3e5871; --lr-color-bg-light: #eaf6fc; /* Hardcoded, not routed through --ast-global-color-4/-5: same reasoning as --lr-color-accent below, Astra's Customizer has concrete values stored for these, so the var() fallbacks were silently never applying. The alternation described by brief §3A (pure-white body against one soft cool grey band) has been restacked onto a warm two-band scheme: the body is now cream and the band is pale blue, with cards sitting pure white on top of both. The deep section padding is still what makes the alternation read. */ --lr-color-bg-card: #ffffff; --lr-color-bg-section: var(--lr-color-band-blue); /* SECTION BANDS: the two full-bleed grounds the page alternates between. Cream is the body default, the band is the alternate. Cards are white on both, which is what keeps a white card legible on either. 1.11.5: the band moved from a pale blue #d5f3ff to a warm oat #f0eee6. Why. The design brief specifies a NEUTRAL for this role, "alternating pure white and cool-grey" in section 3A, and the saturated blue was the one element of the palette that read as generic-SaaS rather than collegiate. Oat is also the ground the owner was pointing at when citing claude.ai, where the warmth of the paper does most of the work that people attribute to the typeface. The swap spends nothing. Measured against every text colour that lands on a band, old value first: body #1f374e 10.55 -> 10.54 muted #55697d 4.89 -> 4.88 subtle #3e5871 6.37 -> 6.37 link #1a56c4 5.70 -> 5.70 accent #002147 9.65 -> 9.64 code #c9246d 4.57 -> 4.57 Worst case is 4.57 either way, so no margin is lost, and separation from the cream page is 1.14 in both, so the alternation reads exactly as strongly as before. Candidates were compared before choosing: the brief's own #f9fafb measures 5.08 but separates at only 1.03, which is too little to read as a band at all. Reverting is one value. The old name is kept as an alias below because a rule or a page may still reference it, and an undefined custom property invalidates the whole declaration it appears in. */ --lr-color-band-cream: #fffdf6; --lr-color-band: #f0eee6; /* Historical name, retained so nothing referencing it breaks. The blue it was named for is gone; the ink frame keeps its own pale blue in --lr-color-on-ink-accent, which is a different job on a dark ground. */ --lr-color-band-blue: var(--lr-color-band); /* Alias for a name used by published page content (the

tint on 38 ESAT solution pages) that was never declared here. An undefined var() invalidates the whole declaration, so those summaries were rendering with no tint at all. */ --lr-color-background-subtle: var(--lr-color-bg-section); /* Hardcoded rather than routed through --ast-global-color-0: Astra's Customizer already has a concrete value stored for that variable, so a var() fallback here would never actually apply. */ /* Deep indigo. AA on every ground it lands on: 11.00:1 on cream, 9.65:1 on the blue band, 11.20:1 on white, and it carries white text at 11.20:1 when used as a solid button fill. */ --lr-color-accent: #002147; /* Accent companions: hover state, soft wash, and an rgb triplet for rgba()/color-mix() use. */ --lr-color-accent-hover: #123c66; /* Re-derived from Oxford blue in 1.12.1. This was #efedf8, mixed from the old violet, and it survived the retint while feeding every accent hover wash on the site, so those hovers were still tinted purple against a navy palette. Measured against every text colour that lands on it, violet value first: body 10.58 to 10.90, muted 4.90 to 5.05, link 5.72 to 5.89, accent 13.86 to 14.28, inline code 4.58 to 4.72. Worst case rises from 4.58 to 4.72, so it gains a little headroom as well. */ --lr-color-accent-wash: #eef2f8; --lr-color-accent-rgb: 0, 33, 71; --lr-color-border-subtle: #dce6ec; /* INK FRAME, the dark chrome that carries the Technical-HUD half of the brief (§2: Brittany Chiang's dark frame, Mauricio Juba's console plates). Content stays editorial-light; the ink lives in the frame (header, footer) and in interior-page masthead plates. 1.12.0: the frame is Oxford blue, replacing the indigo #362e83 that preceded it. The indigo was the site's dominant signature, carrying the full-width header, every hero plate and every solid button against a warm cream page, and it read as generic SaaS rather than the Collegiate Editorial the brief asks for. #002147 is Oxford's own blue, on a site whose eyebrow reads OXFORD RESEARCH AND COMPUTATIONAL ENGINEERING, so it is the colour the page is already about. It costs nothing and gains headroom. Every on-ink value re-measured, indigo first: on-ink 11.00 to 15.77, on-ink-muted 6.60 to 9.46, on-ink-accent 9.65 to 13.83. All AA, all better than before. */ --lr-color-ink: #002147; /* Ink rgb triplet, paired with --lr-color-ink. Exists so translucent ink surfaces (the frosted sticky header) can be built with rgba(var(--lr-color-ink-rgb), N) instead of a hardcoded literal, the frosted header shipped rgba(17,29,54,…) from the navy era and visibly changed hue the moment the page scrolled. Keep in sync. */ --lr-color-ink-rgb: 0, 33, 71; --lr-color-on-ink: #fffdf6; --lr-color-on-ink-muted: #bccadd; --lr-color-on-ink-accent: #d5f3ff; --lr-color-on-ink-accent-rgb: 213, 243, 255; /* Muted-grey rgb triplet, paired with --lr-color-text-muted (#55697d). Used by scrollbar tints and other neutral surfaces to avoid hardcoding the colour. Keep in sync. */ --lr-color-text-muted-rgb: 85, 105, 125; /* Fallback / compatibility tokens for ESAT pages */ --lr-color-primary: var(--lr-color-accent); --lr-color-primary-subtle: rgba(var(--lr-color-accent-rgb), 0.1); --lr-color-text-dark: #1f374e; --lr-color-background-white: #ffffff; /* Semantic link aliases. Components should prefer these over --lr-color-accent when the role is specifically a hyperlink colour, so future re-themes can shift link tone without touching every component. The hyperlink tone is no longer the accent. As accent, links rendered at 1.09:1 against #1f374e body copy under the old indigo, and at 1.31:1 under Oxford blue: still the same colour to the eye either way, with the underline carrying the entire link affordance. The hyperlink role now sits on a clear azure that is separated from the body navy by HUE rather than by lightness: no link colour can clear both 3:1 against this body text and 4.5:1 against these grounds (the §22b arithmetic), so hue separation + the policy underline is the legible compromise. Measured: 6.62:1 on white, 6.50:1 on cream, 5.70:1 on the band, 6.02:1 on bg-light, 5.72:1 on the accent wash, AA everywhere with headroom. Hover darkens to 8.69:1 / 8.54:1 / 7.49:1 / 7.90:1 / 7.51:1 on the same five grounds. The link colour did NOT move with the palette change: buttons, tags and the ink frame took Oxford blue, hyperlinks keep this azure, which is what separates them by hue. */ --lr-color-link: #1a56c4; --lr-color-link-hover: #1546a0; /* Inline-code accent. Pinned here so high-contrast mode can override it cleanly. Re-checked after --lr-color-bg-light was retinted: it holds 4.82:1 against the new chip background inline code actually renders on, 5.21:1 on cream and 5.31:1 on white. */ --lr-color-code: #c9246d; /* Centralised focus-ring colours. The composed --lr-shadow-focus-ring token below references them so all focus rings stay in lock-step. */ --lr-color-focus-ring: rgba(var(--lr-color-accent-rgb), 0.4); --lr-color-focus-glow: rgba(var(--lr-color-accent-rgb), 0.12); /* Prose container width for body copy on long technical pages. Informational token: components opt-in by setting `max-width: var(--lr-prose-max-width)`. */ --lr-prose-max-width: 70ch; --lr-content-max: 48rem; --lr-max-width-centered: 900px; --lr-color-surface-muted: #fffdf6; --lr-padding-inline-shell: clamp(16px, 3vw, 20px); /* Alias. Page content authored in the editor references var(--lr-padding-inline), which has never existed, the real token is --lr-padding-inline-shell above. A reference to an undefined custom property is invalid at computed-value time, so the whole declaration is dropped and those containers silently fall back to zero horizontal padding (verified live: a homepage section computing 0px/0px where the author asked for the shell gutter). Defining the alias repairs the authored intent without editing page content in the database. */ --lr-padding-inline: var(--lr-padding-inline-shell); /* --- Pedagogical Callout Tokens --- */ --lr-callout-edge-color: var(--lr-color-accent); --lr-callout-bg-color: #ffffff; --lr-callout-shadow-idle: rgba(15, 23, 42, 0.04); /* SPACING & SIZING (8px Scale) */ --lr-space-1: 4px; --lr-space-2: 8px; --lr-space-3: 12px; --lr-space-4: 16px; --lr-space-5: 24px; --lr-space-6: 32px; --lr-space-7: 48px; --lr-space-8: 64px; --lr-space-9: 80px; --lr-space-10: 96px; --lr-max-width-card: 1140px; /* Design brief §3A names spacing as "the single most significant contributor" to the premium editorial feel: 80 to 120px block padding on desktop, easing to ~48px on mobile. */ --lr-padding-section: clamp(48px, 9vw, 128px); --lr-padding-card: clamp(20px, 2.5vw, 32px); /* closer to 24px/32px scale */ /* CHAMFER (industrial corner cut) Brief §3C / §5B: angled corners instead of pill radii to signal an aerospace/console lineage. NO LONGER APPLIED BY THIS STYLESHEET. The button rules that used it have moved to --lr-radius-small to match the rounded control shape of the reference design. The token is kept declared because page content authored in the editor may reference it, and an undefined custom property invalidates the whole declaration it appears in. If you do reapply it: clip-path clips ALL of an element's painting, including outer box-shadow and focus outlines, so anything chamfered must carry its focus ring as an INSET shadow or it becomes a keyboard trap. */ /* BORDER RADIUS The reference palette pairs a flat, shadow-less surface with a very generous corner: cards at 40px, media at 30px, controls at 13px, and anything tag-shaped run all the way to a stadium. The large radius is only legible because the card border is a full-strength 2px outline (see --lr-border-card), soften the border and the corners just read as blur. The two are a pair; change them together. */ --lr-radius-large: 10px; --lr-radius-medium: 6px; --lr-radius-small: 4px; --lr-radius-pill: 999px; --lr-radius-tag: 999px; --lr-radius-image: 8px; /* ELEVATION, deliberately flat. The previous scheme stacked four-to-six near-invisible micro-shadows per surface (brief §3, Greenhill reference) to imply depth. The reference design separates surfaces the opposite way: no shadow at all, and a hard 2px outline instead. Mixing the two reads as a card that is both floating and stamped, so the elevation tokens are resolved to `none` rather than deleted, every `box-shadow: var(--lr-shadow-*)` call site across the file stays valid and simply paints nothing. Two are deliberately NOT flattened: --lr-shadow-focus-ring below, which is an accessibility affordance rather than decoration, and --lr-shadow-editorial, which large hero photography still needs to sit against the cream ground. */ --lr-shadow-rest: none; --lr-shadow-active: none; --lr-shadow-hover-card: none; --lr-shadow-hover-button: none; --lr-shadow-hover-image: none; --lr-shadow-image: none; /* Layered depth shadow for large editorial/hero photography, a tight contact shadow plus a wide soft ambient one, tinted toward the ink navy rather than neutral black so it reads warmer against the site's cool light backgrounds. */ --lr-shadow-editorial: 0 2px 6px rgba(20, 33, 61, 0.06), 0 20px 40px -12px rgba(20, 33, 61, 0.22); /* Composed focus ring: white spacer + accent ring + soft outer glow. Used by all keyboard-focus rules so the visual is exactly identical everywhere. Forced Colors Mode (Windows high-contrast) overrides this in §1 with a real outline. */ --lr-shadow-focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px var(--lr-color-focus-ring), 0 0 12px var(--lr-color-focus-glow); /* CARD-SURFACE REFINEMENT A slightly cooler border than the neutral grey so large surfaces harmonise with the blue accent system; a shared accent hover-border so every interactive surface reacts the same way; and a soft lift shadow that lets non-card panels share the card family's depth. */ --lr-color-border-card: #1f374e; --lr-color-border-hover: var(--lr-color-accent); /* Full card-outline shorthand. Card rules call `border: var(--lr-border-card)` rather than `Npx solid var(--lr-color-border-card)` so the WIDTH is centralised too, the outline being 2px rather than a hairline is the whole reason the 40px corner reads as a shape instead of a smudge, and that was previously hardcoded at eleven call sites. */ --lr-border-card: 1px solid var(--lr-color-border-card); /* Secondary-button fill. A token rather than a literal because the ink contexts remap --lr-color-accent to the pale on-ink blue; a hardcoded white fill there put pale-blue text on white at 1.16:1, invisible. The ink block remaps this to transparent so the outline button keeps its dark-plate treatment. */ --lr-color-btn-outline-bg: #ffffff; --lr-color-btn-outline-hover-bg: var(--lr-color-accent-wash); /* Ink-strength hairline for dividers and table rules, where a full 2px outline would be far too loud. */ /* Darkened from #c63838 (3.76:1 on white, an AA failure). This colour is used as label text on the booking portal's destructive actions, e.g. "Cancel lesson", so it has to be legible, not just indicative. Now 5.22:1 on white and 4.77:1 on the danger wash. Border/edge uses are decorative and unaffected. */ --lr-color-danger: #c63838; --lr-color-danger-wash: #fef2f2; --lr-shadow-hover-panel: none; /* FLUID GAPS */ --lr-gap-section: clamp(56px, 7vw, 104px); --lr-gap-large: clamp(24px, 4vw, 40px); --lr-gap-medium: clamp(16px, 2.5vw, 24px); --lr-gap-small: clamp(10px, 1.5vw, 14px); --lr-gap-tight: 8px; --lr-gap-button: 12px; --lr-gap-card: clamp(24px, 2.5vw, 32px); /* 8px scale compatible */ /* FLUID TYPOGRAPHY The hero value matches the homepage hero's inline clamp exactly. That inline style was, until now, the only place the intended display scale actually rendered: Astra sets h1/h2/h3 sizes in unlayered CSS, which outranks every layered rule here, so the rest of the site fell back to Astra's 36/30/24px defaults. The heading rules in the primitives layer are marked !important to reclaim the scale site-wide. */ /* Top end brought down. The hero was 72px against TutorCruncher's 40px and claude.ai's 36px, neither reference shouts, and a 72px display over a 38px h2 also left a gap in the middle of the scale that nothing occupied. The rendered scale is now 56/44/34/23/20/16, which keeps the serif's presence without the shout and gives --lr-font-size-lead a real place in the run. */ --lr-font-size-hero: clamp(40px, 5vw, 56px); --lr-font-size-h1: clamp(34px, 4vw, 44px); --lr-font-size-h2: clamp(26px, 3vw, 34px); --lr-font-size-h3: clamp(20px, 2.2vw, 23px); /* Sub-heading step between h3 and body (used by .lr-timeline-title). Referenced before it was defined, which left those titles at the inherited size. */ --lr-font-size-h4: clamp(18px, 1.8vw, 20px); --lr-font-size-body: 16px; --lr-font-size-small: 14px; --lr-font-size-tag: 12px; --lr-font-size-caption: 12px; --lr-font-size-lead: clamp(18px, 2.2vw, 20px); --lr-font-size-figcaption: 14px; --lr-line-height-heading: 1.15; /* 1.6 was looser than either reference (TutorCruncher 1.40 to 1.50, claude.ai 1.50) at a comparable measure. */ --lr-line-height-body: 1.6; --lr-line-height-small: 1.5; --lr-font-size-label: 18px; /* em-based so the optical correction scales with the heading rather than over-tightening small headings and under-tightening the hero (brief §4: headings carry ~-0.02em). */ --lr-letter-spacing-tight: -0.02em; /* Wide tracking is what makes short monospace labels read as blueprint annotation rather than code (brief §3C / §5C). */ --lr-letter-spacing-mono: 0.14em; --lr-margin-bottom-heading: 16px; --lr-margin-bottom-para: 16px; --lr-margin-bottom-tag: 24px; /* MOTION */ /* Durations. Shortened across the board against the reference designs: claude.ai's whole scale is 60/120/200/300/450ms with a 150ms default, and its hover feedback sits at 120ms. The old scale topped out at 620ms and put card hover on 480ms, which is long enough to read as lag rather than as response. */ --lr-duration-press: 0.1s; --lr-duration-fast: 0.15s; --lr-duration-base: 0.2s; --lr-duration-moderate: 0.28s; --lr-duration-slow: 0.4s; --lr-duration-slower: 0.5s; --lr-easing-standard: cubic-bezier(0.33, 0, 0.2, 1); --lr-easing-smooth: cubic-bezier(0.4, 0, 0.2, 1); --lr-easing-mechanical: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Transition shorthand tokens. Use for new code; existing long-form transition: declarations are intentionally left as-is to avoid a risky global rewrite. - base: short interactive feedback (hover tints, focus rings). - pop: card lift / image scale / panel pop animations. */ --lr-transition-base: var(--lr-duration-base) var(--lr-easing-standard); /* Card/tag hover. Was --lr-duration-slow (480ms); a hover response that slow feels like the page is catching up with the cursor. */ --lr-transition-pop: var(--lr-duration-fast) var(--lr-easing-mechanical); /* Card lift, shared interactive motion (calmer than legacy -8px / scale 1.02). */ --lr-lift-card-hover: -2px; --lr-lift-card-active: -1px; --lr-scale-card-active: 0.99; /* REMOVED IN 1.11.2: the tokens of the 1.10.00 effects layer. The aurora glow, heading shimmer, scan-line, card tilt, animated divider, tag shimmer and breathing CTA were removed in 1.10.00, and their tokens outlived them. The note that stood here kept them on the grounds that only 8 of roughly 90 templated pages had been checked, and that a reference to an undefined custom property is invalid at computed-value time and drops the whole declaration, which is the failure that blanked the ESAT summary tints and the #tutoring-cta panel. That caution was right, and the condition it set has now been met, so the tokens are gone. What was actually checked, on 31 August 2026: - every text file under app/public, app/content, app/tools and app/deploy, matched on a word boundary so --lr-space-1 does not match inside --lr-space-10, which had produced false positives - the RENDERED HTML of 144 live pages, crawled from the homepage rather than guessed from the slug registry, because page content authored in the editor lives in the database and no repository scan can see it That crawl was validated before being trusted: it finds --lr-padding-inline, the token declared a few lines above precisely because editor-authored content references it. An instrument that could not find that one would not have been evidence of anything. Removed: callout-border-hover, callout-shadow-hover, callout-wash-color, chamfer, color-border-strong, duration-breath, easing-spring, glow-accent, glow-accent-soft, glow-accent-pulse, gradient-hero, gradient-heading, gradient-divider, gradient-shimmer, ink-grid-line, letter-spacing-wide, padding-portfolio, padding-small, perspective-card, scanline-opacity, tilt-amount. Two kept that a naive scan calls unused. --lr-booking-accent and --lr-booking-border are referenced by the booking plugin's own CSS: the declarations here are !important overrides that re-point the plugin's defaults at this palette. --lr-space-1, -7, -9 and -10 are holes in the spacing scale rather than dead weight, and live markup already references --lr-space-6, so the scale stays whole. --lr-chamfer is the one worth knowing about: it encodes the chamfered corner the design brief asks for in section 5B and which was never wired to anything. It is in the git history and in the brief if that idea is ever taken up. */ /* Opt OUT of browser-level forced dark mode. The palette is a single light theme: surfaces are literal #ffffff in places (.lr-card-white, .lr-panel-white, the curriculum nav) while the text colours come from tokens. Chrome/Edge auto-dark ("Auto Dark Mode for Web Contents", and the Android default) algorithmically inverts a page that declares no colour scheme, and it inverts selectively, so it lightened body copy to near-white while leaving those literal white cards white. Reported as unreadable text on /teaching/esat/ against a navy-inverted page (2026-08-25); computed styles were correct throughout, which is the signature of a compositor-level inversion rather than a CSS fault. `only light` is the documented opt-out: plain `light` still permits forced darkening. The [data-theme="dark"] block further down is a real dark palette but nothing sets that attribute yet; when a toggle ships, this becomes `light dark` and the dark branch takes over properly. */ color-scheme: only light; } /* UPGRADE v1.8: System-Wide Dark Mode Engine */ [data-theme="dark"] { --lr-color-bg-light: #0f172a; --lr-color-bg-section: #1e293b; --lr-color-bg-card: #1e293b; --lr-color-surface-muted: #1e293b; --lr-color-text-main: #f1f5f9; --lr-color-text: #f1f5f9; --lr-color-text-heading: #fffdf6; --lr-color-text-muted: #94a3b8; --lr-color-text-subtle: #cbd5e1; --lr-color-border-card: rgba(255, 255, 255, 0.1); --lr-color-border-subtle: rgba(255, 255, 255, 0.05); --lr-color-border-hover: rgba(var(--lr-color-accent-rgb), 0.5); --lr-color-ink: #020617; --lr-color-on-ink: #fffdf6; /* Invert Shadows for Dark Mode */ --lr-shadow-rest: 0 4px 10px rgba(0, 0, 0, 0.5); --lr-shadow-active: 0 2px 4px rgba(0, 0, 0, 0.5); --lr-shadow-hover-card: 0 10px 30px rgba(0, 0, 0, 0.6); --lr-shadow-hover-button: 0 2px 12px rgba(var(--lr-color-accent-rgb), 0.4); --lr-shadow-editorial: 0 10px 40px rgba(0, 0, 0, 0.8); --lr-callout-bg-color: #1e293b; --lr-callout-shadow-idle: rgba(0, 0, 0, 0.4); } [data-theme="dark"] img { filter: brightness(0.8) contrast(1.1); } [data-theme="dark"] img:hover { filter: brightness(1) contrast(1); } @media (prefers-contrast: high) { :root { --lr-color-text-main: #000; --lr-color-text: #000; --lr-color-text-heading: #000; --lr-color-bg-card: #ffffff; /* Pink inline-code colour fails WCAG AA against light surfaces in high-contrast environments; flatten to body text colour. */ --lr-color-code: #000; /* Give large surfaces a real, visible border edge in high-contrast. */ --lr-color-border-card: #767676; --lr-color-surface-muted: #ffffff; } } } /* ========================================================================== LAYER: PRIMITIVES -------------------------------------------------------------------------- Purpose: Provide reusable low-level building blocks used throughout the site. These should be generic, composable, and independent of any specific page. Contains: • containers • grids • flex layouts • stack/flow utilities • surface utilities • generic buttons • spacing helpers • reusable layout patterns Never place: • page-specific designs • hero sections • project cards • plugin overrides ========================================================================== */ @layer primitives { /* ========================================================= 3. TYPOGRAPHY PRIMITIVES Layout, typography, and text color. No shadows or borders. ========================================================= */ /* !important throughout this block is load-bearing, not defensive habit: Astra emits `h1,.entry-content :where(h1){font-size:36px;font-weight:600; line-height:1.4em}` (and h2/h3 equivalents) as UNLAYERED inline CSS. Unlayered normal declarations outrank layered ones no matter how specific the layered selector is, so without important these token-driven sizes never applied anywhere the page markup lacked an inline style. */ /* Heading ink. Astra sets `h1..h6{color}` unlayered from its Customizer palette, which outranks any layered rule, so the heading colour token never applied. Marked important here in the primitives layer (NOT in reset): layer precedence inverts for important declarations, so putting it in the earlier reset layer would make it unbeatable and break components like .lr-eyebrow that set their own colour. Within this layer, the class selectors of those components out-specify these element selectors and still win. */ h1, h2, h3, h4, h5, h6, .wp-block-heading:not(.lr-eyebrow), .entry-title { color: var(--lr-color-text-heading) !important; } /* :not(.lr-eyebrow) guards throughout, eyebrows are small monospace labels that happen to be marked up as headings, and if content ever emits one carrying wp-block-heading too, the more specific heading selectors here would otherwise blow it up to display size. */ .wp-block-heading:not(.lr-eyebrow) { color: var(--lr-color-text-heading); font-weight: 600 !important; line-height: var(--lr-line-height-heading) !important; margin-bottom: var(--lr-margin-bottom-heading); } h1.wp-block-heading:not(.lr-hero-heading):not(.lr-eyebrow) { font-size: var(--lr-font-size-h1) !important; line-height: var(--lr-leading-display) !important; letter-spacing: var(--lr-letter-spacing-tight); } h2.wp-block-heading:not(.lr-eyebrow) { font-size: var(--lr-font-size-h2) !important; line-height: var(--lr-leading-h2) !important; letter-spacing: var(--lr-tracking-2xl); margin-top: var(--lr-gap-section); margin-bottom: var(--lr-gap-medium); } h2.wp-block-heading:first-child { margin-top: 0; } /* :not(.lr-eyebrow) is here for specificity as much as for eyebrows. The generic `.wp-block-heading:not(.lr-eyebrow)` rule above sets line-height at (0,2,0); a bare `h3.wp-block-heading` is (0,1,1) and loses to it, so the graduated leading below was silently discarded until this selector matched its weight. Measured: h3 stayed at 26.45px with the bare selector and takes 29.9px with this one. */ h3.wp-block-heading:not(.lr-eyebrow) { font-size: var(--lr-font-size-h3) !important; line-height: var(--lr-leading-h3) !important; text-transform: none; letter-spacing: var(--lr-tracking-xl); margin-top: var(--lr-gap-large); margin-bottom: var(--lr-gap-small); } h3.wp-block-heading:first-child { margin-top: 0; } p { color: var(--lr-color-text-main); line-height: var(--lr-line-height-body); margin-bottom: var(--lr-margin-bottom-para); font-size: var(--lr-font-size-body); } /* --- Semantic Typography Primitives --- */ /* These primitives are frequently applied to real h1/h2/h3 elements, so they need the same important treatment to clear Astra's unlayered heading sizes. Weights unified at 600, the display serif reads heavy at 700 in the large sizes, and 600 matches the homepage hero the scale is derived from. */ .lr-display { font-size: var(--lr-font-size-hero) !important; line-height: var(--lr-leading-display) !important; font-weight: 600 !important; letter-spacing: var(--lr-letter-spacing-tight); color: var(--lr-color-text-heading); } .lr-title { font-size: var(--lr-font-size-h1) !important; line-height: var(--lr-leading-display) !important; font-weight: 600 !important; letter-spacing: var(--lr-letter-spacing-tight); color: var(--lr-color-text-heading); } .lr-heading { font-size: var(--lr-font-size-h2) !important; line-height: var(--lr-leading-h2) !important; letter-spacing: var(--lr-tracking-2xl); font-weight: 600 !important; color: var(--lr-color-text-heading); } .lr-subheading { font-size: var(--lr-font-size-h3) !important; line-height: var(--lr-leading-h3) !important; letter-spacing: var(--lr-tracking-xl); font-weight: 600 !important; color: var(--lr-color-text-heading); } /* Section eyebrows get the same blueprint-label treatment as .lr-mono-meta (brief §5C): monospace, uppercase, widely tracked, accent-coloured, with a short rule as a drafting tick. Eyebrows are authored per-instance in page content with their own inline colour/size/spacing, so !important is the only way to land one consistent treatment across every block, matching this stylesheet's established pattern for overriding content-level inline styles (see the adapter layer). */ .lr-eyebrow { font-family: var(--lr-font-mono) !important; font-size: 0.78rem !important; text-transform: uppercase; letter-spacing: var(--lr-letter-spacing-mono) !important; font-weight: 500 !important; color: var(--lr-color-accent) !important; display: flex; align-items: center; gap: 12px; } .lr-eyebrow::before { content: ""; display: block; width: 32px; height: 1px; background-color: var(--lr-color-accent); flex-shrink: 0; } /* Blueprint markers ("[01]", "[02]"...) on direct-access / indexed rows. The brief (§3C, Mauricio Juba reference) treats these as schematic annotation: bare monospace, widely tracked, no container. They ship inline-styled from content with Courier New; !important re-points them at the mono token without touching content markup. */ .lr-mono-meta { font-family: var(--lr-font-mono) !important; font-size: 0.8rem !important; font-weight: 500 !important; letter-spacing: var(--lr-letter-spacing-mono); color: var(--lr-color-accent) !important; font-variant-numeric: tabular-nums; } .lr-body { font-size: var(--lr-font-size-body); line-height: var(--lr-line-height-body); color: var(--lr-color-text-main); } .lr-small { font-size: var(--lr-font-size-small); line-height: var(--lr-line-height-small); color: var(--lr-color-text-main); } .lr-caption { font-size: var(--lr-font-size-small); color: var(--lr-color-text-muted); } /* --- Layout Engine Primitives --- */ .lr-container { width: 100%; max-width: var(--lr-max-width-card); margin-inline: auto; padding-inline: var(--lr-padding-inline-shell); box-sizing: border-box; } .lr-prose { max-width: var(--lr-prose-max-width, 70ch); margin-inline: auto; } .lr-section { padding-block: var(--lr-space-8); } .lr-stack { display: flex; flex-direction: column; gap: var(--lr-space-4); } .lr-stack-sm { display: flex; flex-direction: column; gap: var(--lr-space-2); } .lr-stack-lg { display: flex; flex-direction: column; gap: var(--lr-space-6); } /* Lobotomized Owl for flow content (adds top margin to adjacent elements) */ .lr-flow > * + * { margin-top: var(--lr-space-4); } .lr-cluster { display: flex; flex-wrap: wrap; gap: var(--lr-space-3); align-items: center; } .lr-grid-equal { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--lr-space-4); } .lr-grid-equal > * { min-width: 0; margin-top: 0 !important; margin-bottom: 0 !important; } .lr-grid-equal.lr-cols-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .lr-grid-equal.lr-cols-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .lr-grid-equal.lr-cols-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } /* --- Surface & Component Anatomy Primitives --- */ .lr-surface { background-color: var(--lr-color-bg-card, #fffdf6); border-radius: var(--lr-radius-medium); border: var(--lr-border-card); box-shadow: var(--lr-shadow-rest); } .wp-block-group.lr-surface-raised { width: 100%; max-width: var(--lr-max-width-card); margin-inline: auto; box-sizing: border-box; } .lr-card { display: flex; flex-direction: column; height: 100%; padding: var(--lr-space-5); } .lr-card-header { margin-bottom: var(--lr-space-3); min-height: 4rem; /* Aligns paragraph baselines by assuming 1-2 line titles */ } .lr-card-body { flex-grow: 1; /* Pushes footer down */ margin-bottom: var(--lr-space-4); } .lr-card-footer { margin-top: auto; /* Aligns to bottom */ } .lr-label { text-transform: none; letter-spacing: normal; font-weight: 600; font-size: var(--lr-font-size-label); line-height: var(--lr-line-height-small); color: var(--lr-color-text-muted); margin-bottom: var(--lr-gap-medium); } .lr-desc { color: var(--lr-color-text-muted); margin-bottom: var(--lr-gap-medium); } /* Astra emits unlayered `a{color:var(--ast-global-color-0)}` (#046bd2) and `a:hover,a:focus{color:var(--ast-global-color-1)}`. Unlayered normal declarations outrank layered ones, so without important every link on the site rendered in Astra's stock blue rather than the brand accent, the same failure mode as the heading scale and the CF7 focus ring. .has-text-color stays excluded so editor-chosen link colours still win. */ /* Underlines are owned exclusively by the link-underline policy block further down this file (§22), which is unlayered and marked important: persistent underlines on inline copy for WCAG, hover-only underlines on structural links. This rule previously ran a SECOND, competing mechanism, an animated background-gradient bar, on top of it, so hovering produced two parallel lines. The gradient is gone; text- decoration alone now draws every underline. text-decoration here is deliberately NOT important, so the §22 policy can still win: a layered important declaration would outrank the unlayered policy and silently strip the accessibility underlines. The exclusion list covers links that are really buttons and bring their own foreground colour. .lr-portal__cta and .lr-dashboard__link are styled by the booking plugin as solid accent buttons with white labels; forcing the link colour on them painted brand-blue text onto a brand-blue fill and made the booking page's primary CTA read as an empty box. Any future button-like link needs adding here too. */ a:not(.wp-block-button__link):not(.lr-btn):not(.lr-portal__cta):not(.lr-dashboard__link):not(.lr-card):not(.button):not(.has-text-color):not(.menu-link) { color: var(--lr-color-link) !important; text-decoration: none; text-underline-offset: 3px; /* Weight inherits from the surrounding copy. A blanket 500 used to embolden every inline link, with the link hue now distinct from the body navy, bolding is a second emphasis the prose does not need, and reference editorial links are set at body weight. */ transition: text-decoration-thickness var(--lr-duration-fast) var(--lr-easing-standard), color var(--lr-duration-fast) var(--lr-easing-standard); } a:not(.wp-block-button__link):not(.lr-btn):not(.lr-portal__cta):not(.lr-dashboard__link):not(.lr-card):not(.button):not(.has-text-color):not(.menu-link):hover, a:not(.wp-block-button__link):not(.lr-btn):not(.lr-portal__cta):not(.lr-dashboard__link):not(.lr-card):not(.button):not(.has-text-color):not(.menu-link):focus-visible { /* Hover thickens the single policy-drawn underline instead of adding a second line. Beats Astra's unlayered `a:hover,a:focus{color:...}`. */ text-decoration-thickness: 2px; color: var(--lr-color-link-hover) !important; } a:not(.wp-block-button__link):not(.lr-btn):not(.lr-portal__cta):not(.lr-dashboard__link):not(.lr-card):not(.button):not(.has-text-color):not(.menu-link):focus-visible { outline: 2px solid var(--lr-color-link-hover); outline-offset: 2px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { /* The forced underline that used to live here existed to give reduced-motion users an affordance the animated gradient bar could not provide. The gradient is gone and §22 draws a real underline in every case, so only the transition needs suppressing, keeping the old rule would have stacked a second line for these users. */ a:not(.wp-block-button__link):not(.lr-btn):not(.lr-portal__cta):not(.lr-dashboard__link):not(.lr-card):not(.button):not(.has-text-color):not(.menu-link) { transition: none; } } @media print { a:not(.wp-block-button__link):not(.lr-btn):not(.lr-portal__cta):not(.lr-dashboard__link):not(.lr-card):not(.button):not(.has-text-color):not(.menu-link) { text-decoration: underline !important; color: #000 !important; background: none !important; } } /* ========================================================= 4. LAYOUT PRIMITIVES ========================================================= */ .lr-section-full { display: flex; flex-direction: column; gap: var(--lr-gap-section); /* Block padding comes from --lr-padding-section (the 80 to 120px "breathing room" the brief §3A calls the biggest contributor to the premium feel). This previously reused --lr-gap-section for both axes, which left --lr-padding-section effectively unused and capped section padding at the smaller between-children gap. */ padding: var(--lr-padding-section) var(--lr-padding-inline-shell); } .lr-section-full > * { width: 100%; max-width: var(--lr-max-width-card); margin-inline: auto; margin-top: 0 !important; margin-bottom: 0 !important; } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .lr-section-full > * { animation: lr-scroll-reveal linear both; animation-timeline: view(); animation-range: entry 2% cover 15%; } /* UPGRADE v1.4: Staggered cascade, each child in a section enters 80ms after the previous, creating a cinematic waterfall reveal instead of a uniform block slide. */ .lr-section-full > *:nth-child(1) { animation-delay: 0ms; } .lr-section-full > *:nth-child(2) { animation-delay: 80ms; } .lr-section-full > *:nth-child(3) { animation-delay: 160ms; } .lr-section-full > *:nth-child(4) { animation-delay: 240ms; } .lr-section-full > *:nth-child(5) { animation-delay: 320ms; } .lr-section-full > *:nth-child(6) { animation-delay: 400ms; } .lr-section-full > *:nth-child(n+7) { animation-delay: 480ms; } } } /* Transform-only, deliberately. This runs on a view() timeline with `both` fill, so anything before the animation range renders at the from-state. With `opacity: 0` in that from-state, content is invisible until the timeline resolves, and a decorative reveal should never be able to hide content. Dropping the fade caps the worst case at a 15px offset instead of a missing element. Correction to an earlier note here: this change was originally credited with fixing a faded heading on /book/. That attribution was wrong. The rule sits inside `prefers-reduced-motion: no-preference`, and the environment those captures came from reports `reduce`, so this animation was never running when the fault was observed. The /book/ rendering oddity is still unexplained and may well be an artefact of that capture method, it renders correctly at viewport heights where the page does not scroll. Kept because the latent risk above is real for users who do not request reduced motion, not because it fixed that. */ @keyframes lr-scroll-reveal { from { transform: translateY(15px); } to { transform: translateY(0); } } .lr-section-centered { text-align: center; max-width: var(--lr-max-width-centered); margin-inline: auto; } /* Hub summary cards, accent edge without implying clickability. */ .lr-at-a-glance { border-left: 3px solid var(--lr-color-accent); background-color: var(--lr-color-bg-card); } .lr-trust-strip { margin-top: var(--lr-gap-small); margin-bottom: var(--lr-gap-medium); opacity: 0.92; } /* Visitor intent guide, search-intent routing (lr-page-intent.json). */ .lr-intent-guide { border-left: 3px solid var(--lr-color-accent-muted, var(--lr-color-accent)); background-color: var(--lr-color-bg-section); } .lr-intent-guide__primary { font-weight: 500; } .lr-intent-guide__subheading { font-size: var(--lr-text-sm, 0.9rem); font-weight: 600; margin: 1.25rem 0 0.5rem; text-transform: none; letter-spacing: normal; } .lr-intent-guide__block:first-of-type .lr-intent-guide__subheading { margin-top: 0.75rem; } /* ========================================================= 5. GRID & COLUMN PRIMITIVES ========================================================= */ @media (min-width: 922px) { .wp-block-columns { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: var(--lr-gap-card); width: 100% !important; } .wp-block-column { min-width: 0; display: flex; flex-direction: column; } .wp-block-column > .lr-card, .wp-block-column > .lr-card-white, .wp-block-column > .lr-project-card { flex-grow: 1; } .wp-block-columns > .wp-block-column:not([class*="lr-col-"]) { flex: 1 1 0; } .lr-col-30 { flex: 0 0 30%; } .lr-col-40 { flex: 0 0 40%; } .lr-col-50 { flex: 0 0 50%; } .lr-explore-portfolio .wp-block-columns { display: flex !important; flex-wrap: wrap !important; gap: var(--lr-gap-card, 24px) !important; justify-content: center !important; } .lr-explore-portfolio .wp-block-columns > .wp-block-column { flex: 1 1 240px !important; min-width: 220px !important; max-width: 380px !important; display: flex !important; flex-direction: column !important; } } .wp-block-columns.lr-columns-medium { gap: var(--lr-gap-medium) !important; row-gap: var(--lr-gap-medium) !important; column-gap: var(--lr-gap-medium) !important; } /* Mobile column-stacking is handled by the `@layer adapter` §43 rule below (with !important to beat Astra). The previous duplicate primitive declaration has been removed. */ /* ========================================================= 6. SPACERS ========================================================= */ .wp-block-separator.has-alpha-channel-opacity.is-style-wide { margin-bottom: 60px; } /* The scroll-animated gradient divider that sat here has been removed. The band change is the section marker now, that is how the reference design separates sections, and a fading rule drawn on top of a colour change states the same boundary twice. */ } /* ========================================================================== LAYER: COMPONENTS -------------------------------------------------------------------------- Purpose: Define complete UI components that visitors interact with. Components are built using the primitives and design tokens defined above. Contains: • navigation • hero sections • cards • buttons (component variants) • forms • footers • project layouts • booking interface • learning hub • all reusable website components Never place: • browser resets • design tokens • third-party overrides ========================================================================== */ @layer components { /* ========================================================= 6.5. SCROLL REVEAL (MOTION ENGINE) ========================================================= */ .lr-reveal-pending { opacity: 0; transform: translateY(20px); } .lr-reveal-active { opacity: 1; transform: translateY(0); transition: opacity 0.6s var(--lr-easing-standard), transform 0.6s var(--lr-easing-standard); will-change: transform, opacity; } @media (prefers-reduced-motion: reduce) { .lr-reveal-pending, .lr-reveal-active { opacity: 1 !important; transform: none !important; transition: none !important; } } /* PRINT NEEDS THE IDENTICAL GUARD, and not having it lost whole sections. .lr-reveal-pending sets opacity 0 and an IntersectionObserver clears it as each block scrolls into view. Printing does not scroll, so anything the reader had not already reached was invisible on paper while being perfectly present in the DOM. Measured by the cross-browser audit against real generated PDFs: printing /teaching/ from the top dropped four content blocks entirely, including "Part of" and "Connected work", which appear zero times in the PDF text. Students and schools print worked solutions from this site, so silently missing content is a serious fault rather than a cosmetic one. The guard already existed ten lines above for reduced motion. This is the same three declarations for the same reason: the element must be visible when the animation that would have revealed it cannot run. */ @media print { .lr-reveal-pending, .lr-reveal-active { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ========================================================= 7. GLOSSARY & DEFINITION LISTS ========================================================= */ .lr-glossary { margin: 0; padding: 0; } .lr-glossary dt { font-weight: 700; color: var(--lr-color-text-heading); font-size: var(--lr-font-size-body); margin-top: 24px; border-bottom: 1px solid var(--lr-color-border-subtle); padding-bottom: 4px; display: inline-block; } .lr-glossary dd { margin-left: 0; margin-top: 8px; margin-bottom: 16px; line-height: var(--lr-line-height-body); color: var(--lr-color-text-main); font-size: var(--lr-font-size-body); } /* ========================================================= 8. MATHEMATICS (MathJax Rendering Layer) ========================================================= */ .lr-math, .lr-math-block { display: block; width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding: clamp(16px, 4vw, 24px); padding-bottom: clamp(24px, 4vw, 32px); margin: clamp(16px, 3vw, 24px) 0; background-color: var(--lr-color-bg-light); border: var(--lr-border-card); border-radius: var(--lr-radius-medium, 10px); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03); transition: background-color var(--lr-duration-moderate) var(--lr-easing-mechanical), border-color var(--lr-duration-moderate) var(--lr-easing-standard), box-shadow var(--lr-duration-moderate) var(--lr-easing-standard); } /* ========================================================= 8.5. ACCORDION COMPONENT ========================================================= */ .lr-accordion { border-bottom: 1px solid var(--lr-color-border-subtle); padding: var(--lr-gap-tight) 0; } .lr-accordion:first-of-type { border-top: 1px solid var(--lr-color-border-subtle); } .lr-accordion summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-weight: 600; color: var(--lr-color-text-heading); padding: var(--lr-gap-tight) 0; transition: color var(--lr-duration-fast); list-style: none; } .lr-accordion summary::-webkit-details-marker { display: none; } .lr-accordion summary::after { content: "+"; font-size: 1.25rem; font-weight: 300; color: var(--lr-color-text-muted); transition: transform var(--lr-duration-moderate); } .lr-accordion[open] summary::after { transform: rotate(45deg); } .lr-accordion summary:hover { color: var(--lr-color-accent); } .lr-accordion__content { padding-bottom: var(--lr-gap-medium); color: var(--lr-color-text-main); } /* ========================================================= 8.6. TIMELINE COMPONENT ========================================================= */ .lr-timeline { list-style: none; padding: 0; margin: var(--lr-gap-large) 0; position: relative; } .lr-timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 14px; width: 2px; background: var(--lr-color-border-subtle); z-index: 1; } .lr-timeline-item { position: relative; padding-left: 48px; margin-bottom: var(--lr-gap-large); } .lr-timeline-item:last-child { margin-bottom: 0; } .lr-timeline-item::before { content: ""; position: absolute; left: 8px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--lr-color-bg-light); border: 2px solid var(--lr-color-accent); z-index: 2; } .lr-timeline-date { font-size: var(--lr-font-size-caption); color: var(--lr-color-text-muted); margin-bottom: var(--lr-gap-tight); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .lr-timeline-title { font-size: var(--lr-font-size-h4); font-weight: 700; color: var(--lr-color-text-heading); margin-bottom: var(--lr-gap-tight); } /* ========================================================= 8.7. STAT BOX COMPONENT ========================================================= */ .lr-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--lr-gap-medium); margin: var(--lr-gap-large) 0; } .lr-stat-box { padding: var(--lr-gap-medium); text-align: center; display: flex; flex-direction: column; justify-content: center; } .lr-stat-value { font-size: clamp(2rem, 5vw, 2.5rem); font-weight: 800; color: var(--lr-color-accent); line-height: 1.1; margin-bottom: var(--lr-gap-tight); letter-spacing: -0.02em; } .lr-stat-label { font-size: var(--lr-font-size-caption); color: var(--lr-color-text-heading); font-weight: 600; } /* Stat entrance, a quiet rise-and-fade as the box enters the viewport. The previous treatment scaled from 0.8 with a blur-to-sharp 1.04 overshoot: two simultaneous motion cues plus a filter, which reads as an effect demo rather than a reveal. Rise + fade is the vocabulary the rest of the site already uses, and the numbers stay sharp throughout. Same guards as before: view()-progressive only, and never for reduced-motion users. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .lr-stat-box { animation: lr-stat-pop linear both; animation-timeline: view(); animation-range: entry 5% cover 20%; } } } @keyframes lr-stat-pop { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= 8.8. STICKY NAV & TOC ========================================================= */ .lr-sticky-nav { position: sticky; top: var(--lr-gap-large); align-self: start; z-index: 10; } .lr-toc-list { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--lr-color-border-subtle); } .lr-toc-item { margin-bottom: 8px; } .lr-toc-item a { color: var(--lr-color-text-muted); text-decoration: none; font-weight: 500; font-size: 0.95rem; padding-left: 14px; display: block; transition: color var(--lr-duration-fast), border-left-color var(--lr-duration-fast); border-left: 2px solid transparent; margin-left: -2px; } .lr-toc-h3 a { padding-left: 24px; font-size: var(--lr-font-size-caption); } .lr-toc-item a:hover { color: var(--lr-color-accent); border-left-color: var(--lr-color-accent); } .lr-math mjx-container, .lr-math-block mjx-container { margin-left: auto; margin-right: auto; font-variant-numeric: tabular-nums; } .lr-math mjx-math, .lr-math-block mjx-math { font-size: 1.02em; line-height: 1.4; } @media (hover: hover) and (pointer: fine) { .lr-math:hover, .lr-math-block:hover { background-color: var(--lr-color-accent-wash); border-color: rgba(var(--lr-color-accent-rgb), 0.15); } } @media (prefers-contrast: high) { .lr-math, .lr-math-block { background-color: #ffffff; border-color: #d1d5db; } } @media (prefers-reduced-motion: reduce) { .lr-math, .lr-math-block { transition: none; } } @media print { .lr-math, .lr-math-block { background: #ffffff; box-shadow: none; border: 1px solid var(--lr-color-border-subtle); } } /* ========================================================= 9. FIGURE CAPTIONS ========================================================= */ figure { max-width: 100%; margin: 0; padding: 0; overflow: visible; } figure figcaption { width: 100%; max-width: 720px; margin: 12px auto 0; padding: 8px 14px; writing-mode: horizontal-tb; /* Same editorial voice as .lr-editorial-caption, serif italic reads as a considered caption rather than interface text, and now that real italics are loaded it costs nothing. */ font-family: var(--lr-font-heading); font-style: italic; font-size: var(--lr-font-size-figcaption); line-height: 1.45; color: var(--lr-color-text-muted); text-align: center; background: transparent; border-radius: 8px; word-break: break-word; /* No opacity on caption text. The muted token is tuned to clear WCAG AA (5.1:1 on white, 4.8:1 on the section band); a 0.85 opacity blended it down to #788597, 3.7:1, a Lighthouse colour-contrast failure on every editorial figure (2026-08-23). The hover state shifts colour only. */ transition: color var(--lr-duration-slow) var(--lr-easing-smooth); } @media (hover: hover) and (pointer: fine) { figure:hover figcaption { color: var(--lr-color-text-heading); } } @media (max-width: 480px) { figure figcaption { font-size: var(--lr-font-size-figcaption); padding: var(--lr-gap-tight) var(--lr-gap-small); margin-top: var(--lr-gap-tight); } } figure.caption-left figcaption { text-align: left; max-width: 640px; margin-left: 0; } figure.caption-right figcaption { text-align: right; max-width: 640px; margin-right: 0; } /* ========================================================= 9b. EDITORIAL FIGURE (hero/lead photography) .lr-editorial-figure ships from page content with no styling of its own beyond an inline margin reset, the photo and caption were rendering completely flat (square corners, no shadow, plain text caption). This is the site's single largest photo, so it carries real weight in the redesign. ========================================================= */ /* RESERVES THE SPACE BEFORE THE PHOTO LOADS. Do not remove without re-measuring CLS, and update the ratio if the photo is replaced. Measured on production before this rule: the homepage scored CLS 0.2116, a failing Core Web Vital, against 0.0002 on the ESAT hub and 0.05 on a solution page. Attributed with the layout-shift API to a single event worth 0.2079 at 1267ms, in which this figure jumped from 102px tall to 671px as the image arrived: the caption was holding the box open on its own until then, and everything below moved. The cause is that the img ships from page content with no width or height attributes. The theme already has a filter for exactly this, lr_images_complete_img_tag in includes/lr-images.php, which resolves the file and adds them. It is NOT running on this image: the served tag carries neither dimensions nor the fetchpriority="high" that the same filter adds unconditionally to the first eager image, so the tag never reached it. That is worth chasing, but it cannot be fixed from here, because the live homepage markup exists only in the database and differs from content/pages/home-draft.html, which does not contain this figure at all. So the reservation is made in CSS instead. 664 by 889 is the image's real intrinsic size, read from the rendered element. This only affects the pre-load state: once the photo arrives the box is the same size it always was, which is why it does not move a single pixel of the final layout. */ .lr-editorial-figure img { display: block; width: 100%; height: auto; aspect-ratio: 664 / 889; border-radius: var(--lr-radius-large); box-shadow: var(--lr-shadow-editorial); transition: transform var(--lr-duration-slow) var(--lr-easing-mechanical), box-shadow var(--lr-duration-slow) var(--lr-easing-standard); } @media (hover: hover) and (pointer: fine) { .lr-editorial-figure:hover img { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(20, 33, 61, 0.08), 0 28px 48px -14px rgba(20, 33, 61, 0.28); } } .lr-editorial-caption { font-family: var(--lr-font-heading); font-style: italic; font-size: var(--lr-font-size-figcaption); line-height: 1.5; color: var(--lr-color-text-muted); } /* ========================================================= 10. CARD IMAGES ========================================================= */ .lr-card img, .lr-project-card img { display: block; width: 100%; height: auto; border-radius: var(--lr-radius-image); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); transition: transform var(--lr-duration-slow) var(--lr-easing-mechanical); } @media (hover: hover) and (pointer: fine) { .lr-project-card:hover img, .lr-card-white:hover img { transform: scale(1.01); } } /* ========================================================= 11. BUTTON VARIANTS ========================================================= */ .is-primary { background-color: var(--lr-color-accent); color: #ffffff; border: 2px solid var(--lr-color-accent); } .is-outline { background: transparent; color: var(--lr-color-text-heading); border: 2px solid var(--lr-color-border-subtle); } @media (hover: hover) and (pointer: fine) { .is-primary:hover { background-color: var(--lr-color-accent-hover); box-shadow: var(--lr-shadow-hover-button); } .is-outline:hover { border-color: var(--lr-color-accent); background-color: var(--lr-color-bg-light); color: var(--lr-color-accent); } } /* Utility button primitives */ .lr-btn { display: inline-block; text-align: center; text-decoration: none; font-weight: bold; border-radius: var(--lr-radius-small, 6px); padding: 10px 24px; font-size: 0.9rem; transition: background-color var(--lr-duration-base) var(--lr-easing-standard), color var(--lr-duration-base) var(--lr-easing-standard), border-color var(--lr-duration-base) var(--lr-easing-standard), transform var(--lr-duration-fast) var(--lr-easing-mechanical), box-shadow var(--lr-duration-base) var(--lr-easing-standard); cursor: pointer; } .lr-btn:hover { transform: translateY(-2px); } .lr-btn:active { transform: translateY(0) scale(0.98); } .lr-btn-solid { background-color: var(--lr-color-accent); color: #ffffff !important; border: 1px solid var(--lr-color-accent); } .lr-btn-solid:hover { background-color: var(--lr-color-accent-hover); border-color: var(--lr-color-accent-hover); box-shadow: var(--lr-shadow-hover-button); } .lr-btn-outline { background-color: transparent; color: var(--lr-color-accent) !important; border: 1px solid var(--lr-color-border-subtle); } .lr-btn-outline:hover { border-color: var(--lr-color-accent); background-color: var(--lr-color-accent-wash); } /* Solid CTAs inside an ink context (§48). The §48 token remap points --lr-color-accent at the LIGHT on-ink blue (#d5f3ff). That is correct for link and label text on navy, but every solid-CTA rule pairs the accent fill with a hard-coded white label (.is-primary above, .lr-btn-solid above, and the .wp-block-button fill/is-primary rules in the adapter layer), so on an ink plate the CTA rendered white-on-#d5f3ff, 1.81:1, effectively unreadable. Seen on the hero mastheads of /teaching/, /teaching/roadmap/, /teaching/for-schools/ and /teaching/for-consultants/ (2026-08-25). Invert the pairing instead of unpicking the remap: keep the light fill and stamp the label ink navy. Measured at 13.83:1 against the pale blue fill under Oxford blue, up from 9.65:1 under the indigo, and it reads as a deliberate inverted button on the dark plate rather than a colour accident. Hover only shifts the fill to #cbd8e8, which lifts the ratio further. Layer note: this MUST live in @layer components, not adapter. The declarations it corrects are themselves !important, and for important declarations layer order inverts, an adapter-layer !important loses to the components-layer .lr-btn-solid rule above. Same layer, later source order and higher specificity is what makes it win. */ :is( .site-header, .site-footer, .lr-footer-secondary-nav, .lr-site-footer, .lr-on-ink, .entry-content header.wp-block-group:has(.lr-hero-heading) ) :is( .wp-block-button__link.is-primary, .wp-block-button.is-style-fill .wp-block-button__link, .lr-btn-primary, .lr-btn-solid ) { background-color: var(--lr-color-on-ink-accent) !important; border-color: var(--lr-color-on-ink-accent) !important; color: var(--lr-color-ink) !important; } /* ========================================================= 12. UI COMPONENTS (Main Cards) ========================================================= */ .lr-surface-raised, .lr-card, .lr-card-white, .lr-project-card { position: relative; border-radius: var(--lr-radius-large); padding: var(--lr-padding-card); background-color: var(--lr-color-bg-card); box-shadow: var(--lr-shadow-rest); border: var(--lr-border-card); contain: layout; backface-visibility: hidden; transition: transform var(--lr-transition-pop), box-shadow var(--lr-transition-pop), /* background-color was missing, so the tier-2 hover wash (§12) snapped in and out while the border it travels with faded. */ background-color var(--lr-duration-moderate) var(--lr-easing-standard), border-color var(--lr-duration-moderate) var(--lr-easing-standard); display: flex; flex-direction: column; height: 100%; } .lr-surface-raised-white, .lr-card-white { background-color: #ffffff; padding: var(--lr-padding-card); display: flex; flex-direction: column; height: 100%; width: 100%; flex-grow: 1; } /* Prose measure is capped by the unlayered MEASURE section near the end of this file, not here. A layered rule loses to the unlayered exemptions that section declares, so keeping a second copy here just produced a cap that silently never applied. */ /* OPTICAL GRID ALIGNMENT Pushes the final block (e.g., links or buttons) to the bottom of the card so all cards in a grid row share a perfect horizontal baseline. */ .lr-card > *:last-child, .lr-card-white > *:last-child, .lr-project-card > *:last-child { margin-bottom: 0; margin-top: auto; } /* Reduce visual clutter: remove shadows from nested cards */ .lr-card .lr-card-white, .lr-card .lr-surface-raised-white { box-shadow: none; } .lr-card + .lr-card-white, .lr-surface-raised-white + .lr-surface-raised-white { margin-top: var(--lr-gap-medium); } /* ========================================================================== REUSABLE CARD GRID (Subgrid Alignment) ========================================================================== */ /* UPGRADE v1.8: Native CSS Masonry & Container Queries */ .lr-card-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: var(--lr-space-4); margin-top: var(--lr-space-5); grid-template-rows: masonry; align-tracks: start; } @container (min-width: 768px) { .lr-card-grid.lr-cols-2 { grid-template-columns: repeat(2, 1fr); } .lr-card-grid.lr-cols-3 { grid-template-columns: repeat(3, 1fr); } .lr-card-grid.lr-cols-4 { grid-template-columns: repeat(2, 1fr); } } @container (min-width: 1024px) { .lr-card-grid.lr-cols-4 { grid-template-columns: repeat(4, 1fr); } } /* Subgrid for optical alignment of internal content */ .lr-card-grid > .lr-card-white, .lr-card-grid > .lr-card { display: grid; grid-template-rows: subgrid; grid-row: span 3; gap: var(--lr-space-3); padding: var(--lr-padding-card); margin: 0; /* override any conflicting WP margins */ } /* Reset margin for grid children */ .lr-card-grid > .lr-card-white > *, .lr-card-grid > .lr-card > * { margin: 0 !important; } /* Footer links auto-align to bottom */ .lr-card-grid > .lr-card-white > *:last-child, .lr-card-grid > .lr-card > *:last-child { align-self: end; } .lr-card-white > div:first-child { margin-bottom: var(--lr-gap-medium); } /* Enforce vertical rhythm between STACKED cards. */ .lr-card + .lr-card, .lr-card-white + .lr-card-white, .lr-card + .lr-card-white, .lr-card-white + .lr-card, .lr-project-card + .lr-project-card, .lr-surface-raised + .lr-surface-raised { margin-top: 32px; /* Reduced from var(--lr-gap-card) */ } /* … but cancel it for cards laid out SIDE BY SIDE. On /projects/ the card class is applied directly to the WordPress column element (`.wp-block-column.lr-project-card`), so two cards in one row are adjacent siblings and the rule above pushed the right-hand card down by 32px. Every two-card row on that page was rendering misaligned: measured left card at y=5993, right card at y=6025. A card that is a flex or grid item takes its spacing from the container's `gap` in both axes, so the adjacency margin is not just wrong here, it is redundant. Higher specificity than the rule above, and later in the same layer. */ .wp-block-columns > .lr-project-card + .lr-project-card, .wp-block-columns > .lr-card + .lr-card, .wp-block-columns > .lr-card-white + .lr-card-white, .wp-block-columns > .lr-surface-raised + .lr-surface-raised, .lr-card-grid > * + * { margin-top: 0; } /* Vertical rhythm BETWEEN rows of cards. A run of .wp-block-columns siblings sits inside a plain .wp-block-group (display: block), so neither the .lr-section-full flex gap nor the row's own column-gap reaches the space between one row and the next, consecutive rows were touching exactly (measured gap 0 on every adjacent pair on /projects/). The space is placed on the CARDS rather than on the row container on purpose. A margin on .wp-block-columns does not take effect on these pages: in an isolated headless render with every stylesheet readable, an inline `margin-top: 99px` reads back from the style attribute but computes to 0px, and a scan of every rule in every sheet that the row matches returns no margin declaration at all. That cause is still unidentified. Margins on the card itself demonstrably DO apply, the 32px adjacency margin cancelled above is the proof, so the rhythm is hung on the thing that is known to respond. :not(:last-child) keeps it from adding a trailing gap under the final row. On mobile, where Astra stacks the columns, this margin sits on top of the container's row-gap; that is a slightly larger stacked gap, not a broken one. */ .wp-block-columns:not(:last-child) > .lr-project-card, .wp-block-columns:not(:last-child) > .lr-card, .wp-block-columns:not(:last-child) > .lr-card-white { margin-bottom: var(--lr-gap-card); } /* CARD HOVER, IN THREE TIERS ------------------------------------------------------------------ The card classes are worn by two unrelated kinds of thing: small tiles whose only purpose is to send you somewhere, and full-width prose sections that merely want the card's surface. Counted across content/pages: 373 tiles against 2,041 prose sections. They must not answer a hover the same way, and until now they very nearly did, which is what made the tiles feel dead. The dead rule was the one below, which every plain .lr-card matched: `box-shadow: var(--lr-shadow-hover-panel)` resolves to `none` (all decorative shadows on this site were deliberately flattened), and --lr-color-border-hover is #002147 against a resting border of #1f374e. Two dark navies one 1px line wide. Measured in a harness over this stylesheet: the ONLY declaration that survived was a colour change no one can see. The card promised a response and paid out nothing. So: tier 1 for whole-card destinations, tier 2 for cards that hold several links and are therefore NOT themselves click targets, and nothing at all for prose. Tier 2 is deliberately quieter than tier 1: displacement reads as "click me", and on a card carrying three different destinations that would be a lie. It borrows the wash and the accent edge from .lr-list-item:hover instead, which is already this site's idiom for "interactive, but the target is inside me". ------------------------------------------------------------------ */ @media (hover: hover) and (pointer: fine) { /* Card hover: the card shifts up-left and a solid accent slab appears behind it. This is the flat-design counterpart to a drop shadow, it reads as displacement rather than depth, which is the only hover idiom consistent with a hard 2px outline and no elevation. It replaces a 3D perspective tilt, and unlike the conic glow it replaces, nothing is painted over the card's own text. */ .lr-surface-raised-white:hover, .lr-card-white:hover, .lr-project-card:hover { transform: translate(-4px, -4px); box-shadow: 6px 6px 0 0 var(--lr-color-accent); border-color: var(--lr-color-accent); } /* TIER 2: cards that CONTAIN links rather than being one. The six "Who are you?" tiles on /contact/, the four on the homepage, and the seven enquiry panels: every one of them holds two to four separate destinations, so there is no single URL a whole-card click could go to. They get a visible state with no displacement, matching .lr-list-item:hover, and the inset edge keeps it inside the flat idiom rather than reintroducing a shadow. Grid membership is the discriminator because it is what actually separates the two populations in the markup, and it needs no edit to 2,000 pages. The wash is mixed against the card's own background rather than taken from --lr-color-accent-wash directly, so the tint follows the surface it sits on: the enquiry panels have a transparent background over the cream page, the tiles have a white one, and a fixed #eef2f8 would be a hair wrong on one of them and wrong outright on any future dark or on-ink context. */ .lr-grid-equal > .lr-card:not(.lr-card-white):not(.lr-project-card):hover, .lr-card-grid > .lr-card:not(.lr-card-white):not(.lr-project-card):hover, .lr-enquiry-panel:hover { background-color: color-mix(in srgb, var(--lr-color-accent) 7%, var(--lr-color-bg-card)); border-color: var(--lr-color-accent); box-shadow: inset 3px 0 0 0 var(--lr-color-accent); } } /* Keyboard parity for tier 2. The generic .lr-card:focus-within rule below lifts the card 2px and changes nothing else visible, which is the same empty promise the old hover rule made; these three get the real state instead. Not inside the (hover: hover) query on purpose, a touch user tabbing through with a keyboard still needs it. */ .lr-grid-equal > .lr-card:not(.lr-card-white):not(.lr-project-card):focus-within, .lr-card-grid > .lr-card:not(.lr-card-white):not(.lr-project-card):focus-within, .lr-enquiry-panel:focus-within { /* Cancels the 2px lift the generic .lr-card:focus-within rule below would otherwise add, so focus and hover show the same state and tier 2 stays free of displacement in both. */ transform: none; background-color: color-mix(in srgb, var(--lr-color-accent) 7%, var(--lr-color-bg-card)); border-color: var(--lr-color-accent); box-shadow: inset 3px 0 0 0 var(--lr-color-accent); } .lr-card-white[data-active="true"], .lr-project-card[data-active="true"] { transform: translateY(var(--lr-lift-card-active)) scale(var(--lr-scale-card-active)); box-shadow: var(--lr-shadow-active); z-index: 10; } /* A "magnetic directional hover" lived here: an invisible ::after covering the right half of every project card at z-index 20, ABOVE the card's own content, with pointer-events:auto, so that a :has(::after:hover) selector could tilt the card toward the cursor. That overlay sat on top of any link or button in the right half of the card and swallowed the pointer, so it was a click-target bug as well as decoration. Removed outright. */ /* A rotating conic-gradient "glowing border" lived here. It worked by giving the card `border: 1px solid transparent` plus `background-clip: padding-box` and spinning a gradient behind it, so the gradient showed through the transparent border ring. Removed for two reasons. It was tuned for a 14px radius and a light blue accent; at 40px with the indigo accent the wedge crossed the card face and made the text hard to read. More importantly the scaffolding was overriding the real card border, `border: 1px solid transparent` here beat `border: var(--lr-border-card)` declared forty lines above, so every .lr-card-white on the site was rendering with no visible outline at all. Deleting this restores the outline the card was always supposed to have. */ /* UPGRADE v1.4: Focus-Within Card Elevation When a keyboard user focuses any interactive element inside a card, the entire card lifts, giving keyboard navigators the same premium feedback as mouse users. */ @media (prefers-reduced-motion: no-preference) { .lr-card-white:focus-within, .lr-project-card:focus-within, .lr-card:focus-within { transform: translateY(var(--lr-lift-card-hover)); box-shadow: var(--lr-shadow-hover-card); border-color: var(--lr-color-border-hover); } } /* ========================================================= 13. PORTFOLIO & PROJECTS ========================================================= */ .lr-project-card h3 { font-size: var(--lr-font-size-h3); margin-bottom: var(--lr-gap-tight); } .lr-project-meta { text-transform: none; letter-spacing: normal; font-size: var(--lr-font-size-caption); line-height: 1.5; margin-top: auto; color: var(--lr-color-text-muted); margin-bottom: var(--lr-gap-medium); } .lr-surface-raised > p, .lr-surface-sunken > p, .lr-project-card p.lr-desc { flex: 1 1 auto; } /* ========================================================= 14. IMAGES ========================================================= */ .lr-img-rounded { width: 100%; height: auto; object-fit: cover; border-radius: var(--lr-radius-medium); box-shadow: var(--lr-shadow-image); transition: transform var(--lr-duration-slow) var(--lr-easing-mechanical), box-shadow var(--lr-duration-slow) var(--lr-easing-standard); } .lr-img-rounded, .lr-logo-item img, .lr-edu-logo img { user-select: none; -webkit-user-select: none; -webkit-user-drag: none; } @media (hover: hover) and (pointer: fine) { .lr-img-rounded:hover { transform: translateY(-4px); box-shadow: var(--lr-shadow-hover-image); } } .lr-caption { font-size: var(--lr-font-size-caption); line-height: 1.5; text-align: center; margin-top: 15px; color: var(--lr-color-text-muted); } /* ========================================================= 15. TAGS & PILLS ========================================================= */ .lr-tag, .lr-tag-group span, .pill, .tag-pill, .lr-pill-small { display: inline-block; background-color: var(--lr-color-bg-card); padding: 8px 16px; border-radius: var(--lr-radius-pill); font-size: var(--lr-font-size-tag); color: var(--lr-color-text-subtle); border: 1px solid var(--lr-color-border-subtle); text-decoration: none; font-weight: 600; letter-spacing: 0.01em; margin: 4px 6px 4px 0; transition: transform var(--lr-duration-base) var(--lr-easing-mechanical), background-color var(--lr-duration-base) var(--lr-easing-standard), border-color var(--lr-duration-base) var(--lr-easing-standard), box-shadow var(--lr-duration-base) var(--lr-easing-standard), color var(--lr-duration-base) var(--lr-easing-standard); } .lr-tag-group { display: flex; flex-wrap: wrap; gap: var(--lr-gap-tight); margin-bottom: var(--lr-margin-bottom-tag); } @media (hover: hover) and (pointer: fine) { a.lr-tag:hover, a.pill:hover, a.tag-pill:hover { background-color: var(--lr-color-accent-wash); border-color: var(--lr-color-accent); transform: translateY(-2px); color: var(--lr-color-accent); box-shadow: 0 4px 10px rgba(var(--lr-color-accent-rgb), 0.12); } } /* A light-reflection "shimmer" swept across each tag on hover. Removed: the tag already answers a hover with a fill change, a border change and a lift, and a sweep on top of that states the same thing a fourth time. */ a.lr-tag:active, a.pill:active, a.tag-pill:active { transform: translateY(0) scale(0.96); } /* A "blob morph" ran the tag's border-radius through four asymmetric corner sets on a 2s infinite alternate loop while hovered. With --lr-radius-tag now a stadium, that animated a pill into a wobbling blob. Removed. */ /* ========================================================= 16. LISTS & ACADEMIC TYPOGRAPHY ========================================================= */ .lr-list-group { display: flex; flex-direction: column; gap: var(--lr-gap-small); } ul.lr-list-group, ol.lr-list-group { list-style: none; padding-left: 0; margin: 0; } .lr-list-item { position: relative !important; min-width: 0; max-width: 100%; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; overflow-wrap: break-word; word-wrap: break-word; list-style-type: none; background-color: transparent; padding: 8px 16px 8px 36px !important; font-size: var(--lr-font-size-small); color: var(--lr-color-text-main); border-left: 2px solid var(--lr-color-border-subtle); margin: 0; transition: border-color var(--lr-duration-base) var(--lr-easing-standard), background-color var(--lr-duration-base) var(--lr-easing-standard); } .lr-list-item a[aria-current="true"] { font-weight: 600; color: var(--lr-color-accent); text-decoration: none; } li.lr-list-item:has(a[aria-current="true"]) { border-left-color: var(--lr-color-accent); background-color: var(--lr-color-accent-wash, rgba(var(--lr-color-accent-rgb), 0.06)); } li.lr-list-item { list-style: none; } li.lr-list-item::marker { content: ""; } .lr-list-item::before { content: ""; position: absolute; left: 14px; top: calc(8px + 0.8em); transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background-color: var(--lr-color-text-muted); opacity: 0.7; transition: background-color var(--lr-duration-base) var(--lr-easing-smooth), opacity var(--lr-duration-base) var(--lr-easing-smooth), transform var(--lr-duration-base) var(--lr-easing-mechanical); } @media (hover: hover) and (pointer: fine) { .lr-list-item:hover { border-left-color: var(--lr-color-accent); background-color: var(--lr-color-accent-wash); } .lr-list-item:hover::before { background-color: var(--lr-color-accent); opacity: 1; transform: translateY(-50%) scale(1.4); } } .lr-index-list { margin: 0; padding-left: 0; list-style: none; line-height: 2; font-size: var(--lr-font-size-body); } .lr-index-list li { margin-bottom: 8px; list-style: none; } .lr-index-list li::marker { content: ""; } .lr-index-list a { display: inline-block; text-decoration: none; color: var(--lr-color-text-heading); border-bottom: 1px solid rgba(0, 0, 0, 0.08); transition: transform var(--lr-duration-base) var(--lr-easing-mechanical), color var(--lr-duration-base) var(--lr-easing-standard), border-color var(--lr-duration-base) var(--lr-easing-standard); } @media (hover: hover) and (pointer: fine) { .lr-index-list a:hover { color: var(--lr-color-accent); border-color: var(--lr-color-accent); transform: translateY(-1px); } } .lr-index-list a:active { transform: scale(0.98); } .lr-analytic { max-width: 820px; margin: 0 0 32px 0; font-size: 16px; line-height: 1.8; opacity: 0.9; color: var(--lr-color-text-main); } details.lr-archive { background: var(--lr-color-bg-light); border: 1px solid var(--lr-color-border-subtle); border-radius: var(--lr-radius-medium); padding: 24px; transition: background-color var(--lr-duration-base) var(--lr-easing-standard); } details.lr-archive summary { cursor: pointer; font-weight: 700; font-size: var(--lr-font-size-h3); color: var(--lr-color-text-heading); outline: none; user-select: none; } details.lr-archive summary:focus-visible { box-shadow: var(--lr-shadow-focus-ring); border-radius: 4px; } .lr-glossary dt, h2[id], h3[id] { scroll-margin-top: 140px; } /* ========================================================= 17. BUTTON LAYOUT UTILITIES ========================================================= */ .lr-button-group-center { justify-content: center; } /* ========================================================= 18. PEDAGOGICAL CALLOUTS & INTERACTION LOGIC ========================================================= */ /* --- A. The Base Panel Primitive --- */ .lr-surface-sunken, .lr-panel-white, .lr-panel-light { position: relative; padding: clamp(20px, 4vw, 26px) clamp(20px, 5vw, 28px); background-color: var(--lr-color-bg-light); border: var(--lr-border-card); border-radius: var(--lr-radius-medium, 10px); margin: clamp(20px, 4vw, 32px) 0; box-shadow: none; transition: transform var(--lr-transition-pop), border-color var(--lr-duration-moderate) var(--lr-easing-standard); overflow-x: auto; -webkit-overflow-scrolling: touch; } .lr-panel-white > *:last-child { margin-bottom: 0 !important; } /* Plain panels are informational (non-interactive) asides, so they get a quiet non-motion hover response, a slightly deeper shadow and a faint accent border, rather than a button-like lift that would falsely imply clickability. The accent-edge callout keeps its own bespoke hover (defined unlayered at the foot of the file) and is excluded here. */ @media (hover: hover) and (pointer: fine) { .lr-surface-sunken:not(.lr-panel-accent-edge):hover, .lr-panel-white:not(.lr-panel-accent-edge):hover, .lr-panel-light:not(.lr-panel-accent-edge):hover { border-color: var(--lr-color-border-hover); } } /* Pedagogical callouts (.lr-panel-accent-edge): unlayered overrides at file bottom, clean slate borders / hover / shadow */ /* ========================================================= 19. RESEARCH AFFILIATIONS ========================================================= */ .lr-affiliations-card, .lr-affiliations-wrapper { padding: clamp(20px, 4vw, 40px) 30px; background: var(--lr-callout-bg-color); border-radius: var(--lr-radius-large); box-shadow: var(--lr-shadow-rest); text-align: center; margin: 30px auto 0; border: var(--lr-border-card); } .lr-affiliations-wrapper > p:first-child { font-size: var(--lr-font-size-caption); text-transform: none; letter-spacing: normal; font-weight: 600; color: var(--lr-color-text-muted); opacity: 0.7; margin-bottom: 30px; } .lr-logo-grid { display: flex; justify-content: center; align-items: center; gap: 60px; flex-wrap: wrap; padding: 10px 0; } .lr-affiliations-wrapper .lr-logo-grid { flex-direction: row; flex-wrap: nowrap; gap: 30px; } .lr-logo-item { line-height: 0; } .lr-logo-item img { max-height: 80px; height: auto; width: auto; display: block; object-fit: contain; filter: grayscale(100%) opacity(0.5); border-radius: 0; box-shadow: none; transition: filter var(--lr-duration-slower) var(--lr-easing-mechanical), opacity var(--lr-duration-slower) var(--lr-easing-mechanical), transform var(--lr-duration-slower) var(--lr-easing-mechanical); } .lr-affiliations-wrapper .lr-logo-item img { max-height: 50px; } @media (hover: hover) and (pointer: fine) { .lr-logo-item:hover img { filter: grayscale(0%) opacity(1); transform: scale(1.08); } } @media (max-width: 921px) { .lr-logo-grid { gap: 50px; } .lr-logo-item img { max-height: 70px; } .lr-affiliations-wrapper .lr-logo-item img { max-height: 45px; } } @media (max-width: 540px) { .lr-logo-grid:not(.lr-affiliations-wrapper .lr-logo-grid) { flex-direction: column; gap: 40px; } .lr-logo-item img { max-height: 65px; } } /* ========================================================= 20. TECHNICAL TOOLKIT ========================================================= */ .lr-tools-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 30px; padding: 10px 0; } /* Added .lr-tool-icon and svg to catch shortcode outputs */ .lr-tools-grid .lr-logo-item img, .lr-tools-grid .lr-logo-item svg, .lr-tools-grid .lr-logo-item .lr-tool-icon { max-height: 36px; height: 36px; width: auto; min-width: 36px; /* Prevents SVGs from collapsing to 0 width */ object-fit: contain; /* Prevents stretching if min-width triggers */ display: block; border-radius: 0; box-shadow: none; filter: grayscale(100%) opacity(0.5); transition: filter var(--lr-duration-slow) var(--lr-easing-mechanical), opacity var(--lr-duration-slow) var(--lr-easing-mechanical), transform var(--lr-duration-slow) var(--lr-easing-mechanical); } @media (max-width: 600px) { .lr-tools-grid { gap: 20px; } .lr-tools-grid .lr-logo-item img, .lr-tools-grid .lr-logo-item svg, .lr-tools-grid .lr-logo-item .lr-tool-icon { max-height: 28px; height: 28px; min-width: 28px; } } @media (hover: hover) and (pointer: fine) { .lr-tools-grid .lr-logo-item:hover img, .lr-tools-grid .lr-logo-item:hover svg, .lr-tools-grid .lr-logo-item:hover .lr-tool-icon { filter: grayscale(0%) opacity(1); transform: scale(1.12); } } /* ========================================================= 21. PROJECT ARCHITECTURE ========================================================= */ .lr-section-heading { margin-top: clamp(60px, 8vw, 100px); margin-bottom: clamp(30px, 4vw, 50px); text-align: center; } /* Section headings inside cards inherit card rhythm, not page-level splits. */ .lr-card .lr-section-heading, .lr-card-white .lr-section-heading, .lr-project-card .lr-section-heading, .lr-at-a-glance .lr-section-heading { margin-top: 0; margin-bottom: var(--lr-gap-medium); text-align: inherit; } .lr-explore-portfolio .wp-block-column > .lr-project-card { flex: 1; } .lr-project-card .lr-tag-group { margin-bottom: var(--lr-gap-medium); } .lr-project-card .lr-list-group { margin-top: var(--lr-gap-medium); } /* ========================================================= 21b. HOVER-ARROW CALL TO ACTION .lr-hover-arrow ships in page content ("View all publications", and similar forward links) but had no CSS at all, so it rendered as a plain link, the third content hook found unstyled, after .lr-editorial-figure and .lr-mono-meta. The brief (Greenhill analysis §D) specifies this interaction: a trailing arrow that slides on hover. The arrow is drawn in the pseudo-element rather than written into the content so it cannot be selected, copied, or read out as part of the link text. ========================================================= */ .lr-hover-arrow { display: inline-flex; align-items: baseline; gap: 0.4em; } .lr-hover-arrow::after { content: "\2192"; /* → */ display: inline-block; transition: transform var(--lr-duration-base) var(--lr-easing-standard); } @media (hover: hover) and (pointer: fine) { .lr-hover-arrow:hover::after, .lr-hover-arrow:focus-visible::after { transform: translateX(4px); } } @media (prefers-reduced-motion: reduce) { .lr-hover-arrow::after { transition: none; } /* Movement is the whole affordance here, so with motion suppressed the arrow simply stays put rather than jumping to the offset position. */ .lr-hover-arrow:hover::after, .lr-hover-arrow:focus-visible::after { transform: none; } } .lr-back-to-top { font-size: var(--lr-font-size-small); margin-top: 24px; display: inline-block; color: var(--lr-color-text-muted); text-decoration: none; transition: color var(--lr-duration-moderate) var(--lr-easing-standard), transform var(--lr-duration-base) var(--lr-easing-mechanical); } @media (hover: hover) and (pointer: fine) { .lr-back-to-top:hover { color: var(--lr-color-accent); transform: translateY(-1px); } } .lr-mb-40 { margin-bottom: var(--lr-gap-large); } .lr-mt-40 { margin-top: var(--lr-gap-large); } .lr-mb-24 { margin-bottom: var(--lr-gap-medium); } /* Standalone spacer blocks between cards (lr-content.php), not for use on .lr-card */ .lr-spacer-md:not(.lr-card) { display: block; height: 0; margin: 0; padding: 0; border: 0; } .lr-spacer-md:not(.lr-card)::before { content: ""; display: block; height: var(--lr-gap-medium); } .lr-opacity-muted { /* No opacity, despite the class name. Same fault as the figcaption rules in §9/§34: the muted token is tuned to clear WCAG AA on its own (5.1:1 on white), and a 0.85 layer blends it down to #788597, 3.76:1, a contrast failure on /engineering/ and the five fluid-mechanics pages that use it (2026-08-25). The class earns its name from the muted colour and the smaller size, which is what it was always doing visually. */ color: var(--lr-color-text-muted); font-size: var(--lr-font-size-small); line-height: var(--lr-line-height-small); margin-top: var(--lr-gap-small); margin-bottom: 0; } .lr-tag-container-wide { max-width: 1100px; margin-left: auto; margin-right: auto; } /* ========================================================= 22. HERO SECTION ========================================================= */ /* Same Astra-unlayered-beats-layered reason as the primitives heading block: page hero titles need important to reach the display scale. */ .lr-hero-heading { font-size: var(--lr-font-size-hero) !important; font-weight: 600 !important; letter-spacing: var(--lr-letter-spacing-tight); line-height: 1.1 !important; margin-bottom: var(--lr-gap-medium); } .lr-hero-subheading { font-size: var(--lr-font-size-lead); line-height: var(--lr-line-height-body); color: var(--lr-color-text-main); opacity: 0.9; margin-bottom: var(--lr-gap-medium); } /* ========================================================= 23. EDUCATION & CV LISTS ========================================================= */ .lr-cv-row { border-bottom: 1px solid rgba(0, 0, 0, 0.08); padding-bottom: var(--lr-gap-large); margin-bottom: var(--lr-gap-large); } .lr-cv-row:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } .lr-edu-logo img { max-height: 35px; width: auto; display: block; margin: 12px 0 0 0; border-radius: 0; box-shadow: none; border: none; filter: grayscale(100%) opacity(0.6); transition: filter var(--lr-duration-slow) var(--lr-easing-mechanical), opacity var(--lr-duration-slow) var(--lr-easing-mechanical), transform var(--lr-duration-slow) var(--lr-easing-mechanical); } @media (hover: hover) and (pointer: fine) { .lr-edu-logo:hover img { filter: grayscale(0%) opacity(1); transform: scale(1.08); } } .lr-cv-list { margin: 15px 0 15px 20px; padding: 0; } .lr-cv-list li { font-size: 14px; line-height: 1.6; color: var(--lr-color-text-main); margin-bottom: 8px; } @media (max-width: 768px) { .lr-edu-logo img { margin: 15px auto 20px auto; } .lr-cv-list { text-align: left; display: inline-block; } } /* ========================================================= 24. PUBLICATIONS & CROSS-REFERENCES ========================================================= */ .lr-ms { display: inline-block; background-color: var(--lr-color-bg-light); padding: 8px 14px; border-radius: var(--lr-radius-tag); font-size: var(--lr-font-size-tag); color: var(--lr-color-text-subtle); font-weight: 600; border: 1px solid var(--lr-color-border-subtle); transition: transform var(--lr-duration-base) var(--lr-easing-mechanical), background-color var(--lr-duration-base) var(--lr-easing-standard), border-color var(--lr-duration-base) var(--lr-easing-standard), box-shadow var(--lr-duration-base) var(--lr-easing-standard), color var(--lr-duration-base) var(--lr-easing-standard); } .lr-doi { display: inline-flex; align-items: center; font-size: 13px; background: var(--lr-color-bg-card); padding: 4px 10px; border-radius: var(--lr-radius-small); color: var(--lr-color-link); border: var(--lr-border-card); word-break: break-all; text-decoration: none; font-weight: 500; transition: transform var(--lr-duration-base) var(--lr-easing-mechanical), background-color var(--lr-duration-base) var(--lr-easing-standard), color var(--lr-duration-base) var(--lr-easing-standard), border-color var(--lr-duration-base) var(--lr-easing-standard), box-shadow var(--lr-duration-base) var(--lr-easing-standard); } .lr-doi:active { transform: scale(0.96); } a.lr-xref { border-bottom: 1px dashed var(--lr-color-accent); text-decoration: none; transition: background-color var(--lr-duration-base) var(--lr-easing-mechanical), border-color var(--lr-duration-base) var(--lr-easing-mechanical); } @media (hover: hover) and (pointer: fine) { .lr-ms:hover { background-color: var(--lr-color-accent-wash); border-color: var(--lr-color-accent); color: var(--lr-color-accent); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(var(--lr-color-accent-rgb), 0.12); } .lr-doi:hover { background-color: var(--lr-color-accent); color: #ffffff; border-color: var(--lr-color-accent); transform: translateY(-1px); box-shadow: 0 4px 8px rgba(var(--lr-color-accent-rgb), 0.12); } a.lr-xref:hover { background-color: rgba(var(--lr-color-accent-rgb), 0.06); border-bottom: 1px solid var(--lr-color-accent); } } /* ========================================================= 25. FORM CONTROLS ========================================================= */ input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], textarea, select { background-color: var(--lr-color-bg-light); border: 1px solid var(--lr-color-border-subtle); border-radius: var(--lr-radius-medium); padding: 14px 18px; color: var(--lr-color-text-main); font-family: inherit; font-size: var(--lr-font-size-body); width: 100%; max-width: 100%; box-sizing: border-box; transition: border-color var(--lr-duration-moderate) var(--lr-easing-mechanical), box-shadow var(--lr-duration-moderate) var(--lr-easing-mechanical), background-color var(--lr-duration-moderate) var(--lr-easing-standard); } @media (hover: hover) and (pointer: fine) { input[type="text"]:hover, input[type="email"]:hover, textarea:hover, select:hover { border-color: rgba(var(--lr-color-accent-rgb), 0.3); } } /* Contact Form 7 and Astra both ship their own unlayered, non-important `select:focus, textarea:focus, .wpcf7-form-control:focus` rule with a hardcoded #046BD2 border. Per the cascade layers spec, ANY unlayered normal-priority declaration beats ALL layered normal-priority declarations regardless of source order or specificity, so without !important here, every form field site-wide (including the contact form) shows that off-brand blue on focus instead of the accent token. :focus is included alongside :focus-visible for the same reason: CF7/Astra's own rule matches plain :focus. */ input[type="text"]:focus-visible, input[type="text"]:focus, input[type="email"]:focus-visible, input[type="email"]:focus, textarea:focus-visible, textarea:focus, select:focus-visible, select:focus, .wpcf7-form-control:focus { outline: none !important; background-color: #ffffff; border-color: var(--lr-color-accent) !important; /* CF7/Astra's own rule also sets box-shadow: none, which would otherwise erase this focus glow the same way it erases the border color. */ box-shadow: 0 8px 24px rgba(var(--lr-color-accent-rgb), 0.08), 0 2px 6px rgba(0, 0, 0, 0.02) !important; transform: translateY(-1px); } textarea { resize: vertical; min-height: 120px; line-height: 1.6; } input, textarea { caret-color: var(--lr-color-accent); } ::placeholder { color: var(--lr-color-text-muted); opacity: 0.6; font-weight: 400; } /* ============================================================ 25b. MOBILE-INPUT REFINEMENTS, coarse-pointer only 1. font-size: 16px on form controls iOS Safari auto-zooms any focused form control whose font-size is below 16px, then snaps back on blur. Forcing 16px on touch devices silences this jarring zoom-in / zoom-out cycle. Desktop UI is unaffected. 2. touch-action: manipulation on tap-targets Opts the element out of the legacy double-tap-to-zoom gesture so taps register instantly on iOS Safari. The page itself remains pinch-zoomable. Applied only to demonstrably interactive controls (buttons, pills, utility buttons, summary toggles); deliberately NOT applied to general anchors in body copy where users may still expect double-tap-to-zoom around prose. ============================================================ */ @media (pointer: coarse) { input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], textarea, select { font-size: 16px; } .wp-element-button, .wp-block-button__link, .lr-tag, .lr-tag-group span, .pill, .tag-pill, .lr-pill-small, .lr-ms, .lr-doi, .lr-back-to-top, #ast-scroll-top, details summary { touch-action: manipulation; } } /* ========================================================= 26. CODE & TECHNICAL SNIPPETS ========================================================= */ code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.9em; } code { background-color: var(--lr-color-bg-light); color: var(--lr-color-code); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--lr-color-border-subtle); word-break: break-word; } pre { background-color: #1f374e; color: #fffdf6; padding: 24px; border-radius: var(--lr-radius-medium); overflow-x: auto; box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.1); } pre code { background-color: transparent; color: inherit; padding: 0; border: none; } /* ========================================================= 27. TABLES ========================================================= */ table { width: 100%; border-collapse: collapse; table-layout: auto; min-width: 480px; } /* Table headers speak the same blueprint language as the [01] markers and section eyebrows (brief §3C): monospace, uppercase, widely tracked. On an engineering site the data tables are content, not furniture, this ties them into the technical-HUD register. Astra's unlayered th rules set only padding/border, so these typography declarations win from the components layer without needing !important. */ th { background-color: var(--lr-color-bg-light); color: var(--lr-color-text-heading); font-family: var(--lr-font-mono); font-weight: 500; text-align: left; padding: 16px 20px; text-transform: uppercase; letter-spacing: var(--lr-letter-spacing-mono); font-size: 11px; border-bottom: 2px solid var(--lr-color-accent); font-variant-numeric: tabular-nums; } td { padding: 14px 20px; border-bottom: 1px solid var(--lr-color-border-subtle); color: var(--lr-color-text-main); font-size: 14px; word-break: normal; overflow-wrap: break-word; font-variant-numeric: tabular-nums; transition: background-color var(--lr-duration-base) var(--lr-easing-standard); } /* Quiet zebra striping aids row-tracking across wide technical tables. Kept lighter than the row-hover tint so hover stays distinguishable. */ tbody tr:nth-child(even) td { background-color: rgba(var(--lr-color-accent-rgb), 0.022); } @media (hover: hover) and (pointer: fine) { tr:hover td { background-color: rgba(var(--lr-color-accent-rgb), 0.06); color: var(--lr-color-text-heading); } } /* ========================================================= 27b. EMPTY & LOADING STATES ========================================================= */ .lr-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--lr-gap-small); padding: var(--lr-padding-card); text-align: center; color: var(--lr-color-text-muted); font-size: var(--lr-font-size-small); line-height: var(--lr-line-height-small); border: 2px dashed var(--lr-color-border-card); border-radius: var(--lr-radius-medium); background: var(--lr-color-surface-muted); } .lr-loading { position: relative; pointer-events: none; color: transparent; min-height: 1.25em; border-radius: var(--lr-radius-small); background: linear-gradient( 90deg, var(--lr-color-surface-muted) 0%, var(--lr-color-bg-light) 50%, var(--lr-color-surface-muted) 100% ); background-size: 200% 100%; animation: lr-loading-shimmer 1.2s var(--lr-easing-smooth) infinite; } @keyframes lr-loading-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } @media (prefers-reduced-motion: reduce) { .lr-loading { animation: none; background: var(--lr-color-surface-muted); color: var(--lr-color-text-muted); } } /* Booking page, align shell padding with the rest of the platform. */ body.lr-page-booking .lr-section-full { padding-bottom: var(--lr-padding-section); } /* ========================================================= 28. SECTION VISUAL PROPERTIES ========================================================= */ /* Bands alternate cream / blue down the page. This is written as a general-sibling chain rather than :nth-of-type(even) on purpose. The published pages interleave .lr-section-full with plain wrapper DIVs inside .entry-content, on /teaching/ the run of children is NAV, SECTION, DIV*, DIV, DIV…, so :nth-of-type counts the wrappers too and the alternation lands on the wrong elements. Each additional `~ .lr-section-full` matches "at least N of my kind precede me", and because a later rule of equal specificity wins, the last matching link decides the colour. Chained to eight, which is more bands than any current page carries; a ninth simply repeats the eighth's colour rather than breaking. */ .lr-section-full { background-color: var(--lr-color-band-cream); } .lr-section-full ~ .lr-section-full { background-color: var(--lr-color-band-blue); } .lr-section-full ~ .lr-section-full ~ .lr-section-full { background-color: var(--lr-color-band-cream); } .lr-section-full ~ .lr-section-full ~ .lr-section-full ~ .lr-section-full { background-color: var(--lr-color-band-blue); } .lr-section-full ~ .lr-section-full ~ .lr-section-full ~ .lr-section-full ~ .lr-section-full { background-color: var(--lr-color-band-cream); } .lr-section-full ~ .lr-section-full ~ .lr-section-full ~ .lr-section-full ~ .lr-section-full ~ .lr-section-full { background-color: var(--lr-color-band-blue); } .lr-section-full ~ .lr-section-full ~ .lr-section-full ~ .lr-section-full ~ .lr-section-full ~ .lr-section-full ~ .lr-section-full { background-color: var(--lr-color-band-cream); } .lr-section-full ~ .lr-section-full ~ .lr-section-full ~ .lr-section-full ~ .lr-section-full ~ .lr-section-full ~ .lr-section-full ~ .lr-section-full { background-color: var(--lr-color-band-blue); } /* A rule here once painted `.lr-section-full:has(.lr-hero-heading)` in the blue band, on the reasoning that every interior page carries exactly one .lr-section-full and that it wraps the masthead, so the sibling chain above, which only starts alternating at the SECOND band, never fires and the blue ground was going unused. The premise was wrong and the rule is removed. The DOM was checked on one page, where .lr-section-full sits among eleven siblings inside .entry-content and does look like a masthead wrapper. What was never measured is how TALL it is. On most templates it wraps nearly the whole article: measured band height as a share of page height was 69% on /teaching/, 76% on /about/, 80% on /teaching/esat/, 85% on /projects/, 89% on /viscous-flow-fluid-mechanics/ and 97% on /teaching/esat/paper-0001/maths/. That does not read as a band against a cream page; it makes blue the page ground and cream a thin margin, which inverts the intended relationship. Real alternation needs a per-section hook in the page markup, because the templates do not give CSS a section boundary to attach to. The .lr-band-cream / .lr-band-blue classes below exist for exactly that and can be added to individual sections in WordPress. Until then the page grounds are cream body + white cards, which is a two-tone page already, just not a three-tone one. */ /* Explicit opt-outs, for pages that need to pin a band regardless of where it falls in the run. These come last so they beat every link in the chain above. */ .lr-section-full.lr-band-cream { background-color: var(--lr-color-band-cream); } .lr-section-full.lr-band-blue { background-color: var(--lr-color-band-blue); } /* A faint 32px drafting grid was painted over every band (brief §3C, blueprint aesthetic). Removed: the band now carries a real colour change, and a texture on top of that is a second statement of the same boundary. Neither reference design uses surface texture. */ /* ========================================================= 29. WORKED SOLUTIONS DETAILS AND SUMMARY ========================================================= */ details.lr-details-solution { margin-top: 16px; border: 1px solid var(--lr-color-border-subtle); border-radius: var(--lr-radius-medium); background-color: #ffffff; overflow: hidden; transition: box-shadow var(--lr-transition-base); } details.lr-details-solution:hover { box-shadow: var(--lr-shadow-rest); } details.lr-details-solution summary { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; font-weight: 700; font-size: 1.05rem; color: var(--lr-color-accent); background-color: var(--lr-color-bg-light); cursor: pointer; outline: none; list-style: none; border: 1px solid transparent; transition: background-color var(--lr-transition-base), color var(--lr-transition-base), border-color var(--lr-transition-base); } details.lr-details-solution summary::-webkit-details-marker { display: none; } details.lr-details-solution summary::after { content: "↓"; font-weight: bold; font-size: 1.1rem; color: var(--lr-color-accent); transition: transform var(--lr-transition-base); } details.lr-details-solution[open] summary::after { transform: rotate(180deg); } details.lr-details-solution[open] summary { background-color: var(--lr-color-bg-light); color: var(--lr-color-accent); } /* The white label here is only legible because the accent fill lands with it, and that fill was losing the cascade. Every published

carries an inline `background: var(--lr-color-background-subtle)`, and that token was never declared, an undefined var() invalidates the whole declaration, so the shorthand computed to `transparent` and, as an inline style, still outranked this rule's background-color. Result: white text on the white

panel the moment the pointer touched a solution toggle. The token is now declared in §tokens, but that only fixes the resting state; !important is what stops any inline background on the summary from stripping the fill out from under the white label again. :focus-visible rather than :focus, too. A summary keeps focus after a mouse click, so with :focus every solution the reader opened stayed inverted while they scrolled the page, the reported symptom. Keyboard focus still gets the fill, and the ring rule below still applies. */ details.lr-details-solution summary:hover, details.lr-details-solution summary:focus-visible { background-color: var(--lr-color-accent) !important; color: #ffffff; } details.lr-details-solution summary:hover::after, details.lr-details-solution summary:focus-visible::after { color: #ffffff; } details.lr-details-solution summary:focus-visible { border-color: var(--lr-color-accent-hover); box-shadow: var(--lr-shadow-focus-ring) !important; } details.lr-details-solution .lr-details-content { padding: 20px; border-top: 1px solid var(--lr-color-border-subtle); background-color: var(--lr-color-bg-card); } /* LUCAS REY CURRICULUM STYLES */ /* Tooltips, interactive labs, curriculum print (migrated from Titan inline blocks) */ .lr-tooltip { border-bottom: 1px dotted var(--lr-color-accent, #002147); cursor: help; text-decoration: none; } #lr-titan-tooltip-host { position: fixed; z-index: 100000; max-width: min(420px, 92vw); padding: 10px 14px; /* Ink system, not a standalone navy: the host previously sat on #1a1f2e, a literal from before the ink frame was unified, the same drift the frosted header carried. On-ink 15.77:1. */ background: var(--lr-color-ink, #002147); color: var(--lr-color-on-ink, #fffdf6); font-size: 0.82rem; line-height: 1.45; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--lr-radius-small, 13px); box-shadow: 0 2px 6px rgba(20, 33, 61, 0.18), 0 12px 32px -8px rgba(20, 33, 61, 0.35); pointer-events: none; display: none; } #lr-titan-tooltip-host.lr-titan-tip-visible { display: block; } .lr-titan-lab { margin: 20px 0; padding: 16px 18px; border: 1px solid var(--lr-color-border-subtle, #dce6ec); border-radius: 10px; background: var(--lr-color-bg-light, #eaf6fc); } .lr-titan-lab h4 { margin: 0 0 12px; font-size: 1rem; color: var(--lr-color-accent, #002147); } .lr-titan-lab label { display: block; font-size: 0.82rem; margin: 8px 0 4px; } .lr-titan-lab input { width: 100%; max-width: 280px; padding: 8px 10px; border: 1px solid var(--lr-color-border-subtle, #dce6ec); border-radius: 6px; font-size: 0.95rem; } .lr-titan-lab-out { margin-top: 14px; padding: 14px 16px; border-radius: 8px; background: #ffffff; border: 2px solid var(--lr-color-accent, #002147); font-size: 1.35rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; } .lr-titan-lab-note { font-size: 0.78rem; color: #5a6270; margin-top: 10px; } /* Fluid mechanics curriculum dashboard (index hub) - Publications-style lr-explore-portfolio + lr-card-white */ .lr-curriculum-hub * { box-sizing: border-box; } body.lr-curriculum-hub { margin: 0; font-family: inherit; color: var(--lr-color-text-main); background: var(--lr-color-bg-section); line-height: var(--lr-line-height-body); } .lr-curriculum-hub .lr-section-full { padding-top: clamp(2rem, 5vw, 3rem); padding-bottom: clamp(3rem, 8vw, 4.5rem); } .lr-curriculum-hub .lr-curriculum-search-section { width: 100%; max-width: var(--lr-max-width-card); margin-inline: auto; } .lr-curriculum-hub .lr-curriculum-search-section .lr-global-search-outer { max-width: 36rem; margin-inline: auto; margin-bottom: 0; } .lr-curriculum-hub .lr-curriculum-explore-heading { margin-bottom: var(--lr-padding-card); font-size: clamp(1.25rem, 3vw, 2rem); line-height: var(--lr-line-height-heading); } .lr-curriculum-hub .lr-curriculum-roadmap-desc { margin: 0 auto var(--lr-gap-card); max-width: 42rem; } /* Full-card links: same white card shell as Publications explore grid; no faux link underlines */ .lr-curriculum-hub a.lr-curriculum-dashboard-card, .lr-curriculum-hub a.lr-curriculum-dashboard-card:hover, .lr-curriculum-hub a.lr-curriculum-dashboard-card:visited { text-decoration: none !important; border-bottom: none !important; box-shadow: none !important; color: inherit !important; background-color: #ffffff !important; } .lr-curriculum-hub a.lr-curriculum-dashboard-card:focus-visible { outline: 2px solid var(--lr-color-accent); outline-offset: 3px; } .lr-curriculum-hub .lr-curriculum-module-label { display: block; font-size: 11px; color: var(--lr-color-accent); text-transform: none; letter-spacing: normal; font-weight: 600; margin-bottom: 10px; } .lr-curriculum-hub .lr-curriculum-dashboard-card h3.wp-block-heading { margin-bottom: 10px; text-transform: none !important; } .lr-curriculum-hub .lr-curriculum-dashboard-card .has-small-font-size { line-height: 1.7; margin-bottom: 0; } .lr-curriculum-hub .lr-curriculum-dashboard-cta { margin-top: auto; padding-top: var(--lr-gap-card); font-size: var(--lr-font-size-caption); font-weight: 600; color: var(--lr-color-accent); } /* Global curriculum search (dashboard hub) */ .lr-visually-hidden, .lr-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .lr-global-search-outer { max-width: 1100px; margin: 0 auto 1.5rem; padding: 0 var(--lr-padding-inline-shell); position: relative; z-index: 20; } .lr-global-search { position: relative; max-width: 520px; margin: 0 auto; text-align: left; } .lr-global-search-input { width: 100%; padding: 12px 16px; border-radius: var(--lr-radius-medium); border: 1px solid var(--lr-color-border-subtle); font-size: 1rem; background: var(--lr-callout-bg-color); box-shadow: 0 4px 18px rgba(13, 17, 23, 0.06); transition: border-color var(--lr-transition-base), box-shadow var(--lr-transition-base); } .lr-global-search-input:focus-visible { outline: none; border-color: var(--lr-color-accent, #002147); box-shadow: var(--lr-shadow-focus-ring); } .lr-global-search-dropdown { position: absolute; left: 0; right: 0; top: calc(100% + var(--lr-gap-tight)); background: var(--lr-callout-bg-color); border: var(--lr-border-card); border-radius: var(--lr-radius-medium); box-shadow: 0 16px 40px rgba(13, 17, 23, 0.16); padding: 6px; max-height: 320px; overflow-y: auto; /* Prevent the page from starting to scroll when the user reaches the bottom of the dropdown's own scroll area (touch devices). Pure UX: no visual change, no impact on mouse-wheel users. */ overscroll-behavior: contain; z-index: 50; } .lr-global-search-dropdown[hidden] { display: none !important; } .lr-global-search-dropdown a { display: block; padding: 10px 14px; font-size: 0.9rem; color: var(--lr-color-text, #1f374e); text-decoration: none; border-radius: var(--lr-radius-small); border-left: 3px solid transparent; transition: background-color var(--lr-duration-base) var(--lr-easing-standard), color var(--lr-duration-base) var(--lr-easing-standard), border-color var(--lr-duration-base) var(--lr-easing-standard); } /* Keyboard-driven highlight (.is-highlighted) is rendered identically to mouse hover and :focus, so users moving through results with ArrowDown/ArrowUp see the same affordance as mouse users. The class is toggled by the curriculum global-search keydown handler in functions.php §25-#4. */ .lr-global-search-dropdown a:hover, .lr-global-search-dropdown a:focus-visible, .lr-global-search-dropdown a.is-highlighted { background: var(--lr-color-accent-wash, #eef2f8); color: var(--lr-color-accent, #002147); border-left-color: var(--lr-color-accent, #002147); outline: none; box-shadow: inset 0 0 0 2px rgba(var(--lr-color-accent-rgb, 0, 33, 71), 0.25); } .lr-global-search-dropdown .lr-global-search-empty { padding: 12px 14px; font-size: 0.85rem; color: var(--lr-color-text-subtle, #3e5871); } /* Touch-input tap-target sizing. The existing max-width:480px rule below already covers small phones, but tablets (>480px wide, coarse pointer) fall through that net. Targeting `pointer: coarse` covers iPad portrait/landscape and any touch device regardless of viewport width, raising each result to the WCAG 2.5.5 minimum 44px hit area without affecting mouse users. */ /* Wide math blocks: horizontal scroll with subtle scrollbar. The scrollbar tints below previously used the legacy accent (#4a7ac7) verbatim; switched to the canonical accent rgb token so the scrollbar stays in lock-step with the rest of the palette. */ .lr-math-block { overflow-x: auto; overflow-y: hidden; max-width: 100%; scrollbar-width: thin; scrollbar-color: rgba(var(--lr-color-accent-rgb), 0.4) rgba(240, 243, 248, 0.8); } .lr-math-block::-webkit-scrollbar { height: 6px; } .lr-math-block::-webkit-scrollbar-track { background: rgba(240, 243, 248, 0.9); border-radius: 3px; } .lr-math-block::-webkit-scrollbar-thumb { background: rgba(var(--lr-color-accent-rgb), 0.35); border-radius: 3px; } .lr-math-block::-webkit-scrollbar-thumb:hover { background: rgba(var(--lr-color-accent-rgb), 0.55); } /* Grand Synthesis: curriculum HTML utilities (replaces former inline style attributes) */ nav.lr-related-modules { max-width: 900px; margin-left: auto; margin-right: auto; padding: 16px 20px; border-radius: var(--lr-radius-medium); border: 1px solid var(--lr-color-border-subtle); } body.lr-titan-doc .lr-list-relaxed, .lr-titan-doc .lr-list-relaxed { line-height: 1.65; } body.lr-titan-doc .lr-mb-0 { margin-bottom: 0 !important; } body.lr-titan-doc .lr-mb-8 { margin-bottom: 8px; } body.lr-titan-doc .lr-cross-link, .lr-titan-doc .lr-cross-link { color: inherit; } body.lr-titan-doc .lr-text-link-underline, .lr-titan-doc .lr-text-link-underline { } body.lr-titan-doc .lr-text-link-muted, .lr-titan-doc .lr-text-link-muted { color: var(--lr-color-text-subtle); } body.lr-titan-doc .wp-block-columns.lr-figure-placeholder, .lr-titan-doc .wp-block-columns.lr-figure-placeholder { background-color: var(--lr-color-bg-light); border: 2px dashed var(--lr-color-border-subtle); border-radius: var(--lr-radius-medium); height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 16px 0; } body.lr-titan-doc .lr-figure-placeholder-icon, .lr-titan-doc .lr-figure-placeholder-icon { font-size: 24px; color: var(--lr-color-text-subtle); margin-bottom: 8px; } body.lr-titan-doc .lr-figure-placeholder-label, .lr-titan-doc .lr-figure-placeholder-label { color: var(--lr-color-text-subtle); text-align: center; font-family: monospace; letter-spacing: 0.5px; } body.lr-titan-doc .lr-figure-placeholder-desc, .lr-titan-doc .lr-figure-placeholder-desc { color: var(--lr-color-text-subtle); text-align: center; margin-top: 4px; padding: 0 16px; } /* `.lr-sr-only` is now handled globally next to `.lr-visually-hidden` above. */ body.lr-titan-doc .lr-titan-iter-details-box, .lr-titan-doc .lr-titan-iter-details-box { margin: 16px 0; padding: 12px; border: 1px solid var(--lr-color-border-subtle); border-radius: 8px; } body.lr-titan-doc .lr-titan-iter-summary, .lr-titan-doc .lr-titan-iter-summary { cursor: pointer; font-weight: bold; color: var(--lr-color-accent); } body.lr-titan-doc .lr-derivation-content.lr-titan-iter-content, .lr-titan-doc .lr-derivation-content.lr-titan-iter-content { margin-top: 12px; } /* LUCAS REY GRAND AUDIT: tables, callouts, mobile */ /* Narrow viewports (~375px): avoid media / code / flex children blowing layout */ body.lr-titan-doc img, body.lr-titan-doc video, body.lr-titan-doc svg { max-width: 100%; height: auto; } body.lr-titan-doc pre { overflow-x: auto; max-width: 100%; box-sizing: border-box; } body.lr-titan-doc .wp-block-table.lr-table-wrap, .lr-titan-doc .wp-block-table.lr-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } table.lr-table-clean { width: 100%; border-collapse: collapse; font-size: 0.9rem; line-height: 1.45; text-align: left; } table.lr-table-clean th, table.lr-table-clean td { padding: 0.5rem 0.65rem; border-bottom: 1px solid var(--lr-color-border-subtle, #dce6ec); vertical-align: top; } table.lr-table-clean thead th { font-weight: 600; background: rgba(240, 243, 248, 0.65); } table.lr-table-clean.lr-table-center th, table.lr-table-clean.lr-table-center td { text-align: center; } table.lr-table-clean.lr-table-compact { font-size: 0.85em; } /* Structural integrity for the newly semantic

tags, excluding premium callouts */ body.lr-titan-doc aside.lr-panel-white:not(.lr-panel-accent-edge), .lr-titan-doc aside.lr-panel-white:not(.lr-panel-accent-edge) { box-sizing: border-box !important; border: 1px solid var(--lr-color-border-subtle) !important; background-color: #ffffff !important; padding: clamp(16px, 3vw, 24px) clamp(20px, 4vw, 28px) !important; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important; border-radius: 10px !important; font-size: 0.875rem !important; line-height: 1.5 !important; } /* ========================================================= PEDAGOGICAL CALLOUTS, UNLAYERED (ASTRA / MINIFIER SAFE) ========================================================= */ /* --- Pedagogical Callouts Clean Slate --- */ .lr-panel-white.lr-panel-accent-edge { /* A faint accent wash (not flat white) distinguishes callout panels from plain content cards, which share almost identical border/shadow treatment otherwise. */ background-color: var(--lr-color-accent-wash); /* Decoupled borders to prevent minifier squashing */ border-top: 1px solid var(--lr-color-border-subtle) !important; border-right: 1px solid var(--lr-color-border-subtle) !important; border-bottom: 1px solid var(--lr-color-border-subtle) !important; border-left: 4px solid var(--lr-callout-edge-color) !important; /* Setting up the transition for smooth lifting */ transition: transform var(--lr-transition-pop), box-shadow var(--lr-transition-pop); /* The one piece worth keeping from the "frosted glass" pass: a 1px light-catching edge along the top of the panel. The backdrop-filter that shipped with it is gone, these panels sit on flat solid bands, so blur(12px)+saturate(140%) composited exactly the band colour back over itself while costing a layer of GPU per panel, and the overflow:hidden it needed clipped focus rings and MathJax descenders at the panel edge. Solid wash + light edge gives the same finish at zero paint cost. */ box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.9), 0 2px 8px var(--lr-callout-shadow-idle); } /* Hover and Mobile Pop States */ /* Only altering transform, to preserve the 5px left edge AND the resting box-shadow. The rule used to also set `box-shadow: var(--lr-shadow-hover-panel)`, which is the same no-op token the dead card hover used: it resolves to `none`, so it did not add a hover shadow, it DELETED the resting one. Hovering a callout removed the inset light edge the comment above calls the one piece worth keeping, plus the soft contact shadow, and lifted the panel 2px into a flatter state than it started in. Dropping the declaration is the whole fix, the transform was always the intended change. */ .lr-panel-white.lr-panel-accent-edge:hover, .lr-panel-white.lr-panel-accent-edge[data-active="true"] { transform: translateY(var(--lr-lift-card-hover)); } .lr-panel-white.lr-panel-accent-edge > .lr-panel-scroll-x { min-width: 0 !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch !important; box-sizing: border-box !important; } .lr-panel-white.lr-panel-accent-edge strong { color: var(--lr-callout-edge-color) !important; font-weight: 700 !important; } /* MathJax display equations inside premium accent notes: not inside .lr-math-block, so give the mjx-container its own horizontal scroll (curriculum / lr-titan-doc only) */ body.lr-titan-doc aside.lr-panel-white.lr-panel-accent-edge mjx-container[display="true"], .lr-titan-doc aside.lr-panel-white.lr-panel-accent-edge mjx-container[display="true"] { display: block !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; padding-bottom: 6px !important; box-sizing: border-box !important; } body.lr-titan-doc aside.lr-panel-white.lr-panel-accent-edge mjx-container[display="true"] > mjx-math, .lr-titan-doc aside.lr-panel-white.lr-panel-accent-edge mjx-container[display="true"] > mjx-math { min-width: max-content !important; } /* --- Section Navigation Row Clean Slate --- */ .lr-nav-row { display: flex; justify-content: space-between; align-items: center; width: 100%; border-top: 1px solid var(--lr-color-border-subtle); padding-top: var(--lr-gap-small); margin-top: var(--lr-gap-medium); font-size: var(--lr-font-size-small); } /* Force perfect symmetry: 3 equal-width columns */ .lr-nav-row > :first-child { flex: 1; text-align: left; } .lr-nav-row > :nth-child(2) { flex: 1; text-align: center; } .lr-nav-row > :last-child { flex: 1; text-align: right; } /* Mobile responsiveness: stack vertically on small screens */ /* ========================================================= FIX: EMAILS AND MULTILINE BUTTONS (Contact Panel) ========================================================= */ /* 1. Prevent emails from breaking mid-word */ a.lr-email-link, .lr-panel-light a[href*="mailto:"] { white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: clamp(13px, 1.5vw, 16px) !important; } /* 2. Allow buttons in the contact panel to wrap whole words */ .lr-panel-light .wp-block-button__link, .lr-panel-light .wp-element-button { white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; height: auto !important; min-height: 48px !important; line-height: 1.3 !important; padding-top: 12px !important; padding-bottom: 12px !important; text-align: center !important; } .lr-contact-intent-field { margin-bottom: 1.25rem; } .lr-contact-intent-field label { display: block; font-weight: 600; margin-bottom: 0.35rem; } .lr-contact-intent-field select { width: 100%; max-width: 28rem; min-height: 44px; } /* Contact, teaching enquiry form inside lr-card */ .lr-contact-enquiry .lr-contact-form-wrap { margin-top: 1.5rem; padding-top: 0.25rem; } .lr-contact-form-wrap .wpcf7 { margin: 0; } /* Ensure labels have consistent rhythm and weight */ .lr-contact-form-wrap .wpcf7 form label { display: block; font-weight: 600; margin-bottom: var(--lr-space-2); } .lr-contact-form-wrap .wpcf7 form > p { margin-bottom: var(--lr-space-4); } /* Premium input styling */ .lr-contact-form-wrap .wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) { width: 100%; max-width: 100%; padding: var(--lr-space-3) var(--lr-space-4); border-radius: var(--lr-radius-small); border: var(--lr-border-card); background-color: var(--lr-color-surface-muted); font-family: inherit; font-size: 1rem; transition: border-color var(--lr-duration-fast) var(--lr-easing-standard), box-shadow var(--lr-duration-fast) var(--lr-easing-standard); } .lr-contact-form-wrap .wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):focus { outline: none; border-color: var(--lr-color-accent); box-shadow: var(--lr-shadow-focus-ring); background-color: #ffffff; } /* Checkbox optical alignment */ .lr-contact-form-wrap .wpcf7-list-item { display: flex; align-items: flex-start; margin-left: 0; } .lr-contact-form-wrap .wpcf7-list-item input[type="checkbox"] { margin-top: 4px; /* Optical alignment with first line of label */ margin-right: var(--lr-space-2); } .lr-contact-form-wrap .wpcf7-list-item-label { font-weight: 400; /* Distinct from main field labels */ } /* Submit button */ .lr-contact-form-wrap .wpcf7-submit { margin-top: var(--lr-space-3); padding: var(--lr-space-3) var(--lr-space-5); background-color: var(--lr-color-accent); color: #ffffff; border: none; border-radius: var(--lr-radius-tag); font-weight: 600; cursor: pointer; transition: transform var(--lr-transition-pop), box-shadow var(--lr-transition-pop); } .lr-contact-form-wrap .wpcf7-submit:hover { transform: translateY(-1px); box-shadow: var(--lr-shadow-hover-button); } /* Contact, professional enquiry panels (email paths; teaching uses form below) */ .lr-enquiry-paths { margin-top: 1.5rem; } .lr-enquiry-jump { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin: 1rem 0 1.5rem; padding: 0; list-style: none; } .lr-enquiry-jump a { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 0.85rem; border: 1px solid var(--lr-color-border-subtle); border-radius: 6px; font-size: 0.9rem; text-decoration: none; } .lr-enquiry-panel { margin-bottom: 1.25rem; padding: 1.25rem 1.35rem; border: 1px solid var(--lr-color-border-subtle); border-radius: 8px; scroll-margin-top: 120px; /* The panel carried no transition at all, so its :target state snapped on. Now that it also answers hover and focus (tier 2, §12) the three states need to cross-fade rather than jump. Colour only, so there is nothing here for prefers-reduced-motion to suppress. */ transition: background-color var(--lr-duration-base) var(--lr-easing-smooth), border-color var(--lr-duration-base) var(--lr-easing-smooth), box-shadow var(--lr-duration-base) var(--lr-easing-smooth); } .lr-enquiry-panel.is-active, .lr-enquiry-panel:target { border-color: var(--lr-color-accent, #002147); box-shadow: 0 0 0 1px var(--lr-color-accent, #002147); } .lr-enquiry-panel h3 { margin-top: 0; } .lr-contact-intent-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Visible breadcrumb trail (mirrors JSON-LD hierarchy) */ .lr-breadcrumb { margin: 0 0 1.25rem; font-size: 0.875rem; line-height: 1.5; } .lr-breadcrumb-list { display: flex; flex-wrap: wrap; gap: 0.35rem 0; margin: 0; padding: 0; list-style: none; } .lr-breadcrumb-item { display: inline-flex; align-items: center; color: var(--lr-color-text-muted); } .lr-breadcrumb-item:not(:last-child)::after { content: "/"; margin: 0 0.45rem; color: var(--lr-color-border-subtle); pointer-events: none; } .lr-breadcrumb-item a { text-decoration: none; } .lr-breadcrumb-item a:hover, .lr-breadcrumb-item a:focus-visible { text-decoration: underline; } .lr-breadcrumb-item[aria-current="page"] { color: inherit; font-weight: 600; } .lr-author-provenance { margin-top: 1.5rem; border-top: 1px solid var(--lr-color-border-subtle, #dce6ec); } .lr-author-provenance .lr-section-heading { margin-bottom: 0.75rem; } /* Knowledge graph, nested pillar membership (parent_pillar hierarchy) */ .lr-list-group .lr-list-item.lr-list-item-nested { margin-left: 1.25em; font-size: 0.95em; } /* Runtime curriculum path (lr-curriculum.php) */ .lr-curriculum-path .lr-list-item strong { font-weight: 600; } /* ===================================================================== Cookie consent & legal footer (lr-compliance.php) ===================================================================== */ .lr-cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100001; padding: 14px max(14px, env(safe-area-inset-left, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-right, 0px)); background: rgba(255, 255, 255, 0.98); border-top: 1px solid var(--lr-color-border-subtle, #dce6ec); box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .lr-cookie-banner[hidden] { display: none !important; } .lr-cookie-banner__inner { max-width: var(--lr-content-max); margin: 0 auto; display: grid; gap: var(--lr-gap-small); } .lr-cookie-banner__title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--lr-color-text-heading, #1f374e); } .lr-cookie-banner__text { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--lr-color-text, #1f374e); } .lr-cookie-banner__link { color: var(--lr-color-accent, #002147); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .lr-cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; } /* These are bare