/* ========================================================================== ActivMan — design system Light/dark themes via CSS custom properties. Default follows system preference (prefers-color-scheme); [data-theme] on overrides it. ========================================================================== */ :root { --bg: #f6f7fb; --surface: #ffffff; --surface-alt: #eef0f7; --surface-raised: #ffffff; --border: #e1e4ee; --border-strong: #c9cee0; --text: #171a23; --text-muted: #5b6072; --text-faint: #868ca0; --accent: #4b3df5; --accent-hover: #3a2ee0; --accent-contrast: #ffffff; --accent-soft: #edeaff; --accent-soft-border: #d8d3ff; --success: #12875a; --success-soft: #e3f6ec; --danger: #d1483f; --danger-soft: #fbeae8; --warning: #a5680c; --warning-soft: #fdf1dc; --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --shadow-sm: 0 1px 2px rgba(23, 26, 35, 0.06); --shadow: 0 4px 16px rgba(23, 26, 35, 0.07), 0 1px 3px rgba(23, 26, 35, 0.06); --shadow-lg: 0 16px 48px rgba(23, 26, 35, 0.12), 0 2px 8px rgba(23, 26, 35, 0.06); --max-width: 1180px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0e1016; --surface: #171a23; --surface-alt: #1e222d; --surface-raised: #1e222d; --border: #2b3040; --border-strong: #3a4056; --text: #eef0f6; --text-muted: #a7acc0; --text-faint: #767c92; --accent: #8b80ff; --accent-hover: #a39aff; --accent-contrast: #12141c; --accent-soft: #262046; --accent-soft-border: #3a3170; --success: #3ecf8e; --success-soft: #133527; --danger: #ef7169; --danger-soft: #3a1e1c; --warning: #eab04e; --warning-soft: #3a2c10; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3); color-scheme: dark; } } :root[data-theme="dark"] { --bg: #0e1016; --surface: #171a23; --surface-alt: #1e222d; --surface-raised: #1e222d; --border: #2b3040; --border-strong: #3a4056; --text: #eef0f6; --text-muted: #a7acc0; --text-faint: #767c92; --accent: #8b80ff; --accent-hover: #a39aff; --accent-contrast: #12141c; --accent-soft: #262046; --accent-soft-border: #3a3170; --success: #3ecf8e; --success-soft: #133527; --danger: #ef7169; --danger-soft: #3a1e1c; --warning: #eab04e; --warning-soft: #3a2c10; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3); color-scheme: dark; } /* ---- reset -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; font-size: 16px; transition: background-color .18s ease, color .18s ease; overflow-x: hidden; max-width: 100vw; } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } h1, h2, h3, h4, h5 { line-height: 1.2; font-weight: 700; margin: 0 0 .5em; letter-spacing: -0.01em; } h1 { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); } h2 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); } h3 { font-size: 1.25rem; } h4 { font-size: 1.05rem; } p { margin: 0 0 1em; color: var(--text); } ul, ol { margin: 0 0 1em; padding-left: 1.3em; } li { margin-bottom: .4em; } table { border-collapse: collapse; width: 100%; } td, th { padding: .5em .75em; text-align: left; } code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } code { background: var(--surface-alt); padding: .15em .4em; border-radius: 5px; font-size: .9em; } /* ---- layout helpers ------------------------------------------------------ */ .wrap { max-width: var(--max-width); margin-inline: auto; padding-inline: 24px; } .section { padding: 64px 0; } .section-sm { padding: 40px 0; } .section-tight { padding: 24px 0; } .text-center { text-align: center; } .muted { color: var(--text-muted); } .lead { font-size: 1.2rem; color: var(--text-muted); } .grid { display: grid; gap: 24px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-span-all { grid-column: 1 / -1; } @media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } .stack { display: flex; flex-direction: column; } .row { display: flex; align-items: center; } .row-wrap { display: flex; flex-wrap: wrap; align-items: center; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .mt-0 { margin-top: 0; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; } .mb-0 { margin-bottom: 0; } /* ---- surfaces / cards ----------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); } .panel { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px; } .panel-accent { background: linear-gradient(155deg, var(--accent-soft), var(--surface-alt) 70%); border: 1px solid var(--accent-soft-border); border-radius: var(--radius-lg); padding: 40px; } hr.rule { border: none; border-top: 1px solid var(--border); margin: 40px 0; } /* ---- buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font-weight: 600; font-size: .95rem; padding: .7em 1.4em; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease, border-color .12s ease; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--accent-contrast); } .btn-primary:hover { background: var(--accent-hover); color: var(--accent-contrast); box-shadow: 0 6px 20px rgba(75, 61, 245, .28); } .btn-outline { background: transparent; color: var(--text); border-color: var(--border-strong); } .btn-outline:hover { border-color: var(--accent); color: var(--accent); } .btn-ghost { background: var(--surface-alt); color: var(--text); } .btn-ghost:hover { background: var(--border); color: var(--text); } .btn-block { width: 100%; } .btn-sm { padding: .5em 1.1em; font-size: .85rem; } .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; } /* ---- badges / tags --------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: .4em; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .3em .75em; border-radius: 999px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-soft-border); } .badge-success { background: var(--success-soft); color: var(--success); border-color: transparent; } .badge-warning { background: var(--warning-soft); color: var(--warning); border-color: transparent; } /* ---- icon check list -------------------------------------------------------- */ .check-list { list-style: none; padding: 0; margin: 0; } .check-list li { position: relative; padding-left: 1.75em; margin-bottom: .65em; } .check-list li::before { content: ""; position: absolute; left: 0; top: .3em; width: 1.1em; height: 1.1em; border-radius: 50%; background: var(--success-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 5' stroke='%2312875a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 62%; } :root[data-theme="dark"] .check-list li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 5' stroke='%233ecf8e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .check-list li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 5' stroke='%233ecf8e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } } /* ---- header / nav ------------------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--surface); border-bottom: 1px solid var(--border); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; } .brand { display: flex; align-items: center; gap: .55em; font-weight: 800; font-size: 1.25rem; color: var(--text); letter-spacing: -0.01em; } .brand:hover { color: var(--text); } .brand-mark { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(155deg, var(--accent), var(--accent-hover)); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: .95rem; flex-shrink: 0; } nav.main-nav { display: flex; align-items: center; gap: 4px; } .nav-link { position: relative; display: inline-flex; align-items: center; gap: .3em; padding: 10px 14px; border-radius: 8px; font-weight: 600; font-size: .93rem; color: var(--text-muted); } .nav-link:hover { color: var(--text); background: var(--surface-alt); } .nav-link.is-active { color: var(--accent); } .nav-item { position: relative; } .nav-caret { width: 9px; height: 9px; opacity: .65; } .nav-dropdown { position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .14s ease, transform .14s ease, visibility .14s; } .nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dropdown a { display: block; padding: 9px 12px; border-radius: 7px; font-size: .9rem; font-weight: 500; color: var(--text); } .nav-dropdown a:hover { background: var(--surface-alt); color: var(--accent); } .header-actions { display: flex; align-items: center; gap: 10px; } .theme-toggle { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-alt); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text); flex-shrink: 0; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: inline; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; } :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: inline; } } .nav-burger { display: none; width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-alt); align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .nav-burger span { display: block; width: 16px; height: 2px; background: var(--text); position: relative; } .nav-burger span::before, .nav-burger span::after { content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: var(--text); } .nav-burger span::before { top: -5px; } .nav-burger span::after { top: 5px; } @media (max-width: 980px) { nav.main-nav { position: fixed; top: 68px; right: 0; bottom: 0; left: 0; background: var(--surface); flex-direction: column; align-items: stretch; padding: 12px; gap: 2px; overflow-y: auto; transform: translateX(100%); transition: transform .2s ease; border-top: 1px solid var(--border); } nav.main-nav.is-open { transform: translateX(0); } .nav-link { padding: 13px 14px; width: 100%; } .nav-item { width: 100%; } .nav-dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; background: var(--surface-alt); display: none; margin: 2px 0 6px; } .nav-item.is-open .nav-dropdown { display: block; } .nav-burger { display: inline-flex; } } /* ---- hero ------------------------------------------------------------------- */ .hero { padding: 72px 0 56px; background: radial-gradient(700px 340px at 12% -10%, var(--accent-soft), transparent 60%), radial-gradient(600px 300px at 100% 0%, var(--accent-soft), transparent 55%); } .hero h1 { max-width: 820px; } .hero .lead { max-width: 620px; } .page-hero { padding: 52px 0 40px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--surface-alt), var(--bg)); } .page-hero .eyebrow { margin-bottom: 10px; } .page-hero p.lead { max-width: 680px; margin-bottom: 0; } .eyebrow { display: inline-flex; align-items: center; gap: .5em; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); } /* ---- feature blocks ------------------------------------------------------------- */ .icon-tile { width: 46px; height: 46px; border-radius: 12px; background: var(--accent-soft); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; } .icon-tile img { width: 24px; height: 24px; } .feature-card { border-radius: var(--radius); } .feature-card h3 { margin-bottom: .4em; } .feature-card p:last-child { margin-bottom: 0; } /* ---- comparison table --------------------------------------------------------- */ .compare-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); } .compare-table { min-width: 640px; } .compare-table th, .compare-table td { border-bottom: 1px solid var(--border); } .compare-table thead th { background: var(--surface-alt); font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); } .compare-table tbody tr:last-child td { border-bottom: none; } .compare-table td.center, .compare-table th.center { text-align: center; } .compare-table tbody th { font-weight: 600; } .mark-yes, .mark-no { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; align-items: center; justify-content: center; } .mark-yes { background: var(--success-soft); color: var(--success); } .mark-no { background: var(--surface-alt); color: var(--text-faint); } /* ---- pricing --------------------------------------------------------------------- */ .price-table { width: 100%; border-collapse: collapse; } .price-table th, .price-table td { padding: .7em .9em; border-bottom: 1px solid var(--border); } .price-table thead th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); } .price-table tbody tr:last-child td { border-bottom: none; } .price-cell { font-weight: 700; font-size: 1.05rem; } .plan-card { display: flex; flex-direction: column; } .plan-card .plan-price { font-size: 2rem; font-weight: 800; margin: .1em 0 .2em; } .plan-card .plan-price small { font-size: .95rem; font-weight: 500; color: var(--text-muted); } .plan-card.is-highlight { border-color: var(--accent); box-shadow: var(--shadow); position: relative; } /* ---- testimonials / quotes ------------------------------------------------------- */ blockquote.quote { margin: 0; font-size: 1.05rem; font-style: italic; color: var(--text); } .quote-card .quote-attrib { margin-top: 16px; font-style: normal; } .quote-card .quote-attrib strong { display: block; } /* ---- gallery ------------------------------------------------------------------------ */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; } .gallery-item { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--surface); cursor: zoom-in; position: relative; } .gallery-item img { aspect-ratio: 4/3; object-fit: cover; width: 100%; } .gallery-caption { padding: 10px 12px; font-size: .85rem; font-weight: 600; color: var(--text-muted); border-top: 1px solid var(--border); } .lightbox { position: fixed; inset: 0; background: rgba(10, 11, 16, .82); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 32px; } .lightbox.is-open { display: flex; } .lightbox figure { margin: 0; max-width: min(92vw, 1000px); } .lightbox img { border-radius: 10px; max-height: 82vh; width: auto; margin-inline: auto; } .lightbox figcaption { color: #fff; text-align: center; margin-top: 12px; font-size: .9rem; } .lightbox-close { position: absolute; top: 20px; right: 24px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; font-size: 1.2rem; cursor: pointer; } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .lightbox-nav:hover { background: rgba(255,255,255,.18); } .lightbox-prev { left: 20px; } .lightbox-next { right: 20px; } @media (max-width: 700px) { .lightbox-nav { width: 42px; height: 42px; font-size: 1.5rem; } .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; } } /* ---- online help (sidebar contents + legacy content pane) ------------------------------------ */ .help-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; } .help-sidebar { position: sticky; top: 84px; padding: 20px; } .help-sidebar p { margin: 0 0 16px; } .help-sidebar p:last-child { margin-bottom: 0; } .help-sidebar a { display: inline-flex; align-items: center; gap: 7px; padding: 4px 6px; margin: 1px 0; border-radius: 6px; color: var(--text-muted); font-size: .88rem; line-height: 1.5; } .help-sidebar a:hover { background: var(--surface-alt); color: var(--accent); } .help-sidebar img { display: inline-block; flex-shrink: 0; } .help-content { padding: 40px; min-width: 0; } .help-content img { border-radius: 8px; border: 1px solid var(--border); margin: 12px 0; } .help-content h3, .help-content h4 { scroll-margin-top: 90px; margin-top: 1.4em; } .help-content h3:first-child, .help-content h4:first-child { margin-top: 0; } .help-content table { margin: 16px 0; } .help-content table td, .help-content table th { border: 1px solid var(--border); } .help-content ol, .help-content ul { padding-left: 1.5em; } @media (max-width: 820px) { .help-layout { grid-template-columns: 1fr; } .help-sidebar { position: static; max-height: none; } .help-content { padding: 24px; } } /* ---- FAQ / accordion ----------------------------------------------------------------- */ .faq-item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: 12px; overflow: hidden; } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; background: none; border: none; text-align: left; font-weight: 700; font-size: 1rem; color: var(--text); cursor: pointer; font-family: inherit; } .faq-question .plus { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-alt); display: inline-flex; align-items: center; justify-content: center; transition: transform .18s ease; font-weight: 700; color: var(--accent); } .faq-item.is-open .faq-question .plus { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height .22s ease; } .faq-answer-inner { padding: 0 22px 20px; color: var(--text-muted); } .faq-answer-inner p:last-child { margin-bottom: 0; } /* ---- callout / CTA banner -------------------------------------------------------------- */ .cta-banner { border-radius: var(--radius-lg); background: linear-gradient(155deg, var(--accent), var(--accent-hover)); color: #fff; padding: 48px; text-align: center; } .cta-banner h2 { color: #fff; } .cta-banner p { color: rgba(255,255,255,.85); } .cta-banner .btn-primary { background: #fff; color: var(--accent-hover); } .cta-banner .btn-primary:hover { background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.2); } .cta-banner .btn-outline { border-color: rgba(255,255,255,.5); color: #fff; } .cta-banner .btn-outline:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.12); } /* ---- download cards ------------------------------------------------------------------ */ .download-card { text-align: center; } .download-card .edition-icon { width: 96px; height: 96px; margin: 0 auto 16px; } .download-card .version-tag { font-size: .85rem; color: var(--text-muted); margin-top: 8px; } .other-download-row { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: center; } .other-download-row .dl-icon { width: 72px; } .other-download-row table td:first-child { color: var(--text-muted); width: 110px; } /* ---- logo box (third-party logos designed for light backgrounds) ------------------------------ */ .logo-box { background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; } .logo-box img { max-height: 60px; width: auto; margin: 0; } /* ---- resource / contact tiles ------------------------------------------------------------ */ .contact-detail dt { font-weight: 700; margin-top: 14px; } .contact-detail dd { margin: 2px 0 0; color: var(--text-muted); } /* ---- footer --------------------------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--border); background: var(--surface-alt); margin-top: 64px; } .footer-top { padding: 48px 0 32px; } .footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 24px; } .footer-brand p { color: var(--text-muted); max-width: 260px; font-size: .92rem; } .footer-col h5 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); margin-bottom: 12px; } .footer-col a { display: block; color: var(--text-muted); font-size: .92rem; padding: 4px 0; } .footer-col a:hover { color: var(--accent); } .footer-bottom { border-top: 1px solid var(--border); padding: 20px 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; font-size: .85rem; color: var(--text-faint); } .footer-bottom a { color: var(--text-faint); } .footer-bottom a:hover { color: var(--accent); } @media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } } /* ---- misc utility ------------------------------------------------------------------------------ */ .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; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--accent); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 2000; } .skip-link:focus { left: 0; } .toc-links { display: flex; flex-wrap: wrap; gap: 8px; } .toc-links a { font-size: .85rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--surface-alt); border: 1px solid var(--border); color: var(--text); } .toc-links a:hover { border-color: var(--accent); color: var(--accent); }