/* companyinfo.me — public site. Branded after dolos.fit / belego.fit: blue primary, green accent, clean white surfaces, Inter. */ /* Flash-free i18n: the page ships seeded English text (great for crawlers + an instant render for English visitors). For another language we hide the body for the few ms until i18n swaps the text, so there's never a wrong-language flash. The pre-paint script adds/removes html.i18n-pending; public.js removes it after I18N.apply(), and a 700ms timeout is a safety net. */ html.i18n-pending body { visibility: hidden; } /* Self-hosted fonts (no Google CDN — DSGVO: no third-country transfer). Variable woff2 covering the latin subset; weight axis 100–900. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/public-static/assets/fonts/inter-latin.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('/public-static/assets/fonts/jetbrainsmono-latin.woff2') format('woff2'); } :root { --brand: #2563eb; --brand-dark: #1d4ed8; --accent: #16a34a; --accent-dark: #15803d; --bg: #f8fafc; --surface: #ffffff; --text: #0f172a; --muted: #64748b; --border: #e2e8f0; --soft: #f1f5f9; --danger: #dc2626; --radius: 14px; --shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.18); --maxw: 1080px; /* Premium = gold (luxury signal); Basic = brand blue. */ --gold: #8a6d1c; --gold-soft: rgba(184, 148, 46, 0.18); } * { box-sizing: border-box; } /* overflow-x: clip (not hidden) stops horizontal scroll WITHOUT making this the scroll container — otherwise it breaks position:sticky for the nav on mobile. */ html, body { margin: 0; padding: 0; overflow-x: clip; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } .hidden { display: none !important; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } /* ── Nav ── */ .nav { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, 0.85); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; } .brand { font-weight: 800; font-size: 20px; letter-spacing: -0.02em; } .brand .b { color: var(--brand); } .brand .a { color: var(--accent); } .nav-right { display: flex; align-items: center; gap: 14px; } .lang-select { appearance: none; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 10px; padding: 7px 30px 7px 12px; font-size: 13px; cursor: pointer; font-weight: 600; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 12px; padding: 13px 22px; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .05s ease, background .15s ease, box-shadow .15s; font-family: inherit; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--brand); color: #fff; } .btn-primary:hover { background: var(--brand-dark); text-decoration: none; } .btn-accent { background: var(--accent); color: #fff; } .btn-accent:hover { background: var(--accent-dark); text-decoration: none; } .btn-ghost { background: var(--soft); color: var(--text); } .btn-ghost:hover { background: #e7ebf0; text-decoration: none; } .btn:disabled { opacity: .55; cursor: not-allowed; } .btn-block { width: 100%; } /* ── Hero ── */ .hero { padding: 64px 0 36px; text-align: center; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--accent); background: #dcfce7; border: 1px solid #bbf7d0; padding: 6px 14px; border-radius: 999px; margin-bottom: 18px; } .hero h1 { font-size: clamp(30px, 5vw, 50px); line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 16px; } .hero h1 .hl { color: var(--brand); } .hero p.sub { font-size: clamp(16px, 2.4vw, 20px); color: var(--muted); max-width: 640px; margin: 0 auto 30px; } /* ── Search card ── */ .search-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 22px; max-width: 720px; margin: 0 auto; text-align: left; } /* Make use of the available width on larger screens (the card no longer caps at 720px), so the country field + company field both get room to breathe. */ @media (min-width: 1000px) { .search-card { max-width: 940px; padding: 26px; } } @media (min-width: 1400px) { .search-card { max-width: 1040px; } } /* The country column is wide enough for the full country name AND its tier pill ("… · Premium") without truncating; the company field takes the rest. */ .search-row { display: grid; grid-template-columns: minmax(250px, .46fr) minmax(0, 1fr); gap: 12px; align-items: end; } @media (min-width: 1000px) { .search-row { grid-template-columns: minmax(300px, .42fr) minmax(0, 1fr); gap: 16px; } } @media (max-width: 620px) { .search-row { grid-template-columns: 1fr; } } .field { min-width: 0; } .field label { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin: 0 0 6px; text-transform: uppercase; letter-spacing: .03em; } .input, .select { width: 100%; border: 1px solid var(--border); border-radius: 12px; padding: 13px 14px; font-size: 15px; color: var(--text); background: var(--surface); font-family: inherit; } .search-card .input, .search-card .select { box-sizing: border-box; height: 52px; line-height: 20px; } .input:focus, .select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.15); } .select { appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } .search-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 16px; flex-wrap: wrap; } .search-actions .btn, .search-actions .turnstile-wrap { flex: 0 0 auto; } #searchBtn { min-height: 58px; min-width: 190px; padding: 0 30px; font-size: 16px; font-weight: 800; } .turnstile-wrap { min-height: 0; } .search-loading { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--muted); font-size: 14px; font-weight: 700; background: var(--soft); border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; } .search-loading .spinner { width: 16px; height: 16px; } /* ── Trust badges ── */ .badges { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; margin-top: 28px; } .badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); font-weight: 600; } .badge svg { color: var(--accent); } /* ── Sections / steps ── */ .section { padding: 28px 0 56px; } .panel { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 26px; max-width: 760px; margin: 0 auto; } .panel h2 { margin: 0 0 4px; font-size: 22px; letter-spacing: -0.02em; } .panel .lead { color: var(--muted); margin: 0 0 20px; } .back-link { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; color: var(--muted); cursor: pointer; margin-bottom: 14px; } .back-link:hover { color: var(--text); } /* result list */ .result-list { display: flex; flex-direction: column; gap: 10px; } .result-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; cursor: pointer; transition: border-color .15s, background .15s; } .result-item:hover { border-color: var(--brand); background: #f8faff; } .result-item .name { font-weight: 700; font-size: 16px; } .result-item .cc { font-size: 12px; color: var(--muted); font-weight: 600; } .result-item .pick { color: var(--brand); font-weight: 700; font-size: 14px; white-space: nowrap; } /* teaser */ .company-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; } .flag { font-size: 26px; } .fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin: 18px 0; } .teaser-avail { font-size: 12px; line-height: 1.5; color: var(--muted, #64748b); background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.20); border-radius: 8px; padding: 8px 11px; margin: 4px 0 0; } .teaser-sample { margin-top: 6px; } .teaser-sample .showcase-stage { perspective: 1600px; } .teaser-sample .doc-paper { width: min(460px, 100%); margin: 0 auto; box-shadow: 0 18px 44px -22px rgba(15,23,42,.45); } .teaser-sample-note { font-size: 11.5px; color: var(--muted, #64748b); text-align: center; margin: 10px 0 0; } @media (max-width: 560px) { .fields-grid { grid-template-columns: 1fr; } } .field-chip { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text); } .field-chip svg { color: var(--accent); flex: 0 0 auto; } .price-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--soft); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; margin-top: 10px; flex-wrap: wrap; } .price { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; } .price small { font-size: 13px; color: var(--muted); font-weight: 600; } /* document picker (German register documents) */ .docs-picker { margin: 6px 0 2px; } .docs-list { display: flex; flex-direction: column; gap: 8px; } .doc-option { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; font-size: 14px; transition: border-color .15s, background .15s; } .doc-option:hover { border-color: var(--brand); } .doc-option input { width: 18px; height: 18px; accent-color: var(--brand); flex: 0 0 auto; } .doc-option.included { cursor: default; opacity: .92; } .doc-option .doc-code { font-weight: 800; font-size: 13px; min-width: 30px; color: var(--brand); } .doc-option .doc-name { color: var(--text); } .doc-option .doc-price { font-weight: 700; font-size: 13px; color: var(--muted); white-space: nowrap; } [data-theme="dark"] .doc-option { background: var(--soft); } /* checkout form */ .form-group { margin-bottom: 16px; } .form-group label.flabel { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; } .check-row { display: flex; gap: 11px; align-items: flex-start; padding: 12px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; } .check-row input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--brand); flex: 0 0 auto; } .check-row label { font-size: 13.5px; color: var(--muted); } .err { color: var(--danger); font-size: 13.5px; margin-top: 8px; min-height: 18px; } .order-summary { background: var(--soft); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; font-size: 14px; } .order-summary .row { display: flex; justify-content: space-between; padding: 3px 0; } .order-summary .row .v { font-weight: 700; } /* progress */ .progress-wrap { text-align: center; } .task-id { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; color: var(--muted); background: var(--soft); padding: 6px 12px; border-radius: 8px; display: inline-block; margin: 8px 0 22px; } .bar { height: 12px; background: var(--soft); border-radius: 999px; overflow: hidden; margin: 18px 0; } .bar > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), var(--accent)); border-radius: 999px; transition: width .5s ease; } .progress-hint { min-height: 18px; color: var(--muted); font-size: 13.5px; margin-top: -10px; } .steps { display: flex; flex-direction: column; gap: 10px; max-width: 380px; margin: 18px auto 0; text-align: left; } .step { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); } .step .dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 12px; } .step.done { color: var(--text); } .step.done .dot { background: var(--accent); border-color: var(--accent); color: #fff; } .step.active .dot { border-color: var(--brand); color: var(--brand); } .spinner { width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--brand); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* delivery */ .success-badge { display: inline-flex; align-items: center; gap: 10px; color: var(--accent); font-weight: 800; font-size: 16px; } .notice { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 12px; padding: 12px 16px; font-size: 13.5px; margin: 16px 0; } .data-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 14px; } .data-table td { padding: 9px 4px; border-bottom: 1px solid var(--border); vertical-align: top; } .data-table td.k { color: var(--muted); width: 42%; font-weight: 600; } .download-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0 8px; } /* ── unified live task page (progress → delivery in place) ── */ .task-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .task-top-main { min-width: 0; } .task-top .task-id { margin: 2px 0 0; } .task-panel h2 { margin: 4px 0 2px; } .task-grid { display: grid; grid-template-columns: minmax(0, 1fr) 282px; gap: 24px; margin-top: 16px; align-items: start; } .task-main { min-width: 0; } .task-rail { display: flex; flex-direction: column; gap: 14px; } .task-rail .steps { max-width: none; margin: 0; } .rail-actions { display: flex; flex-direction: column; gap: 10px; } .rail-actions:empty { display: none; } .task-record { margin-top: 18px; } .task-record h3 { font-size: 15px; margin: 0 0 4px; } .task-fineprint { font-size: 12px; margin: 4px 0 0; } /* live task-page document cards (`.tdoc` — distinct from the homepage `.doc-card` showcase). Every ordered doc shows up front as "pending" and flips to "ready". */ .tdoc-cards { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; } .tdoc { display: flex; align-items: center; gap: 12px; text-align: left; min-width: 210px; flex: 1 1 auto; border: 1px solid var(--border); background: var(--surface); border-radius: 14px; padding: 12px 14px; cursor: pointer; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .35s ease, transform .35s ease, border-color .15s ease, background .15s ease; } .tdoc.in { opacity: 1; transform: none; } .tdoc.ready:hover { border-color: var(--brand); background: #f8faff; } [data-theme="dark"] .tdoc.ready:hover { background: #16223c; } .tdoc.pending { cursor: default; } .tdoc.pending:hover { border-color: var(--border); background: var(--surface); } .tdoc.flash { animation: tdocflash .7s ease; } @keyframes tdocflash { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .45); } 100% { box-shadow: 0 0 0 9px rgba(22, 163, 74, 0); } } .tdoc-icon { width: 38px; height: 38px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--soft); color: var(--brand); font-weight: 800; font-size: 11.5px; } .tdoc.ready .tdoc-icon { background: rgba(22, 163, 74, .12); color: var(--accent); } .tdoc.pending .tdoc-icon .spinner { width: 18px; height: 18px; } .tdoc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tdoc-name { font-weight: 700; font-size: 13.5px; color: var(--text); } .tdoc-dl { font-size: 12px; color: var(--brand); font-weight: 600; } .tdoc.pending .tdoc-dl { color: var(--muted); font-weight: 500; } /* inline preview of the combined PDF, animated in when ready */ .pdf-preview { margin-top: 8px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--soft); box-shadow: var(--shadow); opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; } .pdf-preview.in { opacity: 1; transform: none; } .pdf-preview iframe { width: 100%; height: 540px; border: 0; display: block; background: #fff; } /* Safari fallback (WebKit can't inline a blob: PDF) — a one-click open card. Also used inside the per-document lightbox. */ .pdf-fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 320px; height: 540px; padding: 28px; text-align: center; background: var(--soft); } .doc-modal-body .pdf-fallback { height: 100%; } .pdf-fallback-ic { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; letter-spacing: .5px; color: var(--brand); background: rgba(37, 99, 235, .12); } .pdf-fallback-txt { color: var(--muted); font-size: 14px; } .pdf-fallback .pdf-open { cursor: pointer; } /* On wide screens the task page uses more horizontal room AND a taller preview so the branded PDF reads like a real document rather than a thumbnail. */ #view-task .container { max-width: min(1360px, 96vw); } @media (min-width: 1100px) { #view-task .task-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 30px; } .pdf-preview iframe { height: min(760px, calc(100vh - 240px)); } } @media (min-width: 1500px) { #view-task .task-grid { grid-template-columns: minmax(0, 1fr) 340px; } } /* per-document preview lightbox */ .doc-modal { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 28px; background: rgba(2, 6, 23, .62); backdrop-filter: blur(6px); animation: docFade .2s ease; } .doc-modal.hidden { display: none; } @keyframes docFade { from { opacity: 0 } to { opacity: 1 } } .doc-modal-card { width: 100%; max-width: 980px; height: min(88vh, 1000px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: 0 40px 90px -30px rgba(2, 6, 23, .7); animation: docPop .3s cubic-bezier(.2, .8, .2, 1); } @keyframes docPop { from { transform: translateY(14px) scale(.98); opacity: 0 } to { transform: none; opacity: 1 } } .doc-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--soft); } .doc-modal-title { font-weight: 700; font-size: 15px; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .doc-modal-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .doc-modal-dl { padding: 8px 16px; font-size: 13.5px; } .doc-modal-x { background: transparent; border: none; color: var(--muted); font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; } .doc-modal-x:hover { color: var(--text); } .doc-modal-body { flex: 1 1 auto; min-height: 0; background: #fff; position: relative; } .doc-modal-body iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; } .doc-modal-body pre { margin: 0; padding: 18px 20px; height: 100%; overflow: auto; box-sizing: border-box; font: 12.5px/1.6 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: var(--text); white-space: pre-wrap; word-break: break-word; background: var(--surface); } .doc-modal-msg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 100%; padding: 24px; text-align: center; color: var(--muted); font-size: 14px; background: var(--surface); } .doc-modal-spin { display: flex; align-items: center; justify-content: center; height: 100%; } [data-theme="dark"] .doc-modal-body, [data-theme="dark"] .doc-modal-body iframe { background: #0b1220; } @media (max-width: 620px) { .doc-modal { padding: 0; } .doc-modal-card { max-width: 100%; height: 100vh; border-radius: 0; border: 0; } } /* discounted price display in the order summary */ .order-summary .o-strike { color: var(--muted); text-decoration: line-through; opacity: .8; margin-right: 4px; } .order-summary .o-now { color: var(--accent); font-weight: 700; } .order-summary .row-discount { color: var(--accent); font-weight: 600; } .order-summary .row-discount .v { color: var(--accent); } .order-summary .row-total { font-weight: 700; border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; } /* voucher box on the checkout page */ .voucher-box { margin: 14px 0 4px; } .voucher-toggle { background: none; border: none; padding: 0; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--brand); } .voucher-toggle:hover { text-decoration: underline; } .voucher-fields { margin-top: 10px; } .voucher-row { display: flex; gap: 8px; align-items: stretch; } .voucher-row .input { flex: 1 1 auto; text-transform: uppercase; letter-spacing: .04em; } .voucher-row .btn { flex: 0 0 auto; } .voucher-msg { font-size: 13px; margin-top: 7px; min-height: 1em; } .voucher-msg.ok { color: var(--accent); font-weight: 600; } .voucher-msg.err { color: #b91c1c; } [data-theme="dark"] .voucher-msg.err { color: #fca5a5; } /* outage retry banner */ .retry-banner { border: 1px solid #fde68a; background: #fffbeb; color: #92400e; border-radius: 14px; padding: 14px 16px; margin: 10px 0 0; } .retry-head { display: flex; align-items: center; gap: 10px; font-size: 15px; } .retry-head .spinner { width: 16px; height: 16px; border-color: rgba(180, 83, 9, .25); border-top-color: #b45309; } .retry-line { font-size: 14px; margin-top: 6px; font-variant-numeric: tabular-nums; } .retry-note { font-size: 12.5px; opacity: .85; margin-top: 4px; } [data-theme="dark"] .retry-banner { background: #2a2410; border-color: #4d4216; color: #fcd34d; } [data-theme="dark"] .retry-head .spinner { border-color: rgba(252, 211, 77, .25); border-top-color: #fcd34d; } @media (max-width: 860px) { .task-grid { grid-template-columns: 1fr; } .tdoc { flex: 1 1 100%; } .pdf-preview iframe { height: 64vh; } } @media (prefers-reduced-motion: reduce) { .tdoc, .pdf-preview { transition: none; opacity: 1; transform: none; } } /* footer */ .footer { border-top: 1px solid var(--border); background: var(--surface); padding: 40px 0 30px; margin-top: 30px; } .footer-grid { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .footer .muted { color: var(--muted); font-size: 13px; max-width: 320px; } .footer-links { display: flex; gap: 28px; flex-wrap: wrap; } .footer-links a { color: var(--muted); font-size: 13.5px; } .admin-btn { background: none; border: none; color: var(--muted); font-size: 13.5px; cursor: pointer; font-family: inherit; padding: 0; } .admin-btn:hover { color: var(--brand); } .footer-bottom { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12.5px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; } /* footer register-status strip */ .footer-status { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border); } .footer-status-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .footer-status-head h4 { margin: 0; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .footer-status-legend { display: flex; gap: 14px; flex-wrap: wrap; } .fs-key { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); } .fs-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .fs-dot.ok, .fs-flag.ok::after { background: #22c55e; } .fs-dot.partial, .fs-flag.partial::after { background: #f59e0b; } .fs-dot.down, .fs-flag.down::after { background: #ef4444; } .footer-status-flags { display: flex; flex-wrap: wrap; gap: 9px; } .fs-flag { position: relative; font-size: 19px; line-height: 1; cursor: default; filter: saturate(1); padding-bottom: 7px; } .fs-flag.down { opacity: .45; filter: grayscale(.7); } .fs-flag.partial { opacity: .8; } .fs-flag::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg, #0b1120); } /* modal */ .modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.5); display: flex; align-items: center; justify-content: center; z-index: 90; padding: 20px; } .modal { background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); padding: 26px; max-width: 420px; width: 100%; } .modal h3 { margin: 0 0 6px; font-size: 20px; } .modal p { color: var(--muted); font-size: 14px; margin: 0 0 18px; } .modal-close { float: right; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--muted); line-height: 1; } /* ════════════════════════════════════════════════════════════════════ Phase 2 — dark theme, logo, theme toggle, showcase, reveal, responsive ════════════════════════════════════════════════════════════════════ */ /* ── Dark theme tokens (WCAG-AA contrast) ── */ [data-theme="dark"] { --brand: #3b82f6; --brand-dark: #2563eb; --accent: #22c55e; --accent-dark: #16a34a; --bg: #0b1120; --surface: #111a2e; --text: #e8edf6; --muted: #9aa8bd; --border: #243149; --soft: #18233a; --danger: #f87171; --shadow: 0 14px 40px -16px rgba(0, 0, 0, 0.7); --gold: #e6cf86; --gold-soft: rgba(220, 192, 106, 0.16); } [data-theme="dark"] .nav { background: rgba(11, 17, 32, 0.8); } [data-theme="dark"] .result-item:hover { background: #16223c; } [data-theme="dark"] .eyebrow { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.3); } [data-theme="dark"] .notice { background: #2a2410; border-color: #4d4216; color: #fcd34d; } [data-theme="dark"] .input, [data-theme="dark"] .select, [data-theme="dark"] .lang-select { background: var(--soft); } [data-theme="dark"] .check-row, [data-theme="dark"] .order-summary, [data-theme="dark"] .price-card { background: var(--soft); } /* ── Brand logo + theme toggle ── */ .brand-link { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; } .brand-link:hover { text-decoration: none; } .brand-mark { display: block; flex: 0 0 auto; } .brand-logo { display: block; height: 30px; width: auto; } .theme-toggle { background: var(--soft); border: 1px solid var(--border); border-radius: 10px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text); transition: background .15s, color .15s; flex: 0 0 auto; } .theme-toggle:hover { color: var(--brand); } .theme-toggle .ic-moon { display: none; } .theme-toggle .ic-sun { display: inline; } [data-theme="dark"] .theme-toggle .ic-sun { display: none; } [data-theme="dark"] .theme-toggle .ic-moon { display: inline; } /* ── Rotating hero tagline + reveal-on-scroll ── */ .hero p.sub { transition: opacity .5s ease; } .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; } .reveal.in { opacity: 1; transform: none; } /* ── Showcase ── */ .showcase { padding: 24px 0 72px; } .showcase-head { text-align: center; max-width: 640px; margin: 0 auto 34px; } .showcase-head h2 { font-size: clamp(24px, 3.6vw, 36px); letter-spacing: -0.02em; margin: 0 0 10px; } .showcase-head p { color: var(--muted); font-size: 17px; margin: 0; } .showcase-stage { perspective: 1500px; display: flex; justify-content: center; } .doc-stack { position: relative; width: min(580px, 92vw); height: 452px; } .doc-card { position: absolute; inset: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); padding: 28px 30px; overflow: hidden; opacity: 0; transform: translateY(26px) scale(.97) rotateX(4deg); transform-origin: 50% 100%; transition: opacity .7s ease, transform .7s ease; pointer-events: none; } .doc-card.active { opacity: 1; transform: none; pointer-events: auto; } .doc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 2px solid var(--border); padding-bottom: 14px; margin-bottom: 16px; } .doc-reg { display: flex; align-items: center; gap: 11px; min-width: 0; } .doc-flag { font-size: 30px; line-height: 1; } .doc-source { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } .doc-source b { display: block; color: var(--text); font-size: 15px; text-transform: none; letter-spacing: 0; } .doc-badge { background: var(--soft); color: var(--brand); font-weight: 800; font-size: 13px; padding: 7px 12px; border-radius: 8px; font-family: 'JetBrains Mono', ui-monospace, monospace; white-space: nowrap; } .doc-company { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 16px; color: var(--text); } .doc-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; } .doc-k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; } .doc-v { font-size: 14px; font-weight: 600; color: var(--text); } .doc-persons { margin-top: 16px; border-top: 1px dashed var(--border); padding-top: 12px; } .doc-persons .doc-k { margin-bottom: 6px; } .doc-person { font-size: 13.5px; color: var(--text); } .doc-pill { position: absolute; right: 22px; top: 20px; background: var(--accent); color: #fff; font-weight: 800; font-size: 12px; padding: 5px 11px; border-radius: 999px; box-shadow: var(--shadow); } .doc-watermark { position: absolute; bottom: 16px; right: 20px; font-size: 10.5px; color: var(--muted); font-weight: 600; } .showcase-pager { display: flex; gap: 9px; justify-content: center; margin: 24px 0 4px; flex-wrap: wrap; } .pager-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); border: none; cursor: pointer; padding: 0; transition: background .2s, transform .2s; } .pager-dot.active { background: var(--brand); transform: scale(1.3); } .showcase-cta { text-align: center; margin-top: 22px; } .showcase-price { font-size: 17px; color: var(--muted); margin-bottom: 14px; } .showcase-price strong { color: var(--text); font-size: 22px; font-weight: 800; } .showcase-note { color: var(--muted); font-size: 12px; margin-top: 14px; } /* ── Responsive ── */ @media (max-width: 1024px) { .hero { padding: 48px 0 28px; } } @media (max-width: 620px) { .nav-inner { height: 58px; } .brand-logo { height: 26px; } .brand .b, .brand .a, .brand { font-size: 17px; } .nav-right { gap: 8px; } .lang-select { max-width: 116px; padding: 7px 26px 7px 10px; } .hero { padding: 32px 0 18px; } .search-card { padding: 16px; border-radius: 16px; } .search-actions { flex-direction: column; align-items: stretch; } .search-actions .btn { width: 100%; } .contact-actions { flex-direction: column; align-items: stretch; } .contact-actions .btn { width: 100%; } .turnstile-wrap { display: flex; justify-content: center; } .badges { gap: 8px 16px; } .panel { padding: 18px; border-radius: 16px; } .doc-stack { height: 500px; } .doc-rows { grid-template-columns: 1fr; gap: 9px; } .doc-card { padding: 22px 20px; } .price-card { flex-direction: column; align-items: stretch; text-align: center; } .price-card .btn { width: 100%; } .download-row .btn { width: 100%; } .footer-grid { flex-direction: column; gap: 18px; } } @media (min-width: 1280px) { .hero h1 { font-size: 54px; } } /* ════════════════════════════════════════════════════════════════════ Phase 3 — long-form landing: nav links, sections, big mockup, footer ════════════════════════════════════════════════════════════════════ */ html { scroll-behavior: smooth; } .lp [id], #features, #showcase, #coverage, #why, #how, #pricing, #faq, #contact { scroll-margin-top: 84px; } .container-narrow { max-width: 820px; } /* Nav links + CTA + burger */ .nav-inner { gap: 16px; } .nav-links { display: flex; align-items: center; gap: 2px; margin: 0 auto; } .nav-link { position: relative; padding: 8px 12px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; transition: color .18s ease; } .nav-link:hover { color: var(--text); background: var(--soft); text-decoration: none; } /* Animated active-section underline (scrollspy). Brand colour reads well in both light and dark themes. */ .nav-link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--brand); transform: scaleX(0); transform-origin: center; opacity: 0; transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .22s ease; } .nav-link:hover::after { transform: scaleX(.55); opacity: .5; } .nav-link.active { color: var(--brand); background: transparent; } .nav-link.active::after { transform: scaleX(1); opacity: 1; } /* Anchor jumps land below the sticky header. */ .lp { scroll-margin-top: 80px; } .nav-cta { padding: 9px 16px; font-size: 14px; } .nav-burger { display: none; background: var(--soft); border: 1px solid var(--border); border-radius: 10px; width: 38px; height: 38px; align-items: center; justify-content: center; cursor: pointer; color: var(--text); } @media (max-width: 940px) { .nav-links { position: fixed; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--surface); border-bottom: 1px solid var(--border); padding: 10px 16px; box-shadow: var(--shadow); transform: translateY(-130%); transition: transform .28s ease; margin: 0; z-index: 39; } .nav-links.open { transform: translateY(0); } .nav-link { padding: 13px 12px; border-radius: 0; border-bottom: 1px solid var(--border); border-left: 3px solid transparent; } /* In the stacked mobile menu use a left accent bar instead of the underline. */ .nav-link::after { display: none; } .nav-link.active { border-left-color: var(--brand); background: var(--soft); } .nav-cta { display: none; } .nav-burger { display: inline-flex; } } /* Section scaffolding */ .lp { padding: 66px 0; } .lp:nth-of-type(even) { background: var(--soft); } [data-theme="dark"] .lp:nth-of-type(even) { background: #0e1830; } .lp-head { text-align: center; max-width: 700px; margin: 0 auto 42px; } .kicker { display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); background: rgba(37,99,235,.1); border: 1px solid rgba(37,99,235,.2); padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; } .lp-head h2 { font-size: clamp(26px, 4vw, 38px); letter-spacing: -0.025em; margin: 0 0 12px; } .lp-head p { color: var(--muted); font-size: 17px; margin: 0; } /* Feature grid (what you get) */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 900px) { .feature-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .feature-grid { grid-template-columns: 1fr; } } .feature-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px; box-shadow: var(--shadow); } .feature-card.featured { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.12), var(--shadow); } .feature-ic { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--brand), var(--accent)); display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 14px; } .feature-card h3 { font-size: 17px; margin: 0 0 6px; } .feature-card p { color: var(--muted); font-size: 14px; margin: 0; line-height: 1.55; } .feature-flag { font-size: 13px; font-weight: 700; color: var(--accent); margin-top: 10px; display: flex; align-items: center; gap: 6px; } /* Showcase — big A4 mockup */ .showcase-stage { display: flex; justify-content: center; perspective: 1800px; } .doc-paper { width: min(660px, 94vw); aspect-ratio: 1 / 1.414; background: #ffffff; color: #0f172a; border-radius: 12px; box-shadow: 0 30px 70px -28px rgba(15,23,42,.5); border: 1px solid #e6e9ef; padding: clamp(22px, 4vw, 42px); overflow: hidden; position: relative; transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .8s; } /* Smooth country-switch swap */ .doc-paper.swapping { transition: opacity .18s ease, transform .18s ease; opacity: 0; transform: translateY(14px) scale(.985); } @media (prefers-reduced-motion: reduce) { .doc-paper, .doc-paper.swapping { transition: none; } } /* Embedded real sample PDF fills the paper edge-to-edge (no inner padding) */ .doc-paper.embed { padding: 0; background: #f4f6fb; } .doc-embed { width: 100%; height: 100%; border: 0; display: block; background: #fff; border-radius: 12px; } .doc-embed-load { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } /* Open/download the full sample, next to the primary CTA */ .showcase-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 4px 0 0; } /* Country caption above the mockup (updates with the search dropdown) */ .showcase-country { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 16px; font-size: 14px; color: var(--text-muted); } .showcase-country .sc-flag { font-size: 20px; line-height: 1; } .showcase-country .sc-name { font-weight: 800; color: var(--text); } .showcase-country .sc-sep { opacity: .5; } .showcase-country .sc-src { font-weight: 600; } .showcase-stage.in .doc-paper { animation: paperIn 1s cubic-bezier(.2,.7,.2,1) both; } @keyframes paperIn { from { opacity: 0; transform: translateY(40px) rotateX(8deg) scale(.96); } to { opacity: 1; transform: none; } } .doc-pill-top { position: absolute; right: clamp(18px,3vw,34px); top: clamp(18px,3vw,34px); background: var(--accent); color: #fff; font-weight: 800; font-size: 12px; padding: 6px 12px; border-radius: 999px; box-shadow: 0 6px 16px -6px rgba(22,163,74,.6); z-index: 2; } .doc-paper.hrb .doc-pill-top { position: static; display: block; width: fit-content; margin: 0 auto 14px; } /* HRB official document variant — replicates the real Handelsregister AD layout: a 3-column bordered header table + numbered register sections, plain/official. */ .doc-paper.hrb { font-family: "Helvetica Neue", Arial, sans-serif; color: #000; } .hrb-reg { width: 100%; border-collapse: collapse; margin-bottom: 16px; table-layout: fixed; } .hrb-reg td { border: 1px solid #000; padding: 6px 8px; vertical-align: top; font-size: clamp(9.5px,1.5vw,11.5px); line-height: 1.3; } .hrb-reg .hrb-c1 { width: 31%; } .hrb-reg .hrb-c2 { width: 41%; text-align: center; } .hrb-reg .hrb-c3 { width: 28%; text-align: right; } .hrb-reg .hrb-abruf { font-size: .92em; } .hrb-reg .hrb-empty { height: 18px; } .hrb-reg .hrb-page { text-align: center; font-weight: 700; } .hrb-sections { list-style: none; margin: 0; padding: 0; counter-reset: none; } .hrb-sections > li { display: grid; grid-template-columns: 28px 1fr; gap: 6px; margin-bottom: 11px; font-size: clamp(9.5px,1.5vw,11.5px); line-height: 1.4; } .hrb-sections .hrb-n { font-weight: 700; } .hrb-sections .hrb-lbl { font-weight: 700; margin-top: 5px; } .hrb-sections .hrb-lbl:first-child { margin-top: 0; } .hrb-sections .hrb-val { color: #111; } .hrb-more { margin-top: 6px; padding-top: 10px; border-top: 1px dashed #94a3b8; font-size: clamp(10px,1.6vw,12px); font-weight: 700; color: #2563eb; } /* Branded report variant (matches src/pdf/builder.py) */ .rep-head { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #e2e8f0; padding-bottom: 14px; margin-bottom: 16px; font-weight: 800; font-size: 17px; } .rep-head .b { color: #2563eb; } .rep-head .a { color: #16a34a; } .rep-company { font-size: clamp(18px,3vw,24px); font-weight: 800; letter-spacing: -.01em; margin: 6px 0 2px; } .rep-meta { font-size: 12px; color: #64748b; margin-bottom: 18px; } .rep-section { font-size: 12px; font-weight: 800; color: #2563eb; text-transform: uppercase; letter-spacing: .05em; margin: 18px 0 8px; } .rep-rows { display: grid; grid-template-columns: minmax(0, 42%) 1fr; align-items: start; gap: 9px 14px; font-size: clamp(12px,1.8vw,13.5px); } .rep-rows .rk { color: #64748b; min-width: 0; overflow-wrap: anywhere; hyphens: auto; line-height: 1.3; } .rep-rows .rv { color: #0f172a; font-weight: 600; min-width: 0; overflow-wrap: anywhere; } .rep-foot { position: absolute; left: clamp(22px,4vw,42px); right: clamp(22px,4vw,42px); bottom: clamp(18px,3vw,30px); border-top: 1px solid #e2e8f0; padding-top: 8px; font-size: 9.5px; color: #94a3b8; display: flex; justify-content: space-between; } .doc-watermark2 { position: absolute; bottom: clamp(42px,7vw,70px); right: clamp(22px,4vw,42px); font-size: 10.5px; color: #94a3b8; font-weight: 600; } .showcase-cta { text-align: center; margin-top: 28px; } .showcase-price { font-size: 17px; color: var(--muted); margin-bottom: 14px; } .showcase-price strong { color: var(--text); font-size: 22px; font-weight: 800; } .showcase-note { color: var(--muted); font-size: 12px; margin-top: 14px; } /* German courts marquee */ .courts-strip { margin-top: 34px; text-align: center; } .courts-title { font-size: 13.5px; font-weight: 700; color: var(--muted); margin-bottom: 14px; } .courts-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .courts-track { display: inline-flex; gap: 10px; white-space: nowrap; animation: marquee 42s linear infinite; } .courts-track:hover { animation-play-state: paused; } .court-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px 7px 11px; font-size: 13px; font-weight: 600; color: var(--text); } .court-chip .ct-seal { width: 18px; height: 18px; flex: 0 0 auto; color: var(--brand); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Coverage grid */ .coverage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 900px) { .coverage-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .coverage-grid { grid-template-columns: 1fr 1fr; } } .cov-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px; box-shadow: var(--shadow); position: relative; } .cov-price { position: absolute; top: 16px; right: 16px; font-size: 13px; font-weight: 800; color: var(--brand); background: rgba(37,99,235,.10); border: 1px solid rgba(37,99,235,.20); border-radius: 999px; padding: 4px 11px; } .cov-card.featured { grid-column: span 2; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.12), var(--shadow); } @media (max-width: 640px) { .cov-card.featured { grid-column: span 2; } } .cov-flag { font-size: 26px; } .cov-name { font-weight: 800; font-size: 15px; margin: 8px 0 4px; } .cov-tier { margin: 2px 0 6px; } .cov-src { font-size: 12px; color: var(--muted); } /* Inactive = not currently orderable (self-test not yet green, or a transient outage). Mirror the combobox disabled-row treatment: dimmed + desaturated, but still showing the tier pill + price so the breadth/price stays legible. */ .cov-card.inactive { opacity: .55; box-shadow: none; background: var(--soft); border-style: dashed; } .cov-card.inactive .cov-tier { filter: grayscale(1); opacity: .9; } .cov-card.inactive .cov-price { color: var(--muted); background: var(--soft); border-color: var(--border); } .cov-unavail { display: inline-block; margin: 8px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--muted); background: var(--soft); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; } .cov-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .cov-tag { font-size: 11px; font-weight: 600; color: var(--accent); background: rgba(22,163,74,.1); border-radius: 6px; padding: 3px 8px; } .cov-pdf { font-size: 11.5px; font-weight: 700; color: var(--brand); margin-top: 10px; } /* Why grid */ .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 900px) { .why-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .why-grid { grid-template-columns: 1fr; } } .why-card { display: flex; gap: 14px; align-items: flex-start; } .why-ic { width: 40px; height: 40px; border-radius: 11px; background: var(--soft); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--brand); flex: 0 0 auto; } .why-card h3 { font-size: 16px; margin: 2px 0 4px; } .why-card p { color: var(--muted); font-size: 13.5px; margin: 0; } /* Steps */ .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } @media (max-width: 700px) { .steps-grid { grid-template-columns: 1fr; } } .step-card { text-align: center; } .step-num { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--accent)); color: #fff; font-weight: 800; font-size: 22px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; box-shadow: var(--shadow); } .step-card h3 { font-size: 17px; margin: 0 0 6px; } .step-card p { color: var(--muted); font-size: 14px; margin: 0; } /* Pricing */ .pricing-card { max-width: 460px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); padding: 32px; text-align: center; } .pricing-price { font-size: 52px; font-weight: 800; letter-spacing: -.03em; } .pricing-price small { font-size: 15px; color: var(--muted); font-weight: 600; } .pricing-list { list-style: none; padding: 0; margin: 22px 0; text-align: left; display: flex; flex-direction: column; gap: 11px; } .pricing-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; } .pricing-list li::before { content: "✓"; color: var(--accent); font-weight: 800; flex: 0 0 auto; } .pricing-note { font-size: 12.5px; color: var(--muted); margin-top: 14px; } /* ── Tier pills (Premium = gold, Basic = brand blue) ───────────────────────── */ .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; } .tier-pill { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; line-height: 1; padding: 4px 9px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; } .tier-pill .tp-ic { font-size: 9px; line-height: 1; } .tier-basic { color: var(--brand); background: rgba(37,99,235,.10); border-color: rgba(37,99,235,.22); } [data-theme="dark"] .tier-basic { background: rgba(59,130,246,.16); border-color: rgba(59,130,246,.32); } .tier-premium { position: relative; overflow: hidden; color: #6b531a; background: linear-gradient(135deg, #fbf3d3, #f3e1a0 48%, #e9cf78); border-color: rgba(176,138,30,.55); box-shadow: 0 1px 2px rgba(176,138,30,.22), inset 0 1px 0 rgba(255,255,255,.55); } [data-theme="dark"] .tier-premium { color: #1b1407; background: linear-gradient(135deg, #f0dd9a, #dcc06a 48%, #c2a23f); border-color: rgba(220,192,106,.55); } /* slow luxury shine sweep across the gold pill */ .tier-premium::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.7) 50%, transparent 70%); background-size: 260% 100%; background-position: 200% 0; animation: tierShine 4s ease-in-out infinite; } @keyframes tierShine { 0%, 55% { background-position: 200% 0; } 100% { background-position: -140% 0; } } /* ── Custom country combobox (replaces native