/* gov-mirror-theme.css — 2026-08-18 Light theme override for the live government-content mirror pages (/extranjeria/tramites/...). User-directed: "use a lighter theme to match actual site" — the real sede.policia.gob.es pages are light/white, unlike CSRB's own dark base theme. This keeps CSRB's brand accent colors (coral/teal links, buttons) as "a touch of our theme" while the background/text/surfaces flip light, so these pages read as official/document-like rather than forcing the dark theme onto government-sourced tabular content. Loaded AFTER the normal theme-N.css so these overrides win (same document-order-wins mechanism the 4-theme system already uses). 2026-08-18 (user-directed full contrast audit — "check against online website developing rules... contrast background vs text should match as per standards"): computed real WCAG 2.1 contrast ratios for every color pairing here (relative-luminance formula, not eyeballed). Found and fixed two real problems: 1. The light-theme variables were previously defined on `body.gov-mirror`, which cascaded into the site header (logo/.nav-links use the same --text/--text-muted tokens) — dark text on the header's dark background measured 1.16:1, functionally invisible. Now scoped to `.gov-mirror-light-zone` only (wraps just the breadcrumb/content/source-note), never body. 2. The raw brand --teal/--coral used directly as link/button text on the new white background measured 2.17:1 and 2.86:1 — both fail WCAG AA's 4.5:1 minimum for normal text. Added darker on-light variants (--teal-on-light 5.47:1, --coral-on-light 5.93:1) for anywhere these colors are used AS TEXT or as a button fill with white text on this light background; the original --teal/--coral stay unchanged for the rest of the (dark-background) site, where they already pass. Body/heading text and the border color were re-picked the same way — see the table below every rule that needed it. */ .gov-mirror-light-zone { --gm-bg-raised: #ffffff; --gm-border: #9b9484; /* 3.02:1 vs white — meets WCAG 1.4.11 non-text (UI/border) 3:1 target */ --gm-text: #211c14; /* 16.92:1 vs white — headings */ /* 2026-08-18 (user: intro paragraph + "Portal trata de seres humanos" card text "not readable on white background, change to black"). The previous #5b5648 (7.32:1) already technically passed WCAG AA, but user feedback is the real bar here, not just the numeric minimum — darkened substantially closer to true black for unambiguous readability, still one step softer than --gm-text so headings keep visual priority over body copy. */ --gm-text-muted: #2b271e; /* 14.88:1 vs white */ --gm-teal-on-light: #0f766e; /* 5.47:1 vs white — passes AA normal text (raw --teal is 2.17:1, fails) */ --gm-coral-on-light: #b83232; /* 5.93:1 vs white — passes AA normal text (raw --coral is 2.86:1, fails) */ /* Base color for the whole light zone (breadcrumb included) — same inheritance-gap fix as .gov-mirror-content below, applied one level up so nothing in this wrapper can fall through to the page's outer dark-theme text color. */ color: var(--gm-text-muted); } .gov-mirror-light-zone a { color: var(--gm-teal-on-light); text-decoration: underline; text-underline-offset: 2px; } .gov-mirror-light-zone a:hover { color: var(--gm-coral-on-light); } /* 2026-08-18 (user: "background is taking too much space left right, extend the main section") — the site's base .container caps at 1180px, sized for marketing pages. The real source content itself uses a wider container (its own markup: `class="container-fluid py-4 maxWidth1400"`) — matching that exactly rather than picking an arbitrary wider value. Scoped to gov-mirror pages only via body.gov-mirror (a plain selector override, not a CSS-variable cascade — doesn't hit the same header-leak class of bug fixed earlier, since .container's own rule is what's overridden here, nothing color/text-related). */ /* main/footer only — NOT .site-header .container, which should stay the same width as every other page on the site; the source itself keeps its header narrower than its content body too. */ body.gov-mirror main .container, body.gov-mirror .site-footer .container { max-width: 1400px; } /* Real content fetched from the source — a plain, document-like block, not a themed hero/card. Real tables (fee schedules, etc.) get honest table styling, not the dark card treatment. */ .gov-mirror-content { background: var(--gm-bg-raised); border: 1px solid var(--gm-border); border-radius: var(--radius); padding: clamp(1.5rem, 2vw + 1rem, 3rem); /* 2026-08-18 (user-caught real bug: "Ver todos los trámites... this text is not even visible, light color on white background"). Root cause: only h1/h2/h3 and p/li had an explicit color rule below — any OTHER element (a bare , a
, a not inside a p/li — e.g. the sidebar's "Ver todos los trámites y procedimientos" span) had no color of its own, so it inherited from the page's outer dark-theme --text (a light cream color meant for a dark background) straight through this light card — nearly invisible. This base rule on the container itself is a real, correct color for EVERY descendant to inherit unless something more specific overrides it (headings/links already do, below). */ color: var(--gm-text-muted); } .gov-mirror-content h1, .gov-mirror-content h2, .gov-mirror-content h3, .gov-mirror-content strong, .gov-mirror-content b { color: var(--gm-text); } /* 2026-08-18 (user-caught real problem: "no proper headings, just like an essay is written"). Root cause: the source's actual SECTION headings — "Requisitos y condiciones", "Documentación", "Cómo realizar el trámite", etc. — are h4/h5/h6 elements, several of them wrapping an (their Bootstrap accordion toggle). Two gaps compounded: (1) only h1–h3 had real heading styling here, h4–h6 had none, so they rendered at tiny browser-default size with no visual weight; (2) the general `.gov-mirror-content a` link rule (teal, underlined) was then winning on any heading that happens to wrap an — the most important section titles on the page were literally styled as small blue hyperlinks instead of headings. Fixed: real heading treatment for h4–h6 too (size steps down from h1–h3, still bold/dark/spaced-out — not link-styled), and a heading context always overrides link styling for any nested inside it. */ .gov-mirror-content h1 { font-size: 1.8rem; margin-top: 2rem; } .gov-mirror-content h2 { font-size: 1.5rem; margin-top: 2rem; } .gov-mirror-content h3 { font-size: 1.3rem; margin-top: 1.75rem; } .gov-mirror-content h4, .gov-mirror-content h5, .gov-mirror-content h6 { color: var(--gm-text); font-family: var(--font-display); font-weight: 700; line-height: 1.25; margin: 1.75rem 0 0.75rem; } .gov-mirror-content h4 { font-size: 1.15rem; } .gov-mirror-content h5 { font-size: 1.05rem; } .gov-mirror-content h6 { font-size: 0.98rem; } .gov-mirror-content h1 a, .gov-mirror-content h2 a, .gov-mirror-content h3 a, .gov-mirror-content h4 a, .gov-mirror-content h5 a, .gov-mirror-content h6 a { color: inherit; text-decoration: none; display: inline-block; } .gov-mirror-content h1 a:hover, .gov-mirror-content h2 a:hover, .gov-mirror-content h3 a:hover, .gov-mirror-content h4 a:hover, .gov-mirror-content h5 a:hover, .gov-mirror-content h6 a:hover { color: var(--gm-coral-on-light); } /* 2026-08-18 (user: "main website is so clean... showing + sign to extend the text... in a nice frame... create sections like original website"). The real page uses a real Bootstrap accordion (each section a collapsible "+"-toggle card); we force everything open (see .collapse below, `.gov-mirror-content [data-toggle="collapse"] { pointer-events: none; }`) since there's no Bootstrap JS here, but that shouldn't mean losing the section-as-a-distinct-box read entirely. Fix: give every accordion section a real bordered card frame (not just a heading + a top rule), and restore a decorative "+" before its heading — purely visual (nothing left to expand, it's already open), matching the source's own visual language instead of a flat list of headings. */ /* Scoped by element TYPE (div/ul), not just the id prefix — the source's own id-naming reuses the "heading"/"collapse" prefix on BOTH the section wrapper div and its inner toggle (e.g. id="headingRequisitos" on the div, id="headingRequisitosEnlace" on the inside it) — a bare [id^="heading"] would double-match and frame the link too, nesting a box inside a box. */ .gov-mirror-content div[id^="heading"] { border: 1px solid var(--gm-border) !important; border-radius: var(--radius); padding: 1.25rem 1.5rem !important; margin-bottom: 1.25rem; background: var(--gm-bg-raised); } .gov-mirror-content div[id^="heading"] h5, .gov-mirror-content div[id^="heading"] h6 { margin-top: 0; padding-top: 0; border-top: none; } /* 2026-08-18 (user: "you just added + sign but its not expanding and collapsing" — fair catch, the earlier pass only faked the icon while forcing everything permanently open via `!important`. Real toggle behavior now lives in gov-mirror-render.js's isolated inline script; this is just the visual state it drives — default collapsed (matches the source's own default: its trigger links carry class="collapsed" and the target has no "show" class, i.e. Bootstrap's own convention for "starts closed"), "+" becomes "−" and rotates when a section is open. */ .gov-mirror-content a[data-toggle="collapse"] { cursor: pointer; pointer-events: auto; } .gov-mirror-content a[data-toggle="collapse"]::before { content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 1.3em; height: 1.3em; margin-right: 0.5rem; border-radius: 50%; background: var(--gm-teal-on-light); color: #fff; font-size: 0.85em; font-weight: 700; transition: transform 0.2s var(--ease); } .gov-mirror-content a[data-toggle="collapse"].is-open::before { content: "−"; } .gov-mirror-content ul[id^="collapse"], .gov-mirror-content div[id^="collapse"] { display: none; } .gov-mirror-content ul[id^="collapse"].is-open, .gov-mirror-content div[id^="collapse"].is-open { display: block; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--gm-border); } .gov-mirror-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; } .gov-mirror-content th, .gov-mirror-content td { border: 1px solid var(--gm-border); padding: 0.65rem 0.9rem; text-align: left; font-size: 0.92rem; } /* 2026-08-18 (user feedback: "adjust the column width to fit the Tasa fee properly") — the source markup already carries the right proportions via Bootstrap's w-75/w-25 utility classes (e.g. the fee schedule table: procedure name column wide, fee amount column narrow) — we just weren't honoring them since we don't load Bootstrap. Map the specific widths their tables actually use. */ .gov-mirror-content .w-75 { width: 75%; } .gov-mirror-content .w-25 { width: 25%; white-space: nowrap; } .gov-mirror-content .text-center { text-align: center; } .gov-mirror-content th { background: color-mix(in srgb, var(--gm-teal-on-light) 12%, var(--gm-bg-raised)); color: var(--gm-text); font-weight: 700; } .gov-mirror-content tr:nth-child(even) td { background: color-mix(in srgb, var(--gm-border) 18%, transparent); } .gov-mirror-content ul { padding-left: 1.4rem; } /* External-link indicator — required distinction per user rule: anything outside sede.policia.gob.es (or a third domain like inclusion.gob.es for PDFs) opens in a new tab and is visually marked, never silently indistinguishable from an internal mirror link. */ .gov-mirror-content a.external-link::after { content: " ↗"; font-size: 0.85em; opacity: 0.7; } .gov-mirror-source-note { margin-top: 2rem; padding-top: 1rem; border-top: 1px dashed var(--gm-border); font-size: 0.85rem; color: var(--gm-text-muted); } /* ---------- Minimal Bootstrap-class shim ---------- */ /* 2026-08-18: the mirrored government markup uses Bootstrap grid/card/list-group/button classes (their site loads Bootstrap; ours doesn't, deliberately — "our own components", not a copy of their CSS). Rather than pulling in the whole Bootstrap library for a handful of classes, this recreates just enough behavior for the mirrored content to read cleanly: the real content (headings/tables/lists) already has real .gov-mirror-content styling above; this layer is only for the *structural* classes (grid columns, cards, buttons, list-groups) their markup relies on — e.g. the "all procedures" sidebar that appears alongside each individual procedure page. */ .gov-mirror-content .row { display: flex; flex-wrap: wrap; margin: 0 -0.75rem; } .gov-mirror-content .row > [class*="col-"] { padding: 0 0.75rem; box-sizing: border-box; } .gov-mirror-content .col-lg-9 { flex: 0 0 100%; max-width: 100%; } .gov-mirror-content .col-lg-3 { flex: 0 0 100%; max-width: 100%; margin-top: 2rem; } @media (min-width: 992px) { .gov-mirror-content .col-lg-9 { flex: 0 0 68%; max-width: 68%; } .gov-mirror-content .col-lg-3 { flex: 0 0 32%; max-width: 32%; margin-top: 0; } } .gov-mirror-content .card { border: 1px solid var(--gm-border); border-radius: var(--radius); overflow: hidden; margin-bottom: 1.5rem; background: var(--gm-bg-raised); } .gov-mirror-content .card-header { background: color-mix(in srgb, var(--gm-teal-on-light) 10%, var(--gm-bg-raised)); border-bottom: 1px solid var(--gm-border); padding: 1rem 1.25rem; } .gov-mirror-content .card-title { margin: 0; font-size: 1.05rem; color: var(--gm-text); } .gov-mirror-content .card-body, .gov-mirror-content .card > .p-3 { padding: 1rem 1.25rem; } .gov-mirror-content .list-group { list-style: none; margin: 0; padding: 0; } .gov-mirror-content .list-group-item { border-bottom: 1px solid var(--gm-border); padding: 0.75rem 1.25rem; font-size: 0.9rem; } .gov-mirror-content .list-group-item:last-child { border-bottom: none; } /* 2026-08-18 (same "reads like an essay" issue) — .sublista is the real bulleted content (e.g. "titular de un visado de estancia..."), nested inside a .list-group parent whose own list-style:none (correctly, for the structural wrapper above) was also stripping the bullet from these actual list items, with no border/indent to replace it — they read as plain unbroken paragraph text with no visual list cue at all. Restoring a real marker + indent + spacing here is what actually fixes the "wall of text" feeling, not just heading styling. */ .gov-mirror-content .sublista { list-style: disc; display: list-item; margin: 0.5rem 0 0.5rem 1.5rem; padding: 0; border: none; line-height: 1.6; } .gov-mirror-content .list-group-item a { text-decoration: none; display: block; color: var(--gm-text); } .gov-mirror-content .list-group-item a:hover { color: var(--gm-coral-on-light); text-decoration: underline; } .gov-mirror-content .btn { display: inline-block; padding: 0.5rem 1rem; border-radius: 999px; font-size: 0.88rem; font-weight: 600; text-decoration: none; border: 1px solid var(--gm-border); color: var(--gm-text); background: var(--gm-bg-raised); transition: all 0.2s var(--ease); } .gov-mirror-content .btn:hover { border-color: var(--gm-teal-on-light); color: var(--gm-teal-on-light); } .gov-mirror-content .btn-danger, .gov-mirror-content .btn-success { background: var(--gm-teal-on-light); border-color: var(--gm-teal-on-light); color: #ffffff; } .gov-mirror-content .btn-danger:hover, .gov-mirror-content .btn-success:hover { background: var(--gm-coral-on-light); border-color: var(--gm-coral-on-light); color: #ffffff; } /* 2026-08-18 (user: "black on green not readable... find online contrast tools"). Root cause: direct Bootstrap utility classes (bg-success + text-white, e.g. on the "Presencial"/"Face-to- face" accordion-toggle button) were never mapped at all — Bootstrap's OWN convention is that utility classes win via specificity/source-order tricks over component classes like .btn or heading rules, but without Bootstrap loaded, my own .btn/heading rules (higher specificity — two classes vs one) were winning instead, silently discarding the intended white-on-color pairing and landing on whatever fell out of the cascade. Mapping these directly with !important — matching Bootstrap's own "utilities always win" behavior — makes this predictable instead of accidental. Every background/foreground pair here re-verified with the same WCAG relative-luminance formula used throughout this file, not assumed. */ .gov-mirror-content .bg-success { background: var(--gm-teal-on-light) !important; } .gov-mirror-content .bg-danger { background: var(--gm-coral-on-light) !important; } .gov-mirror-content .bg-light { background: color-mix(in srgb, var(--gm-border) 20%, var(--gm-bg-raised)) !important; } .gov-mirror-content .bg-white { background: var(--gm-bg-raised) !important; } .gov-mirror-content .bg-info { background: color-mix(in srgb, var(--gm-teal-on-light) 15%, var(--gm-bg-raised)) !important; } .gov-mirror-content .text-white { color: #ffffff !important; } /* 5.47:1+ on both bg-success/bg-danger above */ .gov-mirror-content .text-dark { color: var(--gm-text) !important; } /* 16.92:1 vs white */ .gov-mirror-content .text-success { color: var(--gm-teal-on-light) !important; } .gov-mirror-content .text-danger { color: var(--gm-coral-on-light) !important; } .gov-mirror-content .bg-dark { background: var(--gm-text) !important; } /* near-black; pairs with .text-white/.text-light below at 15+:1 */ .gov-mirror-content .bg-transparent { background: transparent !important; } .gov-mirror-content .text-light { color: #ffffff !important; } /* only ever appears on bg-dark in this content — verified same pairing as .text-white */ .gov-mirror-content .text-muted { color: var(--gm-text-muted) !important; } .gov-mirror-content .w-100 { width: 100%; text-align: center; } /* 2026-08-18 (same "wall of text" fix) — Bootstrap spacing utility classes the real markup uses throughout (measured: my-3/mt-3/py-3/ml-4/etc. are the most common in this content) — without these, every section's intended breathing room collapses to zero, which is a large part of why dense text read as one undifferentiated block. Standard Bootstrap 4 spacer scale (1=0.25rem through 5=3rem) mapped only for the values actually used in this content, not the full scale. */ .gov-mirror-content .m-0 { margin: 0; } .gov-mirror-content .p-0 { padding: 0; } .gov-mirror-content .p-3 { padding: 1rem; } .gov-mirror-content .p-4 { padding: 1.5rem; } .gov-mirror-content .px-0 { padding-left: 0; padding-right: 0; } .gov-mirror-content .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } .gov-mirror-content .px-3 { padding-left: 1rem; padding-right: 1rem; } .gov-mirror-content .py-0 { padding-top: 0; padding-bottom: 0; } .gov-mirror-content .py-3 { padding-top: 1rem; padding-bottom: 1rem; } .gov-mirror-content .py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .gov-mirror-content .my-3 { margin-top: 1rem; margin-bottom: 1rem; } .gov-mirror-content .mt-3 { margin-top: 1rem; } .gov-mirror-content .mt-4 { margin-top: 1.5rem; } .gov-mirror-content .mb-3 { margin-bottom: 1rem; } .gov-mirror-content .ml-4 { margin-left: 1.5rem; } .gov-mirror-content .mr-1 { margin-right: 0.25rem; } .gov-mirror-content .mr-2 { margin-right: 0.5rem; } .gov-mirror-content .border-bottom { border-bottom: 1px solid var(--gm-border); } .gov-mirror-content .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } /* Real accordion open/close state is handled above (a[data-toggle="collapse"] + .is-open) and by real toggle JS in gov-mirror-render.js — see that file's inline