/* ========================================================================== pb-common.css Patty Bakker — GEDEELD (alle pagina's): tokens, .pb-shell header/nav/menu, .pb-footer, body-basis + gedeelde primitives (.section/.eyebrow/.h2/.label/.cta/.page-hero/.page-intro). Link op ELKE pagina, vóór de pagina-specifieke pb-*.css. ========================================================================== */ :root{--bg:#f2ebe4;--paper:#fffaf5;--cream:#efe6de;--cream2:#e6d8cd; --brown:#6c4d38;--brown2:#7e5a43;--dark:#29211c;--muted:#7d6d63; --line:#e1d1c4;--accent:#c97a55;--green:#66735b; --button:#c97a55;--button2:#a96548; --shadow:0 14px 28px rgba(77,51,34,.13);--shadow2:0 8px 18px rgba(77,51,34,.10); /* RONDINGEN — één schaal voor de hele site. Deze vier tokens stonden op 4/6/8/10px, uit het oorspronkelijke prototype. De nieuwere pagina's (fokkers, gastgezin-worden, contact) gebruiken 10/14/18/22px, en daardoor stonden er twintig verschillende rondingen door elkaar in de codebase. Door hier de waarden aan te passen schuiven 148 bestaande plekken in één keer mee, zonder dat ik ze allemaal hoef aan te raken: --r 68x kaarten en tegels --r-lg 49x grote kaarten --r-md 31x knoppen en velden --r-md is gelijkgezet aan --btn-radius, want dat token wordt vooral op knoppen gebruikt. */ --r:12px;--r-sm:8px;--r-md:10px;--r-lg:18px;--r-pill:999px; --bottom:78px; --pb-edge:max(32px, calc((100% - 1240px) / 2 + 32px));} /* Op een telefoon is die ondergrens van 32px te ruim. De pagina's die --pb-edge gebruiken (het-ras, reviews, verwachte-nestjes, contact en tien andere) hielden daardoor 32px marge aan, terwijl de homepage, werkwijze en smoelenboek op 18px staan - zichtbaar verschil als je doorklikt. 18px is de maat die de rest van de site al aanhoudt (.section heeft padding-left/right:18px). Alleen de ondergrens gaat omlaag; op schermen breder dan ~1176px wint de calc() en verandert er niets. --pb-edge staat niet in de lijst tokens die Bricks zelf declareert, dus :root volstaat hier - anders dan bij --r. */ @media (max-width:767px){ :root{--pb-edge:18px} } /* SMOOTH SCROLLEN, MAAR PAS NA HET LADEN. Hier stond `html { scroll-behavior: smooth }` zonder voorwaarde. Die regel geldt ook voor het terugzetten van de scrollpositie na een herlaadbeurt: de browser zet je niet in een keer terug waar je stond, hij animeert ernaartoe. Die animatie begint bovenaan en loopt terwijl de pagina nog laadt, dus elke foto die er ondertussen bij komt maakt het document langer en verschuift het doel. De animatie loopt dat achterna en eindigt onderaan. Nagemeten op de homepage, 375 pixels breed: na een herlaadbeurt kwam je uit op 5384 van de 5930, oftewel vrijwel het einde van de pagina. Op desktop valt het nauwelijks op omdat alles er sneller staat; op een telefoon gaat het elke keer mis. De klasse komt erop bij window.load (zie functions.php). Tot die tijd springt de pagina gewoon direct naar de juiste plek, en daarna scrollen de ankerlinks weer soepel zoals bedoeld. */ html.pb-geladen { scroll-behavior: smooth; } body{background:var(--pb-paper);} /* ========================================================================== AANRAKEN EN SELECTEREN IN DE HUISSTIJL ========================================================================== Op Android legt Chrome een half doorzichtig BLAUW vlak over alles wat je aanraakt, en een tweede blauw vlak over tekst die je per ongeluk selecteert met een lange druk. Op een nestkaart is dat het hele blok dat oplicht, in een kleur die nergens anders op de site voorkomt. Het leest als een storing, en in een video van iemand die gewoon scrollt zie je het als geknipper. Het is geen fout in de opmaak maar een standaardkleur van de browser die we nooit hebben overschreven. Deze twee regels doen dat, in de eigen kleuren. WAAROM NIET GEWOON ALLES UITZETTEN Die blauwe vlek heeft een functie: hij bevestigt dat je raakte wat je wilde raken. Dat is op een telefoon belangrijker dan op een muisscherm, want je vinger zit in de weg. Dus: op een KAART weg, want daar is het een groot vlak dat niets bevestigt (er gebeurt toch niets als je erop drukt), en op een LINK of KNOP blijft hij staan, maar dan in de accentkleur en zachter. */ .treatment-card, .nest-card, .pb-tegel, article, section, .pb-main p, .pb-main h1, .pb-main h2, .pb-main h3 { -webkit-tap-highlight-color: transparent; } a, button, [role="button"], summary, label, input, select, textarea { -webkit-tap-highlight-color: rgba(201, 122, 85, .16); } /* Geselecteerde tekst. De achtergrond blijft licht genoeg om de letters er gewoon doorheen te lezen; daarom alleen de achtergrond en niet de tekstkleur - een omgekeerde kleur maakt een citaat onleesbaar terwijl je het juist wilt overnemen. */ ::selection { background: rgba(201, 122, 85, .22); } ::-moz-selection { background: rgba(201, 122, 85, .22); } .pb-shell.pb-shell{display:contents} #brx-header{display:contents} .pb-shell *{box-sizing:border-box} .pb-shell *{box-sizing:border-box} .pb-shell [class*="brxe-"]{display:block;flex-direction:row;align-items:initial;align-content:initial} .pb-shell a{text-decoration:none;color:inherit} .pb-shell img{display:block;max-width:100%} .pb-shell button{border:0;background:none;color:inherit;cursor:pointer;font:inherit} .pb-shell .icon{width:22px;height:22px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round} .pb-shell .header{height:64px;background:rgba(255, 250, 245, .98);position:sticky;top:0;z-index:120;display:flex;align-items:center;gap:14px;padding-top:0;padding-right:var(--pb-edge);padding-bottom:0;padding-left:var(--pb-edge);border-bottom:1px solid #eaded4;box-shadow:0 6px 16px rgba(77, 51, 34, .05)} .pb-shell .hamb{width:36px;height:36px;display:grid;place-items:center;color:var(--brown)} .pb-shell .hamb i{content:"";display:block;width:23px;height:2px;background:var(--brown);border-radius:var(--r)} .pb-shell .hamb i::before{content:"";display:block;width:23px;height:2px;background:var(--brown);border-radius:var(--r);transform:translateY(-7px)} .pb-shell .hamb i::after{content:"";display:block;width:23px;height:2px;background:var(--brown);border-radius:var(--r);transform:translateY(5px)} .pb-shell .logo{width:104px;height:auto} .pb-shell .head-spacer{flex:1 1 auto} .pb-shell .head-icon{flex:0 0 34px;width:34px;height:34px;display:grid;place-items:center;color:var(--brown);position:relative} .pb-shell .cart-btn{margin-right:4px} .pb-shell .cart-dot{position:absolute;right:0;top:2px;background:var(--accent);color:#fff;border-radius:999px;width:15px;height:15px;font-size:9px;display:grid;place-items:center;font-weight:800} .pb-shell .bottom-nav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);height:var(--bottom);width:min(430px, 100%);background:rgba(255, 250, 245, .98);z-index:60;display:none;grid-template-columns:repeat(5, 1fr);border-top:1px solid #e4d6ca;box-shadow:0 -10px 26px rgba(38, 27, 20, .12)} .pb-shell .bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px;font-weight:800;color:#88766b;width:100%;height:100%} .pb-shell .bottom-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px;font-weight:800;color:#88766b;width:100%;height:100%} .pb-shell .bottom-nav a.active{color:var(--accent)} .pb-shell .bottom-nav .active{color:var(--accent)} .pb-shell .bottom-nav .icon{width:24px;height:24px} .pb-shell .socials{display:flex;gap:18px;margin-top:16px;margin-right:0;margin-bottom:18px;margin-left:0} .pb-shell .socials a{color:#fff;display:inline-grid;place-items:center} .pb-shell .socials .icon{width:23px;height:23px} .pb-shell .menu-scrim{position:fixed;inset:0;z-index:240;background:rgba(38, 27, 20, .45);opacity:0;pointer-events:none;transition:opacity .25s ease;display:none} .pb-shell .menu-scrim.open{opacity:1;pointer-events:auto} .pb-shell .menu-panel{position:fixed;inset:0;z-index:260;background:var(--paper);color:var(--brown);transform:translateX(-100%);transition:transform .25s ease;max-width:430px;margin-top:0;margin-right:auto;margin-bottom:0;margin-left:auto;overflow-x:hidden;overflow-y:hidden;display:none} .pb-shell .header .hamb{margin-left:0;display:flex;order:0} .pb-shell .menu-panel.open{transform:translateX(0)} /* Geen tekstselectie in het menu. Tik je een item aan en beweeg je daarbij een paar pixels, dan begint de browser een selectie en zet er zijn eigen blauwe balk overheen - bovenin het paneel viel dat op als een streep. Er staat hier niets dat je zou willen kopieren, dus selectie mag eruit. Invoervelden houden hem wel: daar wil je wel kunnen selecteren. */ .pb-shell .menu-panel{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none} .pb-shell .menu-panel input,.pb-shell .menu-panel textarea{-webkit-user-select:text;user-select:text} .pb-shell .menu-head{height:54px;display:flex;align-items:center;padding-top:0;padding-right:12px;padding-bottom:0;padding-left:12px;border-bottom:1px solid var(--line);background:var(--paper)} .pb-shell .menu-head img{width:72px} .pb-shell .close{margin-left:auto;width:42px;height:42px;display:grid;place-items:center;color:var(--brown)} .pb-shell .menu-level{position:absolute;inset:54px 0 0;overflow-x:auto;overflow-y:auto;background:var(--paper);transition:transform .25s ease} .pb-shell .level-main{transform:translateX(0)} .pb-shell .level-sub{transform:translateX(100%);display:flex;flex-direction:column} .pb-shell .menu-panel.show-second .level-main{transform:translateX(-100%)} .pb-shell .menu-panel.show-second .level-sub{transform:translateX(0)} .pb-shell .menu-section-title{font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:var(--accent);font-weight:700;padding-top:9px;padding-right:16px;padding-bottom:7px;padding-left:16px} .pb-shell .menu-list{border-top:1px solid var(--line)} .pb-shell .menu-item{width:100%;min-height:45px;display:grid;grid-template-columns:28px 1fr 22px;align-items:center;gap:13px;padding-top:0;padding-right:14px;padding-bottom:0;padding-left:14px;border-bottom:1px solid var(--line);font-size:16px;font-weight:800;text-align:left;background:var(--paper);color:var(--brown)} .pb-shell .menu-item .ico{width:20px;height:20px;color:var(--accent);stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .pb-shell .menu-item .chev{justify-self:end;width:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} /* "Voor fokkers" wordt door een script aan het menu toegevoegd en is een met de svg's als directe kinderen; de andere items zijn een