/* wildcat kit base design system. Theme tokens (--primary, --accent, fonts) are injected per site in . */ :root { --bg: #ffffff; --bg-soft: #f6f7f9; --surface: #ffffff; --text: #16181d; --muted: #5b6270; --border: #e3e6eb; --primary-ink: #ffffff; --primary-soft: color-mix(in srgb, var(--primary) 9%, #fff); --accent-soft: color-mix(in srgb, var(--accent) 14%, #fff); --link: color-mix(in srgb, var(--primary) 85%, #000); --ok: #117a43; --ok-soft: #e6f5ec; --bad: #b42318; --bad-soft: #fdecea; --warn-soft: #fff6e0; --radius: 12px; --radius-sm: 8px; --shadow: 0 1px 2px rgba(16,24,40,.05), 0 6px 20px rgba(16,24,40,.06); --maxw: 1160px; --prosew: 740px; color-scheme: light dark; } @media (prefers-color-scheme: dark) { :root { --bg: #0f1115; --bg-soft: #161a20; --surface: #171b22; --text: #e8eaee; --muted: #a2a9b6; --border: #2a303a; --primary-soft: color-mix(in srgb, var(--primary) 18%, #0f1115); --accent-soft: color-mix(in srgb, var(--accent) 20%, #0f1115); --link: color-mix(in srgb, var(--primary) 55%, #fff); --ok-soft: #10301f; --bad-soft: #3a1512; --warn-soft: #33290f; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35); } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body), system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 17px; line-height: 1.65; } img { max-width: 100%; height: auto; } a { color: var(--link); text-underline-offset: 2px; } h1, h2, h3, h4 { font-family: var(--font-heading), var(--font-body), system-ui, sans-serif; line-height: 1.22; letter-spacing: -.01em; margin: 1.6em 0 .55em; } h1 { font-size: clamp(1.9rem, 4.2vw, 2.8rem); margin-top: .2em; } h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); } h3 { font-size: 1.2rem; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } .prose-w { max-width: var(--prosew); } .skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; background: var(--surface); padding: 8px; z-index: 99; } .visually-hidden, .hp-field { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* header */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.6) blur(10px); border-bottom: 1px solid var(--border); } .site-header .container { display: flex; align-items: center; gap: 20px; min-height: 64px; } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-heading), sans-serif; font-weight: 800; font-size: 1.12rem; color: var(--text); text-decoration: none; } .brand-mark { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--primary), var(--accent)); display: grid; place-items: center; color: #fff; font-size: .9rem; } .nav { display: flex; gap: 4px; margin-left: auto; align-items: center; } .nav a { color: var(--text); text-decoration: none; font-size: .95rem; font-weight: 500; padding: 8px 12px; border-radius: 8px; } .nav a:hover, .nav a[aria-current="page"] { background: var(--bg-soft); } .nav .btn { margin-left: 8px; } .nav a.btn, .nav a.btn:hover { color: var(--primary-ink); background: var(--primary); } .nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; color: var(--text); font-size: 1rem; } @media (max-width: 860px) { .nav-toggle { display: block; } .nav { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--bg); border-bottom: 1px solid var(--border); padding: 8px 16px 16px; } .nav.open { display: flex; } .nav .btn { margin: 8px 0 0; text-align: center; } } /* buttons */ .btn { display: inline-block; border: 0; cursor: pointer; font: inherit; font-weight: 650; font-size: .98rem; padding: 11px 20px; border-radius: 10px; text-decoration: none; background: var(--primary); color: var(--primary-ink); transition: transform .08s ease, filter .15s; line-height: 1.3; } .btn:hover { filter: brightness(1.08); } .btn:active { transform: translateY(1px); } .btn-accent { background: var(--accent); color: #fff; } .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); } .btn-lg { padding: 14px 26px; font-size: 1.05rem; } .btn[disabled] { opacity: .55; cursor: default; } /* breadcrumbs */ .breadcrumbs { font-size: .86rem; color: var(--muted); padding: 14px 0 0; } .breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .breadcrumbs li + li::before { content: "/"; margin-right: 6px; opacity: .5; } .breadcrumbs a { color: var(--muted); text-decoration: none; } .breadcrumbs a:hover { color: var(--text); } /* hero */ .hero { padding: 36px 0 26px; } .hero.hero-home { padding: 64px 0 48px; background: radial-gradient(1200px 400px at 10% -10%, var(--primary-soft), transparent), radial-gradient(900px 400px at 100% 0, var(--accent-soft), transparent); border-bottom: 1px solid var(--border); } .eyebrow { display: inline-block; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--primary); background: var(--primary-soft); padding: 4px 10px; border-radius: 999px; } .hero .lede { font-size: 1.15rem; color: var(--muted); max-width: 720px; margin: 0 0 22px; } .hero-actions { display: flex; gap: 10px; flex-wrap: wrap; } .meta-line { font-size: .86rem; color: var(--muted); margin-top: 14px; } /* layout */ .page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; padding-bottom: 60px; } .page-grid.no-aside { grid-template-columns: minmax(0, 1fr); } @media (max-width: 980px) { .page-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; } } .aside-sticky { position: sticky; top: 84px; display: grid; gap: 16px; } .toc { font-size: .9rem; } .toc ol { padding-left: 18px; margin: 6px 0 0; } .toc a { color: var(--muted); text-decoration: none; } .toc a:hover { color: var(--text); } @media (max-width: 980px) { aside.page-aside { order: 2; } .aside-sticky { position: static; } } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); } .card h3:first-child, .card h2:first-child { margin-top: 0; } .section { margin: 0 0 8px; } .prose > :first-child { margin-top: 0; } .prose ul, .prose ol { padding-left: 1.3em; } .prose li { margin: .25em 0; } .prose blockquote { margin: 1em 0; padding: .6em 1em; border-left: 4px solid var(--primary); background: var(--bg-soft); border-radius: 0 8px 8px 0; } .prose code { background: var(--bg-soft); padding: 1px 5px; border-radius: 5px; font-size: .92em; } .prose table, table.data { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 1em 0; } .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); margin: 1em 0; } .table-wrap table { margin: 0; } th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; } th { background: var(--bg-soft); font-weight: 650; font-size: .9rem; } tr:last-child td { border-bottom: 0; } td.hl, th.hl { background: var(--primary-soft); } caption { caption-side: bottom; font-size: .82rem; color: var(--muted); padding: 8px; text-align: left; } .key-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 1em 0; } .key-facts .fact { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; } .fact .label { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 650; } .fact .value { font-size: 1.2rem; font-weight: 750; font-family: var(--font-heading), sans-serif; } .steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: 12px; } .steps li { counter-increment: step; position: relative; padding: 14px 16px 14px 58px; background: var(--bg-soft); border-radius: var(--radius-sm); border: 1px solid var(--border); } .steps li::before { content: counter(step); position: absolute; left: 14px; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .9rem; } .steps strong { display: block; } .callout { padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-soft); margin: 1em 0; } .callout.info { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 30%, transparent); } .callout.warn { background: var(--warn-soft); border-color: #e9c46a55; } .callout > :first-child { margin-top: 0; } .callout > :last-child { margin-bottom: 0; } /* grids of links/cards */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 1em 0; } .link-card { display: block; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; transition: border-color .15s, transform .1s; } .link-card:hover { border-color: var(--primary); transform: translateY(-1px); } .link-card .t { font-weight: 680; display: block; margin-bottom: 4px; } .link-card .d { font-size: .9rem; color: var(--muted); } .link-card .tag { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--primary); font-weight: 700; } /* CTA block */ .cta-block { margin: 28px 0; padding: 26px; border-radius: var(--radius); background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 60%, var(--accent))); color: #fff; } .cta-block h2, .cta-block h3 { color: #fff; margin-top: 0; } .cta-block p { opacity: .93; } .cta-block .btn { background: #fff; color: var(--primary); } .cta-block.soft { background: var(--primary-soft); color: var(--text); border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); } .cta-block.soft h2, .cta-block.soft h3 { color: var(--text); } .cta-block.soft .btn { background: var(--primary); color: #fff; } /* pricing */ .pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin: 1.2em 0; } .plan { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; } .plan.highlight { border: 2px solid var(--primary); box-shadow: var(--shadow); } .plan .badge { position: absolute; top: -12px; left: 20px; background: var(--primary); color: #fff; font-size: .75rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; } .plan .name { font-weight: 700; font-size: 1.05rem; } .plan .price { font-family: var(--font-heading), sans-serif; font-size: 2.2rem; font-weight: 800; margin: 6px 0 2px; } .plan .period { font-size: .9rem; color: var(--muted); } .plan ul { list-style: none; padding: 0; margin: 16px 0 20px; flex: 1; font-size: .95rem; } .plan li { padding: 5px 0 5px 24px; position: relative; } .plan li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 12px; height: 7px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); } /* FAQ */ .faq details { border: 1px solid var(--border); border-radius: var(--radius-sm); margin: 10px 0; background: var(--surface); } .faq summary { cursor: pointer; padding: 14px 44px 14px 16px; font-weight: 640; list-style: none; position: relative; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 16px; top: 11px; font-size: 1.3rem; color: var(--muted); } .faq details[open] summary::after { content: "\2212"; } .faq .a { padding: 0 16px 14px; } .faq .a > :first-child { margin-top: 0; } /* sources */ .sources ol { font-size: .9rem; color: var(--muted); padding-left: 1.3em; } .sources li { margin: 4px 0; word-break: break-word; } /* forms */ .form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); margin: 1.2em 0; } .form-card h2, .form-card h3 { margin-top: 0; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; } .form-grid .full { grid-column: 1 / -1; } @media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } } label.fl { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 4px; } input[type=text], input[type=email], input[type=tel], input[type=number], input[type=url], select, textarea { width: 100%; font: inherit; font-size: 1rem; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--text); } input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent); border-color: var(--primary); } textarea { min-height: 100px; resize: vertical; } .form-note { font-size: .8rem; color: var(--muted); margin: 10px 0 0; } .form-success { display: none; padding: 16px; border-radius: var(--radius-sm); background: var(--ok-soft); color: var(--ok); font-weight: 600; } .form-error { color: var(--bad); font-size: .9rem; margin-top: 8px; display: none; } form.sent .form-grid, form.sent .form-actions, form.sent .form-note { display: none; } form.sent .form-success { display: block; } .form-actions { margin-top: 14px; } /* quiz */ .quiz { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); margin: 1.2em 0; } .quiz-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; } .quiz-head h3 { margin: 0; } .quiz-progress { height: 6px; background: var(--bg-soft); border-radius: 99px; overflow: hidden; margin: 14px 0 18px; } .quiz-progress span { display: block; height: 100%; background: var(--primary); width: 0; transition: width .25s; } .quiz-q { font-weight: 640; font-size: 1.08rem; margin-bottom: 14px; } .quiz-choices { display: grid; gap: 8px; } .quiz-choice { text-align: left; font: inherit; padding: 12px 14px; border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 10px; cursor: pointer; display: flex; gap: 10px; } .quiz-choice:hover:not([disabled]) { border-color: var(--primary); } .quiz-choice .k { font-weight: 700; color: var(--muted); min-width: 1.2em; } .quiz-choice.correct { border-color: var(--ok); background: var(--ok-soft); } .quiz-choice.wrong { border-color: var(--bad); background: var(--bad-soft); } .quiz-choice[disabled] { cursor: default; } .quiz-expl { margin-top: 14px; padding: 12px 14px; background: var(--bg-soft); border-radius: 10px; font-size: .95rem; display: none; } .quiz-expl.show { display: block; } .quiz-nav { margin-top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; } .quiz-score { text-align: center; padding: 10px 0; } .quiz-score .big { font-size: 3rem; font-weight: 800; font-family: var(--font-heading), sans-serif; color: var(--primary); } .quiz-topics { font-size: .92rem; margin: 10px auto; max-width: 420px; text-align: left; } .quiz-topics div { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--border); padding: 4px 0; } .paywall { margin-top: 18px; padding: 22px; border-radius: var(--radius); background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); text-align: center; } .paywall h4 { margin: 0 0 6px; font-size: 1.2rem; } /* calculator */ .calc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); margin: 1.2em 0; } .calc h3 { margin-top: 0; } .calc-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; } @media (max-width: 600px) { .calc-inputs { grid-template-columns: 1fr; } } .calc .help { font-size: .8rem; color: var(--muted); } .calc-out { display: none; margin-top: 18px; padding: 18px; background: var(--primary-soft); border-radius: var(--radius-sm); } .calc-out.show { display: block; } .calc-out .row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed color-mix(in srgb, var(--primary) 25%, transparent); } .calc-out .row:last-child { border-bottom: 0; } .calc-out .row.main .v { font-size: 1.5rem; font-weight: 800; color: var(--primary); font-family: var(--font-heading), sans-serif; } .calc-out .v { font-weight: 700; text-align: right; } .calc-disclaimer { font-size: .8rem; color: var(--muted); margin-top: 10px; } /* modal */ .wc-modal { position: fixed; inset: 0; background: rgba(10,12,16,.55); display: none; align-items: center; justify-content: center; z-index: 100; padding: 16px; } .wc-modal.open { display: flex; } .wc-modal .box { background: var(--surface); color: var(--text); border-radius: var(--radius); max-width: 460px; width: 100%; padding: 24px; position: relative; box-shadow: var(--shadow); } .wc-modal .x { position: absolute; right: 12px; top: 8px; background: none; border: 0; font-size: 1.5rem; color: var(--muted); cursor: pointer; } /* footer */ .site-footer { border-top: 1px solid var(--border); background: var(--bg-soft); padding: 40px 0 28px; font-size: .92rem; color: var(--muted); margin-top: 40px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 28px; } @media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } } .site-footer h4 { color: var(--text); font-size: .9rem; margin: 0 0 10px; text-transform: uppercase; letter-spacing: .06em; } .site-footer ul { list-style: none; padding: 0; margin: 0; } .site-footer li { margin: 5px 0; } .site-footer a { color: var(--muted); text-decoration: none; } .site-footer a:hover { color: var(--text); } .footer-legal { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--border); font-size: .82rem; } .center { text-align: center; } .mt0 { margin-top: 0; } .muted { color: var(--muted); }