/* ── 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;
}
}
6 reacties Commentaar van bezoekers
het hier het koepeltje van Weizigt betreft. Wat Ton niet meer ziet als een witte vlek met een donker bovenkantje, zie ik de koepel met een overhangende bladerentak. Na beeldvergroting van 556_2652 herken ik links van de koepel villa Eureka aan de Burg. de Raadtsingel. Na zo’n 20 jaar (Pim) is er veel veranderd o.a. verbreding van het spooremplacement waardoor de koepel waarschijnlijk verplaatst moest worden. Op foto 552_360014 uiterst links vermoed ik dat het daar naar toe is gegaan.
Het staat tegen/tussen de achterste bomenrij aan met een open plek ervoor. Wat ik zie is niet meer dan een wittige vlek met een donker bovenkantje (van een rieten dakje waarschijnlijk), wazig .. maar zou het toch goed kunnen zijn. (Op ca 320 graden (NW) vanuit het hart van de vers gegraven komvijver).