/* ===================================================================== Ticketsysteem 2.0 - publiek-modern.css Tweede opmaakthema ("Modern") voor de publieke ticketpagina, in de stijl van de mobiele GVA-bestelpagina: zachte achtergrond, witte kaarten met ronde hoeken, +/- stapknoppen en eigen letterfonts. Wordt ALLEEN geladen als het evenement thema 'modern' heeft; alle regels zijn gescoped op body.thema-modern zodat publiek.css en het klassieke thema onaangeroerd blijven. De accentkleur komt per evenement binnen via de CSS-variabele --accent (gezet in de ). Fonts staan lokaal in /Ticket/fonts (geen Google-aanroep). ===================================================================== */ @font-face { font-family: "Fraunces"; src: url("fonts/fraunces-latin.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; } @font-face { font-family: "Instrument Sans"; src: url("fonts/instrumentsans-latin.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; } body.thema-modern { --accent: #1a6f3c; /* wordt per event overschreven */ --inkt: #26221e; --grijs: #6b655e; --vlak: #faf6f0; --kaart: #ffffff; --rand: #ece5db; background: var(--vlak); color: var(--inkt); font-family: "Instrument Sans", "Segoe UI", Arial, sans-serif; line-height: 1.5; } body.thema-modern .pagina { max-width: 640px; margin: 0 auto; background: transparent; /* geen wit vel: de warme tint loopt overal door */ box-shadow: none; border: 0; } body.thema-modern h1, body.thema-modern h2 { font-family: "Fraunces", Georgia, serif; letter-spacing: -0.01em; } body.thema-modern h1 { font-weight: 700; font-size: 1.9em; } body.thema-modern h2 { font-family: "Instrument Sans", "Segoe UI", Arial, sans-serif; font-size: 0.85em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); margin-top: 30px; display: flex; align-items: center; gap: 12px; } body.thema-modern h2::after { content: ""; flex: 1; height: 1px; background: var(--rand); } body.thema-modern .meta { color: var(--grijs); } body.thema-modern .header { margin-top: 14px; } body.thema-modern .header img { display: block; width: 100%; border-radius: 18px; } /* ---------- Inklapbare introtekst ---------- */ body.thema-modern details.info { background: var(--kaart); border: 1px solid var(--rand); border-radius: 14px; padding: 4px 18px; margin: 14px 0; } body.thema-modern details.info summary { list-style: none; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-weight: 600; padding: 10px 0; } body.thema-modern details.info summary::-webkit-details-marker { display: none; } body.thema-modern details.info summary::after { content: "+"; color: var(--accent); font-size: 1.3em; font-weight: 600; line-height: 1; } body.thema-modern details.info[open] summary::after { content: "\2013"; } body.thema-modern details.info .intro { padding-bottom: 12px; } /* ---------- Ticketkaarten ---------- */ body.thema-modern .ticketrij { background: var(--kaart); border: 1px solid var(--rand); border-radius: 14px; box-shadow: 0 1px 4px rgba(38, 34, 30, 0.06); padding: 16px 18px; margin-bottom: 12px; } body.thema-modern .ticketrij.dicht { opacity: 0.55; } body.thema-modern .tnaam { font-weight: 600; font-size: 1.05em; } body.thema-modern .tsub { color: var(--grijs); } body.thema-modern .tprijs { font-weight: 600; } body.thema-modern .tservice { color: var(--grijs); font-weight: 400; } body.thema-modern .tstatus { color: #a12622; } /* Aantal: nette select; met JavaScript wordt hij vervangen door stapknoppen (zie modern.js) */ body.thema-modern select.aantal { border: 1px solid var(--rand); border-radius: 10px; padding: 8px 10px; font-size: 1em; background: var(--kaart); } body.thema-modern .stap-groep { display: inline-flex; align-items: center; gap: 12px; } body.thema-modern .stap-btn { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--accent); background: var(--kaart); color: var(--accent); font-size: 1.25em; font-weight: 600; line-height: 1; cursor: pointer; padding: 0; } body.thema-modern .stap-btn:disabled { border-color: var(--rand); color: var(--rand); cursor: default; } body.thema-modern .stap-waarde { min-width: 1.4em; text-align: center; font-weight: 600; font-size: 1.1em; } /* ---------- Formulier ---------- */ body.thema-modern #bestelDetails label { font-weight: 600; } body.thema-modern #bestelDetails input[type="text"], body.thema-modern #bestelDetails input[type="email"], body.thema-modern #bestelDetails input[type="tel"], body.thema-modern #bestelDetails input[type="date"], body.thema-modern #bestelDetails input[type="number"], body.thema-modern #bestelDetails select, body.thema-modern #bestelDetails textarea { border: 1px solid var(--rand); border-radius: 10px; padding: 10px 12px; font-size: 1em; font-family: inherit; background: var(--kaart); } body.thema-modern #bestelDetails input:focus, body.thema-modern #bestelDetails select:focus, body.thema-modern #bestelDetails textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } /* Formulierblokken als witte kaarten (bestellergegevens, deelnemers en akkoordvragen), zoals op de GVA-pagina */ body.thema-modern .form-kaart, body.thema-modern .deelnemerblok, body.thema-modern .akkoordblok { background: var(--kaart); border: 1px solid var(--rand); border-radius: 14px; padding: 18px; margin-bottom: 14px; } body.thema-modern .form-kaart > label:first-child, body.thema-modern .deelnemerblok > label:first-child { margin-top: 0; } body.thema-modern h2.kaart-kop { font-family: "Fraunces", Georgia, serif; font-size: 1.15em; font-weight: 600; text-transform: none; letter-spacing: normal; color: var(--inkt); margin: 0 0 6px; display: block; } body.thema-modern h2.kaart-kop::after { content: none; } body.thema-modern .deelnemerkop { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.05em; margin-bottom: 8px; } body.thema-modern .totaalblok { background: var(--kaart); border: 1.5px solid var(--accent); border-radius: 14px; padding: 14px 18px; } body.thema-modern .totaalregel { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.15em; } body.thema-modern .totaaluitleg { color: var(--grijs); } body.thema-modern .bestelknop { display: block; width: 100%; background: var(--accent); color: #fff; border: 0; border-radius: 999px; padding: 14px 20px; font-size: 1.1em; font-weight: 600; font-family: inherit; cursor: pointer; } body.thema-modern .bestelknop:hover { filter: brightness(0.92); } body.thema-modern .bestelknop:disabled { opacity: 0.6; cursor: default; } /* Vaste bestelbalk onderaan het scherm (zoals op de GVA-pagina): alleen de knop, over de volle schermbreedte, met blur-witte achtergrond; de totaalkaart blijft gewoon in de pagina staan. */ body.thema-modern .bestelbalk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--rand); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); } body.thema-modern .bestelbalk-binnen { max-width: 640px; margin: 0 auto; } /* Ruimte onderaan zodat de balk niets afdekt; op .pagina, want de voetregel en de betaalkaart staan buiten .inhoud */ body.thema-modern .pagina { padding-bottom: 100px; } body.thema-modern .voet { color: var(--grijs); } /* ---------- Chips, geruststelling en betaalkaart (DGVA-stijl) ---------- */ body.thema-modern .meta-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; } body.thema-modern .chip { background: var(--kaart); border: 1px solid var(--rand); border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: 0.9em; } body.thema-modern .gerust { color: var(--grijs); font-size: 0.9em; line-height: 1.4; margin: 14px 0 18px; } body.thema-modern .betaalkaart { background: var(--kaart); border: 1px solid var(--rand); border-radius: 14px; padding: 16px 18px; margin: 22px 0 8px; } body.thema-modern .betaalkaart strong { font-family: "Fraunces", Georgia, serif; font-size: 1.1em; } /* ---------- Heroweergave: datum en titel over de banner ---------- */ body.thema-modern.thema-hero .header { position: relative; } body.thema-modern.thema-hero .header::after { content: ""; position: absolute; inset: 0; border-radius: 18px; background: linear-gradient(to bottom, rgba(20, 16, 12, 0) 40%, rgba(20, 16, 12, 0.82) 100%); pointer-events: none; } body.thema-modern.thema-hero .hero-tekst { position: absolute; left: 20px; right: 20px; bottom: 16px; z-index: 1; } body.thema-modern.thema-hero .hero-datum { color: var(--accent); filter: brightness(1.6); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; font-size: 0.85em; margin-bottom: 4px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); } body.thema-modern.thema-hero .hero-tekst h1 { color: #fff; margin: 0; font-size: 1.7em; line-height: 1.15; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55); } /* ---------- Ticketvorm met perforatie (DGVA-stijl) ---------- */ body.thema-modern .ticketrij.ticket-vorm { display: block; padding: 0; overflow: visible; } body.thema-modern .ticket-boven { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding: 16px 18px 12px; } body.thema-modern .ticket-perforatie { position: relative; border-top: 2px dashed var(--rand); } body.thema-modern .ticket-perforatie::before, body.thema-modern .ticket-perforatie::after { content: ""; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--vlak); border: 1px solid var(--rand); } body.thema-modern .ticket-perforatie::before { left: -11px; } body.thema-modern .ticket-perforatie::after { right: -11px; } body.thema-modern .ticket-onder { display: flex; justify-content: flex-end; padding: 12px 18px 16px; }