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.

:root {
    --hb-blue:#2E78B7;
    --hb-green:#A9CF38;
    --hb-light:#F6F9FC;
}

/* HERO */

.hb-hero {

    min-height:420px;

    background-image:
        linear-gradient(
            rgba(0,0,0,.45),
            rgba(0,0,0,.45)
        ),
        url("/images/0/0b/Bocholt-banner.jpg");

    background-size:cover;
    background-position:center;

    border-radius:60px 15px 60px 15px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:40px;
}

.hb-hero-content{
    text-align:center;
    color:white;
    padding:2rem;
}

.hb-hero-content h1{
    color:white;
    font-size:4rem;
    margin-bottom:15px;
}

.hb-hero-content p{
    color:white;
    font-size:1.4rem;
    max-width:900px;
    margin:auto;
}

/* THEMA'S */

.hb-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(320px,1fr));

    gap:25px;

    margin-top:30px;
}

.hb-card{

    background:white;

    border-radius:24px;

    padding:30px;

    border-top:5px solid var(--hb-blue);

    box-shadow:
        0 4px 12px rgba(0,0,0,.08);

    transition:.2s;
}

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

.hb-icon{
    font-size:50px;
    margin-bottom:15px;
}

.hb-card h3{
    margin-top:0;
    margin-bottom:15px;
}

.hb-card h3 a{
    color:var(--hb-blue);
    text-decoration:none;
}

/* ONTDEK BOCHOLT */

.hb-discover{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(220px,1fr));

    gap:15px;

    margin-top:25px;
}

.hb-discover div{

    background:#EAF3F8;

    padding:20px;

    border-radius:18px;

    text-align:center;

    font-weight:600;
}

/* MOBIEL */

@media screen and (max-width:768px){

    .hb-hero-content h1{
        font-size:2.5rem;
    }

    .hb-hero-content p{
        font-size:1rem;
    }

}