/* ── 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;
}
}
1 reactie Commentaar van bezoekers
Zooals onzen lezers misschien wel bekend zal zijn, heeft in de vorige week op de Merwekade een wedstrijd plaats gehad in het hoepelen en vélocipède-rijden. De heer J. v.d. Heijden had daartoe, op aandringen van den jongenheer Joh. Hoobrockx het initiatief genomen. Het viel toen zoozeer in den smaak van de deelnemers, dat andere heeren bij den heer J. v. d. Heijden op eene herhaling op grootere schaal aandrongen en hunne medewerking toezegden. Hiervan was het gevolg, dat aanvraag voor een wedstrijd werd gedaan en toestemming werd verleend. Het weder liet zich heden wel donker aanzien, zoo zelfs dat de wimpel op den Grootekerkstoren verscheen en daarmede de oefeningen van de schutterij werden uitgesteld, maar het bleef er bij. Geen druppel regen viel er. Dat een Wedstrijd als bovengenoemde niet alleen in den smaak viel van enkelen, maar velen hierin belangstellen, bewees de groote menigte die zich voor den aanvang van den wedstrijd reeds op den Burgemeester de Raadtsingel bewoog. Ook hadden velen zich doen inschrijven om er aan deel te nemen. Voor het hoepelen door jongens hadden 33 van deze laatsten zich op de lijst doen plaatsen, die door de commissie in 8 categoriën waren verdeeld, nl. groote, middel soort en kleine jongens. Van de grootste jongens, 12 in getal, werd een prijs behaald door A. Duijtsen, Jan Loekemeijer, Albert v. d. Ven, Corn. Straatman en Jac. Vliegenthart en een premie door Simon van Brakel, Adr. Waterbeek en Anton Tromer. Van de 12 jongens van de 2e categorie werd een prijs behaald door W. v. Brakel, Jac Brand, W. Klein, Jan Galmeijer en L. v. Wijk en een premie door Aug. Bovenkamp, Jan v. Oorschot, W. de Hoog en Alb. Degens; terwijl van de 9 kleinste jongens of van de 1e categorie een prijs werd toegekend aan Sillevis, M. v. Asperen en een premie aan H. Boudier, H. Eigeman en Fr. v. Dalen. Was, zooals uit het hierbovenstaande bleek, de belangstelling bij de jongens groot, de meisjes waren niet ten achteren gebleven. Trouwens dit was wel vooruit te zien, daar in den laatsten tijd als door een tooverslag alle meisjes met houten hoepels werden gezien en deze zich nog meer met hoepelen vermaakten dan de jongens. De uitslag was dat van de 9 grootste meisjes een prijs kon worden toegekend aan Cato Eigeman, Johanna de Kluizenaar en Anna Spruijt, en eene premie aan Anno v. Wel, Sophia v.d. Straaten en Pl. Saarloos. Hierop wedijverden 18 kleinere meisjes, waarvan een prijs kregen Anna de Hoog, Henriette v. Hemert, Adriana Barto, Elisaheth v. Seventer, Rika de Reus en ? Lawende, en eene premie Johanna Brand, Adriana v. Loon, Gonda Bovenkamp en Elisabeth Lamoen. Eindelijk kregen van de 12 kleinste meisjes een prijs Elisabeth Pennock, Anna Mast, Adr. Degens en Adr. Koster. Aan den wedstrijd in het velocipède-rijden namen niet zoovelen deel, slechts een achttal had zich doen inschrijven. Hiervan werd een prijs toegekend aan M. van Zanten, Th. Luyken en ? de Kluizenaar en een premie aan N. Kriens en Joh. Reus. De wedstrijd hiermede geëindigd zijnde, vereenigden de deelnemers en ontwerpers van het feest, tot welke laatsten de heeren M. van Zanten en H. Pennock behoorden, zich in de zaal van den heer Ponsen, waar eerstgenoemden door de laatsten nog werden onthaald en werd overgegaan tot de uitreiking der prijzen. Hiermede belastte zich de heer M. v. Zanten, die toonde daarvoor de geschikte persoon te zijn. Op eene voor de kinderen begrijpelijke wijze vertelde hij hun hoe de oude Grieken en Batavieren zich steeds flink lichamelijk hadden geoefend en daarvan in het strijdperk de bewijzen aflegden. Zoo ook moeten de Hollandsche jongens worden. Na afoop der uren voor het leeren bestemd, moeten zij alles aanwenden om hun lichaam te oefenen en trachten echte Hollandsche jongens te worden. Luide hoerah’s braken hierop de rede van den spreker af, die vervolgens zijn dank bragt aan hen die tot het welslagen van dezen wedstrijd hadden medegewerkt, vooral aan de politie, die getoond had gaarne daarvoor iets over te hebben. Dat ook de heer van Zanten natuurlijk niet vergat de kinderen te prijzen om hunne ordelijkheid spreekt van zelf. De prijzen bestonden voor de jongens in verschillende artikelen als schrijfmappcn, griffelkokers enz., en voor de meisjes in voor haar geschikte zaken. Na de uitreiking keerden de deelnemers en deelneemsters vergenoegd huiswaarts, dat met de ontwerpers van het feest zeker ook wel het geval zal zijn geweest. De ordelijkheid die er heerschte en de belangstelling die getoond is, kunnen voor hen wel niet anders dan een gevoel van zelfvoldoening hebben opgewekt.