/* Beacon Light System — base layer. The first block is tokens/base.css from the design system, verbatim. Everything below it is the small amount of plumbing a real page needs that a Claude Design canvas gets from its runtime. */ *{box-sizing:border-box} :root{color-scheme:light} body{margin:0;background:var(--surface-page);color:var(--text-primary);font-family:var(--font-core);-webkit-font-smoothing:antialiased} a{color:var(--link);text-decoration:none} a:hover{color:var(--link-hover)} ::selection{background:rgba(11,73,245,.2)} /* ---- Scroll ------------------------------------------------------------- The service tab bar is the one sticky element in the system, so in-page anchors need to clear it. Smooth scrolling matches the behaviour the source design already uses when a tab is picked. */ html{scroll-behavior:smooth;scroll-padding-top:64px} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} /* ---- Gutter ------------------------------------------------------------- The design system fixes the gutter at 32px, which is right from tablet up. Below 600px two 32px gutters eat ~17% of a phone screen, so the gutter steps down. Nothing else about the layout changes. */ @media (max-width:600px){:root{--gutter:22px}} /* ---- Scroll-driven reveal ---------------------------------------------- .bkn-reveal is the design system's entrance animation and is driven by `animation-timeline: view()`. Chrome en Edge kennen die tijdlijn, Safari (iOS en macOS) en Firefox niet. Daar valt de eigenschap weg en neemt de IntersectionObserver in site.js het over. De verbergende regel hing eerst aan .js, die in de onvoorwaardelijk op werd gezet. Op de landingspagina bestond de bijbehorende observer echter niet, dus in Safari bleef alles met .bkn-reveal permanent op opacity 0 staan: de secties hielden hun hoogte en achtergrond, maar de inhoud was onzichtbaar. De haak is daarom .bkn-io, en die klasse zet site.js pas op het moment dat er echt geobserveerd wordt. Blijft het script weg of loopt het stuk, dan wordt er niets verborgen en draait de kale animatie bij het laden gewoon af naar opacity 1. .bkn-reveal itself is declared in tokens.css (from tokens/motion.css). */ @supports not (animation-timeline:view()){ .bkn-io .bkn-reveal{animation:none;opacity:0} .bkn-io .bkn-reveal.is-in{animation:bkn-rise var(--dur-reveal) var(--ease-beacon) both} } /* tokens.css zet bij beperkte beweging alle animaties uit; zonder deze regel zou dat de reveal op opacity 0 vastzetten. */ @media (prefers-reduced-motion:reduce){.bkn-io .bkn-reveal{opacity:1}}