/* =================================================================== EZdomain — huisstijl (fase 1) Sky-blue merkkleur (globe) + wit + donker-navy. Frisse moderne look. Exacte logo-PNG's komen in /public/images (logo.png, logo-wit.png, favicon.png = de bol). Tot die er zijn wordt globe.svg gebruikt. =================================================================== */ :root { --sky: #54c4ff; /* accentkleur (EZdomain) */ --sky-donker: #2aa6f0; /* hover */ --sky-diep: #0a6aa5; /* accenttekst op wit (voldoende contrast) */ --sky-licht: #e8f6ff; --ink: #000000; /* donkere secties + koppen (puur zwart) */ --ink-2: #0e0e0e; --tekst: #0d0d0d; --tekst-sub: #5b5b5b; --bg: #ffffff; --bg-2: #f5f7f9; /* lichte sectie */ --rand: #e6e6e6; --groen: #1aa06a; --oranje: #f59e0b; /* alleen voor 'actie/korting' labels */ --schaduw-sm: 0 1px 2px rgba(14,27,43,.06), 0 1px 3px rgba(14,27,43,.08); --schaduw: 0 8px 30px rgba(14,27,43,.08); --schaduw-lg: 0 20px 50px rgba(14,27,43,.14); --radius: 16px; --radius-sm: 10px; --maxw: 1160px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; background: var(--bg); } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: var(--tekst); line-height: 1.6; -webkit-font-smoothing: antialiased; background: transparent; /* de achtergrondkleur staat op */ } /* Subtiele, geanimeerde circuit-traces achter de inhoud. BELANGRIJK voor prestaties: dit is een eigen `position: fixed` laag en NIET `background-attachment: fixed` op de body. Die laatste dwingt de browser om bij élke scrollframe de achtergrond opnieuw te tekenen (en verhindert dat hij 'm op een eigen GPU-laag zet). Als losse fixed laag wordt hij één keer getekend en daarna alleen nog samengesteld — het scrollen blijft vloeiend. Het beeld staat óók stil bij scrollen, dus visueel identiek. Schijnt alleen door op plekken zonder eigen ondergrond (bv. .sectie-licht heeft een eigen achtergrondkleur en overdekt 'm). */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url('/images/circuit-bg.svg') center center / cover no-repeat; /* Dwingt een eigen compositielaag af, zodat het hertekenen van de animatie beperkt blijft tot deze laag en de rest van de pagina niet meesleept. */ will-change: transform; } img { max-width: 100%; display: block; } a { color: var(--sky-donker); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { line-height: 1.2; color: var(--ink); font-weight: 800; letter-spacing: -.02em; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } /* ─── Knoppen ─────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: 999px; font-weight: 700; font-size: 15px; border: 2px solid transparent; cursor: pointer; transition: all .18s ease; text-decoration: none; white-space: nowrap; } .btn-primair { background: var(--sky); color: #00263a; box-shadow: 0 4px 16px rgba(84,196,255,.35); } .btn-primair:hover { background: var(--sky-donker); color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(84,196,255,.45); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--rand); } .btn-ghost:hover { border-color: var(--sky); color: var(--sky-donker); text-decoration: none; } .btn-wit { background: #fff; color: var(--ink); } .btn-wit:hover { background: var(--sky-licht); text-decoration: none; transform: translateY(-1px); } .btn-lg { padding: 16px 34px; font-size: 16px; } .btn-blok { width: 100%; } /* ─── Logo ────────────────────────────────────────────────────── */ .logo { display: inline-flex; align-items: center; text-decoration: none; } .logo:hover { text-decoration: none; } .logo-img { height: 56px; width: auto; display: block; } .footer-merk .logo-img { height: 76px; } /* ─── Header ──────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; background: #ffffff; border-bottom: 1px solid var(--rand); overflow: visible; } /* Drie-koloms header: nav dicht om de centrale logo-bobbel */ .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 80px; position: relative; } .header-groep { display: flex; align-items: center; gap: 16px; } .header-links { justify-self: end; padding-right: 28px; } .header-rechts { justify-self: start; padding-left: 28px; } /* Witte cirkel-bobbel die naadloos uit de witte header zakt, met het logo erin. Geen rand → de bovenkant blendt met de header; alleen een neerwaartse schaduw voor het deel dat over de hero uitsteekt. */ .logo-mid { justify-self: center; position: relative; z-index: 60; width: 104px; height: 104px; border-radius: 50%; background: #ffffff; box-shadow: none; display: flex; align-items: center; justify-content: center; transform: translateY(36%); transition: transform .2s ease; } .logo-mid:hover { transform: translateY(36%) scale(1.04); } .logo-bol { height: 76px; width: auto; display: block; } .hoofdnav { display: flex; align-items: center; gap: 10px; } .hoofdnav > a, .nav-beheer { padding: 9px 14px; border-radius: 10px; color: var(--tekst); font-weight: 600; font-size: 15px; } .hoofdnav > a:hover { background: var(--sky-licht); color: var(--sky-diep); text-decoration: none; } .hoofdnav > a.is-actief { color: var(--sky-diep); background: var(--sky-licht); } .nav-account { padding: 9px 16px; border: 2px solid var(--rand); border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--ink); } .nav-account:hover { border-color: var(--sky); color: var(--sky-diep); text-decoration: none; } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; } .nav-toggle span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: .2s; } .mobiel-menu { display: none; } /* ─── Hero ────────────────────────────────────────────────────── */ .hero { background: linear-gradient(rgba(84,196,255,.045) 1px, transparent 1px) 0 0 / 46px 46px, linear-gradient(90deg, rgba(84,196,255,.045) 1px, transparent 1px) 0 0 / 46px 46px, radial-gradient(1100px 480px at 78% -12%, rgba(84,196,255,.28), transparent 60%), linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%); color: #eaf2f8; padding: 88px 0 104px; position: relative; overflow: hidden; } .hero h1 { color: #fff; font-size: clamp(32px, 5vw, 52px); margin-bottom: 18px; } .hero h1 .accent { color: var(--sky); } .hero p.lead { font-size: clamp(16px, 2.2vw, 20px); color: #b9cbd8; max-width: 620px; margin: 0 auto 30px; } .hero-mid { text-align: center; } .hero-badges { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: center; margin-top: 28px; color: #cfe0eb; font-size: 14px; font-weight: 600; } .hero-badges span { display: inline-flex; align-items: center; gap: 7px; } .hero-badges .dot { color: var(--sky); font-size: 16px; } /* ─── Domein-zoekbalk ─────────────────────────────────────────── */ .domein-zoek { max-width: 640px; margin: 6px auto 0; display: flex; gap: 8px; background: #fff; padding: 8px; border-radius: 999px; box-shadow: var(--schaduw-lg); } .domein-zoek input { flex: 1; border: 0; outline: 0; padding: 12px 20px; font-size: 16px; color: var(--ink); background: transparent; } .domein-zoek .btn { flex-shrink: 0; } .domein-ext { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; margin-top: 18px; font-size: 14px; color: #9fb6c6; } .domein-ext b { color: var(--sky); } /* ─── Secties ─────────────────────────────────────────────────── */ section { padding: 84px 0; } .sectie-licht { background: var(--bg-2); } .sectie-kop { text-align: center; max-width: 680px; margin: 0 auto 44px; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--sky-diep); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: 12.5px; } .eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--sky); border-radius: 2px; } .inhoud .eyebrow { margin-bottom: 12px; } .sectie-kop h2 { font-size: clamp(26px, 3.5vw, 38px); margin: 10px 0 12px; } .sectie-kop p { color: var(--tekst-sub); font-size: 17px; } /* ─── USP-strip ───────────────────────────────────────────────── */ .usp-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .usp { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); padding: 24px; box-shadow: var(--schaduw-sm); text-align: center; } .usp .ico { font-size: 26px; color: var(--sky-diep); display: inline-flex; } .usp h3 { font-size: 16px; margin: 10px 0 6px; } /* SVG-iconen schalen mee met font-size van hun .ico-container */ .ico-svg { width: 1em; height: 1em; display: block; } .nav-cart { display: inline-flex; align-items: center; color: var(--ink); } .nav-cart .ico-svg { width: 22px; height: 22px; } .usp p { color: var(--tekst-sub); font-size: 14px; } /* ─── Prijskaarten ────────────────────────────────────────────── */ .prijs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; } .prijs-kaart { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); padding: 30px 26px; box-shadow: var(--schaduw); display: flex; flex-direction: column; position: relative; } .prijs-kaart.uitgelicht { border: 2px solid var(--sky); box-shadow: var(--schaduw-lg); } .prijs-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--sky); color: #04212c; font-weight: 800; font-size: 12px; padding: 6px 16px; border-radius: 999px; letter-spacing: .02em; white-space: nowrap; } .prijs-naam { font-size: 20px; } .prijs-omschrijving { color: var(--tekst-sub); font-size: 14px; margin: 4px 0 18px; min-height: 40px; } .prijs-bedrag { display: flex; align-items: baseline; gap: 6px; } .prijs-bedrag .euro { font-size: 40px; font-weight: 900; color: var(--ink); letter-spacing: -.03em; } .prijs-bedrag .per { color: var(--tekst-sub); font-size: 14px; } .prijs-vanaf { color: var(--tekst-sub); font-size: 13px; margin-top: 4px; min-height: 20px; } .prijs-daarna { color: var(--tekst-sub); font-size: 13px; } .prijs-features { list-style: none; margin: 22px 0; display: flex; flex-direction: column; gap: 11px; flex: 1; } .prijs-features li { display: flex; gap: 10px; font-size: 14.5px; align-items: flex-start; } .prijs-features li::before { content: "✓"; color: var(--sky-donker); font-weight: 900; flex-shrink: 0; } .prijs-features li.uit { color: #9aa8b5; } .prijs-features li.uit::before { content: "–"; color: #c3ced7; } /* ─── Feature-grid (waarom EZdomain) ──────────────────────────── */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .feature { display: flex; gap: 16px; } .feature .ico { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; background: var(--sky-licht); color: var(--sky-diep); display: flex; align-items: center; justify-content: center; font-size: 22px; } .feature h3 { font-size: 17px; margin-bottom: 6px; } .feature p { color: var(--tekst-sub); font-size: 14.5px; } /* ─── CTA-band ────────────────────────────────────────────────── */ .cta-band { background: radial-gradient(800px 300px at 20% 0%, rgba(69,190,224,.25), transparent 60%), var(--ink); color: #fff; border-radius: 24px; padding: 54px 40px; text-align: center; } .cta-band h2 { color: #fff; font-size: clamp(24px, 3.5vw, 34px); margin-bottom: 12px; } .cta-band p { color: #b9cbd8; max-width: 540px; margin: 0 auto 26px; } /* ─── Live domeincheck-resultaten (zwevend wit paneel) ────────── */ .domein-resultaat-sectie { padding: 0; } .domein-resultaat:empty { display: none; } .domein-resultaat { /* De rijen moeten zich naar de bréédte van deze kaart voegen, niet naar die van het scherm: op /domeinen is de kaart 900px, op de domeinkeuze-pagina maar ~680px. Met een media query zou je dat verschil niet zien en vielen de knoppen daar buiten de kaart. */ container-type: inline-size; max-width: 900px; margin: -34px auto 0; position: relative; z-index: 2; background: #fff; border: 1px solid var(--rand); border-radius: 20px; box-shadow: var(--schaduw-lg); padding: 22px 26px 26px; } /* Kopbalk met titel + schakelaar */ .domein-res-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--rand); } .domein-res-kop { font-size: 18px; margin: 0; color: var(--tekst); font-weight: 700; } .domein-res-kop b { color: var(--sky-diep); } /* Maand/jaar-schakelaar */ .periode-switch { display: inline-flex; background: var(--bg-2); border: 1px solid var(--rand); border-radius: 999px; padding: 4px; } .periode-switch button { border: 0; background: transparent; padding: 8px 18px; border-radius: 999px; font-weight: 700; font-size: 13px; color: var(--tekst-sub); cursor: pointer; transition: all .15s ease; } .periode-switch button:hover { color: var(--ink); } .periode-switch button.actief { background: #fff; color: var(--sky-diep); box-shadow: var(--schaduw-sm); } /* Dubbele prijs — toon alleen de gekozen periode */ .domein-resultaat.periode-maand .p-jaar { display: none; } .domein-resultaat.periode-jaar .p-maand { display: none; } .domein-meer { text-align: center; margin-top: 18px; } .domein-meer .btn { min-width: 220px; } /* Toegevoegd-knop */ .btn-toegevoegd { background: var(--groen); color: #fff; padding: 9px 20px; font-size: 14px; cursor: default; } .btn-toegevoegd:hover { background: var(--groen); text-decoration: none; transform: none; } /* Slimme alternatieven */ .domein-sug { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--rand); } .domein-sug-kop { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 10px; color: var(--tekst-sub); font-weight: 800; } /* Resultaatrijen — strakke lijst met cyaan accent + hover */ .domein-lijst { display: flex; flex-direction: column; gap: 4px; } .domein-rij { /* minmax(0,1fr): zonder die 0 is de ondergrens de volle naam, en duwt een lange domeinnaam de knop buiten de kaart. */ display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 14px; padding: 15px 16px; border-radius: 12px; border: 1px solid transparent; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; } .domein-rij:hover { background: var(--bg-2); border-color: var(--rand); } .domein-rij.is-vrij { box-shadow: inset 3px 0 0 var(--sky); } .domein-rij.is-vrij:hover { box-shadow: inset 3px 0 0 var(--sky), 0 8px 22px rgba(84,196,255,.16); } .domein-rij .d-naam { font-weight: 800; font-size: 17px; color: var(--ink); letter-spacing: -.01em; min-width: 0; overflow-wrap: anywhere; } .d-badge { font-size: 12px; font-weight: 800; padding: 4px 12px; border-radius: 999px; white-space: nowrap; } .d-badge.vrij { background: #d1fae5; color: #067647; } .d-badge.bezet { background: #fee2e2; color: #b42318; } .d-badge.premium { background: #fef3c7; color: #92400e; } .wagen-naam .badge-premium { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: #fef3c7; color: #92400e; vertical-align: middle; } .domein-rij .d-prijs { font-weight: 800; color: var(--ink); white-space: nowrap; } .domein-rij .d-prijs small { font-weight: 600; color: var(--tekst-sub); font-size: 12px; } .domein-rij .d-reeds { color: var(--tekst-sub); font-size: 14px; } .domein-rij .btn { padding: 9px 20px; font-size: 14px; white-space: nowrap; } .domein-melding { text-align: center; padding: 16px; border-radius: 12px; color: var(--tekst-sub); } .domein-melding.fout { background: #fff5f5; color: #b42318; } .domein-melding.laden { color: var(--sky-diep); } /* Past de rij niet meer op één regel in de kaart, dan over twee regels in plaats van eroverheen. Drempel op 780px: het vak op /domeinen is 900px breed en houdt de enkele regel, dat op de domeinkeuze-pagina is ~680px en stapelt. Container en niet media, want beide staan op hetzelfde brede scherm. */ @container (max-width: 780px) { .domein-rij { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; } .domein-rij .d-prijs { grid-column: 1; } .domein-rij .btn, .domein-rij .d-reeds { grid-column: 2; justify-self: end; } } @media (max-width: 640px) { .domein-resultaat { padding: 18px 16px 20px; } .domein-rij { padding: 14px; } } /* ─── Vergelijk-tabel (domeinen) ──────────────────────────────── */ .tabel-wrap { overflow-x: auto; border: 1px solid var(--rand); border-radius: var(--radius); } table.prijstabel { width: 100%; border-collapse: collapse; min-width: 420px; background: #fff; } table.prijstabel th, table.prijstabel td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--rand); } table.prijstabel thead th { background: var(--bg-2); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--tekst-sub); } table.prijstabel tbody tr:last-child td { border-bottom: 0; } table.prijstabel .ext { font-weight: 800; color: var(--ink); font-size: 16px; } table.prijstabel .prijs { font-weight: 800; color: var(--sky-diep); } /* ─── Footer ──────────────────────────────────────────────────── */ .site-footer { background: var(--ink); color: #aeb4bd; padding: 60px 0 0; margin-top: 20px; } .footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.1fr 1.1fr; gap: 28px; padding-bottom: 44px; } .footer-tagline { color: var(--sky); font-weight: 700; margin: 16px 0 8px; } .footer-sub { font-size: 14px; max-width: 300px; line-height: 1.6; } .footer-contact { margin-top: 16px; } .footer-contact a { color: #fff; font-weight: 600; font-size: 14.5px; } .footer-contact a:hover { color: var(--sky); text-decoration: none; } .footer-kolom h4 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px; } .footer-kolom a, .footer-kolom span { display: block; color: #aeb4bd; font-size: 14.5px; margin-bottom: 10px; } .footer-kolom a:hover { color: var(--sky); text-decoration: none; } .footer-bedrijf span { color: #8b929c; margin-bottom: 6px; } .footer-onder { border-top: 1px solid rgba(255,255,255,.09); padding: 20px 0; font-size: 13px; color: #7c828c; } .footer-onder-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .footer-onder p { margin: 0; } /* ─── Losse tekstpagina (bv. binnenkort/404) ──────────────────── */ .tekst-hero { text-align: center; padding: 90px 24px; } .tekst-hero h1 { font-size: clamp(28px, 4vw, 42px); margin-bottom: 12px; } .tekst-hero p { color: var(--tekst-sub); font-size: 18px; max-width: 520px; margin: 0 auto 26px; } /* ─── Checkout-succes ─────────────────────────────────────────── */ .succes-vink { width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 999px; background: #e7f8ef; color: #067647; font-size: 38px; font-weight: 800; display: flex; align-items: center; justify-content: center; } /* ─── Aantrekkelijke uitleg-blokken ───────────────────────────── */ .blok-kop { max-width: 780px; font-size: clamp(20px, 2.6vw, 26px); margin: 8px 0 10px; } .blok-tekst { max-width: 780px; color: var(--tekst-sub); font-size: 16px; margin-bottom: 8px; } .blok-tekst strong { color: var(--tekst); } .blok-tekst.tip { margin-top: 22px; background: var(--sky-licht); border-radius: 12px; padding: 16px 20px; color: var(--sky-diep); font-weight: 500; max-width: none; } .blok-scheiding { margin-top: 52px; } .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; } .info-kaart { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); padding: 26px; box-shadow: var(--schaduw-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .info-kaart:hover { transform: translateY(-3px); border-color: var(--sky); box-shadow: 0 12px 30px rgba(84,196,255,.14); } .info-kaart .ico { width: 46px; height: 46px; border-radius: 12px; background: var(--sky-licht); color: var(--sky-diep); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 14px; } .info-kaart h3 { font-size: 18px; margin-bottom: 8px; } .info-kaart p { color: var(--tekst-sub); font-size: 15px; line-height: 1.6; } .ext-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; } .ext-chip { background: #fff; border: 1px solid var(--rand); border-radius: 12px; padding: 16px 20px; box-shadow: var(--schaduw-sm); transition: transform .16s ease, border-color .16s ease; } .ext-chip:hover { transform: translateY(-2px); border-color: var(--sky); } .ext-chip .ext { font-weight: 900; font-size: 19px; color: var(--sky-diep); letter-spacing: -.01em; } .ext-chip .oms { color: var(--tekst-sub); font-size: 13.5px; margin-top: 3px; } .check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; margin-top: 24px; } .check-item { display: flex; gap: 13px; align-items: flex-start; } .check-item .vink { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: var(--sky-licht); color: var(--sky-diep); display: flex; align-items: center; justify-content: center; } .check-item .vink .ico-svg { width: 16px; height: 16px; } .check-item p { color: var(--tekst-sub); font-size: 15px; margin: 3px 0 0; line-height: 1.55; } .check-item strong { color: var(--ink); } @media (max-width: 720px) { .info-grid, .check-grid { grid-template-columns: 1fr; } .ext-grid { grid-template-columns: 1fr 1fr; } } /* ─── High-tech interacties (hover-effecten) ──────────────────── */ .usp, .stap, .prijs-kaart, .feature { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .usp:hover, .stap:hover { transform: translateY(-4px); border-color: var(--sky); box-shadow: 0 14px 34px rgba(84,196,255,.16); } .prijs-kaart:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(84,196,255,.16); } .feature:hover .ico { background: var(--sky); color: #00263a; } .feature .ico { transition: background .18s ease, color .18s ease; } /* ─── Lange inhoud (SEO-tekstsecties) ─────────────────────────── */ .inhoud { max-width: 820px; margin: 0 auto; } .inhoud.breed { max-width: 960px; } .inhoud h2 { font-size: clamp(24px, 3vw, 32px); margin: 0 0 14px; } .inhoud h3 { font-size: 19px; margin: 28px 0 8px; } .inhoud p { color: var(--tekst-sub); font-size: 16px; margin-bottom: 14px; } .inhoud ul { margin: 0 0 16px 22px; color: var(--tekst-sub); font-size: 16px; } .inhoud li { margin-bottom: 8px; } .inhoud a { font-weight: 600; } /* ─── Stappen (hoe werkt het) ─────────────────────────────────── */ .stappen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .stap { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); padding: 28px; box-shadow: var(--schaduw-sm); } .stap-nr { width: 42px; height: 42px; border-radius: 12px; background: var(--sky); color: #00263a; font-weight: 800; font-size: 18px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .stap h3 { font-size: 17px; margin-bottom: 6px; } .stap p { color: var(--tekst-sub); font-size: 14.5px; } /* ─── Stats ───────────────────────────────────────────────────── */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; } .stat .getal { font-size: clamp(28px, 4vw, 40px); font-weight: 900; color: var(--ink); letter-spacing: -.02em; } .stat .label { color: var(--tekst-sub); font-size: 14px; font-weight: 600; } /* ─── FAQ-accordion ───────────────────────────────────────────── */ .faq-lijst { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .faq-item { background: #fff; border: 1px solid var(--rand); border-radius: 12px; padding: 2px 22px; box-shadow: var(--schaduw-sm); } .faq-item summary { cursor: pointer; font-weight: 700; padding: 18px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; color: var(--ink); font-size: 16px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; color: var(--sky-diep); font-weight: 800; font-size: 22px; flex-shrink: 0; } .faq-item[open] summary::after { content: "\2013"; } .faq-antwoord { padding: 0 0 20px; color: var(--tekst-sub); font-size: 15px; line-height: 1.65; } @media (max-width: 820px) { .stappen { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr 1fr; } } /* ─── Flashmeldingen ──────────────────────────────────────────── */ /* De ronde logo-bobbel in de header steekt ~37px onder de header uit (104px hoog, 36% naar beneden getransformeerd) en ligt met z-index 60 bovenop de inhoud. Flash-meldingen staan direct bovenaan
, dus die moeten daar ruim onder beginnen — anders valt de tekst achter het embleem. */ .flash-wrap { margin: 56px auto 0; display: flex; flex-direction: column; gap: 8px; } .flash { padding: 12px 18px; border-radius: 10px; font-size: 14.5px; font-weight: 600; } .flash.ok { background: #e7f8ef; border: 1px solid #b6e6cc; color: #067647; } .flash.fout { background: #fff5f5; border: 1px solid #fecaca; color: #b42318; } /* ─── Winkelwagen-badge in de nav ─────────────────────────────── */ .nav-cart { position: relative; } .cart-badge { position: absolute; top: -6px; right: -8px; background: var(--sky); color: #04212c; font-size: 11px; font-weight: 800; min-width: 17px; height: 17px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; } /* ─── Domein-registreren knop (form) ──────────────────────────── */ .d-actie-form { margin: 0; } .d-actie-form .btn { padding: 9px 20px; font-size: 14px; } /* ─── Formulieren / auth ──────────────────────────────────────── */ .auth-sectie { display: flex; justify-content: center; padding: 56px 24px; } .auth-kaart { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schaduw); padding: 40px 34px; width: 100%; max-width: 440px; } .auth-kaart h1 { font-size: 24px; margin-bottom: 6px; } .auth-sub { color: var(--tekst-sub); font-size: 14.5px; margin-bottom: 22px; } .form { display: flex; flex-direction: column; gap: 16px; } .form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; color: var(--ink); } .form .hint { font-weight: 500; color: var(--tekst-sub); } .form input, .form select { border: 1px solid var(--rand); border-radius: 10px; padding: 12px 14px; font-size: 15px; color: var(--ink); background: #fff; } .form input:focus, .form select:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px var(--sky-licht); } .form .btn { margin-top: 6px; } .auth-wissel { text-align: center; margin-top: 20px; color: var(--tekst-sub); font-size: 14px; } .form--checkout { margin-top: 18px; } .form-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; } /* Velden in een form-rij onderaan uitlijnen: een label met een extra hint (bv. "Wachtwoord (min. 10 tekens)") wordt hoger dan zijn buur, en zou het invoerveld anders naar beneden duwen t.o.v. het veld ernaast. */ .form-rij > label > input, .form-rij > label > select, .form-rij > label > .tel-veld, .form-rij > label > .mailbox-adres { margin-top: auto; } .tel-veld { display: flex; gap: 8px; } .tel-veld .tel-landcode { width: 70px; flex: 0 0 70px; text-align: center; } .tel-veld input[type="tel"] { flex: 1; min-width: 0; } @media (max-width: 520px) { .form-rij { grid-template-columns: 1fr; } } /* Mailboxbeheer (Mijn Account → e-mailpakket) */ .wachtwoord-eisen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--tekst-sub); margin: -4px 0 0; } .mailbox-adres { display: flex; align-items: stretch; } .mailbox-adres input { flex: 1; min-width: 0; border-radius: 10px 0 0 10px; } .mailbox-domein { display: flex; align-items: center; padding: 0 14px; background: var(--bg-2); border: 1px solid var(--rand); border-left: 0; border-radius: 0 10px 10px 0; color: var(--tekst-sub); font-size: 14px; white-space: nowrap; } .dns-record-rij.mailbox-rij { grid-template-columns: 90px 1.4fr 1.4fr 150px 100px; } /* Van pakket wisselen */ .wissel-blok { background: var(--bg-2); border: 1px solid var(--rand); border-radius: 12px; padding: 14px 18px; margin-bottom: 22px; } .wissel-opties { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; } .wissel-niet { display: flex; flex-direction: column; gap: 2px; border: 1px dashed var(--rand); border-radius: 10px; padding: 8px 14px; font-size: 14px; font-weight: 700; color: var(--tekst-sub); } .wissel-niet small { font-weight: 500; font-size: 12px; } /* Dienst die bij een pakket inbegrepen zit: wel een eigen regel, maar geen eigen prijs — anders lijkt het een aparte post op de factuur. */ .dienst-regel-prijs.dienst-inbegrepen { font-weight: 700; font-size: 14px; color: var(--tekst-sub); } /* Wachtwoord instellen: veld dat meegroeit, knop op zijn eigen maat. Niet .form-rij, want die verdeelt de breedte 50/50 en rekt de knop over de volle hoogte uit — dan wordt "Instellen" een blok van een halve pagina. */ .wachtwoord-rij { /* flex-direction expliciet: .form zet 'column', en zonder dit te overschrijven komt de knop ónder het veld te staan in plaats van ernaast. */ display: flex; flex-direction: row; align-items: flex-end; gap: 12px; flex-wrap: wrap; } .wachtwoord-rij > label { flex: 1 1 240px; min-width: 0; } /* margin-top van .form .btn weghalen, anders staat de knop iets te laag. */ .wachtwoord-rij > .btn { flex: 0 0 auto; margin-top: 0; } /* Websiterij en toegangsgegevens (hosting) */ .dns-record-rij.website-rij { grid-template-columns: 90px 1.5fr 110px 150px 100px; } @media (max-width: 860px) { .dns-record-rij.website-rij { grid-template-columns: 1fr 1fr; } } .toegang-blok { background: var(--bg-2); border: 1px solid var(--rand); border-radius: 12px; padding: 14px 18px; margin-bottom: 16px; } .toegang-lijst { display: grid; grid-template-columns: 150px 1fr; gap: 6px 14px; margin: 8px 0 14px; font-size: 14px; } .toegang-lijst dt { color: var(--ink-sub); } .toegang-lijst dd { margin: 0; overflow-wrap: anywhere; } .toegang-lijst code { background: #fff; border: 1px solid var(--rand); border-radius: 6px; padding: 1px 6px; font-size: 13px; } @media (max-width: 640px) { .toegang-lijst { grid-template-columns: 1fr; gap: 2px; } } /* DNS-status van een e-maildomein */ .dns-status-blok { border: 1px solid #fcd34d; background: #fffbeb; border-radius: 12px; padding: 14px 18px; margin-bottom: 14px; } .dns-status-blok.ernstig { border-color: #fca5a5; background: #fef2f2; } .dns-status-lijst { list-style: none; margin: 8px 0 0; padding: 0; } .dns-status-lijst li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 13.5px; line-height: 1.5; padding: 4px 0; } .dns-status-naam { flex: 0 0 auto; min-width: 128px; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; } .dns-status-lijst .st-fout .dns-status-naam { color: #b91c1c; } .dns-status-lijst .st-ontbreekt .dns-status-naam { color: #92400e; } .dns-status-lijst .st-onbekend .dns-status-naam { color: var(--ink-sub); } /* Regel om een extra e-maildomein uit het pakket te halen */ .domein-verwijder-regel { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 10px 16px; margin-bottom: 14px; border: 1px dashed var(--rand); border-radius: 12px; } .btn-gevaar { color: #b91c1c; border-color: #fca5a5; } .btn-gevaar:hover { background: #fef2f2; border-color: #dc2626; } /* Webmail-knop op de e-mailpagina */ .webmail-blok { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: linear-gradient(135deg, var(--sky-licht), var(--bg-2)); border: 1px solid var(--rand); border-radius: 12px; padding: 14px 18px; margin-bottom: 14px; } /* Opslagmeter per mailbox */ .quota-cel { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .quota-balk { display: block; height: 6px; border-radius: 999px; background: var(--rand); overflow: hidden; } .quota-balk > span { display: block; height: 100%; background: var(--sky); border-radius: 999px; } .quota-balk.bijna > span { background: #f59e0b; } .quota-balk.vol > span { background: #dc2626; } .quota-tekst { font-size: 12px; color: var(--ink-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Op smal scherm valt de rij terug op twee kolommen; dan mag de meter gewoon de volle breedte van zijn cel gebruiken. */ @media (max-width: 860px) { .quota-cel { min-width: 100%; } } /* Back-ups per mailbox */ .backup-blok { background: var(--bg-2); border: 1px solid var(--rand); border-radius: 12px; padding: 14px 18px; margin-bottom: 16px; } .backup-lijst { list-style: none; margin: 10px 0 0; padding: 0; } .backup-lijst li { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 9px 0; border-top: 1px solid var(--rand); font-size: 14px; } .backup-lijst li:first-child { border-top: 0; } .backup-lijst li > span:first-child { font-weight: 700; color: var(--ink); } .backup-lijst li form { margin-left: auto; } /* Spamfilter-instelling per e-maildomein */ .spamfilter-blok { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: var(--bg-2); border: 1px solid var(--rand); border-radius: 12px; padding: 14px 18px; margin-bottom: 22px; } .spamfilter-titel { font-weight: 800; font-size: 14px; color: var(--ink); margin: 0 0 2px; } .spamfilter-keuze { display: flex; align-items: center; gap: 8px; } .spamfilter-keuze select { border: 1px solid var(--rand); border-radius: 10px; padding: 9px 12px; font-size: 14px; color: var(--ink); background: #fff; } .spamfilter-keuze select:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px var(--sky-licht); } /* Domeintabs bij een e-mailpakket met meerdere domeinen */ .domein-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; } .domein-tab { padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: 13.5px; background: var(--bg-2); color: var(--tekst-sub); border: 1px solid var(--rand); } .domein-tab:hover { text-decoration: none; border-color: var(--sky); color: var(--sky-diep); } .domein-tab.actief { background: var(--sky); color: #00263a; border-color: var(--sky); } /* Aliassen / doorstuuradressen */ .dns-record-rij.alias-rij { grid-template-columns: 110px 1.2fr 2fr 40px; } @media (max-width: 860px) { .dns-record-rij.alias-rij { grid-template-columns: 1fr auto; } } .dns-nieuw-form-klein textarea { border: 1px solid var(--rand); border-radius: 10px; padding: 8px 10px; font-size: 13.5px; font-family: inherit; color: var(--ink); resize: vertical; } .dns-nieuw-form-klein textarea:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px var(--sky-licht); } /* Opslaguitbreiding per mailbox */ .opslag-blok { flex-basis: 100%; background: var(--bg-2); border: 1px solid var(--rand); border-radius: 10px; padding: 12px 14px; } .opslag-titel { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--sky-diep); margin: 0 0 4px; } .opslag-tekst { font-size: 13px; color: var(--tekst-sub); margin: 0 0 8px; } .opslag-opties { display: flex; flex-wrap: wrap; gap: 8px; } @media (max-width: 860px) { .dns-record-rij.mailbox-rij { grid-template-columns: 1fr 1fr; } } /* Domeinkeuze bij een hosting-/e-mailpakket */ .domein-keuze { border: 1px solid var(--rand); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; } /* Zoekwidget hergebruikt op de domeinkeuze-pagina: geen hero om over te lappen, dus de negatieve marge van .domein-resultaat hier neutraliseren. */ .nieuw-domein-blok { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--rand); } .nieuw-domein-blok .domein-zoek { box-shadow: var(--schaduw); border: 1px solid var(--rand); margin-top: 0; } .domein-resultaat--inline { margin-top: 18px; box-shadow: var(--schaduw); } .domein-keuze legend { font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--sky-diep); padding: 0 6px; } .keuze-rij { flex-direction: row !important; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; } .keuze-rij input[type="radio"] { width: auto; accent-color: var(--sky); margin: 0; } /* ─── Winkelwagen / checkout ──────────────────────────────────── */ .pagina-titel { font-size: 28px; margin-bottom: 24px; } .leeg-blok { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); padding: 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; } .leeg-blok p { color: var(--tekst-sub); } .wagen-layout { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; } .wagen-items { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); padding: 22px; } .wagen-periode { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 14px; color: var(--tekst-sub); } .wagen-periode button { border: 1px solid var(--rand); background: #fff; padding: 7px 14px; border-radius: 999px; font-weight: 700; font-size: 13px; color: var(--tekst-sub); cursor: pointer; } .wagen-periode button.actief { background: var(--sky-licht); color: var(--sky-diep); border-color: var(--sky); } .wagen-rij { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--rand); } .wagen-info { display: flex; flex-direction: column; gap: 3px; } .wagen-type { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--sky-diep); } .wagen-naam { font-weight: 700; color: var(--ink); } .wagen-prijs { font-weight: 800; color: var(--ink); white-space: nowrap; } .wagen-prijs small { font-weight: 600; color: var(--tekst-sub); font-size: 12px; } .wagen-actie { display: block; color: var(--groen); font-size: 12px; font-weight: 700; margin-top: 3px; } .wagen-verwijder { border: 0; background: transparent; color: var(--tekst-sub); font-size: 16px; cursor: pointer; padding: 6px; } .wagen-verwijder:hover { color: var(--rood); } .btn-klein { padding: 8px 18px; font-size: 13px; } .wagen-extra { grid-column: 1 / -1; background: var(--sky-licht); border-radius: 12px; padding: 14px 16px; margin-top: -4px; } .wagen-extra-titel { font-size: 13px; font-weight: 700; color: var(--sky-diep); margin: 0 0 10px; } .wagen-extra .form { gap: 10px; } .wagen-extra .form label { font-size: 13px; } .wagen-extra .form input { padding: 9px 12px; font-size: 14px; } .wagen-samenvatting { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); padding: 24px; box-shadow: var(--schaduw); position: sticky; top: 88px; } .wagen-samenvatting h2 { font-size: 18px; margin-bottom: 16px; } .samenvatting-regel { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; font-size: 14.5px; color: var(--tekst); } .samenvatting-regel > span:first-child { min-width: 0; } .samenvatting-regel > span:last-child { white-space: nowrap; flex-shrink: 0; text-align: right; } .samenvatting-regel small { color: var(--tekst-sub); font-weight: 600; font-size: 12px; } .samenvatting-regel.totaal { border-top: 1px solid var(--rand); margin-top: 8px; padding-top: 14px; font-size: 17px; font-weight: 800; color: var(--ink); } .samenvatting-regel.intro-regel { color: var(--groen); font-weight: 700; font-size: 13.5px; } .samenvatting-regel.na-intro { color: var(--tekst-sub); font-size: 13px; padding-top: 2px; } .samenvatting-regel.na-intro small { color: var(--tekst-sub); } .wagen-samenvatting .btn { margin-top: 16px; } .samenvatting-hint { color: var(--tekst-sub); font-size: 12.5px; margin-top: 12px; } .wagen-terug { display: inline-block; margin-top: 14px; font-size: 14px; } .checkout-overzicht { margin-top: 20px; border: 1px solid var(--rand); border-radius: 12px; padding: 18px; } .checkout-overzicht h3 { font-size: 15px; margin-bottom: 8px; } /* ─── Provisioning-beheer ─────────────────────────────────────── */ .nav-beheer { padding: 9px 14px; border-radius: 10px; color: var(--tekst); font-weight: 600; font-size: 15px; } .nav-beheer:hover { background: var(--sky-licht); color: var(--sky-diep); text-decoration: none; } .opruim-blok { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .modus-badge { font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 999px; } .modus-badge.test { background: var(--oranje-licht, #fef3c7); color: #92600a; } .modus-badge.echt { background: #e7f8ef; color: #067647; } .log-status { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; } .log-status.ok { background: #e7f8ef; color: #067647; } .log-status.fout { background: #fee2e2; color: #b42318; } .log-status.neutraal { background: #eef2f6; color: #5b6577; } /* ─── Account ─────────────────────────────────────────────────── */ .account-kop { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; } .account-kop h1 { font-size: 26px; } .account-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; } .account-blok { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); padding: 24px; box-shadow: var(--schaduw-sm); } .account-blok h2 { font-size: 18px; margin-bottom: 14px; } /* Klantportaal-layout: zijbalk + inhoud */ .account-layout { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; } .account-zijbalk { position: sticky; top: 88px; } .account-nav { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); padding: 10px; box-shadow: var(--schaduw-sm); } .account-nav a { padding: 11px 14px; border-radius: 10px; color: var(--tekst); font-weight: 600; font-size: 15px; } .account-nav a:hover { background: var(--bg-2); text-decoration: none; } .account-nav a.actief { background: var(--sky-licht); color: var(--sky-diep); } /* Betaalgegevens in de zijbalk. Het is een knop (POST naar Stripe) maar hij moet exact hetzelfde ogen als de links ernaast, anders leest het als iets anders dan navigatie. */ .account-nav-form { margin: 0; } .account-nav-form button { padding: 11px 14px; border-radius: 10px; color: var(--tekst); font-weight: 600; font-size: 15px; background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit; width: 100%; } .account-nav-form button:hover { background: var(--bg-2); } .account-uitloggen-form { margin-top: 12px; } .account-uitloggen { width: 100%; padding: 11px 14px; border: 1px solid var(--rand); background: #fff; border-radius: 10px; color: var(--tekst-sub); font-weight: 600; font-size: 14px; cursor: pointer; } .account-uitloggen:hover { border-color: var(--rood); color: var(--rood); } /* Teller-kaarten */ .dienst-tellers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; } .teller-kaart { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); padding: 22px; box-shadow: var(--schaduw-sm); display: flex; flex-direction: column; gap: 2px; transition: transform .16s ease, border-color .16s ease; } .teller-kaart:hover { transform: translateY(-2px); border-color: var(--sky); text-decoration: none; } .teller-getal { font-size: 32px; font-weight: 900; color: var(--ink); line-height: 1; } .teller-label { color: var(--tekst-sub); font-size: 14px; font-weight: 600; } /* Dienstenlijst */ /* DNS-recordbeheer (Mijn Account → domein-detail) */ .dns-record-lijst { display: flex; flex-direction: column; gap: 6px; } .dns-record-koppen, .dns-record-rij { display: grid; grid-template-columns: 70px 1fr 2fr 70px 70px 90px; align-items: center; gap: 10px; } .dns-record-koppen { padding: 0 14px 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--tekst-sub); } .dns-record-rij { background: #fff; border: 1px solid var(--rand); border-radius: 10px; padding: 10px 14px; } .dns-record-rij.alleen-lezen { background: var(--achtergrond-alt, #f7f9fb); } .dns-record-rij input, .dns-record-rij select { width: 100%; padding: 8px 10px; border: 1px solid var(--rand); border-radius: 8px; font-size: 13.5px; } .dns-type { font-weight: 800; font-size: 12px; color: var(--sky-diep); } .dns-waarde { overflow-wrap: anywhere; font-size: 13.5px; } .dns-nieuw-grid { grid-template-columns: 110px 1fr 2fr 110px 90px; } @media (max-width: 860px) { .dns-record-koppen { display: none; } .dns-record-rij { grid-template-columns: 1fr 1fr; row-gap: 8px; } .dns-nieuw-grid { grid-template-columns: 1fr 1fr; } } /* Recordtype-knoppen (net als ISPConfig zelf) — klik = klapt een mini-formulier open. */ .dns-typeknoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; } .dns-nieuw-details { position: relative; } .dns-type-knop { list-style: none; cursor: pointer; user-select: none; display: inline-flex; align-items: center; justify-content: center; padding: 9px 20px; border-radius: 999px; font-weight: 800; font-size: 13px; background: var(--sky-licht); color: var(--sky-diep); border: 1px solid transparent; transition: background .15s ease; } .dns-type-knop::-webkit-details-marker { display: none; } .dns-nieuw-details[open] .dns-type-knop { background: var(--sky); color: #00263a; } .dns-nieuw-form-klein { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; min-width: 260px; background: #fff; border: 1px solid var(--rand); border-radius: 12px; padding: 16px; box-shadow: var(--schaduw-md); gap: 10px; } .dns-nieuw-form-klein label { font-size: 13px; } .dns-nieuw-form-klein input { padding: 8px 10px; font-size: 13.5px; } /* Bestaande records: elke bewerkbare rij is een
die openklapt (net als de "Alleen-lezen"-rijen qua opmaak, maar met een Bewerken-knop). */ .dns-record-details summary.dns-record-rij { list-style: none; cursor: pointer; user-select: none; } .dns-record-details summary.dns-record-rij::-webkit-details-marker { display: none; } .dns-record-details[open] summary.dns-record-rij { border-color: var(--sky); border-radius: 10px 10px 0 0; } .dns-bewerk-knop { display: inline-flex; align-items: center; justify-content: center; padding: 5px 14px; border-radius: 999px; font-weight: 800; font-size: 12px; background: var(--sky-licht); color: var(--sky-diep); } .dns-record-details[open] .dns-bewerk-knop { background: var(--sky); color: #00263a; } .dns-record-bewerkpaneel { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; background: #fff; border: 1px solid var(--sky); border-top: none; border-radius: 0 0 10px 10px; padding: 14px 16px; } .dns-bewerk-form { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: flex-end; } .dns-bewerk-form label, .dns-record-bewerkpaneel > form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; } /* DNSSEC-status + "Test mijn DNS" */ .dns-statusrij { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; } .dns-status-badge { font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 999px; } .dns-status-badge.ok { background: #d1fae5; color: #067647; } .dns-status-badge.waarschuwing { background: #fef3c7; color: #92400e; } .dns-testresultaat { background: #f7f9fb; border: 1px solid var(--rand); border-radius: 12px; padding: 16px; margin-bottom: 20px; } .dns-test-rij { display: flex; flex-wrap: wrap; gap: 10px; padding: 8px 0; border-top: 1px solid var(--rand); font-size: 13.5px; } .dns-test-rij:first-of-type { border-top: none; } .dns-test-rij.ok { color: #067647; } .dns-test-rij.fout { color: #b42318; } .dns-test-ns { font-weight: 700; min-width: 180px; color: var(--ink); } .dns-test-ns small { font-weight: 500; color: var(--tekst-sub); } .dns-bewerk-form input { padding: 8px 10px; font-size: 13.5px; min-width: 120px; } .dns-bewerk-form input[name="data"] { min-width: 220px; flex: 1; } /* Mijn diensten: gegroepeerd per domein ─────────────────────────── */ .dienst-groep { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schaduw-sm); margin-bottom: 20px; overflow: hidden; } .dienst-groep-kop { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 22px; background: var(--sky-licht); border-bottom: 1px solid var(--rand); } .dienst-groep-naam { font-weight: 800; font-size: 17px; color: var(--ink); } .dienst-groep-extern { margin-left: 10px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--tekst-sub); background: #fff; border: 1px solid var(--rand); border-radius: 999px; padding: 3px 10px; vertical-align: middle; } .dienst-regel { display: grid; grid-template-columns: 92px 1fr auto auto; align-items: center; gap: 18px; padding: 16px 22px; border-top: 1px solid var(--rand); } .dienst-regel:first-of-type { border-top: 0; } .dienst-badge { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; text-align: center; padding: 5px 0; border-radius: 999px; } .badge-domein { background: var(--sky-licht); color: var(--sky-diep); } .badge-hosting { background: #ede9fe; color: #5b21b6; } .badge-email { background: #e7f8ef; color: #067647; } .dienst-regel-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .dienst-regel-naam { font-weight: 700; color: var(--ink); } .dienst-regel-detail { font-size: 13px; color: var(--tekst-sub); } /* Opzeg-/bewaarstatus onder de dienstnaam — oranje omdat er een termijn loopt. */ .dienst-opzeg-info { display: block; font-size: 12.5px; font-weight: 700; color: #92400e; } /* Offline wegens wanbetaling — rood, want de dienst werkt nu niet. */ .dienst-betaal-info { display: block; font-size: 12.5px; font-weight: 700; color: #b42318; } /* Openstaande factuur bovenaan Mijn diensten */ .factuur-open { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: #fff5f5; border: 1px solid #fecaca; border-radius: var(--radius); padding: 18px 22px; margin-bottom: 24px; } .factuur-open-titel { font-weight: 800; color: #b42318; margin: 0 0 4px; } .factuur-open-tekst { font-size: 13.5px; color: var(--tekst-sub); margin: 0; max-width: 60ch; } .factuur-open-acties { display: flex; flex-wrap: wrap; gap: 10px; } .dienst-regel-prijs { font-weight: 800; color: var(--ink); white-space: nowrap; } .dienst-regel-prijs small { font-weight: 600; color: var(--tekst-sub); font-size: 12px; } .dienst-regel-actie { display: flex; justify-content: flex-end; } .dienst-groep-voet { padding: 12px 22px; background: var(--bg-2); border-top: 1px solid var(--rand); font-size: 13px; color: var(--tekst-sub); } @media (max-width: 700px) { .dienst-regel { grid-template-columns: 1fr auto; row-gap: 8px; } .dienst-badge { grid-column: 1 / -1; justify-self: start; padding: 5px 12px; } .dienst-regel-actie { grid-column: 1 / -1; justify-content: flex-start; } } /* Status-badges */ .status-badge { font-size: 12px; font-weight: 800; padding: 4px 12px; border-radius: 999px; white-space: nowrap; text-transform: capitalize; } .status-badge.status-betaald, .status-badge.status-actief { background: #d1fae5; color: #067647; } .status-badge.status-nieuw { background: var(--sky-licht); color: var(--sky-diep); } .status-badge.status-betaling_mislukt, .status-badge.status-mislukt { background: #fee2e2; color: #b42318; } .status-badge.status-opgezegd, .status-badge.status-geannuleerd { background: #eef2f6; color: var(--tekst-sub); } /* Tweestapsverificatie */ .tfa-kop { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; } .tfa-kop h2 { margin: 0; } .tfa-stappen { margin: 0 0 12px 18px; color: var(--tekst); font-size: 14.5px; } .tfa-qr { display: inline-block; padding: 10px; background: #fff; border: 1px solid var(--rand); border-radius: 12px; margin-bottom: 10px; } .tfa-geheim { background: var(--bg-2); border: 1px solid var(--rand); border-radius: 6px; padding: 2px 8px; font-family: monospace; font-size: 13px; color: var(--ink); word-break: break-all; } .tfa-acties { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; } .tfa-code-form { flex-direction: row; align-items: flex-end; gap: 12px; } .herstelcodes-blok { background: #fef3c7; border: 1px solid #f3d98a; border-radius: 12px; padding: 16px 18px; margin-bottom: 8px; } .herstelcodes-titel { font-weight: 800; color: #92400e; margin: 0 0 4px; } .herstelcodes-lijst { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; } .herstelcodes-lijst code { background: #fff; border: 1px solid var(--rand); border-radius: 8px; padding: 8px 10px; font-family: monospace; font-size: 14px; text-align: center; letter-spacing: .03em; } @media (max-width: 480px) { .herstelcodes-lijst { grid-template-columns: 1fr; } } @media (max-width: 820px) { .account-layout { grid-template-columns: 1fr; } .account-zijbalk { position: static; } .account-nav { flex-direction: row; flex-wrap: wrap; } .account-nav a { flex: 1; text-align: center; min-width: 120px; } .dienst-tellers { grid-template-columns: 1fr; } } @media (max-width: 820px) { .wagen-layout, .account-grid { grid-template-columns: 1fr; } .wagen-samenvatting { position: static; } } /* ─── Responsief ──────────────────────────────────────────────── */ @media (max-width: 900px) { .usp-strip { grid-template-columns: repeat(2, 1fr); } .prijs-grid, .feature-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 820px) { .desktop-nav { display: none; } .nav-toggle { display: flex; } .header-inner { height: 64px; } .header-links, .header-rechts { padding: 0; } .logo-mid { width: 86px; height: 86px; transform: translateY(32%); } .flash-wrap { margin-top: 44px; } .logo-mid:hover { transform: translateY(32%); } .logo-bol { height: 60px; } .mobiel-menu { position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 4px; background: #fff; border-bottom: 1px solid var(--rand); padding: 12px 24px 20px; box-shadow: var(--schaduw); display: none; } .mobiel-menu.open { display: flex; } .mobiel-menu a { padding: 11px 12px; border-radius: 8px; color: var(--tekst); font-weight: 600; } .mobiel-menu a:hover, .mobiel-menu a.is-actief { background: var(--sky-licht); color: var(--sky-diep); text-decoration: none; } } @media (max-width: 760px) { section { padding: 56px 0; } .cta-band { padding: 40px 24px; } } @media (max-width: 480px) { .usp-strip { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .domein-zoek { flex-direction: column; border-radius: 20px; } .domein-zoek .btn { width: 100%; } } /* ─── Beheer ────────────────────────────────────────────────────────────── Het beheer is geen leespagina maar een werkblad: je scant het op wat afwijkt. Daarom staat de nadruk op status en getallen, niet op typografie. */ .admin-kop { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-bottom: 4px; } .admin-kop h1 { margin: 0; } .admin-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 2px solid #e4e9ef; margin: 18px 0 28px; } .admin-tabs a { padding: 9px 16px; font-size: .95rem; font-weight: 500; color: #5a6572; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; } .admin-tabs a:hover { color: #14548f; } .admin-tabs a.is-actief { color: #14548f; border-bottom-color: #14548f; font-weight: 600; } .admin-melding { padding: 12px 16px; border-radius: 6px; margin-bottom: 22px; border: 1px solid #f0c9c9; background: #fdeaea; color: #8a2b2b; } .admin-melding.fout { border-color: #f0c9c9; background: #fdeaea; } /* Kerncijfers */ .admin-cijfers { display: grid; gap: 12px; margin-bottom: 26px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .admin-cijfers.klein { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin-bottom: 18px; } .cijfer { background: #fff; border: 1px solid #e4e9ef; border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; } .cijfer.let-op { border-color: #e8b84b; background: #fdf8ec; } .cijfer-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: #6b7684; } .cijfer-waarde { font-size: 1.7rem; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; } .cijfer-sub { font-size: .8rem; color: #6b7684; } /* Blokken */ .admin-blok { background: #fff; border: 1px solid #e4e9ef; border-radius: 8px; padding: 20px 22px; margin-bottom: 22px; } .admin-blok > h2 { margin: 0 0 6px; font-size: 1.15rem; } .admin-blok.waarschuwing { border-color: #e8b84b; background: #fffdf7; } .admin-blok.waarschuwing > h2 { color: #8a5d00; } .admin-h3 { margin: 18px 0 6px; font-size: .95rem; } .admin-twee { display: grid; gap: 22px; grid-template-columns: 1fr 1fr; } @media (max-width: 860px) { .admin-twee { grid-template-columns: 1fr; } } /* Tabellen. Eigen scroll-wrapper zonder rand: de .admin-blok is al de kaart, dus .tabel-wrap zou een kader in een kader geven. */ .tabel-scroll { overflow-x: auto; } .admin-tabel { width: 100%; border-collapse: collapse; font-size: .9rem; } .admin-tabel th, .admin-tabel td { padding: 10px 18px 10px 0; } .admin-tabel th:last-child, .admin-tabel td:last-child { padding-right: 0; } .admin-tabel th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: #6b7684; font-weight: 600; border-bottom: 2px solid #dfe6ee; white-space: nowrap; vertical-align: bottom; } .admin-tabel td { border-bottom: 1px solid #eef2f6; vertical-align: top; } .admin-tabel tbody tr:last-child td { border-bottom: none; } .admin-tabel tr.rij-let-op td { background: #fffbf0; } .admin-tabel .rechts { text-align: right; } .admin-tabel .getal { font-variant-numeric: tabular-nums; white-space: nowrap; } .admin-tabel .getal.let-op { color: #8a5d00; font-weight: 600; } .admin-tabel .nowrap { white-space: nowrap; } .admin-tabel .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .84em; } /* Kolombreedtes: alles wat smal moet blijven krijgt `width:1%` plus nowrap — dan houdt de browser die krap en gaat alle overgebleven ruimte naar de tekstkolom, in plaats van dat de lege ruimte over alle kolommen wordt uitgesmeerd. */ .admin-tabel .krap { width: 1%; white-space: nowrap; } .admin-tabel .bericht { word-break: break-word; color: #47525f; } /* Statuspillen */ .pil { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .74rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; margin-right: 4px; } .pil.ok { background: #e0efe9; color: #15614a; } .pil.fout { background: #fbe4e4; color: #8a2b2b; } .pil.neutraal { background: #eaeef3; color: #4a5563; } .pil:last-child { margin-right: 0; } /* Lijstjes met laatste activiteit */ .admin-lijst { list-style: none; margin: 8px 0 0; padding: 0; } .admin-lijst li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 8px 0; border-bottom: 1px solid #eef2f6; font-size: .89rem; } .admin-lijst li:last-child { border-bottom: none; } .lijst-hoofd { font-weight: 500; } .lijst-sub { color: #6b7684; font-size: .84em; display: block; } .admin-meer { display: inline-block; margin-top: 10px; font-size: .88rem; font-weight: 500; } /* Filters */ .admin-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 20px; } .admin-filter input[type="search"], .admin-filter select { padding: 8px 12px; border: 1px solid #d6dee6; border-radius: 6px; font: inherit; font-size: .92rem; min-width: 200px; } .btn-klein { padding: 8px 16px; font-size: .92rem; } /* Definitielijsten op de klantpagina */ .admin-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 8px 0 0; font-size: .92rem; } .admin-dl dt { color: #6b7684; } .admin-dl dd { margin: 0; } .admin-dl dd.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86em; word-break: break-all; } /* ─── Losse mailbox op de e-mailpagina ──────────────────────────────────── Bewust een andere vorm dan de pakketkaarten: het is geen vierde optie in die vergelijking maar een uitweg voor wie er geen van drieën nodig heeft. */ .losse-mailbox, .los-product { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; margin-top: 36px; padding: 26px 30px; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--bg-2); } .losse-mailbox-tekst, .los-product-tekst { flex: 1 1 340px; } .losse-mailbox-tekst h3, .los-product-tekst h3 { margin: 0 0 6px; font-size: 20px; } .losse-mailbox-tekst p, .los-product-tekst p { margin: 0; color: var(--tekst-sub); max-width: 62ch; } .losse-mailbox-koop, .los-product-koop { flex: 0 0 200px; text-align: center; } .losse-mailbox-prijs, .los-product-prijs { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.02em; } .losse-mailbox-prijs .per, .los-product-prijs .per { font-size: 15px; font-weight: 500; color: var(--tekst-sub); } .losse-mailbox-sub, .los-product-sub { display: block; font-size: 13px; color: var(--tekst-sub); margin-bottom: 12px; } @media (max-width: 640px) { .losse-mailbox, .los-product { padding: 22px; } .losse-mailbox-koop, .los-product-koop { flex: 1 1 100%; } } /* Herkomst van de Stripe-cijfers, rechts in de beheernavigatie. */ .admin-tabs-info { margin-left: auto; align-self: center; font-size: .78rem; color: #6b7684; white-space: nowrap; padding: 0 4px 6px; } .admin-tabs-info a { color: #14548f; } /* Betaalgegevens-blok in Mijn account: tekst links, knop rechts. */ .betaalgegevens-blok { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; } .betaalgegevens-blok > div { flex: 1 1 320px; } .betaalgegevens-blok h2 { margin-bottom: 4px; } .betaalgegevens-blok p { max-width: 60ch; margin: 0; } /* ─── Inkijken als klant ────────────────────────────────────────────────── Opvallend en niet weg te klikken: je moet nooit vergeten dat je in andermans account zit en dat wijzigingen daar echt landen. */ .impersonatie-balk { background: #92500a; color: #fff; font-size: 14px; font-weight: 600; padding: 10px 0; position: sticky; top: 0; z-index: 60; } .impersonatie-balk .container { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; } .impersonatie-balk b { font-weight: 800; } .impersonatie-balk form { margin: 0; } .impersonatie-balk button { font: inherit; cursor: pointer; background: #fff; color: #92500a; border: 0; border-radius: 999px; padding: 6px 16px; } .impersonatie-balk button:hover { background: #f4e9da; } .admin-klant-acties { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 18px; } .admin-klant-acties form { margin: 0; } /* ─── Juridische pagina's ───────────────────────────────────────────────── Lange leesteksten: smallere regels, meer lucht tussen de koppen, en tabellen die op een telefoon niet buiten de pagina lopen. */ .inhoud.juridisch { max-width: 72ch; } .inhoud.juridisch h2 { margin: 40px 0 10px; font-size: 21px; letter-spacing: -.01em; padding-bottom: 8px; border-bottom: 1px solid var(--rand); } .inhoud.juridisch h3 { margin: 26px 0 6px; font-size: 17px; } .inhoud.juridisch p, .inhoud.juridisch li { line-height: 1.7; } .inhoud.juridisch ul { padding-left: 22px; } .inhoud.juridisch li { margin-bottom: 6px; } .inhoud.juridisch code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; background: var(--bg-2); padding: 1px 5px; border-radius: 4px; } .juridisch-datum { color: var(--tekst-sub); font-size: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--rand); margin-bottom: 26px; } .juridisch-slot { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--rand); color: var(--tekst-sub); } .juridisch-tabel { width: 100%; border-collapse: collapse; margin: 16px 0 22px; font-size: 15px; display: block; overflow-x: auto; } .juridisch-tabel th, .juridisch-tabel td { text-align: left; padding: 10px 16px 10px 0; border-bottom: 1px solid var(--rand); vertical-align: top; } .juridisch-tabel th { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--tekst-sub); border-bottom-width: 2px; white-space: nowrap; } .juridisch-tabel td:last-child, .juridisch-tabel th:last-child { padding-right: 0; } /* ─── Mijn diensten: samenvatting en inklapbare groepen ─────────────────── Bij twintig domeinen is de lijst het probleem, niet de vormgeving. Daarom eerst de stand van zaken, dan één regel per domein, en de details pas op verzoek. */ .diensten-samenvatting { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 18px; box-shadow: var(--schaduw-sm); } .ds-cijfers { display: flex; flex-wrap: wrap; gap: 32px; } .ds-cijfers > div { display: flex; flex-direction: column; gap: 1px; } .ds-getal { font-size: 24px; font-weight: 800; color: var(--ink); line-height: 1.1; } .ds-label { font-size: 13px; color: var(--tekst-sub); font-weight: 600; } .ds-aandacht { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--rand); font-size: 14px; font-weight: 600; color: #8a5d00; } .ds-aandacht.rustig { color: var(--tekst-sub); font-weight: 500; } .diensten-zoek { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .diensten-zoek input { flex: 1 1 260px; max-width: 340px; padding: 9px 14px; border: 1px solid var(--rand); border-radius: 10px; font: inherit; font-size: 15px; } .diensten-zoek span { font-size: 13px; white-space: nowrap; } /* De groep als
. De pijl komt van ons, niet van de browser. */ details.dienst-groep > summary { cursor: pointer; list-style: none; } details.dienst-groep > summary::-webkit-details-marker { display: none; } details.dienst-groep > summary::marker { content: ''; } .dienst-groep-kop { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; } .dienst-groep-titel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; } .dienst-groep-rechts { display: flex; align-items: center; gap: 12px; margin-left: auto; } .dienst-groep-pijl { width: 8px; height: 8px; flex: none; border-right: 2px solid var(--tekst-sub); border-bottom: 2px solid var(--tekst-sub); transform: rotate(-45deg); transition: transform .15s ease; } details.dienst-groep[open] > summary .dienst-groep-pijl { transform: rotate(45deg); } @media (prefers-reduced-motion: reduce) { .dienst-groep-pijl { transition: none; } } /* Wat er op dit domein draait — ook leesbaar als de groep dicht is. */ .dienst-groep-soorten { display: flex; flex-wrap: wrap; gap: 5px; } .soort-chip { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; padding: 2px 8px; border-radius: 999px; background: var(--bg-2); color: var(--tekst-sub); } .soort-chip.chip-domein { background: #e8f1fb; color: #14548f; } .soort-chip.chip-hosting { background: #e9f3ec; color: #1c6b41; } .soort-chip.chip-email { background: #f2ecfa; color: #543d8a; } .soort-chip.chip-mailbox { background: #f2ecfa; color: #543d8a; } .dienst-groep-punt { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; } .punt-offline { background: #fbe4e4; color: #8a2b2b; } .punt-opgezegd { background: #eaeef3; color: #4a5563; } .punt-binnenkort { background: #fdf3e2; color: #8a5d00; } .punt-bezig { background: #e8f1fb; color: #14548f; } .dienst-groep-prijs { font-size: 14px; font-weight: 700; white-space: nowrap; } .dienst-groep-prijs .pm { font-weight: 500; color: var(--tekst-sub); font-size: 12px; } @media (max-width: 640px) { .ds-cijfers { gap: 20px; } .dienst-groep-rechts { margin-left: 0; width: 100%; } } /* Details in een logtabel mag afbreken en de resterende ruimte pakken; met de smalle kolommen ernaast liep de tabel anders buiten het vak. */ .admin-tabel .bericht { min-width: 24ch; white-space: normal; } /* ─── Beveiligingspagina: wachtwoord en 2FA naast elkaar ───────────────── `align-items: start` zodat de kortere kaart niet meerekt met de lange — de 2FA-kaart groeit flink zodra er een QR-code of een rij herstelcodes in staat. */ .beveiliging-kolommen { display: grid; gap: 24px; align-items: start; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 900px) { .beveiliging-kolommen { grid-template-columns: 1fr; } } /* ─── Verhuiscode ───────────────────────────────────────────────────────── Opvallend, want de klant moet hem nú overnemen: hij is één keer te zien. */ .verhuiscode-blok { background: #fff; border: 2px solid var(--sky); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 24px; box-shadow: var(--schaduw-sm); } .verhuiscode-blok h2 { margin: 0 0 6px; font-size: 19px; } .verhuiscode-blok p { margin: 0 0 10px; } .verhuiscode-blok p:last-child { margin-bottom: 0; } .verhuiscode-waarde { margin: 14px 0 !important; } .verhuiscode-waarde code { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 22px; font-weight: 600; letter-spacing: 0.08em; background: var(--bg-2); border: 1px solid var(--rand); border-radius: 8px; padding: 10px 18px; user-select: all; } .verhuiscode-let-op { color: var(--rood); font-weight: 600; } .domein-acties { display: flex; flex-wrap: wrap; gap: 8px; } .domein-acties form { margin: 0; } /* ─── Mailmigratie ────────────────────────────────────────────────────────── */ .migratie-vouw { background: var(--bg-2); border: 1px solid var(--rand); border-radius: var(--radius); padding: 14px 18px; margin: 14px 0 4px; } .migratie-vouw > summary { cursor: pointer; font-weight: 700; font-size: 15px; list-style: none; } .migratie-vouw > summary::-webkit-details-marker { display: none; } .migratie-vouw > summary::marker { content: ''; } .migratie-vouw > summary::before { content: '+ '; color: var(--tekst-sub); } .migratie-vouw[open] > summary::before { content: '– '; } .migratie-vouw[open] > summary { margin-bottom: 12px; } .migratie-lijst { display: grid; gap: 8px; margin: 14px 0; } .migratie-rij { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--rand); border-radius: 10px; padding: 12px 16px; font-size: 14.5px; } .migratie-rij.migratie-mislukt { border-color: #f0c9c9; background: #fdf6f6; } .migratie-rij.migratie-klaar { border-color: #cfe6da; } .migratie-stand { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* Checkbox met tekst ernaast, uitgelijnd op de eerste regel. */ .checkbox-rij { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-weight: 500 !important; font-size: 14.5px; } .checkbox-rij input[type="checkbox"] { margin-top: 4px; width: auto; } /* ── Aan de slag (dashboard-checklist) ────────────────────────────────────── Eén blok met de openstaande stappen. De vlag links draagt de urgentie, zodat de klant in één blik ziet wat moet en wat kan; de kleur zit dus in de vlag en niet in de hele rij, anders schreeuwt een lijst van vier suggesties even hard als één echte blokkade. */ .aandeslag { border: 1px solid var(--rand); border-radius: var(--radius); background: var(--bg); box-shadow: var(--schaduw-sm); margin-bottom: 24px; overflow: hidden; } .aandeslag-kop { padding: 18px 22px 14px; border-bottom: 1px solid var(--rand); background: var(--bg-2); } .aandeslag-kop h2 { margin: 0 0 3px; font-size: 17px; } .aandeslag-kop p { margin: 0; font-size: 13.5px; } .aandeslag-lijst { list-style: none; margin: 0; padding: 0; } .aandeslag-punt { display: grid; grid-template-columns: 108px 1fr auto; align-items: start; gap: 16px; padding: 16px 22px; border-top: 1px solid var(--rand); } .aandeslag-punt:first-child { border-top: 0; } .aandeslag-vlag { display: inline-block; justify-self: start; margin-top: 2px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; white-space: nowrap; } .aandeslag-nodig .aandeslag-vlag { background: #fff1f0; color: #b42318; border: 1px solid #fecaca; } .aandeslag-aanbevolen .aandeslag-vlag { background: var(--sky-licht); color: var(--sky-diep); border: 1px solid #c7e8ff; } .aandeslag-bezig .aandeslag-vlag { background: var(--bg-2); color: var(--tekst-sub); border: 1px solid var(--rand); } .aandeslag-titel { margin: 0 0 3px; font-weight: 700; color: var(--tekst); font-size: 14.5px; } .aandeslag-uitleg { margin: 0; font-size: 13px; color: var(--tekst-sub); max-width: 62ch; } .aandeslag-actie { align-self: center; white-space: nowrap; } @media (max-width: 700px) { .aandeslag-punt { grid-template-columns: 1fr; row-gap: 10px; } .aandeslag-actie { justify-self: start; } } /* Domeinkeuze: een domein dat de gekozen dienst al heeft, blijft zichtbaar maar is niet te kiezen. Verbergen zou de klant laten zoeken naar een domein dat hij in Mijn account wél ziet staan. */ .keuze-rij-uit { opacity: .5; cursor: not-allowed; } .keuze-rij-uit input[type="radio"] { cursor: not-allowed; } .keuze-melding { background: var(--sky-licht); border: 1px solid #c7e8ff; color: var(--sky-diep); border-radius: var(--radius-sm); padding: 12px 16px; font-size: 14px; margin: 0 0 18px; } .keuze-melding a { color: inherit; text-decoration: underline; } /* Installatiekeuze in de winkelwagen: een regel onder de pakketnaam, niet een blok — het is een bijstelling van iets dat al gekozen is. */ .wagen-installatie { display: flex; align-items: center; gap: 8px; margin-top: 4px; } .wagen-installatie select { font-size: 12.5px; padding: 3px 8px; border: 1px solid var(--rand); border-radius: var(--radius-sm); background: var(--bg); color: var(--tekst-sub); max-width: 100%; } /* Noot onder de pakketten: WordPress is een keuze, geen verplichting. Losse alinea en geen kader — het is een verduidelijking bij de kaarten erboven, geen aanbieding die om aandacht moet concurreren. */ .pakket-noot { max-width: 78ch; margin: 22px auto 0; text-align: center; font-size: 14px; line-height: 1.65; color: var(--tekst-sub); } .pakket-noot b { color: var(--tekst); } /* Betaling onderweg: bewust NIET rood. Er is niets mis en er hoeft niets te gebeuren; het staat er alleen zodat de klant weet waarom zijn factuur nog openstaat. Rood zou hem juist laten bellen. */ .factuur-loopt { background: var(--sky-licht); border: 1px solid #c7e8ff; border-radius: var(--radius); padding: 16px 22px; margin-bottom: 24px; } .factuur-loopt-titel { font-weight: 800; color: var(--sky-diep); margin: 0 0 4px; } .factuur-loopt-tekst { font-size: 13.5px; color: var(--tekst-sub); margin: 0; max-width: 70ch; } /* ── Domeincheck ──────────────────────────────────────────────────────────── De uitslag is een lijst met een oordeel per regel. De kleur zit in de vlag links en niet in de hele rij: een rapport met acht groene punten en één rood punt moet in één oogopslag laten zien wélk punt rood is, en dat werkt niet als alles gekleurd is. */ .hero-compact { padding-block: 54px; } .hero-compact h1 { margin-bottom: 10px; } .check-fout { margin: 14px auto 0; max-width: 60ch; color: #ffd9d9; font-size: 14px; } .check-uitslag { max-width: 900px; } .check-kop { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border: 1px solid var(--rand); border-left: 5px solid var(--rand); border-radius: var(--radius); background: var(--bg); padding: 20px 24px; margin-bottom: 30px; box-shadow: var(--schaduw-sm); } .check-kop-ok { border-left-color: var(--groen); } .check-kop-let-op { border-left-color: var(--oranje); } .check-kop-fout { border-left-color: #d64545; } .check-domein { margin: 0 0 3px; font-size: 21px; font-weight: 800; color: var(--tekst); word-break: break-all; } .check-samenvatting { margin: 0; font-size: 14px; color: var(--tekst-sub); } .check-groep { font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--tekst-sub); margin: 28px 0 10px; } .check-lijst { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; } .check-punt { display: grid; grid-template-columns: 92px 1fr; gap: 16px; align-items: start; padding: 15px 22px; border-top: 1px solid var(--rand); background: var(--bg); } .check-punt:first-child { border-top: 0; } .check-vlag { display: inline-block; justify-self: start; margin-top: 1px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; white-space: nowrap; background: var(--bg-2); color: var(--tekst-sub); border: 1px solid var(--rand); } .check-ok .check-vlag { background: #e0efe9; color: #15614a; border-color: #bfe0d4; } .check-let-op .check-vlag { background: #fdf3e2; color: #8a5a12; border-color: #f3ddb5; } .check-fout .check-vlag { background: #fbe4e4; color: #8a2b2b; border-color: #f0c4c4; } .check-vrij .check-vlag { background: var(--sky-licht); color: var(--sky-diep); border-color: #c7e8ff; } .check-punt-kop { margin: 0 0 2px; font-weight: 700; font-size: 14.5px; color: var(--tekst); } .check-punt-tekst { margin: 0; font-size: 13.5px; color: var(--tekst-sub); max-width: 66ch; } .check-details { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--tekst-sub); } .check-details li { margin-bottom: 2px; } .check-punt-letop { margin: 8px 0 0; font-size: 13px; color: var(--tekst); max-width: 66ch; padding-left: 12px; border-left: 3px solid var(--oranje); } .check-fout .check-punt-letop { border-left-color: #d64545; } .check-punt-acties { margin: 12px 0 0; } .check-slot { margin-top: 34px; padding: 26px 28px; background: var(--bg-2); border: 1px solid var(--rand); border-radius: var(--radius); } .check-slot h2 { margin: 0 0 8px; font-size: 19px; } .check-slot p { margin: 0 0 10px; font-size: 14.5px; color: var(--tekst-sub); max-width: 68ch; } .check-slot-acties { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 0; } .check-voetnoot { margin: 22px 0 0; font-size: 12.5px; color: var(--tekst-sub); max-width: 72ch; } .check-uitleg { max-width: 900px; margin: 0 auto; } .check-uitleg h2 { font-size: 20px; margin: 0 0 18px; } .check-uitleg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px 30px; } .check-uitleg-grid h3 { font-size: 15px; margin: 0 0 5px; } .check-uitleg-grid p { font-size: 13.5px; color: var(--tekst-sub); margin: 0; } @media (max-width: 640px) { .check-punt { grid-template-columns: 1fr; row-gap: 8px; } } /* Honeypot in het registratieformulier: onzichtbaar voor mensen, wel aanwezig in de HTML. Geen display:none - sommige bots slaan juist die velden over. Zie routes/auth.js. */ .veld-weg { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* Proxy-diagnose in het beheer. Het oordeel bovenaan is het enige dat je echt moet lezen; de rest is bewijsmateriaal. */ .proxy-oordeel { border-radius: var(--radius); padding: 18px 22px; margin-bottom: 24px; border: 1px solid var(--rand); } .proxy-ok { background: #e0efe9; border-color: #bfe0d4; } .proxy-fout { background: #fff5f5; border-color: #fecaca; } .proxy-oordeel-kop { margin: 0 0 5px; font-weight: 800; } .proxy-ok .proxy-oordeel-kop { color: #15614a; } .proxy-fout .proxy-oordeel-kop { color: #b42318; } .proxy-oordeel-tekst { margin: 0; font-size: 13.5px; color: var(--tekst-sub); max-width: 78ch; } .proxy-keten { margin: 10px 0 0; padding-left: 22px; font-size: 14px; } .proxy-keten li { margin-bottom: 4px; } /* ── Kennisbank ───────────────────────────────────────────────────────────── Leesbaarheid boven alles: één kolom, ruime regelafstand, en een regellengte die je niet dwingt te scannen. Dit zijn de pagina's waar iemand komt met een probleem, niet om iets te kopen. */ .uitleg-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; max-width: 780px; } .uitleg-kaart { border: 1px solid var(--rand); border-radius: var(--radius); padding: 22px 26px; background: var(--bg); box-shadow: var(--schaduw-sm); } .uitleg-kaart h2 { margin: 0 0 6px; font-size: 19px; } .uitleg-kaart h2 a { color: var(--tekst); text-decoration: none; } .uitleg-kaart h2 a:hover { color: var(--sky-diep); } .uitleg-kaart p { margin: 0; font-size: 14.5px; color: var(--tekst-sub); } .uitleg-datum { margin-top: 10px !important; font-size: 12.5px; } .artikel { max-width: 760px; } .kruimels { font-size: 13px; color: var(--tekst-sub); margin-bottom: 18px; } .kruimels a { color: var(--tekst-sub); } .kruimels span { margin: 0 4px; } .artikel h1 { font-size: 32px; line-height: 1.25; margin: 0 0 6px; } .artikel-datum { font-size: 13px; color: var(--tekst-sub); margin: 0 0 28px; } .artikel-inhoud { font-size: 16px; line-height: 1.75; } .artikel-inhoud .lead-artikel { font-size: 18px; line-height: 1.65; color: var(--tekst); padding-left: 16px; border-left: 3px solid var(--sky); margin-bottom: 30px; } .artikel-inhoud h2 { font-size: 21px; margin: 34px 0 10px; } .artikel-inhoud p { margin: 0 0 16px; } .artikel-inhoud code { background: var(--bg-2); border: 1px solid var(--rand); border-radius: 5px; padding: 1px 6px; font-size: 14px; } .artikel-cta { margin: 40px 0 0; padding: 26px 28px; background: var(--bg-2); border: 1px solid var(--rand); border-radius: var(--radius); } .artikel-cta h2 { margin: 0 0 8px; font-size: 19px; } .artikel-cta p { margin: 0 0 16px; font-size: 14.5px; color: var(--tekst-sub); } .artikel-verder { margin-top: 34px; } .artikel-verder h2 { font-size: 17px; margin: 0 0 8px; } .artikel-verder ul { margin: 0; padding-left: 20px; font-size: 15px; } .artikel-verder li { margin-bottom: 5px; }