/* ========================================================================= 27 Moments portaal — stijlen voor de module pov Eigen bestand per module zodat parallelle wijzigingen elkaar niet raken. Deze stijl stond vroeger als string in js/modules/pov.js en werd bij elke render in geprikt. Ze hoort hier. ========================================================================= */ /* ------------------------- De deelbare link ---------------------------- */ .gb-deel { background: linear-gradient(135deg, var(--m27-donkergroen), #43503c); color: #fff; } .gb-deel h3 { color: #fff; } .gb-deel .uitleg { color: rgba(255, 255, 255, 0.78); } .gb-link { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 14px 0 12px; } .gb-link input { flex: 1; min-width: 220px; font: inherit; font-size: 14px; padding: 11px 14px; border-radius: 14px; border: 1.5px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.1); color: #fff; } .gb-link input:focus-visible { outline: 3px solid var(--m27-lila); outline-offset: 2px; } .gb-deelknoppen { display: flex; gap: 8px; flex-wrap: wrap; } .gb-voetnoot { margin-top: 12px; font-size: 12.5px; color: rgba(255, 255, 255, 0.72); } /* ---------------------------- Tellers ---------------------------------- */ .gb-tellers { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); margin-bottom: 18px; } .gb-teller { background: #fff; border: 1px solid #eae6de; border-radius: var(--m27-radius-kaart); padding: 12px 14px; box-shadow: 0 2px 10px rgba(90, 104, 80, 0.05); } .gb-teller strong { display: block; font-family: var(--m27-font-titel); font-size: 21px; color: var(--m27-donkergroen); line-height: 1.1; } .gb-teller span { font-size: 12px; letter-spacing: var(--m27-ls-label); text-transform: uppercase; color: #8a857e; } /* ------------------------- Filters en sortering ------------------------ */ .gb-balk { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid #efece6; } .gb-groep { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .gb-groep__label { font-size: 11.5px; letter-spacing: var(--m27-ls-label); text-transform: uppercase; color: #8a857e; margin-right: 2px; } .gb-pill { font: inherit; font-size: 12.5px; padding: 7px 14px; border: 1.5px solid #dad5cd; border-radius: var(--m27-radius-pill); background: #fff; color: var(--m27-tekst); cursor: pointer; } .gb-pill.actief { background: var(--m27-paars); border-color: var(--m27-paars); color: #fff; } .gb-pill:focus-visible { outline: 3px solid var(--m27-lila); outline-offset: 2px; } .gb-sorteer { display: flex; align-items: center; gap: 8px; margin-left: auto; } .gb-sorteer label { font-size: 11.5px; letter-spacing: var(--m27-ls-label); text-transform: uppercase; color: #8a857e; } .gb-sorteer select { font: inherit; font-size: 13.5px; font-weight: 300; padding: 7px 12px; border: 1.5px solid #dad5cd; border-radius: 14px; background: #fff; } /* ---------------------------- Het rooster ------------------------------ */ .gb-rooster { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-top: 18px; } .gb-kaart { background: #fff; border: 1px solid #eae6de; border-radius: var(--m27-radius-kaart); overflow: hidden; box-shadow: 0 2px 10px rgba(90, 104, 80, 0.05); display: flex; flex-direction: column; } .gb-beeld { aspect-ratio: 1; background: #ece8e0; position: relative; display: block; } .gb-beeld img, .gb-beeld video { width: 100%; height: 100%; object-fit: cover; display: block; } .gb-beeld--audio { display: grid; place-items: center; background: var(--m27-donkergroen); color: #fff; padding: 16px; text-align: center; } .gb-beeld--audio svg { width: 34px; height: 34px; opacity: 0.85; } .gb-type { position: absolute; top: 8px; left: 8px; background: rgba(47, 33, 64, 0.8); color: #fff; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; } .gb-inhoud { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .gb-naam { font-family: var(--m27-font-titel); font-size: 16px; color: var(--m27-donkergroen); } .gb-meta { font-size: 12.5px; color: #8a857e; } .gb-bericht { font-size: 13.5px; } .gb-kaart audio { width: 100%; } .gb-acties { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; } .gb-acties .m27-btn { font-size: 12.5px; padding: 7px 13px; } .gb-leeg { padding: 26px 0; color: #8a857e; font-size: 14px; } .gb-resultaat { font-size: 13px; color: #8a857e; margin-top: 12px; } /* ------------------------- Als het misloopt ---------------------------- */ /* Vroeger bleef het rooster gewoon leeg als de bijdragen niet opgehaald konden worden. Dan lijkt het alsof er niets is ingestuurd, terwijl er enkel geen verbinding is. Daarom een eerlijk bericht met een knop. */ .gb-storing { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 16px 18px; margin-top: 18px; border: 1.5px solid #e6d7cf; border-radius: var(--m27-radius-kaart); background: #fdf6f3; } .gb-storing p { flex: 1; min-width: 220px; font-size: 13.5px; color: var(--m27-tekst); margin: 0; } /* --------------------------- Smalle schermen --------------------------- */ @media (max-width: 600px) { .gb-rooster { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .gb-sorteer { margin-left: 0; width: 100%; } .gb-sorteer select { flex: 1; } .gb-inhoud { padding: 12px 13px 13px; } .gb-acties .m27-btn { font-size: 12px; padding: 7px 11px; } }