/* =========================================================================== haqqy life — the brand skin for guest-analytics. WHAT THIS CHANGES AND WHAT IT DOES NOT. The STRUCTURE stays exactly as it was: the 260px rail, the 61px top bar, breadcrumb-then-H1, the card head/body/foot, the person-cell, the status pill, "Showing N of M". That geometry was measured off the reference admin and is the thing that makes this resemble the system the owner asked it to resemble. Re-skinning is not re-laying-out. The SKIN is replaced: colour, type, and the mark. Every value below comes from haqqy-brand-kit/tokens/tokens.css and measurements.json, not from taste. THE CONTRAST CONTRACT — measurements.json ships a list of FORBIDDEN pairs, and this file is written around them rather than near them: white on brand yellow ....... 1.33 FORBIDDEN brand yellow on white ....... 1.33 FORBIDDEN brand yellow on paper ....... 1.32 FORBIDDEN ink on the dark surface ..... 1.38 FORBIDDEN So: the active nav pill is yellow with INK text (15.68), never white text. Links on paper are amber #917200 (4.51), never brand yellow (1.32). The rail logo is the WHITE lockup (15.13 on dark), never the default ink one — which was RENDERED on #29261C and seen to be very nearly nothing, rather than inferred from a table. The kit's own rule, from its README: "The yellow is a surface, never an ink." GEOMETRY NOTE. Both lockups are viewBox 1621x469 — an aspect of 3.457. The first draft of this file sized the rail mark 176x34 (5.17), which `contain` would have letterboxed: a smaller mark, mis-centred, in a box the wrong shape. Every box below is sized to that ratio deliberately. =========================================================================== */ /* --- Lexend, self-hosted ------------------------------------------------- No CDN, matching the rest of this build: a hostel on El Nido wifi should not need fonts.googleapis.com to see who is in the building. SIL OFL 1.1; the licence ships beside the files in /brand/fonts/. `swap`, so text is readable immediately rather than invisible while a face downloads over a slow link. */ @font-face { font-family: 'Lexend'; src: url('/brand/fonts/lexend-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Lexend'; src: url('/brand/fonts/lexend-500.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Lexend'; src: url('/brand/fonts/lexend-600.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Lexend'; src: url('/brand/fonts/lexend-700.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } /* --- the remap ----------------------------------------------------------- admin.css's own token names are kept and repointed, so every rule already written against them picks the brand up with no edit. */ :root { /* SURFACES -- achromatic. Every one of these used to be warm: paper #FFFEF8, hairline #D0CCB3, hover #F8F7EF. Warm neutrals beside a saturated yellow read as aged paper, which is the "old and soft" the brief is about. */ --navy: #0A0A0A; /* the dark disc: black, not dark brown */ --page: #F4F4F5; /* page ground -- a cool grey, so white cards lift */ --card: #FFFFFF; /* card ground -- pure white */ --line: #E4E4E7; /* hairline -- neutral, was tan */ --hover: #FAFAFA; /* row hover -- neutral */ /* INKS -- black and true greys, no warmth. */ --ink: #0A0A0A; /* body text, 19.6:1 on white */ --muted: #6B6B72; /* secondary, 5.29:1 on white */ --muted-2: #5A5A61; /* the darker grey, 6.62:1 on white */ /* THE ACCENT. Yellow is a SURFACE only; it is never text. */ --primary: #FFD400; /* brand yellow -- fills, underlines, never type */ /* LINKS AND BRAND TEXT ARE BLACK, not a darkened yellow. The old value was #917200 -- olive, because yellow at 1.4:1 on white is unreadable and darkening it far enough to pass turns it tan. Black plus a yellow underline keeps the accent pointing without the muddy hue. */ --primary-ink: #0A0A0A; --nav-active: #FFD400; /* active pill FILL */ --active-ink: #FFD400; /* STATUS. Restrained to pills and dots; kept coloured because a status that has been greyed out is not a status. Re-mixed cool so none reads as tan. */ --teal: #0B7A4B; --ink-teal: #0B7A4B; --ink-info: #1D4ED8; --ink-pink: #C4271A; /* the "pink" slot carries the danger role here */ --ink-amber: #8A6D00; /* ONLY inside the amber pill, never on white */ /* Pill tints -- neutral-cool, so the inks above keep clearing 4.5:1. */ --tint-blue: #EAEFFD; --tint-teal: #E3F3EC; --tint-pink: #FCEAE8; --tint-amber: #FFF3B0; --shadow-card: 0 1px 2px rgba(10, 10, 10, 0.04), 0 2px 10px rgba(10, 10, 10, 0.05); } body, .rail, button, input, select, textarea { font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } /* --- the rail ------------------------------------------------------------ */ /* The wordmark replaces the "GA" disc. It is the WHITE lockup: the default ink one measures 1.38 against this ground and renders as very nearly nothing — confirmed by rendering it on #29261C, which is the entire point of LAW 1. 150 x 44 keeps the 3.457 aspect, and 150px is comfortably above the kit's 120px floor, below which the name must be dropped for the mascot alone. */ .rail__brand { gap: 0; padding: 0 20px; } .rail__brand .rail__mark { display: none; } .rail__brand > span:last-child { display: block; width: 150px; height: 44px; text-indent: -9999px; /* keep the accessible text, hide the glyphs */ overflow: hidden; white-space: nowrap; background: url('/brand/logo/haqqy-horizontal-white.svg') left center / contain no-repeat; } /* The active pill: yellow FILL, INK label. White on yellow is 1.33 and is on the forbidden list — this is the single easiest way to get this brand wrong, because white-on-accent is the habit everywhere else. */ .rail__link[aria-current="page"] { background: var(--nav-active); color: var(--ink); font-weight: 600; } .rail__link[aria-current="page"] .rail__icon { opacity: 1; } /* A badge sits on the dark rail: yellow ground (11.36) with an ink numeral. */ .rail__badge--warn { background: var(--primary); color: var(--ink); } .rail__foot .pill--plain { border-color: rgba(255, 255, 255, 0.3); } /* --- controls ------------------------------------------------------------ */ /* A filled button is a yellow SURFACE with an ink label, never white-on-yellow. */ .btn--primary, button[type="submit"], .filters button { background: var(--primary); color: var(--ink); border: 1px solid #E1C200; /* hq-yellow-300 — a visible edge on white */ font-weight: 600; } .btn--primary:hover, button[type="submit"]:hover, .filters button:hover { background: #FFEE6A; } /* hq-yellow-100 */ /* Focus is the ink ring the kit specifies, not a browser default. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } /* --- the sign-in mark ---------------------------------------------------- On the near-white sign-in ground the INK lockup is the correct one (20.88). The white variant is literally invisible there and the yellow one is 1.32 — both checked by rendering, not assumed. 190 x 55 holds the 3.457 aspect. */ .login__brand .rail__mark { display: none; } .login__brand { display: block; width: 190px; height: 55px; text-indent: -9999px; overflow: hidden; white-space: nowrap; background: url('/brand/logo/haqqy-horizontal.svg') left center / contain no-repeat; } /* The sign-in screen's own mark. The heading text beside it is hidden by the lockup, which already contains the name — two "haqqy life"s side by side is the classic re-brand artefact. */ .signin__brand.login__brand { display: block; width: 190px; height: 55px; margin: 0 auto 6px; } .signin__brand.login__brand > * { display: none; } /* --- the home screen's mark ---------------------------------------------- The Mews-shaped home shell had the name set as letterspaced capitals, "HAQQY", while every other screen carried the actual lockup. One product with two different wordmarks reads as two products. THE INK LOCKUP, NOT THE WHITE ONE, and that is not a detail. This sidebar is near-white (unlike the navy rail on every other screen), so the white variant would be invisible on it — rendered and checked on this exact ground rather than assumed, which is the only way that class of mistake is ever caught. The text stays in the DOM and is pushed off-screen, so a screen reader still hears the name; only the glyphs are replaced. 132 x 38 holds the lockup's 3.457 aspect ratio, sized to sit comfortably beside the 40px menu button. */ .mrail__wordmark { display: block; width: 132px; height: 38px; text-indent: -9999px; overflow: hidden; white-space: nowrap; background: url('/brand/logo/haqqy-horizontal.svg') left center / contain no-repeat; } /* =========================================================================== DARK — feature 59, and the inverse of the same brief. White, black and yellow does not stop being the palette in the dark; the ground and the ink swap and the accent stays put. Yellow is the one colour that carries on both, which is most of why the brief works. THE THREE STATES, AND WHY ALL THREE ARE NEEDED. A viewer is in one of: an explicit choice -> [data-theme="dark"] or [data-theme="light"] the system default -> NO attribute at all, only prefers-color-scheme The un-stamped state is the common one. So the bare :root above carries the complete light palette, the media query redefines ONLY tokens and is guarded with :not([data-theme="light"]) so an explicit light choice beats a dark OS, and the attribute selector redefines them again so the toggle wins the other way. A colour whose only definition lives inside one of those blocks never applies in the un-stamped state — which is the classic unreadable-page bug. WHAT CHANGES FOR THE CHARTS, and it is not a filter. `--cat-1` is near-black because it is the primary series on a white card; on a black one it is invisible. The family inverts by LIGHTNESS while keeping its order, so slot 1 is still the primary series and a filter that drops a series still never repaints the survivors. ========================================================================= */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --navy: #F4F4F5; /* the disc: now light-on-dark */ --page: #0A0A0B; --card: #141416; --line: #2A2A2E; --hover: #1C1C20; --ink: #F7F7F8; --muted: #9B9BA3; --muted-2: #B4B4BC; --primary: #FFD400; /* unchanged — it is the point of the palette */ --primary-ink: #F7F7F8; /* links are the ink colour, whichever it is */ --nav-active: #FFD400; --active-ink: #FFD400; --teal: #4ADE9B; --ink-teal: #4ADE9B; --ink-info: #8AB4FF; --ink-pink: #FF8A80; --ink-amber: #FFD400; --tint-blue: #16233D; --tint-teal: #122B20; --tint-pink: #331716; --tint-amber: #332A00; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.4); } /* The shell, and the chart family. Same order, inverted lightness. */ :root:not([data-theme="light"]) .mews { --rail: #141416; --rail-line: #2A2A2E; --rail-ink: #C9C9D1; --rail-ink-2: #8E8E97; --rail-active: #332A00; --rail-active-ink: #FFD400; --cat-1: #FAFAFA; /* primary series — white on dark, was black on light */ --cat-2: #FFD400; --cat-3: #71717A; --cat-4: #A1A1AA; --cat-rest: #3F3F46; } } :root[data-theme="dark"] { --navy: #F4F4F5; --page: #0A0A0B; --card: #141416; --line: #2A2A2E; --hover: #1C1C20; --ink: #F7F7F8; --muted: #9B9BA3; --muted-2: #B4B4BC; --primary: #FFD400; --primary-ink: #F7F7F8; --nav-active: #FFD400; --active-ink: #FFD400; --teal: #4ADE9B; --ink-teal: #4ADE9B; --ink-info: #8AB4FF; --ink-pink: #FF8A80; --ink-amber: #FFD400; --tint-blue: #16233D; --tint-teal: #122B20; --tint-pink: #331716; --tint-amber: #332A00; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.4); } :root[data-theme="dark"] .mews { --rail: #141416; --rail-line: #2A2A2E; --rail-ink: #C9C9D1; --rail-ink-2: #8E8E97; --rail-active: #332A00; --rail-active-ink: #FFD400; --cat-1: #FAFAFA; --cat-2: #FFD400; --cat-3: #71717A; --cat-4: #A1A1AA; --cat-rest: #3F3F46; } /* --------------------------------------------------------------------------- The marks that had a hard-coded colour. Each of these was written as `#fff` or `var(--card)` on the assumption that the surface behind it is white. In the dark they were a white halo on a black ring — visible, wrong, and exactly the kind of thing a palette swap misses because nothing errors. --------------------------------------------------------------------------- */ /* The ring around a data point is the SURFACE it sits on, not white. */ .chart .dot, .ch__dot, .trend__dot--now { stroke: var(--card); } /* The mascot wordmark is near-black artwork. On a dark rail it needs the white lockup, which ships beside it — see LAW 1: the two files are the same mark in two inks, and the black one nearly vanishes on dark. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mrail__wordmark { background-image: url('/brand/logo/haqqy-horizontal-white.svg'); } } :root[data-theme="dark"] .mrail__wordmark { background-image: url('/brand/logo/haqqy-horizontal-white.svg'); } /* A yellow button keeps black type in both themes — yellow is a surface, and the label on it is ink regardless of what the page ground is doing. */ .btn--primary { color: #0A0A0A; }