/* * A written case study. * * Loaded ALONGSIDE case-study.css, not instead of it: inc/case-study.php gives * every child of page 97 the `sr-case-study` body class and the house backdrop, * and this page is one of those children. What case-study.css does is re-skin * Elementor markup, and none of its selectors match here, so the two coexist * without fighting. * * The measure is the point of this file. A case study is a READ — the existing * eight run to about 6,400px — so the type is set for reading rather than for * scanning: one column, a real measure, and generous space between sections. */ /* * EVERY SELECTOR IN THIS FILE CARRIES .sr-case-study, and it is not tidiness. * * `.srcs-root h1` is (0,1,1). Elementor Global Kit sets `.elementor-kit-5 h1` * with its own colour, which is ALSO (0,1,1) — an exact tie, decided by source * order, and the kit is enqueued after this file. The result was an h1 and an h2 * rendering in #0A0D31 on a #050A20 ground: a contrast ratio of 1.04, which is * invisible text, caught by qa/verify.mjs on the first run of this page. * * The body class takes every rule to (0,2,1) and clear of it. This is the third * time this exact arithmetic has bitten this project — the page-nav chevrons and * the Contact form inputs were the first two — which is why it is written out * again here rather than assumed to be common knowledge. */ /* On :root, never the body class, so the journey engine's inline value on still wins if a journey is ever added here. Enqueued only for this template. */ :root { --srk-accent-live: #2CE5A7; } .sr-case-study .srcs-root { padding-bottom: clamp(60px, 10vh, 140px); } .sr-case-study .srcs-inner { max-width: 780px; margin-inline: auto; padding-inline: clamp(24px, 4vw, 64px); } /* --------------------------------------------------------------------------- Hero ------------------------------------------------------------------------ */ /* * The hero clears the sticky header on its own, because this page is NOT in * cinema mode. The eight Elementor case studies are not either, and a ninth * that scrolled its header away while the others kept theirs would be the odd * one out in a set a reader browses through. */ .sr-case-study .srcs-hero { padding-top: clamp(48px, 9vh, 110px); padding-bottom: clamp(30px, 5vh, 56px); } .sr-case-study .srcs-root h1 { font-size: var(--srk-display-m); color: var(--srh-pale); line-height: 1.05; letter-spacing: -0.02em; margin: 0.3em 0 0; text-wrap: balance; } .sr-case-study .srcs-standfirst { margin: 1.1em 0 0; font-size: var(--srk-body-l); line-height: 1.55; color: var(--srh-ink); } .sr-case-study .srcs-meta { margin: 1.6em 0 0; padding-top: 1em; border-top: 1px solid var(--srh-hairline); color: var(--srh-ink-fade); font-size: var(--srk-body); } /* --------------------------------------------------------------------------- At a glance ------------------------------------------------------------------------ */ .sr-case-study .srcs-glance { padding-block: clamp(24px, 4vh, 44px); } .sr-case-study .srcs-root h2 { font-size: clamp(26px, 3vw, 40px); color: var(--srh-pale); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 0.7em; text-wrap: balance; } .sr-case-study .srcs-glance-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(16px, 2.2vw, 24px); } @media (min-width: 700px) { .srcs-glance-grid { grid-template-columns: repeat(2, 1fr); } } .sr-case-study .srcs-glance-item { margin: 0; padding: clamp(18px, 2.4vw, 26px); border: 1px solid var(--srh-hairline); border-radius: var(--srh-radius, 16px); background: var(--srh-surface); } .sr-case-study .srcs-glance-icon { width: 26px; height: 26px; display: block; margin-bottom: 12px; color: var(--srk-accent-live, var(--srh-accent)); } .sr-case-study .srcs-glance-label { display: block; color: var(--srk-accent-live, var(--srh-accent)); font-size: var(--srk-eyebrow); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.6em; } .sr-case-study .srcs-glance-value { display: block; color: var(--srh-pale); line-height: 1.45; } /* --------------------------------------------------------------------------- The body ------------------------------------------------------------------------ */ .sr-case-study .srcs-section { padding-block: clamp(26px, 4.5vh, 52px); } .sr-case-study .srcs-section p { margin: 0 0 1.1em; color: var(--srh-ink); font-size: clamp(16px, 1.15vw, 18px); line-height: 1.7; max-width: 68ch; } .sr-case-study .srcs-section p:last-child { margin-bottom: 0; } .sr-case-study .srcs-section em { color: var(--srh-pale); font-style: italic; } /* * The three partners. * * A definition list rather than three cards, because the source makes a point * of them being a division of labour rather than a set of logos, and a list of * term-and-explanation pairs is what that is. */ .sr-case-study .srcs-partners { margin: clamp(20px, 3vh, 32px) 0 0; display: grid; gap: clamp(18px, 2.6vh, 28px); } .sr-case-study .srcs-partner { padding-top: clamp(14px, 2vh, 20px); border-top: 1px solid var(--srh-hairline); } .sr-case-study .srcs-partner dt { color: var(--srh-pale); font-size: clamp(18px, 1.5vw, 22px); font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.4em; } .sr-case-study .srcs-partner dd { margin: 0; color: var(--srh-ink-soft); line-height: 1.65; max-width: 66ch; } /* --------------------------------------------------------------------------- Attribution ------------------------------------------------------------------------ */ /* * Set as content, not as small print. * * This page describes a live deployment involving three named organisations, * and the only reason it can be published is that ShareRing has already * published it. Hiding that at 12px would be the page quietly disowning the * thing that makes it legitimate. */ .sr-case-study .srcs-source { margin-top: clamp(30px, 5vh, 60px); padding-block: clamp(30px, 5vh, 56px); border-top: 1px solid var(--srh-hairline); } .sr-case-study .srcs-source p { margin: 0 0 1.2em; color: var(--srh-ink); line-height: 1.65; max-width: 66ch; } .sr-case-study .srcs-note { margin-top: 1.6em; color: var(--srh-ink-fade); font-size: var(--srk-body); }