/* ============================================================================= THE AULDMERE CHRONICLES — ink, parchment and heraldry ============================================================================= WARM WHERE AUXENTIA IS COLD. The sibling brand is near-black and electric blue; this is warm near-black on vellum with verdigris and burnished gold. Same bones, different century — so the two read as related without either looking like a recolour of the other. WHY THESE COLOURS. The world is roads, oaths and three crowns after a capital burned: ink on parchment is what a chronicle is written in, gold is what a seal is pressed in, verdigris is what bronze becomes when a treaty is old enough to still be working, and oxblood is the scourge. EVERY PAIRING BELOW WAS COMPUTED, NOT EYEBALLED. Ratios in the comments are real WCAG 2.1 figures against the surface each colour is used on. The accessibility statement claims AA, so the palette has to earn it. body on paper 14.27 heading on paper 16.04 muted on paper 6.39 link on paper 6.63 link on card 7.41 oxblood on paper 7.27 dark body on ink 14.68 dark link on ink 9.63 TWO BORDER TOKENS, AND THE DISTINCTION MATTERS. WCAG 1.4.11 wants 3:1 for a UI component's boundary — an input you have to be able to find — but not for a decorative rule between cards. Softening one to match the other would make the page noisy; hardening the other would make forms fail. So: --ncg-color-border decorative. Card edges, dividers. Soft on purpose. --tac-border-control inputs, selects, buttons. 3.43 on paper, 3.84 on card, both measured. GOLD IS NEVER TEXT ON LIGHT. It clears 4.5 by a hair (4.97) and that is too thin a margin for a brand colour somebody will inevitably lighten. It is a rule, a seal, a drop cap, a focus glow — and the link colour in DARK mode, where it measures 9.63 and is comfortable. ============================================================================= */ :root { /* ── the brand, raw ─────────────────────────────────────────────── */ --tac-ink: #17140F; /* warm near-black: chrome, dark ground */ --tac-ink-raised: #241E17; /* a surface lifted off the ink */ --tac-parchment: #F5EFE3; --tac-vellum: #FFFCF6; /* cards, slightly brighter than the page */ --tac-gold: #8A5E0F; /* seal, rule, drop cap — never body text */ --tac-gold-lit: #E0B65C; /* the same gold under lamplight, for dark */ --tac-verdigris: #125E58; /* aged bronze: links */ --tac-oxblood: #8E2B26; /* the scourge: emphasis, danger */ --tac-border-control: #8C7F67; --tac-footer-bg: var(--tac-ink); --tac-card-tag: var(--ncg-color-muted); /* 6.39 -- see the gold rule above */ /* ── the design-system tokens the templates and plugins read ────── */ --ncg-color-bg-paper: var(--tac-parchment); --ncg-color-bg-surface: var(--tac-vellum); --ncg-color-body: #241F19; --ncg-color-heading: var(--tac-ink); --ncg-color-muted: #5E5548; --ncg-color-border: #E2D9C8; --ncg-color-accent: var(--tac-gold); --ncg-color-primary: var(--tac-verdigris); --ncg-color-secondary: var(--tac-oxblood); --ncg-link: var(--tac-verdigris); /* The hero gradient every template draws. Warm, and dark enough that white text clears 15:1 at the light end — measured, because a hero whose text fails at one end of a gradient fails invisibly. */ --aux-hero-1: #17140F; --aux-hero-2: #241E17; --aux-hero-3: #3A2C1B; --aux-chrome: var(--tac-ink); --aux-on-chrome: #F3EADA; } /* ── DARK ────────────────────────────────────────────────────────────── Not an inversion. Parchment inverted is grey; this keeps the warmth and moves the paper under the ink rather than swapping the two. */ html[data-ncg-theme="dark"] { --tac-footer-bg: #100E0A; --tac-card-tag: var(--tac-gold-lit); --ncg-color-bg-paper: var(--tac-ink); --ncg-color-bg-surface: var(--tac-ink-raised); --ncg-color-body: #EDE5D6; --ncg-color-heading: #F7F1E4; --ncg-color-muted: #B3A692; --ncg-color-border: #3A332A; --tac-border-control: #7C7261; --ncg-color-accent: var(--tac-gold-lit); --ncg-link: var(--tac-gold-lit); --ncg-color-secondary: #E8837C; } /* ── HIGH CONTRAST ───────────────────────────────────────────────────── Black on white, and the brand gets out of the way. A high-contrast mode that keeps a warm cast is a high-contrast mode that failed at its one job. */ html[data-ncg-theme="high-contrast"] { --ncg-color-bg-paper: #FFFFFF; --ncg-color-bg-surface: #FFFFFF; --ncg-color-body: #000000; --ncg-color-heading: #000000; --ncg-color-muted: #1A1A1A; --ncg-color-border: #000000; --tac-border-control: #000000; --ncg-link: #00408A; --ncg-color-accent: #6A4300; --aux-hero-1: #000000; --aux-hero-2: #000000; --aux-hero-3: #000000; } /* ── controls ────────────────────────────────────────────────────────── The one place the stronger border is required rather than preferred. */ input, select, textarea, button, .ncg-support-form input, .ncg-support-form select, .ncg-support-form textarea, .tac-cmds__field input, .tac-cmds__field select, .tac-hall__searchrow input { border-color: var(--tac-border-control); } /* Focus is gold and thick, because it has to be findable against parchment, ink and pure white without being restyled three times. */ :focus-visible { outline: 3px solid var(--tac-gold); outline-offset: 2px; } html[data-ncg-theme="dark"] :focus-visible { outline-color: var(--tac-gold-lit); } html[data-ncg-theme="high-contrast"] :focus-visible { outline-color: #000; } /* ── the chronicle voice ─────────────────────────────────────────────── A hairline gold rule under section headings: the only decorative use of the brand colour, and the thing that makes a page feel like a page of a book rather than a div with a border. */ .tac-features__intro h2::after, .tac-about__canon h2::after, .tac-hall__wings h2::after, .tac-chron__annals h2::after { content: ""; display: block; width: 52px; height: 2px; margin-top: 10px; background: var(--tac-gold); } /* Serif headings inherited from the parent, but the Hall and the canon want the older face at a larger size — set here rather than in each template so there is one place to change it. */ .tac-hall__hero h1, .tac-about__canon h2, .tac-features__hero h1 { letter-spacing: -0.01em; } /* PRINT: parchment costs ink and says nothing on paper. */ @media print { :root { --ncg-color-bg-paper: #fff; --ncg-color-bg-surface: #fff; --ncg-color-body: #000; --ncg-link: #000; } .tac-hall__hero, .tac-home__hero, .tac-features__hero { background: none !important; } .tac-hall__art, .tac-home__art { display: none !important; } } /* ============================================================================= THE DARK-HERO CONTRACT ============================================================================= FOUND ON THE LIVE SITE, not in review. The parent styles `.ncg-eyebrow` and `h1 span` for a light page — eyebrow takes the heading colour, the span takes an accent — and both are near-black in this palette. Dropped onto a dark hero they vanish: home eyebrow #17140F on the dark gradient invisible home h1 span #241F19 "and answer in words." unreadable features hero had NO background at all, so white h1 + white lede sat on parchment and three of the four lines were gone Inheriting a colour is not enough, because those parent rules set colour explicitly and beat inheritance. So every dark hero states its own text colours, once, here — rather than each template discovering the problem separately and fixing it differently. ONE SELECTOR LIST, ON PURPOSE. A new hero added to a new template will look wrong until it joins this list, and that is the intended failure: obvious, at the top of the page, rather than a contrast bug nobody notices. ============================================================================= */ html .tac-home__hero, html .tac-features__hero, html .tac-hall__hero, html .tac-about .ncg-split-header, html .tac-chron .ncg-split-header{ /* Features relied on .ncg-split-header-v2 carrying a background. It does not in this theme, so the hero states it rather than inheriting it. */ background: linear-gradient(135deg, var(--aux-hero-1) 0%, var(--aux-hero-2) 55%, var(--aux-hero-3) 100%); color: var(--aux-on-chrome); } html .tac-home__hero .ncg-eyebrow, html .tac-features__hero .ncg-eyebrow, html .tac-hall__hero .ncg-eyebrow, html .tac-about .ncg-split-header .ncg-eyebrow, html .tac-chron .ncg-split-header .ncg-eyebrow{ /* Gold rather than plain white: it is the one place the brand colour is legible AND decorative, and it measures 9.63 against the ink. */ color: var(--tac-gold-lit); text-transform: uppercase; letter-spacing: 2px; font-size: .78rem; font-weight: 700; margin: 0 0 6px; } html .tac-home__hero h1, html .tac-features__hero h1, html .tac-hall__hero h1, html .tac-about .ncg-split-header h1, html .tac-chron .ncg-split-header h1{ color: #fff; } /* The second clause of a two-part headline. Lighter in weight, NOT in colour: dimming it is what made it disappear. */ html .tac-home__hero h1 span, html .tac-features__hero h1 span{ color: #fff; opacity: 1; font-weight: 400; display: block; } html .tac-home__lede, html .tac-features__lede, html .tac-hall__lede, html .tac-about__lede, html .tac-chron__lede{ color: #E6DFD2; } .tac-home__hero a:not(.ncg-btn-main), .tac-features__hero a:not(.ncg-btn-main), .tac-hall__hero a { color: var(--tac-gold-lit); } /* An empty image column is still a column: Features reserved half the hero for a background image that was never set, so the copy sat squashed in the left half of an otherwise blank band. */ .ncg-header-image:not([style*="background-image"]) { display: none; } /* ============================================================================= RHYTHM ============================================================================= The pages were each written with their own spacing, which reads as five pages rather than one site. These are the shared values. ============================================================================= */ .tac-features__group, .tac-hall__wings, .tac-hall__maps, .tac-hall__commands, .tac-home__pillars, .tac-home__news { padding-block: clamp(32px, 5vw, 56px); } /* Prose has a measure. Beyond about 70 characters the eye loses the line return, and several of these sections were running the full 1100px. */ .tac-features__intro p, .tac-hall__sectionlede, .tac-home__lore p, .tac-chron__lede { max-width: 62ch; } /* FOUR CARDS SHOULD NOT WRAP 3 + 1. The wings grid used auto-fit with a 230px minimum, which gives three across at common widths and orphans the fourth. Two-by-two is the honest layout for four items until there is room for all four in a row. */ .tac-hall__winglist { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 1000px) { .tac-hall__winglist { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 560px) { .tac-hall__winglist { grid-template-columns: 1fr; } } /* Cards lift a little on hover so they read as targets, and the whole card is the target rather than just the title. */ .tac-wing, .tac-feature, .tac-lore-card { transition: border-color .15s ease, transform .15s ease; } .tac-wing:hover, .tac-lore-card:hover { border-color: var(--tac-gold); } @media (prefers-reduced-motion: reduce) { .tac-wing, .tac-feature, .tac-lore-card { transition: none; } } /* The banner layer About and Support gained. Same treatment the Home and Hall heroes already use: the art sits under the gradient at low opacity so the overlaid text keeps its measured contrast whatever the image turns out to be. A banner that changes how readable a headline is, is a banner that will eventually be swapped for one that breaks it. */ .tac-hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .30; } .tac-about .ncg-split-header, .tac-chron .ncg-split-header, html .ncg-support-hero{ position: relative; overflow: hidden; } .tac-about .ncg-split-header > *:not(.tac-hero-art), .tac-chron .ncg-split-header > *:not(.tac-hero-art), .ncg-support-hero > *:not(.tac-hero-art) { position: relative; } /* Support's hero was never in the dark-hero list, so it kept the parent's light styling while every other page went dark. */ .ncg-support-hero { background: linear-gradient(135deg, var(--aux-hero-1) 0%, var(--aux-hero-2) 55%, var(--aux-hero-3) 100%); color: var(--aux-on-chrome); padding-block: clamp(38px, 6vw, 64px); } .ncg-support-hero h1 { color: #fff; } .ncg-support-hero .section-label { color: var(--tac-gold-lit); text-transform: uppercase; letter-spacing: 2px; font-size: .78rem; font-weight: 700; } .ncg-support-lede { color: #E6DFD2; max-width: 62ch; } .ncg-support-back { color: var(--tac-gold-lit); } /* ============================================================================= BANNERS: BRIGHT WHERE THEY CAN BE, PROTECTED WHERE THE TEXT IS ============================================================================= Auxentia can run its banners at full brightness because it uses a SPLIT header — art beside the words, never under them. These banners are 2.44:1 cinematic pieces that a split would crop to nothing, so the text sits over the image and the image has to earn it. .30 was too timid: the art was barely visible. .80 with a directional scrim is the measured answer — strong at the left and the bottom where headlines sit, fading out across the rest so the picture is actually seen. MEASURED AGAINST THE SHIPPED FORMULA, not an approximation of it. A curved scrim model said this was safe at 6.09; recomputing with the LINEAR gradients CSS actually draws gave 4.82 for the same settings — the curve was flattering by more than a whole grade. Across all twelve banners, at the 95th-percentile brightest point of the text zone, these values give a worst case of 6.00 against white. The weakest is realm-ice, which is the one to re-check whenever a banner is replaced. ============================================================================= */ html .tac-home__art, html .tac-hall__art, html .tac-hero-art{ opacity: .80; } html .tac-home__hero::after, html .tac-hall__hero::after, html .tac-about .ncg-split-header::after, html .tac-chron .ncg-split-header::after, html .ncg-support-hero::after, html .tac-features__hero::after{ content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, rgba(23,20,15,.68) 0%, rgba(23,20,15,0) 72%), linear-gradient(to top, rgba(23,20,15,.45) 0%, rgba(23,20,15,0) 60%); } /* The scrim is a sibling of the copy, so the copy needs to sit above it. */ html .tac-home__herotext, html .tac-hall__herotext, html .tac-about .ncg-header-content, html .tac-chron .ncg-header-content, html .ncg-support-hero .ncg-container, html .tac-features__hero .ncg-header-content{ position: relative; z-index: 2; } html .tac-features__hero{ position: relative; overflow: hidden; } /* ============================================================================= THE LOGO, IN THREE MODES ============================================================================= Three files rather than one filtered file: the mark is a photographic wax seal, and its bevels carry a baked-in light direction that a CSS filter turns to mud. Measured against the ground each sits on — light 10.64, dark 6.10, high contrast 21.00. ============================================================================= */ /* SPECIFICITY, NOT ORDER. `.tac-logo img` is (0,1,1) and `.tac-logo__light` was (0,1,0), so the hide beat the show no matter which came first and every variant rendered display:none -- the header had no logo at all. Both sides of the switch are now written the same way so they compare like for like. */ html .tac-logo { display: inline-block; line-height: 0; } /* 46 -> 64 -> 78. The wordmark sets CHRONICLES on a second line at roughly a third of the lockup height: at 46 it rendered near 9px and lost its strokes, at 64 it cleared 13px and merely resolved. 78 IS ABOUT PRESENCE RATHER THAN LEGIBILITY. Against a 1,684px header the seal at 64 read as an icon sitting beside the navigation rather than as the thing the page belongs to, and the second line was legible without being readable. At 78 it lands near 16px, which is reading size, and the header has the room without the nav moving. */ html .tac-logo img { height: 78px; width: auto; display: none; } html .tac-logo img.tac-logo__light { display: block; } html[data-ncg-theme="dark"] .tac-logo img.tac-logo__light, html[data-ncg-theme="high-contrast"] .tac-logo img.tac-logo__light { display: none; } html[data-ncg-theme="dark"] .tac-logo img.tac-logo__dark { display: block; } html[data-ncg-theme="high-contrast"] .tac-logo img.tac-logo__hc { display: block; } @media (max-width: 640px) { html .tac-logo img { height: 52px; } } /* ============================================================================= HEADER NAV: SPACE BETWEEN THE TARGETS, NOT JUST BETWEEN THE WORDS ============================================================================= Measured on the live header: adjacent links had a visual gap of ZERO. The parent gives each anchor 15px of side padding, which separates the words but leaves the clickable boxes touching — so a click a few pixels wide of "Support" lands on "Lore", and there is no visual cue that the boundary is where it is. That is WCAG 2.5.8 (Target Size, Minimum) rather than a matter of taste: the criterion is about targets being reachable without accident, and adjacent targets with no spacing between them is the case it names. `gap` on the flex container rather than margins on the items: margins would need a :last-child exception and would fight the parent's centring. ============================================================================= */ .site-header .site-navigation ul.menu { gap: clamp(6px, 1.2vw, 18px); align-items: center; } /* The padding stays — it is what makes each link a comfortable target — but it now sits inside a box that has room around it. */ .site-header .site-navigation ul.menu > li > a { padding-inline: clamp(10px, 1vw, 15px); border-radius: 6px; } /* A hover and focus surface, so the boundary of a target is visible before it is clicked rather than discovered by missing it. */ .site-header .site-navigation ul.menu > li > a:hover { background: color-mix(in srgb, var(--tac-gold) 12%, transparent); } html[data-ncg-theme="dark"] .site-header .site-navigation ul.menu > li > a:hover { background: color-mix(in srgb, var(--tac-gold-lit) 16%, transparent); } /* The CTA is a different kind of thing from a nav link and should not read as the sixth item in the row. */ .site-header .ncg-header-cta { margin-inline-start: clamp(8px, 1.5vw, 22px); } @media (max-width: 900px) { .site-header .site-navigation ul.menu { gap: 4px; row-gap: 2px; } } /* ═══════════════════════════════════════════════════════════════════════════ SMOOTH EDGES -- banner bottom, footer top ═══════════════════════════════════════════════════════════════════════════ These are FADES, NOT CURVES. Auxentia was the reference and it turned out to have no radius, clip-path or shape divider anywhere: what reads as a soft edge there is `.ncg-split-header-v2::after`, 72px of transparent-to-page- background, and `.aux-footer::before`, 56px of transparent-to-footer. The dark block dissolves into what follows it instead of stopping at a ruled line. Reproduced here at the same heights with Auldmere's colours. WHY ::before AND NOT ::after. On the Auxentia split header the text sits on a solid panel beside the photo, so ::after was free. Auldmere's heroes set the text OVER the art, so ::after is already the contrast scrim that keeps the headline at 6.00:1. Taking it for the fade would have cost the scrim and put white text on open artwork. The fade goes on ::before and the layers are given explicit z-index so the order cannot drift: art 0, scrim 1, fade 2, text 3. Without those, source order decides, and the text is written first. The fade colour must match whatever the hero sits ON, or the dissolve ends in a visible band of the wrong colour. --tac-page-bg is that surface, and it is themed, so the fade follows light/dark without a second rule. */ html .ncg-support-hero, html .tac-home__hero, html .tac-features__hero, html .tac-hall__hero, html .tac-chron .ncg-split-header, html .tac-about .ncg-split-header { position: relative; isolation: isolate; } html .tac-home__art, html .tac-hall__art, html .tac-hero-art { z-index: 0; } html .ncg-support-hero::after, html .tac-home__hero::after, html .tac-features__hero::after, html .tac-hall__hero::after, html .tac-chron .ncg-split-header::after, html .tac-about .ncg-split-header::after { z-index: 1; } html .ncg-support-hero::before, html .tac-home__hero::before, html .tac-features__hero::before, html .tac-hall__hero::before, html .tac-chron .ncg-split-header::before, html .tac-about .ncg-split-header::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,0), var(--ncg-color-bg-paper, #F5EFE3)); } /* Pseudo-elements are not valid inside :not(), and ONE invalid selector invalidates the ENTIRE comma list. An earlier draft of this rule read `.tac-features__hero > *:not(::before):not(::after)`, which would have silently dropped z-index:3 from every hero's text and put each headline underneath its own scrim. Real elements only. */ html .tac-home__herotext, html .tac-hall__herotext, html .tac-features__hero > div, html .tac-chron .ncg-header-content, html .ncg-header-content { position: relative; z-index: 3; } /* The fade eats into the bottom of the hero, so the hero needs the height back or the last line of the lede sits inside the dissolve and loses contrast. */ html .tac-home__hero { padding-bottom: 132px; } html .tac-features__hero, html .ncg-support-hero, html .tac-hall__hero { padding-bottom: 108px; } /* Footer: the mirror image. The page dissolves INTO the footer rather than meeting it at a line. Shorter than the banner fade (56px) because the run-up is body text, not artwork, and a long fade there just looks like a printing fault. */ html .tac-footer, html .site-footer { position: relative; } html .tac-footer::before, html .site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: -56px; height: 56px; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,0), var(--tac-footer-bg, #17140F)); } /* ═══════════════════════════════════════════════════════════════════════════ CARDS ═══════════════════════════════════════════════════════════════════════════ The shape is ncg-core's bento card (tag / heading / body / link, auto-fit grid, lift on hover) because that pattern is already the house style and a second one would just be a second thing to maintain. What is NOT reused is the shortcode: `ncg_service_grid` queries the `ncg_service` post type, which this site does not have, and prints the literal tag "The Diagnostic". It would render an empty grid here. The lift is a transform, so it is behind prefers-reduced-motion. The border is --tac-border-control (3:1) rather than a hairline, because the card boundary is what separates one offer from the next and WCAG 1.4.11 governs it the same as any other UI boundary. */ html .tac-cards { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } html .tac-card { position: relative; display: flex; flex-direction: column; padding: 26px 26px 24px; border-radius: 12px; background: var(--ncg-color-bg-surface, #FFFCF6); border: 1px solid var(--tac-border-control, #8C7F67); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } html .tac-card__tag { font-size: .69rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; margin: 0 0 8px; color: var(--tac-card-tag, #5E5548); } html .tac-card h3 { font-family: 'Playfair Display', serif; font-size: 1.22rem; margin: 0 0 10px; color: var(--ncg-color-heading, #17140F); } html .tac-card p { margin: 0 0 14px; font-size: .95rem; line-height: 1.55; color: var(--ncg-color-body, #241F19); } html .tac-card p:last-child { margin-bottom: 0; } html .tac-card__link { margin-top: auto; font-weight: 700; text-decoration: none; color: var(--tac-verdigris, #125E58); } html .tac-card__link:hover, html .tac-card__link:focus-visible { text-decoration: underline; } /* The whole card is the target (2.5.8) without nesting a second link inside an anchor, which is invalid and which screen readers announce twice. */ html .tac-card__link::after { content: ""; position: absolute; inset: 0; } html .tac-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(23,20,15,.10); border-color: var(--tac-verdigris, #125E58); } html .tac-card:focus-within { border-color: var(--tac-verdigris, #125E58); box-shadow: 0 0 0 3px rgba(18,94,88,.28); } @media (prefers-reduced-motion: reduce) { html .tac-card { transition: none; } html .tac-card:hover { transform: none; } } /* ═══════════════════════════════════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════════════════════════════════ Centred single column. The parent theme lays its footer out as a space-between row, which on a 1140px page leaves a wide empty middle between three short legal links; stacked and centred it reads as a colophon. The ground is ink in BOTH themes on purpose. A footer that flips to parchment in light mode competes with the page above it for the eye, and the whole point of the fade is that the page ends by getting darker. Text and links are therefore always the dark-mode pairings, which are the measured ones: body 14.68 on ink, gold-lit links 9.63 on ink. */ html .site-footer.tac-footer { background: var(--tac-footer-bg, #17140F); color: #EDE5D6; padding: 54px 20px 40px; margin-top: 0; text-align: center; max-width: none; /* the parent caps the footer at the content width */ } html .tac-footer__inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 18px; } html .tac-footer__mark { display: block; width: 56px; height: auto; opacity: .92; } html .tac-footer__nav ul.menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin: 0; padding: 0; list-style: none; } html .tac-footer__nav ul.menu li { display: inline-flex; } html .tac-footer .tac-footer__nav a, html .tac-footer .footer-legal-links a { color: var(--tac-gold-lit, #E0B65C); text-decoration: none; /* 2.5.8: these are the last links on the page and often the ones a person is actually hunting for, so they get a real target rather than the parent's 5px padding. */ display: inline-block; padding: 10px 12px; min-height: 44px; line-height: 24px; border-radius: 6px; } html .tac-footer a:hover, html .tac-footer a:focus-visible { text-decoration: underline; } html .tac-footer :focus-visible { outline: 3px solid var(--tac-gold-lit, #E0B65C); outline-offset: 2px; } html .tac-footer__legal { margin: 0; } html .tac-footer .footer-legal-links { margin: 0 0 10px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 2px; } html .tac-footer .footer-legal-links span[aria-hidden] { color: #7A6E5C; } html .tac-footer .footer-copyright { margin: 0; font-size: .84rem; color: #B3A692; max-width: 46em; } @media (max-width: 600px) { html .site-footer.tac-footer { padding: 40px 16px 32px; } html .tac-footer .footer-legal-links { gap: 0; } html .tac-footer .footer-legal-links span[aria-hidden] { display: none; } } /* ═══════════════════════════════════════════════════════════════════════════ THE SHARED HERO ═══════════════════════════════════════════════════════════════════════════ .tac-hall__hero and friends are used by five templates now: the Hall, the crafting catalogue, the command reference, the standings and the lore updates. Their geometry lived in hall.php's inline