/* assets/css/pages/reve-stores.css -- per-pagina laag (CLAUDE.md CSS-architectuur). In via mb_reve_pagina_css('reve-stores') in page-reve-stores.php. Tokens/componenten uit reve-base.css + reve-pages.css. */ .stores-hero { text-align: center; max-width: 640px; margin: 0 auto; } .stores-hero .btn-arrow { display: inline-flex; } .stores-finder { padding: 0 0 var(--sec); } .stores-tabs { display: flex; justify-content: center; gap: 6px; margin-bottom: 40px; } .stores-tab { border: 0; background: transparent; cursor: pointer; padding: 14px 26px; font: 500 15px/1 var(--f-body); color: #6b6b6b; transition: background .15s, color .15s; } .stores-tab.is-active { background: var(--c-secondary, #cbb896); color: var(--c-black); } .stores-body { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 0; align-items: stretch; min-height: 620px; } .stores-body.no-map { grid-template-columns: 1fr; } .stores-list { overflow-y: auto; max-height: 620px; border-right: 1px solid #e2e2e2; } .stores-body.no-map .stores-list { border-right: 0; max-width: 640px; margin: 0 auto; } .stores-list[hidden] { display: none; } .store-card { padding: 22px 24px; border-bottom: 1px solid #e2e2e2; font: 400 14.5px/1.6 var(--f-body); transition: background .2s; } .store-card.is-active { background: var(--c-grey-bg); } .store-card:first-child { padding-top: 0; } .store-card h3 { font-family: var(--f-head); font-weight: 600; font-size: 17px; margin: 0 0 8px; } .store-card a, .store-card .store-address { display: block; color: #2b2b2b; text-decoration: none; } .store-card a:hover { text-decoration: underline; } .store-card .store-more { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; font-weight: 600; } /* .arrow-circle draagt zijn cirkel-centrering normaal via .btn-arrow (reve-pages.css) -- hier staat hij los, dus zonder deze regel zakt de SVG mee met de tekstbaseline i.p.v. te centreren. */ .store-more .arrow-circle { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; } .stores-map-wrap { position: relative; } #storesMap { position: absolute; inset: 0; width: 100%; height: 100%; } /* InfoWindow-inhoud (marker-popup) -- Google rendert dit in zijn eigen container, vandaar inline-achtige, zelfstandige stijlen i.p.v. te steunen op de rest van de pagina-CSS. */ .store-popup { width: 220px; text-align: center; font: 400 13.5px/1.6 var(--f-body); color: #2b2b2b; } .store-popup-logo { max-width: 140px; max-height: 40px; object-fit: contain; margin: 4px auto 14px; display: block; } /* Google's eigen .gm-style img { max-width: none; } (0,1,1) wint anders van de regel hierboven (0,1,0) -- de logo's schaalden dan enkel op max-height en liepen breder dan de 220px kaart. Zelfde regel, hogere specificiteit. */ .gm-style img.store-popup-logo { max-width: 140px; } .store-popup h3 { font-family: var(--f-head); font-weight: 600; font-size: 16px; margin: 0 0 10px; text-align: left; } .store-popup p { margin: 0 0 4px; text-align: left; } /* display:flex (blok) i.p.v. inline-flex -- anders volgt de link .store-popup's text-align:center in plaats van links te staan zoals de titel/adres erboven. */ .store-popup .store-more { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-weight: 600; } @media (max-width: 860px) { .stores-body { grid-template-columns: 1fr; min-height: 0; } .stores-list { max-height: 420px; border-right: 0; } .stores-map-wrap { height: 420px; position: relative; } } /* ---------- aanvraagformulier "Fill in the form" -- donkere sectie, Gravity Forms #4 ("become a retailer form", bestaand, niet herbouwd) herstyled naar wit-op-zwart. Zelfde onderlijnde-velden-aanpak als Contact (#gform_wrapper_2), enkel de kleuren omgedraaid. ---------- */ .retailer-form { background: #000; padding: var(--sec) 24px; text-align: center; } .retailer-form .wrap { max-width: 760px; margin: 0 auto; } .retailer-form h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(28px, 3.2vw, 38px); color: #fff; margin: 0 0 20px; } .retailer-form .lede { font: 400 16px/1.7 var(--f-body); color: rgba(255, 255, 255, .8); max-width: 640px; margin: 0 auto 50px; } .retailer-form .gform_wrapper { text-align: left; } /* GF's standaard "* indicates required fields" -- donkere tekst, onleesbaar op de zwarte achtergrond hier. */ .retailer-form .gform_required_legend { display: none; } #gform_wrapper_4.gform-theme { --gf-color-primary: #fff; --gf-color-primary-contrast: #000; --gf-color-in-ctrl-primary: #fff; --gf-ctrl-border-color: rgba(255, 255, 255, .4); --gf-ctrl-label-color-primary: #fff; --gf-ctrl-label-color-secondary: rgba(255, 255, 255, .7); } #gform_wrapper_4 .ginput_container input, #gform_wrapper_4 .ginput_container select, #gform_wrapper_4 .ginput_container textarea { width: 100%; border: 0; border-bottom: 1.4px solid rgba(255, 255, 255, .4); border-radius: 0; padding: 10px 0; font: 400 15px/1.4 var(--f-body); background: transparent; box-shadow: none; color: #fff; } #gform_wrapper_4 .ginput_container textarea { min-height: 90px; resize: vertical; } #gform_wrapper_4 .ginput_container input::placeholder, #gform_wrapper_4 .ginput_container textarea::placeholder, #gform_wrapper_4 .ginput_container select { color: rgba(255, 255, 255, .55); } #gform_wrapper_4 select option { color: #000; } #gform_wrapper_4 .gfield--type-checkbox .gform-field-label, #gform_wrapper_4 .gfield--type-checkbox label { color: rgba(255, 255, 255, .75); font-size: 13.5px; } #gform_wrapper_4 .gfield--type-checkbox a { color: #fff; } #gform_wrapper_4 .gform-footer, #gform_wrapper_4 .gform_footer { margin: 24px 0 0; padding: 0; } #gform_wrapper_4 #gform_submit_button_4 { background: #fff; color: #000; border: 0; border-radius: 999px; padding: 15px 40px; font: 600 13px/1 var(--f-body); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; box-shadow: none; } #gform_wrapper_4 #gform_submit_button_4:hover { background: rgba(255, 255, 255, .85); }