/* Uncle Philly — gedeelde stijl. Tokens en vormtaal 1-op-1 uit het Stitch-ontwerp, omgezet van Tailwind-CDN naar statische CSS. */ :root{ /* kleuren uit de Stitch tailwind.config */ --background:#fff8ef; --paper-bright:#F9F3E4; --surface-variant:#f3e2b0; --surface-container:#feedbb; --primary:#73110a; --primary-container:#93291e; --secondary:#705952; --on-surface:#231b00; --on-surface-variant:#58413e; --outline:#8b716d; --faded-beige:#B0A692; --error:#ba1a1a; --ink:#2A1A14; --on-primary:#ffffff; --groen:#3D6B42; --display:'Anton',Impact,'Arial Narrow Bold',sans-serif; --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --max-width:1200px; --gutter:24px; --marge:32px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--background);color:var(--on-surface); font-family:var(--body);font-size:16px;line-height:1.5;font-weight:500; -webkit-font-smoothing:antialiased;overflow-x:hidden; min-height:100vh;display:flex;flex-direction:column; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E"); } a{color:inherit} img{max-width:100%;display:block} .wrap{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 16px} @media(min-width:768px){.wrap{padding:0 var(--marge)}} /* ---------- de vormtaal van Stitch ---------- */ .ink{border:2px solid var(--ink)} .ink-dik{border:4px solid var(--ink)} .blok-schaduw{box-shadow:4px 4px 0 var(--ink)} .sticker{text-shadow:-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff,2px 2px 0 #fff} .dotted-leader{flex-grow:1;border-bottom:2px dotted var(--ink);margin:0 8px;position:relative;top:-6px} /* typografie zoals de Stitch fontSize-schaal */ .t-display{font-family:var(--display);font-size:72px;line-height:1.1;letter-spacing:.02em;font-weight:400} .t-headline-lg{font-family:var(--display);font-size:48px;line-height:1.2;letter-spacing:.01em;font-weight:400} .t-headline-md{font-family:var(--display);font-size:24px;line-height:1.2;font-weight:400} .t-label{font-family:var(--display);font-size:14px;line-height:1;letter-spacing:.1em;font-weight:400} .t-body-lg{font-size:18px;line-height:1.6;font-weight:600} @media(max-width:767px){ .t-display{font-size:32px;line-height:1.2;letter-spacing:0} .t-headline-lg{font-size:32px} } /* ---------- online bestellen aan/uit ---------- Met is alles met .bestel-aan verborgen en toont .bestel-uit het alternatief. Bestellen weer aanzetten = die klasse van weghalen (index, menu, vinden, status, speeltijd) en op index de drie klassiekers + beschrijving terug naar #bestellen. */ .bestellen-uit .bestel-aan{display:none!important} html:not(.bestellen-uit) .bestel-uit{display:none!important} .bestellen-uit body{padding-bottom:0} /* ---------- navigatie ---------- */ .nav{width:100%;position:sticky;top:0;z-index:60;background:var(--background); border-bottom:4px solid var(--secondary)} .nav-in{display:flex;justify-content:space-between;align-items:center;gap:16px; max-width:var(--max-width);margin:0 auto;padding:8px 16px} @media(min-width:768px){.nav-in{padding:8px var(--marge)}} .merk{display:inline-flex;align-items:center;text-decoration:none;transition:transform .18s} .merk:hover{transform:skewX(-2deg) scale(1.04)} .merk img{display:block;height:34px;width:auto} .nav-links{display:none;gap:var(--gutter);align-items:center} @media(min-width:768px){.nav-links{display:flex}} .nav-links a{font-family:var(--display);font-size:14px;letter-spacing:.1em;text-transform:uppercase; color:var(--secondary);text-decoration:none;transition:transform .18s,color .18s} .nav-links a:hover{color:var(--primary);transform:skewX(2deg) scale(1.05)} .nav-links a.actief{color:var(--primary);border-bottom:2px solid var(--primary);transform:translateY(4px)} .nav-knop{background:var(--primary-container);color:var(--on-primary)!important; font-family:var(--display);font-size:14px;letter-spacing:.1em;text-transform:uppercase; padding:8px 16px;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink); text-decoration:none;display:none;transition:transform .16s,box-shadow .16s} @media(min-width:768px){.nav-knop{display:inline-block}} .nav-knop:hover{transform:translateY(4px);box-shadow:none;color:var(--on-primary)!important} .hamburger{display:inline-flex;align-items:center;justify-content:center;background:none; border:2px solid var(--ink);color:var(--primary);width:42px;height:38px;cursor:pointer; font-size:20px;line-height:1} @media(min-width:768px){.hamburger{display:none}} .mob-menu{display:none;border-bottom:4px solid var(--secondary);background:var(--background)} .mob-menu.open{display:block} .mob-menu a{display:block;padding:14px 16px;border-top:2px solid rgba(42,26,20,.12); font-family:var(--display);font-size:16px;letter-spacing:.1em;text-transform:uppercase; color:var(--secondary);text-decoration:none} .mob-menu a.actief{color:var(--primary)} /* ---------- knoppen ---------- */ .knop{font-family:var(--display);font-size:14px;letter-spacing:.1em;text-transform:uppercase; padding:12px 24px;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink); text-decoration:none;cursor:pointer;display:inline-block; transition:transform .16s,box-shadow .16s} .knop:hover{transform:translateY(4px);box-shadow:none} .knop-rood{background:var(--primary-container);color:var(--on-primary)} .knop-licht{background:var(--background);color:var(--on-surface)} .knop-secundair{background:var(--secondary);color:#fff} /* ---------- paneel met badge-kop (het Stitch-device) ---------- */ .paneel{background:var(--paper-bright);border:2px solid var(--ink);padding:24px 20px 16px; position:relative;margin-top:26px} .paneel > .badge-kop{position:absolute;top:-18px;left:50%;transform:translateX(-50%); background:var(--surface-variant);border:2px solid var(--ink);padding:4px 16px; display:flex;align-items:center;gap:8px;white-space:nowrap;max-width:calc(100% - 24px)} .badge-kop h2,.badge-kop h3,.badge-kop h4{font-family:var(--display);font-size:24px;line-height:1.2; margin:0;color:var(--primary);text-transform:uppercase;overflow:hidden;text-overflow:ellipsis} .badge-kop .ico{font-size:16px;line-height:1} @media(max-width:600px){.badge-kop h2,.badge-kop h3,.badge-kop h4{font-size:19px}} /* ---------- menuregels ---------- */ .regel{padding:10px 0} .regel + .regel{border-top:1px dotted rgba(42,26,20,.25)} .regel-top{display:flex;justify-content:space-between;align-items:baseline} .regel .naam{font-family:var(--display);font-size:20px;line-height:1.2;text-transform:uppercase; color:var(--on-surface);display:flex;align-items:baseline;gap:6px;min-width:0} .regel .prijs{font-family:var(--display);font-size:20px;line-height:1.2;color:var(--primary); white-space:nowrap} .regel .oms{font-size:13px;color:var(--on-surface-variant);margin:4px 0 0;line-height:1.35; max-width:82%;text-transform:uppercase} .cat-note{font-size:13px;color:var(--on-surface-variant);font-style:italic;text-align:center; margin:2px 0 10px} /* ---------- citaatblok ---------- */ .citaat{background:var(--surface-variant);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink); padding:26px;text-align:center;transform:rotate(1deg);margin:34px auto;max-width:620px} .citaat p{font-family:var(--display);font-size:24px;line-height:1.25;margin:0;color:var(--primary); text-transform:uppercase} .citaat p span{color:var(--secondary);font-size:32px;display:block} /* ---------- footer ---------- */ footer{background:var(--secondary);width:100%;margin-top:auto;border-top:4px solid var(--primary)} .foot-in{display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:16px; padding:var(--gutter) 16px;max-width:var(--max-width);margin:0 auto} @media(min-width:768px){.foot-in{flex-direction:row;align-items:flex-start;padding:var(--gutter) var(--marge)}} .foot-merk{margin-bottom:8px} .foot-merk img{display:block;height:38px;width:auto} footer p{margin:0;color:var(--surface-variant);font-size:14px;line-height:1.6} footer a{color:var(--surface-variant);text-decoration:none} footer a:hover{color:#fff} .foot-noot{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 16px var(--gutter); font-size:12px;color:rgba(243,226,176,.62);display:flex;flex-wrap:wrap;gap:8px; justify-content:space-between} @media(min-width:768px){.foot-noot{padding:0 var(--marge) var(--gutter)}} a:focus-visible,button:focus-visible{outline:3px solid var(--primary);outline-offset:3px} .klantgegevens{display:grid;gap:14px;max-width:420px} .klantgegevens label{font-size:13px;font-weight:600;color:var(--on-surface-variant)} .klantgegevens input,.klantgegevens textarea{ display:block;width:100%;margin-top:6px;padding:11px 13px;border:1px solid var(--outline); border-radius:10px;background:var(--paper-bright);color:var(--on-surface);font:inherit;font-size:15px} .klantgegevens input:focus,.klantgegevens textarea:focus{outline:2px solid var(--primary);outline-offset:1px} .klantgegevens textarea{resize:vertical;min-height:60px} .klant-fout{color:var(--error);font-size:13px;margin:0} /* was inline style="display:grid" op het element zelf — dat wint van [hidden] (hogere specificiteit dan de user-agent-regel), dus adres/contactvelden bleven zichtbaar bij afhalen/ ter plaatse. Zelfde bugpatroon als eerder bij .spel-sectie en het annuleer-balkje. */ #klant-contact-blok:not([hidden]),#klant-adres-blok:not([hidden]){display:grid;gap:14px} .regel.is-uitverkocht{opacity:.55} .regel.is-uitverkocht .naam{text-decoration:line-through} .demo-let-op b{display:block;margin-bottom:4px}