/* =========================================================================== GSTSERVE — MASTER PALETTE AND TYPE TOKENS --------------------------------------------------------------------------- THIS IS THE ONLY FILE THAT MAY CONTAIN A COLOUR VALUE. gstserve.css holds layout and typography and refers to everything here by var(). No page, no partial and no inline style may carry a hex code. To recolour or retypeset the entire site, edit this file and nothing else. --------------------------------------------------------------------------- THE SIX SWATCHES, AND WHY EVERYTHING ELSE IS DERIVED FROM THEM Section 11 of the specification gives six colours and one instruction: "navy carries almost everything, orange appears only on interactive elements and section markers, and the neutrals get a slight blue bias so they read as chosen rather than default." Ink #12203A Accent #A9491A Ground #F4F6F8 Surface #FFFFFF Muted #4E5A6E Positive #19603F V2.1 shipped with a palette that had quietly drifted off all of that. A pixel census of the built site found: Ink painting 7.5% of the page but carrying only 414 text elements against 878 in an invented mid-grey (#3D4859); Muted #4E5A6E painting SEVEN PIXELS across twenty-two pages; and Positive #19603F never painting at all. Twenty-nine off-spec tones were doing the work of six. So every neutral below is now DERIVED, by an explicit sRGB mix of two spec swatches, and the mix is written next to it. The values are pre-computed rather than left to color-mix() so they render identically everywhere, but the arithmetic is recorded so anyone can check it or redo the ramp after a swatch changes. Nothing in this file is a colour somebody liked the look of. THE TEXT TIERS ARE TWO, NOT FIVE: --ink headings, body copy, table cells, list items 16.24:1 --muted decks, captions, nav, small print, drawing labels 6.97:1 A third, lighter step was tried and dropped: at 3.57:1 it could not legally hold text, and a tone that can only be used where it does not matter is not a tier, it is a temptation. =========================================================================== */ :root{ /* ======================= THE SIX, VERBATIM ============================= */ --ink: #12203A; /* Ink — headings AND body. Carries the site. */ --accent: #A9491A; /* Accent — interactive elements and section markers, nothing else */ --bg-tint: #F4F6F8; /* Ground — the tinted band */ --bg: #FFFFFF; /* Surface — the page */ --muted: #4E5A6E; /* Muted — the one secondary text tier */ --ok: #19603F; /* Positive — confirmations, inclusion ticks, affirmative artwork */ /* ======================= DERIVED NEUTRALS ============================== */ /* Lines and recessed grounds, all Ink mixed into Ground so the neutrals keep the blue bias the brief asks for instead of drifting to a default grey. */ --line-soft: #E2E5E9; /* Ink 8% + Ground — card edges, subtle dividers */ --line: #D4D8DD; /* Ink 14% + Ground — the default hairline */ --line-strong: #BEC3CA; /* Ink 24% + Ground — emphasised edge, table rules */ --bg-sunk: #EBEDF0; /* Ink 4% + Ground — a well inside a card, never a band */ /* On the dark band. There is ONE dark on this site and it is Ink itself — no second near-black. These are Surface mixed back toward Ink. */ --navy: #12203A; /* = Ink. The alias stays so the intent reads in context. */ --on-navy: #FFFFFF; /* = Surface 16.24:1 on Ink */ --on-navy-soft: #C1C5CC; /* Surface 74% + Ink — sub copy 9.38:1 on Ink */ --on-navy-mute: #9298A4; /* Surface 54% + Ink — fine print 5.60:1 on Ink */ --on-navy-line: #38445A; /* Surface 16% + Ink — hairline inside the dark */ /* ======================= ACCENT FAMILY ================================= */ --accent-deep: #8B4120; /* Accent 80% + Ink — hover 7.30:1 on Surface */ --accent-soft: #F7EFEA; /* Accent 9% + Surface — chip fill */ --accent-line: #E3C5B6; /* Accent 32% + Surface — accent-family hairline */ --on-accent: #FFFFFF; /* = Surface 5.75:1 on Accent */ /* Accent itself is 2.83:1 on Ink — it cannot carry text on the dark band, and for four versions the dark band therefore had no accent at all: the second half of the closing headline was white with a hard 2px rule under it, which staircased across a wrapped phrase and read as a link. This is the accent re-mixed to survive on Ink. Lightening Accent alone reaches AA at about 64% Surface but arrives desaturated and pink at headline size, so the mark's own orange supplies the chroma and Surface supplies the lift. It is the one place --mark-orange feeds a text colour, and it feeds it as a component, not as itself. Two-tone headlines now work the same way on the dark band as on the light one. */ --accent-on-navy:#DC7847; /* Accent 40% + Mark orange 60%, then Surface 18% — accent text on Ink 5.27:1 on Ink */ /* ======================= POSITIVE FAMILY ============================== Restored to the specified swatch. It carries every affirmative on the site: the "what is included" ticks, the approved states, and the green in the drawings. It never carries a call to action — that is Accent's job alone. */ --ok-soft: #EAF1EE; /* Positive 9% + Surface */ /* ======================= STATUTORY FORM-NAME PILL ====================== The .f component — GSTR-3B, s.395(1), s.393(2) — set inline in mono. The specification calls this quietly the most on-brand element on the site, so it is Ink on a barely-there Ground tint: evidence, not emphasis. */ --pill-ink: #12203A; /* = Ink 9.4:1 on its fill */ --pill-bg: #E9EBEE; /* Ink 5% + Ground */ --pill-line: #CED2D8; /* Ink 17% + Ground */ /* ======================= UNRESOLVED-VALUE CHIP ========================= [SET] / [VERIFY] / [HOLD]. Loud on purpose: an unresolved value must be impossible to mistake for finished copy. Nothing carrying one may go live. */ --flag-ink: #8B4120; /* = --accent-deep 7.30:1 */ --flag-bg: #F9F2EF; /* Accent 7% + Surface */ --flag-line: #C08059; /* Accent 68% + Surface 3.06:1 */ /* ======================= DRAWING RAMP ================================== For SVG artwork only, and all of it Ink mixed into Surface or Ground. A stroke that CARRIES MEANING uses --art-1/2/3, Accent or Positive, all of which clear 3:1. --art-4/5/6 are for structure a reader is not asked to read: card outlines, background rails, receded shapes. */ --art-1: #12203A; /* = Ink 16.24:1 */ --art-2: #505A6D; /* Ink 74% + Surface 6.94:1 */ --art-3: #848B99; /* Ink 52% + Surface 3.42:1 */ --art-4: #AEB3BC; /* Ink 34% + Surface — non-meaning structure */ --art-5: #D0D2D8; /* Ink 20% + Surface — non-meaning structure */ --art-6: #E0E3E7; /* Ink 9% + Ground — receded fill */ --art-accent: #A9491A; /* = Accent */ --art-green: #19603F; /* = Positive */ /* ======================= THE MARK'S OWN COLOURS ======================== NOT palette colours. These are the two colours inside the supplied logo artwork, and they exist here so the devices lifted FROM that artwork — the brushstroke, the topbar it bleeds into — can match it exactly. They are deliberately confined to those devices. The site's green is Positive #19603F, not the mark's #37B34A: green + white + saffron at scale is the tricolour, and section 13 forbids a palette implying official status for a firm whose name already leans on "GST". The mark may be the mark; the site around it stays navy-led. */ --mark-orange: #F16522; /* the brushstroke under "serve". NON-TEXT ONLY, 3.17:1 */ /* Recorded, not used in CSS: the logo file carries this colour itself. It is here so anyone recolouring the site knows what the mark will still be. */ --mark-green: #37B34A; /* the "GST" in the mark */ --mark-glow: rgba(241,101,34,.14); /* ======================= LEDGER GRID =================================== The texture pass. A ledger is the one piece of paper this profession owns, so the hero and the closing band carry a faint ruled grid - Ink on the light band, Surface on the dark one, both far below text contrast because they are ground, not content. If these two values are raised until the grid is obvious, it stops reading as paper and starts reading as a table with nothing in it. */ --grid-line: rgba(18,32,58,.055); /* Ink at 5.5% - light bands */ --grid-line-dark: rgba(255,255,255,.06); /* Surface at 6% - the dark band */ /* ======================= LIGHT AND BLUSH =============================== Two grounds for the beauty pass. The lift is Ground mixed toward Surface so a tinted band can carry a just-perceptible top light instead of arriving as a flat slab; the blush is Accent at 6% for the radial wash behind hero drawings - warmth, not colour. Neither may ever sit under text at a contrast anyone could measure. */ --bg-tint-lift: #F9FAFB; /* Ground 55% + Surface */ --accent-blush: rgba(169,73,26,.06); /* Accent at 6% - radial washes only */ /* ======================= V3.7 CANVAS AND TIERS ========================= Phase 1 of the FinTech-finish brief, translated into this palette's own terms. The canvas is the page GROUND - Ground mixed 40% into Surface, so white cards visibly pop against it instead of dissolving. Surfaces stay --bg. The third text tier the brief asks for is cut ABOVE the legal floor this file documents: Ink 88% + Surface holds ~11.6:1, nowhere near the 3.57:1 tier that was rightly dropped - headings stay Ink, body copy takes this, labels stay Muted. The focus ring is the accent at 14%, because this site's brand is the orange - the brief's "brand blue" has no blue to reuse here and gets none invented. */ --canvas: #FAFBFC; /* Ground 40% + Surface — the page ground */ --ink-body: #2E3B52; /* Ink 88% + Surface — body copy 11.6:1 */ --focus-ring: rgba(169,73,26,.14); /* accent glow for focused fields */ /* ======================= GLASS, CHIP LINES, LUXE SHADOWS =============== V3.6, the prestige pass. The glass is Surface at 82% for the sticky masthead - enough body that text under it never shows through as text, enough transparency that the page is felt moving beneath. The two lines complete the chip families: every tinted chip ground (accent-soft, ok-soft) now has a matching hairline. The luxe shadows are LAYERED - a tight 1-2px contact shadow plus a wide soft ambient one - because a single mid-distance shadow is exactly what reads as flat design lifted, rather than a surface lit. */ --bg-glass: rgba(255,255,255,.82); --ok-line: #B5CCC2; /* Positive 32% + Surface — ok-family hairline */ --shadow-xs: 0 1px 2px rgba(18,32,58,.04), 0 4px 16px rgba(18,32,58,.03); --shadow-luxe: 0 1px 2px rgba(18,32,58,.05), 0 8px 30px rgba(18,32,58,.06); --shadow-luxe-lg:0 2px 4px rgba(18,32,58,.06), 0 18px 50px -12px rgba(18,32,58,.14); /* ======================= V5.0 — THE LEDGER FOLIO PASS =================== The reimagining. Three new devices, all drawn from the ledger the site already claims as its paper: the MARGIN RULE (the double red margin line every ruled ledger carries, here the accent at low alpha, running the height of the page on wide screens); the FOLIO NUMERAL (the section number set huge and ghosted behind each section head, like a folio stamped on the sheet); and the TOTALS RULE (the accountant's device — a short double rule — closing every section head). All derived, as ever. */ --ghost: #E3E6EB; /* Ink 12% + Surface — folio numerals, light bands. DECORATIVE: deliberately below text contrast; it is ground, never content. */ --ghost-dark: #26344D; /* Surface 11% + Ink — folio numerals on the dark band */ --margin-rule: rgba(169,73,26,.28); /* Accent 28% — the ledger margin line */ --margin-rule-2: rgba(169,73,26,.10); /* Accent 10% — its companion rule, 5px inside */ --rule-gap: 5px; /* the double-rule spacing, used by every totals rule */ /* V5.0 display tier: the type scale gains one step above --t-h1 for heroes and the closing band. Newsreader is a variable optical-size face (opsz 6..72), so at this size the browser swaps to the display cut by itself — higher contrast, tighter joins — which is what makes the scale feel drawn rather than merely enlarged. */ --t-display: clamp(2.7rem, 6.4vw, 4.4rem); /* ======================= V5.4 — THE BAND AND THE LAST STRAYS ============ THE BAND. Sections alternate plain / band (build.py re-derives the alternation on every build). Until V5.3 the plain sections sat on --canvas #FAFBFC and the band on --bg-tint #F4F6F8: a contrast of 1.04, which nobody could see. Plain sections are now Surface white and the band is COOL GREY-BLUE (V5.5, Jaison, 30 Oct) - Ink 4% + Ground, the same mix as --bg-sunk, so it keeps the navy bias the brief asks of every neutral. Contrast against white 1.17, the clearest of the three options rendered. Text on it: Ink 13.8:1, ink-body 9.6:1, Muted 5.95:1, Accent 4.90:1 - every pair clears AA. V5.4 used warm paper (#FAF4F1, Accent 6% + Surface, with an accent ruling); it is in Archive, and swapping back is these three values plus the band edge. */ --band: #EBEDF0; /* Ink 4% + Ground - the alternating section ground */ --band-rule: rgba(18,32,58,.05); /* Ink at 5% - ledger ruling on the band */ --band-edge: #D4D8DD; /* = --line (Ink 14% + Ground) - hairline at each band edge */ --ghost-band: #D9DBE0; /* Ink 16% + Surface - folio numerals on the band, where --ghost vanished. DECORATIVE */ /* THE STRAYS. Seven colour values had been typed straight into gstserve.css over the design passes - shadows tinted with Ink or Accent, one matte white. Harmless today; wrong the day a swatch changes, because the shadows would keep the old colour. They live here now. (The rgba(0,0,0) values left in gstserve.css are MASK gradients - an alpha channel, never painted - and build.py now fails if any real colour reappears there.) */ --shadow-portrait: 0 6px 18px rgba(18,32,58,.10); /* Ink 10% */ --glow-btn: 0 10px 26px -10px rgba(169,73,26,.45); /* Accent 45% */ --glow-btn-light: 0 10px 26px -10px rgba(0,0,0,.35); /* on the dark band */ --surface-matte: rgba(255,255,255,.72); /* Surface 72% */ --shadow-navbtn: 0 1px 2px rgba(18,32,58,.06),0 6px 18px -6px rgba(169,73,26,.35); --shadow-navbtn-hover: 0 2px 4px rgba(18,32,58,.06),0 12px 28px -8px rgba(169,73,26,.5); /* ======================= SHADOW AND PRINT ============================== */ --shadow-sm: 0 1px 2px rgba(18,32,58,.05); --shadow-md: 0 6px 20px rgba(18,32,58,.07); --shadow-lg: 0 16px 34px rgba(18,32,58,.10); --print-ink: #000000; --print-bg: #FFFFFF; /* ========================================================================= TYPE TOKENS Section 11: a serif with authority for headings (Newsreader), a clear humanist sans for body (IBM Plex Sans), and tabular figures everywhere a fee appears. Playfair Display and Inter are both explicitly ruled out. Change the two stacks here and the whole site retypesets. ========================================================================= */ --serif: Newsreader, Georgia, 'Times New Roman', serif; --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* ========================================================================= SPACING SCALE Added in V2.3, after an audit found 155 inline style declarations in the page content using THIRTEEN different margin-top values - 10, 12, 20, 22, 24, 26, 28, 30, 32, 34, 36, 40 and 56px - and 68 distinct pixel values in the stylesheet. Spacing was being eyeballed per instance. That is the one thing a reader cannot name and always feels: sections that ought to breathe identically did not. Eleven steps on a 4px base, roughly geometric so adjacent steps are distinguishable and distant ones are unmistakable. Nothing on this site should use a spacing value that is not one of these. ========================================================================= */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 40px; --s8: 56px; --s9: 72px; --s10: 96px; --s11:128px; /* ========================================================================= TYPE SCALE A major third (1.25) either side of a 17px body, rounded to sensible rendered pixels. Roles are named rather than numbered so a change of size is a change of intent, not a change of number. ========================================================================= */ --t-micro: .70rem; /* mono labels, eyebrows, tags ~11px */ --t-fine: .80rem; /* fine print inside a component ~13px */ --t-small: .88rem; /* captions, secondary card copy ~14px */ --t-body: 1rem; /* body copy ~17px, set on body */ --t-lead: 1.14rem; /* leads, decks, article opener ~19px */ --t-h3: 1.24rem; /* card and sub-section headings ~21px */ --t-h2: clamp(1.6rem, 3.6vw, 2.3rem); --t-h1: clamp(2.15rem, 5.4vw, 3.4rem); /* ---- Measure and rhythm ------------------------------------------------ */ --maxw: 1160px; /* outer reading frame */ --measure: 70ch; /* running text, spec: 65-72 characters */ --measure-tight: 62ch; /* leads and decks */ --radius: 6px; --radius-lg: 10px; }