/** * ReturnSafe component layer * Loaded AFTER main.css, which remains the (unmodified apart from its tokens) * BootstrapMade "Clinic" base. Everything here is either: * a) geometry/motion correction - flattening the template's marketing-site * roundness and shadow into the squared, rule-separated look of a public * register, or * b) new components the template has no equivalent for (case cards, the * poster detail layout, data tables, admin tables, status pills). * * All colour comes from the tokens in main.css so light and dark mode both work * with no per-component overrides. Never hardcode a hex value in this file. */ /*-------------------------------------------------------------- # Geometry & motion corrections --------------------------------------------------------------*/ /* The template rounds and shadows nearly every surface. A missing-persons register should read as records, not as product marketing. */ .card, .info-card, .service-card, .icon-box, .form-control, .form-select, .btn, .badge, .accordion-item, .accordion-button, .alert { border-radius: var(--radius) !important; box-shadow: none !important; } /* Restore separation with a hairline rule instead of a shadow. */ .card, .info-card, .accordion-item { border: 1px solid var(--rule); } /* Scroll-in transitions are back on, applied to content blocks rather than to every element the way the base template did. FAIL-SAFE, and this is the important part: an element with data-aos sits at opacity:0 until the AOS library initialises it. If AOS fails to load - blocked script, CDN-less offline, JS error earlier in the file - that content stays invisible forever, on a page whose whole purpose is showing a missing person's face. So the hidden state is applied ONLY once JS has confirmed AOS is live by putting .aos-active on . No JS, no class, everything visible. */ html:not(.aos-active) [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /*-------------------------------------------------------------- # Chrome corrections # The base template paints the header as a full-width bar from tokens this # project deliberately changes between themes, using shorthands that bypass # the .dark-background / .light-background section presets entirely. Pinned # here instead, now as a floating rounded pill (logo, flat nav, and a # Sign In / Report a Case button pair) rather than a square top-bar strip. --------------------------------------------------------------*/ /* The header element itself stays transparent full-width scaffolding; the pill look lives entirely on the .container inside .branding so it can be centered with breathing room on either side. */ .header, .scrolled .header { background-color: transparent !important; box-shadow: none !important; } .header .branding { background-color: transparent !important; padding: 14px 16px 0; } .header .branding .container { background-color: #ffffff; border: 1px solid var(--rule); border-radius: 999px; padding: 0.5rem 0.75rem 0.5rem 1.5rem; box-shadow: 0 10px 30px rgba(11, 26, 51, 0.10); transition: box-shadow 0.3s, background-color 0.3s; } :root[data-theme="dark"] .header .branding .container { background-color: #0d1a2c; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); } .scrolled .header .branding { padding-top: 10px; } .scrolled .header .branding .container { box-shadow: 0 14px 34px rgba(11, 26, 51, 0.18); } :root[data-theme="dark"] .scrolled .header .branding .container { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5); } /* Local token overrides so descendants (logo text, nav links, the theme toggle, the action buttons) read correctly against the pill in each theme. */ .header { --heading-color: #0b1a33; --contrast-color: #0b1a33; --nav-color: #0b1a33; --nav-hover-color: #1b4d8f; --nav-btn-solid-bg: #0b1a33; --nav-btn-solid-color: #ffffff; } :root[data-theme="dark"] .header { --heading-color: #ffffff; --contrast-color: #ffffff; --nav-color: #e8ecf1; --nav-hover-color: #8ab6f0; --nav-btn-solid-bg: #ffffff; --nav-btn-solid-color: #0b1a33; } /* The theme toggle and action buttons live as the last nav items so they stay reachable at any scroll position, inside the same pill as the links. */ .navmenu .nav-theme-item { display: flex; align-items: center; padding: 0 0 0 0.5rem !important; } .navmenu .nav-theme-item .theme-toggle { margin-left: 0; } .navmenu .nav-actions-item { display: flex; align-items: center; gap: 0.5rem; padding: 0 0 0 0.85rem !important; } /* Qualified as ".navmenu a.btn-nav..." (class+tag, matching main.css's own ".navmenu a" specificity) rather than a bare class - otherwise the base template's ".navmenu a { color: var(--nav-color); font-size: 15px; ... }" outranks a plain ".btn-nav--solid" and silently wins the color, which on the solid button meant dark text on a dark pill. */ .navmenu a.btn-nav { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--nav-font); font-size: 0.85rem; font-weight: 700; line-height: 1.2; white-space: nowrap; padding: 0.5rem 1.15rem; border-radius: 999px !important; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .navmenu a.btn-nav--outline { background: transparent; border: 1px solid var(--rule); color: var(--nav-color); } .navmenu a.btn-nav--outline:hover { border-color: var(--nav-hover-color); color: var(--nav-hover-color); } .navmenu a.btn-nav--solid { background: var(--nav-btn-solid-bg); border: 1px solid var(--nav-btn-solid-bg); color: var(--nav-btn-solid-color); } .navmenu a.btn-nav--solid:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--nav-btn-solid-bg), var(--accent-color) 30%); border-color: color-mix(in srgb, var(--nav-btn-solid-bg), var(--accent-color) 30%); color: var(--nav-btn-solid-color); } @media (max-width: 1199px) { /* Inside the full-screen mobile nav panel both the toggle and the action buttons sit in their own rows, left-aligned/stacked like the links above them, rather than centered as they are in the desktop pill. */ .navmenu .nav-theme-item { padding: 8px 10px !important; } .navmenu .nav-actions-item { flex-direction: column; align-items: stretch; gap: 0.6rem; padding: 10px 10px 4px !important; } .navmenu a.btn-nav { justify-content: center; width: 100%; padding: 0.65rem 1rem; } } /* main.css: `.hero { background: linear-gradient(..., var(--surface-color) ...) }`. A `background` shorthand, so it overrode the .dark-background preset on the section. In light mode --surface-color is #fff, which meant the hero's white headline was rendering white-on-white. Pinned to ink in both themes, since the hero copy is deliberately light-on-dark. */ /* The 100px is the fixed header's height - the same clearance main.css gives .page-title (line 1042). The template's hero got away without it because min-height:100vh plus align-items:center pushed the content clear; dropping the full-viewport height to stop the hero burying the case grid below the fold removed that accident, and the header then overlapped the headline. */ .hero { background: linear-gradient(135deg, #0b1a33 0%, #122949 100%) !important; min-height: 0 !important; padding: calc(100px + 3rem) 0 4.25rem !important; position: relative; } :root:not([data-theme="dark"]) .hero { background: linear-gradient(135deg, #f7f9fc 0%, #edf4ff 100%) !important; } .hero, .hero h1, .hero .hero-description { color: #ffffff; } :root:not([data-theme="dark"]) .hero, :root:not([data-theme="dark"]) .hero h1, :root:not([data-theme="dark"]) .hero .hero-description, :root:not([data-theme="dark"]) .hero .eyebrow { color: var(--ink-900); } .hero .hero-description { opacity: 0.92; } :root:not([data-theme="dark"]) .hero .hero-description { opacity: 1; } .hero .hero-actions { margin-top: 1.5rem !important; } .hero .hero-actions .btn-rs, .hero .hero-actions .btn-outline-rs { box-shadow: 0 12px 24px rgba(11, 26, 51, 0.16); transition: transform 0.2s ease, box-shadow 0.2s ease; } .hero .hero-actions .btn-rs:hover, .hero .hero-actions .btn-outline-rs:hover { transform: translateY(-1px); box-shadow: 0 16px 28px rgba(11, 26, 51, 0.2); } :root:not([data-theme="dark"]) .hero .btn-outline-rs { border-color: var(--ink-900); color: var(--ink-900); background: rgba(255, 255, 255, 0.6); } :root:not([data-theme="dark"]) .hero .btn-outline-rs:hover { background: var(--ink-900); color: var(--contrast-color); } /* The template layers a decorative pattern over the hero; keep it very subtle against a flat ink ground rather than removing it. */ .hero::before { opacity: 0.05 !important; } @media (max-width: 767px) { .hero { padding: calc(100px + 1.5rem) 0 2.75rem !important; } } /*-------------------------------------------------------------- # Hero photo slider # A slow crossfading Swiper carousel, separate from the stat-tile boxes below # it rather than as text overlaid on top of the photos - the stat numbers stay # in their own bordered boxes so they're always legible regardless of which # photo happens to be showing. --------------------------------------------------------------*/ .hero-slider { border-radius: 18px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.16); margin-bottom: 0.9rem; box-shadow: 0 20px 45px rgba(11, 26, 51, 0.25); } .hero-slider .swiper { height: clamp(320px, 42vw, 500px); } .hero-slider .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } :root:not([data-theme="dark"]) .hero-slider { border-color: rgba(11, 26, 51, 0.08); box-shadow: 0 18px 35px rgba(20, 36, 63, 0.10); } @media (max-width: 991px) { .hero-slider .swiper { height: 220px; } } /*-------------------------------------------------------------- # Typography --------------------------------------------------------------*/ .eyebrow { display: block; font-family: var(--nav-font); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem; } .section-heading { border-bottom: 2px solid var(--ink-900); padding-bottom: 0.8rem; margin-bottom: 1.9rem; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .section-heading h2 { font-size: clamp(1.45rem, 2.8vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; margin: 0; color: var(--heading-color); } .section-heading .count { font-size: 0.85rem; color: color-mix(in srgb, var(--default-color), transparent 25%); white-space: nowrap; } /* Sections are tighter than the template's airy defaults. */ .section { padding: 4.1rem 0; } .section.light-background, .section:not(.dark-background) { background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02)); } @media (max-width: 767px) { .section { padding: 2.25rem 0; } } /*-------------------------------------------------------------- # Case grid & card (the public board) --------------------------------------------------------------*/ .case-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 1.25rem; } .case-card { position: relative; display: flex; flex-direction: column; background: var(--surface-color); border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; height: 100%; transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; box-shadow: 0 10px 20px rgba(11, 26, 51, 0.04); } .case-card:hover, .case-card:focus-within { border-color: var(--accent-color); transform: translateY(-3px); box-shadow: 0 18px 30px rgba(11, 26, 51, 0.08); } /* Urgent categories get a left edge bar rather than a coloured card - the distinction has to survive being printed in black and white. */ .case-card--urgent::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--alert); z-index: 2; } .case-card__media { position: relative; aspect-ratio: 4 / 5; background: var(--band); overflow: hidden; } .case-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Placeholder when a case has no photo - stays legible in both themes. */ .case-card__media--empty { display: flex; align-items: center; justify-content: center; color: color-mix(in srgb, var(--default-color), transparent 55%); font-size: 2.5rem; } .case-card__body { padding: 0.85rem 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.3rem; flex: 1 1 auto; } .case-card__category { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); } .case-card__name { font-size: 1.02rem; font-weight: 700; line-height: 1.25; margin: 0; color: var(--heading-color); } .case-card__name a { color: inherit; text-decoration: none; } .case-card__name a:hover { text-decoration: underline; } .case-card__meta { font-size: 0.8rem; line-height: 1.45; color: color-mix(in srgb, var(--default-color), transparent 22%); margin: 0; } .case-card__case-no { margin-top: auto; padding-top: 0.6rem; font-size: 0.72rem; letter-spacing: 0.05em; color: color-mix(in srgb, var(--default-color), transparent 40%); font-variant-numeric: tabular-nums; } /* Whole-card click target without nesting interactive elements. */ .case-card__link { position: absolute; inset: 0; z-index: 1; } /*-------------------------------------------------------------- # Case poster (the detail page) --------------------------------------------------------------*/ .case-poster { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 2.25rem; align-items: start; } @media (max-width: 900px) { .case-poster { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } } .case-poster__photo { border: 1px solid var(--rule); background: var(--band); aspect-ratio: 4 / 5; overflow: hidden; } .case-poster__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .case-poster__thumbs { display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; } .case-poster__thumbs a { width: 62px; height: 62px; border: 1px solid var(--rule); overflow: hidden; display: block; } .case-poster__thumbs a:hover { border-color: var(--accent-color); } .case-poster__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; } .case-poster__title { font-size: clamp(1.6rem, 4vw, 2.35rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 0.4rem; color: var(--heading-color); } .case-poster__subtitle { font-size: 0.95rem; color: color-mix(in srgb, var(--default-color), transparent 20%); margin-bottom: 1.25rem; } /*-------------------------------------------------------------- # Data table (physical description; reused in admin) --------------------------------------------------------------*/ .data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .data-table th, .data-table td { padding: 0.6rem 0.75rem 0.6rem 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; } /* Row labels are the most characteristic element of a public register: small, uppercase, letterspaced, and visually subordinate to the value. */ .data-table th { width: 38%; font-family: var(--nav-font); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--default-color), transparent 30%); white-space: nowrap; } .data-table td { color: var(--default-color); } .data-table tr:last-child th, .data-table tr:last-child td { border-bottom: none; } @media (max-width: 575px) { .data-table th { width: 45%; white-space: normal; } } /*-------------------------------------------------------------- # Status pills --------------------------------------------------------------*/ .status-pill { display: inline-block; padding: 0.2rem 0.55rem; border-radius: var(--radius); font-family: var(--nav-font); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; border: 1px solid currentColor; } .status-pill--ok { color: #1a6b3c; } .status-pill--warn { color: #8a5a00; } .status-pill--danger { color: var(--alert); } .status-pill--muted { color: color-mix(in srgb, var(--default-color), transparent 35%); } .status-pill--info { color: var(--accent-color); } :root[data-theme="dark"] .status-pill--ok { color: #7ddba4; } :root[data-theme="dark"] .status-pill--warn { color: #e8c07a; } /*-------------------------------------------------------------- # Flash messages --------------------------------------------------------------*/ .flash-stack { margin: 0 0 1.5rem; } .flash { display: flex; gap: 0.65rem; align-items: flex-start; padding: 0.8rem 1rem; border: 1px solid var(--rule); border-left: 4px solid var(--accent-color); border-radius: var(--radius); background: var(--surface-color); color: var(--default-color); margin-bottom: 0.65rem; font-size: 0.92rem; } .flash i { flex: 0 0 auto; line-height: 1.5; } .flash--success { border-left-color: #1a6b3c; } .flash--error { border-left-color: var(--alert); } .flash--warning { border-left-color: var(--gold); } /*-------------------------------------------------------------- # Forms --------------------------------------------------------------*/ .form-control, .form-select { border: 1px solid var(--rule); background: var(--surface-color); color: var(--default-color); padding: 0.6rem 0.75rem; font-size: 0.95rem; } /* Placeholders inherit a near-black from the base template, which is invisible against the dark surface - the board's search box read as an empty field with no hint at all. Tie it to the body colour instead so it tracks both themes. */ .form-control::placeholder, .form-select::placeholder { color: color-mix(in srgb, var(--default-color), transparent 52%); opacity: 1; /* Firefox applies its own opacity on top */ } .form-control:focus, .form-select:focus { border-color: var(--accent-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 78%) !important; background: var(--surface-color); color: var(--default-color); } .form-label { font-family: var(--nav-font); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: color-mix(in srgb, var(--default-color), transparent 25%); margin-bottom: 0.3rem; } .form-label .req { color: var(--alert); } .form-hint { display: block; font-size: 0.79rem; color: color-mix(in srgb, var(--default-color), transparent 35%); margin-top: 0.25rem; } .field-error { display: block; font-size: 0.8rem; color: var(--alert); margin-top: 0.25rem; } .form-control.is-invalid, .form-select.is-invalid { border-color: var(--alert); } /* Grouped sections within the long report form. */ .form-section { border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.4rem 1.5rem 1.6rem; margin-bottom: 1.5rem; background: var(--surface-color); } .form-section > legend, .form-section__title { font-size: 1.05rem; font-weight: 700; color: var(--heading-color); border-bottom: 1px solid var(--rule); padding-bottom: 0.6rem; margin-bottom: 1.15rem; width: 100%; float: none; } @media (max-width: 575px) { .form-section { padding: 1.1rem 1rem 1.2rem; } } /*-------------------------------------------------------------- # Buttons --------------------------------------------------------------*/ .btn-primary, .btn-rs { background: var(--accent-color); border: 1px solid var(--accent-color); color: var(--contrast-color); font-family: var(--nav-font); font-weight: 700; letter-spacing: 0.03em; padding: 0.6rem 1.35rem; border-radius: var(--radius); } .btn-primary:hover, .btn-rs:hover { background: color-mix(in srgb, var(--accent-color), var(--ink-900) 22%); border-color: color-mix(in srgb, var(--accent-color), var(--ink-900) 22%); color: var(--contrast-color); } .btn-outline-rs { background: transparent; border: 1px solid var(--accent-color); color: var(--accent-color); font-family: var(--nav-font); font-weight: 700; letter-spacing: 0.03em; padding: 0.6rem 1.35rem; border-radius: var(--radius); } .btn-outline-rs:hover { background: var(--accent-color); color: var(--contrast-color); } .btn-danger-rs { background: transparent; border: 1px solid var(--alert); color: var(--alert); font-family: var(--nav-font); font-weight: 700; padding: 0.6rem 1.35rem; border-radius: var(--radius); } .btn-danger-rs:hover { background: var(--alert); color: #ffffff; } /*-------------------------------------------------------------- # Filter bar (public board) --------------------------------------------------------------*/ .filter-bar { background: var(--band); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.15rem; margin-bottom: 1.75rem; } .filter-bar .form-control, .filter-bar .form-select { font-size: 0.88rem; padding: 0.45rem 0.6rem; } /*-------------------------------------------------------------- # Panels (sticky tip CTA, summaries) --------------------------------------------------------------*/ .panel { border: 1px solid var(--rule); border-radius: 16px; background: var(--surface-color); padding: 1.25rem 1.35rem; margin-bottom: 1.25rem; box-shadow: 0 8px 20px rgba(11, 26, 51, 0.04); } .panel--accent { border-top: 3px solid var(--accent-color); } .panel--alert { border-top: 3px solid var(--alert); } .panel__title { font-family: var(--nav-font); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.7rem; } /*-------------------------------------------------------------- # Stat tiles (dashboard / admin) --------------------------------------------------------------*/ .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 2rem; } .stat-tile { border: 1px solid var(--rule); border-top: 3px solid var(--ink-900); border-radius: var(--radius); background: var(--surface-color); padding: 1rem 1.1rem; } .stat-tile__label { font-family: var(--nav-font); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--default-color), transparent 30%); margin-bottom: 0.35rem; } .stat-tile__value { font-size: 1.85rem; font-weight: 800; line-height: 1; color: var(--heading-color); font-variant-numeric: tabular-nums; } .stat-tile--attention { border-top-color: var(--alert); } /*-------------------------------------------------------------- # Admin table --------------------------------------------------------------*/ .admin-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; background: var(--surface-color); } .admin-table thead th { font-family: var(--nav-font); font-size: 0.67rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--contrast-color); background: var(--ink-900); padding: 0.6rem 0.7rem; text-align: left; white-space: nowrap; } .admin-table tbody td { padding: 0.65rem 0.7rem; border-bottom: 1px solid var(--rule); vertical-align: middle; color: var(--default-color); } .admin-table tbody tr:hover td { background: var(--band); } .admin-table a { color: var(--accent-color); } .table-scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); } /*-------------------------------------------------------------- # Auth card --------------------------------------------------------------*/ .auth-card { max-width: 460px; margin: 0 auto; border: 1px solid var(--rule); border-top: 3px solid var(--ink-900); border-radius: var(--radius); background: var(--surface-color); padding: 1.75rem 1.85rem 2rem; } @media (max-width: 575px) { .auth-card { padding: 1.35rem 1.15rem 1.5rem; } } /*-------------------------------------------------------------- # Empty states --------------------------------------------------------------*/ .empty-state { border: 1px dashed var(--rule); border-radius: var(--radius); padding: 2.75rem 1.5rem; text-align: center; color: color-mix(in srgb, var(--default-color), transparent 25%); } .empty-state i { font-size: 2.25rem; color: color-mix(in srgb, var(--default-color), transparent 55%); display: block; margin-bottom: 0.75rem; } .empty-state h3 { font-size: 1.1rem; color: var(--heading-color); margin-bottom: 0.4rem; } /*-------------------------------------------------------------- # Pagination --------------------------------------------------------------*/ .rs-pagination { display: flex; gap: 0.35rem; flex-wrap: wrap; justify-content: center; margin-top: 2rem; } .rs-pagination a, .rs-pagination span { min-width: 2.35rem; text-align: center; padding: 0.4rem 0.65rem; border: 1px solid var(--rule); border-radius: var(--radius); color: var(--accent-color); text-decoration: none; font-size: 0.87rem; font-variant-numeric: tabular-nums; } .rs-pagination a:hover { border-color: var(--accent-color); } .rs-pagination .current { background: var(--ink-900); border-color: var(--ink-900); color: #ffffff; font-weight: 700; } .rs-pagination .disabled { color: color-mix(in srgb, var(--default-color), transparent 60%); } /*-------------------------------------------------------------- # Print (the shareable poster) # The whole point of a missing-person poster is that it gets printed and put on # a wall, so this is a real deliverable, not an afterthought. Everything except # the poster body is removed and colour is forced to black on white. --------------------------------------------------------------*/ @media print { .header, .footer, .page-title, .topbar, .scroll-top, #preloader, .no-print, .case-poster__thumbs, .panel, .filter-bar, .flash-stack { display: none !important; } :root, :root[data-theme="dark"] { --background-color: #ffffff; --default-color: #000000; --heading-color: #000000; --surface-color: #ffffff; --contrast-color: #ffffff; --band: #ffffff; --rule: #999999; --gold: #000000; --accent-color: #000000; } body { background: #ffffff !important; color: #000000 !important; font-size: 11pt; } .main { padding: 0 !important; margin: 0 !important; } .section { padding: 0 !important; } .case-poster { grid-template-columns: 38% 1fr; gap: 1.25rem; } .case-poster__photo { border: 1px solid #000000; } .case-poster__title { font-size: 26pt; } /* Printed posters lose the URL context, so surface it explicitly. */ .print-footer { display: block !important; margin-top: 1.25rem; padding-top: 0.5rem; border-top: 2px solid #000000; font-size: 9pt; } a[href]::after { content: ""; } .data-table th, .data-table td { padding: 0.3rem 0.5rem 0.3rem 0; } @page { margin: 14mm; } } .print-footer { display: none; } /*-------------------------------------------------------------- # Footer column alignment # The template top-aligns the brand column and the nav column as a # single row, so the nav headings line up with the logo rather than # with the description text beneath it. Nudge the nav column down by # the logo's rendered height (94px) plus its mb-4 margin (24px) so # "Cases" / "Your Account" / "About" line up with the description # instead. Desktop only (>=992px, the lg breakpoint) - below that the # columns stack, where main.css already sets its own margin-top. --------------------------------------------------------------*/ @media (min-width: 992px) { .footer-16 .footer-nav-wrapper { margin-top: 118px; } } /*-------------------------------------------------------------- # Cultural motif layer # Rwandan visual identity: Imigongo geometric wall-art bands and an # Agaseke basket-weave texture, used as accents and watermarks only. # Built as single-colour CSS masks (assets/img/patterns/*.svg) so # they recolour automatically off the existing tokens in both themes # - never a hardcoded colour in this section. # # The watermark below runs site-wide, across every .section band of # every public page. The admin area opts out (admin/*.php now set # $bodyClass = 'admin-page' for exactly this) since those are dense # data screens, not the public-facing register. The more decorative # pieces further down (section-heading rule, hero frame, sun mark, # panel weave corner, footer rule) stay specific to index.php, scoped # under .index-page (set by index.php's $bodyClass). --------------------------------------------------------------*/ /* Sitewide watermark - every .section band and the footer, every public page. The footer is already position:relative (Bootstrap's utility class in footer.php), so it only needs the content-layer + pseudo rules. */ body:not(.admin-page) .section { position: relative; } body:not(.admin-page) .section > .container, body:not(.admin-page) footer#footer > .container, body:not(.admin-page) footer#footer > .footer-bottom { position: relative; z-index: 1; } body:not(.admin-page) .section::before, body:not(.admin-page) footer#footer::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: none; background-color: var(--heading-color); opacity: 0.045; -webkit-mask-image: url("../img/patterns/imigongo-diamond.svg"); mask-image: url("../img/patterns/imigongo-diamond.svg"); -webkit-mask-repeat: repeat; mask-repeat: repeat; -webkit-mask-size: 92px 92px; mask-size: 92px 92px; } /* Dark bands (hero, CTA strips) get the watermark in --contrast-color instead, since --heading-color is itself near-white there. */ body:not(.admin-page) .section.dark-background::before { background-color: var(--contrast-color); opacity: 0.05; } @media (max-width: 767px) { body:not(.admin-page) .section::before, body:not(.admin-page) footer#footer::before { -webkit-mask-size: 60px 60px; mask-size: 60px 60px; } } @media print { .section::before, footer#footer::before { display: none; } } /* Section-heading rule -> thin Imigongo triangle band, reused on every section of the homepage instead of the plain solid rule. */ .index-page .section-heading { border-bottom: none; padding-bottom: 1.1rem; position: relative; } .index-page .section-heading::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background-color: var(--gold); -webkit-mask-image: url("../img/patterns/imigongo-strip.svg"); mask-image: url("../img/patterns/imigongo-strip.svg"); -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-size: 28px 10px; mask-size: 28px 10px; } /* Sun mark beside the hero eyebrow label - a minimal radiating mark, not a reproduction of the flag, in the same gold the eyebrow text already uses (currentColor keeps it in sync with the inline style on the span). */ .index-page .hero .eyebrow { display: flex; align-items: center; gap: 0.5rem; } .index-page .sun-mark { display: inline-block; width: 15px; height: 15px; flex: none; background-color: currentColor; -webkit-mask-image: url("../img/patterns/sun-mark.svg"); mask-image: url("../img/patterns/sun-mark.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } /* Photo slider frame: thin Imigongo ribbons across the top and bottom edges instead of the plain hairline border, so the slider reads as framed. */ .index-page .hero-slider { position: relative; } .index-page .hero-slider::before, .index-page .hero-slider::after { content: ""; position: absolute; left: 0; right: 0; height: 9px; background-color: var(--gold); -webkit-mask-image: url("../img/patterns/imigongo-strip.svg"); mask-image: url("../img/patterns/imigongo-strip.svg"); -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-size: 26px 9px; mask-size: 26px 9px; z-index: 2; } .index-page .hero-slider::before { top: 0; } .index-page .hero-slider::after { bottom: 0; } /* About panels: a faint Agaseke weave texture tucked in the corner. Low enough opacity that it never competes with the panel text. */ .index-page #about .panel { position: relative; overflow: hidden; } .index-page #about .panel::after { content: ""; position: absolute; right: -8px; bottom: -8px; width: 44px; height: 44px; opacity: 0.15; background-color: var(--terracotta); -webkit-mask-image: url("../img/patterns/weave-tile.svg"); mask-image: url("../img/patterns/weave-tile.svg"); -webkit-mask-repeat: repeat; mask-repeat: repeat; -webkit-mask-size: 11px 11px; mask-size: 11px 11px; pointer-events: none; } /* Case cards stay mostly plain on purpose - they carry real people's photos and shouldn't be over-decorated - but the hover state picks up the same earthy accent as the rest of the page instead of the generic blue. */ .index-page .case-card:hover, .index-page .case-card:focus-within { border-color: var(--terracotta); } /* Footer top edge, only present when the footer is reached from the homepage (the shared footer.php has no hook of its own to scope this). ::after, not ::before - ::before on the footer is already the sitewide watermark above. */ .index-page footer#footer::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px; z-index: 1; background-color: var(--gold); -webkit-mask-image: url("../img/patterns/imigongo-strip.svg"); mask-image: url("../img/patterns/imigongo-strip.svg"); -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-size: 24px 8px; mask-size: 24px 8px; }