/* WEBSITES — Geen panelen en geen kaarten, alleen haarlijnen en ruimte. Eén beeld op de hele pagina: de lagenvergelijking. */ /* PAGINATOKENS — Aanvulling op shared.css, alleen voor deze pagina. */ :root { --web-breed: min(calc(100% - (2 * var(--site-gutter))), 1120px); --web-lees: 760px; --web-lijn: rgba(255, 255, 255, 0.075); --web-lijn-zacht: rgba(255, 255, 255, 0.05); /* De ademruimte tussen twee secties. Bewust royaal. */ --web-ruimte: clamp(94px, 12vw, 178px); } /* GEDEELD OP DEZE PAGINA */ .hero-section, .past-section, .vanaf-section, .aanpassen-section, .lagen-section, .prijs-section, .faq-section, .slot-section { position: relative; z-index: 2; font-family: var(--avdb-font-sans), sans-serif; } .past-section, .vanaf-section, .aanpassen-section, .lagen-section, .prijs-section, .faq-section { padding: 0 0 var(--web-ruimte); } /* Het kleine woord boven een kop. Bewust niet boven elke sectie. */ .section-eyebrow { display: block; margin-bottom: 15px; font-family: var(--avdb-font-mono), monospace; font-size: 10px; font-weight: 500; letter-spacing: 1.7px; text-transform: uppercase; color: rgba(246, 212, 81, 0.55); } /* Twee gouden gloeden op de hele pagina, verder niets */ .hero-section::before, .lagen-section::before { content: ""; position: absolute; width: var(--gloed-w); max-width: var(--gloed-max); aspect-ratio: 1; background: radial-gradient(circle, rgba(246, 212, 81, var(--gloed-a)) 0%, transparent var(--gloed-stop)); pointer-events: none; z-index: 0; } /* Zelfde rustige instap als op de homepage, alleen later in beeld. Zonder Javascript staat de klasse js niet op en gebeurt hier niets. */ .js [data-onthul] { opacity: 0; transform: translateY(14px); } .js [data-onthul].in-beeld { animation: web-in 0.85s var(--avdb-ease) forwards; } /* HERO — Eén zin en veel zwart eromheen. */ .hero-section { display: flex; align-items: center; min-height: calc(100svh - 74px); padding: clamp(48px, 8vh, 90px) 0 var(--web-ruimte); overflow: hidden; } .hero-section::before { --gloed-w: 44vw; --gloed-max: 600px; --gloed-a: 0.08; --gloed-stop: 65%; top: -18%; right: -10%; } .hero-box { position: relative; z-index: 2; width: var(--web-breed); margin: 0 auto; text-align: center; } .hero-box h1 { max-width: 19ch; margin-inline: auto; font-size: clamp(32px, 4.7vw, 56px); font-weight: 500; line-height: 1.06; letter-spacing: -1.8px; color: var(--avdb-text); } .hero-lede { max-width: 34ch; margin: clamp(24px, 3vw, 34px) auto 0; font-size: clamp(15.5px, 1.15vw, 17px); font-weight: 300; line-height: 1.7; color: rgba(255, 255, 255, 0.52); } /* Drie feiten op één regel, verder niets */ .hero-meta { margin-top: clamp(28px, 3.6vw, 42px); font-size: 11.5px; font-weight: 300; letter-spacing: 0.35px; color: rgba(255, 255, 255, 0.56); } .hero-meta span { margin: 0 7px; color: rgba(255, 255, 255, 0.16); } .hero-cta { position: relative; min-height: var(--touch-target); margin-top: 24px; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 400; color: rgba(255, 255, 255, 0.78); transition: color 0.2s ease; } .hero-cta::after { content: ""; position: absolute; left: 0; right: 0; bottom: 5px; height: 1px; background: rgba(255, 255, 255, 0.24); transition: background-color 0.2s ease; } .hero-cta span { transition: transform 0.2s ease; } .hero-cta:hover { color: white; } .hero-cta:hover::after { background: var(--gold); } .hero-cta:hover span { transform: translateX(4px); } .hero-cta:focus-visible { outline: 1px solid var(--gold); outline-offset: 5px; border-radius: 2px; } /* DE ZIN DIE GESCHREVEN WORDT */ .typ-regel { white-space: nowrap; } /* De punt komt pas als de zin af is. Zonder Javascript staat hij er meteen. */ .js .typ-regel .accent-dot { display: none; } .js .typ-regel.typ-klaar .accent-dot { display: inline; } /* De cursor: vast tijdens het typen, daarna nog even knipperen en dan weg */ .typ-caret { display: inline-block; width: 3px; height: 0.74em; margin-left: 0.14em; vertical-align: -0.02em; background-color: var(--gold); box-shadow: 0 0 22px rgba(246, 212, 81, 0.5); opacity: 0; } .js .typ-regel.typ-bezig .typ-caret { opacity: 1; } .js .typ-regel.typ-klaar .typ-caret { animation: caret-knipper 1.1s steps(1, end) 7 forwards; } /* VOOR WIE HET IS — Links de kop, rechts vier regels. Geen opsommingstekens. */ .past-box { width: var(--web-breed); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); align-items: start; gap: clamp(38px, 6vw, 96px); } .past-kop .section-eyebrow { color: rgba(246, 212, 81, 0.82); } .past-kop h2 { max-width: 15ch; font-size: clamp(30px, 3.8vw, 50px); font-weight: 500; line-height: 1.02; letter-spacing: -1.7px; color: var(--avdb-text); } /* De vier punten */ .past-lijst { list-style: none; border-top: 1px solid var(--web-lijn); } .past-lijst li { padding: clamp(17px, 2vw, 24px) 0; border-bottom: 1px solid var(--web-lijn-zacht); font-size: clamp(15px, 1.15vw, 16.5px); font-weight: 300; line-height: 1.55; color: rgba(255, 255, 255, 0.8); } /* En de eerlijkheid eronder, in de marge van de aandacht */ .past-niet { max-width: 56ch; margin-top: clamp(24px, 3vw, 34px); font-size: 13.5px; font-weight: 300; line-height: 1.85; color: rgba(255, 255, 255, 0.52); } /* VANAF NUL — Vier vlakken in een kruis van haarlijnen. */ .vanaf-box { width: var(--web-breed); margin: 0 auto; } .vanaf-kop h2 { font-size: clamp(38px, 5.4vw, 74px); font-weight: 400; line-height: 0.98; letter-spacing: -2.6px; color: var(--avdb-text); } .vanaf-kop p { max-width: 32ch; margin-top: 18px; font-size: 14.5px; font-weight: 300; line-height: 1.7; color: rgba(255, 255, 255, 0.44); } .vanaf-grid { margin-top: clamp(40px, 5vw, 66px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--web-lijn); } /* Op hover kleurt de lijn die er al ligt. Geen extra versiering. */ .vanaf-vak { min-width: 0; padding: clamp(28px, 3.4vw, 44px) clamp(26px, 3.4vw, 52px) clamp(30px, 3.6vw, 48px) 0; border-bottom: 1px solid var(--web-lijn-zacht); transition: border-bottom-color 0.28s ease; } .vanaf-vak:nth-child(2n) { padding-right: 0; padding-left: clamp(26px, 3.4vw, 52px); border-left: 1px solid var(--web-lijn-zacht); } .vanaf-vak:hover { border-bottom-color: rgba(246, 212, 81, 0.58); } .vanaf-vak h3 { max-width: 22ch; font-size: clamp(17px, 1.5vw, 20px); font-weight: 500; line-height: 1.3; letter-spacing: -0.45px; color: rgba(255, 255, 255, 0.9); } .vanaf-vak p { max-width: 40ch; margin-top: 11px; font-size: 13.5px; font-weight: 300; line-height: 1.7; color: rgba(255, 255, 255, 0.42); } /* AANPASSEN — Vraag links, antwoord lager en ingesprongen ernaast. */ .aanpassen-box { width: var(--web-breed); margin: 0 auto; padding-top: clamp(28px, 3.4vw, 42px); display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: start; gap: clamp(42px, 7vw, 112px); border-top: 1px solid var(--web-lijn); } .aanpassen-kop { min-width: 0; } .aanpassen-vraag { max-width: 12ch; font-size: clamp(30px, 4vw, 50px); font-weight: 500; line-height: 1.05; letter-spacing: -1.7px; color: var(--avdb-text); } .aanpassen-antwoord { max-width: 50ch; margin-top: clamp(48px, 6vw, 82px); padding-left: clamp(22px, 3vw, 38px); border-left: 1px solid var(--web-lijn); } .aanpassen-kort { font-size: clamp(20px, 2vw, 25px); font-weight: 500; line-height: 1.2; letter-spacing: -0.7px; color: var(--avdb-text); } .aanpassen-uitleg { margin-top: 16px; font-size: 13.5px; font-weight: 300; line-height: 1.85; color: rgba(255, 255, 255, 0.43); } /* DE LAGEN — Twee stapels van gelijke hoogte. Vijf lagen worden er één. */ .lagen-section { overflow: hidden; } .lagen-section::before { --gloed-w: 46vw; --gloed-max: 640px; --gloed-a: 0.055; --gloed-stop: 68%; top: 2%; left: -18%; } .lagen-kop, .lagen-vergelijk, .lagen-gevolg { position: relative; z-index: 2; width: var(--web-breed); margin-inline: auto; } .lagen-kop h2 { font-size: clamp(29px, 3.6vw, 47px); font-weight: 500; line-height: 1.06; letter-spacing: -1.6px; color: var(--avdb-text); } .lagen-kop p { max-width: 40ch; margin-top: 17px; font-size: 14.5px; font-weight: 300; line-height: 1.7; color: rgba(255, 255, 255, 0.44); } .lagen-vergelijk { margin-top: clamp(40px, 5.4vw, 70px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); } .stapel { min-width: 0; display: flex; flex-direction: column; } .stapel-kop { font-family: var(--avdb-font-mono), monospace; font-size: 9.5px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.3); } .stapel-maatwerk .stapel-kop { color: rgba(246, 212, 81, 0.68); } .stapel-lagen { min-height: clamp(268px, 31vw, 350px); margin-top: 16px; list-style: none; display: flex; flex-direction: column; gap: 7px; } .stapel-lagen li { flex: 1; min-height: 36px; display: grid; place-items: center; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 11px; text-align: center; font-size: 12.5px; font-weight: 300; line-height: 1.4; letter-spacing: 0.2px; color: rgba(255, 255, 255, 0.4); } /* De server is in beide stapels hetzelfde. Alleen daarboven zit het verschil. */ .stapel-lagen .laag-server { background-color: rgba(255, 255, 255, 0.012); color: rgba(255, 255, 255, 0.28); } /* Deze ene laag is even hoog als de vijf ernaast. Vandaar flex 5. */ .stapel-maatwerk .laag-eigen { flex: 5; padding: 16px 22px; background-color: rgba(246, 212, 81, 0.032); border-color: rgba(246, 212, 81, 0.38); font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--avdb-text); } .stapel-slot { margin-top: 14px; font-size: 11.5px; font-weight: 300; line-height: 1.55; color: rgba(255, 255, 255, 0.28); } .stapel-maatwerk .stapel-slot { color: rgba(255, 255, 255, 0.42); } /* Wat die lagen in de praktijk betekenen */ .lagen-gevolg { margin-top: clamp(38px, 4.6vw, 58px); padding-top: 26px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3.4vw, 48px); border-top: 1px solid var(--web-lijn); } .lagen-gevolg dt { font-family: var(--avdb-font-mono), monospace; font-size: 9.5px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(246, 212, 81, 0.55); } .lagen-gevolg dd { max-width: 32ch; margin-top: 11px; font-size: 13px; font-weight: 300; line-height: 1.7; color: rgba(255, 255, 255, 0.42); } /* PRIJS — Duidelijk in het midden, maar geen monument. */ .prijs-box { width: var(--web-breed); margin: 0 auto; } .prijs-kop { max-width: 720px; margin: 0 auto; text-align: center; } .prijs-vanaf, .prijs-btw { display: block; font-family: var(--avdb-font-mono), monospace; font-size: 10px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.3); } .prijs-bedrag { display: block; margin: 10px 0 8px; font-size: clamp(46px, 6.2vw, 82px); font-weight: 400; line-height: 0.92; letter-spacing: -3.2px; color: var(--avdb-text); } .prijs-uitleg { margin-top: clamp(26px, 3vw, 38px); } .prijs-uitleg h2 { font-size: clamp(23px, 2.4vw, 31px); font-weight: 500; line-height: 1.14; letter-spacing: -1px; color: var(--avdb-text); } .prijs-uitleg p { max-width: 42ch; margin: 15px auto 0; font-size: 14px; font-weight: 300; line-height: 1.75; color: rgba(255, 255, 255, 0.44); } /* Wat het bedrag beweegt */ .prijs-factoren { margin-top: clamp(40px, 5vw, 64px); padding-top: 30px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 5vw, 72px); border-top: 1px solid var(--web-lijn); text-align: center; } .prijs-factoren dt { font-family: var(--avdb-font-mono), monospace; font-size: 9.5px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(246, 212, 81, 0.55); } .prijs-factoren dd { max-width: 30ch; margin: 11px auto 0; font-size: 13px; font-weight: 300; line-height: 1.7; color: rgba(255, 255, 255, 0.44); } .prijs-onder { margin-top: clamp(38px, 4.8vw, 58px); display: flex; justify-content: center; } /* KNOP — Dezelfde knop als .project-button op de homepage. Zodra hij op een derde pagina terugkomt hoort hij in shared.css, niet hier. */ .website-cta { min-height: var(--touch-target); padding: 13px 27px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; background-color: transparent; border: 1px solid var(--gold); border-radius: var(--avdb-pill); font-size: 14px; font-weight: 500; letter-spacing: 0.2px; color: var(--gold); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .website-cta:hover { border-color: #fbe07a; transform: translateY(-2px); box-shadow: 0 18px 40px -14px rgba(246, 212, 81, 0.85); } .website-cta span { display: inline-block; transition: transform 0.22s ease; } .website-cta:hover span { transform: translateX(4px); } /* VEELGESTELDE VRAGEN — Openen schuift de vraag opzij, achter een gouden streepje. */ .faq-box { width: var(--web-breed); margin: 0 auto; } .faq-kop { max-width: var(--web-lees); margin: 0 auto clamp(26px, 3.2vw, 40px); text-align: center; } .faq-kop h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 500; line-height: 1.1; letter-spacing: -1.2px; color: var(--avdb-text); } .faq-lijst { max-width: var(--web-lees); margin: 0 auto; border-top: 1px solid var(--web-lijn); } .faq-lijst details { border-bottom: 1px solid var(--web-lijn-zacht); } .faq-lijst summary { position: relative; padding: 22px 46px 22px 0; list-style: none; cursor: pointer; font-size: 15px; font-weight: 400; line-height: 1.45; color: rgba(255, 255, 255, 0.76); transition: color 0.2s ease, padding-left 0.32s var(--avdb-ease); } .faq-lijst summary::-webkit-details-marker { display: none; } /* Het streepje dat de vraag opzij duwt */ .faq-lijst summary::before { content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 1px; background-color: var(--gold); transform: translateY(-50%); transition: width 0.32s var(--avdb-ease); } .faq-lijst summary::after { content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-family: var(--avdb-font-mono), monospace; font-size: 17px; font-weight: 400; color: rgba(246, 212, 81, 0.6); transition: color 0.2s ease; } .faq-lijst summary:hover { color: white; } .faq-lijst summary:hover::before { width: 9px; } .faq-lijst details[open] summary { padding-left: 22px; color: var(--avdb-text); } .faq-lijst details[open] summary::before { width: 13px; } .faq-lijst details[open] summary::after { content: "−"; color: var(--gold); } .faq-lijst details p { max-width: 60ch; margin: -2px 0 24px; padding-right: 46px; padding-left: 22px; font-size: 13.5px; font-weight: 300; line-height: 1.8; color: rgba(255, 255, 255, 0.43); } /* SLOT */ .slot-section { padding: 0 0 clamp(74px, 8vw, 112px); } .slot-box { width: var(--web-breed); margin: 0 auto; padding-top: clamp(32px, 4vw, 48px); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 26px; border-top: 1px solid var(--web-lijn); } .slot-box p { font-size: clamp(25px, 3.2vw, 40px); font-weight: 500; letter-spacing: -1.3px; color: var(--avdb-text); } /* TOETSENBORD-FOCUS */ .website-cta:focus-visible { outline: 1px solid var(--gold); outline-offset: 5px; border-radius: var(--avdb-pill); } .faq-lijst summary:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; border-radius: 3px; } .faq-lijst summary:focus-visible::before { width: 9px; } /* ANIMATIE */ @keyframes web-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes caret-knipper { 0%, 45% { opacity: 1; } 46%, 100% { opacity: 0; } } /* RESPONSIVE — Alleen de regels van deze pagina. De site-brede breakpoints staan in responsive.css, dus hier dezelfde grenzen aanhouden: 980 tablet — kolommen worden rijen 640 telefoon — één rustige flow 360 smalst — laatste inhoudelijke reducties */ @media (max-width: 980px) { :root { --web-ruimte: clamp(76px, 11vw, 118px); } .past-box { grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 4vh, 38px); } .aanpassen-box { grid-template-columns: minmax(0, 1fr); gap: 24px; } .aanpassen-vraag { max-width: 16ch; } .aanpassen-antwoord { max-width: 56ch; margin-top: 0; } .lagen-gevolg { grid-template-columns: minmax(0, 1fr); row-gap: 24px; } .lagen-gevolg dd { max-width: 52ch; } .prijs-kop { max-width: 680px; } .prijs-uitleg p { max-width: 52ch; } .prijs-factoren { gap: clamp(18px, 3vw, 34px); } .prijs-factoren dd { max-width: 28ch; } } @media (max-width: 640px) { .hero-section { min-height: 0; padding-top: clamp(40px, 7vh, 62px); } .hero-box h1 { font-size: clamp(28px, 8vw, 35px); line-height: 1.1; letter-spacing: -1.15px; } .hero-lede { max-width: 32ch; } .hero-meta span { margin: 0 5px; } .typ-caret { width: 2px; } .past-lijst li { padding: 16px 0; font-size: 14.5px; } .vanaf-grid { grid-template-columns: minmax(0, 1fr); } .vanaf-vak, .vanaf-vak:nth-child(2n) { padding: 26px 0 28px; border-left: 0; } .vanaf-vak h3 { max-width: 100%; } .aanpassen-vraag { font-size: clamp(27px, 8vw, 36px); } .aanpassen-antwoord { padding-left: 18px; } .lagen-vergelijk { grid-template-columns: minmax(0, 1fr); gap: 32px; } .stapel-lagen { min-height: 244px; } .stapel-maatwerk .stapel-lagen { min-height: 176px; } .stapel-maatwerk .laag-eigen { flex: 3; font-size: 13.5px; } .prijs-bedrag { font-size: clamp(46px, 13vw, 64px); letter-spacing: -2.4px; } .prijs-factoren { grid-template-columns: minmax(0, 1fr); gap: 24px; } .prijs-factoren dd { max-width: 36ch; } .faq-lijst summary { padding-right: 38px; font-size: 14.5px; } .faq-lijst details[open] summary { padding-left: 16px; } .faq-lijst details p { padding-right: 20px; padding-left: 16px; } .slot-box { align-items: flex-start; flex-direction: column; gap: 24px; } .slot-box .website-cta { width: 100%; } } @media (max-width: 360px) { .vanaf-kop p, .lagen-kop p { font-size: 14px; } .stapel-lagen li { padding-inline: 10px; font-size: 11.5px; } .stapel-maatwerk .laag-eigen { font-size: 13px; } } /* RUST VOOR WIE DAAROM VRAAGT */ @media (prefers-reduced-motion: reduce) { .js [data-onthul], .js [data-onthul].in-beeld { opacity: 1; transform: none; animation: none; } .js .typ-regel .accent-dot { display: inline; } .typ-caret, .js .typ-regel.typ-klaar .typ-caret { opacity: 0; animation: none; } .vanaf-vak, .hero-cta, .hero-cta::after, .hero-cta span, .website-cta, .website-cta span, .faq-lijst summary, .faq-lijst summary::before, .faq-lijst summary::after { transition: none; } .hero-cta:hover span { transform: none; } .website-cta:hover { transform: none; } .website-cta:hover span { transform: none; } }