/* ── Custom properties ──────────────────────────────────── */
:host {
--enviso-primary-color: #43D9EC;
--enviso-secondary-color: #111111;
--enviso-tertiary-color: #F8F3EC;
}
/* ── Card host: remove default white card look ───────────── */
:host(:has(section.enviso-offer-card)) {
background: #111111;
box-shadow: none;
border-radius: 20px;
overflow: hidden;
}
/* ── Card section: make it a positioned container ────────── */
section.enviso-offer-card {
position: relative;
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 20px;
}
/* ── Image container fills the full card ─────────────────── */
.enviso-offer-availability-picture {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* ── Image itself fills its container ───────────────────── */
span.enviso-offer-picture {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
aspect-ratio: unset !important;
border-radius: 0;
}
/* ── Gradient overlay sits above the image ───────────────── */
.enviso-offer-availability-picture::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.88) 0%,
rgba(0, 0, 0, 0.45) 45%,
rgba(0, 0, 0, 0) 75%
);
pointer-events: none;
z-index: 1;
}
/* ── Text info block: pinned above the buttons ───────────── */
.enviso-offer-info {
position: absolute;
bottom: 3.25em;
left: 0;
right: 0;
padding: 0 0.85em 0.25em;
min-height: unset;
z-index: 2;
}
header.enviso-offer-name > span {
color: #ffffff;
font-size: 1.1em;
}
summary.enviso-offer-details > span {
color: rgba(255, 255, 255, 0.75);
}
p.enviso-offer-short-description > span {
color: rgba(255, 255, 255, 0.7);
}
.enviso-btn.primary {
color: #000;
}
/* ── Action buttons: pinned at the bottom ────────────────── */
nav.enviso-offer-actions {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
border-top: none;
padding: 0 0.75em 0.65em;
gap: 0.5em;
background: transparent;
}
nav.enviso-offer-actions > enviso-button {
color: #fff;
border: 2px solid rgba(255, 255, 255, 0.75) !important;
border-radius: 99em !important;
font-family: "Maison Neue Demi", Arial, sans-serif;
background: rgba(0, 0, 0, 0);
backdrop-filter: blur(4px);
height: 2.8em;
font-size: 0.9em;
}
/* override the separator rule so both borders are white */
nav.enviso-offer-actions > enviso-button + enviso-button {
border-left: 1.5px solid rgba(255, 255, 255, 0.75) !important;
}
/* ════════════════════════════════════════════════════════════
UPSELL / CAROUSEL CARD — mirrors the offer card treatment
════════════════════════════════════════════════════════════ */
/* ── Host: strip default card chrome ────────────────────── */
:host(:has(section.enviso-upsell-offer-card)) {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
background: transparent;
box-shadow: none;
border-radius: 20px;
overflow: hidden;
}
/* ── Size the cross-sell card from its parent shadow root ── */
enviso-cross-sell-offer-card {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
max-width: 350px;
}
/* ── Outer section + inner content: single stacking context ─ */
section.enviso-upsell-offer-card {
position: relative;
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 20px;
width: 100%;
}
.enviso-card-content {
position: absolute;
inset: 0;
display: block;
background: transparent;
box-shadow: none;
border-radius: 20px;
width: 100%;
height: 100%;
overflow: hidden;
}
/* ── Children of card-content: remove their own flex layout ─ */
.enviso-card-content > div {
display: block;
}
/* ── Image fills the card ────────────────────────────────── */
div.enviso-upsell-offer-picture {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
aspect-ratio: unset !important;
background-size: cover;
background-position: center;
border-radius: 0;
}
/* ── Gradient overlay ────────────────────────────────────── */
div.enviso-upsell-offer-picture::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.88) 0%,
rgba(0, 0, 0, 0.45) 45%,
rgba(0, 0, 0, 0) 75%
);
pointer-events: none;
}
/* ── Title: pinned above the action row ─────────────────── */
header.enviso-offer-name {
position: absolute;
bottom: 3.25em;
left: 0;
right: 0;
margin: 0;
padding: 0 0.85em 0.25em;
z-index: 2;
}
header.enviso-offer-name > span {
color: #ffffff;
font-size: 1.1em;
}
/* ── "Meer info" pill button ─────────────────────────────── */
summary.enviso-offer-details {
z-index: 2;
display: none;
}
summary.enviso-offer-details:has(span:not(:empty)) {
display: inline-flex;
align-items: center;
justify-content: center;
height: 2.8em;
padding: 0 1.2em;
border: 2px solid rgba(255, 255, 255, 0.75);
border-radius: 99em;
background: rgba(0, 0, 0, 0);
backdrop-filter: blur(4px);
cursor: pointer;
}
summary.enviso-offer-details > span {
color: #ffffff;
font-family: "Maison Neue Demi", Arial, sans-serif;
font-size: 0.9em;
text-decoration: none;
}
/* ── Action row: pinned at the bottom ────────────────────── */
.enviso-details-container {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 0 0.75em 0.65em;
background: transparent;
}
/* ── Reset the price/details child div ───────────────────── */
.enviso-details-container > div {
font-size: 1em;
margin: 0;
}
/* ── + icon: strip button chrome, show just the icon ────── */
.enviso-upsell-button {
color: #ffffff !important;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
backdrop-filter: none !important;
box-shadow: none !important;
height: auto !important;
width: auto !important;
min-height: 0 !important;
min-width: 0 !important;
max-width: none !important;
font-size: 2em;
padding: 0 !important;
}
/* ── + icon internals (enviso-button shadow DOM) ─────────── */
:host(.enviso-upsell-button) {
border: none !important;
background: transparent !important;
box-shadow: none !important;
height: auto !important;
width: auto !important;
min-height: 0 !important;
min-width: 0 !important;
max-width: none !important;
padding: 0 !important;
}
:host(.enviso-upsell-button) .enviso-btn {
padding: 0 !important;
width: auto !important;
height: auto !important;
}
:host(.enviso-upsell-button) .enviso-btn.icon-only > enviso-icon {
display: block;
}
:host(.enviso-upsell-button) svg {
fill: #ffffff !important;
}
/* ════════════════════════════════════════════════════════════
CALENDAR — tweak the variables below to restyle the picker
════════════════════════════════════════════════════════════ */
:host {
/* gap between every date cell */
--cal-cell-spacing: 6px;
/* corner rounding on each cell */
--cal-cell-radius: 6px;
/* border colour of available cells */
--cal-cell-border: rgba(0, 0, 0, 0);
/* normal cell background */
--cal-cell-bg: #FFF3E8 !important;
/* disabled / past cell */
--cal-cell-disabled-bg: #f0f0f0;
--cal-cell-disabled-color: #bbbbbb;
/* today highlight colour */
--cal-today-color: #FDD6AF;
/* selected / range cell */
--cal-selected-color: #FDD6AF;
}
/* ── Calendar host: border & radius ─────────────────────── */
:host(:has(table.enviso-month)) {
border: 2px solid var(--cal-today-color);
border-radius: 16px;
overflow: hidden;
}
/* ── Separate cells with configurable gap ─────────────────── */
table.enviso-month {
border-collapse: separate;
border-spacing: var(--cal-cell-spacing);
}
/* ── Square cells
The widget ships height: 3.5em which turns cells into rectangles
once border-spacing eats into the column width.
With table-layout: fixed the browser sets all column widths first,
then aspect-ratio: 1 derives the row height from that width. ── */
.enviso-day {
aspect-ratio: 1 / 1;
}
/* ── Cell base appearance ────────────────────────────────── */
.enviso-dates .enviso-day {
border: 1px solid var(--cal-cell-border) !important;
background-color: var(--cal-cell-bg);
border-radius: var(--cal-cell-radius);
}
/* ── Hover: non-disabled cells get the accent border ────── */
.enviso-dates .enviso-day:not(.enviso-disabled):hover {
border: 2px solid var(--cal-today-color) !important;
}
/* ── State overrides ─────────────────────────────────────── */
.enviso-day.enviso-disabled {
background-color: var(--cal-cell-disabled-bg) !important;
color: var(--cal-cell-disabled-color) !important;
}
.enviso-day.enviso-today {
color: #000000 !important;
position: relative;
}
.enviso-day.enviso-today::after {
content: '';
position: absolute;
bottom: 20%;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #000000 !important;
}
.enviso-dates .enviso-day.enviso-selected,
.enviso-dates .enviso-day.enviso-range-start,
.enviso-dates .enviso-day.enviso-range-end {
outline-color: var(--cal-selected-color) !important;
border-color: var(--cal-selected-color) !important;
}
.enviso-dates .enviso-day.enviso-selected {
background-color: var(--cal-selected-color) !important;
}
.enviso-dates .enviso-day.enviso-in-range {
border-color: var(--cal-selected-color) !important;
}
/* ── Timeslot buttons ─────────────────────────────────────── */
.enviso-timeslot-button {
background-color: var(--cal-cell-bg) !important;
border: 1px solid var(--cal-today-color) !important;
border-radius: var(--cal-cell-radius) !important;
color: #000000 !important;
position: relative;
}
:host([selected]) .enviso-timeslot-button {
background-color: var(--cal-today-color) !important;
}
.enviso-timeslot-button::after {
content: '';
width: 0;
height: 0;
}
/* ── Cross-sell timeslots: remove margin-left on mobile ──── */
@media (max-width: 845px) {
.enviso-cross-sell-timeslots-container {
margin-left: 0 !important;
}
}
11 reacties Commentaar van bezoekers
De tekening, die Femke Zwier maakte toen Wijn met een straatnaam in het collectief geheugen werd opgenomen, symboliseert dat. Het gedicht over Wijnie was eerder voorgedragen in de gemeenteraad van Dordrecht, door VVD-gemeenteraadslid mr. Clarien A. Van der Beek. “Voor mijn fractiegenoot was het in de jaren zeventig van de vorige eeuw een gewoonte om bij de begrotingsbehandelingen een gedicht voor te dragen”, zo herinnert zich nog raadslid en later VVD-wethouder van 1976 tot 1981 ir. Jan Zaaijer. Zo kwam vanzelf gemeenteraadslid van de PvdA, Wijnie Giphart – Jabaaij, in het vizier, die toen nog aan de Gemmahof 12 in Sterrenburg woonde. Hoffelijke chique liberaal Van der Beek had buiten de stad Dordrecht als raadsheer bij het gerechtshof een prominente functie. In de raad had hij een bepaalde uitstraling als hoffelijke, chique liberaal. Zo beaamt Zaaijer. Het was in het tijdperk, dat de PvdA in de stad een dominante machtspositie had en koesterde met drie wethouders en een PvdA-burgemeester Jan H. van Zuuren. Toch zag Van der Beek de literaire ruimte om zijn mede-gemeenteraadslid Wijnie Jabaaij (toen nog Wijnie Giphart – Jabaaij) te omschrijven in dichtvorm. Groen geweten/bomenridder Ze had naam gemaakt als groen geweten van de stad Dordrecht. In haar tijd was zij in haar eentje in de politiek en daarbuiten de bomenridder. Het gedicht werd uitgesproken en daarna literair gepubliceerd . Dat was een jaar voordat Wijnie's politieke loopbaan verder ging in Den Haag als tweede kamerlid. De VVD politicus Van der Beek liet het gedicht in 1976 opnemen in het Dordtboek. Dat gratis boek werd toen breed verspreid in een oplage van twintigduizend exemplaren. Later werd nog eens poëzie van het VVD-raadslid in een Dordtboek opgenomen. Dat publiceerde hij onder de naam Klaroen met als toevoeging in de inhoudsopgave: mr. C.A. Van der Beek. Dordtboek 3: Hoe beleef ik de stad Het nummer met JUFFERTJE IN 'T GROEN paste bij het thema van nummer 3 van het Dordtboek. Dat was: “Hoe beleef ik de stad”. De samenstellers van dat gratis Dordtboek waren in 1976 : initiatiefnemer Heinz Schneeweis, Fred Lighart, Ad de Kool, Wil Gouweloos en C.Buddingh'. De tekst van het gedicht over Wijnie zoals het in Dordtboek 3 staat van het liberale mede-raadslid mr. C.A. Van der Beek : (In Dordrecht een boom omhakken, dát betekent onverbiddelijk een conflict met mevrouw Wijnie Giphart – Jabaaij, lid van de gemeenteraad) Wie in Dordrecht een kat of kip sart of een snoek of een sneep of een snip tart of een boom zomaar rooit of met onkruidgif strooit krijgt te doen met mevrouw Wijnie Giphart ---------------------------------------------------------------------------------------------------------------------------------- TOELICHTING IN HOOFDLIJNEN BIJ FOTO POLITIEK DORDRECHT 1974 Hieronder: Historische foto uit de beeldbank van de gemeenteraad 1974-1978 op de trappen van het Stadhuis na de installatie na de zomer van 1974. De vijf wethouders (PvdA 3, VVD 1 en christelijke partij 1) waren toen ook nog raadslid. De PvdA had negentien van de 39 zetels in bezit na de raadsverkiezingen 1974. Centraal in donker pak de op 2 mei 1974 - een dag na de dag van de arbeid - geïnstalleerde burgemeester Jan H. van Zuuren (PvdA). Het totaal geeft een tijdsbeeld. Geheel rechts onderste rij met diplomatenkoffer staat mr. C.A. van der Beek (VVD) Wijnie Giphart - Jabaaij (PvdA) tweede van links onderste rij. Zij staat rechts van de latere CDA-wethouder Gerard Hovius. De drie PvdA-wethouders: Tonie Kraayeveld (onderste rij rechts naast Van Zuuren), iets verder naar rechts Kees de Groen en helemaal rechts boven aan Piet C. Janse. Ze zijn herkenbaar aan het vasthouden van bos rode rozen. Bovenaan links naast Piet Janse staat de latere VVD-wethouder vanaf 1976 Jan Zaaijer. Onder hem staat PvdA raadslid Arie O Hartog, die als burgemeester nog Geertruidenberg diende. Hij is nu de oudste inwoner (103 jaar) van de Hoeksche Waard. Twee rijen boven burgemeester Van Zuuren de latere VVD-minister Gijs van Aardenne. Rechts van hem C.Brouwer (VVD-wethouder 1974). Daarnaast iets hoger met een pijp in de hand de latere ereburger en CPN-raadslid Kees Stek. Links van de latere minister Van Aardenne: Nico Maas (VVD-wethouder 1981-1987), vervolgens VVD-fractievoorzitter voor een periode ir. Theo Brans, Kees de Kovel (tussen 1974 en 1986 wethouder christelijke partijen en daarna burgemeester Nunspeet). Liggend voor of aan de voeten van de burgemeester: PvdA raadslid Herna Latooij. Album afbeelding 1: Gemeenteraad 1974-1978 (foto beeldbank archief)