/* Shared styles for the static content pages under public/. Deliberately separate from src/styles.css. These pages ship no app bundle, so they only need type, spacing and a couple of components. */ :root { --navy: #000537; --brand: #e75333; /* Brand orange is only 3.69:1 against white, so anything carrying white text uses the darker tone. Same split as --color-primary in src/styles.css. */ --brand-solid: #cf3918; --text: #1b1f33; --muted: #5a6070; --line: #dfe2ea; --panel: #f5f6f9; --page: #fff; /* Navy is the mark rather than a text colour, so a heading takes its own token: it has to go light when the page does. The skip link keeps navy, because it sits on a white pill that does not flip. */ --heading: var(--navy); --link: #b8391c; --field-bg: #ffffff; --field-edge: #b9bfcd; /* The scheme, and the switch in the app that can force it. Same mechanism as `src/base.css`: the app writes `data-theme` onto `` and every page in the product reads it, so a coach who picked one does not tap a footer link and land in the other. */ color-scheme: light dark; } @supports (color: light-dark(#000, #fff)) { :root { --text: light-dark(#1b1f33, #e8eaf2); --muted: light-dark(#5a6070, #a3aabd); --line: light-dark(#dfe2ea, #2b3050); --panel: light-dark(#f5f6f9, #131834); --page: light-dark(#ffffff, #0a0e24); --heading: light-dark(#000537, #ffffff); --link: light-dark(#b8391c, #ff8a6a); --field-bg: light-dark(#ffffff, #0a0e24); --field-edge: light-dark(#b9bfcd, #3a4064); } } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--page); color: var(--text); font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 1.0625rem; line-height: 1.65; } .wrap { max-width: 44rem; margin: 0 auto; padding: 0 1.25rem; } /* Header */ .site-header { background: var(--navy); padding: 1rem 0; } /* Wraps because neither child can shrink: the wordmark is nowrap and so is the call to action. Held on one row they came to 343px, so a 320px phone scrolled sideways on every static page. */ .site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } .brand { display: flex; align-items: center; gap: 0.6rem; color: #fff; text-decoration: none; font-family: 'Outfit', system-ui, sans-serif; font-weight: 700; font-size: 1.35rem; letter-spacing: -0.01em; } .brand svg { width: 30px; height: 27px; flex: none; } /* One flex item, so the space between the two words is a space rather than the 0.6rem gap. A bare text node beside a span makes two items. Flex trims the whitespace between them, so nothing but the gap is left to hold them apart. */ .brand-text { white-space: nowrap; } .brand-text span { color: var(--brand); } .header-cta { color: #fff; text-decoration: none; font-weight: 700; font-size: 0.95rem; border: 2px solid var(--brand); border-radius: 999px; padding: 0.4rem 1rem; white-space: nowrap; } .header-cta:hover, .header-cta:focus-visible { background: var(--brand-solid); } /* Type */ main { padding: 2.5rem 0 4rem; } h1 { font-family: 'Outfit', system-ui, sans-serif; font-size: clamp(1.85rem, 6vw, 2.6rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--heading); margin: 0 0 0.75rem; } h2 { font-family: 'Outfit', system-ui, sans-serif; font-size: clamp(1.3rem, 4vw, 1.6rem); line-height: 1.25; color: var(--heading); margin: 2.5rem 0 0.75rem; } h3 { font-size: 1.1rem; color: var(--heading); margin: 1.75rem 0 0.5rem; } .standfirst { font-size: 1.2rem; color: var(--muted); margin: 0 0 2rem; } p, li { margin: 0 0 1rem; } ul, ol { padding-left: 1.25rem; } a { color: var(--link); } a:hover, a:focus-visible { text-decoration: none; } /* Components */ .cta { display: inline-block; background: var(--brand-solid); color: #fff; text-decoration: none; font-weight: 700; font-size: 1.05rem; border-radius: 10px; padding: 0.8rem 1.6rem; margin: 0.5rem 0; } .cta:hover, .cta:focus-visible { background: #b8300f; } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1.25rem 1.25rem 0.5rem; margin: 1.5rem 0; } .note { border-left: 4px solid var(--brand); background: var(--panel); border-radius: 0 8px 8px 0; padding: 1rem 1.25rem 0.25rem; margin: 1.5rem 0; font-size: 0.98rem; } table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.98rem; } th, td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line); } th { color: var(--heading); font-weight: 700; } .scroll-x { overflow-x: auto; } /* Calculator */ .calc { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1.5rem; margin: 1.5rem 0 2rem; } .calc-fields { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } .calc label { display: block; font-weight: 700; font-size: 0.95rem; color: var(--heading); margin-bottom: 0.3rem; } .calc input { width: 100%; font: inherit; padding: 0.6rem 0.7rem; border: 1px solid var(--field-edge); border-radius: 8px; background: var(--field-bg); color: inherit; } .calc input:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; } .calc-out { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 1.25rem; } .calc-headline { font-family: 'Outfit', system-ui, sans-serif; font-size: clamp(1.6rem, 5vw, 2.1rem); line-height: 1.2; color: var(--heading); margin: 0 0 0.5rem; } .calc-headline strong { color: var(--brand); } .calc-detail { margin: 0; color: var(--muted); font-size: 0.98rem; } .calc-error { color: var(--link); font-weight: 700; margin: 0; } /* Footer */ .site-footer { border-top: 1px solid var(--line); padding: 2rem 0 3rem; font-size: 0.95rem; color: var(--muted); } .site-footer ul { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; } .site-footer li { margin: 0; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 0.5rem; top: 0.5rem; z-index: 10; background: #fff; color: var(--navy); padding: 0.6rem 1rem; border-radius: 8px; font-weight: 700; } /* Homepage. Wider than an article page because it is laid out in two columns above 48rem rather than being read as one line of prose. */ .wrap-wide { max-width: 64rem; } .home-hero { display: grid; gap: 2rem; align-items: center; margin-bottom: 3.5rem; } .home-hero h1 { font-size: clamp(2.1rem, 7vw, 3.1rem); text-wrap: balance; /* "kick-off" is a legal break point, so without this the headline can split a hyphenated word across two lines at exactly the width the hero uses. */ overflow-wrap: normal; hyphens: none; } .home-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 0.75rem; } .cta-quiet { background: transparent; color: var(--text); /* --line is a hairline and all but vanishes on the dark background, which left the secondary button with no visible edge. --muted is a text colour, so it is legible against the page in both schemes. */ border: 2px solid var(--muted); padding: calc(0.8rem - 2px) calc(1.6rem - 2px); } .cta-quiet:hover, .cta-quiet:focus-visible { background: var(--panel); border-color: var(--brand); color: var(--text); } .home-microcopy { font-size: 0.95rem; color: var(--muted); } /* Where the rugby in here came from, next to the call to action rather than four screens down. It is the first thing somebody who knows Reg 15 looks for, and the date is what says it has been read this season. */ .home-provenance { margin-top: 0.35rem; font-size: 0.9rem; } /* The hero card. A stand-in for a screenshot, so it carries no meaning of its own and is hidden from assistive tech at the markup. */ .mock { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.25rem 1.25rem; font-size: 0.95rem; } .mock-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; font-family: 'Outfit', system-ui, sans-serif; font-weight: 700; color: var(--text); padding-bottom: 0.75rem; border-bottom: 1px solid var(--line); } .mock-tag { font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #fff; background: var(--brand-solid); border-radius: 999px; padding: 0.15rem 0.6rem; } .mock-label { margin: 1rem 0 0.5rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .mock-row { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0; } .mock-row li { margin: 0; background: var(--page); border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.7rem; color: var(--text); font-weight: 700; } .mock-row-out li { color: var(--muted); font-weight: 400; background: transparent; } .mock-foot { margin: 1rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--muted); } .home-grid { display: grid; gap: 1.25rem; } /* The session running order in the hero. Markup, so it costs nothing. */ .mock-plan { list-style: none; padding: 0; margin: 0.75rem 0 0; } .mock-plan li { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: 0.55rem 0; border-bottom: 1px solid var(--line); } .mock-plan li span:first-child { font-weight: 700; color: var(--text); } .mock-plan li span:last-child { color: var(--muted); white-space: nowrap; } /* Cards sit side by side above 48rem, so the two calls to action line up rather than landing wherever the copy above them happens to end. */ .home-grid > .panel { display: flex; flex-direction: column; } .home-grid ul { margin-bottom: auto; } .panel-flush > :first-child { margin-top: 0; } .panel-flush ul { margin-bottom: 1.25rem; } /* A band rather than more prose, so the middle of the page has somewhere for the eye to stop. Sits where somebody is weighing it up, with a call to action in it, which is where proof does the most work. */ .proof { margin: 3rem 0; padding: 1.75rem; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; } .proof h2 { margin-top: 0; } .proof-facts { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 0.75rem; } .proof-facts li { margin: 0; padding-left: 1.5rem; position: relative; } .proof-facts li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--brand); } /* --navy is a fixed brand colour for chrome. It does not flip with the scheme, so using it for text on --panel gives navy on dark navy, measured at 1.12:1. Text on a themed surface uses --text, which does flip. */ .proof-facts strong { color: var(--text); } .proof-note { font-size: 0.9rem; color: var(--muted); } @media (min-width: 48rem) { .proof-facts { grid-template-columns: 1fr 1fr; gap: 0.75rem 2rem; } } .home-close { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line); text-align: center; } .home-close .standfirst { margin-bottom: 1.5rem; } @media (min-width: 48rem) { .home-hero { grid-template-columns: 1.2fr 1fr; gap: 2.5rem; margin-bottom: 2rem; } .home-grid { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.75rem; } }