/* ── 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;
}
}
10 reacties Commentaar van bezoekers
Maar net zoals Google is ook de Dordrechtsche Courant m'n vriend :)
Kijk eens naar 552_318892. Het betreft hier de productie van de caissons in de Wilhelminahaven. Uit de Dordrechtsche Courant van 29 maart 1928: "De werkzaamheden aan de zeehaven. Gisteren zijn we eens een kijkje gaan nemen bij de zeehaven, de veel besproken zeehaven, onderwerp van ernstige overwegingen, en soms van sarcastische spotternij . . . . . . Op de tentoonstelling voor „Vak en Kunst”, verbonden aan de „Dawet”, trok de stand van de Gemeentewerken aller aandacht, en daar heeft men een buitengewoon interessant overzicht van de zeehavenwerken. De grootsche opzet trof allen, zoodat de dwaze praatjes en glossen nu wel de wereld uit zullen gaan. Nadat we tegen den storm in naar de zeehaven gefietst waren, konden we al gauw van die „vermoeienis” bekomen in de geriefelijke Directiekeet onder het genot van een kopje geurige thee. Ir. A. G. Versteeg gaf ons daar een zeer duidelijke uiteenzetting van de te maken los- en laad-inrichting. Deze uiteenzetting werd zeer vergemakkelijkt door de maquette die van de „Vak en Kunst"-tentoonstelling verhuisd was naar de Zeehavenwerken. Hieronder volgt een korte uiteenzetting van de werkzaamheden; Nadat in Juli 1926 door den Raad tot het maken van een los- en laadinrichting in de zeehaven was besloten is begonnen met de verdere voorbereiding en uitwerking der plannen. Al spoedig bleek dat het maken van een grondverbetering noodzakelijk was; hiermede werd dan ook in Januari 1927 een aanvang gemaakt door de firma. L. Volker te Sliedrecht. De slechte grondlagen, waaronder veenlagen ter dikte van 5 M. werden verwijderd tot op een diepte varieerend van 13.50 tot 15 M. minus N.A.P. en vervangen door rivierzand; bovendien werd een ballastdam opgeworpen ter hoogte van 6 M. plus N.A.P. met een kruinbreedte van 15 M. Deze grondverbetering, waarvoor een grondverzet van 500.000 M3 heeft plaats gehad, kwam in Augustus 1927 gereed, in welke maand tevens de aanbesteding van de pier, bestemd voor aanlegplaats van diepgaande schepen, plaats had. Deze pier heeft een lengte van 280 M., hetgeen voldoende is om aan 2 zeeschepen van 9 á 10.000 ton achter elkaar ligplaats te verschaffen; de waterdiep- te buiten de pier zal bedragen 9 M. Als type van constructie is gekozen de caissonpier dat is een pier samengesteld uit verschillende groote bakken van gewapend beton (caissons) als onderbouw, waarop kademuren van stampbeton als bovenbouw zijn geplaatst. De pier bestaat uit 7 caissons elk lang 40 M., bovenbreedte 9,75 M., bodembreedte 11 M. Deze caissons worden gebouwd in een dok tot zoodanig: hoogte dat zij voldoende drijfvermogen hebben om uit het dok gedreven te kunnen worden waarna zij verder drijvende worden opgebouwd. De aanneemster, de Holl. Beton Mij. tot het maken van werken in gewapend beton te Den Haag, heeft voor de vervaardiging der caissons een bijzonder en zeer bezienswaardige installatie in de zeehaven gebouwd, welke er geheel op berekend is zoo economisch mogelijk de periodiek terugkomende werkzaamheden te verrichten; welke voor het vervaardigen der caissons noodig zijn. De voorbereiding hiervoor heeft veel tijd in beslag genomen (o.a. moest een drijvend dok van gewapend beton en twee ijzeren bruggen elk ter lengte van ca. 40 M. worden gebouwd) doch men is thans in staat, de benodigde caissons in korten tijd af te leveren. Intusschen heeft in December 1927 de aanbesteding van den kademuur langs de binnenhaven, eveneens ter lengte van 280 M. doch met 4.50 M. waterdiepte vóór den muur, plaats gehad. De meest aannemelijke aanbieding hiervoor bleek die van de Hol. Beton Mij. te zijn met een caissonproject; pier en kade worden dus thans als één geheel door dezelfde Mij. uitgevoerd. Wat de stand van het werk op heden betreft, kan worden medegedeeld dat men bezig is de ballastdam, welke zijn dienst heeft gedaan, weg te baggeren terwijl tevens de noodige diepte gebaggerd wordt om de eerste binnen enkele weken gereed komende caissons, te kunnen plaatsen. De caissons worden nl. nadat zij tot volle hoogte opgetrokken zijn, drijvende naar de plaats van bestemming gesleept en daar door het inpompen van waterballast zuiver op de juiste plaats aan den grond gezet; vervolgens worden zij gevuld met zand waarna, na verloop van eenigen tijd, de bovenbouw kan worden aangebracht. Op het oogenblik is één kademuur-caisson gereed, één piercaisson wordt drijvend buiten het dok verder opgebouwd, terwijl de tweede kademuur-caisson in het dok in aanbouw is; het laat zich aanzien dat binnen 2 á. 3 weken deze drie caissons geheel afgewerkt zullen zijn. Het werkplan is zoodanig dat in Augtustus a.s. ongeveer de helft der lengte ad 280 M. van pier en kademuur gereed zullen komen, in dien tusschentijd zal ook het achterliggende opslagterrein gedeeltelijk opgehoogd kunnen zijn. Verwacht wordt dat de pier, de kademuur, het opslagterrein en de binnenhaven ongeveer 1 januari 1929 kunnen worden opgeleverd aan welke werken alsdan een bedrag van ongeveer 9 ton zal zijn ten koste gelegd. Het ligt verder in de bedoeling met de montage van de eerste der vier groote brugkranen in Juli of Augustus a.s. te beginnen."