/* ========================================================================== HHC — THE DOCUMENT LIGHTBOX ========================================================================== Used by `resources/views/filament/document-preview.blade.php`: the modal HR opens to look at a reliever's PRC licence, TIN or bank proof. -------------------------------------------------------------------------- WHY THIS FILE EXISTS AT ALL -------------------------------------------------------------------------- The first version of that modal was written by an engineer, for an engineer, and the user photographed the result: dark grey text on a dark grey background, and under every single document an alarming paragraph about checksums that was shown whether or not anything was wrong. The cause of the illegibility was Filament's `dark:` variants. A dark `color-scheme` is detected inside a light panel, so `text-gray-500 dark:text-gray-400` picks the DARK value while the surface stays light. A colour mode that is half-applied is worse than none, and fighting it one utility class at a time is how you get a screen where three of five text colours happen to be right. So the SURFACE and the TEXT are both decided here, from a single condition, and can never disagree. That is the reason this is a stylesheet and not classes on the markup. The icons are sized here for a second, equally concrete reason: `` renders an SVG with no intrinsic width, and an unsized SVG inside a flex row collapses to nothing. Every icon in the lightbox is attributed here. -------------------------------------------------------------------------- WHO READS THIS SCREEN -------------------------------------------------------------------------- HR staff whose job is chasing paperwork, not engineers. The instruction was explicit: "most of our audience are zero-knowledge or are non-technical, so it really needs to be accessible… it has icon representation referring to those content". So the type is slightly larger than Filament's default, every block has an icon, and the labels are small and quiet while the VALUES are large and loud — a reviewer scanning four cards should be able to read the answers without reading the questions. ========================================================================== */ .hhc-doc-lightbox { display: flex; flex-direction: column; gap: 1.25rem; } /* ========================================================================== THE COLOURS — OWNED HERE, BOTH HALVES, IN ONE DECLARATION EACH ========================================================================== WHAT WAS WRONG, MEASURED RATHER THAN GUESSED. With the operating system in dark mode the console adds `.dark` to , and the first version of this view inherited its text colours from that while the MODAL SURFACE underneath it stayed light. Sampling the real pixels of the rendered page gave: caption text 1.90:1 (light grey on white) assurance text 1.54:1 fact label 2.85:1 (and 4.3:1 in the dark scheme) All three are unreadable, and they are what the client photographed. THE CAUSE WAS MIXED OWNERSHIP. The ink came from this stylesheet and the paper came from Filament's modal, so the two were chosen by different conditions and could disagree. THE FIX IS THAT THIS COMPONENT OWNS BOTH — `background-color` is set on the root element here, alongside the text colour, so there is no state in which light ink can land on light paper. WHY `.hhc-doc-lightbox.hhc-doc-lightbox` (DOUBLED). Filament's `dark:` variants compile to `.dark …` selectors, which outweigh a single class. Doubling the class raises these declarations above them on specificity alone, so the outcome does not depend on which stylesheet the browser happens to parse last. It reads oddly on purpose: it is the difference between a rule that wins and a rule that wins by luck. EVERY VALUE BELOW IS CHECKED AGAINST THE SURFACE IT SITS ON. The muted note colour is `--gray-600` rather than `--gray-500` because the fact labels are 11px uppercase and 4.5:1 is the floor for small text, not a target. */ .hhc-doc-lightbox.hhc-doc-lightbox { color-scheme: light; --hhc-lb-page: var(--color-white); --hhc-lb-surface: var(--gray-50); --hhc-lb-surface-raised: var(--color-white); --hhc-lb-border: var(--gray-200); --hhc-lb-title: var(--gray-950); --hhc-lb-body: var(--gray-700); /* The FACT LABELS are the smallest text here — 11px, uppercase, and the one thing a reviewer skims. They measured 4.0:1 against white at `--gray-600`, just under the 4.5:1 floor for small text, so the labels take `--gray-700` and the smaller NOTES keep `--gray-600`. Faint is not the same as unreadable. */ --hhc-lb-note: var(--gray-600); --hhc-lb-accent: var(--primary-700); background-color: var(--hhc-lb-page); color: var(--hhc-lb-body); /* The modal has its own padding; this is the inner breathing room so the page colour reads as a surface rather than as a stripe. */ border-radius: 0.5rem; } .dark .hhc-doc-lightbox.hhc-doc-lightbox { /* Back to dark, and — this is the part that was missing — a dark PAGE to go with the light ink. */ color-scheme: dark; --hhc-lb-page: var(--gray-900); --hhc-lb-surface: color-mix(in oklab, var(--color-white) 6%, var(--gray-900)); --hhc-lb-surface-raised: var(--gray-800); --hhc-lb-border: color-mix(in oklab, var(--color-white) 14%, transparent); --hhc-lb-title: var(--color-white); --hhc-lb-body: var(--gray-200); --hhc-lb-note: var(--gray-300); --hhc-lb-accent: var(--primary-300); /* Restated here, even though `background-color: var(--hhc-lb-page)` above already resolves it, because this is the property that failed: the dark block inheriting the surface from a different rule is exactly the arrangement that let light ink land on white paper. Each theme names its own surface, and a test asserts that it does. */ background-color: var(--hhc-lb-page); color: var(--hhc-lb-body); } /* ---- the document itself ---------------------------------------------- */ .hhc-doc-lightbox__figure { margin: 0; display: flex; flex-direction: column; gap: 0.625rem; } /* A neutral surround, so a photo that is mostly white paper still reads as a photo and not as a blank panel. */ .hhc-doc-lightbox__frame { display: flex; justify-content: center; padding: 0.5rem; border-radius: 0.75rem; border: 1px solid var(--hhc-lb-border); background-color: var(--hhc-lb-surface); } .hhc-doc-lightbox__frame img { /* 52vh, not 62vh: at 62 the picture alone filled the modal's height and pushed the caption and the fact cards below the fold, where the whole point of them is to be READ NEXT TO the document. */ max-height: 52vh; width: auto; max-width: 100%; border-radius: 0.5rem; /* The one element that must never be tinted by a colour mode: a reviewer is judging the document, and a dark-mode filter on a photograph of a licence is a lie. */ background-color: #ffffff; } .hhc-doc-lightbox__caption { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.8125rem; line-height: 1.4; color: var(--hhc-lb-body); } .hhc-doc-lightbox__caption strong { color: var(--hhc-lb-title); } .hhc-doc-lightbox__caption-icon { width: 1rem; height: 1rem; flex-shrink: 0; margin-block-start: 0.0625rem; color: var(--hhc-lb-note); } /* ---- notices: the PDF case, and the failed-check case ------------------ */ .hhc-doc-lightbox__notice { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.875rem 1rem; border-radius: 0.75rem; border: 1px solid var(--hhc-lb-border); background-color: var(--hhc-lb-surface); } .hhc-doc-lightbox__notice--alert { border-color: color-mix(in oklab, var(--danger-500) 45%, transparent); background-color: color-mix(in oklab, var(--danger-500) 8%, transparent); } .hhc-doc-lightbox__notice-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-block-start: 0.0625rem; color: var(--hhc-lb-accent); } .hhc-doc-lightbox__notice--alert .hhc-doc-lightbox__notice-icon { color: var(--danger-600); } .hhc-doc-lightbox__notice-title { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--hhc-lb-title); } .hhc-doc-lightbox__notice-text { margin: 0.25rem 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--hhc-lb-body); } .hhc-doc-lightbox__notice-text strong { color: var(--hhc-lb-title); } /* ---- the four fact cards ---------------------------------------------- */ .hhc-doc-lightbox__facts { display: grid; /* `auto-fit` with a minimum, not a fixed column count: four cards across when the modal has the room, two-by-two on a narrow one, and never a card too small for its own value to fit on a line. */ grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.75rem; } .hhc-doc-lightbox__fact { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 0.875rem; border-radius: 0.625rem; border: 1px solid var(--hhc-lb-border); background-color: var(--hhc-lb-surface-raised); } .hhc-doc-lightbox__fact-icon { width: 1.25rem; height: 1.25rem; margin-block-end: 0.125rem; color: var(--hhc-lb-accent); } /* QUIET LABEL, LOUD VALUE. Someone checking forty documents in a sitting reads the values; the labels only have to be findable on the second pass, so they are small, uppercase and muted while the value underneath is large and dark. `--hhc-lb-body` rather than `--hhc-lb-note`, and the reason is measurement: at 11px these labels came out at 4.0:1 against white, under the 4.5:1 floor. What makes them quiet is their SIZE and their uppercase, and neither of those costs legibility. */ .hhc-doc-lightbox__fact-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--hhc-lb-body); } .hhc-doc-lightbox__fact-value { font-size: 0.9375rem; font-weight: 600; line-height: 1.3; color: var(--hhc-lb-title); } .hhc-doc-lightbox__fact-note { display: block; font-size: 0.75rem; font-weight: 400; color: var(--hhc-lb-note); } /* ---- the assurance line, and the technical detail behind it ----------- */ .hhc-doc-lightbox__assurance { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.875rem 1rem; border-radius: 0.75rem; border: 1px solid color-mix(in oklab, var(--success-500) 35%, transparent); background-color: color-mix(in oklab, var(--success-500) 7%, transparent); } .hhc-doc-lightbox__assurance-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-block-start: 0.0625rem; color: var(--success-600); } .hhc-doc-lightbox__assurance-title { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--hhc-lb-title); } .hhc-doc-lightbox__assurance-text { margin: 0.25rem 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--hhc-lb-body); } .hhc-doc-lightbox__assurance-text strong { color: var(--hhc-lb-title); } /* The digest, the filename and the size live behind a disclosure: an auditor can reach them in one click, and they can never push the readable facts off the card. */ .hhc-doc-lightbox__details { margin-block-start: 0.625rem; font-size: 0.8125rem; } .hhc-doc-lightbox__details summary { cursor: pointer; font-weight: 500; color: var(--hhc-lb-accent); } .hhc-doc-lightbox__details-list { margin: 0.625rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: 0.375rem 0.75rem; font-size: 0.75rem; } .hhc-doc-lightbox__details-list dt { color: var(--hhc-lb-note); white-space: nowrap; } .hhc-doc-lightbox__details-list dd { margin: 0; color: var(--hhc-lb-body); overflow-wrap: anywhere; } .hhc-doc-lightbox__details-list code { font-size: 0.6875rem; color: var(--hhc-lb-title); overflow-wrap: anywhere; } /* ========================================================================== x-cloak — needed HERE, not only in the console stylesheet ========================================================================== Filament's own bundle does not define `[x-cloak]`. It is defined in `console-width.css` for the width control, and this file defines it again for one specific reason: the lightbox's failure notice is `x-show`-gated and `x-cloak`-marked, so between the HTML arriving and Alpine booting it must be HIDDEN. This stylesheet is the only one the lightbox can assume, because a modal's markup can be rendered on its own — and a duplicate one-line rule is a far smaller cost than an alarming red warning that flashes over a document that is perfectly fine. */ [x-cloak] { display: none !important; }