/* ── 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;
}
}
3 reacties Commentaar van bezoekers
De stoomspuit stond vanaf oktober 1911 opgesteld in het nieuwe onderkomen aan het Kromhout 11, het vroegere bureau van de bouwpolitie. De stoomspuit stond steeds voor direct gebruik gereed, met het vuur ingelegd, zodat het onder het rijden aangestoken en stoom gemaakt kon worden en daardoor binnen 10 minuten operationeel was. De spuit werkte met twee stralen die tot ca 32 mtr hoog en 41 mtr ver konden reiken. Van de eerste motorspuiten was bekend dat de aanzuighoogte van het water niet echt geweldig was. Er werden dan ook bij laagwater problemen mee verwacht. Uiteraard is men er uiteindelijk voor gezwicht, naarmate ook de prestaties beter werden. De stoomwagen is in de periode 1940- 1950 voor 250,- gulden als schroot verkocht. Zie ook 552_321673, 552_321711 en 552_315776. =================================================================== Bijnamen: Koperen Jan en Het Koperen Dingetje. =================================================================== De naam "Het Koperen Dingetje" was ook de bijnaam van de Abeele voetbal wisselbeker, welke Nederland en België vóór WOII elkaar probeerden te ontfutselen. Eind jaren twintig werd de naam ook voor de stoomspuit gebruikt. Ook werd die naam voor het fiets-belastingplaatje gebruikt. Over de bijnaam Koperen Jan heb ik niets kunnen vinden, dus ook niet ten aanzien van de stoomspuit. =================================================================== De Dordrechtsche Courant, 11 februari 1935: =================================================================== DE BRANDWEER NEEMT AFSCHEID =================================================================== Défilé voor den vertrekkenden generaal – brandmeester =================================================================== Treffende huldiging =================================================================== Het was Zaterdag voor onze brandweermannen een zeer gewichtige dag. Immers, zij moesten afscheid nemen van hun chef, den generaal-brandmeester, den heer P. de Graaff, den man, die het brandweerkorps, gedurende de 8 jaren dat de leiding daarvan aan hem was toevertrouwd, op zóó'n hoog peil heeft gebracht, dat het voor vele gemeenten tot voorbeeld kan strekken. Welke vorm van afscheid nemen had origineeler en hartelijker kunnen zijn, dan het houden van een defilé met alle gasten en al het mooie materiaal, zooals Zaterdagmiddag geschiedde? Inderdaad, het was een treffende plechtigheid, die zeker den heer de Graaff zelf niet het minst gepakt heeft. =================================================================== DE STOET. =================================================================== Ongeveer half 3 werd van de remise aan de Vest afgemarcheerd met aan den kop van de stoet het Dordrechtsch Politie-Harmoniegezelschap. Vlak hierop volgde de prachtige Faunspuit, die onlangs volgens een door den heer de Graaff uitgedachte methode werd vervaardigd en bij het korps ondergebracht. Daarna kwamen, de Magirus-ladder, tal van slangenwagens, de sproeiwagen, de motorspuit van Krispijn, de Laffly en tot slot het Harmonie- korps en ...... .. het sterke koperen dingetje, getrokken door gepluimde paarden. Via de Vest, Steegoversloot, Voorstraat, Nieuwbrug, Wijnstraat, Groenmarkt, Stadhuisplein (waar een photo van het geheele gezelschap op de trappen van het Stadhuis werd gemaakt) ‚ Lombardstraat, Lange Breestraat, Bagijnhof, Johan de Wittstraat, Johan de Wittbrug, Corn. de Wittstraat, Beverwijckstraat, werd naar het Beverwijckplein gemarcheerd, waar het défilé zou worden gehouden. =================================================================== HET DEFILE. =================================================================== Op het bordes van het Gemeentegebouw, had den de heer P. de Graaff, de scheidende chef, wethouder J. Sanders, mr. J. Beierman, archivaris e. a. zich verzameld. De stoet, thans vooraf gegaan door een delegatie van brandmeesters en commandeurs, trokken hun chef voorbij, maakte een ommegang op het plein, dat door de politie keurig was afgezet en stelde zich daarna in z’n geheel op voor de hoofdingang. =================================================================== TOESPRAKEN. =================================================================== De onder-brandmeester, de heer Brand, de rechterhand van den heer de Graaff, sprak nu namens de geheele vrijwillige brandweer den generaal-brandmeester toe. Spreker memoreerde de geweldige groei van het korps en de perfectioneering van het materiaal, die sinds het leiderschap van den heer de Graaff zijn geschied. Ook de samenwerking tusschen „baas en personeel" roemde de heer Brand. Voorts somde spreker een aantal schitterende, door den scheidende uitgevonden, verbeteringen op, die het werk van de brandweer zeer vergemakkelíjken. Als blijk van groote waardeering bood hij een prachtige symbolische plaquette aan, vergezeld van de toezegging van een foto van het geheele korps. De heer P. de Graaff dankte getroffen voor de spontane huldiging en wenschte het korps nog een lang en goed bestaan toe. (Fanfares en applaus). Spreker dankte ook de politie voor de immer verleende hulp en samenwerking. Tot slot dankte hij de muziekgezelschappen en het ijverige stille lid, den heer Nijhuis, voor de medewerking aan het defilé, terwijl ook het Gemeentebestuur bij de dankwoorden werd betrokken. Namens de politie roemde de heer G. Keuning de groote technische kwaliteiten van den heer den Graaff, die vaak de politie in hun moeilijke taak bijstonden. Immers, als de heer de Graaf een terrein van brand verliet, dan kon men er van verzekerd zijn, dat er geen gevaar meer was. =================================================================== DE AFMARSCH. =================================================================== Hierna volgde de afmarsch en ging men, omstuwd door een groote menigte, langs Oudenhovenstraat, Joh. de Wittstraat, Singel, Bleekersdìjk, Kromhout en Vest, weer naar de remise terug, alwaar de stoet werd ontbonden. Het was een prachtige vertooning, waarbij ook de stadgenooten hebben kunnen aanschouwen, tot welk een omvang onze trouwe, parate, vrijwillige brandweer is uitgegroeid, onder leiding van den heer P. de Graaff, die zich thans met z'n groote practische en theoretische kennis aan de belangen van den Haagschen Reinigingsdienst zal gaan wijden.