MediaWiki:Citizen.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* Bocholt kleuren */

:root {
    --hb-blue: #2E78B7;
    --hb-darkblue: #235E8F;
    --hb-green: #A9CF38;
    --hb-light: #f5f7f9;
    --hb-soft: #EAF3F8;
}

/* Hero */

.hb-hero {
    text-align:center;
    background:var(--hb-light);
    border-radius:32px;
    padding:3rem;
    margin-bottom:3rem;
}

.hb-hero h1 {
    font-size:3rem;
    color:var(--hb-blue);
    margin-bottom:0.5rem;
}

.hb-subtitle {
    font-size:1.2rem;
    max-width:800px;
    margin:auto;
}

/* Kaarten */

.hb-cards {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:1.5rem;
    margin-top:2rem;
}

.hb-card {
    background:white;
    border-radius:24px;
    padding:2rem;
    box-shadow:0 2px 12px rgba(0,0,0,0.06);
    border-top:5px solid var(--hb-blue);
    transition:all .2s ease;
}

.hb-card:hover {
    transform:translateY(-4px);
}

.hb-card h3 {
    color:var(--hb-blue);
}

/* Ontdek Bocholt */

.hb-feature {
    background:var(--hb-soft);
    padding:2rem;
    border-radius:24px;
    margin-top:3rem;
}

/* Kolommen */

.hb-columns {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2rem;
    margin-top:3rem;
}

@media (max-width:900px) {
    .hb-columns {
        grid-template-columns:1fr;
    }
}