/* ── 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;
}
}
4 reacties Commentaar van bezoekers
-- VILLA SOEKASARI -- -- B. en W. stellen den Raad voor de villa van de familie Staring te koopen en er het Bureau van Gem.-Werken in te Vestigen. -- -- DE KOOPSOM IS f 70000. -- -- De op den hoek van het Kromhout gelegen terreinen voor verkoop beschikbaar. -- Toen na het overlijden van mevr. Staring, geb. Blussé, de villa Soekasari, gelegen aan den Singel, naast den ingang van het Park Merwestein‚ onbewoond geraakte, hebben B. en W. zich de vraag gesteld, of er voor de gemeente aanleiding moest bestaan, om te trachten deze naast het park gelegen bezitting in eigendom te verkrijgen. Zij hebben die vraag toestemmend beantwoord, voornamelijk uit de overweging, dat het wenschelijk moest worden geacht, dat de gemeente met het oog op de nabuurschap van het Park volledige zeggenschap zou verkrijgen in de wijze van exploitatie van de bij de villa gelegen erven, welke zich van den Singel tot den Groenedijk en van de Hallincqlaan tot het Park uitstrekken. Toen de notaris der familie Staring, de heer B. Kuipers, mededeelde, dat de eigenaars in beginsel tegen verkoop aan de gemeente geen bezwaar hadden, hebben B. en W. de villa met terreinen doen opnemen. Bij de bezichtiging der villa rees de vraag: is deze niet voor den publieken dienst te gebruiken? Al dadelijk is toen de gedachte opgekomen, dat de dienst der gemeentewerken, welke zeer bekrompen en geheel onvoldoende is gehuisvest in het gebouw Kromhout 55, naar ‚,Soekasari” zou kunnen verhuizen. De villa, welke in uitstekenden staat van onderhoud verkeert, bleek inderdaad voor dit doel heel goed geschikt te maken. B. en W. hebben toen ter zake van de exploitatie-mogelijkheid van het terrein en van de waarde der opstallen — behalve de villa bestaande uit twee woningen en een koetshuis — de voorlichting gevraagd van de betrokken hoofden van dienst en voorts het advies der Bouwcommissie ingewonnen. Een en ander heeft er toe geleid, dat zij de onderhandelingen met de familie Staring hebben voortgezet, met wie tenslotte op een koopprijs van f70.000.— overeenstemming werd verkregen. -- IN HET BELANG DER „GEMEENTE. -- B. en W. achten dezen aankoop zeer in het belang der gemeente. In de eerste plaats wordt het daardoor, naar hierboven reeds werd opgemerkt, mogelijk voor de gemeente, om zorg te dragen, dat het Park Merwestein door de wijze van exploitatie van Soekasari geen schade lijdt. Het zoude in de bedoeling liggen, om het terrein aan de zijde van de Hallincqlaan en eventueel aan de zijde van den Groenedijk in exploitatie te brengen voor den bouw van enkele en dubbele villa’s, waarbij dan nog de gelegenheid overblijft, wegens de groote diepte van het terrein, om een strook van pl.m‚ 20 Meter breedte aan het Park toe te voegen. Aan den verkoop van dit terrein de voorwaarde worden verbonden, dat de afscheidingen aan de zijde van het Park, ter wille van den aanblik, niet mogen bestaan uit schuttingen of muren. Blijkens eene opgezette berekening zal ongeveer 4425 M2. voor bouwterrein disponibel komen. B. en W. hebben de stellige verwachting, dat voor dien grond, op zoo mooien stand bij het Park gelegen, gereedelijk aanvragen zullen binnenkomen. Huns inziens zal binnen 5 à 6 jaren de grond geheel zijn verkocht. Om het terrein bouwrijp te maken zullen voor slootdemping, rioleering‚ straataanleg, enz., verschillende kosten moeten worden gemaakt, welke in totaal op f 9500.- worden geraamd. In de tweede plaats wordt het mogelijk de Hallincqlaan op de vastgestelde breedte van 14 Meter te brengen, hetgeen zeer gewenscht moet worden geacht wegens de in de laatste jaren waar te nemen toeneming van het verkeer, dat zich langs dezen weg beweegt. -- DE BESTEMMING. -- In de derde plaats zijn B. en W. van meening‚ dat door deze transactie op zeer economische wijze wordt voorzien in de behoefte aan een nieuw dienstgebouw voor Gemeentewerken. De onvoldoende huisvesting van dezen dienst is al te zeer bekend, dan dat zij daarover behoeven uit te weiden. De tijdsomstandigheden gedurende de laatste jaren hebben hen weerhouden om den bouw van een nieuw bureau van Gemeentewerken reeds eerder bij den raad aanhangig te maken. De directeur van den dienst raamt de kosten, welke zullen moeten worden gemaakt om de villa volledig aan de bestemming van dienstgebouw te doen beantwoorden, op f l9.000.--. Na de verhuizing van den dienst zullen de op den hoek van het Kromhout gelegen terreinen, waarop de gebouwen van gemeentewerken thans gevestigd zijn, voor verkoop beschikbaar komen. Voor deze terreinen, welke een grootte hebben van pl.m. 1750 M2. en welke zeer gunstig in het centrum van de stad en aan het water zijn gelegen, zullen zich zeker koopers aanmelden. De te bedingen koopprijs komt feitelijk in mindering op de kosten, voor het nieuwe dienstgebouw te maken. De twee woningen en het koets- en tuighuis verkeeren eveneens in goeden staat van onderhoud. B. en W. stellen zich voor de woningen voor personeel van Gemeentewerken te bestemmen en het koets- en tuighuis te gebruiken voor magazijn en garage. Het bovenstaande geeft B. en W. alle aanleiding, en de bouwcommissie deelt geheel die zienswijze, om den aankoop van de in geding zijnde terreinen met opstallen, ondanks de tijdsomstandigheden, waarin wij leven, warm bij den raad aan te bevelen.
Het pand is door de gemeente aangekocht rond '33, waarna het dienst deed als kantoor voor gemeentewerken.