/* ── 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;
}
}
14 reacties Commentaar van bezoekers
Bij 552_407582 schreef ik nog richting Ad: "Het kan absoluut niet het torentje van de Waalse kerk zijn Ad. Lees even terug. Het is lastig omdat idee los te laten wanneer je er eenmaal in vast hebt gebeten :)". Nu blijkt dat ik daar zelf het meeste last van had. (Sorry Ad). Nu kijk ik ook op een andere manier op 552_407582 het straatje in en zie rechtsachter (rechts van de trapgevel het "Oude Vrouwenhuis" met op het einde een puntgevel, waarvan op 551_35773 de voorgevel met trapgevels) . Rutten heeft dan waarschijnlijk in het bredere deel gezeten (H368-H378) toen hij dit voor zich zag. De rooilijn links kromt naar links zodat je niet de laatste/achterste pandjes kan zien, zoals de toegang naar de Lammetjesgang. Achteraf kan ik zeggen dat ik me teveel heb laten leiden door wat ik bij alle varianten van 552_407582 gelezen heb betreffende het torentje van de Spuipoort wat nu, ook volgens mijn overtuiging het torentje van de Waalse Kerk is. Bedankt Pim.
Hierbij ga ik er ook vanuit dat wat ik lees op https://www.canonvannederland.nl/nl/page/159642/johannes-rutten ook zo is. Wanneer Jan Rutten z'n ezel net voor H382 zet is de kans vele malen groter het torentje van de Spuipoort (552_231678) te zien dan dat van de Waalse kerk (552_231814). Dat het torentje niet helemaal lijkt vind ik niet zo bijzonder omdat het hier van ondergeschikt belang is. Wanneer Rutten deze discussie had kunnen voorzien had hij vast beter z'n best erop gedaan. Maar is het dus niet zo dat we naar het ouderlijk huis kijken, maar dat Jan z'n ezel hier rechts om de hoek heeft neergezet dan kijken richting de noordwestelijke hoek van het Achterom en dan is het torentje inderdaad van de Waalse Kerk en kijken we dus allerminst naar zijn ouderlijk huis. Als als als ...
=================================================================== Download =================================================================== Deze afbeelding is gratis te downloaden met de knop die u hieronder aantreft. =================================================================== Bij gebruik van de afbeelding voor publicaties of internet dient u de bronvermelding op te geven: Rijksdienst voor het Cultureel Erfgoed, Amersfoort / Documentnummer =================================================================== Meer informatie over de rechten vindt u in het tabblad Rechten op de hoofdpagina van deze Beeldbank. =================================================================== Het lijkt me beter dat toch nog even te vermelden ;)
Bij 552_407582 schrijf je: "Dat perceel wordt niet aangeduid op 552_130912, maar het is het middelste huis van het blokje van 3 rechtsonder van het woord ‘achter’." Ik neem aan dat je bedoelde 'linksonder'? Bij 551_30031 ga ik ook wat dieper in op de z.g.n. Lammetjiesgang / Lammetjesgang / Lammeregang en D776, kadastraal H365 (zijn 3 woningen). Ik hoop dat degenen die bij 552_407582 niets van het torentje van de Spuipoort wilden weten, dat nu wél willen. Het enige wat je ervoor nodig hebt is de MIN08037H01 en een liniaaltje of iets dergelijks. Download hier MIN08037H01: https://images.memorix.nl/rce/download/fullsize/778f3c69-3a55-ee4e-ec86-add77e0131a9.jpg
Johannes Rutten was fel gekant tegen de afbraak van de binnenstad. Ja, ook toen al! En dankzij zijn talloze aquarellen en tekeningen van gebouwen, poorten en stadsgezichten zijn we nu in staat om te zien hoe het negentiende-eeuwse Dordrecht er uit heeft gezien. Ondanks zijn eenvoudige komaf – hij groeide op in de handel in lompen en oud ijzer van zijn vader in het Achterom – werd Johannes Rutten dankzij zijn talent al jong leerling van kunstschilder Abraham van Strij sr. (1753-1826). Toen deze overleed, kwam hij in de leer bij George Adam Schmidt (1791-1844), die faam genoot als schilder van interieurs. Rutten richtte zich op het schilderen van kerkinterieurs. Al op zijn twintigste trad hij toe als werkend lid van Teekengenootschap Pictura. Hiernaast was hij ook lid van toneelgezelschap Thalia, waarin hij de betere kringen uit het Dordtse culturele leven van die tijd trof. In 1833 werd hij tekenleraar aan de Stads Bouwkundige Tekenschool voor bouwkundig en technisch onderwijs, waar de bekende Dordtse stadsarchitect G.N. Itz (1799-1869) directeur van was. Van Itz kunnen we nog steeds de Damiatebrug, de Lange IJzerenbrug, het verbouwde stadhuis, het Dordrechts Museum en vele andere werken in de stad aantreffen. Het ging inmiddels goed met Johannes. Hij vestigde zich aan de Voorstraat en in 1837 won hij een belangrijke ereprijs van de Groningse Academie Minerva voor zijn doek ‘Kerkgezicht van binnen’. Hij kreeg vanuit zijn werk ook steeds meer oog voor de architectuur van huizen, bruggen, poorten en wat dies meer zij in de stad. De samenwerking met Itz speelde in dit verband vooral na 1847 een steeds grotere rol in het werk van Rutten. Er waren grootse sloopplannen. Het was dus zaak om de tot afbraak gedoemde stadsgezichten voor de vergetelheid te behoeden. Veel van zijn werk uit die tijd maakte hij in opdracht van Itz. Daarbij verloor Rutten nooit details als gevels, uithangborden, muurankers, en dergelijke uit het oog. In deze tijd bouwde hij een oeuvre op bestaande uit tal van tekeningen en aquarellen. Hun voorliefde voor het oude Dordrecht werd gedeeld door de jongere Simon van Gijn (1836-1922), de verwoede verzamelaar aan wie Dordrecht het museum Huis van Gijn te danken heeft. Rutten had hem de beginselen van het tekenen bijgebracht. Simon streed met Itz en Rutten voor het behoud van het in hun ogen zo mooie oude Dordrecht. Dit was echter in de eerste helft van de negentiende eeuw verwaarloosd en ook hadden veel oudere gebouwen inmiddels hun functie verloren. Poorten en andere verdedigingswerken werden meer en meer als sta-in-de-weg ervaren in een wereld waarin moderne technieken andere eisen begonnen te stellen aan de inrichting van de maatschappij. Het is aan mensen als Rutten, Itz en Van Gijn te danken dat we nog zoveel beeld hebben van het Dordrecht dat in de tweede helft van de negentiende eeuw onherroepelijk tegen de vlakte ging. Van Gijn verzamelde afbeeldingen, waarmee hij vanaf 1868 de Atlas Dordracum Illustratum begon. Hierin zou het werk van Rutten een toonaangevende plek krijgen. Op latere leeftijd kreeg Rutten in toenemende mate problemen met zijn zicht en moest hij zich terugtrekken uit zijn kunstenaarschap. Hij overleed op 6 oktober 1884 en werd op de Algemene Begraafplaats begraven.