/* Ticketsystemen — pagina-specifieke afwijkingen t.o.v. de gedeelde blok-CSS. Wordt alleen op /ticketsystemen/ geladen (techdog_page_slug()). Alle waarden zijn gemeten op de live pagina (1920 / 1512 / 1280 / 1024 / 900 / 768 / 600px). Blokvolgorde in .td-main: 1 hero · 2 blauwe band "Grip op uw automatisering" 3 "Wij helpen u graag!" · 4 blauwe band "Totaaloplossing en advies" 5 grijs "Externe koppelingen" · 6 "Meer dan alleen een ticketsysteem" */ /* ------------------------------------------------------------------ * * Altijd geldend * ------------------------------------------------------------------ */ /* Divi's knoppen op deze pagina zijn 14px met regelhoogte 23,8px en staan 20px uit elkaar; de gedeelde .td-btn is 15px. */ .page-ticketsystemen .td-btn{font-size:14px;line-height:23.8px;} .page-ticketsystemen .block-text-image__buttons{gap:20px;} /* Het hero-icoon staat 18px boven de kop (Divi-afbeeldingsmodule). */ .page-ticketsystemen .block-hero__icon{margin-bottom:18px;} /* Deze hero heeft geen knop; de intro is de laatste regel van de kolom. */ .page-ticketsystemen .block-hero__intro{margin-bottom:0;} /* Blok 6 heeft alleen een vinkjeslijst in de rechterkolom; die begint gelijk met de bovenkant van de rij. */ .page-ticketsystemen .td-main>.block:nth-child(6) .block-two-col__iconlist{margin-top:0;} /* Divi's kop in blok 6 is net zo groot als op de blauwe banden. */ .page-ticketsystemen .td-main>.block:nth-child(6) .block-two-col__head h2{font-size:50px;line-height:60px;margin:30px 0;} /* "Externe koppelingen" begint zonder ruimte boven de kop (geen module-marge in Divi); de kop houdt 7px + Divi's 10px kop-padding over. */ .page-ticketsystemen .td-main>.block:nth-child(5) .block-text-image__text{padding-top:0;} .page-ticketsystemen .td-main>.block:nth-child(5) .block-text-image__text h2{margin-bottom:17px;} /* ------------------------------------------------------------------ * * Desktop — verticaal ritme * Divi zet onder elke rij 27px (2%) en geeft de secties nog een eigen * marge (hero 50px, gewone secties 30px, blauwe/grijze band 0); die * marges klappen samen tussen buren. * ------------------------------------------------------------------ */ @media (min-width:981px){ /* Sectiepadding 4% + rijpadding 2% van de viewport (Divi bevriest die boven 1350px op 54 resp. 27px — zie het blok hieronder). */ .page-ticketsystemen .block-hero{padding:6% 0;margin:50px 0;} .page-ticketsystemen .block-two-col.block--blue{padding:100px 0;padding-bottom:calc(100px + 2%);margin:0;} .page-ticketsystemen .td-main>.block:nth-child(3){padding:4% 0 2%;margin:30px 0;} .page-ticketsystemen .td-main>.block:nth-child(5){padding:100px 0;padding-bottom:calc(100px + 2%);margin:0;} .page-ticketsystemen .td-main>.block:nth-child(6){padding:4% 0 6%;margin:30px 0;} /* Divi's kolommen liggen op een vast percentage vast; een grid-kolom van 1fr zou meegroeien met het langste woord in de kop ("geautomatiseerde"), waardoor de kolommen rond 1024px scheef lopen. minmax(0,1fr) houdt ze even breed en laat het woord — net als in Divi — uitsteken. */ .page-ticketsystemen .block-hero__inner, .page-ticketsystemen .block-text-image__inner, .page-ticketsystemen .block-two-col__inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} /* Divi's goot is een percentage van de rij: goot 3 = 5,5%, goot 2 = 3%. */ .page-ticketsystemen .block-hero__inner{gap:5.5%;} .page-ticketsystemen .td-main>.block:nth-child(3) .block-text-image__inner{gap:5.5%;} .page-ticketsystemen .td-main>.block:nth-child(5) .block-text-image__inner{gap:3%;} .page-ticketsystemen .td-main>.block:nth-child(6) .block-two-col__inner{gap:5.5%;} /* Module-marges rekent Divi in procenten van de rij (1,5% en 2,75%); omgerekend naar de kolom waarin ze staan is dat 3,09% resp. 5,82%. */ .page-ticketsystemen .block-two-col.block--blue .block-two-col__iconlist{margin-top:3.09%;} .page-ticketsystemen .td-main>.block:nth-child(3) .block-text-image__body{margin-bottom:5.82%;} .page-ticketsystemen .td-main>.block:nth-child(5) .block-text-image__body{margin-bottom:3.09%;} } /* Boven 1350px staan de sectie- en rijpadding van Divi vast. */ @media (min-width:1350px){ .page-ticketsystemen .block-hero{padding:81px 0;} .page-ticketsystemen .block-two-col.block--blue{padding:100px 0 127px;} .page-ticketsystemen .td-main>.block:nth-child(3){padding:54px 0 27px;} .page-ticketsystemen .td-main>.block:nth-child(5){padding:100px 0 127px;} .page-ticketsystemen .td-main>.block:nth-child(6){padding:54px 0 81px;} } /* ------------------------------------------------------------------ * * Tablet en telefoon — gestapeld * ------------------------------------------------------------------ */ @media (max-width:980px){ /* Blok 6 staat in Divi op "verborgen op tablet en telefoon". */ .page-ticketsystemen .td-main>.block:nth-child(6){display:none;} /* Gestapeld rekent Divi met vaste maten: sectie 50px, rij 30px, en 30px tussen de twee kolommen. De blauwe/grijze banden houden hun 100px. */ .page-ticketsystemen .block-hero{padding:80px 0;margin:75px 0 50px;} .page-ticketsystemen .block-hero__inner{gap:30px;} /* Ook gestapeld mag de kolom niet meegroeien met het langste woord in de kop; Divi laat dat woord uitsteken en breekt de rest binnen de rij af. */ .page-ticketsystemen .block-hero__inner, .page-ticketsystemen .block-text-image__inner, .page-ticketsystemen .block-two-col__inner{grid-template-columns:minmax(0,1fr);} .page-ticketsystemen .block-two-col.block--blue{padding:100px 0 130px;margin:0;} .page-ticketsystemen .block-two-col__iconlist{margin-top:30px;} .page-ticketsystemen .td-main>.block:nth-child(3){padding:50px 0 30px;margin:0;} .page-ticketsystemen .td-main>.block:nth-child(5){padding:100px 0 130px;margin:0;} .page-ticketsystemen .block-text-image__inner{gap:30px;} .page-ticketsystemen .block-text-image__body{margin-bottom:30px;} } @media (max-width:767px){ /* Telefoon: de hero schuift naar 10px onder de header, de banden zakken terug naar 50px sectiepadding (de 30px rijpadding blijft). */ .page-ticketsystemen .block-hero{margin-top:10px;} .page-ticketsystemen .block-two-col.block--blue{padding:50px 0 80px;} .page-ticketsystemen .td-main>.block:nth-child(5){padding:50px 0 80px;} /* Koppen die Divi op telefoon op 32px zet (1,2em regelhoogte). */ .page-ticketsystemen .block-two-col.block--blue h2, .page-ticketsystemen .td-main>.block:nth-child(5) .block-text-image__text h2{font-size:32px;line-height:38.4px;} .page-ticketsystemen .td-main>.block:nth-child(5) .block-text-image__text h2{margin-bottom:10px;} /* Twee knoppen staan op telefoon tegen elkaar aan, met 20px erboven. */ .page-ticketsystemen .td-main>.block:nth-child(3) .block-text-image__buttons{gap:0;padding-top:20px;} }