/* ============================================================ Regenplan.nl — extras: cross-page transitions + signatuur-momenten Familie van style.css: zelfde easing, zelfde kleuren, geen circus. ============================================================ */ /* ---------- A. Page transitions: de water-curtain ---------- Barba-stijl curtain die de paginawissel volledig maskeert (geen flits mogelijk, werkt in elke browser). Twee lagen: een mist-laag die 90ms voorloopt op de donkere hoofdlaag. De curtain stijgt van onder naar boven (water dat stijgt), de wissel gebeurt erachter, en op de nieuwe pagina trekt hij door naar boven weg. Gestuurd door js/transitions.js + een inline -snippet dat de cover vóór de eerste paint zet. */ /* basistoestand: curtain onder het beeld, GEEN transition — zo gebeurt het terugzetten na een overgang onzichtbaar (geen tweede sweep) */ html::after { /* mist-voorloper */ content: ""; position: fixed; inset: 0; z-index: 998; pointer-events: none; background: linear-gradient(170deg, var(--mist), var(--mist-soft)); transform: translateY(103%); } html::before { /* donkere hoofdcurtain met druppel-logo */ content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Cpath d='M12 1C12 1 22 12.5 22 19.5C22 24.8 17.5 29 12 29C6.5 29 2 24.8 2 19.5C2 12.5 12 1 12 1Z' fill='%23C4D4DC' fill-opacity='.9'/%3E%3C/svg%3E") center / 34px no-repeat, radial-gradient(800px 500px at 70% 20%, rgba(196,212,220,.10), transparent 60%), linear-gradient(170deg, #16242B 0%, #1A2C2E 55%, #1E5C4A 100%); transform: translateY(103%); } /* uitgaand: curtain stijgt het beeld in (mist eerst, donker erachteraan) */ html.pt-in::after { transform: translateY(0); transition: transform .46s cubic-bezier(.76, 0, .24, 1); } html.pt-in::before { transform: translateY(0); transition: transform .46s cubic-bezier(.76, 0, .24, 1) .07s; } /* nieuwe pagina, eerste paint: curtain staat al dicht — géén flits */ html.pt-cover::after, html.pt-cover::before { transform: translateY(0); } /* binnenkomst: curtain trekt in één doorgaande beweging naar boven weg */ html.pt-out::before { transform: translateY(-103%); transition: transform .52s cubic-bezier(.76, 0, .24, 1); } html.pt-out::after { transform: translateY(-103%); transition: transform .52s cubic-bezier(.76, 0, .24, 1) .09s; } @media (prefers-reduced-motion: reduce) { html::before, html::after { display: none; } } /* ---------- B1. Werkwijze: uur-tot-uur tijdlijn scroll-highlight ---------- */ /* alles achter .xs-hours (door JS gezet) zodat de pagina zonder JS onveranderd blijft */ .hours.xs-hours { position: relative; } .hours.xs-hours::before { content: ""; position: absolute; left: -20px; top: 12px; bottom: 12px; width: 2px; background: var(--line); } .hours.xs-hours .xs-hours-fill { position: absolute; left: -20px; top: 12px; width: 2px; height: 0; background: linear-gradient(var(--green), var(--amber)); transition: height .2s linear; } .hours.xs-hours .hour time { color: var(--muted); transition: color .5s cubic-bezier(.22,.8,.3,1); } .hours.xs-hours .hour.is-past time { color: var(--amber); } /* ---------- B2. Onderhoud: featured pricing-kaart subtiele float ---------- */ @media (prefers-reduced-motion: no-preference) { .price-card--featured:not(:hover) { animation: xs-float 6s ease-in-out infinite; } } @keyframes xs-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* ---------- B4. Subsidies: amber lijntje onder het checker-bedrag ---------- */ .checker-result .big { display: inline-block; } .checker-result .big::after { content: ""; display: block; height: 2px; margin-top: 4px; background: var(--amber); border-radius: 2px; transform: scaleX(0); transform-origin: left; } .checker-result .big.xs-line::after { transform: scaleX(1); transition: transform .6s cubic-bezier(.22,.8,.3,1) .12s; } @media (prefers-reduced-motion: reduce) { .checker-result .big::after { transform: scaleX(1); } } /* ---------- B5. Over ons: leeslijn naast de actieve verhaal-alinea ---------- */ .story p { position: relative; } .story p::before { content: ""; position: absolute; left: -22px; top: 7px; bottom: 7px; width: 2.5px; border-radius: 3px; background: var(--green); opacity: 0; transform: scaleY(.4); transform-origin: top; } .story p.is-reading::before { opacity: 1; transform: scaleY(1); } @media (prefers-reduced-motion: no-preference) { .story p::before { transition: transform .45s cubic-bezier(.22,.8,.3,1), opacity .35s cubic-bezier(.22,.8,.3,1); } } /* ---------- B6. Contact: icon-microbeweging op de optie-kaarten ---------- */ @media (prefers-reduced-motion: no-preference) { .contact-option .ico svg { transition: transform .35s cubic-bezier(.22,.8,.3,1); } .contact-option:hover .ico svg { transform: scale(1.08); } .contact-option:hover .ico { animation: xs-ico-pulse .7s cubic-bezier(.22,.8,.3,1) .08s 1; } } @keyframes xs-ico-pulse { 0% { box-shadow: 0 0 0 0 rgba(30,92,74,.28); } 100% { box-shadow: 0 0 0 12px rgba(30,92,74,0); } } /* ===== Offerteflow: pand-kaartje, fallback, upload, fouten ===== */ .pand-zoek { margin-top: 18px; font-size: .92rem; color: var(--muted); display: flex; align-items: center; gap: 10px; } .pand-spinner { width: 16px; height: 16px; border: 2px solid var(--mist-soft); border-top-color: var(--green); border-radius: 50%; animation: pandspin .7s linear infinite; } @keyframes pandspin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .pand-spinner { animation: none; } } .pand-kaart { margin-top: 18px; border: 1.5px solid var(--green); border-radius: 14px; padding: 18px 20px; background: var(--green-soft, rgba(30,92,74,.06)); } .pand-kaart-kop { display: flex; align-items: center; gap: 10px; color: var(--green); margin-bottom: 12px; } .pand-kaart-kop strong { color: var(--ink); font-size: .98rem; } .pand-feiten { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px 18px; margin: 0; } .pand-feiten dt { font-size: .78rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .pand-feiten dd { margin: 2px 0 0; } .pand-edit { font: inherit; font-weight: 600; color: var(--ink); background: none; border: none; padding: 0; cursor: pointer; border-bottom: 1.5px dashed var(--mist); } .pand-edit:hover { color: var(--green); border-bottom-color: var(--green); } .pand-edit-input { width: 90px; font: inherit; font-weight: 600; padding: 2px 6px; border: 1.5px solid var(--green); border-radius: 6px; } .pand-kaart-noot { font-size: .8rem; color: var(--muted); margin: 12px 0 0; } .upload-zone { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 18px; font: inherit; font-weight: 600; color: var(--muted); background: none; border: 2px dashed var(--mist); border-radius: 12px; cursor: pointer; transition: border-color .15s, color .15s; } .upload-zone:hover { border-color: var(--green); color: var(--green); } .upload-previews { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; } .upload-previews .upload-thumb { position: relative; } .upload-previews img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--mist-soft); } .upload-thumb button { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; border: none; background: var(--ink); color: #fff; font-size: 12px; line-height: 1; cursor: pointer; display: grid; place-items: center; } .upload-thumb.is-uploading img { opacity: .4; } .field-error { color: #B3402A; font-size: .88rem; font-weight: 600; margin-top: 12px; } .consent { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; line-height: 1.5; color: var(--muted); cursor: pointer; font-weight: 400; } .consent input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--green); cursor: pointer; } .consent a { color: var(--green); font-weight: 600; } .prefill-besp { background: var(--green-soft); border-left: 4px solid var(--amber); border-radius: 10px; padding: 12px 16px; margin-bottom: 20px; font-size: .95rem; line-height: 1.5; color: var(--green-deep); font-weight: 500; } .prefill-besp[hidden] { display: none; } .res-mail { margin-top: 24px; border-top: 1px solid var(--mist-soft); padding-top: 16px; } .res-mail > summary { cursor: pointer; font-weight: 600; color: var(--muted); font-size: .95rem; list-style-position: inside; } .res-mail[open] > summary { margin-bottom: 16px; } .legal { color: var(--ink); } .legal h2 { font-size: 1.25rem; margin: 2em 0 .5em; } .legal p, .legal li { line-height: 1.7; color: var(--muted); } .legal ul { margin: .5em 0 1em; padding-left: 1.2em; } .legal li { margin-bottom: .4em; } .legal a { color: var(--green); font-weight: 600; } .legal strong { color: var(--ink); } .pand-zoek[hidden], .pand-kaart[hidden], #pandFallback[hidden], #vraagTuin[hidden], #vraagKruip[hidden], .field-error[hidden], #bedrijfsnaamWrap[hidden], .upload-zone[hidden], .hours[hidden] { display: none; } /* ===== Admin-werklijst ===== */ .admin-main { flex: 1; width: min(1060px, 92vw); margin: 0 auto; padding: 20px 0 80px; } .admin-login { max-width: 380px; margin: 8vh auto 0; } .admin-login h1 { margin-bottom: 6px; } .admin-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .admin-tabel { width: 100%; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 3px rgba(20,30,26,.08); } .admin-tabel th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 14px 16px; border-bottom: 1px solid var(--mist-soft); } .admin-tabel td { padding: 12px 16px; border-bottom: 1px solid var(--mist-soft); font-size: .94rem; } .lead-rij { cursor: pointer; transition: background .15s; } .lead-rij:hover { background: rgba(30,92,74,.04); } .lead-rij.is-opgeslagen { background: rgba(30,92,74,.12); } .lead-rij.is-fout { background: rgba(179,64,42,.12); } .pad-zakelijk { font-weight: 700; color: var(--green); } .lead-detail td { background: rgba(196,212,220,.12); } .lead-detail dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 18px; margin: 6px 0; } .lead-detail dt { font-size: .8rem; font-weight: 600; color: var(--muted); } .lead-detail dd { margin: 0; font-size: .92rem; } .admin-tabel select { font: inherit; padding: 5px 8px; border: 1px solid var(--mist); border-radius: 8px; background: #fff; } .lead-dot { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--amber); vertical-align: middle; } .lead-rij.is-ongelezen td:nth-child(2) { font-weight: 700; color: var(--ink); } .detail-acties { margin-top: 14px; } .detail-acties .is-ok { background: var(--green); color: #fff; border-color: var(--green); } #lijstView[hidden], #loginView[hidden], #lijstLeeg[hidden], #leadsTabel[hidden], .lead-detail[hidden] { display: none; }