/* ── 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;
}
}
11 reacties Commentaar van bezoekers
Mijn aangehaalde voorbeeldfoto is helaas wat donker en van latere datum, maar er is zeker wel sprake van een talud . Ter hoogte van die auto in de Maasstraat (554_34192) zie je dat er vanaf het wandelpad achter de bosschages langs, een pad naar links omhoog loopt naar straatniveau. Bedenk ook dat de Wantijschool aan de Maasstraatzijde nagenoeg gelijk zal liggen met de straat zelf. Let ook op de configuratie van het raamkozijn van de Wantijschool (Maasstraat 31), die klopt exact. 5 ramen op rij. Die van de Marine,- Machinistenschool/ NH Kerk (Maasstraat 10) 6 ramen op rij. Wat dat kleine raampje betreft, rechts op het einde van het gebouw, dat is niet te zien omdat het einde van het gebouw niet op deze foto zichtbaar is.
Ik twijfel dus bij 554_34192. :)
Zoom eens in op 554_34192. Ik denk dat we daar beter zitten ;). Dit is overigens aan de overzijde van de straat waar de linker foto is genomen.
De rechter foto betreft de kantine van de marine-machinistenschool aan het begin van de Maasstraat., zie ook 552_306765 en 552_309569 incl. commentaar.