/* * Spitfire Association — theme overrides * ---------------------------------------------------------------------------- * Link this file AFTER the Tidy style.css in so these rules win * the cascade. Purpose: * 1. Self-host Inter (no Google Fonts — privacy, D25). * 2. Remap Tidy's blue brand tokens to Spitfire's navy + RAAF-red palette (D9). * 3. Collapse Tidy's Playfair Display display-serif to Inter (D10 — one font * throughout). * * The [theme] palette itself is injected into :root as --spitfire-* custom * properties by base.phtml at runtime, sourced from config.ini. Those drive * the Tidy Tailwind variables below. * ============================================================================ */ /* --- Inter variable (regular + italic) ----------------------------------- */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/InterVariable.woff2') format('woff2-variations'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('/fonts/InterVariable-Italic.woff2') format('woff2-variations'); } /* --- Palette override ---------------------------------------------------- * * Tidy anchors its brand to --color-blue-500 / -600. We redirect those to * our accent (RAAF-roundel red) so every button/link/gradient that Tidy * paints blue-by-default paints Spitfire-accent-red instead. The runtime * --spitfire-* variables come from config.ini [theme]. * ------------------------------------------------------------------------- */ :root, :host { --color-blue-50: #fbeaec; --color-blue-100: #f6d1d5; --color-blue-200: #efa6ad; --color-blue-300: #e37984; --color-blue-500: var(--spitfire-accent, #c8102e); --color-blue-600: var(--spitfire-accent, #c8102e); --color-blue-700: #9a0c23; --color-slate-900: var(--spitfire-primary, #0d132c); /* Collapse Playfair → Inter (D10 — single typeface). */ --font-playfair-display: Inter, sans-serif; } /* Ensure the inherits Inter even if a partial forgets the class. */ html, body { font-family: 'Inter', var(--font-sans); } /* --- Header chrome polish (D6 — dark header/footer) ---------------------- * * Tidy's header is light by default. For Spitfire we want dark navy chrome * on solid colour sections (the Tidy `dark` class on

handles most * of it — we lock in the background). * ------------------------------------------------------------------------- */ header.site-chrome { background-color: var(--spitfire-chrome-bg, #0d132c); color: var(--spitfire-chrome-text, #ffffff); } footer.site-chrome { background-color: var(--spitfire-chrome-bg, #0d132c); color: var(--spitfire-chrome-text, #ffffff); } footer.site-chrome a { color: var(--spitfire-chrome-text, #ffffff); } footer.site-chrome a:hover { color: var(--spitfire-accent, #c8102e); } /* --- Cookie banner ------------------------------------------------------- */ .sa-consent { position: fixed; inset-inline: 0; bottom: 0; z-index: 60; background: var(--spitfire-chrome-bg, #0d132c); color: var(--spitfire-chrome-text, #ffffff); border-top: 3px solid var(--spitfire-accent, #c8102e); padding: 1rem 1.25rem; box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.25); } .sa-consent[hidden] { display: none; } .sa-consent__inner { max-width: 72rem; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; justify-content: space-between; } .sa-consent__body { flex: 1 1 24rem; font-size: 0.9375rem; line-height: 1.5; } .sa-consent__body a { text-decoration: underline; } .sa-consent__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .sa-consent__btn { border-radius: 0.5rem; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background-color 120ms ease, color 120ms ease; /* Equal prominence: same size, same font-weight. Colour separates intent. */ } .sa-consent__btn--accept { background: var(--spitfire-accent, #c8102e); color: #ffffff; } .sa-consent__btn--accept:hover { background: #a00c24; } .sa-consent__btn--reject { background: transparent; color: #ffffff; border-color: #ffffff; } .sa-consent__btn--reject:hover { background: #ffffff; color: var(--spitfire-chrome-bg, #0d132c); } /* Accessible focus outline (WCAG 2.1 AA — D21) */ .sa-consent__btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; } /* --- Responsive grid utilities (literal, compile-safe) ------------------- * * Tidy's compiled Tailwind doesn't ship `md:grid-cols-{1..4}`, and dynamic * class-name construction in .phtml would be purged by a future JIT build. * These literal utilities stack at mobile and split on ≥768px. * Paired with a PHP lookup map in home.phtml so the class name is a fixed * token in source, not interpolated. * ------------------------------------------------------------------------- */ .spitfire-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; } @media (min-width: 768px) { .spitfire-grid--1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .spitfire-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .spitfire-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .spitfire-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* --- Skip-to-content link (WCAG 2.4.1) ----------------------------------- * * Off-screen until focused via Tab (first focusable element after ). * Reveals at top-left with accent background so it's visible against any page. * ------------------------------------------------------------------------- */ .sa-skip-link { position: absolute; left: 0; top: 0; padding: 0.625rem 1rem; background: var(--spitfire-accent, #c8102e); color: #ffffff; font-weight: 600; text-decoration: none; z-index: 100; transform: translateY(-120%); transition: transform 120ms ease; } .sa-skip-link:focus, .sa-skip-link:focus-visible { transform: translateY(0); outline: 2px solid #ffffff; outline-offset: 2px; } /* --- Global focus-visible outline (WCAG 2.4.7) --------------------------- * * Ensures every interactive element has a visible focus indicator — Tidy's * default Tailwind only applies on explicit `focus:` variants, which aren't * set consistently across partials. * ------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--spitfire-accent, #c8102e); outline-offset: 2px; border-radius: 2px; } /* Make the

focus target visually silent when focused programmatically * by the skip-link, since users expect the browser to scroll but not draw a * ring around the whole content area. */ main:focus { outline: none; } /* --- Smooth anchor scrolling --------------------------------------------- * * Hero CTA anchors to #sa-how (next block); smooth scroll makes it read as * "continue reading" rather than a hard page jump. Reduced-motion override * below sets scroll-behavior: auto for users who've opted out. * ------------------------------------------------------------------------- */ html { scroll-behavior: smooth; } /* --- Reduced-motion preference (WCAG 2.3.3 / standard AA practice) ------- * * Neutralises AOS + any CSS transitions for users who've opted out of motion. * ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } [data-aos] { transform: none !important; opacity: 1 !important; } } /* --- Commemorative camo backdrop (lightened pairs) ----------------------- * * Painted by templates/layouts/commemorative.phtml. Opted in by adding the * `page-commemorative` class to . The .sa-history-bg layer is a child * of a positioned wrapper that contains both the hero and the page body, so * the camo wash spans the full block. * * Colours are driven by --sa-commem-bg-base and --sa-commem-bg-shape, which * the layout sets as inline CSS vars on the wrapper after randomly choosing * between the Grey-Nurse-soft and Camo-soft pairs. Both pairs are lifted * far enough toward white that dark text reads at >=4.5:1 directly on the * camo (no white panel required). * * Technique: solid base colour on the layer, seven solid pale ellipses on * top, the entire layer blurred 120px so all edges dissolve into two soft * colour fields. Layer is inset -200px past the wrapper bounds so the blur * halo never clips at the visible edge. * ------------------------------------------------------------------------- */ .page-commemorative .sa-history-bg { position: absolute; inset: -200px; pointer-events: none; z-index: 0; background: var(--sa-commem-bg-base, var(--spitfire-commem-ocean-grey, #d2d6d8)); filter: blur(120px); } .page-commemorative .sa-history-bg__shape { position: absolute; border-radius: 50%; background: var(--sa-commem-bg-shape, var(--spitfire-commem-dark-green, #9faea1)); animation: sa-history-swing 14s ease-in-out infinite; } .page-commemorative .sa-history-bg__shape--1 { top: 4%; left: 8%; width: 38%; height: 22%; animation-duration: 14s; } .page-commemorative .sa-history-bg__shape--2 { top: 12%; right: 4%; width: 32%; height: 18%; animation-duration: 11s; animation-delay: -2s; } .page-commemorative .sa-history-bg__shape--3 { top: 32%; left: 28%; width: 36%; height: 20%; animation-duration: 16s; animation-delay: -4s; } .page-commemorative .sa-history-bg__shape--4 { top: 50%; right: 12%; width: 30%; height: 18%; animation-duration: 12s; animation-delay: -3s; } .page-commemorative .sa-history-bg__shape--5 { top: 66%; left: 2%; width: 34%; height: 20%; animation-duration: 13s; animation-delay: -5s; } .page-commemorative .sa-history-bg__shape--6 { top: 80%; right: 24%; width: 32%; height: 22%; animation-duration: 10s; animation-delay: -1s; } .page-commemorative .sa-history-bg__shape--7 { bottom: 2%; left: 40%; width: 30%; height: 20%; animation-duration: 9s; animation-delay: -2s; } @keyframes sa-history-swing { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-60px); } } /* --- Committee bio read-more clamp -------------------------------------- * * Used on /committee.php. The partial sets an inline max-height on * [data-bio-body] and committee.js adds .is-collapsed to the wrapper only * when the bio actually overflows. The mask softens the bottom edge so a * clamp doesn't slice through the middle of a row of text. The Read more * toggle sits below the bio in normal flow (right-aligned on md+, centred * on mobile) — earlier iteration had it absolutely positioned at the * inline end of the last visible line, which was rejected on review. * ------------------------------------------------------------------------- */ [data-bio-wrapper].is-collapsed [data-bio-body] { -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%); mask-image: linear-gradient(to bottom, black 55%, transparent 100%); }