/* ── 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;
}
}
2 reacties Commentaar van bezoekers
551_10613) en misschien dan ook wel 'leuk' de krant van de volgende dag erop na te kunnen slaan Uit de Dordrechtsche Courant (middag-uitgave) van vrijdag 3 juni 1910: Ernstig tramwegongeluk. Gisterenavond heeft op de lijn Goudswaard——Oud-Beijerland der Rotterdamsche Tramweg Maatschappij een ernstig ongeluk plaats gehad, waarbij twee menschen zijn om het leven gekomen,één persoon levensgevaarlijk en nog anderen ernstig gewond werden. Te 6.15 was gisterennamiddag, op den gewonen tijd dus, uit Goudswaard afgereden de Stoomtram naar Krooswijk, waar zij aansluiting krijgt op de trams naar Numansdorp, naar Rotterdam en via Middeldijk naar Zwijndrecht. In de bocht van den Zinkweg en den Groeneweg, op ongeveer 15 minuten afstands van Oud-Beijerland, ontspoorde eensklaps, door een tot nog toe onbekende oorzaak, de locomotief. Daar de tram met een betrekkelijk groote vaart reed, stootte de locomotief zóó krachtig buiten de rails, dat zij omsloeg en de grond meer dan een halven meter werd omgewoeld, terwijl de rails verbogen werden. Het achter de locomotief volgende tramrijtuig werd eveneens buiten de rails gerukt, doch bleef nog schuin staan, terwijl de koppelstangen afbraken. Door de vaart werd de wagen echter tegen de locomotief aangeduwd, waardoor hij vrijwel verbrijzeld werd. Van den tweeden passagierswagen werden enkele ruiten vernield. Op de locomotief bevonden zich de 26-jarige machinist De Vroedt en de 18-jarige stoker J. Petersen, beiden woonachtig te Oud-Beijerland. Men weet niet, of de tweede stoker, de 19-jarige A. v. d. Polder, eveneens uit Oud-Beijerland afkomstig, zich op, het oogenblik van het ongeluk op de locomotief bevond, dan wel op het voorbalcon van den eerste passagierswagen. Doch in ieder geval kwamen beide stokers tusschen en onder de wagens terecht en werden zij onmiddellijk gedood. De machinist kwam er betrekkelijk beter af, al lag ook hij hulpeloos tusschen de ruïne. Hij was niet gekneusd en had geen ledematen gebroken, doch hij was deerlijk gebrand door het uit den oven gestorte vuur, waardoor hij ernstige verwondingen over het geheele lichaam had bekomen. De conducteur, de 34-jarige G. Wisse, wonende eveneens te Oud-Beijerland, was door den hevigen schok van den passagierswagen geslingerd, waardoor hij een dijbeen brak. De meeste reizigers, die in het verongelukte tramrijtuig zaten, kwamen met den schrik vrij. Alleen een dame, wier bestemming Oud-Beijerland was, en een heer, zekere W.. uit Zierikzee, bekwamen lichte kwetsuren en verwondingen. Onmiddellijk was van uit Oud-Beijerland assistentie ter plaatse, waaronder de geneesheer, en ook vele reizigers boden de behulpzame hand. De geneesheer constateerde den dood van de stokers Petersen en v. d. Polder. Hunne lijken werden naar de ouderlijke woningen in Oud-Beijerland overgebracht, waar men natuurlijk hevig ontsteld was en diep onder den indruk van het gebeurde verkeerde. Den ongelukkigen machinist werd voorloopige heelkundige hulp verleend. Toen inmiddels door de Directíe der R. T. M. een extra trein op de lijnen gezet was, kon de gewonde daarmede naar Rotterdam worden overgebracht. Tegen 11 uur kwam de tram in de Rosestraat aan, van waar de machinist per auto-ziekenwagen ter verdere verpleging naar het Ziekenhuis op den Coolsingel werd overgebracht. Zijn toestand was hoogst ernstig. Ook den conducteur Wisse, die, zooals gezegd, met een gebroken dijbeen was opgenomen, werd op de plaats des onheils door den dokter van Oud-Beijerland hulp verleend, waarna hij naar de echtelijke woning gedragen werd. De reizigers die gewond waren, hebben na verbonden te zijn den nacht te Oud-Beijerland doorgebracht. Het terrein van het ongeluk bood in den zwaren mist, die door de rosse toortsen en lantaarns een vreemden schijn kreeg, een treurigen aanblik. De locomotief lag vernield, gebroken, gedeukt over de rails; het tramrijtuig was er in gedrongen en had de machine nog vooruitgeschoven. Tusschen de ruïne in smeulde en rookte een weinig vuur. Zoo bleef de massa tot 2 uur liggen. De directie der R. T. M. had intusschen voorbereidselen tot ontruiming getroffen. Te 12 uur vertrok uit Rotterdam een extra tram met materiaal en personeel naar de plaats des onheils, om te trachten den weg te ontruimen, opdat het verkeer hedenmorgen weer geregeld zou kunnen plaats vinden. Reeds gisterenavond ondervond het tramverkeer natuurlijk vertraging. De te 8.44 uit Goudswaard Vertrokken tram kon niet verder stoomen, zoodat ook deze passagiers met een extra Wagen naar Rotterdam vervoerd moesten worden. Hedenmiddag begaf de Officier van Justitie te Dordrecht, de heer mr. G. J. W. van Tricht, vergezeld door andere rechterlijke ambtenaren, met de instructie van strafzaken belast, zich naar de plaats, waar het ongeluk heeft plaats gegrepen.