/* ============================================================ CARECOM® Blazor reimplementation — global stylesheet. Everything below is genuinely cross-cutting: design tokens, base typography, layout primitives used by multiple pages, and the few utility classes (.container, .jumbotron, .bullet-list, .signature) that appear all over the site. Component- and page-specific styles live in scoped *.razor.css files next to each .razor — see e.g. SiteFooter.razor.css, Home.razor.css. The compiler rewrites those rules with a unique [b-xxxxx] scope-id attribute so they never leak globally. ============================================================ */ :root { --bg: #ffffff; --bg-muted: #f4f6f8; --bg-quote: #1d242b; --fg: #1d242b; --fg-soft: #4a5560; --fg-muted: #7a8590; --accent: #1f6f8b; --accent-dark: #134453; --accent-soft: #e3eef3; --border: #e2e6ea; /* Semantic status colours — used by the events feature, forms and any success/warning/error surface. Each has a strong tone (text/border/ fill) and a soft tint (subtle background); warning additionally has a darker -fg because the amber strong tone is too light for body text. */ --success: #2d7a4f; --success-soft: #e6f4ec; --warning: #b08000; --warning-fg: #6b4d00; --warning-soft: #fff4e0; --danger: #a04040; --danger-soft: #faecec; --shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06); --shadow-md: 0 4px 12px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08); --radius: 4px; --radius-lg: 8px; --content-w: 1100px; --font-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif; --font-serif: Georgia, "Times New Roman", serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-dark); text-decoration: underline; } /* ----- Keyboard focus ring ------------------------------------------------- One consistent focus indicator for every interactive element. :focus-visible only matches keyboard focus, so mouse users never see it. Elements with tabindex="-1" are deliberately excluded: they are script-only focus targets (notably the H1, which FocusOnNavigate focuses after every route change for screen readers) and must NOT flash a ring on navigation. */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ----- External link marker (mirrors carecom.de's .externalLink::after) ----- Any anchor that opens in a new tab gets a small "external" glyph after it. The marker is suppressed for: - anchors that wrap an image (logos, icons), - anchors that explicitly opt out via class="no-extlink". Dark-surface overrides (footer, cookie banner) live in those components' own scoped CSS files. */ a[target="_blank"]:not(.no-extlink):not(:has(img))::after { content: " \2197"; /* U+2197 NORTH EAST ARROW */ font-size: .85em; color: var(--fg-muted); margin-left: .15em; display: inline-block; transform: translateY(-.05em); text-decoration: none; } a[target="_blank"]:not(.no-extlink):not(:has(img)):hover::after { color: var(--accent); } /* ----- Animated underline for in-flow prose links -------------------------- On hover an accent underline wipes in from the left instead of the hard default underline. Scoped to the article body (.layout-grid__main) of every SitePage — header, footer and sidebar sit outside it and stay unaffected. Headings links, image links and the icon-bearing shop-link are excluded; they are not running text. */ .layout-grid__main a { background-image: linear-gradient(currentColor, currentColor); background-position: 0 100%; background-repeat: no-repeat; background-size: 0% 1.5px; transition: background-size .25s ease; } .layout-grid__main a:hover { text-decoration: none; background-size: 100% 1.5px; } .layout-grid__main :is(h1, h2, h3, h4) a, .layout-grid__main a.shop-link, .layout-grid__main a.card, .layout-grid__main a.blog-post-nav__link, .layout-grid__main a:has(img) { background-image: none; } @media (prefers-reduced-motion: reduce) { .layout-grid__main a { transition: none; } } h1, h2, h3, h4 { color: var(--fg); line-height: 1.25; } h1 { font-size: 2.4rem; margin: 0 0 1rem; font-weight: 300; } /* FocusOnNavigate (Routes.razor) sets programmatic focus on the H1 after every route change for screen-reader friendliness — it also adds tabindex="-1", which takes the H1 out of the normal Tab order. Since the H1 is therefore never reachable by keyboard anyway, we can safely suppress the default focus ring across the board. */ h1:focus { outline: none; } h2 { font-size: 1.6rem; margin: 1.4rem 0 .8rem; font-weight: 400; } h3 { font-size: 1.2rem; margin: 1rem 0 .6rem; font-weight: 600; } h4 { font-size: .95rem; margin: 0 0 .4rem; font-weight: 600; color: var(--fg-soft); letter-spacing: .02em; } p { margin: 0 0 1rem; } img { max-width: 100%; height: auto; display: block; } code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.95em; } .container { width: 100%; max-width: var(--content-w); margin: 0 auto; padding: 0 1.5rem; } .container--carousel { padding-top: 1.5rem; } .muted { color: var(--fg-muted); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ============================================================ Page layout primitives — shared by SitePage, BlogEntry, NotFound ============================================================ */ .page { display: flex; flex-direction: column; min-height: 100vh; } .page__main { flex: 1; } .main-layout { padding-top: 1.5rem; padding-bottom: 3rem; } .layout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 2.5rem; } .layout-grid__main { min-width: 0; } /* ============================================================ Cross-page content patterns ============================================================ */ .jumbotron { background: var(--bg-muted); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 1.2rem 1.4rem; margin: 1.2rem 0 1.6rem; } .jumbotron p { margin: 0; font-size: 1.05rem; color: var(--fg-soft); } .jumbotron p + p { margin-top: .8rem; } /* ------------ Card ----------------------------------------------------- The shared surface for content cards — blog teasers, partner cards, the events list, the intern dashboard tiles. Padding is deliberately NOT set here (each use sets its own), so .card only owns the surface look. `.card--hover` is the opt-in lift treatment for navigable cards (links or otherwise clickable tiles); a static panel uses `.card` on its own. Adopt with class="card " (add "card--hover" when navigable). */ .card { background: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--radius); } .card--hover { transition: border-color .15s ease, box-shadow .2s ease, transform .2s ease; } .card--hover:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .card--hover:hover { transform: none; } } .bullet-list { list-style: none; padding: 0; margin: .5rem 0 1rem; } .bullet-list li { padding: .35rem 0 .35rem 1.4rem; position: relative; } .bullet-list li::before { content: "›"; position: absolute; left: 0; color: var(--accent); font-weight: 700; } .signature { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.4rem; color: var(--fg); margin: 1rem 0; } /* ------------ Form field ---------------------------------------------- Shared field wrapper: a block label with a small caption stacked above a full-width control. Declared globally (not scoped) on purpose, so the rules also reach the /