.elementor-kit-5{--e-global-color-primary:#A46233;--e-global-color-secondary:#02202B;--e-global-color-text:#02202B;--e-global-color-accent:#A46233;--e-global-typography-primary-font-family:"BL Bebas";--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"BL Vietnam";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"BL Vietnam";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"BL Vietnam";--e-global-typography-accent-font-weight:600;background-color:#FFFFFF;font-family:"BL Vietnam", Sans-serif;font-weight:400;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --bl-petrol:#02202B; --bl-koper:#A46233; --bl-koperdonker:#7E4A24; --bl-link:#96592D; --bl-kopertint:#E3BE9F; --bl-grafiet:#222427; --bl-grijs:#55636A; --bl-lijn:#E3D6C8; --bl-zaagsel:#EFE0D2; --bl-room:#F9F5EE; --bl-wit:#FFFFFF; --font-heading:BL Bebas; --font-body:BL Vietnam; }
/* Start custom CSS *//* Barbershop Leasa: zelf gehoste fonts (latin) */
@font-face { font-family: 'BL Bebas'; font-style: normal; font-weight: 400; font-display: swap; src: url('/wp-content/uploads/fonts/bebas-neue-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'BL Rye'; font-style: normal; font-weight: 400; font-display: swap; src: url('/wp-content/uploads/fonts/rye-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'BL Vietnam'; font-style: normal; font-weight: 400; font-display: swap; src: url('/wp-content/uploads/fonts/be-vietnam-pro-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'BL Vietnam'; font-style: italic; font-weight: 400; font-display: swap; src: url('/wp-content/uploads/fonts/be-vietnam-pro-400-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'BL Vietnam'; font-style: normal; font-weight: 500; font-display: swap; src: url('/wp-content/uploads/fonts/be-vietnam-pro-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'BL Vietnam'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('/wp-content/uploads/fonts/be-vietnam-pro-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'BL Bebas Fallback'; src: local('Impact'), local('Arial Narrow'), local('Liberation Sans Narrow'); size-adjust: 84%; ascent-override: 100%; descent-override: 20%; line-gap-override: 0%; }
@font-face { font-family: 'BL Vietnam Fallback'; src: local('Arial'), local('Liberation Sans'), local('DejaVu Sans'); size-adjust: 104%; ascent-override: 96%; descent-override: 24%; line-gap-override: 0%; }
:root { --font-heading: 'BL Bebas', 'BL Bebas Fallback', Impact, sans-serif; --font-body: 'BL Vietnam', 'BL Vietnam Fallback', 'Segoe UI', sans-serif; --bl-header-h: 92px; } @media (max-width: 1099px) { :root { --bl-header-h: 78px; } }
body { background-color: #FFFFFF; color: #02202B; font-family: 'BL Vietnam', 'BL Vietnam Fallback', 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
h1.e-heading-base, h2.e-heading-base, h3.e-heading-base, h4.e-heading-base { font-family: 'BL Bebas', 'BL Bebas Fallback', Impact, sans-serif !important; color: #02202B; font-weight: 400; letter-spacing: .012em; text-wrap: balance; }
h1.e-heading-base { font-size: clamp(3rem, 2rem + 4vw, 5.2rem); line-height: .98; } h2.e-heading-base { font-size: clamp(2.3rem, 1.9rem + 1.6vw, 3.3rem); line-height: 1.02; } h3.e-heading-base { font-size: 1.72rem; line-height: 1.08; }
.bl-kop h1.e-heading-base { color: #FFFFFF; }
.e-button-base, input, textarea, select, label { font-family: 'BL Vietnam', 'BL Vietnam Fallback', 'Segoe UI', sans-serif; } a.e-button-base { font-family: inherit; }
p.e-paragraph-base, .e-paragraph-base { font-family: 'BL Vietnam', 'BL Vietnam Fallback', 'Segoe UI', sans-serif; color: #02202B; font-size: 1.08rem; line-height: 1.68; max-width: 68ch; text-wrap: pretty; }
/* links in lopende tekst: koper en halfvet (5,6:1 op wit, 3:1 t.o.v. petrol); lijn bij hover/focus */
.e-paragraph-base a { color: #96592D; font-weight: 600; text-decoration: none; box-shadow: inset 0 -2px 0 transparent; transition: color .2s ease, box-shadow .2s ease; } .e-paragraph-base a:hover, .e-paragraph-base a:focus-visible { color: #02202B; box-shadow: inset 0 -2px 0 #A46233; }
a.e-button-base, a.e-con, a.e-div-block-base { text-decoration: none !important; }
.e-paragraph-base:empty { display: none; } .e-button-base:active { transform: scale(.97); }
.bl-tekstlink { color: #96592D !important; font-weight: 600 !important; font-size: 1.06rem !important; box-shadow: inset 0 -2px 0 #A46233; transition: color .2s ease, box-shadow .2s ease !important; padding-bottom: 2px !important; } .bl-tekstlink:hover, .bl-tekstlink:focus-visible { color: #02202B !important; box-shadow: inset 0 -3px 0 #02202B; }
.bl-tekstlink.bl-licht { color: #FFFFFF !important; box-shadow: inset 0 -2px 0 #E3BE9F; } .bl-tekstlink.bl-licht:hover, .bl-tekstlink.bl-licht:focus-visible { color: #E3BE9F !important; box-shadow: inset 0 -3px 0 #FFFFFF; } .bl-cta .bl-tekstlink.bl-licht { box-shadow: inset 0 -2px 0 #FFFFFF; } .bl-cta .bl-tekstlink.bl-licht:hover { color: #FFFFFF !important; }
/* ===== header: de kniplijn met draaiende paal ===== */
.elementor-location-header { position: sticky; top: 0; z-index: 1000; }
.bl-header { background: #02202B; } .bl-balk { position: relative; z-index: 995; transition: height .3s cubic-bezier(.23,1,.32,1) !important; } .bl-logolink { transition: width .3s cubic-bezier(.23,1,.32,1) !important; }
@media (min-width: 1100px) { .bl-gescrold .bl-balk { height: 72px !important; } .bl-gescrold .bl-logolink { width: 104px !important; } }
.bl-hdrpaal { position: relative; height: 6px; overflow: hidden; --bl-paal: 0px; } .bl-hdrpaal::before { content: ''; position: absolute; top: 0; bottom: 0; left: -100px; width: calc(100% + 200px) !important; background: repeating-linear-gradient(135deg, #A46233 0 22px, #FFFFFF 22px 44px); transform: translateX(var(--bl-paal)); }
.bl-menulink { position: relative; padding: 13px 13px 15px !important; color: #FFFFFF !important; font-weight: 500 !important; font-size: 1.02rem !important; white-space: nowrap; background: transparent !important; line-height: 1.2 !important; }
.bl-menulink::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 6px; height: 2px; background: repeating-linear-gradient(90deg, #E3BE9F 0 6px, transparent 6px 11px); clip-path: inset(0 100% 0 0); transition: clip-path .28s cubic-bezier(.23,1,.32,1); pointer-events: none; }
.bl-menulink::before { content: ''; position: absolute; left: 13px; width: calc(100% - 26px); bottom: 0; height: 14px; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%23E3BE9F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><g transform='rotate%2890 14 14%29'><circle cx='7' cy='21.5' r='3.4'/><circle cx='21' cy='21.5' r='3.4'/><path d='M9 18.8 L20 3.5 M19 18.8 L8 3.5'/></g></svg>") left center / 14px 14px no-repeat; opacity: 0; transform: translateX(-4px); transition: opacity .12s ease, transform .28s cubic-bezier(.23,1,.32,1); pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .bl-menulink:hover::after { clip-path: inset(0); } .bl-menulink:hover::before { opacity: 1; transform: translateX(calc(100% - 14px)); } }
.bl-menulink:focus-visible::after, .bl-menulink[aria-current=page]::after { clip-path: inset(0); } .bl-menulink:focus-visible::before, .bl-menulink[aria-current=page]::before { opacity: 1; transform: translateX(calc(100% - 14px)); }
.bl-menulink:focus { background-color: transparent !important; } .bl-menulink:focus-visible { outline: 3px solid #FFFFFF !important; outline-offset: -2px; }
.bl-actie { white-space: nowrap; margin-inline-start: 10px; } .bl-actie:focus-visible { outline: 3px solid #FFFFFF !important; outline-offset: 2px; }
@media (max-width: 1279px) and (min-width: 1100px) { .bl-menulink { padding-inline: 9px !important; font-size: .98rem !important; } .bl-menulink::after, .bl-menulink::before { left: 9px; right: 9px; } .bl-menulink::before { width: calc(100% - 18px); } }
@media (max-width: 1099px) { .bl-nav { display: none !important; } } @media (min-width: 1100px) { .bl-menuknop { display: none !important; } }
/* menuknop: twee messen die nog bijna dicht staan; open = gekruist */
.bl-menuknop { position: relative; z-index: 1001; transition: transform .16s cubic-bezier(.23,1,.32,1) !important; } .bl-menuknop:active { transform: scale(.97); } .bl-menuknop p { color: #FFFFFF !important; } .bl-menuknop:focus-visible { outline: 3px solid #FFFFFF !important; outline-offset: 2px; }
.bl-mesicoon { position: relative; } .bl-mesicoon::before, .bl-mesicoon::after { content: ''; position: absolute; left: 1px; top: 11px; width: 26px; height: 3px; border-radius: 2px; background: #E3BE9F; transform-origin: 50% 50%; transition: transform .3s cubic-bezier(.5,0,.2,1); }
.bl-mesicoon::before { transform: rotate(-9deg); } .bl-mesicoon::after { transform: rotate(9deg); background: #FFFFFF; }
.bl-open .bl-mesicoon::before { transform: rotate(-45deg); } .bl-open .bl-mesicoon::after { transform: rotate(45deg); }
.bl-menulabel { min-width: 3.7em !important; text-align: right !important; }
/* ===== mobiel menu: de messen, twee vlakken die diagonaal naar elkaar toe knippen; items gestaffeld ===== */
.bl-menu { position: fixed !important; inset: 0; z-index: 990; padding-top: var(--bl-header-h) !important; visibility: hidden; transition: visibility 0s linear .28s; overflow-y: auto; overscroll-behavior: contain; }
@media (min-width: 1100px) { .bl-menu { display: none !important; } }
/* de vlakken overlappen elkaar 30%: de spleet is dicht vóór de beweging eindigt, er blijft geen smalle kier zichtbaar */
.bl-menu::before, .bl-menu::after { content: ''; position: fixed; inset: 0; background: #02202B; will-change: transform; transition: transform .24s cubic-bezier(.5,0,.2,1) .04s; }
.bl-menu::before { clip-path: polygon(0 0, 130% 0, 0 130%); transform: translate(-130%, -130%); } .bl-menu::after { clip-path: polygon(100% -30%, 100% 100%, -30% 100%); transform: translate(130%, 130%); }
.bl-open .bl-menu { visibility: visible; transition: visibility 0s; } .bl-open .bl-menu::before, .bl-open .bl-menu::after { transform: none; transition: transform .3s cubic-bezier(.5,0,.2,1); }
.bl-menupaneel { position: relative; z-index: 1; }
.bl-menuitem { border-bottom: 1px solid rgba(255,255,255,.16); } .bl-menuitem p { color: #FFFFFF !important; } .bl-menuitem[aria-current=page] p { color: #E3BE9F !important; }
@media (hover: hover) and (pointer: fine) { .bl-menuitem:hover p { color: #E3BE9F !important; } } .bl-menuitem:focus-visible { outline: 3px solid #FFFFFF !important; outline-offset: 2px; }
/* items pas zodra de messen dicht zijn (anders loopt de tekst door de pagina heen); sluiten: meteen weg */
.bl-menu .bl-menuitem, .bl-menu .bl-menuonder { opacity: 0; transform: translateY(8px); transition: opacity .08s linear, transform 0s linear .08s; }
.bl-open .bl-menu .bl-menuitem, .bl-open .bl-menu .bl-menuonder { opacity: 1; transform: none; transition: opacity .2s ease, transform .28s cubic-bezier(.23,1,.32,1); }
.bl-open .bl-menuitems > :nth-child(1) { transition-delay: 190ms !important; } .bl-open .bl-menuitems > :nth-child(2) { transition-delay: 212ms !important; } .bl-open .bl-menuitems > :nth-child(3) { transition-delay: 234ms !important; } .bl-open .bl-menuitems > :nth-child(4) { transition-delay: 256ms !important; } .bl-open .bl-menuitems > :nth-child(5) { transition-delay: 278ms !important; } .bl-open .bl-menuitems > :nth-child(6) { transition-delay: 300ms !important; } .bl-open .bl-menuitems > :nth-child(7) { transition-delay: 322ms !important; } .bl-open .bl-menuitems > :nth-child(8) { transition-delay: 344ms !important; } .bl-open .bl-menu .bl-menuonder { transition-delay: 350ms !important; }
/* alleen html vergrendelen: overflow op body maakt van body een scrollvlak en dan schiet de sticky header uit beeld */
html.bl-lock { overflow: hidden; }
.bl-paal.bl-stil::before, .bl-lock .bl-paal::before { animation-play-state: paused; }
/* ===== hero: twee stoelen met de schuine barbierspaal ertussen; de naad schuift naar de stoel die je kiest ===== */
@property --bl-naad { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
.bl-duo { position: relative; --bl-naad: 50%; --bl-helling: 7%; transition: --bl-naad .32s cubic-bezier(.23,1,.32,1); overflow: hidden; isolation: isolate; }
@media (hover: hover) and (pointer: fine) { .bl-duo:has(.bl-stoel-jai:hover), .bl-duo:has(.bl-stoel-jai:focus-visible) { --bl-naad: 56%; } .bl-duo:has(.bl-stoel-mike:hover), .bl-duo:has(.bl-stoel-mike:focus-visible) { --bl-naad: 44%; } }
.bl-stoel { position: absolute !important; inset: 0; display: block !important; }
.bl-stoel-jai { clip-path: polygon(0 0, calc(var(--bl-naad) + var(--bl-helling)) 0, calc(var(--bl-naad) - var(--bl-helling)) 100%, 0 100%); }
.bl-stoel-mike { clip-path: polygon(calc(var(--bl-naad) + var(--bl-helling)) 0, 100% 0, 100% 100%, calc(var(--bl-naad) - var(--bl-helling)) 100%); }
.bl-herofoto { position: absolute !important; top: 0; height: 100% !important; width: 62% !important; max-width: none !important; object-fit: cover; border-radius: 0 !important; } .bl-stoel-jai .bl-herofoto { left: 0; object-position: 30% 22%; } .bl-stoel-mike .bl-herofoto { right: 0; object-position: 30% 20%; }
.bl-duo::after { content: ''; position: absolute; inset: auto 0 0 0; height: 46%; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(2,32,43,0) 0%, rgba(2,32,43,.82) 62%, #02202B 100%); }
.bl-paal { position: absolute !important; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; clip-path: polygon(calc(var(--bl-naad) + var(--bl-helling) - 11px) 0, calc(var(--bl-naad) + var(--bl-helling) + 11px) 0, calc(var(--bl-naad) - var(--bl-helling) + 11px) 100%, calc(var(--bl-naad) - var(--bl-helling) - 11px) 100%); }
.bl-paal::before { content: ''; position: absolute; left: 0; width: 100% !important; top: -100px; height: calc(100% + 100px) !important; background: repeating-linear-gradient(135deg, #A46233 0 22px, #FFFFFF 22px 44px); animation: bl-paal 7s linear infinite; will-change: transform; } @keyframes bl-paal { to { transform: translateY(62.23px); } }
.bl-bijschrift { position: absolute !important; width: 1px !important; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0 !important; padding: 0 !important; }
.bl-stoel:focus-visible { outline: 3px solid #FFFFFF !important; outline-offset: -8px; }
.bl-hero { position: relative; background: #02202B; } .bl-hero h1.e-heading-base { color: #FFFFFF; font-size: clamp(3.5rem, 1.1rem + 8.4vw, 8.2rem); line-height: .92; letter-spacing: .008em; } .bl-hero .e-paragraph-base { color: #FFFFFF; } .bl-herorij { position: relative; z-index: 5; margin-top: -5.2rem; } @media (max-width: 767px) { .bl-herorij { margin-top: -2.6rem; } }
@media (max-width: 767px) { .bl-duo { --bl-helling: 6%; } .bl-herofoto { width: 66% !important; } .bl-paal { clip-path: polygon(calc(var(--bl-naad) + var(--bl-helling) - 7px) 0, calc(var(--bl-naad) + var(--bl-helling) + 7px) 0, calc(var(--bl-naad) - var(--bl-helling) + 7px) 100%, calc(var(--bl-naad) - var(--bl-helling) - 7px) 100%); } }
/* paginakop: foto met dezelfde schuine naad */
.bl-kopfoto { clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%); border-radius: 0 !important; } .bl-kop .e-paragraph-base a { color: #E3BE9F; } .bl-kop .e-paragraph-base a:hover { color: #FFFFFF; }
/* ===== vlakken ===== */
.bl-ic { background: center / contain no-repeat; } .bl-ic-schaar { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%237E4A24' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='7' cy='21.5' r='3.4'/><circle cx='21' cy='21.5' r='3.4'/><path d='M9 18.8 L20 3.5 M19 18.8 L8 3.5'/></svg>"); } .bl-ic-tondeuse { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%237E4A24' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M9 10 h10 l1.5 14 a1.5 1.5 0 0 1 -1.5 1.6 h-10 a1.5 1.5 0 0 1 -1.5 -1.6 z'/><path d='M8 10 V4 M11 10 V4 M14 10 V4 M17 10 V4 M20 10 V4'/><path d='M12 16 h4'/></svg>"); } .bl-ic-mes { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%237E4A24' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M4 8 C10 8 19 8 25 8 L25 12 C19 15 12 15.5 7 15 Z'/><path d='M8 15 L4 25'/><circle cx='8.4' cy='11' r='.9'/></svg>"); } .bl-ic-kam { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%237E4A24' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8 h22 v5 h-22 z'/><path d='M5.5 13 v9 M9 13 v9 M12.5 13 v9 M16 13 v9 M19.5 13 v9 M23 13 v9'/></svg>"); }
.bl-prijs { font-family: 'BL Bebas', 'BL Bebas Fallback', Impact, sans-serif !important; font-size: 1.72rem !important; line-height: 1.08 !important; color: #7E4A24 !important; white-space: nowrap; margin-left: auto !important; } .bl-duur { font-size: .98rem !important; color: #55636A !important; }
.bl-vinkje { background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%237E4A24' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 10.5 L8.5 14.5 L15.5 6'/></svg>") center / 14px no-repeat #FFFFFF; border-radius: 50%; }
.bl-citaat p { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem) !important; line-height: 1.45 !important; font-style: italic; } .bl-citaatnaam { font-family: 'BL Bebas', 'BL Bebas Fallback', Impact, sans-serif !important; font-size: 1.32rem !important; letter-spacing: .03em; color: #7E4A24 !important; font-style: normal !important; }
h2.bl-slotzin.e-heading-base { font-family: 'BL Rye', 'BL Bebas', Georgia, serif !important; font-size: clamp(2rem, 1.3rem + 2.8vw, 3.8rem) !important; line-height: 1.08 !important; letter-spacing: 0 !important; color: #FFFFFF !important; }
.bl-faq-item h3.e-heading-base { font-size: 1.5rem !important; line-height: 1.12; letter-spacing: .015em; } .bl-faq-item .e-paragraph-base { font-size: 1.04rem; }
/* status met lampje */
.bl-status { display: inline-flex; align-items: center; gap: 12px; margin: 0; font-family: 'BL Bebas', 'BL Bebas Fallback', Impact, sans-serif; font-size: clamp(1.9rem, 1.5rem + 1.3vw, 2.7rem); line-height: 1.05; letter-spacing: .012em; color: #02202B; } .bl-lamp { flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%; background: #E3D6C8; border: 2px solid #55636A; } .bl-isopen .bl-lamp { background: #A46233; border-color: #7E4A24; box-shadow: 0 0 0 5px rgba(164,98,51,.22); }
.bl-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bl-tijden { width: 100%; border-collapse: collapse; font-size: 1.06rem; } .bl-tijden th, .bl-tijden td { padding: 11px 0; border: 0; border-bottom: 1px solid #E3D6C8; font-weight: 400; text-align: left; background: transparent !important; color: #02202B; } .bl-tijden td { text-align: right; font-variant-numeric: tabular-nums; } .bl-tijden tr.bl-vandaag th, .bl-tijden tr.bl-vandaag td { font-weight: 600; color: #7E4A24; }
.bl-prijstabel { width: 100%; border-collapse: collapse; } .bl-prijstabel th, .bl-prijstabel td { padding: 16px 0 15px; border: 0; border-bottom: 1px solid #E3D6C8; background: transparent !important; color: #02202B; text-align: right; vertical-align: baseline; } .bl-prijstabel thead th { font-family: 'BL Bebas', 'BL Bebas Fallback', Impact, sans-serif; font-size: 1.72rem; font-weight: 400; border-bottom: 2px solid #02202B; padding-bottom: 8px; } .bl-prijstabel thead th:first-child, .bl-prijstabel tbody th { text-align: left; } .bl-prijstabel tbody th { font-weight: 600; font-size: 1.08rem; padding-right: 12px; } .bl-prijstabel td { font-family: 'BL Bebas', 'BL Bebas Fallback', Impact, sans-serif; font-size: 1.72rem; line-height: 1; width: 6.2em; white-space: nowrap; } .bl-duurtje { display: block; font-weight: 400; font-size: .98rem; color: #55636A; }
@media (max-width: 767px) { .bl-prijstabel td { width: 4.1em; font-size: 1.42rem; } .bl-prijstabel thead th { font-size: 1.42rem; } }
/* gaps die de V4-parser niet opslaat */ .bl-linkrij { gap: 8px 24px !important; } .bl-knoppen { gap: 14px 24px !important; } .bl-plaatsen { column-gap: 36px !important; } .bl-footgrid { gap: 28px 52px !important; }
@media (hover: hover) and (pointer: fine) { .bl-plaats:hover { background-color: #F9F5EE !important; } .bl-plaats:hover p:first-child { color: #7E4A24 !important; } }
.bl-feitlink { color: #7E4A24 !important; } .bl-feitlink:hover, .bl-feitlink:focus-visible { color: #02202B !important; } .bl-feitlink:focus { background-color: transparent !important; }
.bl-stoelkaart .e-paragraph-base a { color: #96592D; } .bl-stoelkaart img { border-radius: 4px; }
/* ===== footer: de spiegel; de lampjes branden als de zaak open is ===== */
.bl-footer { background: #02202B !important; }
.bl-footer-link { color: #E8EEF0 !important; } .bl-footer-link:hover, .bl-footer-link:focus-visible { color: #E3BE9F !important; box-shadow: inset 0 -2px 0 #E3BE9F; } .bl-footer-link:focus { background-color: transparent !important; }
.bl-spiegel { --bol: #55636A; position: relative; padding: 26px; border-radius: 170px 170px 8px 8px; background: #7E4A24; } .bl-spiegel.bl-aan { --bol: #FFE9CF; }
.bl-spiegel::before { content: ''; position: absolute; inset: 7px; border-radius: 163px 163px 5px 5px; border: 7px dotted var(--bol); pointer-events: none; }
.bl-glas { background: #F9F5EE; border-radius: 146px 146px 3px 3px; padding: 60px 26px 22px; color: #02202B; } .bl-spiegelkop { font-family: 'BL Bebas', 'BL Bebas Fallback', Impact, sans-serif; font-size: 1.9rem; line-height: 1; text-align: center; margin: 0 0 12px; color: #02202B; }
.bl-tijden--spiegel th, .bl-tijden--spiegel td { padding: 7px 0; font-size: 1rem; } .bl-spiegeladres { margin: 16px 0 0; text-align: center; font-size: 1rem; line-height: 1.5; color: #02202B; }
/* ===== accordion ===== */
.e-accordion-item-icon { transition: transform .25s cubic-bezier(.23,1,.32,1), background-color .2s ease; } details[open] > summary .e-accordion-item-icon { transform: rotate(180deg); background-color: #EFE0D2 !important; }
.e-accordion-item-icon svg { width: 14px !important; height: 14px !important; }
@media (hover: hover) and (pointer: fine) { summary.e-accordion-item-header:hover h3 { color: #7E4A24 !important; } }
a.e-con:not(.bl-menuitem), a.e-div-block-base:not(.bl-menuitem) { transition: background-color .2s cubic-bezier(.23,1,.32,1), transform .16s cubic-bezier(.23,1,.32,1) !important; }
/* ===== Pro-formulier ===== */
.bl-formwrap .elementor-field-group { margin-bottom: 16px !important; } .bl-formwrap .elementor-field-label { font-family: 'BL Vietnam', 'BL Vietnam Fallback', 'Segoe UI', sans-serif; font-weight: 600; font-size: 1.02rem; color: #02202B; margin-bottom: 6px; }
.bl-formwrap .elementor-field-textual, .bl-formwrap select.elementor-field { font-family: 'BL Vietnam', 'BL Vietnam Fallback', 'Segoe UI', sans-serif; font-size: 1.04rem !important; color: #02202B !important; background: #FFFFFF !important; border: 1.5px solid #7C7068 !important; border-radius: 3px !important; min-height: 52px; padding: 12px 14px !important; }
.bl-formwrap textarea.elementor-field-textual { min-height: 140px; } .bl-formwrap .elementor-field-textual:focus { border-color: #A46233 !important; box-shadow: 0 0 0 3px rgba(164,98,51,.25) !important; outline: none !important; }
.bl-formwrap .elementor-field-textual::placeholder { color: #55636A; } .bl-formwrap .elementor-mark-required .elementor-field-label::after { color: #7E4A24; }
.bl-formwrap .elementor-button, .bl-formwrap .elementor-button span { font-family: 'BL Bebas', 'BL Bebas Fallback', Impact, sans-serif !important; font-weight: 400 !important; font-size: 1.35rem !important; letter-spacing: .03em; line-height: 1; } .bl-formwrap .elementor-button { min-height: 54px !important; border-radius: 3px; background: #A46233 !important; color: #FFFFFF !important; transition: background-color .2s ease, transform .16s cubic-bezier(.23,1,.32,1); } .bl-formwrap .elementor-button:hover { background: #7E4A24 !important; } .bl-formwrap .elementor-button:active { transform: scale(.97); }
.bl-formwrap .elementor-message { font-size: 1.04rem; padding: 14px 16px; border-radius: 3px; background: #EFE0D2; color: #02202B; } .bl-formwrap .elementor-message::before { display: none; }
html { scrollbar-color: #55636A #F9F5EE; } ::selection { background: #EFE0D2; color: #02202B; } input, textarea { caret-color: #A46233; }
/* skip-link */
.bl-skip { position: absolute !important; left: -9999px !important; top: 8px; z-index: 2000; } .bl-skip:focus, .bl-skip:focus-visible { left: 16px !important; }
a:focus-visible, button:focus-visible, .e-button-base:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid #A46233 !important; outline-offset: 3px; }
footer a:focus-visible, .bl-hero a:focus-visible, .bl-kop a:focus-visible, .bl-cta a:focus-visible, .bl-menu a:focus-visible, .bl-header a:focus-visible { outline-color: #FFFFFF !important; }
.e-svg-base svg { display: block; } .bl-basis { align-items: baseline !important; } .bl-nowrap { white-space: nowrap !important; } .bl-rechts { text-align: right !important; }
.bl-knoppen .e-button-base { white-space: nowrap; } .bl-knoppen > .e-button-base { align-self: center !important; } .bl-plaats p:last-child { white-space: nowrap; }
html { scroll-behavior: smooth; scroll-padding-top: 116px; } @media (max-width: 1099px) { html { scroll-padding-top: 96px; } }
/* reduced motion: alleen beweging uit */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; } .e-button-base:active, .bl-menuknop:active, .bl-formwrap .elementor-button:active { transform: none !important; } .bl-duo { transition: none; } details[open] > summary .e-accordion-item-icon { transform: none !important; } .bl-mesicoon::before, .bl-mesicoon::after { transition: none; } .bl-menulink::before, .bl-menulink::after { transition: opacity .15s ease !important; } .bl-menu::before, .bl-menu::after { transform: none !important; clip-path: none; opacity: 0; transition: opacity .2s ease !important; } .bl-open .bl-menu::before, .bl-open .bl-menu::after { opacity: 1; } .bl-menu .bl-menuitem, .bl-menu .bl-menuonder { transform: none !important; } }/* End custom CSS */