/* SiteVerified Ghana — Lightweight stylesheet. No framework, no build step. */ :root { --sv-green: #0d4d3c; --sv-green-dark: #083528; --sv-gold: #c8952b; --sv-bg: #f7f6f2; --sv-text: #1e2422; --sv-muted: #5c6b66; --sv-border: #dfe3e0; --sv-white: #ffffff; --sv-danger: #a3312a; --sv-success: #1e6b47; --radius: 8px; /* Sampled from the logo mark — used on the public marketing page for a brand-matched look */ --sv-navy: #0b2544; --sv-navy-dark: #071a30; --sv-logo-green: #3f9130; --sv-steel: #78838c; /* Dashboard-only surface tokens (cards, tables, inputs, nav highlight). Light values here match what every consumer used to hard-code, so this introduction changes nothing visually — only [data-theme="dark"] below actually repaints anything. */ --sv-surface: #ffffff; --sv-surface-alt: #f0efe9; --sv-accent-tint: #eef4f0; --sv-input-bg: #ffffff; font-size: 16px; } /* ===================================================================== DARK THEME — the dashboard's default look. Scoped to [data-theme="dark"] on , which header.php only ever sets for a signed-in user (see Auth::theme()); the public marketing site and the auth screens never carry this attribute, so they keep their existing fixed styling untouched regardless of a user's dashboard preference. Because almost every dashboard rule above already reads its colour from one of these custom properties, redefining the handful below recolours the sidebar, tables, forms, cards, tabs, links and buttons in one pass; the few components that use a literal one-off colour (badges, alerts, chart marks) get their own explicit override further down. ===================================================================== */ :root[data-theme="dark"] { color-scheme: dark; --sv-green: #34d399; --sv-green-dark: #2aa374; --sv-gold: #e0a83c; --sv-bg: #0f1613; --sv-text: #e8ece9; --sv-muted: #93a19a; --sv-border: #29352f; --sv-white: var(--sv-surface); --sv-danger: #f2685f; --sv-success: #33c281; --sv-surface: #17211d; --sv-surface-alt: #1e2a24; --sv-accent-tint: rgba(52, 211, 153, .14); --sv-input-bg: #121b17; } * { box-sizing: border-box } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--sv-bg); color: var(--sv-text); line-height: 1.55; } a { color: var(--sv-green); text-decoration: none } a:hover { text-decoration: underline } img { max-width: 100%; display: block } .container { max-width: 1100px; margin: 0 auto; padding: 0 20px } /* Navbar */ .navbar { background: var(--sv-surface); color: var(--sv-green); padding: 14px 0; border-bottom: 1px solid var(--sv-border) } /* Dashboard shell: the header stays fixed at the top of the viewport so it never scrolls away, matching the fixed sidebar below (see .app-dashboard .sidebar). Only pages that render the sidebar get this treatment — the public marketing site and auth screens keep the header in normal flow. */ body.app-dashboard .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000 } body.app-dashboard .app-shell { margin-top: 65px } .navbar .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px } .navbar .brand { display: flex; align-items: center; color: var(--sv-green); font-weight: 700; font-size: 1.2rem; letter-spacing: .2px } .navbar .brand span { color: var(--sv-gold) } .brand-logo { height: 34px; width: auto; display: block } .auth-logo { display: block; height: 64px; width: auto; margin: 0 auto 18px } .navbar nav a { color: var(--sv-green); margin-left: 18px; font-size: .95rem } .navbar nav a.btn { background: var(--sv-gold); color: #241a04; padding: 4px 6px; border-radius: var(--radius); margin-left: 18px } /* Hero — navy-to-green diagonal, matching the logo's shield (navy) + roof (green) */ .hero { position: relative; overflow: hidden; padding: 60px 0 50px; background: linear-gradient(135deg, var(--sv-navy) 0%, var(--sv-navy-dark) 55%, #0a2e22 100%); color: #fff } .hero::before { content: ''; position: absolute; width: 620px; height: 620px; background: radial-gradient(circle, rgba(63, 145, 48, .35) 0%, transparent 70%); top: -220px; left: -160px; z-index: 0; pointer-events: none } .hero h1 { font-size: 2rem; line-height: 1.25; margin: 0 0 16px } .hero p { color: #d8e0ea; font-size: 1.05rem } .hero .cta { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap } .hero-grid { display: flex; align-items: center; gap: 44px; position: relative; z-index: 1 } .hero-copy { flex: 1 1 480px; min-width: 0 } .hero-media { flex: 1 1 420px; min-width: 0 } .hero-media img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 20px 50px rgba(0, 0, 0, .45) } @media(max-width:860px) { .hero-grid { flex-direction: column-reverse } /* flex-basis is a main-axis measurement, and column-reverse just rotated the main axis from horizontal to vertical — without this reset, the 480px/420px basis meant for desktop COLUMN WIDTHS gets reused as a minimum HEIGHT for each stacked block, reserving far more vertical space than the actual image/copy content needs and leaving a large blank gap between them. */ .hero-copy, .hero-media { flex: 1 1 auto } .hero h1 { font-size: 1.6rem } } @media(max-width:560px) { .hero { padding: 32px 0 36px } .hero-grid { gap: 20px } .hero::before { width: 320px; height: 320px; top: -110px; left: -100px } .hero h1 { font-size: 1.35rem; margin-bottom: 12px } .hero p { font-size: .96rem } .hero .cta { margin-top: 20px } .hero-media img { border-radius: 10px } } .hero-watermark { position: absolute; top: 50%; right: -60px; transform: translateY(-50%); width: 520px; max-width: 60vw; height: auto; opacity: .08; filter: brightness(0) invert(1); pointer-events: none; z-index: 0 } /* Section heading accent — public marketing sections only */ #problem h2, #solution h2, #pricing h2, #where h2, #cta-final h2 { position: relative; padding-bottom: 14px } #problem h2::after, #solution h2::after, #pricing h2::after, #where h2::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 56px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--sv-navy), var(--sv-logo-green)) } #cta-final h2::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 56px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--sv-logo-green), var(--sv-gold)) } /* Center all body copy in these sections/cards — hero is intentionally left out */ #problem, #solution, #pricing, #where { text-align: center } #problem .section-lead, #solution .section-lead, #pricing .section-lead, #where .section-lead { margin-left: auto; margin-right: auto } .location-chips { justify-content: center } /* Card icons (problem / solution / pricing sections) */ .card-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(13, 77, 60, .08); margin: 0 auto 14px } .card-icon svg { width: 24px; height: 24px; color: var(--sv-green) } .card-icon img { width: 24px; height: 24px; object-fit: contain } /* Buttons attached to a body section (any layout — not just the CTA banner) */ .section-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px } #problem .card-icon { background: rgba(11, 37, 68, .08) } #problem .card-icon svg { color: var(--sv-navy) } #solution .card-icon, #pricing .card-icon { background: rgba(63, 145, 48, .10) } #solution .card-icon svg, #pricing .card-icon svg { color: var(--sv-logo-green) } /* Featured pricing tier */ .card-featured { border: 2px solid var(--sv-logo-green); position: relative; box-shadow: 0 12px 30px rgba(11, 37, 68, .14) } .card-featured::before { content: 'Most popular'; position: absolute; top: -13px; left: 22px; background: var(--sv-logo-green); color: #fff; font-size: .7rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; letter-spacing: .3px } /* Location chips — "Where we operate" */ .location-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px } .location-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-size: .88rem; font-weight: 600 } .location-chip svg { width: 15px; height: 15px; flex-shrink: 0 } .location-chip.active { background: rgba(11, 37, 68, .08); color: var(--sv-navy) } .location-chip.upcoming { background: #f0efe9; color: var(--sv-steel) } .location-chip small { font-weight: 500; opacity: .75 } .btn { display: inline-block; padding: 11px 22px; border-radius: var(--radius); font-weight: 600; border: 2px solid transparent; cursor: pointer; font-size: .95rem } .btn-primary { background: var(--sv-gold); color: #241a04 } /* Outline button. Was hard-coded to white, which is correct on the hero and invisible everywhere else the app uses it -- in light theme that meant white text on a white card, so "Export CSV", "Open", "Edit" and every settings action simply vanished. --sv-text resolves to near-white in dark and near-black in light, so this keeps the dark app looking exactly as it did while making the light one legible. The hero is dark whatever the theme, so it keeps white explicitly below. */ .btn-outline { background: transparent; color: var(--sv-text); border-color: var(--sv-text) } .btn-outline:hover { color: var(--sv-green); border-color: var(--sv-green); text-decoration: none } .hero .btn-outline { color: #fff; border-color: #fff } .hero .btn-outline:hover { color: #fff; border-color: #fff; opacity: .85 } .btn-solid { background: var(--sv-green); color: #fff } .btn-solid:hover { background: var(--sv-green-dark) } .btn-danger { background: var(--sv-danger); color: #fff } /* Sections */ section { padding: 48px 0 } h2 { font-size: 1.5rem; margin-bottom: 8px } .section-lead { color: var(--sv-muted); max-width: 640px; margin-bottom: 28px } #cta-final { background: linear-gradient(135deg, var(--sv-navy) 0%, var(--sv-navy-dark) 100%); color: #fff } #cta-final h2 { color: #fff } #cta-final .section-lead { color: #cfd8e3 } #cta-final+.footer { margin-top: 0 } /* Same reasoning as the CTA-section case above, applied to every dashboard/ portal page: .main already carries its own bottom padding, so the footer's generic 50px margin-top on top of that was the real source of the "gap before the footer" — not .app-shell's height, which is already content-driven (see .app-shell above). General-sibling (~), not adjacent-sibling (+): some pages put a