/* 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.1.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:#5A7078; --mist:#E2E8E6; --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); --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} @media(min-width:940px){.nav__cta{display:inline-flex;padding:.85em 1.5em}} .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%), /* koele zweem rechtsonder — de Oostzee-kant van het palet */ linear-gradient(318deg,rgba(214,226,222,.62) 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, zodat de waterlijnen van vier kaarten naast elkaar op dezelfde hoogte liggen, ook bij ongelijk lange regels. */ .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. */ .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)} .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} } /* --- nei ---------------------------------------------------- */ .nei{background:var(--mist)} .nei__in{display:grid;gap:clamp(2.5rem,5vw,4.5rem)} @media(min-width:900px){.nei__in{grid-template-columns:.9fr 1.1fr}} .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)} .note{ margin-top:2.2rem;padding:1.3rem 1.5rem;border-left:2px solid var(--honey-lt); background:rgba(247,242,233,.6);color:var(--tide-soft); border-radius:0 10px 10px 0; } /* --- werkwijze ---------------------------------------------- */ .steps__head{margin-bottom:clamp(2.5rem,5vw,3.5rem)} .steps h2{font-size:var(--step-3)} .steps__list{list-style:none;padding:0;margin:0;display:grid;gap:0} .steps__list li{ display:grid;gap:.5rem 2rem;padding-block:clamp(1.6rem,3vw,2.2rem); border-top:1px solid var(--line);align-items:baseline; } .steps__list li:last-child{border-bottom:1px solid var(--line)} @media(min-width:820px){ .steps__list li{grid-template-columns:5rem 15rem 1fr auto} } .steps__n{ font-family:Fraunces,Georgia,serif;font-size:var(--step-1);color:var(--honey-dk); font-variation-settings:"WONK" 1; } .steps__t{font-family:Fraunces,Georgia,serif;font-size:var(--step-2);font-weight:300;line-height:1.1;font-variation-settings:"SOFT" 40,"WONK" 1} .steps__d{color:var(--tide-soft);max-width:46ch} .steps__m{font-size:var(--step--1);color:var(--honey-dk);letter-spacing:.06em;white-space:nowrap} /* --- over mij ----------------------------------------------- */ .about{background:var(--shell-deep)} .about__in{display:grid;gap:clamp(2.5rem,5vw,4.5rem);align-items:center} @media(min-width:900px){ .about__in{grid-template-columns:.85fr 1.15fr} /* 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. */ .about__mark{order:-1} } .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} /* --- contact ------------------------------------------------ */ .contact{background:var(--tide);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 ------------------------------------------------- */ .foot{background:var(--tide);color:rgba(247,242,233,.55);padding-block:2.5rem;border-top:1px solid rgba(247,242,233,.14)} .foot__in{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;font-size:var(--step--1)} .foot__in nav{margin-left:auto} /* wp_nav_menu levert een