/* position:fixed i.p.v. sticky: op deze site (Nicepage-thema, veel geneste wrapper-divs) bleek "sticky" onbetrouwbaar — zodra ergens hogerop in de boom een element overflow/transform heeft (heel gebruikelijk bij page- builders, bijv. om horizontaal scrollen te voorkomen), stopt sticky simpelweg met werken en scrolt de balk gewoon met de pagina mee weg. fixed is bestand tegen dat probleem, omdat het uitsluitend om de viewport zelf draait. jbts-script.js compenseert hiervoor door de werkelijke hoogte van de balk als padding-top op te zetten, zodat de pagina-inhoud niet onder de balk verdwijnt. */ #jbts-navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background: rgba(13,27,42,0.92); backdrop-filter: blur(6px); padding: 0 24px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } .jbts-navbar-inner { max-width: 1200px; margin: 0 auto; padding: 12px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; transition: padding .25s ease; } /* WordPress-adminbalk staat, net als onze balk nu, position:fixed bovenaan — zonder deze correctie zouden ze over elkaar heen vallen wanneer je ingelogd bent. Zelfde breakpoint/hoogtes als WP core's eigen admin-bar-inline-css (32px desktop, 46px vanaf 782px). Onzichtbaar voor gewone (niet-ingelogde) bezoekers. */ body.admin-bar #jbts-navbar { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar #jbts-navbar { top: 46px; } } #jbts-navbar { transition: background .25s ease, transform .18s ease-out; } #jbts-navbar.jbts-hide { transform: translateY(-100%); } #jbts-navbar.jbts-scrolled { background: rgba(10,20,32,0.98); } #jbts-navbar.jbts-scrolled .jbts-navbar-inner { padding: 8px 0; } #jbts-navbar img.jbts-logo { height: 42px; display: block; transition: height .25s ease; } #jbts-navbar.jbts-scrolled img.jbts-logo { height: 32px; } #jbts-navbar .jbts-navlinks { display: flex; align-items: center; gap: 24px; font-size: 13.5px; color: #d8d8d8; } #jbts-navbar .jbts-navlinks a { color: inherit; text-decoration: none; cursor: pointer; padding: 6px 1px; font-weight: 500; letter-spacing: 0.3px; position: relative; transition: color .15s ease; } #jbts-navbar .jbts-navlinks a::after { content: ''; position: absolute; left: 1px; right: 1px; bottom: -1px; height: 2px; background: #ff4f8f; transform: scaleX(0); transform-origin: center; transition: transform .2s ease; } #jbts-navbar .jbts-navlinks a:hover { color: var(--jbts-accent-light, #ff9dc0); } #jbts-navbar .jbts-navlinks a:hover::after { transform: scaleX(1); } /* SVG i.p.v. het unicode-driehoekje (▾): schaalt overal scherp, ongeacht platform/font — zelfde reden als het belletje-icoon in het "Mijn festival"-paneel. width/height:1em zodat 'm-sizen via font-size werkt. */ .jbts-chev { width: 1em; height: 1em; fill: currentColor; display: inline-block; vertical-align: -1px; transition: transform .2s ease; } /* Zelfde SVG-i.p.v.-lettertype-glyph reden als .jbts-chev, nu voor alle sluit-kruisjes (× stond nooit exact gecentreerd, afhankelijk van font/platform). Twee zelfgetekende lijnen zijn per definitie symmetrisch, dus dit staat overal 100% in het midden van de knop. width/height:1em zodat 'm sizen via font-size op de knop blijft werken zoals voorheen. */ .jbts-x-icon { width: 1em; height: 1em; display: block; stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; } /* Was 13px — te klein om in één oogopslag te zien dat "Festival" een submenu heeft. Ruim opgeschaald en verder van de tekst af zodat het als een echt, duidelijk pijltje leest i.p.v. een vaag stipje. De vertical-align:-1px van de basisregel hierboven was afgestemd op een chevron die bijna even groot was als de tekst (13px naast 13.5px) — bij 20px naast diezelfde 13.5px-tekst zweeft het pijltje daardoor te hoog. Flink negatiever getrokken zodat het weer op ooghoogte met de tekst staat. */ #jbts-navbar .jbts-navlinks .jbts-chev { font-size: 20px; color: var(--jbts-accent-light, #ff9dc0); margin-left: 5px; vertical-align: -5px; } .jbts-nav-drop:hover .jbts-chev { transform: rotate(180deg); } /* De chevron-svg (viewBox 0 0 24 24, pijltje maar ~10 van de 24 eenheden breed) heeft rechts van het zichtbare pijltje zelf nog eigen lege ruimte binnen zijn 20px-doos — dat telt bovenop de gewone 24px flex-gap van .jbts-navlinks op, waardoor "Festival ▾" en "Sponsoren" verder uit elkaar lijken te staan dan de andere menu-items. Negatieve margin op de hele dropdown-wrapper trekt dat recht zonder de andere gaps aan te raken. */ #jbts-navbar .jbts-navlinks .jbts-nav-drop { margin-right: -8px; } #jbts-navbar .jbts-right { display: flex; align-items: center; gap: 14px; } /* "Mijn festival" — hartje + label, met belletje-badge zodra er een melding is (gevuld door jfm-notifications-update, zie jbts-script.js). */ /* height + box-sizing:border-box expliciet i.p.v. de hoogte impliciet uit padding+content+rand te laten optellen: dat vorige aanpak (line-height- waardes zo kiezen dat de som precies 34px uitkomt) bleek in de praktijk toch net iets af te wijken per knop/browser. Een vaste height is exact en onafhankelijk van lettertype-metriek. */ .jbts-personal-trigger { position: relative; display: flex; align-items: center; gap: 7px; height: 34px; box-sizing: border-box; padding: 0 14px 0 12px; border-radius: 20px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.14); color: #fff; text-decoration: none; cursor: pointer; transition: background .15s ease; } .jbts-personal-trigger:hover { background: rgba(255,255,255,0.16); } /* Instelbaar icoontje (emoji-varianten): font-size stuurt het formaat, ruim binnen de vaste 34px knophoogte hierboven. display:flex + line-height:1 voorkomt dat de emoji's eigen (vaak wat hogere) regelhoogte 'm uit het midden van de knop duwt. */ /* font-size hier is technisch gelijk aan .jbts-cta-heart, maar een emoji- glyph (kleur-emoji, bijv. 💋) heeft van zichzelf al meer lege ruimte binnen zijn tekencel dan een simpel tekstsymbool als het hartje (♡) van "Word vriend" — bij gelijke font-size oogt de emoji daardoor merkbaar kleiner. Groter gezet zodat ze ECHT even groot ogen, niet alleen op papier gelijke CSS-waarden hebben. */ .jbts-personal-icon { display: flex; align-items: center; justify-content: center; font-size: 23px; line-height: 1; flex-shrink: 0; } /* "Site-icoon"-variant is een , geen tekst-glyph — eigen maatvoering. */ .jbts-personal-icon--img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; display: block; } .jbts-personal-label { font-size: 13.5px; font-weight: 500; white-space: nowrap; } .jbts-bell-badge { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--jbts-accent, #e60060); align-items: center; justify-content: center; display: none; animation: jbtsBellWobble 2.8s ease-in-out infinite; transform-origin: 50% 10%; } .jbts-bell-badge:not([hidden]) { display: flex; } .jbts-bell-badge svg { display: block; } /* Totaal-aantal favorieten op het hartje zelf — andere hoek dan de meldingenbel (die blijft een tijdelijk "iets begint zo"-signaal; dit is een permanente "je hebt N favorieten" telling), zodat ze niet over elkaar heen vallen. */ .jbts-fav-badge { position: absolute; bottom: -5px; right: -5px; z-index: 1; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--jbts-accent, #e60060); color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; display: none; } .jbts-fav-badge:not([hidden]) { display: block; } @keyframes jbtsBellWobble { 0%, 75%, 100% { transform: rotate(0deg); } 78% { transform: rotate(-14deg); } 81% { transform: rotate(11deg); } 84% { transform: rotate(-8deg); } 87% { transform: rotate(5deg); } 90% { transform: rotate(0deg); } } /* line-height expliciet gezet (zelfde reden als de mobiele CTA-fix eerder): zonder een eigen waarde hangt de knophoogte af van het lettertype/browser i.p.v. een gegarandeerde waarde. 10+10 padding + 14 line-height = 34px, gelijk aan .jbts-personal-trigger ("Mijn festival") ernaast. */ /* display:inline-flex + align-items:center + vaste height i.p.v. op line-height te vertrouwen: een -element is standaard "inline", en line-height-gebaseerde hoogtes bleken toch net iets kunnen afwijken van .jbts-personal-trigger ernaast. Dit is exact en onafhankelijk van lettertype/browser. */ #jbts-navbar .jbts-cta { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; box-sizing: border-box; background: var(--jbts-accent, #e60060); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: 0.4px; padding: 0 20px; border-radius: 999px; white-space: nowrap; text-decoration: none; animation: jbtsPulse 2.2s infinite; transition: transform .15s ease, filter .15s ease; } #jbts-navbar .jbts-cta:hover { filter: brightness(1.08); transform: translateY(-1px); } /* Was een los ♡-teken + los spatiedun tekst-tekentje ervoor — de ruimte tussen hartje en tekst hing dan af van de breedte van dát ene spatie-teken (lettertype-afhankelijk, en bleek in de praktijk te krap). Nu een eigen span + expliciete gap hierboven, dus altijd dezelfde afstand, ongeacht lettertype. */ /* Zelfde font-size als .jbts-personal-icon hierboven ("Mijn festival"): de twee hartjes/icoontjes moeten in de menubalk exact even groot ogen. */ .jbts-cta-heart { display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; flex-shrink: 0; } /* Site-icoon/eigen-afbeelding-variant is een , geen tekst-glyph — zelfde maatvoering als .jbts-personal-icon--img zodat beide knoppen consistent ogen wanneer een admin voor een afbeelding kiest. */ .jbts-cta-heart--img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; display: block; } @keyframes jbtsPulse { 0% { box-shadow: 0 0 0 0 rgba(var(--jbts-accent-rgb, 230,0,96),0.65); transform: scale(1); } 55% { box-shadow: 0 0 0 15px rgba(var(--jbts-accent-rgb, 230,0,96),0); transform: scale(1.04); } 100% { box-shadow: 0 0 0 0 rgba(var(--jbts-accent-rgb, 230,0,96),0); transform: scale(1); } } /* Twee labels: volledige tekst (desktop) en korte tekst (mobiel), wisselend via de media query hieronder — zie .jbts-cta-full/.jbts-cta-short. */ .jbts-cta-short { display: none; } .jbts-nav-drop { display: flex; align-items: center; } .jbts-dropdown { position: absolute; top: 100%; left: 0; background: #16283d; border: 1px solid rgba(255,255,255,0.14); border-radius: 16px; padding: 16px; min-width: 280px; display: flex; flex-direction: column; box-shadow: 0 16px 40px rgba(0,0,0,0.5); z-index: 20; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(-8px); transition: opacity .18s ease, transform .18s ease, visibility .18s; } .jbts-dropdown::before { content: ''; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; background: #16283d; border-left: 1px solid rgba(255,255,255,0.14); border-top: 1px solid rgba(255,255,255,0.14); transform: translateX(-50%) rotate(45deg); } .jbts-dropdown.jbts-open, .jbts-dropdown.jbts-hover-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .jbts-dropdown a { padding: 16px 20px; font-size: 15px; color: #d5dbe2; white-space: nowrap; text-decoration: none; text-align: center; font-weight: 500; border-radius: 10px; border-left: 3px solid transparent; transition: background .15s ease, border-color .15s ease, color .15s ease; } .jbts-dropdown a + a { margin-top: 4px; border-top: 1px solid rgba(255,255,255,0.07); padding-top: 17px; } .jbts-dropdown a:hover { background: rgba(var(--jbts-accent-rgb, 230,0,96),0.14); border-left-color: var(--jbts-accent, #e60060); color: #fff; } .jbts-dropdown a::after { display: none; } /* "Mijn festival"-paneel: breed, drie kolommen naast elkaar (Taal/Favorieten/ Meldingen), rechts uitgelijnd tegen de balk i.p.v. gecentreerd onder het kleine hartje-icoon. right:24px hieronder is de fallback (o.a. voordat JS draait); jbtsPositionDropdowns() (jbts-script.js) berekent op bredere schermen de écht juiste marge t.o.v. de gecentreerde .jbts-navbar-inner (max-width:1200px) en overschrijft 'm — anders loopt het paneel op brede monitors voorbij de QR-code. Onder de mobiele knik (700px) laat diezelfde JS de inline style weer los, zodat de media query hieronder het overneemt. */ .jbts-dropdown-wide { left: auto; right: 24px; width: min(760px, calc(100vw - 48px)); min-width: 0; max-width: 760px; padding: 0; display: flex; flex-direction: column; transform: translateY(-8px); } .jbts-dropdown-wide.jbts-open, .jbts-dropdown-wide.jbts-hover-open { transform: translateY(0); } .jbts-dropdown-wide::before { display: none; } /* Expliciete sluitknop rechtsboven in het paneel — vooral op mobiel/touch is "ergens anders tikken" geen betrouwbare of duidelijke manier om dicht te klappen, dus een zichtbaar kruisje is hier bewust toegevoegd. */ .jbts-pm-close { position: absolute; top: 8px; right: 8px; z-index: 2; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); border: none; border-radius: 50%; color: #a9b2bb; font-size: 26px; line-height: 1; cursor: pointer; transition: background .15s ease, color .15s ease; } .jbts-pm-close:hover { background: rgba(var(--jbts-accent-rgb, 230,0,96),0.18); color: #fff; } .jbts-pm-cols { display: flex; flex-direction: row; gap: 22px; } /* Kleine toelichting onderaan het paneel ("favorieten zijn per apparaat gebonden") — spant de volle breedte, los van de kolommenrij erboven. */ .jbts-dropdown-wide .jbts-pm-note { margin: 0; padding: 8px 20px 14px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 10px !important; line-height: 1.4; color: #8a93a3; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jbts-pm-col { flex: 1 1 0; padding: 20px 18px; min-width: 0; } .jbts-pm-col-notifs { flex: 1.4 1 0; } .jbts-pm-col + .jbts-pm-col { border-left: 1px solid rgba(255,255,255,0.1); } .jbts-pm-label { font-size: 11px; font-weight: 500; color: #8a93a3; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 12px; } .jbts-dropdown-wide .jbts-pm-lang-row { display: block; text-align: left; font-weight: 400; padding: 8px 10px; border-radius: 10px; border-left: 3px solid transparent; font-size: 13.5px; color: #d5dbe2; text-decoration: none; white-space: nowrap; margin-bottom: 2px; transition: background .15s ease, color .15s ease; } .jbts-dropdown-wide .jbts-pm-lang-row:hover { background: rgba(var(--jbts-accent-rgb, 230,0,96),0.14); border-left-color: var(--jbts-accent, #e60060); color: #fff; } .jbts-dropdown-wide .jbts-pm-fav-row { display: flex; align-items: center; justify-content: space-between; text-align: left; font-weight: 400; white-space: normal; gap: 10px; padding: 7px 8px; border-radius: 8px; margin-bottom: 2px; font-size: 13.5px; color: #d5dbe2; text-decoration: none; transition: background .15s ease, color .15s ease; } .jbts-dropdown-wide .jbts-pm-fav-row:hover { background: rgba(var(--jbts-accent-rgb, 230,0,96),0.14); color: #fff; } .jbts-pm-badge { font-size: 12px; font-weight: 700; color: var(--jbts-accent-light, #ff9dc0); background: rgba(var(--jbts-accent-rgb, 230,0,96),0.18); padding: 2px 8px; border-radius: 10px; flex-shrink: 0; } .jbts-pm-notifs-list { display: flex; flex-direction: column; gap: 4px; } .jbts-dropdown-wide .jbts-pm-notif-item { display: flex; align-items: center; text-align: left; font-weight: 400; white-space: normal; gap: 10px; padding: 6px 4px; border-radius: 8px; text-decoration: none; margin-bottom: 2px; transition: background .15s ease; } .jbts-dropdown-wide .jbts-pm-notif-item:hover { background: rgba(var(--jbts-accent-rgb, 230,0,96),0.1); } .jbts-dropdown-wide .jbts-pm-notif-item:hover .jbts-pm-notif-artist { color: var(--jbts-accent-light, #ff9dc0); } .jbts-dropdown-wide .jbts-pm-lang-row + .jbts-pm-lang-row, .jbts-dropdown-wide .jbts-pm-fav-row + .jbts-pm-fav-row, .jbts-dropdown-wide .jbts-pm-notif-item + .jbts-pm-notif-item { margin-top: 0; border-top: none; } .jbts-pm-notif-photo { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; background-size: cover; background-position: center; border: 1px solid rgba(255,255,255,0.18); } .jbts-pm-notif-photo-ph { display: flex; align-items: center; justify-content: center; background: rgba(var(--jbts-accent-rgb, 230,0,96),0.18); font-size: 15px; } .jbts-pm-notif-text { display: flex; flex-direction: column; min-width: 0; } .jbts-pm-notif-when { display: block; font-size: 11px; color: var(--jbts-accent-light, #ff9dc0); font-weight: 700; margin-bottom: 2px; } .jbts-pm-notif-artist { display: block; font-size: 13.5px; color: #fff; font-weight: 600; line-height: 1.3; margin-bottom: 2px; transition: color .15s ease; } .jbts-pm-notif-venue { display: block; font-size: 11.5px; color: #8a93a3; } .jbts-pm-empty { text-align: center; padding: 6px 2px 0; } .jbts-pm-empty-icon { display: block; font-size: 20px; color: var(--jbts-accent-light, #ff9dc0); margin-bottom: 8px; } /* Hogere specificiteit (gescoped onder .jbts-dropdown-wide) + !important op de font-size: de thema/Nicepage-opmaak voegt soms eigen

-stijlen toe die anders zouden winnen ondanks dat deze regel later in het bestand staat. */ .jbts-dropdown-wide .jbts-pm-empty p { margin: 0; font-size: 10.5px !important; color: #a9b2bb; line-height: 1.5; } /* Twee links onderaan het paneel naar de volledige pagina (elk naar een ander anker daarop — uitleg vs. overzicht; alleen zichtbaar als er een pagina-URL is ingesteld, zie instellingen). Bewust ONGELIJK qua gewicht: "Volledig overzicht" (--primary) is waar de meeste bezoekers voor komen en krijgt een vol gevulde, opvallende knop; "Help & uitleg" (--secondary) is een rustige tekstlink ernaast — nog duidelijk klikbaar, maar duwt zich niet op de voorgrond. Beide staan gecentreerd i.p.v. de volle breedte te vullen. Formaat bewust afgestemd op .jbts-personal-trigger hierboven (zelfde padding/font-size/border-radius-familie) zodat ze niet groter/zwaarder ogen dan de "Mijn festival"-knop die er in hetzelfde paneel boven staat. */ .jbts-pm-page-links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 12px; margin: 4px 20px 18px; box-sizing: border-box; } /* Belangrijk: ".jbts-dropdown a" (hierboven, algemene stijl voor de Festival-submenu-links) is qua CSS-specificiteit (klasse+element) zwaarder dan een losse ".jbts-pm-page-link"-klasse, en won daardoor stilletjes de padding/font-size/lay-out — dat maakte deze knoppen veel te hoog. Daarom hier scopen op ".jbts-dropdown-wide .jbts-pm-page-link..." (twee klassen), dat wint altijd, en alles wat ".jbts-dropdown a" ongewenst meegeeft (padding, font-size, border-left, border-radius, de "a + a"-scheidingslijn) expliciet resetten. */ .jbts-dropdown-wide .jbts-pm-page-link { box-sizing: border-box; text-align: center; text-decoration: none; white-space: nowrap; margin-top: 0; border-left: none; border-top: none; transition: background .15s ease, color .15s ease, border-color .15s ease; } .jbts-dropdown-wide .jbts-pm-page-link--primary { order: 2; padding: 8px 16px; font-size: 13.5px; font-weight: 600; color: #fff; background: var(--jbts-accent, #e60060); border: 1px solid var(--jbts-accent, #e60060); border-radius: 20px; } .jbts-dropdown-wide .jbts-pm-page-link--primary:hover { background: var(--jbts-accent-light, #ff9dc0); border-color: var(--jbts-accent-light, #ff9dc0); color: #1a1f2b; } .jbts-dropdown-wide .jbts-pm-page-link--secondary { order: 1; padding: 8px 14px; font-size: 12.5px; font-weight: 500; color: #d8d8d8; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.14); border-radius: 20px; } .jbts-dropdown-wide .jbts-pm-page-link--secondary:hover { color: var(--jbts-accent-light, #ff9dc0); border-color: var(--jbts-accent-light, #ff9dc0); } /* Onder de 700px-knik gaat het HELE paneel al naar volle breedte en stapelen de kolommen (zie .jbts-dropdown-wide/.jbts-pm-cols hierboven). De primaire knop mag daar best de volle breedte pakken (duidelijk, makkelijk te raken met een duim); de secundaire link blijft klein eronder gecentreerd. */ @media (max-width: 700px) { .jbts-pm-page-links { flex-direction: column; margin-left: 12px; margin-right: 12px; gap: 10px; } .jbts-dropdown-wide .jbts-pm-page-link--primary { width: 100%; padding: 10px 16px; } .jbts-dropdown-wide .jbts-pm-page-link--secondary { order: 3; } } /* Volledige "Mijn festival"-pagina ([jbts_my_festival_page]) — hergebruikt dezelfde .jbts-pm-*-klassen (kolommen, rijen) maar met een eigen, lichte opmaak: geen donkere paneel-achtergrond (die was onleesbaar op een gewone pagina), volle paginabreedte, en donkere in plaats van lichte tekstkleuren — de originele .jbts-pm-*-kleuren zijn immers voor lichte tekst óp een donkere achtergrond bedoeld (het uitklappaneel), niet omgekeerd. Bewust GEEN .jbts-dropdown-klasse (geen position:absolute/opacity:0/enz. uit die basisregel); alleen de opmaak-specifieke .jbts-dropdown-wide-regels (flex-richting, padding) worden hergebruikt en hier gecorrigeerd. */ .jbts-mf-page.jbts-dropdown-wide { position: static !important; transform: none !important; right: auto !important; left: auto !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; box-sizing: border-box; } /* Uitlegblok "Zo werkt Mijn Festival" bovenaan de pagina — titel + puntsgewijze lijst (i.p.v. lopende tekst, voor een breed publiek), wegklikbaar met een klein heropen-knopje, net als de "Zo werkt het"-blokken in Festival Manager. */ .jbts-mf-help { margin: 0 0 28px; } .jbts-mf-help-panel { position: relative; background: rgba(127,127,127,0.06); border: 1px solid rgba(127,127,127,0.18); border-left: 4px solid var(--jbts-accent, #e60060); border-radius: 14px; padding: 20px 46px 20px 22px; } .jbts-mf-help-close { position: absolute; top: 8px; right: 8px; z-index: 1; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: none; background: none; border-radius: 50%; font-size: 24px; line-height: 1; color: #8a93a3; cursor: pointer; transition: background .15s ease, color .15s ease; } .jbts-mf-help-close:hover { background: rgba(127,127,127,0.12); color: var(--jbts-accent, #e60060); } .jbts-mf-help-title { margin: 0 0 12px; font-weight: 700; font-size: 18px; } .jbts-mf-help-list { list-style: none; margin: 0; padding: 0; font-size: 15px; line-height: 1.7; } .jbts-mf-help-list li { margin: 0 0 8px; display: flex; align-items: flex-start; gap: 10px; } .jbts-mf-help-list li:last-child { margin-bottom: 0; } /* Vaste iconkolom, zelfde reden als bij Festival Manager's help-blokken: emoji zijn ongelijk breed (♥ smal, 📲 breed) — zonder vaste breedte begint de tekst achter elk icoontje op een andere x-positie. */ .jbts-mf-help-icon { flex: 0 0 22px; text-align: center; line-height: inherit; } .jbts-mf-help-text { flex: 1 1 auto; min-width: 0; } .jbts-mf-help-reopen { display: inline-block; border: 1px solid rgba(127,127,127,0.3); background: transparent; border-radius: 20px; padding: 7px 16px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; } .jbts-mf-help-reopen:hover { border-color: var(--jbts-accent, #e60060); color: var(--jbts-accent, #e60060); } .jbts-mf-page .jbts-pm-cols { display: flex; flex-wrap: wrap; gap: 22px; } .jbts-mf-page .jbts-pm-col { flex: 1 1 280px; min-width: 240px; padding: 24px 22px; background: rgba(127,127,127,0.06); border: 1px solid rgba(127,127,127,0.18) !important; border-radius: 14px; } /* Meldingen mogen op de pagina niet mee-krimpen tot 1/3 kolom zoals in het kleine paneel — met flex-wrap hierboven duwt flex-basis:100% 'm naar een eigen, volledige rij onder Taal/Favorieten. */ .jbts-mf-page .jbts-pm-col-notifs { flex: 1 1 100%; } .jbts-mf-page .jbts-pm-label { color: #8a93a3; } .jbts-mf-page .jbts-pm-lang-row, .jbts-mf-page .jbts-pm-fav-row, .jbts-mf-page .jbts-pm-notif-artist { color: inherit; } .jbts-mf-page .jbts-pm-lang-row:hover, .jbts-mf-page .jbts-pm-fav-row:hover { background: rgba(var(--jbts-accent-rgb, 230,0,96),0.1); color: inherit; } .jbts-mf-page .jbts-pm-notif-venue, .jbts-mf-page .jbts-pm-empty p, .jbts-mf-page .jbts-pm-note { color: #8a93a3; } .jbts-mf-page .jbts-pm-note { border-top-color: rgba(127,127,127,0.25); } @media (max-width: 700px) { .jbts-mf-page .jbts-pm-cols { flex-direction: column; } } /* Drie knoppen naar de volledige (niet-persoonlijke) overzichtspagina's, onderaan de "Mijn Festival"-pagina — lichte ghost-pillen passend bij de rest van deze paginacontext (in tegenstelling tot .jbts-pm-page-link, dat bedoeld is voor het donkere paneel). */ .jbts-mf-overview-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 30px 0 4px; } .jbts-mf-overview-link { padding: 9px 18px; font-size: 13.5px; font-weight: 600; color: var(--jbts-accent, #e60060); background: transparent; border: 1px solid rgba(var(--jbts-accent-rgb, 230,0,96),0.4); border-radius: 20px; text-decoration: none; transition: background .15s ease, border-color .15s ease; } .jbts-mf-overview-link:hover { background: rgba(var(--jbts-accent-rgb, 230,0,96),0.08); border-color: var(--jbts-accent, #e60060); } @media (max-width: 700px) { .jbts-mf-overview-links { flex-direction: column; } .jbts-mf-overview-link { text-align: center; } } @media (max-width: 700px) { .jbts-dropdown-wide { right: 12px; width: calc(100vw - 24px); } .jbts-pm-cols { flex-direction: column; } .jbts-pm-col + .jbts-pm-col { border-left: none; border-top: 1px solid rgba(255,255,255,0.1); } /* Op smallere schermen mag de toelichting weer normaal wrappen — daar is de "1 regel"-eis (desktop, brede balk) niet aan de orde. */ .jbts-dropdown-wide .jbts-pm-note { white-space: normal; text-overflow: clip; } } @media (max-width: 480px) { .jbts-personal-label { display: none; } .jbts-personal-trigger { padding: 8px; border-radius: 50%; gap: 0; } /* Dit ronde icoon-only knopje bestond al (ruimtebesparing op smalle telefoons) — maar het icoontje zelf is inmiddels van 15px naar 23px vergroot (voor de "even groot als Word vriend"-fix), en dat is te groot voor dit kleine rondje. Hier specifiek weer verkleind zodat het icoon netjes binnen het rondje past, zonder de fix op desktop/tablet (waar de tekst wél zichtbaar blijft) ongedaan te maken. */ .jbts-personal-icon { font-size: 17px; } } .jbts-qr-wrap { position: relative; display: flex; align-items: center; } /* width/height + box-sizing:border-box expliciet i.p.v. te vertrouwen op een eventuele globale reset van het thema: zo is de 34px gegarandeerd — gelijk aan "Mijn festival" en "Word vriend" ernaast (was voorheen effectief ~38px, met padding/rand er bovenop, en oogde daardoor te groot/hoog). */ .jbts-qr-icon { width: 34px; height: 34px; box-sizing: border-box; border-radius: 4px; cursor: pointer; border: 1px solid rgba(255,255,255,0.35); background: #fff; padding: 2px; display: block; transition: transform .15s ease; } .jbts-qr-icon:hover { transform: scale(1.06); } .jbts-qr-popover { position: absolute; top: calc(100% + 10px); right: 0; background: #fff; border-radius: 10px; padding: 14px; display: none; flex-direction: column; align-items: center; box-shadow: 0 8px 24px rgba(0,0,0,0.35); z-index: 30; width: 170px; } .jbts-qr-popover.jbts-open { display: flex; } .jbts-qr-wrap:hover .jbts-qr-popover { display: flex; } .jbts-qr-popover img { width: 120px; height: 120px; } .jbts-qr-popover span { font-size: 11.5px; color: #333; margin-top: 8px; text-align: center; line-height: 1.45; } /* Hoogte opgetrokken van 22px naar 34px — gelijk aan de "Steun"-knop ernaast op mobiel (zie de CTA-line-height-fix eerder). De 3 streepjes blijven op dezelfde manier gecentreerd, alleen de tap-target/omtrek is nu net zo hoog als de rest van de balk, i.p.v. zichtbaar kleiner. */ #jbts-hamburger { display: none; cursor: pointer; background: none; border: none; padding: 0; width: 28px; height: 34px; box-sizing: border-box; position: relative; } .jbts-burger-bar { position: absolute; left: 0; right: 0; height: 3px; background: #fff; border-radius: 2px; transition: transform .25s ease, opacity .2s ease, top .25s ease; } .jbts-burger-bar:nth-child(1) { top: 7px; } .jbts-burger-bar:nth-child(2) { top: 16px; } .jbts-burger-bar:nth-child(3) { top: 25px; } #jbts-hamburger.jbts-open .jbts-burger-bar:nth-child(1) { top: 16px; transform: rotate(45deg); } #jbts-hamburger.jbts-open .jbts-burger-bar:nth-child(2) { opacity: 0; } #jbts-hamburger.jbts-open .jbts-burger-bar:nth-child(3) { top: 16px; transform: rotate(-45deg); } #jbts-mobile-panel { display: flex; flex-direction: column; position: fixed; inset: 0; background: #0d1b2a; padding: 110px 32px 40px; overflow-y: auto; z-index: 9998; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility .3s; } #jbts-mobile-panel.jbts-open { opacity: 1; visibility: visible; pointer-events: auto; } #jbts-mobile-panel-inner { max-width: 480px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 6px; } #jbts-mobile-panel .jbts-m-item { display: flex; align-items: center; gap: 10px; padding: 16px 2px; border-top: none; font-size: 25px; color: #fff; text-decoration: none; cursor: pointer; font-weight: 600; } .jbts-sub-panel { display: flex; flex-direction: column; max-height: 0; opacity: 0; overflow: hidden; padding: 0 0 0 4px; transition: max-height .35s ease, opacity .3s ease, padding .35s ease; } .jbts-sub-panel.jbts-open { max-height: 420px; opacity: 1; padding: 2px 0 10px 4px; } .jbts-sub-panel a { color: #a9b2bb; font-size: 18px; padding: 12px 0; text-decoration: none; } .jbts-sub-panel a:hover { color: var(--jbts-accent-light, #ff9dc0); } /* Was ook hier 20px naast 25px-tekst — nauwelijks op te merken tussen duim en vinger door. Ruim groter en met wat meer lucht ervoor. */ #jbts-mobile-panel .jbts-m-item .jbts-chev { font-size: 28px; color: var(--jbts-accent-light, #ff9dc0); margin-left: 6px; } @media (max-width: 900px) { #jbts-navbar .jbts-navlinks, #jbts-navbar .jbts-qr-wrap { display: none; } #jbts-hamburger { display: block; } /* Op mobiel wordt de donatieknop relatief dominant zodra menu/QR verdwijnen — kortere tekst en een gedempte puls houden 'm rustiger. */ /* Hoogte blijft 34px (geërfd van de basisregel hierboven, nu via een vaste height i.p.v. line-height-rekenwerk) — hier alleen horizontale padding en lettergrootte aanpassen voor de kortere mobiele tekst. */ #jbts-navbar .jbts-cta { padding: 0 14px; font-size: 11.5px; } .jbts-cta-full { display: none; } .jbts-cta-short { display: inline; } #jbts-navbar .jbts-cta { animation: jbtsPulseSoft 2.6s infinite; } } @keyframes jbtsPulseSoft { 0% { box-shadow: 0 0 0 0 rgba(var(--jbts-accent-rgb, 230,0,96),0.45); } 55% { box-shadow: 0 0 0 6px rgba(var(--jbts-accent-rgb, 230,0,96),0); } 100% { box-shadow: 0 0 0 0 rgba(var(--jbts-accent-rgb, 230,0,96),0); } } #jbts-hero { position: relative; padding: 90px 24px 60px; text-align: center; color: #fff; overflow: hidden; min-height: calc(88vh - 66px); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } #jbts-hero .jbts-bg { position: absolute; inset: -20px; background-size: cover; background-position: center; opacity: 0; transform: scale(1.08); } #jbts-hero .jbts-bg.l1 { opacity: 1; } /* Animatie-timing en achtergrondfoto's worden dynamisch gegenereerd op basis van het aantal ingestelde foto's (zie jbts_render_crossfade_css in de plugin). */ #jbts-hero .jbts-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,27,42,0.55) 0%, rgba(13,27,42,0.72) 55%, rgba(13,27,42,0.92) 100%); } #jbts-hero .jbts-content { position: relative; z-index: 2; max-width: 700px; display: flex; flex-direction: column; align-items: center; } @keyframes jbtsFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } #jbts-hero .jbts-location, #jbts-hero img.jbts-logo-big, #jbts-hero .jbts-date, #jbts-hero .jbts-buttons { opacity: 0; animation: jbtsFadeUp 0.7s ease forwards; } #jbts-hero .jbts-location { animation-delay: .1s; } #jbts-hero img.jbts-logo-big { animation-delay: .22s; } #jbts-hero .jbts-date { animation-delay: .38s; } #jbts-hero .jbts-buttons { animation-delay: .5s; } #jbts-hero img.jbts-logo-big { height: 84px; margin: 4px 0 22px; filter: drop-shadow(0 2px 10px rgba(0,0,0,0.35)); max-width: 90vw; } #jbts-hero .jbts-location { display: inline-block; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,0.85); text-shadow: 0 1px 6px rgba(0,0,0,0.4); margin-bottom: 14px; } #jbts-hero .jbts-date { font-size: 15px; color: #eee; margin-bottom: 30px; } #jbts-hero .jbts-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } #jbts-hero .jbts-btn-primary, #jbts-hero .jbts-btn-secondary { font-size: 13px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; padding: 14px 30px; border-radius: 999px; text-decoration: none; transition: transform .15s ease, filter .15s ease, box-shadow .15s ease; } #jbts-hero .jbts-btn-primary { background: #142c40; color: #fff; } #jbts-hero .jbts-btn-secondary { background: var(--jbts-accent, #e60060); color: #fff; } #jbts-hero .jbts-btn-primary:hover, #jbts-hero .jbts-btn-secondary:hover { filter: brightness(1.12); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.25); } @media (min-width: 1000px) { #jbts-hero .jbts-content { max-width: 920px; } #jbts-hero img.jbts-logo-big { height: 150px; margin: 6px 0 28px; } #jbts-hero .jbts-location { font-size: 14px; margin-bottom: 18px; } #jbts-hero .jbts-date { font-size: 20px; margin-bottom: 34px; } #jbts-hero .jbts-buttons { gap: 20px; } #jbts-hero .jbts-btn-primary, #jbts-hero .jbts-btn-secondary { font-size: 16px; padding: 18px 42px; } } #jbts-lang-suggest { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 10000; max-width: calc(100vw - 40px); background: #142c40; color: #fff; font-size: 13.5px; line-height: 1.5; padding: 13px 40px 13px 18px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.35); animation: jbtsFadeUp .4s ease; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } #jbts-lang-suggest a { color: var(--jbts-accent-light, #ff9dc0); font-weight: 700; text-decoration: none; margin-left: 6px; } #jbts-lang-suggest a:hover { text-decoration: underline; } #jbts-lang-suggest button { position: absolute; top: 6px; right: 10px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: #fff; opacity: .6; cursor: pointer; font-size: 16px; padding: 0; } #jbts-lang-suggest button:hover { opacity: 1; } .jbts-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* "Terug naar boven"-knop: staat standaard verborgen (opacity/pointer-events), verschijnt via JS zodra een bezoeker voldoende naar beneden heeft gescrold. Gebruikt dezelfde accentkleur-variabele (+ de rgb-variant voor de gloed) als de rest van de balk, zodat hij automatisch meekleurt met wat er bij Instellingen is ingesteld — en dezelfde visuele taal spreekt als de "Word vriend"-knop (kleurgloed, veerkrachtige beweging). */ #jbts-back-to-top { position: fixed; right: 18px; bottom: 18px; z-index: 9998; width: 48px; height: 48px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--jbts-accent, #e60060), var(--jbts-accent-light, #ff6fa8)); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(var(--jbts-accent-rgb, 230,0,96),0.4), 0 2px 6px rgba(0,0,0,0.15); opacity: 0; pointer-events: none; transform: translateY(14px) scale(.85); transition: opacity .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, filter .15s ease; } #jbts-back-to-top svg { width: 20px; height: 20px; display: block; transition: transform .2s ease; } #jbts-back-to-top.jbts-show { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } #jbts-back-to-top:hover { filter: brightness(1.08); transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 24px rgba(var(--jbts-accent-rgb, 230,0,96),0.5), 0 3px 8px rgba(0,0,0,0.18); } #jbts-back-to-top:hover svg { animation: jbtsArrowBounce .7s ease-in-out infinite; } /* Zelfde bounce, maar dan getriggerd door JS bij een klik/tik (zie jbts-script.js) — zo krijgen touchscreens (mobiel/tablet), die geen echte ":hover zonder aanraken" kennen, ook een kort speels animatie-momentje. */ #jbts-back-to-top.jbts-tapped svg { animation: jbtsArrowBounce .35s ease-in-out 2; } @keyframes jbtsArrowBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } #jbts-back-to-top:active { transform: translateY(-1px) scale(.97); } #jbts-back-to-top:active svg { animation: none; transform: translateY(1px); } @media (max-width: 600px) { #jbts-back-to-top { right: 14px; bottom: 14px; width: 44px; height: 44px; } #jbts-back-to-top svg { width: 18px; height: 18px; } }