/* =========================================================== Oldworld Creative - global stylesheet Shared across index.html, about.html, contact.html, 404.html, and the case-study pages (ministry-of-defence.html, lloyds-banking-group.html, pearson-education.html, terraquest.html). =========================================================== */ /* ---------- TOKENS ---------- */ :root { /* LIGHT MODE - default. Cool palette tokens: white cards on a pale cornflower page, Deep Navy ink, Steel Navy mute, Deep Cobalt accent (7.30:1 on card / 5.89:1 on page). */ --cream: #FFFFFF; --cream-tint: #D7EAF3; --ink: #002B40; --ink-soft: #1F4861; --mute: #3F5E76; --rule: rgba(0, 43, 64, 0.10); --rule-strong: #002B40; --accent: #0E5A8F; --accent-strong: #074870; --accent-soft: #82B4D5; /* Fixed cream that never flips - for case-study hover row text on accent bg */ --cream-fixed: #FFFFFF; /* Conformance tick green - chosen to clear ≥3:1 non-text contrast against the cream-tint top-bar bg in light mode. Dark mode swaps to a brighter emerald below. */ --check: #166534; --serif: "Fraunces", "Times New Roman", serif; --sans: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --radius: 8px; --shadow-hover: 0 10px 28px rgba(0, 43, 64, 0.12), 0 2px 6px rgba(0, 43, 64, 0.08); } /* DARK MODE - applied via three triggers: 1. The visible theme toggle's checkbox state (works without JS via :has) 2. The JS-applied .theme-dark class on (persisted choice or OS) 3. The OS preference media query below (works without JS at all) - scoped with :not(.theme-light) so an explicit "light" choice still wins. */ body:has(.theme-toggle:checked), html.theme-dark body { --cream: #002B40; --cream-tint: #001A2A; --ink: #FFFFFF; --ink-soft: #D7EAF3; --mute: #82B4D5; --rule: rgba(255, 255, 255, 0.10); --rule-strong: #FFFFFF; --accent: #5BB5EC; --accent-strong: #7BC5EF; --accent-soft: #1F4861; --cream-fixed: #002B40; --shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.30); /* Conformance tick - lighter emerald for dark mode (≥10:1 on the near-black top-bar bg). */ --check: #4ADE80; } @media (prefers-color-scheme: dark) { html:not(.theme-light) body { --cream: #002B40; --cream-tint: #001A2A; --ink: #FFFFFF; --ink-soft: #D7EAF3; --mute: #82B4D5; --rule: rgba(255, 255, 255, 0.10); --rule-strong: #FFFFFF; --accent: #5BB5EC; --accent-strong: #7BC5EF; --accent-soft: #1F4861; --cream-fixed: #002B40; --shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.30); --check: #4ADE80; } } /* ---------- BASE ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* ---------- SKIP LINK ---------- Sits at the very top of the document, off-screen by default and revealed when keyboard-focused. Lets users bypass the conformance bar, nav, and header to jump straight to main content. */ .skip-link { position: absolute; top: 8px; left: 8px; z-index: 1000; padding: 10px 28px; background: var(--ink); color: var(--cream); font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 4px; transform: translateY(-150%); transition: transform .15s ease; } .skip-link:focus { transform: translateY(0); outline: 2px solid var(--accent); outline-offset: 2px; } /* Inline skip-link variant - used inside a card to skip past a complex widget (e.g. the carousel on case studies). Out of flow (sr-only positioned) when unfocused so it doesn't leave a gap between the card heading and the widget; brought into flow when keyboard-focused and rendered as a standard skip-link pill at its DOM position. */ .skip-link.skip-carousel { position: absolute; left: -9999px; top: auto; transform: none; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; clip: rect(0, 0, 0, 0); margin: 0; padding: 0; } .skip-link.skip-carousel:focus, .skip-link.skip-carousel:focus-visible { position: static; left: auto; display: inline-block; width: auto; height: auto; overflow: visible; white-space: normal; padding: 10px 28px; margin: 8px 0 16px; clip: auto; } body { margin: 0; background: var(--cream-tint); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; padding: 16px; } @media (min-width: 768px) { body { padding: 20px 16px 16px; } } @media (min-width: 1024px) { body { padding: 32px 24px 24px; } } ::selection { background: var(--accent); color: var(--cream); } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } /* ---------- HERO HOVER ---------- */ /* Hero/cover/card panels lift gently on hover. */ .hero, .cover, .card { transition: box-shadow .2s ease; } .hero:hover, .cover:hover, .card:hover { box-shadow: var(--shadow-hover); } /* ---------- GLOBAL FOCUS RING (WCAG 2.4.7) ---------- Branded focus ring applied at all conformance levels - keyboard users need a visible focus indicator regardless of the WCAG toggle setting. The toggle only widens scope/contrast further at AA/AAA. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } /* ---------- READING-PROGRESS RAIL ---------- Decorative dotted vertical line in the left page margin, with a single brighter dot that tracks the user's scroll position. Injected by oldworld.js on every page; the desktop-only media query below hides it below 1024px so it doesn't crowd phones or tablets. aria-hidden because purely decorative; pointer-events: none so it never blocks interaction. */ .progress-rail { position: fixed; top: 96px; bottom: 64px; left: 14px; width: 4px; pointer-events: none; z-index: 5; } .progress-rail-line { position: absolute; inset: 0; background-image: radial-gradient(circle, var(--accent-soft) 1.5px, transparent 2px); background-size: 4px 12px; background-repeat: repeat-y; background-position: center top; opacity: 0.6; } .progress-rail-dot { position: absolute; left: 50%; top: 0; width: 10px; height: 10px; background: var(--accent); border-radius: 50%; transform: translate(-50%, -50%); transition: top 0.06s linear; } @media (prefers-reduced-motion: reduce) { .progress-rail-dot { transition: none; } } /* Only show at desktop+ widths — below that the left margin is too tight to hold the rail without crowding content. */ @media (max-width: 1023px) { .progress-rail { display: none; } } /* The theme toggle's real input is visually hidden, so the focus ring has to be forwarded to the visible label pill. */ .theme-link:has(.theme-toggle:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-toggle:focus-visible { outline: none; } /* ---------- TARGET SIZE (WCAG 2.5.8, AA, applied universally) ---------- Every primary interactive element gets a 24×24 CSS px minimum hit area so AA target size passes at all conformance levels without requiring the WCAG toggle. The AAA toggle further upgrades these to 44×44. */ .nav-links a, .top-link, .back-link, .nav-toggle { min-height: 24px; display: inline-flex; align-items: center; } .foot-col > a { min-height: 24px; } /* Footer-link top margin in A and AA - scoped to NOT-AAA so it doesn't stack with the AAA-specific margin-top on the same element. Negative value pulls the link text up to sit on the strapline's baseline. */ html:not(.wcag-aaa) .foot-col > a { margin-top: -17px; } /* =========================================================== WCAG AA OVERRIDES - only applied when the user toggles AA via the conformance bar (html.wcag-aa class). =========================================================== */ /* 1.4.3 Contrast - the brand vermilion (--accent) is now #C73100, which gives 4.7:1 on cream and clears AA normal text in default A as well. No AA-specific color override is needed. */ /* 1.4.11 Non-text contrast: conformance pill borders need 3:1. Applied at AA and inherited at AAA so the keyline doesn't visibly weaken when stepping up a level (1.4.11 is a Level AA criterion that still applies at AAA - there's no enhanced version, so the same darker rule is fine). */ html.wcag-aa .conformance-options, html.wcag-aaa .conformance-options { border-color: var(--mute); } html.wcag-aa .conformance-option, html.wcag-aaa .conformance-option { border-right-color: var(--mute); } /* 2.4.7 Focus visible + 2.5.8 Target Size are handled globally above - they apply at all conformance levels. */ /* 1.4.10 Reflow is now handled universally in the .top-bar rules above - the bar stacks vertically at narrow widths regardless of WCAG level. */ /* =========================================================== WCAG AAA OVERRIDES - only applied when the user toggles AAA via the conformance bar (html.wcag-aaa class). Brand-vermilion contrast tightening (AAA 1.4.6) is deferred until the branding palette is revisited. =========================================================== */ /* 2.3.3 Animation from Interactions - honour OS reduced-motion preference universally. The OS-level "Reduce motion" setting is an accessibility preference that applies regardless of the page's WCAG toggle, so this rule is not scoped to .wcag-aaa. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } /* =========================================================== SCROLL-REVEAL — fade-up entrance on scroll. Applied to elements marked .reveal. Initial state is hidden + nudged down; JS adds .is-visible when the element enters the viewport, which fires the reveal-in @keyframes animation. IMPORTANT: this uses `animation` rather than `transition` by design. CSS `transition` is a single shorthand - if .reveal declared a `transition: opacity, transform` here, that value would override ANY hover transition declared on a .reveal element further down the cascade (e.g. .card.reveal's `transition: box-shadow`, .next-link.reveal's `transition: background-color`). `animation` is a separate property and doesn't share that cascade, so any .reveal element is free to declare whatever hover transition it wants without it being clobbered. Scoped under html.js so no-JS users see content immediately (no permanently hidden elements if JS fails to load). The global prefers-reduced-motion rule above collapses animation duration to 0.01ms so reduced-motion users get a near-instant appear-in-place rather than a slide. =========================================================== */ @keyframes reveal-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } html.js .reveal { opacity: 0; transform: translateY(24px); will-change: opacity, transform; } html.js .reveal.is-visible { opacity: 1; transform: none; animation: reveal-in 0.7s ease-out; } /* 1.4.6 Contrast (Enhanced) - deepen --mute so muted text clears 7:1 on cream. Light mode: deeper steel; dark mode: lighter cornflower. */ html.wcag-aaa { --mute: #2F4B5F; } html.wcag-aaa body:has(.theme-toggle:checked), html.wcag-aaa.theme-dark body { --mute: #9CC1D6; } @media (prefers-color-scheme: dark) { html.wcag-aaa:not(.theme-light) body { --mute: #9CC1D6; } } /* 1.4.6 Contrast (Enhanced) - Option 1 accent split. Vermilion (4.7:1 on cream) passes AA normal and AAA large text, but not AAA normal (7:1). For AAA mode, swap small-text uses of accent to var(--ink) so they clear AAA. Large headings, decorative graphics, hover backgrounds, and accent rules keep the vermilion. */ /* .brand i is no longer in this AAA swap: at 24px it qualifies as large text (≥18pt), where vermilion #C73100 on cream clears AAA's 4.5:1 with ~4.65:1 to spare. The foot-brand stays small (~17px) so it still needs the swap; same for the body-h italic which is normal-size text. */ /* AAA 1.4.6 reroute - any small-text use of --accent or --accent-strong that doesn't clear 7:1 swaps to var(--ink) (16.5:1 light / 15.5:1 dark) when AAA is engaged. Resting states and hover states both go to ink so the colour never dips below 7:1 mid-interaction; underline thickness and position carry the hover affordance instead. .body-h .ital is intentionally NOT here - at 24px+ it qualifies as large text (≥18pt), where vermilion #C73100 on cream clears AAA's 4.5:1 with ~4.65:1. Same for the cover-h, hero-h, section-h italics. */ html.wcag-aaa .foot-brand i, html.wcag-aaa .foot-brand a:hover, html.wcag-aaa .foot-brand a:hover i, html.wcag-aaa .top-link, html.wcag-aaa .top-link:hover, html.wcag-aaa .top-link .arrow, html.wcag-aaa .cover-tag a, html.wcag-aaa .cover-tag a:hover, html.wcag-aaa .contact-asterisk, html.wcag-aaa .placeholder-note .ital, html.wcag-aaa .foot-col > a:hover, html.wcag-aaa .foot-col > a[target="_blank"]:hover::after, html.wcag-aaa .theme-link:hover, html.wcag-aaa .nav-links a:hover, html.wcag-aaa .back-link:hover, html.wcag-aaa .back-link:hover .arrow, html.wcag-aaa .back-link .arrow { color: var(--ink); } /* The italic "Process" word in the Our Process heading sits on the inverted .approach panel - which flips background per mode (Deep Navy ink in light mode, white cream in dark mode). Each mode needs the accent calibrated against its panel surface: - Light mode panel #002B40 Deep Navy: #5BB5EC bright cobalt = 6.53:1 (AAA Lg) - Dark mode panel #FFFFFF white: #0E5A8F deep cobalt = 7.30:1 (AAA) */ .approach .section-h .ital { color: #5BB5EC; } html.theme-dark .approach .section-h .ital, body:has(.theme-toggle:checked) .approach .section-h .ital { color: #0E5A8F; } @media (prefers-color-scheme: dark) { html:not(.theme-light) .approach .section-h .ital { color: #0E5A8F; } } /* 2.5.5 Target Size (Enhanced) - small interactive elements grow to 44×44. */ html.wcag-aaa .nav-links a, html.wcag-aaa .top-link, html.wcag-aaa .back-link, html.wcag-aaa .foot-col > a, html.wcag-aaa .brand { min-height: 44px; padding: 10px 8px; display: inline-flex; align-items: center; } /* .nav-toggle gets the same AAA tap-area treatment but without the display: inline-flex - the toggle is display: none by default and only flipped to inline-flex at <768px via the .nav-collapsed rule. Forcing display here would make it appear at every viewport in AAA. */ html.wcag-aaa .nav-toggle { min-height: 44px; padding: 10px 8px; } /* Brand sits at the nav's left content edge - zero the AAA padding-left so it stays visually flush rather than shifting 8px in from the edge. */ html.wcag-aaa .brand { padding-left: 0; } /* 2.5.5 Target Size (Enhanced) - the conformance pills need min- width as well as min-height because their text is narrow ("AA" / "AAA"). */ html.wcag-aaa .conformance-option { min-height: 44px; min-width: 44px; } /* Footer LinkedIn: keep flex-row + right-align + top-align so the link text both right-aligns within its column and visually top-aligns with the tagline. min-height still gives a 44×44 click area below. */ html.wcag-aaa .foot-col > a { display: flex; justify-content: flex-end; align-items: flex-start; padding-top: 0; margin-top: 4px; } /* The footer pipe separator in AAA: reclaim its left gutter, which the AAA `padding: 10px 8px` shorthand would otherwise wipe out. The pipe's vertical position (top: 4px from the default rule) already aligns with the top-of-text in both 24px and 44px anchor heights. */ html.wcag-aaa .foot-col > a + a { padding-left: 22px; } /* 1.4.8 Visual Presentation - looser line-heights on tight headings so wrapped lines breathe more. */ html.wcag-aaa .hero-h, html.wcag-aaa .cover-h, html.wcag-aaa .section-h, html.wcag-aaa .body-h, html.wcag-aaa .foot-brand, html.wcag-aaa .case-body h3, html.wcag-aaa .next-title { line-height: 1.25; } /* 3.1.4 Abbreviations - markup is added universally in the HTML (semantically helpful even at A/AA), but only AAA exposes the visual cue (dotted underline) and help cursor. The default rule only resets the browser's underline+help-cursor so body-copy abbreviations render at the exact same kerning and density as the surrounding text. */ abbr[title] { text-decoration: none; cursor: inherit; } /* Scoped letter-spacing/kerning reset: only abbreviations inside wide- tracking parents (uppercase eyebrows, the conformance bar, etc.) need to be pinned back to normal so the abbreviation doesn't visually stretch with the parent's tracking. Body-copy abbrs are NOT included - they inherit normal tracking from the paragraph and stay tight. */ .conformance-label abbr[title], .case-meta abbr[title], .quote-attr abbr[title], .foot-tag abbr[title], .clients-sector abbr[title] { letter-spacing: normal; word-spacing: normal; font-variant: normal; font-feature-settings: normal; } html.wcag-aaa abbr[title] { text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: var(--mute); cursor: help; } /* =========================================================== WCAG CONFORMANCE BAR - sits at the very top of every page. Three segmented pills (A / AA / AAA) - each applies the matching level of overrides defined above when selected. =========================================================== */ .top-bar { display: grid; grid-template-columns: auto 1fr; align-items: center; padding: 10px 0; background: var(--cream-tint); border-bottom: 0.5px solid var(--rule); } .top-bar > .conformance-bar { grid-column: 1; justify-self: start; } .top-bar > .theme-link { grid-column: 2; justify-self: end; } .conformance-bar { display: inline-flex; align-items: center; gap: 12px; } /* Conformance bar stays inline at every viewport - pills flush-left, "WCAG 2.2" label + tick immediately to their right. The fit is tight on narrow phones; .conformance-label uses white-space: nowrap below so the label never wraps onto two lines. */ /* Mobile (sub-tablet) - WCAG block sits flush left, theme toggle flush right. align-items: start keeps the theme link top-aligned with the WCAG label rather than the centre of the (taller, on narrow phones) stacked block. */ .conformance-label { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); /* Tight line-height so the label's line box is the same height as the text itself - lets align-items: center match the visible mid-line of the text with the centre of the AA/AAA pill group rather than the centre of a taller default line box. */ line-height: 1; /* Keep "WCAG 2.2" + tick on a single line at every viewport so the label never wraps under the pill group on narrow phones. */ white-space: nowrap; /* Allow the inline tick SVG to sit on the label's text baseline. */ display: inline-flex; align-items: center; gap: 6px; } /* Conformance tick — small inline SVG checkmark next to the "WCAG 2.2" label, signalling site-wide conformance. Decorative (aria-hidden); the visible WCAG / AA-AAA controls carry the actual meaning. The colour swaps per mode via --check so it clears WCAG 1.4.11 non-text contrast (≥3:1) on every palette × mode top-bar surface. */ .conformance-tick { width: 12px; height: 12px; flex-shrink: 0; color: var(--check); /* Nudge up 1px so the tick's visual centre aligns with the cap-height of the uppercase WCAG label text (flexbox centres against the line box, which sits slightly below the cap-line). */ transform: translateY(-1px); } .conformance-options { display: inline-flex; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; } .conformance-option { padding: 5px 12px; border: none; border-right: 1px solid var(--rule); background: transparent; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); /* Explicit line-height so the pill button height is deterministic across browsers (defaults for