/* ───────────────────────────────────────────────────────────────────────────── Klaar · call-to-action parity One shape and one style for every CTA on the site, taken from the homepage hero button: a coral pill with white type, going to the deeper coral on hover. Linked last in so it wins over each page's own button rules; the selectors are deliberately id-doubled because the page styles reach `#page#page#page` / `#dc-root#dc-root` specificity with !important of their own. Text CTAs are deliberately NOT touched: .pw-cta, .out-cta and .area-cta are underlined links, not buttons, and keep their own treatment. ───────────────────────────────────────────────────────────────────────── */ :root{ --klaar-cta-fill:#FF6B6B; --klaar-cta-fill-hover:#E0504F; --klaar-cta-ink:#FFFFFF; } /* ── the pill: shape, fill and type ───────────────────────────────────────── */ html body .btn, html body .btn--lg, html body .btn--hero, html body .cta, html body a.cta, html body .kcta-btn, html body .fcta-btn, html body .mig-btn, html body #page#page#page#page .btn, html body #page#page#page#page .btnrow .btn, html body #page#page#page#page .hero-row .btn, html body #page#page#page#page .cta, html body #page#page#page#page a.cta, html body #page#page#page#page .kcta-btn, html body #page#page#page#page .fcta-btn, html body #page#page#page#page .mig-btn, html body #shell #page#page#page#page .btn, html body #shell #page#page#page#page .kcta-btn, html body #shell #page#page#page#page .fcta-btn, html body #page#page#page#page#page .kcta .kcta-btn, html body #page#page#page#page#page .fcta .fcta-btn, html body #shell #page#page#page#page#page .kcta .kcta-btn, html body #shell #page#page#page#page#page .fcta .fcta-btn, html body #dc-root#dc-root#dc-root#dc-root .btn, html body #dc-root#dc-root#dc-root#dc-root a.cta, html body #dc-root#dc-root#dc-root#dc-root .kcta-btn, html body #dc-root#dc-root#dc-root#dc-root .fcta-btn, html body #dc-root#dc-root#dc-root#dc-root .mig-btn, html body #dc-root#dc-root#dc-root#dc-root#dc-root .kcta .kcta-btn, html body #dc-root#dc-root#dc-root#dc-root#dc-root .fcta .fcta-btn, html body #dc-root#dc-root#dc-root#dc-root .sc-host section.hkw2 .close .cta { border-radius: 999px !important; background: var(--klaar-cta-fill) !important; background-color: var(--klaar-cta-fill) !important; background-image: none !important; border: 1px solid var(--klaar-cta-fill) !important; color: var(--klaar-cta-ink) !important; box-shadow: none !important; text-decoration: none !important; transition: background .2s ease, border-color .2s ease, color .2s ease !important; /* one size floor everywhere, so no CTA falls under a 52px touch target; min-height leaves the taller hero button at its own height */ display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; min-height: 52px !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 32px !important; padding-right: 32px !important; font-weight: 600 !important; } /* ── hover and press ──────────────────────────────────────────────────────── */ html body .btn:hover, html body .btn--lg:hover, html body .btn--hero:hover, html body .cta:hover, html body a.cta:hover, html body .kcta-btn:hover, html body .fcta-btn:hover, html body .mig-btn:hover, html body #page#page#page#page .btn:hover, html body #page#page#page#page .cta:hover, html body #page#page#page#page a.cta:hover, html body #page#page#page#page .kcta-btn:hover, html body #page#page#page#page .fcta-btn:hover, html body #page#page#page#page .mig-btn:hover, html body #shell #page#page#page#page .btn:hover, html body #shell #page#page#page#page .kcta-btn:hover, html body #page#page#page#page#page .kcta .kcta-btn:hover, html body #page#page#page#page#page .fcta .fcta-btn:hover, html body #shell #page#page#page#page#page .kcta .kcta-btn:hover, html body #dc-root#dc-root#dc-root#dc-root .btn:hover, html body #dc-root#dc-root#dc-root#dc-root a.cta:hover, html body #dc-root#dc-root#dc-root#dc-root .kcta-btn:hover, html body #dc-root#dc-root#dc-root#dc-root .fcta-btn:hover, html body #dc-root#dc-root#dc-root#dc-root .mig-btn:hover, html body #dc-root#dc-root#dc-root#dc-root#dc-root .kcta .kcta-btn:hover, html body #dc-root#dc-root#dc-root#dc-root#dc-root .fcta .fcta-btn:hover { background: var(--klaar-cta-fill-hover) !important; background-color: var(--klaar-cta-fill-hover) !important; border-color: var(--klaar-cta-fill-hover) !important; color: var(--klaar-cta-ink) !important; } /* the trailing arrow inherits the label colour and travels on hover */ html body .btn svg, html body .cta svg, html body a.cta svg, html body .kcta-btn svg, html body .fcta-btn svg, html body .mig-btn svg, html body #page#page#page#page .btn svg, html body #page#page#page#page a.cta svg, html body #page#page#page#page .kcta-btn svg, html body #dc-root#dc-root#dc-root#dc-root .btn svg, html body #dc-root#dc-root#dc-root#dc-root a.cta svg, html body #dc-root#dc-root#dc-root#dc-root .kcta-btn svg { color: currentColor !important; transition: transform .24s cubic-bezier(.2,.7,.3,1) !important; } html body .btn:hover svg, html body .cta:hover svg, html body a.cta:hover svg, html body .kcta-btn:hover svg, html body .fcta-btn:hover svg, html body .mig-btn:hover svg { transform: translateX(4px) !important; } /* keyboard focus stays visible on the coral pill */ html body .btn:focus-visible, html body .cta:focus-visible, html body a.cta:focus-visible, html body .kcta-btn:focus-visible, html body .fcta-btn:focus-visible, html body .mig-btn:focus-visible { outline: 2px solid #2A2A2E !important; outline-offset: 3px !important; } /* the module-page "explore" link is a text link, not a pill */ html body .area-cta, html body #page#page#page#page .area-cta { background: none !important; background-color: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; color: #A83C3C !important; } html body .area-cta:hover, html body #page#page#page#page .area-cta:hover { background: none !important; background-color: transparent !important; color: var(--klaar-cta-fill) !important; } @media (prefers-reduced-motion: reduce) { html body .btn, html body .cta, html body a.cta, html body .kcta-btn, html body .fcta-btn, html body .mig-btn { transition: none !important; } html body .btn:hover svg, html body .cta:hover svg, html body a.cta:hover svg, html body .kcta-btn:hover svg { transform: none !important; } } /* ───────────────────────────────────────────────────────────────────────────── Closing section parity Every page ends on the homepage treatment: a 52px Fraunces headline over a 22px sub, on no ground of its own so it shares the section above it. ───────────────────────────────────────────────────────────────────────── */ html body #page#page#page#page .kcta, html body #page#page#page#page .fcta, html body #shell #page#page#page#page .kcta, html body #dc-root#dc-root#dc-root#dc-root .kcta, html body #dc-root#dc-root#dc-root#dc-root .fcta { background: transparent !important; background-color: transparent !important; padding: 96px 0 !important; } html body #page#page#page#page .kcta-h, html body #page#page#page#page .fcta-h, html body #page#page#page#page .kcta-h .kcta-line, html body #page#page#page#page .fcta-h .fcta-line, html body #page#page#page#page .kcta-h em, html body #shell #page#page#page#page .kcta-h, html body #shell #page#page#page#page .kcta-h .kcta-line, html body #shell #page#page#page#page .kcta-h em, html body #dc-root#dc-root#dc-root#dc-root .kcta-h, html body #dc-root#dc-root#dc-root#dc-root .fcta-h, html body #dc-root#dc-root#dc-root#dc-root .kcta-h .kcta-line, html body #dc-root#dc-root#dc-root#dc-root .fcta-h .fcta-line { font-family: "Fraunces", Georgia, serif !important; font-size: 52px !important; line-height: 1.04 !important; letter-spacing: -.028em !important; font-weight: 600 !important; } html body #page#page#page#page .kcta-sub, html body #page#page#page#page .fcta-sub, html body #shell #page#page#page#page .kcta-sub, html body #dc-root#dc-root#dc-root#dc-root .kcta-sub, html body #dc-root#dc-root#dc-root#dc-root .fcta-sub { font-size: 22px !important; line-height: 34px !important; } @media (max-width: 900px) { html body #page#page#page#page .kcta-h, html body #page#page#page#page .fcta-h, html body #page#page#page#page .kcta-h .kcta-line, html body #shell #page#page#page#page .kcta-h, html body #dc-root#dc-root#dc-root#dc-root .kcta-h { font-size: clamp(32px, 7vw, 52px) !important; } } /* ───────────────────────────────────────────────────────────────────────────── Paragraph rhythm The pages mix two ways of separating sentences: sibling paragraphs and a double
inside one paragraph. Both resolve to the same gap, so spacing reads evenly whichever way a section was authored. ───────────────────────────────────────────────────────────────────────── */ html body #page#page#page#page .lead + .lead, html body #page#page#page#page .lede + .lede, html body #page#page#page#page .body + .body, html body #page#page#page#page .hlead + .hlead, html body #page#page#page#page .intro + .intro, html body #dc-root#dc-root#dc-root .lead + .lead, html body #dc-root#dc-root#dc-root .lede + .lede, html body #dc-root#dc-root#dc-root .intro + .intro { margin-top: 18px !important; } html body #page .lead br + br, html body #page .lede br + br, html body #page .body br + br, html body #page .hlead br + br, html body #page .claim br + br, html body #page .gscout__deck br + br, html body #page .gscout__intro br + br, html body #page .shero__deck br + br, html body #page .scb-card-b br + br, html body #page .pw-band-p br + br, html body #dc-root .lead br + br, html body #dc-root .lede br + br, html body #dc-root .intro br + br { content: "" !important; display: block !important; height: 18px !important; line-height: 0 !important; } html body .area-cta, html body #page#page#page#page .area-cta{ min-height:0 !important; padding:0 !important; gap:6px !important} /* ───────────────────────────────────────────────────────────────────────── Secondary CTAs .btn--ghost, .btn--outline, .fcta-alt and .cta-alt are the second action next to a primary. They take the same pill shape and size but stay outlined, so the hierarchy between the two buttons survives. ───────────────────────────────────────────────────────────────────────── */ html body .knv-btn, html body .knv-btn--ghost, html body .btn--ghost, html body .btn--outline, html body .fcta-alt, html body .cta-alt, html body #page#page#page#page .btn--ghost, html body #page#page#page#page .btn--outline, html body #shell #page#page#page#page .btn--ghost, html body #shell #page#page#page#page .btn--outline, html body #dc-root#dc-root#dc-root#dc-root .btn--ghost, html body #dc-root#dc-root#dc-root#dc-root .btn--outline, html body #dc-root#dc-root#dc-root#dc-root .fcta-alt, html body #dc-root#dc-root#dc-root#dc-root .cta-alt{ background:transparent !important; background-color:transparent !important; background-image:none !important; border:1px solid rgba(42,42,46,.24) !important; color:#2A2A2E !important; box-shadow:none !important} html body .knv-btn:hover, html body .knv-btn--ghost:hover, html body .btn--ghost:hover, html body .btn--outline:hover, html body .fcta-alt:hover, html body .cta-alt:hover, html body #page#page#page#page .btn--ghost:hover, html body #page#page#page#page .btn--outline:hover, html body #shell #page#page#page#page .btn--ghost:hover, html body #dc-root#dc-root#dc-root#dc-root .btn--ghost:hover, html body #dc-root#dc-root#dc-root#dc-root .btn--outline:hover, html body #dc-root#dc-root#dc-root#dc-root .fcta-alt:hover, html body #dc-root#dc-root#dc-root#dc-root .cta-alt:hover{ background:transparent !important; background-color:transparent !important; border-color:var(--klaar-cta-fill) !important; color:var(--klaar-cta-fill-hover) !important} /* the mobile-menu CTA is already a coral pill; it only needs the size floor */ html body #knv-mobmenu .mm-cta{ border-radius:999px !important; min-height:52px !important; background:var(--klaar-cta-fill) !important; color:#FFFFFF !important} /* the header button carries its own 38px height, so the pill shape and the size floor have to override height, not just min-height */ html body .knv-btn, html body .knv-btn--ghost, html body #knv-nav .knv-navact .knv-btn, html body #dc-root#dc-root#dc-root#dc-root .knv-btn{ display:inline-flex !important; align-items:center !important; justify-content:center !important; border-radius:999px !important; height:auto !important; min-height:44px !important; padding:0 22px !important; background:transparent !important; background-color:transparent !important; border:1px solid rgba(42,42,46,.26) !important; color:#2A2A2E !important; box-shadow:none !important; transition:background .2s ease,border-color .2s ease,color .2s ease !important} html body .knv-btn:hover, html body .knv-btn--ghost:hover, html body #knv-nav .knv-navact .knv-btn:hover, html body #dc-root#dc-root#dc-root#dc-root .knv-btn:hover{ background:transparent !important; background-color:transparent !important; border-color:var(--klaar-cta-fill) !important; color:var(--klaar-cta-hover-ink,#C8403F) !important} /* ───────────────────────────────────────────────────────────────────────── Size and arrow One larger floor for every CTA, with hero buttons a step up again. The explicit heights the pages set are released to auto so min-height governs, and any button without its own arrow svg gets one from ::after. ───────────────────────────────────────────────────────────────────────── */ html body .btn, html body .cta, html body a.cta, html body .kcta-btn, html body .fcta-btn, html body .mig-btn, html body #page#page#page#page .btn, html body #page#page#page#page .cta, html body #page#page#page#page a.cta, html body #page#page#page#page .kcta-btn, html body #page#page#page#page .fcta-btn, html body #page#page#page#page .mig-btn, html body #shell #page#page#page#page .btn, html body #shell #page#page#page#page .kcta-btn, html body #page#page#page#page#page .kcta .kcta-btn, html body #shell #page#page#page#page#page .kcta .kcta-btn, html body #dc-root#dc-root#dc-root#dc-root .btn, html body #dc-root#dc-root#dc-root#dc-root a.cta, html body #dc-root#dc-root#dc-root#dc-root .kcta-btn, html body #dc-root#dc-root#dc-root#dc-root .fcta-btn{ height:auto !important; min-height:64px !important; padding-left:38px !important; padding-right:38px !important; font-size:19px !important} /* hero CTAs take the larger step */ html body #page#page#page#page .page-hero .btn, html body #page#page#page#page .hero-row .btn, html body #page#page#page#page .hero .btn, html body #shell #page#page#page#page .page-hero .btn, html body #shell #page#page#page#page .hero-row .btn, html body #dc-root#dc-root#dc-root#dc-root .hero-in a.cta, html body #dc-root#dc-root#dc-root#dc-root .hero .btn{ min-height:88px !important; font-size:22px !important; padding-left:46px !important; padding-right:46px !important} /* the arrow: only on buttons that do not already carry one */ html body .btn:not(:has(svg)):not(:has(i))::after, html body .cta:not(:has(svg)):not(:has(i))::after, html body a.cta:not(:has(svg)):not(:has(i))::after, html body .kcta-btn:not(:has(svg)):not(:has(i))::after, html body .fcta-btn:not(:has(svg)):not(:has(i))::after, html body .mig-btn:not(:has(svg)):not(:has(i))::after{ content:"→" !important; display:inline-block !important; font-size:1.05em !important; line-height:1 !important; transform:translateX(0) !important; transition:transform .24s cubic-bezier(.2,.7,.3,1) !important} html body .btn:not(:has(svg)):not(:has(i)):hover::after, html body .cta:not(:has(svg)):not(:has(i)):hover::after, html body a.cta:not(:has(svg)):not(:has(i)):hover::after, html body .kcta-btn:not(:has(svg)):not(:has(i)):hover::after, html body .fcta-btn:not(:has(svg)):not(:has(i)):hover::after, html body .mig-btn:not(:has(svg)):not(:has(i)):hover::after{ transform:translateX(4px) !important} /* the nav and text links keep their own scale */ html body .knv-btn, html body .knv-btn--ghost{ min-height:44px !important; font-size:15px !important; padding-left:22px !important; padding-right:22px !important} html body .knv-btn::after, html body .area-cta::after, html body .pw-cta::after, html body .out-cta::after{content:none !important}