/* ═══════════════════════════════════════════════════════════════════════════════ THE BUTTON. One definition, for every call to action on every public page. WHY THIS FILE EXISTS. On 10-09-2026 the owner asked why "BBQ BOEKEN" and "BEKIJK DE BIEREN" looked like two different controls on the same page. They were. The same pill was written SIX times, in three stylesheets, with six sets of numbers: .cbtn master.css 16px 30px, gold fill .hero-cta a / .shop-cta a / .wa-closed-cta a index.css 15px 26px, cream + dark .xp-card .xp-card-cta index.css 10px 18px, cream + faint .cinfo-actions a master.css 12px 22px, cream + dark .vk-actions a verkooppunten.css 14px 22px, cream + dark .tile .tile-go master.css no pill at all — gold text with an arrow THE ROOT CAUSE, and it is worth knowing before "simplifying" this away: the homepage loads ONLY css/index.css, never master.css — deliberately, it is the first paint of the site. So master.css's button was unreachable there and a second one grew. Every page that needed a button in a file master.css did not cover grew its own. This file is small and linked by BOTH shells, which is the only arrangement that stops a seventh copy appearing. ── THE FOUR RULES, all four set by the owner on 10-09-2026 ────────────────────── The first pass unified the colours but left three tells, and he caught all three from one screenshot: "the hover over on the buttons is also different… also seems like the shape is different and we lose the arrow. We really really need to have 1 style element for buttons to make the UX look like it was build with consistency in mind." 1. ONE SHAPE. One padding, one radius, one type scale. There is no small variant. The earlier build had a 10px 18px size "for inside a card", and that is exactly what made the wegwijzer buttons a different shape from the booking buttons on the same page. 2. ONE ARROW, on every button, drawn HERE as `::after`. It used to be markup — a `` on some, an inline span on others, a CSS `::after` on `.tile-go`, and nothing at all on `.cbtn`. Three mechanisms means some buttons lose it. Do not put an arrow in the markup; this file draws it. 3. THE LEFTMOST BUTTON IS BRAND YELLOW, the rest follow. *"Lets agree that the most left is always brand yellow to catch attention and the others follow."* Driven by POSITION, not by a class in the markup: `:first-of-type` inside a CTA container, and the button in the first card of a card row. There is no `.is-primary` any more — one mechanism, so a page cannot forget to tag it. 4. ONE HOVER. Ghost buttons gain the gold outline and gold text; the filled one keeps its gold fill. Both lift 2px. A card-wide hover produces exactly the same result as hovering the button itself — the previous build filled the in-card ghost SOLID gold on card hover, which is why two buttons on one page behaved differently. ALIASED, NOT REWRITTEN. The old class names are kept in the selector lists below as aliases, so no page's markup had to be re-tagged and no layout hook was lost. `.hero-cta`, `.shop-cta`, `.wa-closed-cta`, `.cinfo-actions`, `.vk-actions` stay as they are — they are flex CONTAINERS that position the buttons, and they still own that job. NEW COMPONENTS DO NOT GET AN ALIAS. Write `class="cbtn"` in the markup. Enforced by apps/local/tests/button_single_source/run.sh. §10 of site/sitestandards.md carries the table. ═══════════════════════════════════════════════════════════════════════════════ */ /* ── the pill: ghost is the default ─────────────────────────────────────────────── Ghost by default and filled by position, never the other way round. A page that adds a button therefore gets the QUIET one unless it is the first, which is the safe direction: a missed tag costs a highlight, not a screen full of gold. */ .cbtn, .hero-cta a, .shop-cta a, .wa-closed-cta a, .cinfo-actions a, .vk-actions a, .xp-card .xp-card-cta, .tile .tile-go, /* The attachment picker on /contact/ is a