/* ============================================================ coachjan.be, de mobiele laag (19 september 2026) Dit bestand laadt als láátste stylesheet op elke pagina, na blog.css en na het stijlblok van een losse pagina. Bijna alles staat in een media query, dus boven 820 pixels verandert er niets: desktop kan hier per definitie niet van breken. Waarom één bestand en geen regels in veertien stijlblokken: zo staat de mobiele ronde op één plek, is ze in één keer na te lezen en in één keer terug te draaien. Let op bij het opladen: net als lettertypes.css moet dit bestand mee. Laad je alleen gewijzigde mappen op, dan geeft /mobiel.css een 404 en valt de site terug op de oude mobiele vorm. Drie drempels: 820 telefoon en kleine tablet (daar verschijnt de hamburger) 640 telefoon 400 kleine telefoon (iPhone SE en smaller) ============================================================ */ /* ============================================================ 1. De voet, inklapbaar op de telefoon Deze regels staan bewust buiten een media query: ze gelden voor
/, elementen die in de oude voet niet bestaan. Zonder javascript staat elke groep open, precies zoals vroeger. ============================================================ */ .voet .voet-groep > summary{list-style:none;display:block} .voet .voet-groep > summary::-webkit-details-marker{display:none} .voet .voet-groep > summary::marker{content:""} .voet .voet-groep > summary h3{margin-bottom:14px} .voet .voet-groep > summary:focus-visible{outline:2px solid var(--accent-licht,#D9A066);outline-offset:3px;border-radius:4px} /* het pijltje bestaat alleen op de telefoon */ .voet .voet-groep > summary .voet-pijl{display:none} /* ============================================================ 2. Telefoon en kleine tablet (tot 820) ============================================================ */ @media (max-width:820px){ /* ---- de balk ---- De hamburger was 42 bij 38 en dus te klein voor een duim. Hij groeit naar 48 bij 48 en schuift met een negatieve marge terug op zijn plaats, zodat de balk niet hoger wordt. */ .hamburger{width:48px;height:48px;padding:12px 11px;margin-right:-8px} .nav-actie{gap:6px} /* de balk mag niet hoger worden van die grotere knopjes */ .nav-inner{padding-top:10px;padding-bottom:10px;gap:12px} /* flex:none, anders perst de balk het logo smaller dan het hoort en staat het handschrift uitgerekt in de breedte (zichtbaar vanaf 320) */ .nav-logo{display:flex;align-items:center;min-height:44px;flex:none} .nav-logo img{flex:none} /* de knop in de balk stond op 13,5px en 38px hoog */ .nav-actie .btn,.nav-actie .knop{ min-height:44px;display:inline-flex;align-items:center; padding:10px 18px;font-size:14.5px} /* het opengeklapte menu: elke regel een volwaardige rij */ .nav-links a{ display:flex;align-items:center;min-height:50px;padding:12px 2px} .nav-links a[aria-current="page"]:not(.btn)::after{bottom:10px} /* het menu mag scrollen als er ooit meer items bij komen */ .nav-links.open{max-height:calc(100dvh - 100%);overflow-y:auto} /* ---- tekstlinks die als knop werken ---- "of laat me je eerst bellen", "of doe eerst de gratis test": dat zijn echte acties en ze waren 25 tot 33 pixels hoog. */ .actie .tekstlink,.actie .textlink, .pt-actie .tekstlink,.sup-actie .tekstlink,.blad-actie .tekstlink, .acties .tekstlink,.kaart-actie .tekstlink,.cjt-ctaactie .cjt-link, .kamer-actie .textlink,.zingroep .meer, .art-delen a,.art-delen button{ min-height:44px;display:inline-flex;align-items:center} /* Een tekstlink die alleen in zijn alinea staat, of onderaan een kaart, is geen woord in een zin maar een knop zonder vlak. Die krijgt dezelfde ruimte. Een link midden in een lopende zin blijft wat hij is: dat mag van de toegankelijkheidsregels en alles anders breekt de regelafstand. */ p > .tekstlink:only-child,p > .textlink:only-child, .kaart > .tekstlink,.blok > .tekstlink,.fam > .tekstlink, .zaak-links > .tekstlink,.sp-kaart > .tekstlink,.huis > .tekstlink, .gratisstrip > .tekstlink,.boektekst > p > .tekstlink, .ct-gegevens li > a,.sp-contact li > a, .mini-actie > .tekstlink, .boekkaart .tekstlink,.blad-fam > .tekstlink, .sl-anders-weg .tekstlink,.cjt-andere li > .tekstlink, .verderrij .blok > .tekstlink,.huizen .huis > .tekstlink{ min-height:44px;display:inline-flex;align-items:center} /* de kop van een kamerstrook op de blogindex is ook een link */ .kamers--stroken .kamer h2 a{display:inline-block;padding:6px 0} .voet a.voet-meer{padding-top:12px;padding-bottom:12px} /* De hulplijnen op Psychotherapie staan midden in een zin en zijn kort: 1813, 1733, 112. Precies op het moment dat iemand ze nodig heeft, wil je niet dat mistikken. Die krijgen ruimte zonder dat de regel verspringt. */ .nood a{display:inline-block;padding:10px 7px;margin:-10px -3px} /* ---- lijsten met links: elke regel minstens 44 hoog ---- */ .kamerlijst li a,.zingroep li a,.kamerarchief a, .verschenenlijst a,.jur-inhoud a,.voet li a{ display:block;padding-top:11px;padding-bottom:11px} .verschenenlijst li{padding:2px 0} .kamerarchief li{padding:0} /* een kruimelpad krijgt ruimte zonder de regel te verspringen */ .kruimel a{display:inline-block;padding:10px 9px;margin:-10px -9px} /* ---- beeld ---- */ /* een desktopuitsnede is geen mobiele uitsnede: het gezicht van de spreekkamerband moet mee naar boven */ .aanpak{background-position:65% center} /* De band met de aanpak en het praktijkvlak op Over Jan laadden een foto van 1600 pixels breed en 202 kB, voor een strook van 390 breed die bovendien achter een donkere laag van 70 tot 97 procent zit. De versie van 924 weegt 93 kB en je ziet er niets aan. */ .aanpak{ background-image:linear-gradient(90deg,rgba(14,31,46,.97) 0,rgba(14,31,46,.93) 45%,rgba(14,31,46,.70) 100%), url("/beelden/praktijk-spreekkamer-924.jpg")} .praktijk-foto{background-image:url("/beelden/praktijk-spreekkamer-924.jpg")} /* ---- verticale ruimte ---- Op desktop is 60 pixels lucht mooi. Op een telefoon is het een halve schermhoogte voor je iets ziet. */ .herkenning,.samen,.wieikben,.gratis,.meer,.zelf,.manieren,.zo, .vragen,.stemmen,.praktisch,.verhaal,.vak,.boeken,.rollen,.thuis, .sp-themas,.sp-lezingen,.sp-media,.sp-kit,.sp-bio,.sp-zaal,.sp-pers, .sl-reis,.sl-vraag,.sl-blok,.sl-wouter,.pt-blok,.blad-blok{ padding-top:40px;padding-bottom:40px} .aanpak,.praktijk{padding-top:48px;padding-bottom:48px} .slot,.sp-slot,.sl-slot,.pt-slot,.blad-slot,.sup-slot,.verder{ padding-top:36px;padding-bottom:36px} } /* ============================================================ 3. Telefoon (tot 640) ============================================================ */ @media (max-width:640px){ /* ---- de kop van de home ---- De foto nam 460 pixels: samen met de balk was het eerste scherm op. De titel en de knop stonden eronder, buiten beeld. Nu blijft de foto ruim genoeg om Jan te zien, en staan de titel, de onderregel en de knop mee op het eerste scherm. 19 september, tweede ronde: de tekst schoof met een negatieve marge 28 pixels ín de foto en kwam daardoor op Jans hals te liggen. Die marge is weg. In de plaats komt lucht die met het scherm meegroeit, zodat het tekstblok op elk toestel onder de foto begint en niet op één toestel toevallig goed staat. Wat er aan ruimte bij komt, wordt binnen het blok teruggewonnen: iets kortere tussenruimtes en een strakkere regelafstand in de onderregel. Zo blijven label, titel, intro en knop één rustig blok en blijft "of doe eerst de gratis test" in beeld. */ .kop-foto{height:clamp(268px,72vw,330px);background-position:50% 16%} .kop-tekst{margin-top:0;padding-top:clamp(12px,4vw,24px);padding-bottom:clamp(30px,7vw,44px)} .kop .label{margin-bottom:11px;line-height:1.4} .kop h1{font-size:33px;line-height:1.1;margin-bottom:13px} .kop .onder{font-size:19px;line-height:1.36;margin-bottom:14px} .kop .actie{gap:11px;margin-bottom:12px} .kop .actie > .knop,.kop .actie > .btn{min-height:52px;padding-top:12px;padding-bottom:12px} .kop .kennis{margin-bottom:18px} .kop .wie{font-size:15.5px} /* koppen van losse pagina's met een foto erboven */ .sl-kop-foto,.sup-kop-foto,.sp-kop-foto{max-height:300px} /* ---- knoppen: de hoofdactie mag de volle breedte ---- */ .actie > .knop,.actie > .btn, .blad-actie > .knop,.pt-actie > .knop,.sup-actie > .knop, .acties > .knop,.kaart-actie > .knop, .art-gratis > p > .btn,.art-blok > p > .btn, .duo .art-gratis .btn,.duo .art-blok .btn, .cj-velden .btn,.cj-velden .knop, .kamer-start--leeg .btn,.art-magazine .btn{ display:flex;width:100%;justify-content:center;text-align:center; min-height:52px;align-items:center} /* de tekstlink eronder blijft een tekstlink, maar wel op volle breedte zodat hij niet half naast de knop hangt */ .actie{flex-direction:column;align-items:stretch;gap:14px} /* de tekstlink onder de knop blijft een tekstlink: het streepje hoort onder de woorden te staan, niet over de volle breedte */ .actie .tekstlink,.actie .textlink, .blad-actie .tekstlink,.pt-actie .tekstlink,.sup-actie .tekstlink, .acties .tekstlink,.kaart-actie .tekstlink{ align-self:flex-start;justify-content:flex-start;text-align:left} /* ---- formulieren ---- */ .cj-veld input,.cjt-veld input{min-height:52px;font-size:16.5px} .cj-velden{gap:10px} .cj-fijn,.mag-fijn{font-size:13.5px} /* ---- kaarten ---- Eén kolom met een beeld van 16 op 10 werd een stapel van 400 pixels per kaart. 16 op 9 scheelt per kaart een halve duimbeweging, zonder dat het beeld iets verliest. */ .artikel .kaartbeeld{aspect-ratio:16/9} .artikel-tekst{padding:18px 20px 22px} .artikel h3{font-size:20px} .artikels{gap:18px} /* ---- typografie: niets onder 12,5 ---- */ .buurkamer .kamerlabel{font-size:12.5px;letter-spacing:1.6px} .aanpak .label{font-size:12.5px} .voet .fijn{font-size:13.5px;line-height:1.75} .art-magazine .cj-fijn,.blog-magazine .cj-fijn{font-size:13.5px} /* ---- een tabel die opzij zou schuiven ---- */ .jur-tabel-rol{overflow-x:visible} /* 20 september: de tabel wordt op een telefoon een stapel kaartjes, en elke cel draagt haar eigen kopje via data-kop. De kopregel van de tabel bleef daar staan als een rij van 490 pixels in een scherm van 390, half buiten beeld. */ .jur-tabel thead{display:none} /* ---- de tekening van het zeven-ogen-model ---- Die is breder dan het scherm en schuift opzij, maar je zag niet dát ze schuift: ze leek afgesneden. Nu staat er een randje schaduw op de rand en een regel eronder die het zegt. */ .sup-tekening{position:relative;padding-bottom:6px} /* 20 september: de vervaging aan de rand was het enige teken dat de tekening opzij schuift. Eén regel erboven zegt het gewoon. Alleen op een telefoon: op desktop past de tekening en staat er niets. */ .sup-schuifhint{display:block;margin:0 0 10px;font-size:13.5px;color:var(--bijtekst,#4A5A69)} .sup-schuif{ -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain; mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%); -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%)} .sup-schuif:focus-visible{outline:2px solid var(--accent,#C17F3A);outline-offset:4px;border-radius:8px} .sup-tekening svg{min-width:680px} .sup-tekening figcaption::before{ content:"Schuif de tekening opzij om ze helemaal te zien."; display:block;font-weight:500;color:var(--inkt,#0E1F2E);margin-bottom:6px} /* ---- de voet, ingeklapt ---- Vijf groepen van 21 links maakten de voet 1.193 pixels hoog, op elke pagina van de site. Ingeklapt is dat ruim 300, en er verdwijnt geen enkele link: wie een groep opentikt, krijgt ze allemaal. Zonder javascript staat alles gewoon open. */ .voet{padding:32px 0 24px} /* de accordeons dragen zelf hun lijnen: geen tweede lijn uit de merkrij of de onderregel */ .voet .voet-merk{padding-bottom:8px;margin-bottom:0;gap:12px;border-bottom:0} .voet .fijn{border-top:0} .voet .merk--voet img{height:46px} .voet .voet-zin{font-size:15px;line-height:1.6;max-width:32em} .voet a.voet-meer{display:inline-block;padding:8px 0} .voet .voet-sociaal{margin:2px 0 0 -11px} .voet .voet-rijen{display:block;margin-bottom:16px} .voet .voet-groep{border-top:1px solid rgba(255,255,255,.12)} .voet .voet-groep:last-child{border-bottom:1px solid rgba(255,255,255,.12)} .voet .voet-groep > summary{ display:flex;align-items:center;justify-content:space-between;gap:14px; min-height:52px;padding:6px 2px;cursor:pointer; -webkit-tap-highlight-color:transparent} .voet .voet-groep > summary h3{ margin:0;font-size:14px;letter-spacing:1.8px;color:#fff} .voet .voet-groep > summary .voet-pijl{ display:block;flex:none;width:11px;height:11px;margin-right:4px; border-right:2px solid var(--bijtekst-dk,#A8B3BE); border-bottom:2px solid var(--bijtekst-dk,#A8B3BE); transform:rotate(45deg) translate(-2px,-2px); transition:transform .2s ease} .voet .voet-groep[open] > summary h3{color:var(--accent-licht,#D9A066)} .voet .voet-groep[open] > summary .voet-pijl{ transform:rotate(-135deg) translate(-3px,-3px)} .voet .voet-groep > ul{padding:2px 0 14px} .voet .voet-groep--vast > summary{cursor:default} .voet .voet-groep--vast > summary .voet-pijl{display:none} .voet .voet-groep--vast[open] > summary h3{color:#fff} .voet .voet-groep li{padding:0} .voet .voet-groep li a{font-size:16px} .voet .fijn{padding-top:18px} .voet .fijn a{display:inline-block;padding:10px 3px;margin:0 -3px;white-space:nowrap} /* ---- ruimte ---- */ .art-meer{padding:40px 0 48px} .blog-magazine{padding:38px 0} .brief-strook,.netverschenen + .brief-strook{padding:38px 0} .kamer-herken{padding:32px 0 28px} .kamer-buren{padding:32px 0 36px} .kamer-duo{padding-bottom:36px} .zinnen{padding:38px 0 32px} .lijst-slot{padding-bottom:56px} .jur{padding:28px 0 48px} .art-body{padding:30px 0 24px} .art-body h2{margin:1.7em 0 .5em} .art-uitspraak{margin-top:2em;margin-bottom:2em;padding:32px 0} .art-blok{padding:26px 24px} .art-magazine{padding:24px 22px} } /* ============================================================ 4. Kleine telefoon (tot 400) De voet liep onder 340 pixels 33 pixels over de rand. Dat komt van de vier icoontjes plus de merkzin op één rij. ============================================================ */ @media (max-width:400px){ .nav-logo img{height:38px} .nav-actie .btn,.nav-actie .knop{padding:10px 14px;font-size:14px} .kop h1{font-size:30px} .voet .voet-merk{grid-template-columns:1fr} .voet .voet-sociaal{flex-wrap:wrap} .art-delen-knoppen{gap:8px} /* break-word en niet anywhere: een lang woord springt naar de volgende regel en wordt alleen gebroken als het dan nog niet past. Met anywhere stond er "persoonlijkheidstyp / e" op de testpagina. */ h1,h2{overflow-wrap:break-word} .cjt-titel{font-size:26px} } /* de allersmalste schermen: 320 tot 359. Daar past logo + knop + hamburger net niet meer op één regel met de gewone marge. */ @media (max-width:359px){ :root{--pad:18px} .nav-inner{gap:8px} .nav-logo img{height:34px} .nav-actie{gap:2px} .nav-actie .btn,.nav-actie .knop{padding:10px 11px;font-size:13.5px} .hamburger{margin-right:-11px} } /* ============================================================ 5. Zonder muis Een telefoon kent geen hover. Wie een kaart aantikt, houdt daar de hover-stand aan: de kaart blijft omhoog staan met een schaduw eronder tot je ergens anders tikt. Dat leest als een fout. Kleur mag blijven, dat leest als "aangetikt". De sprong niet. ============================================================ */ @media (hover:none){ a:hover,button:hover, .artikel:hover,.mini:hover,.buurkamer:hover,.kamerkaart:hover, .kaart:hover,.zinnen a:hover,.knop:hover,.btn:hover, .blok:hover,.huis:hover,.fam:hover,.boekkaart:hover, .sp-kaart:hover,.sl-kaart:hover,.pt-kaart:hover{ transform:none!important} .artikel:hover,.mini:hover,.buurkamer:hover,.kamerkaart:hover, .kaart:hover,.knop:hover,.btn:hover{ box-shadow:none!important} .buurkamer:hover .buurbeeld img{transform:none!important} a,button,summary,label{-webkit-tap-highlight-color:rgba(193,127,58,.18)} } /* ============================================================ 6. De test De engine is al voor de telefoon gebouwd. Eén ding sprong: de pagina werd korter of langer bij elke volgende vraag, omdat het ene antwoord twee regels neemt en het andere één. ============================================================ */ @media (max-width:820px){ /* gemeten over alle twaalf vragen: 340 tot 421 pixels, afhankelijk van hoeveel antwoorden twee regels nemen. Met een vaste ondergrens staat alles onder de vragen stil terwijl je door de test gaat. */ .cjt-antwoorden{min-height:396px;align-content:start} /* en de vraag zelf neemt één, twee of drie regels. Zonder ondergrens schuiven de antwoorden daardoor bij elke vraag onder je duim vandaan. */ .cjt-vraagtekst{min-height:3.75em} } @media (max-width:359px){ .cjt-antwoorden{min-height:421px} .cjt-vraagtekst{min-height:5em} } /* ============================================================ 7. Focus Op de blog tekent een focusrand zich af in marine, maar de losse pagina's dragen die regel niet: daar viel de toetsenbordgebruiker terug op het dunne standaardrandje van de browser. Eén regel voor heel de site, in dezelfde vorm als op de blog. ============================================================ */ a:focus-visible,button:focus-visible,input:focus-visible, select:focus-visible,textarea:focus-visible,summary:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--marine,#0E1F2E);outline-offset:3px;border-radius:3px} .voet a:focus-visible,.voet summary:focus-visible, .donker a:focus-visible,.donker button:focus-visible, .kop a:focus-visible,.aanpak a:focus-visible, .art-blok a:focus-visible,.netverschenen a:focus-visible{ outline-color:var(--accent-licht,#D9A066)} /* ============================================================ 8. Pre-launchronde, 20 september 2026 ============================================================ */ /* 8a. De vragenlijst onderaan Kom op voor jezelf en 7 dagen voor jezelf opkomen stond ook op een telefoon in twee kolommen. Op 390 pixels werd dat twee kolommen van 165 pixels, met antwoorden van twee of drie woorden per regel. `.vragenrij` staat in de