/* ========================================================================== base.css — reset, shared tokens, theme-agnostic skeleton, switcher UI Themes (swiss / brutalism / editorial) override via [data-theme="…"]. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } :root { --brand: #EB6A25; /* logo orange */ --brand-deep: #C8551A; --header-h: 76px; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; line-height: 1.6; color: #1a1a1a; background: #fff; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; height: auto; } a { color: inherit; } button { font: inherit; cursor: pointer; } .container { width: min(1180px, 100% - 2.5rem); margin-inline: auto; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: -100px; left: 1rem; z-index: 1000; background: #000; color: #fff; padding: .6rem 1rem; border-radius: 4px; transition: top .15s; } .skip-link:focus { top: 1rem; } :where(a, button, input, textarea):focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; } /* --- Sections / shared skeleton -------------------------------------------- */ .section { padding-block: clamp(3.5rem, 8vw, 7rem); } .eyebrow { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 1rem; } .section-no { font-variant-numeric: tabular-nums; } .accent { color: var(--brand); } /* --- Style switcher (constant across themes) ------------------------------- */ .switcher { position: fixed; z-index: 900; right: 1rem; bottom: 1rem; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; max-width: calc(100vw - 2rem); padding: .4rem .5rem; background: rgba(20,20,20,.92); color: #fff; border-radius: 999px; box-shadow: 0 8px 30px rgba(0,0,0,.25); backdrop-filter: blur(8px); font-family: Inter, system-ui, sans-serif; } .switcher__label { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; opacity: .6; padding-inline: .4rem; } .switcher__btn { border: 0; background: transparent; color: #fff; padding: .4rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 600; opacity: .7; transition: background .15s, opacity .15s; } .switcher__btn:hover { opacity: 1; } .switcher__btn[aria-pressed="true"] { background: var(--brand); opacity: 1; } /* --- Reveal animation ------------------------------------------------------ */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .nav a, .site-header, .tv-badge, .switcher__btn, .btn, .card { transition: none; } } /* --- TeamViewer floating badge --------------------------------------------- */ .tv-badge { position: fixed; left: 1rem; bottom: 1rem; z-index: 850; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .85rem .5rem .6rem; background: rgba(20,20,20,.92); color: #fff; border-radius: 999px; text-decoration: none; font-family: Inter, system-ui, sans-serif; font-size: .8rem; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.22); backdrop-filter: blur(8px); opacity: .9; transition: opacity .15s, transform .15s, box-shadow .15s; } .tv-badge:hover { opacity: 1; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.28); } .tv-badge__ico { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--brand); font-size: .9rem; } /* --- Hero logo (only shown by Swiss theme) --------------------------------- */ .hero__logo { display: none; } /* --- Cards label ----------------------------------------------------------- */ .cards-label { font-weight: 600; margin: 1.5rem 0 0; } /* --- Header / nav skeleton ------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 800; background: #fff; } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); } .brand__logo { height: 34px; width: auto; } .nav { display: flex; align-items: center; gap: 1.6rem; } .nav a { text-decoration: none; } .nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; position: relative; } .nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after { content: ""; position: absolute; left: 10px; right: 10px; height: 2px; background: currentColor; transition: transform .2s, opacity .2s; } .nav-toggle__bar { top: 21px; } .nav-toggle__bar::before { top: -7px; } .nav-toggle__bar::after { top: 7px; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { transform: translateY(-7px) rotate(-45deg); } /* --- Buttons / forms skeleton ---------------------------------------------- */ .btn { display: inline-block; text-decoration: none; padding: .8rem 1.4rem; font-weight: 600; /* reset native