/* ========================================================================== CityFoundry AG — Base Reset, document defaults and the behaviour hooks the page scripts drive. Requires: tokens.css ========================================================================== */ * { box-sizing: border-box; } /* `hidden` must win over a component's own display value. */ [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--cf-white); color: var(--cf-ink); font-family: var(--cf-font-doc); -webkit-font-smoothing: antialiased; text-wrap: pretty; } a { color: inherit; } /* Fallback hover for links that carry no component class of their own. Components define their own hover colour, so this never fights them. */ a:not([class]):hover { color: var(--cf-link); } input, textarea, select { font-family: var(--cf-font-body); } :focus-visible { outline: 2px solid var(--cf-cyan); outline-offset: 4px; border-radius: 6px; } ::selection { background: var(--cf-cyan); color: var(--cf-ink); } /* --- Screen-reader-only ---------------------------------------------- */ .cf-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* --- Scroll reveal ---------------------------------------------------- `js-reveal` is added to by the page script, so content stays visible when JavaScript is unavailable. */ html.js-reveal [data-reveal] { opacity: 0; transform: translateY(var(--cf-reveal-shift)); transition: opacity var(--cf-reveal-duration) var(--cf-ease), transform var(--cf-reveal-duration) var(--cf-ease); } html.js-reveal [data-reveal].is-in { opacity: 1; transform: none; } html.js-reveal [data-clip] { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--cf-ease); } html.js-reveal [data-clip].is-in { clip-path: inset(0 0 0 0); } /* --- Utilities used by more than one page ----------------------------- */ .cf-noscrollbar { scrollbar-width: none; } .cf-noscrollbar::-webkit-scrollbar { display: none; } /* Reveal animations are skipped entirely for reduced-motion users; the content simply starts in its final state. Pages that also run looping animations mute those in their own stylesheet. */ @media (prefers-reduced-motion: reduce) { [data-reveal], [data-clip] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; } }