/* ============================================================ DIERENKLINIEK ARGOS — shared design system (tokens.css) Linked first in every page . Byte-for-byte identical across index/diensten/team/contact so the whole site is ONE coherent premium build. Warm, patient, reassuring. ============================================================ */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} :root{ /* warm palette — copper + sage on cream, one cacao dark break */ --copper:#C2622E;--copper-d:#A6511F; --sage:#5F9488;--sage-d:#4E7E73; --bg:#FFF8F2;--bg2:#FBEEE3; --cacao:#2E1A0C;--cacao-d:#241307; --card:#FFFDFB; --ink:#2E1A0C;--muted:#7C6856; --line:rgba(46,26,12,.12);--line-strong:rgba(46,26,12,.2); --line-light:rgba(255,248,242,.16); /* type scale */ --step--1:clamp(.83rem,.79rem + .2vw,.94rem); --step-0:clamp(1rem,.95rem + .25vw,1.125rem); --step-1:clamp(1.33rem,1.2rem + .6vw,1.5rem); --step-2:clamp(1.78rem,1.5rem + 1.3vw,2rem); --step-3:clamp(2.37rem,1.9rem + 2.3vw,2.66rem); --step-4:clamp(3.16rem,2.4rem + 3.8vw,3.55rem); --step-5:clamp(4.2rem,3rem + 6vw,4.9rem); --lh-tight:1.06;--lh-head:1.16;--lh-body:1.65; /* spacing */ --s-1:.25rem;--s-2:.5rem;--s-3:.75rem;--s-4:1rem;--s-6:1.5rem;--s-8:2rem; --s-12:3rem;--s-16:4rem;--s-24:6rem;--section-y:clamp(4.5rem,10vw,8rem); --container:1200px;--measure:62ch;--gutter:clamp(1.25rem,4vw,2.5rem); /* corners & shadows (tinted to cacao) */ --r-sm:10px;--r-md:18px;--r-lg:28px;--r-pill:999px; --e-1:0 1px 2px rgba(46,26,12,.06); --e-2:0 10px 30px -12px rgba(46,26,12,.18); --e-3:0 26px 60px -24px rgba(46,26,12,.28); --ease:cubic-bezier(.4,0,.2,1);--pop:cubic-bezier(.22,1.4,.36,1);--dur:320ms; } html{scroll-behavior:smooth} body{background:var(--bg);color:var(--ink);font-family:'Hanken Grotesk',system-ui,sans-serif;font-weight:400;line-height:var(--lh-body);font-size:var(--step-0);-webkit-font-smoothing:antialiased;overflow-x:hidden} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} h1,h2,h3,h4,.disp{font-family:'Nunito','Hanken Grotesk',system-ui,sans-serif;font-weight:800;letter-spacing:-.01em} ::selection{background:var(--copper);color:#fff} .wrap{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)} .measure{max-width:var(--measure)} section{padding-block:var(--section-y)} /* band rhythm */ .b-bg{background:var(--bg)} .b-bg2{background:var(--bg2)} .b-cacao{background:var(--cacao);color:#FBEEE3} .b-cacao .lead,.b-cacao p{color:rgba(251,238,227,.78)} .b-cacao .kicker{color:var(--sage)} .b-cacao .kicker::before{background:var(--sage)} /* kicker / heading / lead */ .kicker{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:var(--step--1);letter-spacing:.16em;text-transform:uppercase;color:var(--copper)} .kicker::before{content:"";width:26px;height:2px;background:var(--copper);border-radius:2px} .h2{font-size:var(--step-3);line-height:var(--lh-head);margin-top:var(--s-3);max-width:18ch} .lead{color:var(--muted);font-size:var(--step-1);font-weight:400;line-height:1.5;max-width:var(--measure);margin-top:var(--s-4)} .shead{margin-bottom:clamp(2.4rem,5vw,3.6rem);max-width:64ch} .shead.center{text-align:center;margin-inline:auto} .shead.center .kicker{justify-content:center} .shead.center .h2{margin-inline:auto} /* buttons — outline, fill on hover, rounded/friendly */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:var(--step-0);line-height:1;padding:15px 26px;border-radius:var(--r-pill);cursor:pointer;border:1.5px solid transparent;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform .18s var(--ease),box-shadow .25s var(--ease)} .btn svg{flex:none} .btn:active{transform:translateY(1px)} .btn-copper{background:var(--copper);color:#fff;box-shadow:0 10px 24px -12px rgba(194,98,46,.7)} .btn-copper:hover{background:var(--copper-d);transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(194,98,46,.75)} .btn-sage{background:var(--sage);color:#fff} .btn-sage:hover{background:var(--sage-d);transform:translateY(-2px)} .btn-line{border-color:var(--line-strong);color:var(--ink)} .btn-line:hover{border-color:var(--ink);background:var(--ink);color:var(--bg)} .btn-ghost{border-color:rgba(251,238,227,.4);color:#FBEEE3} .btn-ghost:hover{background:#FBEEE3;color:var(--cacao)} a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--copper);outline-offset:3px} /* skip link */ .skip{position:absolute;left:-9999px;top:0;background:var(--copper);color:#fff;padding:10px 16px;border-radius:0 0 var(--r-sm) 0;z-index:200} .skip:focus{left:0} /* reveal engine — Playful-Pop */ .js .rv{opacity:0;transform:translateY(22px) scale(.92);transition:opacity .55s var(--ease),transform .55s var(--pop)} .js .rv.in{opacity:1;transform:none} .js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}.js .rv.d4{transition-delay:.32s}.js .rv.d5{transition-delay:.4s} @media(prefers-reduced-motion:reduce){.js .rv{opacity:1!important;transform:none!important;transition:none}} /* scroll progress */ #scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;background:var(--copper);transform-origin:left;transform:scaleX(0);z-index:9999} @supports (animation-timeline:scroll()){#scroll-progress{animation:grow-progress linear;animation-timeline:scroll(root block);animation-duration:auto}@keyframes grow-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}} /* ===== NAV ===== */ nav.site{position:fixed;inset:0 0 auto 0;z-index:120;display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding:18px clamp(1.25rem,4vw,2.5rem);transition:background .35s,box-shadow .35s,padding .35s} nav.site.s{background:rgba(255,248,242,.92);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line);padding-top:13px;padding-bottom:13px} .brand{display:inline-flex;align-items:center;gap:10px;font-family:'Nunito';font-weight:800;font-size:1.4rem;letter-spacing:-.02em;color:var(--ink)} .brand .mark{width:34px;height:34px;border-radius:var(--r-pill);background:var(--copper);display:grid;place-items:center;flex:none} .brand .mark svg{stroke:#fff} .brand small{font-family:'Hanken Grotesk';font-weight:600;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);display:block;line-height:1;margin-top:3px} .nav-links{display:flex;align-items:center;gap:clamp(18px,2.4vw,30px)} .nav-links a:not(.btn){font-weight:600;font-size:.96rem;color:var(--ink);position:relative;padding:6px 0;transition:color .2s} .nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--copper);border-radius:2px;transition:width .28s var(--ease)} .nav-links a:not(.btn):hover{color:var(--copper)} .nav-links a:not(.btn):hover::after,.nav-links a.active::after{width:100%} .nav-links a.active{color:var(--copper)} .nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:10px;z-index:130} .nav-toggle span{width:26px;height:2px;background:var(--ink);border-radius:2px;transition:.3s var(--ease)} .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle.open span:nth-child(2){opacity:0} .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* mobile overlay panel */ .nav-panel{position:fixed;inset:0;z-index:110;background:var(--bg);transform:translateY(-110%);transition:transform .45s var(--ease);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:clamp(2rem,8vw,4rem);visibility:hidden} .nav-panel.open{transform:none;visibility:visible} .nav-panel a{font-family:'Nunito';font-weight:800;font-size:clamp(2rem,9vw,2.8rem);color:var(--ink);padding:10px 0;border-bottom:1px solid var(--line);transition:color .2s,padding-left .25s} .nav-panel a:hover,.nav-panel a.active{color:var(--copper);padding-left:12px} .nav-panel .pcta{margin-top:var(--s-8)} /* ===== FOOTER ===== */ footer.site{background:var(--cacao);color:rgba(251,238,227,.82);padding-block:clamp(3.5rem,7vw,5.5rem) 2rem} footer.site .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:clamp(1.6rem,4vw,3rem)} footer.site h4{font-family:'Nunito';font-weight:800;color:#FBEEE3;font-size:1.05rem;margin-bottom:var(--s-4);letter-spacing:0} footer.site .brand{color:#FBEEE3} footer.site .brand small{color:rgba(251,238,227,.6)} footer.site a{color:rgba(251,238,227,.82);transition:color .2s} footer.site a:hover{color:var(--copper)} footer.site .fcol p{font-size:.95rem;margin-bottom:10px} footer.site .fcol p.flink a{display:inline-flex;align-items:center;gap:8px} footer.site .ohrs{display:flex;justify-content:space-between;gap:16px;font-size:.92rem;padding:6px 0;border-bottom:1px solid var(--line-light)} footer.site .ohrs span:last-child{color:#FBEEE3;font-weight:600} footer.site .fbot{margin-top:clamp(2.4rem,5vw,3.5rem);padding-top:1.6rem;border-top:1px solid var(--line-light);display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;font-size:.85rem;color:rgba(251,238,227,.6)} footer.site .fbot .flinks{display:flex;gap:20px;flex-wrap:wrap} /* live open badge */ .openbadge{display:inline-flex;align-items:center;gap:9px;font-size:.85rem;font-weight:600} .openbadge .dot{width:9px;height:9px;border-radius:50%;background:#5dbb83;box-shadow:0 0 0 4px rgba(93,187,131,.22)} .openbadge .dot.closed{background:#d98a3c;box-shadow:0 0 0 4px rgba(217,138,60,.22)} /* mobile sticky bottom bar */ .mbar{display:none} /* ===== MOBILE ===== */ @media(max-width:900px){ .nav-links{display:none} .nav-toggle{display:flex} footer.site .fgrid{grid-template-columns:1fr 1fr} } @media(max-width:560px){ footer.site .fgrid{grid-template-columns:1fr} .mbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:115;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--line);box-shadow:0 -8px 24px -16px rgba(46,26,12,.4)} .mbar .btn{flex:1;padding:14px 12px;font-size:1rem;min-height:48px} .mbar .btn.icon{flex:0 0 52px} body{padding-bottom:74px} .nav-panel{padding-bottom:90px} }