/* * Het Antiquariaat — Kleurthema 2026 * Trendkleuren 2026: Cloud Dancer · Olijfgroen · Sahara Vibe · Bordeaux * * Gebruik: voeg onderstaande regel toe in de van elke pagina, * NA de bestaande brand.css: * */ /* ── Lettertypes ──────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=Lato:wght@300;400;700&display=swap'); /* ── Variabelen ───────────────────────────────────────────────── */ :root { --aq-creme: #F0EDE6; /* Cloud Dancer — Pantone 2026 */ --aq-creme-warm: #E8E0D0; /* iets donkerder creme */ --aq-groen: #4A5E35; /* Olijfgroen / Mosgroen 2026 */ --aq-groen-donker:#344427; /* hover / footer groen */ --aq-goud: #B5905A; /* Sahara Vibe — LAB 2026 */ --aq-goud-donker: #8C6B38; /* hover goud */ --aq-bordeaux: #6B2B2B; /* Bordeauxrood 2026 */ --aq-bruin: #2C1F14; /* Donkerbruin — tekst */ --aq-wit: #FAF8F4; /* Pagina achtergrond */ --aged-paper: #31333; --leather-brown: #DCF7F6; --ink-black: #313333; --gold-leaf: #313333; --back-book: #33a4b0; } /* ── Basis ────────────────────────────────────────────────────── */ body { background-color: var(--aq-wit) !important; color: var(--aq-bruin) !important; font-family: 'Lato', Georgia, serif !important; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'Playfair Display', Georgia, serif !important; color: var(--aq-groen-donker) !important; } /* ── Navigatiebalk ────────────────────────────────────────────── */ .navbar, nav.navbar { background-color: var(--aq-groen) !important; border-bottom: 3px solid var(--aq-goud) !important; } .navbar-brand, .navbar-brand:hover, .navbar-brand:focus { color: var(--aq-creme) !important; font-family: 'Playfair Display', Georgia, serif !important; font-size: 1.8rem !important; letter-spacing: 0.04em !important; text-decoration: none !important; margin-top: -2px; } .navbar-brand:focus, .navbar-brand:hover { color: var(--aq-goud) !important; text-decoration: none !important; } .navbar-nav .nav-link, .navbar-nav > li > a { color: var(--aq-creme) !important; font-family: 'Lato', sans-serif !important; font-weight: 300 !important; letter-spacing: 0.03em !important; transition: color 0.2s ease !important; } .navbar-nav .nav-link:hover, .navbar-nav > li > a:hover, .navbar-nav .nav-link:focus { color: var(--aq-goud) !important; text-decoration: none !important; } .navbar-nav .active > a, .navbar-nav .active > .nav-link { color: var(--aq-goud) !important; font-weight: 700 !important; } /* Dropdown menu */ .dropdown-menu { background-color: var(--aq-groen-donker) !important; border: 1px solid var(--aq-goud) !important; border-radius: 4px !important; } .dropdown-item, .dropdown-menu > li > a { color: var(--aq-creme) !important; font-family: 'Lato', sans-serif !important; } .dropdown-item:hover, .dropdown-menu > li > a:hover { background-color: var(--aq-groen) !important; color: var(--aq-goud) !important; } /* Hamburger icoon */ .navbar-toggler-icon { filter: brightness(10) !important; } .navbar-toggler { border-color: var(--aq-goud) !important; } /* ── Hero / Jumbotron ─────────────────────────────────────────── */ .jumbotron, .hero, section.hero { background-color: var(--aq-creme-warm) !important; border-bottom: 2px solid var(--aq-goud) !important; color: var(--aq-bruin) !important; } /* ── Knoppen ──────────────────────────────────────────────────── */ .btn-primary { background-color: var(--aq-groen) !important; border-color: var(--aq-groen) !important; color: var(--aq-creme) !important; font-family: 'Lato', sans-serif !important; letter-spacing: 0.04em !important; } .btn-primary:hover, .btn-primary:focus { background-color: var(--aq-groen-donker) !important; border-color: var(--aq-goud) !important; } .btn-secondary { background-color: var(--aq-goud) !important; border-color: var(--aq-goud-donker) !important; color: var(--aq-bruin) !important; } .btn-secondary:hover { background-color: var(--aq-goud-donker) !important; color: var(--aq-creme) !important; } .btn-outline-primary { color: var(--aq-groen) !important; border-color: var(--aq-groen) !important; } .btn-outline-primary:hover { background-color: var(--aq-groen) !important; color: var(--aq-creme) !important; } /* ── Links ────────────────────────────────────────────────────── */ a { color: var(--aq-groen) !important; transition: color 0.2s ease !important; } a:hover { color: var(--aq-bordeaux) !important; text-decoration: underline !important; } /* ── Kaarten / Cards ──────────────────────────────────────────── */ .card { background-color: var(--aq-creme) !important; border: 1px solid var(--aq-goud) !important; border-radius: 6px !important; box-shadow: 0 2px 8px rgba(44, 31, 20, 0.08) !important; } .card-header { background-color: var(--aq-groen) !important; color: var(--aq-creme) !important; font-family: 'Playfair Display', serif !important; border-bottom: 1px solid var(--aq-goud) !important; } .card-title { color: var(--aq-groen-donker) !important; font-family: 'Playfair Display', serif !important; } /* ── Accentlijn boven secties ─────────────────────────────────── */ section, .section { border-top: 1px solid var(--aq-creme-warm) !important; } /* ── Tabel ────────────────────────────────────────────────────── */ .table thead th, table thead th { background-color: var(--aq-groen) !important; color: var(--aq-creme) !important; border-color: var(--aq-goud) !important; } .table-striped tbody tr:nth-of-type(odd) { background-color: var(--aq-creme) !important; } .table-hover tbody tr:hover { background-color: var(--aq-creme-warm) !important; } /* ── Badge / Label ────────────────────────────────────────────── */ .badge-primary, .badge.bg-primary { background-color: var(--aq-groen) !important; color: var(--aq-creme) !important; } .badge-warning, .badge.bg-warning { background-color: var(--aq-goud) !important; color: var(--aq-bruin) !important; } .badge-danger, .badge.bg-danger { background-color: var(--aq-bordeaux) !important; color: var(--aq-creme) !important; } /* ── "Net binnen" markering ───────────────────────────────────── */ .new, .nieuw, .net-binnen { color: var(--aq-bordeaux) !important; font-weight: 700 !important; } /* ── Footer ───────────────────────────────────────────────────── */ footer, .footer { background-color: var(--aq-groen-donker) !important; color: var(--aq-creme-warm) !important; border-top: 3px solid var(--aq-goud) !important; } footer a, .footer a { color: var(--aq-goud) !important; } footer a:hover, .footer a:hover { color: var(--aq-creme) !important; } /* ── Formulieren ──────────────────────────────────────────────── */ .form-control:focus { border-color: var(--aq-goud) !important; box-shadow: 0 0 0 3px rgba(181, 144, 90, 0.25) !important; } /* ── Paginering ───────────────────────────────────────────────── */ .pagination .page-item.active .page-link { background-color: var(--aq-groen) !important; border-color: var(--aq-groen) !important; color: var(--aq-creme) !important; } .pagination .page-link { color: var(--aq-groen) !important; } .pagination .page-link:hover { background-color: var(--aq-creme-warm) !important; color: var(--aq-groen-donker) !important; } /* ── Decoratieve goudlijn onder titels ────────────────────────── */ /* h1::after, h2::after { content: ''; display: block; width: 48px; height: 2px; background-color: var(--aq-goud); margin-top: 8px; } */