/* Theme Name: Praktijk Amber Theme URI: https://praktijkamber.nl Author: Digiboost Author URI: https://digiboost.nl Description: Maatthema voor Praktijk Amber, energetisch gezinstherapeut. Barnsteen als materiaal: onder de zichtbare klacht ligt een emotionele lading. Eenpagina-opzet met Over mij, Wat is NEI, Werkwijze en Contact. Version: 0.4.0 Requires at least: 6.4 Tested up to: 7.1 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: praktijk-amber Tags: one-column, custom-logo, custom-menu, translation-ready */ /* ============================================================ Fonts — lokaal geserveerd, geen verzoek naar Google (AVG). Variabele fonts: Fraunces draagt de assen opsz, wght, SOFT en WONK, Karla de as wght. ============================================================ */ @font-face{ font-family:"Fraunces"; font-style:normal; font-weight:300 500; font-display:swap; src:url("assets/fonts/fraunces-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Fraunces"; font-style:normal; font-weight:300 500; font-display:swap; src:url("assets/fonts/fraunces-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:"Karla"; font-style:normal; font-weight:300 600; font-display:swap; src:url("assets/fonts/karla-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Karla"; font-style:normal; font-weight:300 600; font-display:swap; src:url("assets/fonts/karla-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ============================================================ Tokens: barnsteen (goud) tegen petrol. Zie DESIGN.md. ============================================================ */ :root{ --shell:#F7F2E9; --shell-deep:#EFE5D3; --tide:#24383F; --tide-soft:#51666D; /* Setting Plaster als waas: het vlak tussendoor, waar eerst koel grijsblauw lag. Een tint die het goud warm houdt in plaats van het koud af te zetten. */ --blush:#F6E2D8; /* Oval Room Blue, dieper gezet zodat crème erop boven 8:1 uitkomt. Alleen voor het slotvlak: contact en voet. De tekstkleur blijft --tide. */ --deep:#33484B; --honey:#B87B22; --honey-lt:#E3AE55; --honey-dk:#8A5715; /* Knopverloop apart. Wit op goud haalt maar 2 tot 3,5:1; petrol op een licht goudverloop haalt overal ruim 5:1, en houdt het goud van het logo vast in plaats van het naar brons te trekken. Een tint lichter dan het logogoud, zodat de petrol tekst er bovenop komt te staan in plaats van erin te zakken: 5,9 tot 8,0:1 over het hele verloop. */ --btn-1:#F2CB86; --btn-2:#E9BA66; --btn-3:#DEAC52; --line:rgba(36,56,63,.14); /* het harsvlak onder de waterlijn in de klachtkaarten */ --resin:rgba(227,174,85,.18); /* Dezelfde kleur, maar dekkend: --resin platgeslagen op --shell. De curve steekt met 1px over het harsvlak heen zodat er nooit een kiertje valt, en met twee doorzichtige lagen werd juist díe strook een streepje (#F0DCB8 in plaats van #F3E6CE). Dekkend schilderen lost dat op zonder de overlap op te geven. Werkt omdat de kaart altijd op --shell staat. */ --resin-solid:#F3E6CE; /* het roze tegenvlak van --resin: Setting Plaster, voor de ervaringen */ --petal:rgba(226,163,136,.22); --petal-line:rgba(197,129,99,.32); --step--1:clamp(.82rem,.79rem + .14vw,.9rem); --step-0:clamp(1rem,.96rem + .2vw,1.12rem); --step-1:clamp(1.2rem,1.1rem + .5vw,1.45rem); --step-2:clamp(1.6rem,1.35rem + 1.2vw,2.3rem); --step-3:clamp(2.1rem,1.6rem + 2.4vw,3.4rem); --step-4:clamp(2.6rem,1.7rem + 4.2vw,5rem); --nav-h:124px; --nav-h-stuck:84px; --pad:clamp(1.25rem,5vw,4rem); --wide:1220px; --text:660px; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ /* De balk staat vast, dus de pagina houdt zelf de ruimte vrij. Zo verschuift er niets in de doorstroom als de balk bij het scrollen krimpt. */ margin:0;padding-top:var(--nav-h);background:var(--shell);color:var(--tide); font-family:Karla,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:var(--step-0);line-height:1.65;font-weight:400; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit} h1,h2,h3{ font-family:Fraunces,Georgia,serif;font-weight:300; /* LET OP: SOFT en WONK moeten ook in de Google Fonts-URL staan (…:opsz,wght,SOFT,WONK@…). Vraag je ze niet op, dan levert Google een bestand zónder die assen en doet deze regel niets — dan staat WONK vast op de standaard 1 en SOFT op 0. WONK 1 is een keuze: van s, h, m en n is de alternatieve vorm op gewicht 300 identiek, alleen de ampersand verschilt, en die eigenzinnige & is precies wat we willen. */ font-variation-settings:"SOFT" 40,"WONK" 1; line-height:1.08;letter-spacing:-.015em;margin:0; text-wrap:balance; } p{margin:0} .wrap{max-width:var(--wide);margin-inline:auto;padding-inline:var(--pad)} .narrow{max-width:var(--text)} .eyebrow{ font-size:var(--step--1);text-transform:uppercase; letter-spacing:.28em;font-weight:500;color:var(--honey-dk); } .lede{font-size:var(--step-1);line-height:1.5;color:var(--tide-soft);font-weight:300} section{padding-block:clamp(4rem,9vw,7.5rem)} /* --- buttons ------------------------------------------------ */ .btn{ display:inline-flex;align-items:center;gap:.6em; font:inherit;font-weight:500;font-size:var(--step--1); letter-spacing:.06em;text-transform:uppercase; padding:1.05em 1.9em;border-radius:100px;text-decoration:none; border:1px solid transparent;cursor:pointer; transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,background .3s,color .3s; } .btn--gold{ background:linear-gradient(105deg,var(--btn-1),var(--btn-2) 55%,var(--btn-3)); color:var(--tide);box-shadow:0 10px 26px -14px rgba(138,87,21,.85); } .btn--gold:hover{transform:translateY(-2px);box-shadow:0 16px 32px -12px rgba(138,87,21,.85)} .btn--ghost{border-color:var(--line);color:var(--tide)} .btn--ghost:hover{border-color:var(--honey);color:var(--honey-dk)} .btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{ outline:2px solid var(--honey);outline-offset:3px } /* --- nav ---------------------------------------------------- */ /* Bovenaan de pagina is de balk glas: het heroverloop loopt er doorheen en het logo staat vrij in het goud. Zodra je scrolt schuift er melkwit onder, want dan komt er tekst achterlangs. */ .nav{ position:fixed;top:0;left:0;right:0;z-index:50; background:rgba(247,242,233,0);backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:background-color .4s ease,border-color .3s,box-shadow .3s; } .nav.is-stuck{background:rgba(247,242,233,.82);border-bottom-color:var(--line)} /* Het opengeklapte mobiele menu heeft altijd een ondergrond, ook op scrollpositie 0. */ .nav.is-menu{background:rgba(247,242,233,.95)} /* De padding zit binnen min-height (border-box), dus --nav-h blijft de echte hoogte van de balk — waar de hero met zijn negatieve margin op rekent. Het verschil tussen boven en onder geeft het logo lucht aan de kop van de pagina. */ .nav__in{ display:flex;align-items:center;gap:2rem; min-height:var(--nav-h);padding-top:1.1rem; transition:min-height .35s cubic-bezier(.2,.7,.3,1),padding-top .35s cubic-bezier(.2,.7,.3,1); } /* Bovenaan de pagina mag het logo lucht hebben. Zodra de balk over de inhoud heen schuift wordt hij compact — daar is hij navigatie, geen briefhoofd. */ .nav.is-stuck .nav__in{min-height:var(--nav-h-stuck);padding-top:0} .nav__logo,.custom-logo-link{display:block;line-height:0} /* height:auto is nodig: WordPress zet width/height als attribuut op de , en dat telt als presentational hint die de verhouding zou vastzetten. */ .nav__logo img,.custom-logo-link img{ width:clamp(150px,17vw,196px);height:auto; transition:width .35s cubic-bezier(.2,.7,.3,1); } .nav.is-stuck .nav__logo img,.nav.is-stuck .custom-logo-link img{width:clamp(132px,14vw,168px)} .nav__links{display:flex;gap:clamp(1rem,2.4vw,2.2rem);margin-left:auto;list-style:none;padding:0;margin-block:0} .nav__links a{ text-decoration:none;font-size:var(--step--1);letter-spacing:.04em; color:var(--tide-soft);position:relative;padding-block:.4em; } .nav__links a::after{ content:"";position:absolute;left:0;right:100%;bottom:0;height:1px; background:var(--honey);transition:right .35s cubic-bezier(.2,.7,.3,1); } .nav__links a:hover{color:var(--tide)} .nav__links a:hover::after{right:0} .nav__cta{display:none} /* boven 940px staat de knop in beeld; de losse link zou dan dubbelop zijn */ @media(min-width:940px){.nav__cta{display:inline-flex;padding:.85em 1.5em}.nav__contact{display:none}} .nav__toggle{ display:none;margin-left:auto;background:none;border:1px solid var(--line); border-radius:100px;padding:.7em 1em;font:inherit;font-size:var(--step--1); letter-spacing:.12em;text-transform:uppercase;color:var(--tide);cursor:pointer; } @media(max-width:759px){ :root{--nav-h:88px;--nav-h-stuck:64px} .nav__in{gap:1rem;padding-top:.7rem} .nav__toggle{display:inline-block} /* Het menu valt onder de balk uit in plaats van hem uit te rekken. Rekte hij wel op, dan verloor het logo zijn centreerruimte en versprong het op het moment dat je het menu opende. Nu blijft de balk precies even hoog. */ .nav__links{ position:absolute;left:0;right:0;top:100%; display:none;flex-direction:column;gap:0;margin:0; padding:0 var(--pad) .8rem; max-height:calc(100dvh - var(--nav-h));overflow-y:auto; background:rgba(247,242,233,.97);backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } .nav__links.is-open{display:flex} .nav__links li{border-top:1px solid var(--line)} .nav__links a{display:block;padding:1em 0;font-size:var(--step-0);color:var(--tide)} .nav__links a::after{display:none} } /* --- hero --------------------------------------------------- */ /* De hero begint bovenaan het scherm, niet onder de balk: alleen zo loopt het verloop achter de doorzichtige nav door. De balk blijft gewoon sticky. */ .hero{ position:relative;overflow:hidden;margin-top:calc(var(--nav-h) * -1); padding-block:calc(var(--nav-h) + clamp(2rem,5vw,4rem)) clamp(3rem,7vw,5rem); } /* Het licht in de hero. Eerder lagen hier vijf middelgrote radialen over elkaar. Op een breed scherm ging dat net goed, maar op een smal scherm werden het losse plekken: je zag de bollen als bollen. Nu is het één bron, van links, met een straal die veel groter is dan het vlak zelf — daardoor zie je alleen de flank van de afname en nooit een rand. Daar bovenop twee rechte verlopen, en die kunnen per definitie niet vlekken. Laag één ligt bovenop. */ .hero__glow{ position:absolute;inset:0;pointer-events:none;z-index:0; background: /* de bovenrand licht houden: het logo staat op bijna-wit, niet in het brons */ linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.34) 12%,rgba(255,255,255,0) 30%), /* zachte zweem rechtsonder: Setting Plaster, het accent uit het palet. Stond hier eerder koel grijsblauw; dat hoorde bij de blauwe sectie tussendoor en die is er niet meer. */ linear-gradient(318deg,rgba(238,205,190,.55) 0%,rgba(247,242,233,0) 44%), /* het goud, als één brede waas die van links binnenvalt */ radial-gradient(155% 115% at -12% 38%, rgba(227,174,85,.5) 0%, rgba(227,174,85,.2) 32%, rgba(247,242,233,0) 66%); /* Zonder masker knipt overflow:hidden het verloop af op de onderrand van de hero: een harde streep dwars over de pagina. Zo dooft het uit en loopt de hero over in de sectie eronder. */ -webkit-mask-image:linear-gradient(180deg,#000 52%,rgba(0,0,0,0) 100%); mask-image:linear-gradient(180deg,#000 52%,rgba(0,0,0,0) 100%); } .hero__in{position:relative;z-index:1;display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center} @media(min-width:900px){.hero__in{grid-template-columns:1.15fr .85fr}} .hero h1{font-size:var(--step-4);margin-block:1.1rem 1.4rem;max-width:14ch} .hero h1 em{font-style:normal;color:var(--honey-dk)} .hero .lede{max-width:44ch} .hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem} .hero__facts{ display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:2.4rem; padding-top:1.5rem;border-top:1px solid var(--line); font-size:var(--step--1);color:var(--tide-soft); } .hero__facts span{display:inline-flex;align-items:center;gap:.5em} .hero__facts span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--honey-lt)} /* portrait as a resin drop */ .drop{position:relative;justify-self:center;width:min(100%,330px)} .drop__img{ position:relative;isolation:isolate;overflow:hidden; border-radius:165px 165px 22px 22px;aspect-ratio:3/3.5;background:var(--shell); } .drop__img img{width:100%;height:100%;object-fit:cover;object-position:50% 18%} .drop__img::after{ content:"";position:absolute;inset:0;pointer-events:none; background:var(--shell);mix-blend-mode:multiply; } .drop__ring{ position:absolute;inset:-16px;border:1px solid rgba(184,123,34,.45); border-radius:180px 180px 30px 30px;pointer-events:none; } .drop__tag{ position:absolute;right:-14px;bottom:6%;background:var(--shell); border:1px solid var(--line);border-radius:100px;padding:.6em 1.1em; font-size:var(--step--1);box-shadow:0 12px 24px -16px rgba(36,56,63,.5); } /* --- de swash uit het logo, als scheiding tussen kleurvlakken --- De curve is de rand zelf: de vulling heeft de kleur van de sectie eronder en steekt omhoog in de sectie erboven. Opeenvolgende curves worden gespiegeld, zodat het een systeem blijft en geen behang wordt. */ /* De losse haarlijn: waar de kleur niet wisselt blijft de grens recht en ligt de curve er alleen overheen. */ .swash-lijn{ display:block;width:100%;height:clamp(30px,4vw,56px); color:var(--honey-lt);opacity:.65; } .has-swash{position:relative} .swash-edge{ position:absolute;left:0;right:0;top:1px;transform:translateY(-100%); display:block;width:100%;height:clamp(30px,4vw,58px); pointer-events:none;z-index:1; } .swash-edge--flip{transform:translateY(-100%) scaleX(-1)} .swash-edge__fill{fill:currentColor} .swash-edge__line{ fill:none;stroke:var(--honey-lt);stroke-width:1.1; vector-effect:non-scaling-stroke;opacity:.55; } /* --- signature: wat je ziet / wat eronder ligt -------------- */ .layers{background:linear-gradient(180deg,var(--shell) 0%,var(--shell-deep) 55%,var(--shell) 100%)} .layers .wrap,.nei .wrap,.steps .wrap,.about .wrap,.contact .wrap{position:relative;z-index:2} .layers__head{display:grid;gap:1.4rem;margin-bottom:clamp(2.5rem,5vw,3.5rem)} @media(min-width:860px){ .layers__head{grid-template-columns:1fr 1fr;gap:3rem;align-items:end} } .layers h2{font-size:var(--step-3);max-width:16ch} .layers__grid{ display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); list-style:none;padding:0;margin:0; } /* De kaart is in tweeen gedeeld met de swash als waterlijn. Beide helften staan er meteen; wat eronder ligt zit in het hars, niet achter een muisbeweging. */ .layer{ display:flex;flex-direction:column;overflow:hidden;text-align:left; border:1px solid rgba(184,123,34,.28);border-radius:20px;background:var(--shell); } .layer .eyebrow{letter-spacing:.18em;font-size:.78rem} .layer p{margin:0} .layer__t{ font-family:Fraunces,Georgia,serif;font-size:var(--step-1);line-height:1.25; margin-top:.5rem;font-variation-settings:"SOFT" 40,"WONK" 1; } /* flex:1 duwt het harsdeel naar onderen. Dat alleen is niet genoeg: het houdt de onderkant van de kaarten gelijk, maar de waterlijn zelf gaat meebewegen met de lengte van de tekst eronder — vier kaarten worden dan een trapje. Met subgrid (hieronder) delen alle kaarten dezelfde twee rijen en ligt de lijn overal op dezelfde hoogte. Deze regel blijft de terugval voor browsers zonder subgrid. */ .layer__zicht{flex:1;padding:clamp(1.4rem,2.4vw,1.9rem) clamp(1.4rem,2.4vw,1.9rem) clamp(1.6rem,3vw,2.2rem)} .layer__zicht .eyebrow{color:var(--tide-soft)} .layer__zicht .layer__t{color:var(--tide)} .layer__diep{ position:relative;padding:clamp(1.4rem,2.4vw,1.9rem);background:var(--resin); } .layer__diep .eyebrow{color:var(--honey-dk);opacity:.8} .layer__diep .layer__t{color:var(--honey-dk)} /* De curve is de rand zelf: dezelfde vulling als het harsvlak eronder, met de gouden haarlijn erop. Om en om gespiegeld, zodat vier kaarten geen behang worden. Zie ook .swash-edge, dat doet hetzelfde tussen twee secties — daar zijn beide kleuren dekkend, dus daar speelt het overlapprobleem niet. */ .layer__lijn{ position:absolute;left:0;right:0;top:1px;transform:translateY(-100%); display:block;width:100%;height:20px;pointer-events:none; } .layer:nth-child(even) .layer__lijn{transform:translateY(-100%) scaleX(-1)} .layer__lijn-vul{fill:var(--resin-solid)} .layer__lijn-lijn{ fill:none;stroke:var(--honey-lt);stroke-width:1.1; vector-effect:non-scaling-stroke;opacity:.7; } /* Op mobiel worden de vier kaarten een slider. Onder elkaar was het een lange stapel waar je doorheen moest scrollen voor je bij de rest van de pagina was; naast elkaar is het één gebaar. Puur CSS: scroll-snap doet het werk, dus geen script en met de vinger het gedrag dat het systeem zelf al kent. De kaarten lopen door tot de schermrand en de volgende steekt er altijd een stukje overheen — dat is de aanwijzing dat er meer is. */ @media(max-width:759px){ .layers__grid{ grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:78%; gap:.8rem;overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad); margin-inline:calc(var(--pad) * -1);padding:0 var(--pad) .4rem; scrollbar-width:none;-webkit-overflow-scrolling:touch; } .layers__grid::-webkit-scrollbar{display:none} .layer{scroll-snap-align:start;border-radius:16px} } /* Eén doorlopende waterlijn over alle kaarten: de bovenhelften delen één rijhoogte en de onderhelften ook. Zo mag Amber teksten van heel ongelijke lengte invullen zonder dat het ontwerp scheef trekt. */ @supports (grid-template-rows:subgrid){ .layers__grid{grid-template-rows:auto auto} .layer{display:grid;grid-row:span 2;grid-template-rows:subgrid} } /* --- nei ---------------------------------------------------- */ .nei{background:var(--blush)} .nei__in{display:grid;gap:clamp(2.5rem,5vw,4.5rem)} @media(min-width:900px){ .nei__in{grid-template-columns:.9fr 1.1fr;align-items:start} /* De uitleg is lang: zonder dit staat de kop bovenin en kijk je de rest van de sectie tegen een leeg vlak aan. Nu loopt hij mee tot het eind van de lijst, net onder de balk. */ .nei__kop{position:sticky;top:calc(var(--nav-h-stuck) + 2rem)} } .nei h2{font-size:var(--step-3)} .nei__body{display:grid;gap:1.4rem;max-width:56ch} .nei__list{list-style:none;padding:0;margin:.6rem 0 0;display:grid;gap:1.4rem} .nei__list li{padding-left:1.4rem;border-left:1px solid rgba(184,123,34,.45)} /* Titel en tekst staan allebei op de gewone tekstgrootte van de site. Het verschil zit in de schreef en de kleur, niet in nog een stap in de schaal: in deze sectie is --step-0 de enige maat voor lopende tekst, --step--1 blijft voor labels en --step-1 alleen voor de intro. */ .nei__list b{ font-family:Fraunces,Georgia,serif;font-weight:400;font-size:var(--step-0); font-variation-settings:"SOFT" 40,"WONK" 1; color:var(--tide);display:block;margin-bottom:.25rem; } .nei__list span{display:block;color:var(--tide-soft)} /* --- werkwijze ---------------------------------------------- */ /* Dit is geen trechter van kennismaking naar afronden: het zijn drie manieren waarop dezelfde sessie kan plaatsvinden, en ze zijn gelijkwaardig. Daarom drie kaarten naast elkaar en geen genummerde lijst — een lijst zou suggereren dat je ze achter elkaar doorloopt. Het praktische (tarief, afspraak, nazorg) staat eronder als naslag. */ .steps__head{margin-bottom:clamp(2.5rem,5vw,3.5rem)} .steps h2{font-size:var(--step-3)} .steps__head .lede{margin-top:1.2rem} /* Dezelfde kaart als bij de klachten: boven wat je kiest, onder de swash het randje dat erbij hoort. Zo blijft de waterlijn het signatuurelement van de hele pagina en niet een truc van één sectie. */ .ways{ display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); list-style:none;padding:0;margin:0; } .way{ display:flex;flex-direction:column;overflow:hidden; border:1px solid rgba(184,123,34,.28);border-radius:20px;background:var(--shell); } .way__in{flex:1;padding:clamp(1.4rem,2.4vw,1.9rem) clamp(1.4rem,2.4vw,1.9rem) clamp(1.6rem,3vw,2.1rem)} .way__n{ display:block;font-family:Fraunces,Georgia,serif;font-size:var(--step--1); letter-spacing:.22em;color:var(--honey-dk);font-variation-settings:"WONK" 1; } .way__t{ font-family:Fraunces,Georgia,serif;font-weight:300;font-size:var(--step-2); font-variation-settings:"SOFT" 40,"WONK" 1; line-height:1.1;margin:.5rem 0 .9rem; } .way__d{color:var(--tide-soft)} .way__note{ position:relative;padding:clamp(1.4rem,2.4vw,1.9rem);background:var(--resin); color:var(--tide-soft);font-size:var(--step--1);line-height:1.65; } /* Niet elke manier heeft een randje. Een lege onderhelft zou de kaarten scheef trekken, dus dan vult een streepje de plek op dezelfde hoogte. */ .way__note--leeg{color:var(--honey-dk);opacity:.75} /* Tarief, afspraak maken, nazorg. Geen kaarten: dit is naslag, geen keuze. */ .praktisch{display:grid;gap:0;margin:clamp(2.5rem,5vw,3.5rem) 0 0} .praktisch > div{ display:grid;gap:.4rem 2rem;padding-block:clamp(1.4rem,2.6vw,1.9rem); border-top:1px solid var(--line); } .praktisch > div:last-child{border-bottom:1px solid var(--line)} @media(min-width:820px){.praktisch > div{grid-template-columns:15rem 1fr}} .praktisch dt{ font-family:Fraunces,Georgia,serif;font-weight:300;font-size:var(--step-1); font-variation-settings:"SOFT" 40,"WONK" 1;color:var(--honey-dk); } .praktisch dd{margin:0;color:var(--tide-soft);max-width:58ch} .praktisch dd strong{color:var(--tide);font-weight:500} /* Zelfde truc als bij de klachtkaarten: de drie kaarten delen hun twee rijen, dus de waterlijn loopt door ook als de ene manier meer uitleg nodig heeft dan de andere. Staat hier en niet bij de klachten, want deze regels moeten ná .way komen om de flex-terugval te overschrijven. */ @supports (grid-template-rows:subgrid){ .ways{grid-template-rows:auto auto} .way{display:grid;grid-row:span 2;grid-template-rows:subgrid} } /* --- over mij ----------------------------------------------- */ /* Roze in plaats van het tweede crèmevlak, op verzoek van Amber: het vlak waar ze zichzelf voorstelt. Daarmee loopt er een ritme roze-crème-roze-crème over de pagina, en wisselt de kleur op de bovenrand echt — vandaar de swash die er in section-over.php bij is gekomen. */ .about{background:var(--blush)} .about__in{display:grid;gap:clamp(2.5rem,5vw,4.5rem)} @media(min-width:900px){ .about__in{grid-template-columns:.85fr 1.15fr;align-items:start} /* Het citaat staat in de opmaak na de tekst, zodat je op een telefoon eerst leest wie Amber is. Hier schuift het naar de linkerkolom, en loopt het mee tot voorbij de inkijkjes — anders hangt het halverwege in een leeg vlak. */ .about__mark{order:-1;position:sticky;top:calc(var(--nav-h-stuck) + 2rem)} } .about h2{font-size:var(--step-3);margin-bottom:1.4rem} .about__text{display:grid;gap:1.2rem;color:var(--tide-soft);max-width:56ch} .about__text strong{color:var(--tide);font-weight:500} /* Het citaat als blok hars, dezelfde materie als de klachtkaarten. Het vult de kolom met iets dat er hoort te staan in plaats van met een foto die er niet is, en het is meteen het enige wat je onthoudt van deze sectie. */ .about__mark{ justify-self:center;width:min(100%,380px);margin:0; padding:clamp(1.9rem,3.4vw,2.6rem); border:1px solid rgba(184,123,34,.3);border-radius:22px; background:var(--resin); } .about__mark blockquote{ margin:0;font-family:Fraunces,Georgia,serif;font-weight:300; font-size:var(--step-2);line-height:1.22;color:var(--honey-dk); font-variation-settings:"SOFT" 60,"WONK" 1;text-wrap:balance; } .about__lijn{display:block;width:100%;height:12px;margin:1.7rem 0 1.1rem} .about__lijn path{ fill:none;stroke:var(--honey-lt);stroke-width:1.1;vector-effect:non-scaling-stroke; } .about__mark figcaption{color:var(--honey-dk);opacity:.8} /* --- inkijkje in Praktijk Amber ----------------------------- */ /* Korte verhalen onder Over mij. Ze horen bij Amber, niet bij de uitleg van de methode, dus ze staan hier en niet als eigen sectie — dat zou de pagina een zesde halte geven voor iets wat je leest als je toch al nieuwsgierig bent.
doet het openklappen zelf: geen script, werkt zonder JavaScript en de browser regelt zoeken-op-de-pagina en toetsenbord al. */ .peek{margin-top:clamp(2.2rem,4vw,3rem)} .peek__kop{ font-size:var(--step--1);text-transform:uppercase;letter-spacing:.28em; font-weight:500;color:var(--honey-dk);margin-bottom:.8rem; } .peek__item{border-top:1px solid var(--line)} .peek__item:last-of-type{border-bottom:1px solid var(--line)} .peek__item summary{ display:flex;align-items:center;gap:1rem;cursor:pointer;list-style:none; padding-block:1.05rem;color:var(--tide); font-family:Fraunces,Georgia,serif;font-weight:300;font-size:var(--step-1); font-variation-settings:"SOFT" 40,"WONK" 1;line-height:1.25; } .peek__item summary::-webkit-details-marker{display:none} .peek__item summary:hover{color:var(--honey-dk)} /* Het pijltje is twee randen van een vierkantje, gedraaid. Scheelt een icoon en kleurt vanzelf mee met de rest. */ .peek__item summary::after{ content:"";flex:none;margin-left:auto;width:9px;height:9px; border-right:1px solid var(--honey);border-bottom:1px solid var(--honey); transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s cubic-bezier(.2,.7,.3,1); } .peek__item[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)} .peek__item > div{padding-bottom:1.5rem;display:grid;gap:1rem;color:var(--tide-soft)} /* --- ervaringen --------------------------------------------- */ /* Vierkantjes zoals bij de klachten, maar hier op elke breedte een rail: zodra er meer zijn dan er passen schuif je door. Scroll-snap doet het werk, dus de vinger hoeft geen knop te zoeken; de pijlen zijn er voor de muis en zet het script pas aan als er echt iets buiten beeld staat. */ .reviews{background:var(--shell)} .reviews__head{ display:flex;flex-wrap:wrap;gap:1.4rem 2rem;align-items:flex-end; margin-bottom:clamp(2.5rem,5vw,3.5rem); } .reviews h2{font-size:var(--step-3);max-width:18ch} .reviews__nav{display:none;gap:.6rem;margin-left:auto} /* Alleen voor de muis. Met een vinger veeg je, en dan zijn twee knoppen die een eigen regel opeisen alleen maar in de weg. */ @media(min-width:760px){.reviews__nav.is-on{display:flex}} .reviews__btn{ width:48px;height:48px;display:grid;place-items:center;flex:none; border:1px solid var(--line);border-radius:50%;background:transparent; color:var(--tide);cursor:pointer; transition:border-color .3s,color .3s,opacity .3s; } .reviews__btn:hover:not(:disabled){border-color:var(--honey);color:var(--honey-dk)} .reviews__btn:disabled{opacity:.28;cursor:default} .reviews__btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4} .reviews__rail{ display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3rem) / 4); gap:1rem;list-style:none;margin:0 calc(var(--pad) * -1); padding:0 var(--pad) .4rem; overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad); scrollbar-width:none;-webkit-overflow-scrolling:touch; } .reviews__rail::-webkit-scrollbar{display:none} @media(max-width:1099px){.reviews__rail{grid-auto-columns:calc((100% - 2rem) / 3)}} @media(max-width:859px){.reviews__rail{grid-auto-columns:calc((100% - 1rem) / 2)}} @media(max-width:599px){.reviews__rail{grid-auto-columns:82%;gap:.8rem}} /* Minder dan vier recensies: geen rail maar een raster dat de breedte vult. Anders staan twee kaarten op een kwart van de rij en blijft de rest leeg. Vanaf de vierde zet section-ervaringen.php deze class niet meer en is het weer de rail hierboven. */ .reviews__rail--vast{ grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin:0;padding:0;overflow:visible;scroll-snap-type:none; } .review{ display:flex;scroll-snap-align:start; border:1px solid var(--petal-line);border-radius:20px;background:var(--petal); padding:clamp(1.4rem,2.4vw,1.9rem); } /* De
is er omdat een
bij een
hoort; hij vult de kaart zodat de bronregel onderaan blijft staan, ook bij korte recensies. */ .review__in{display:flex;flex-direction:column;flex:1;margin:0} .review blockquote{ flex:1;margin:0;color:var(--tide); font-family:Fraunces,Georgia,serif;font-weight:300;font-size:var(--step-1); font-variation-settings:"SOFT" 40,"WONK" 1;line-height:1.32; } /* Dezelfde haarlijn als in het citaat bij Over mij, hier als scheiding tussen wat er gezegd is en wie het zei. */ .review__lijn{display:block;width:100%;height:12px;margin:1.4rem 0 1rem} .review__lijn path{ fill:none;stroke:var(--honey-lt);stroke-width:1.1;vector-effect:non-scaling-stroke; } .review figcaption{ font-size:var(--step--1);text-transform:uppercase;letter-spacing:.18em; font-weight:500;color:var(--honey-dk); } /* --- contact ------------------------------------------------ */ .contact{background:var(--deep);color:var(--shell)} .contact h2{font-size:var(--step-3);color:var(--shell)} .contact .eyebrow{color:var(--honey-lt)} .contact__in{display:grid;gap:clamp(2.5rem,5vw,4.5rem)} @media(min-width:900px){.contact__in{grid-template-columns:1fr 1fr}} .contact__lede{color:rgba(247,242,233,.72);margin-top:1.2rem;max-width:40ch;font-size:var(--step-1);font-weight:300;line-height:1.5} .details{list-style:none;padding:0;margin:2.4rem 0 0;display:grid;gap:1.2rem} .details li{display:grid;gap:.15rem;padding-bottom:1.2rem;border-bottom:1px solid rgba(247,242,233,.16)} .details dt,.details .k{font-size:var(--step--1);letter-spacing:.2em;text-transform:uppercase;color:rgba(247,242,233,.5)} .details .v{font-size:var(--step-0)} .details a{text-decoration:none;border-bottom:1px solid rgba(227,174,85,.5)} .details a:hover{color:var(--honey-lt)} .form{display:grid;gap:1.1rem;background:rgba(247,242,233,.05);border:1px solid rgba(247,242,233,.16);border-radius:22px;padding:clamp(1.4rem,3vw,2.2rem)} .field{display:grid;gap:.45rem} .field label{font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:rgba(247,242,233,.62)} .field input,.field textarea{ font:inherit;font-size:var(--step-0);color:var(--shell); background:rgba(247,242,233,.06);border:1px solid rgba(247,242,233,.2); border-radius:12px;padding:.85em 1em;transition:border-color .3s,background .3s; } .field input:focus,.field textarea:focus{border-color:var(--honey-lt);background:rgba(247,242,233,.1)} .field textarea{resize:vertical;min-height:120px} .form .btn{justify-content:center;margin-top:.4rem} .form__note{font-size:var(--step--1);color:rgba(247,242,233,.5)} /* --- footer ------------------------------------------------- */ /* Twee zones met een haarlijn ertussen. Boven waar de praktijk voor staat: de keurmerken naast de disclaimer, want dat is hetzelfde gesprek. Onder de administratie: van wie de site is en de links die je nergens anders tegenkomt. De secties staan er niet bij — de balk bovenaan draagt die al. */ .foot{ background:var(--deep);color:rgba(247,242,233,.55); padding-block:3rem 2.4rem;border-top:1px solid rgba(247,242,233,.14); font-size:var(--step--1); } .foot a{text-decoration:none} .foot a:hover{color:var(--honey-lt)} .foot__in{display:flex;flex-wrap:wrap;gap:1.5rem 2.2rem;align-items:center} /* De zegels hebben donkerblauwe en donkergroene letters; op het petrol vallen die weg. Vandaar een crèmekleurig rond vlak eronder — rond, want de zegels zijn zelf rond, en dan leest het als een munt in plaats van als een uitgeknipt vierkantje. Klein gehouden: ze horen erbij te staan, niet te roepen. */ .foot__keur{display:flex;flex-wrap:wrap;gap:.7rem;list-style:none;margin:0;padding:0;flex:none} .foot__keur a{ display:grid;place-items:center;width:64px;height:64px;border-radius:50%; background:var(--shell);padding:5px; transition:transform .3s cubic-bezier(.2,.7,.3,1); } .foot__keur a:hover,.foot__keur a:focus-visible{transform:translateY(-2px)} /* Vierkant vak met contain: de twee zegels zijn net niet even hoog als breed. */ .foot__keur img{width:54px;height:54px;object-fit:contain} .foot__note{margin:0;flex:1 1 30ch;max-width:68ch;color:rgba(247,242,233,.4);line-height:1.6} .foot__slot{ margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid rgba(247,242,233,.10); display:flex;flex-wrap:wrap;gap:.7rem 2rem;align-items:baseline; } .foot__links{display:flex;flex-wrap:wrap;gap:1.4rem} /* wp_nav_menu levert een