/* ============================================================ Jaarbeurs Lievegem — Ticketsysteem frontend template Eén centrale plek voor de huisstijl. Pas de variabelen hieronder aan met de exacte merkkleuren/fonts. Gebouwd bovenop Bootstrap 5 (CDN, zie van elke pagina). ============================================================ */ :root { /* --- Merkkleuren (pas hier aan) --- */ --jl-ink: #1c1815; /* logo-zwart, tekst, navigatie */ --jl-ink-soft: #574d44; /* secundaire tekst */ --jl-orange: #CC5910; /* primaire actie / accent */ --jl-orange-dark: #822109; /* hover op primair */ --jl-amber: #EBA327; /* highlights, badges */ --jl-cream: #FFF7E8; /* warme achtergrond */ --jl-paper: #ffffff; /* kaarten / panelen */ --jl-line: #e8dfce; /* hairline-randen */ --jl-green: #1D7151; /* --- Semantisch (scan-uitkomsten) --- */ --jl-ok: #1D7151; --jl-ok-bg: #e7f4ec; --jl-no: #c5392a; --jl-no-bg: #fbe9e6; --jl-warn: #b8791b; --jl-warn-bg: #fbf1dd; /* --- Typografie --- */ /* Koppen bewust in het systeemlettertype (Segoe UI op Windows), geen webfont */ --jl-display: system-ui, sans-serif; --jl-body: "Lato", system-ui, sans-serif; --jl-mono: "Josefin Sans", ui-monospace, monospace; /* Bootstrap-variabelen mee overschrijven waar het kan */ --bs-body-font-family: var(--jl-body); --bs-body-color: var(--jl-ink); --bs-body-bg: var(--jl-cream); --bs-border-radius: 0.9rem; --bs-link-color: var(--jl-orange-dark); --bs-link-hover-color: var(--jl-orange); } /* ---------- Basis ---------- */ body { background: var(--jl-cream); color: var(--jl-ink); font-family: var(--jl-body); } h1, h2, h3, .display-font { font-family: var(--jl-display); font-weight: 800; letter-spacing: -0.01em; } .eyebrow { font-family: var(--jl-body); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--jl-orange-dark); } .text-soft { color: var(--jl-ink-soft); } .mono { font-family: var(--jl-mono); } /* ---------- Knoppen ---------- */ .btn-brand { --bs-btn-bg: var(--jl-orange); --bs-btn-border-color: var(--jl-orange); --bs-btn-hover-bg: var(--jl-orange-dark); --bs-btn-hover-border-color: var(--jl-orange-dark); --bs-btn-active-bg: var(--jl-orange-dark); --bs-btn-active-border-color: var(--jl-orange-dark); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-bg: var(--jl-orange); --bs-btn-disabled-border-color: var(--jl-orange); --bs-btn-disabled-color: #fff; font-weight: 600; } .btn-outline-brand { --bs-btn-color: var(--jl-orange-dark); --bs-btn-border-color: var(--jl-orange); --bs-btn-hover-bg: var(--jl-orange); --bs-btn-hover-border-color: var(--jl-orange); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--jl-orange-dark); --bs-btn-active-border-color: var(--jl-orange-dark); font-weight: 600; } .btn-ink { --bs-btn-bg: var(--jl-ink); --bs-btn-border-color: var(--jl-ink); --bs-btn-hover-bg: #000; --bs-btn-hover-border-color: #000; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; font-weight: 600; } /* ---------- Hero ---------- */ .jl-hero { background: var(--jl-green); border-bottom: 1px solid var(--jl-line); } .jl-hero h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 0.98; color: var(--jl-paper); } .jl-hero .text-soft { color: var(--jl-paper); } .jl-hero .eyebrow { color: var(--jl-cream); } .jl-factbar { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; font-weight: 600; color: var(--jl-paper); } .jl-factbar span { white-space: nowrap; } /* ---------- Kaarten ---------- */ .jl-card { background: var(--jl-paper); border: 1px solid var(--jl-line); border-radius: var(--bs-border-radius); } /* ---------- Ticket-stub motief (signatuur) ---------- */ .ticket { position: relative; background: var(--jl-paper); border: 1px solid var(--jl-line); border-radius: 16px; overflow: hidden; } .ticket.is-selected { border-color: var(--jl-orange); box-shadow: 0 0 0 3px rgba(230,84,29,0.15); } .ticket .ticket-top { padding: 1.25rem 1.25rem 1rem; } .ticket .ticket-perf { position: relative; border-top: 2px dashed var(--jl-line); } /* halve cirkels die de perforatie afbakenen */ .ticket .ticket-perf::before, .ticket .ticket-perf::after { content: ""; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--jl-cream); } .ticket .ticket-perf::before { left: -11px; } .ticket .ticket-perf::after { right: -11px; } .ticket .ticket-bottom { padding: 0.9rem 1.25rem 1.25rem; display: flex; align-items: center; justify-content: space-between; } .ticket .price { font-family: var(--jl-display); font-weight: 800; font-size: 1.6rem; } .ticket .price small { font-weight: 600; font-size: 0.85rem; color: var(--jl-ink-soft); } /* ---------- Aantal-stepper ---------- */ .stepper { display: inline-flex; align-items: center; gap: 0; } .stepper button { width: 34px; height: 34px; border: 1px solid var(--jl-line); background: var(--jl-paper); color: var(--jl-ink); font-weight: 700; line-height: 1; } .stepper button:disabled { opacity: .35; cursor: not-allowed; } .stepper button:first-child { border-radius: 8px 0 0 8px; } .stepper button:last-child { border-radius: 0 8px 8px 0; } .stepper output { min-width: 38px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-top: 1px solid var(--jl-line); border-bottom: 1px solid var(--jl-line); font-weight: 700; } /* ---------- QR-blok ---------- */ .qr-box { border: 1px solid var(--jl-line); border-radius: 14px; background: var(--jl-paper); padding: 1rem; display: inline-block; } .qr-box svg { display: block; } /* ---------- Badges / statussen ---------- */ .jl-badge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: 999px; border: 1px solid transparent; } .jl-badge .dot { width: 7px; height: 7px; border-radius: 50%; } .jl-badge.ok { background: var(--jl-ok-bg); color: var(--jl-ok); } .jl-badge.ok .dot { background: var(--jl-ok); } .jl-badge.warn { background: var(--jl-warn-bg); color: var(--jl-warn); } .jl-badge.warn .dot { background: var(--jl-warn); } .jl-badge.no { background: var(--jl-no-bg); color: var(--jl-no); } .jl-badge.no .dot { background: var(--jl-no); } .jl-badge.neutral { background: #f1ece2; color: var(--jl-ink-soft); } .jl-badge.neutral .dot { background: var(--jl-ink-soft); } /* ---------- Stat-tegels (admin) ---------- */ .stat { background: var(--jl-paper); border: 1px solid var(--jl-line); border-radius: var(--bs-border-radius); padding: 1.25rem 1.4rem; height: 100%; } .stat .label { font-size: 0.8rem; font-weight: 600; color: var(--jl-ink-soft); text-transform: uppercase; letter-spacing: 0.06em; } .stat .value { font-family: var(--jl-display); font-weight: 800; font-size: 2.1rem; line-height: 1.1; margin-top: 0.35rem; } .stat .sub { font-size: 0.85rem; color: var(--jl-ink-soft); } /* ---------- Tabellen ---------- */ .table thead th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--jl-ink-soft); border-bottom-color: var(--jl-line); } .table > :not(caption) > * > * { border-bottom-color: var(--jl-line); } /* ---------- Scanner ---------- */ .scan-stage { aspect-ratio: 1 / 1; max-width: 360px; margin-inline: auto; border-radius: 18px; border: 2px dashed var(--jl-line); background: #fff; display: grid; place-items: center; position: relative; overflow: hidden; } .scan-stage .reticle { width: 62%; aspect-ratio: 1; border: 3px solid var(--jl-orange); border-radius: 14px; opacity: 0.85; } .scan-result { border-radius: 16px; padding: 1.5rem; text-align: center; border: 1px solid var(--jl-line); background: var(--jl-paper); } .scan-result[data-state="ok"] { background: var(--jl-ok-bg); border-color: var(--jl-ok); } .scan-result[data-state="no"] { background: var(--jl-no-bg); border-color: var(--jl-no); } .scan-result[data-state="warn"] { background: var(--jl-warn-bg); border-color: var(--jl-warn); } .scan-result .verdict { font-family: var(--jl-display); font-weight: 800; font-size: 1.8rem; line-height: 1.05; } .scan-result[data-state="ok"] .verdict { color: var(--jl-ok); } .scan-result[data-state="no"] .verdict, .scan-result[data-state="warn"] .verdict { color: var(--jl-no); } .scan-result[data-state="warn"] .verdict { color: var(--jl-warn); } .scan-result .icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 0.75rem; font-size: 2rem; color: #fff; } .scan-result[data-state="ok"] .icon { background: var(--jl-ok); } .scan-result[data-state="no"] .icon { background: var(--jl-no); } .scan-result[data-state="warn"] .icon { background: var(--jl-warn); } /* ---------- Footer ---------- */ .jl-footer { background: var(--jl-ink); color: #cfc6ba; } .jl-footer a { color: #efe8dd; text-decoration: none; } .jl-footer a:hover { color: #fff; } /* logo-zwart -> wit maken voor de donkere footer */ .jl-footer .footer-logo { height: 22px; filter: brightness(0) invert(1); opacity: 0.95; } /* ---------- Tekstpagina's (privacy, cookies: inhoud uit de editor) ---------- */ .jl-tekst { line-height: 1.65; overflow-wrap: anywhere; } .jl-tekst h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.05; margin-bottom: 1rem; } .jl-tekst h2 { font-size: 1.45rem; margin-top: 2.25rem; margin-bottom: 0.75rem; } .jl-tekst h3 { font-size: 1.1rem; margin-top: 1.75rem; margin-bottom: 0.5rem; } .jl-tekst h1:first-child, .jl-tekst h2:first-child, .jl-tekst h3:first-child { margin-top: 0; } .jl-tekst p, .jl-tekst li { color: var(--jl-ink-soft); } .jl-tekst strong { color: var(--jl-ink); } .jl-tekst a:not(.btn) { color: var(--jl-orange-dark); } .jl-tekst a:not(.btn):hover { color: var(--jl-orange); } .jl-tekst .text-center .lead { max-width: 46rem; margin-inline: auto; } .jl-tekst pre { white-space: pre-wrap; } /* De voorvertoning van de ContentBuilder zet zelf body op wit; de shop houdt zijn achtergrond */ body.ticket-shop-layout { background: var(--jl-cream); } .jl-tekst li + li { margin-top: 0.35rem; } .jl-tekst hr { border-color: var(--jl-line); opacity: 1; margin-block: 2rem; } .jl-tekst img { max-width: 100%; height: auto; } .jl-tekst > :last-child, .jl-tekst .row:last-child > [class*="col-"] > :last-child { margin-bottom: 0; } /* ---------- Pagina-secties ---------- */ .section { padding-block: clamp(2.5rem, 6vw, 4.5rem); } .section-tight { padding-block: clamp(1.75rem, 4vw, 2.75rem); } /* ---------- Toegankelijkheid ---------- */ :focus-visible { outline: 3px solid var(--jl-amber); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }