/* ========================================================================== Altius IT — site stylesheet Direction A: refined classic. Responsive: one set of pages, no mobile site. Palette after GMK Red Samurai (RedSuns), from Ii Naomasa's armour: Pantone 7421 C burgundy -> pushed toward red for the accent Pantone 426 C near-black -> header strip, footer, body text, and the whole neutral scale Pantone 465 C tan/gold -> secondary accent Every grey is a tint of 426 C: hue 204deg, saturation 6%, lightness varied. All foreground/background pairs clear WCAG AA (>= 4.5). ========================================================================== */ :root { /* Neutrals: tints of Pantone 426 C (#25282A) -- hue 204, saturation 6.3%, varying only in lightness, so every grey belongs to the same family as the header and footer. Caveat at the light end: a 6.3% tint is not representable above ~96% lightness in 8-bit colour. The channel spread works out below one RGB step, so --gray-990 and --gray-950 round to near-neutral no matter what hue they are nominally derived from. They are not "wrong" -- the tint is simply finer than the format can carry. */ --gray-990: #FBFBFB; /* page background */ --gray-950: #F4F5F6; /* section bands */ --gray-700: #DDDFE1; /* hairlines (was #DDE0E1, hue 195 -- off-family)*/ --ink: #25282A; /* Pantone 426 C */ --muted: #484D51; /* hero subtitles. Same hue/saturation as --ink (204deg, 6.3%) at 30% lightness, so it reads as a step down from the headline rather than a different grey. On the 90%-white hero panel it holds 6.98 against the darkest photo behind it. */ --surface: var(--gray-950); --dark: #25282A; /* Pantone 426 C */ /* Resources band. It now carries the FOOTER's palette -- dark ground, warm off-white body text, gold headings -- so the two heavy blocks on the page read as one system rather than two unrelated slabs. Light greys were tried here at length and all rejected: a lightened 465 C gold (became its own warm plane on a cool site), a cool tint of --dark, a near-neutral, and a warm-leaning grey. The band is the largest single surface on the site, and inverting it turned out to be the treatment that actually made it look intentional. */ /* Text on the dark ground. Shared by the footer and the band; naming them makes that relationship explicit rather than a coincidence of two hardcoded hex values drifting apart later. Against --dark: 9.87, 5.62 and 5.40 respectively. */ --on-dark: #D8D2C8; /* links and emphasis */ --on-dark-mute: #A79E92; /* body copy -- the footer tagline's colour */ /* Text on the BURGUNDY surfaces -- the footer and the testimonial cards. Both use --accent-d rather than --accent: over a large area the lighter burgundy is loud, and the deeper one lifts every role by 1.3-2.5 points (links 7.14 -> 9.19, stars 4.72 -> 6.08). --accent stays for small, deliberately bright things -- buttons, the ribbon, links. Burgundy is much lighter than --dark, so the on-dark set does not transfer: --gold falls to 3.21 there and --on-dark-mute to 3.34, both under AA. These are lightened until they match what the charcoal footer achieved, so moving the footer to burgundy costs no legibility on what is the smallest text on the site (13-14px). charcoal -> burgundy: links 9.87 -> 7.14, headings 5.40 -> 5.27, body 5.62 -> 5.59. */ --on-burg: #EAE7E1; /* links and emphasis */ --on-burg-mute: #D3CDC5; /* body copy, legal line */ --accent: #8A2434; /* burgundy-red, hue 351 */ --accent-d: #6E1B29; /* hue 350 */ /* Gold family. All four sit on Pantone 465 C's hue (38) and differ only in lightness and saturation; they had drifted to 38/39/41/42, which is small but means "the gold" was four slightly different colours. */ --gold: #B9975B; /* Pantone 465 C */ --gold-d: #8C692C; /* link hover and the focus ring. Was #96762F, which gave only 4.26 on white and 3.90 on --surface -- hovering a link made it HARDER to read. This gives 5.03 and 4.61. */ --gold-lt: #D6BA8A; /* THE gold for burgundy grounds. True 465 C reaches only 3.21 on --accent and 4.13 on --accent-d, both under the 4.5 small text needs -- burgundy cannot carry Pantone 465 C at 14px, which is why this exists at all. 4.72 on --accent, 6.08 on --accent-d, 7.95 on --dark. Absorbed --on-burg-head (#DDC59D), a second lightened gold doing the same job 7/11/19 away -- too close to distinguish deliberately, far enough to read as drift. */ --gold-hi: #E4CEA8; /* hover brightening of --gold-lt on the quote button and call bar. Was an untokenised #E4D2A8 repeated in two rules. */ --line: var(--gray-700); --line-dark: #3B3E40; /* hairline ON the dark ground -- 426 C at 24% */ --wrap: 1180px; --radius: 4px; } /* --------------------------------------------------------------- base --- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { /* The OS's own interface face: SF Pro on macOS and iOS, Segoe UI on Windows, Roboto on Android. Better letterforms than Arial at every size for no cost -- no webfont file, no extra request, no flash of unstyled text. Arial stays at the end of the stack as the floor. Metrically close enough to Arial that nothing needed retuning: measured across the site, the longest page moved 3357px -> 3363px and no headline changed its line count. */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; color: var(--ink); font-size: 16px; line-height: 1.6; background: var(--gray-990); overflow-x: hidden; } img { max-width: 100%; height: auto; border: 0; } /* The 14 section icons were sourced separately and have eight different natural sizes (76x78, 77x76, 77x77, 77x78, 77x79, 78x77, 78x78, 80x77). The markup copies each file's own dimensions, and `max-width: 100%` above then squeezes some further inside narrow cells -- 21 distinct rendered sizes across the site, eight of them on services.html alone. CSS beats HTML presentational attributes, so this normalises every one of them without editing a single page. Forcing square costs at most 4% distortion (worst case 80x77), invisible on a rounded-square icon. */ img[src*="images/icon"] { width: 64px !important; height: 64px !important; max-width: none !important; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--gold-d); text-decoration: underline; } /* Keyboard focus. There was no focus style at all, so tabbing through the site was invisible. --gold-d clears the 3:1 required of a non-text indicator on every light surface; the footer, header and call bar are dark, so they take the lighter gold. */ :focus-visible { outline: 3px solid var(--gold-d); outline-offset: 2px; border-radius: 2px; } .site-footer :focus-visible, .callbar :focus-visible, .site-header :focus-visible { outline-color: var(--gold); } p { margin: 0 0 1em; } /* `background: none` matters: six
tags across five pages set a pure-black background via the presentational attribute. It does not paint today because the element has zero content height, but it is one stray height away from a black bar. */ hr { border: 0; border-top: 1px solid var(--line); background: none; margin: 28px auto; } /* ------------------------------------------------- legacy tags --- 630 tags carry real intent (section headings etc), so map them onto a fluid scale rather than flattening them all to body size. */ font { font-family: inherit !important; } /* Three more places the typeface leaked, all found by measuring the rendered font on all 76 pages rather than reading the markup. 1. Form controls do not inherit font by default -- browsers hand them to the OS. The payment dropdowns on templates.html, projectapproval.html and one blog post rendered their