/* Administratieve pakketten — pagina-specifieke afwijkingen t.o.v. de gedeelde blok-CSS. Wordt alleen op /administratieve-pakketten/ geladen (techdog_page_slug() === 'administratieve-pakketten'). Alle waarden zijn gemeten op de live pagina (1920 / 900 / 600px). Blokvolgorde in .td-main: 1 hero "Bespaar tijd met het automatiseren van uw boekhouding!" 2 blauwe band "Administratieve mogelijkheden die meegroeien met uw ambities" 3 "Wij helpen u graag!" (illustratie rechts) 4 blauwe band "Persoonlijke aandacht bij uw automatisering" */ /* ------------------------------------------------------------------ * * Alle schermbreedtes * ------------------------------------------------------------------ */ /* Het hero-icoon staat in Divi op zijn eigen hoogte (max 55px) en houdt er 18px onder aan; de thema-standaard schaalt op breedte en houdt 14px aan. */ .page-administratieve-pakketten .block-hero__icon{width:auto;height:auto;max-height:55px;margin-bottom:18px;} /* Knoppenrij in "Wij helpen u graag!": Divi's dsm_button is 14px met regelhoogte 23,8px (knop 48px hoog) en de tweede knop staat 20px rechts van de eerste (button_two margin-left). */ .page-administratieve-pakketten .block-text-image__buttons{gap:20px;} .page-administratieve-pakketten .block-text-image__buttons .td-btn{font-size:14px;line-height:23.8px;} /* ------------------------------------------------------------------ * * Desktop * ------------------------------------------------------------------ */ @media (min-width:981px){ /* De hero en de rij "Wij helpen u graag!" staan op Divi's standaardgoot 3 (5,5% van de rij); daarmee is elke kolom 726px op een 1920px-scherm, precies zoals live. Beide blauwe banden staan op goot 2 (3%) en hebben dat al uit two-col-text.css. */ .page-administratieve-pakketten .block-hero__inner, .page-administratieve-pakketten .block-text-image__inner{gap:5.5%;} /* Divi zet de kop van deze hero op 70px; de thema-standaard is 65px. */ .page-administratieve-pakketten .block-hero__text h1{font-size:70px;line-height:70px;} /* Ruimte boven de icoon-lijst onder de intro is de ondermarge van de Divi-tekstmodule: 2,75% van de rij = 5,82% van de kolom (goot 3). */ .page-administratieve-pakketten .block-hero__intro{margin-bottom:5.82%;} /* Zelfde marge, maar dan boven de knoppenrij van blok 3. */ .page-administratieve-pakketten .block-text-image__body{margin-bottom:5.82%;} /* Blauwe band: de icoon-lijst staat op goot 2, waar Divi 1,5% van de rij aanhoudt = 3,09% van de kolom (de thema-standaard 23px hoort bij een andere rij). */ .page-administratieve-pakketten .block-two-col__iconlist{margin-top:3.09%;} /* Sectiehoogtes. Elke Divi-rij zet 2% van de schermbreedte onder zich en de sectie zelf 4%; daar komen de sectiemarges van deze pagina bij: hero 4%+2% boven, 2%+4%+50px onder blauw 100px boven, 2%+100px+30px onder blok 3 4% boven, 2%+4%+30px onder blauw 100px boven, 2%+100px onder */ .page-administratieve-pakketten .td-main>.block:nth-child(1){padding:6% 0 calc(6% + 50px);} .page-administratieve-pakketten .td-main>.block:nth-child(2){padding:100px 0 calc(130px + 2%);} .page-administratieve-pakketten .td-main>.block:nth-child(3){padding:4% 0 calc(6% + 30px);} .page-administratieve-pakketten .td-main>.block:nth-child(4){padding:100px 0 calc(100px + 2%);} } /* Boven 1350px bevriest Divi die sectie- en rijpadding op 54px en 27px. */ @media (min-width:1350px){ .page-administratieve-pakketten .td-main>.block:nth-child(1){padding:81px 0 131px;} .page-administratieve-pakketten .td-main>.block:nth-child(2){padding:100px 0 157px;} .page-administratieve-pakketten .td-main>.block:nth-child(3){padding:54px 0 111px;} .page-administratieve-pakketten .td-main>.block:nth-child(4){padding:100px 0 127px;} } /* ------------------------------------------------------------------ * * Tablet en telefoon — gestapeld. * ------------------------------------------------------------------ */ @media (max-width:980px){ /* Gestapeld houdt Divi overal 30px aan: tussen de kolommen (kolommarge) en tussen de modules binnen een kolom (modulemarge). */ .page-administratieve-pakketten .block-hero__inner, .page-administratieve-pakketten .block-text-image__inner{gap:30px;} .page-administratieve-pakketten .block-hero__intro{margin-bottom:30px;} .page-administratieve-pakketten .block-text-image__body{margin-bottom:30px;} .page-administratieve-pakketten .block-two-col__iconlist{margin-top:30px;} /* Onder 980px bevriest Divi de sectiepadding op 50px en de rijpadding op 30px. Daarbovenop komen de sectiemarges; op tablet sluiten blok 2 t/m 4 zonder marge op elkaar aan, alleen onder de hero blijft 50px staan. hero 50+30 boven, 30+50+50 onder blauw 100 boven, 30+100 onder blok 3 50 boven, 30+50 onder blauw 100 boven, 30+100 onder */ .page-administratieve-pakketten .td-main>.block:nth-child(1){padding:80px 0 130px;} .page-administratieve-pakketten .td-main>.block:nth-child(2){padding:100px 0 130px;} .page-administratieve-pakketten .td-main>.block:nth-child(3){padding:50px 0 80px;} .page-administratieve-pakketten .td-main>.block:nth-child(4){padding:100px 0 130px;} } @media (max-width:767px){ /* Op telefoon staan de twee knoppen tegen elkaar (Divi zet de linkermarge van button_two op 0) en zit er 20px boven de knoppenrij. */ .page-administratieve-pakketten .block-text-image__buttons{gap:0;padding-top:20px;} /* Telefoon: de blauwe banden staan op 50px sectiepadding en blok 3 zet zijn onderpadding op 0 (alleen de 30px rijpadding blijft staan). */ .page-administratieve-pakketten .td-main>.block:nth-child(2){padding:50px 0 80px;} .page-administratieve-pakketten .td-main>.block:nth-child(3){padding:50px 0 30px;} .page-administratieve-pakketten .td-main>.block:nth-child(4){padding:50px 0 80px;} }