/* Ranger Buddies site chrome - header + footer. EXTRACTED from the demo's styles.css by bin/port-demo-assets.sh. Do not hand-edit: regenerate instead, or the next pull silently reverts you. 42 rem values converted to px at the demo's 16px base. Font URLs are relative to THIS file: keep it beside web-assets/. */ @font-face{font-family:Arco;src:url('web-assets/arco.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:Nunito;src:url('web-assets/nunito.woff2') format('woff2');font-weight:200 1000;font-display:swap} :root{--green:#00441f;--forest:#177432;--ranger:#5a8845;--yellow:#ffc907;--cream:#faf7ec;--sand:#ece5d6;--mint:#e4f1de;--ink:#173e2a;--muted:#576451;--line:#d7dbc8;--shell:1240px} .shell{width:min(var(--shell),calc(100% - 104px));margin-inline:auto} .skip-link{position:fixed;top:-70px;left:16px;background:var(--yellow);padding:14px 22px;z-index:1000} .skip-link:focus{top:10px} .button{display:inline-flex;align-items:center;justify-content:center;gap:20px;padding:15px 25px;border:1px solid transparent;border-radius:999px;min-height:54px;font-size:15.2px;font-weight:900;line-height:1.3;transition:transform .2s,background .2s} .button.primary{background:var(--yellow);color:var(--green);box-shadow:0 3px 0 #d9a905} .button.outline{border:1px solid var(--green);background:transparent} .text-button{padding:10px 0;display:inline-flex;align-items:center;justify-content:space-between;gap:15px;border:0;background:none;font-size:14.4px;font-weight:900;line-height:1.4} .text-button svg{width:20px} .site-header{position:sticky;top:0;z-index:50;background:rgba(250,247,236,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(16px)} .nav-shell{width:min(1360px,calc(100% - 72px));height:94px;margin:auto;display:flex;align-items:center;gap:32px} .brand{width:115px;flex-shrink:0} .brand img{width:115px;height:74px;object-fit:contain} .nav-shell nav{display:flex;align-items:center;justify-content:center;gap:29px;margin-left:auto} .nav-shell nav a, .nav-shell nav button{font-size:14.4px;font-weight:800;background:none;border:0;padding:12px 0} .nav-shell nav a:hover{color:var(--forest)} .nav-cta{margin-left:12px;font-size:13.6px;min-height:46px;padding:12px 19px;gap:14px} .menu-toggle{display:none} .mission-body .text-button{margin-top:auto;border-top:1px solid var(--line);padding-top:14px} .mission-bottom>.text-button{margin-left:auto} .newsletter .button{flex-shrink:0} .footer{background:#e9e6d5;border-top:1px solid #dcdac7;padding-top:53px} .footer-main{display:grid;grid-template-columns:1.4fr 1fr 1.1fr .8fr;gap:55px;padding-bottom:45px} .footer-brand img{width:118px;height:78px;object-fit:contain;margin-bottom:15px} .footer-brand p{font-size:13.12px;max-width:260px;margin-bottom:11px} .footer-brand>span{font-size:11.52px;font-weight:800;color:var(--muted)} .footer h2{font:900 13.76px/1.4 Nunito;margin:12px 0 17px} .footer a, .footer button{display:block;background:none;border:0;padding:5px 0;font-size:12.48px} .footer-bottom{padding:21px 0;border-top:1px solid #ccd0b9;display:flex;justify-content:space-between;gap:20px;font-size:11.68px} .footer-bottom>div{display:flex;gap:26px;align-items:center} .footer-bottom button, .footer-bottom a{font-size:11.68px} @media(max-width:1100px){.shell{width:calc(100% - 64px)}.nav-shell{width:calc(100% - 48px);gap:20px}.nav-shell nav{gap:19px}.nav-cta{font-size:12.32px;padding:11px 15px;gap:8px;margin-left:0}.footer-main{gap:30px}} @media(max-width:850px){.nav-shell{height:80px}.brand, .brand img{width:101px}.brand img{height:65px}.nav-shell nav{gap:15px}.nav-shell nav a, .nav-shell nav button{font-size:12.8px}.nav-cta svg{display:none}.hero .button{font-size:12.8px;gap:12px;padding:13px 19px}.newsletter .button{font-size:12.8px;padding:14px 20px}.footer-main{grid-template-columns:1.2fr 1fr 1fr}.footer-main>div:last-child{display:none}} @media(max-width:700px){.shell{width:calc(100% - 40px)}.nav-shell{width:calc(100% - 32px);height:76px;gap:13px}.nav-cta{margin-left:auto;padding:10px 15px;font-size:11.52px;min-height:40px}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:6px;width:38px;height:44px;background:none;border:0;padding:8px;flex-shrink:0}.menu-toggle span{height:2px;width:22px;background:var(--green);transition:transform .2s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}.nav-shell nav{position:absolute;top:76px;left:0;right:0;background:var(--cream);padding:20px 24px 25px;box-shadow:0 14px 15px #00441f12;display:none;grid-template-columns:1fr 1fr;gap:0 28px;border-bottom:1px solid var(--line)}.nav-shell nav.is-open{display:grid}.nav-shell nav a, .nav-shell nav button{font-size:16px;text-align:left;min-height:48px;border-bottom:1px solid var(--line)}.hero .button{font-size:13.76px;padding:14px 20px}.center-action .text-button{font-size:12.16px}.mission-bottom .text-button{font-size:12.48px}.hub .section-aside .text-button{margin-top:14px;font-size:13.12px}.article-body .text-button{font-size:12.32px}.newsletter .button{margin-top:23px}.footer{padding-top:34px}.footer-main{grid-template-columns:1fr 1fr;gap:27px;padding-bottom:32px}.footer-brand{grid-column:1/-1;display:grid;grid-template-columns:100px 1fr;gap:0 22px}.footer-brand img{grid-row:1/3;width:100px;height:72px;margin:0}.footer-brand p{font-size:12.16px;margin:0 0 7px;max-width:none}.footer-brand>span{font-size:10.56px}.footer h2{font-size:12.8px;margin:3px 0 12px}.footer a, .footer button{font-size:12px}.footer-bottom{display:block;padding:18px 0}.footer-bottom>div{gap:18px;flex-wrap:wrap;margin-top:9px}.footer-bottom button, .footer-bottom a{font-size:10.72px}} @media(max-width:360px){.nav-shell{gap:8px}.brand, .brand img{width:86px}.nav-cta{padding:9px 11px;font-size:10.88px}} .footer-brand>span, .footer-bottom, .footer-bottom a, .footer-bottom button{font-size:12px} @media(max-width:700px){.nav-cta{font-size:12px}.footer-brand p{font-size:12.8px}} .compass-arrow{transform-origin:center} @media (hover:hover) and (prefers-reduced-motion:no-preference){a:hover .compass-arrow, button:not(:disabled):hover .compass-arrow, [role="tab"]:hover .compass-arrow, summary:hover .compass-arrow{animation:compass-needle .85s ease-out}} @media (prefers-reduced-motion:no-preference){a:focus-visible .compass-arrow, button:not(:disabled):focus-visible .compass-arrow, [role="tab"]:focus-visible .compass-arrow, summary:focus-visible .compass-arrow{animation:compass-needle .85s ease-out}} .connect-actions .button{font-size:14.08px;padding:14px 20px;gap:12px} @media(min-width:701px) and (max-width:900px){.nav-shell{height:80px}.nav-cta{margin-left:auto}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:6px;width:38px;height:44px;background:none;border:0;padding:8px;flex-shrink:0}.menu-toggle span{height:2px;width:22px;background:var(--green);transition:transform .2s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}.nav-shell nav{position:absolute;top:80px;left:0;right:0;background:var(--cream);padding:20px 24px 25px;box-shadow:0 14px 15px #00441f12;display:none;grid-template-columns:1fr 1fr;gap:0 28px;border-bottom:1px solid var(--line)}.nav-shell nav.is-open{display:grid}.nav-shell nav a, .nav-shell nav button{font-size:16px;text-align:left;min-height:48px;border-bottom:1px solid var(--line)}} @media(max-width:700px){.connect-actions .button{font-size:12.8px;padding:13px 17px}} .button.ghost{background:transparent;border:1px solid var(--green);color:var(--green);box-shadow:none} .button.ghost:hover{background:var(--green);color:var(--cream)} .home-page .hero .button.ghost{color:var(--cream);border-color:#c6dcae} .home-page .hero .button.ghost:hover{background:var(--yellow);border-color:var(--yellow);color:var(--green)} .home-page .mission-bottom>.button{margin-left:auto} @media(max-width:700px){.home-page .hero-actions .button{font-size:13.76px;padding:14px 18px}.home-page .mission-bottom>.button{margin-left:0}.home-page .hub .section-aside .button{max-width:100%;text-align:left}} .home-page .kfc-slide .button.ghost{color:var(--green);border-color:var(--green);background:transparent} .home-page .kfc-slide .button.ghost:hover{background:var(--green);color:var(--cream);border-color:var(--green)} .home-page .kfc-slide .button.primary{background:var(--green);color:var(--cream);box-shadow:0 3px 0 #002e15} .home-page .kfc-slide .button.primary:hover{background:#126039} .exit-dialog{width:min(580px,calc(100% - 40px));max-height:calc(100dvh - 48px);padding:0;border:0;border-radius:24px;background:var(--cream);color:var(--green);box-shadow:0 24px 80px #00180d40;overflow:auto} .exit-dialog::backdrop{background:#001d12a6;backdrop-filter:blur(3px)} .exit-dialog-content{position:relative;padding:30px 36px;text-align:center} .exit-dialog-close{position:absolute;right:12px;top:12px;width:44px;height:44px;display:grid;place-items:center;background:transparent;border:1px solid var(--line);border-radius:50%;z-index:2} .exit-dialog-close:hover{background:var(--mint)} .exit-dialog-art{width:190px;height:150px;object-fit:contain;margin:0 auto 18px} .exit-dialog .eyebrow{justify-content:center;margin-bottom:12px} .exit-dialog h2{font-size:clamp(32px,4vw,42.4px);line-height:1.12;margin-bottom:18px} .exit-dialog h2 span{color:var(--forest)} .exit-dialog-content>p:not(.eyebrow){font-size:16px;line-height:1.65;color:var(--muted)} .exit-dialog-actions{display:grid;gap:12px;margin-top:24px} .exit-dialog-actions .button{width:100%;min-height:52px} .exit-dialog-dismiss{border:0;background:transparent;padding:12px 8px;margin-top:10px;min-height:44px;font-size:14.08px;text-decoration:underline;text-underline-offset:4px} body.exit-dialog-open{overflow:hidden} @media(max-width:480px){.exit-dialog-content{padding:26px 22px}.exit-dialog-art{height:125px;width:155px}.exit-dialog-actions .button{font-size:14.08px;padding-inline:16px}} @media print{.exit-dialog{display:none!important}body.exit-dialog-open{overflow:visible}} .home-page main>section:not(.hero)>.shell{position:relative;z-index:1} .home-page .mission-card .mission-body .text-button{padding-top:8px} @media(max-width:700px){.home-page .mission-card .mission-body .text-button{font-size:10.88px;padding-top:6px}.home-page .mission-bottom .button{margin-left:auto}} .home-page .mission-section-heading>.button{justify-self:end;white-space:nowrap} @media(max-width:700px){.home-page .mission-section-heading>.button{justify-self:start}} .home-page .mission-cat .text-button{margin-top:4px;align-self:flex-start;color:var(--forest);font-weight:900} .footer a, .footer button{transition:color .18s ease,transform .18s ease} .footer a:hover, .footer button:hover{color:var(--forest);transform:translateX(4px)} .footer-bottom a:hover, .footer-bottom button:hover{transform:translateX(3px)} .nav-group{position:relative;display:flex;align-items:center} .nav-shell nav .nav-top{display:inline-flex;align-items:center;gap:5px} .nav-caret{width:13px;height:13px;transition:transform .2s} .nav-group:hover .nav-caret, .nav-group:focus-within .nav-caret{transform:rotate(180deg)} .nav-menu{position:absolute;top:100%;left:-18px;margin-top:16px;display:flex;gap:34px;background:var(--cream);border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 30px rgba(0,68,31,.14);padding:20px 26px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:60} .nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu{opacity:1;visibility:visible;transform:translateY(0)} .nav-group:hover::before, .nav-group:focus-within::before{content:'';position:absolute;top:100%;left:0;width:100%;height:18px} .nav-col{display:flex;flex-direction:column;min-width:158px} .nav-shell nav .nav-menu a{white-space:nowrap;padding:8px 0;font-size:13.6px;font-weight:700;border-bottom:0} .nav-shell nav .nav-menu a:hover{color:var(--forest)} @media(max-width:900px){.nav-shell nav{grid-template-columns:1fr}.nav-shell nav .nav-group{display:block;border-bottom:1px solid var(--line)}.nav-shell nav .nav-top{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;border-bottom:0;width:100%}.nav-shell nav .nav-caret{display:inline-flex;width:16px;height:16px;flex-shrink:0;transition:transform .2s}.nav-group.is-expanded .nav-caret{transform:rotate(180deg)}.nav-shell nav .nav-menu{position:static;display:none;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-radius:0;background:none;padding:0 0 12px;margin:0}.nav-group.is-expanded .nav-menu{display:block}.nav-shell nav .nav-col{padding-left:14px}.nav-shell nav .nav-menu a{white-space:normal;padding:9px 0;font-size:15.2px}} /* ---- scoped base ---------------------------------------------------------- The demo gets these from global a{}, button{}, h1,h2,h3,p{} and img{} rules plus body inheritance, which are not carried over. The Orphic theme styles the same bare elements, so without this block the theme wins inside the chrome: a{font-size:18px;font-weight:700;letter-spacing:-.5px;color:#177432}, p{color:#532f09}, h2{color:#5a8845}, button{padding:9px 34px}. :where() contributes ZERO specificity, so each rule ties the theme's bare-element rule and beats it on source order, while still losing to every demo component rule (they all carry a class). Written as `.site-header a` (0,1,1) these would outrank `.button` (0,1,0) and strip the CTA's own font. */ :where(.site-header, .footer, .exit-dialog) a { color: inherit; text-decoration: none; font: inherit; letter-spacing: inherit; } :where(.site-header, .footer, .exit-dialog) button { font: inherit; color: inherit; padding: revert; border-radius: revert; background: revert; border: revert; text-transform: revert; } :where(.site-header, .footer, .exit-dialog) p { margin: 0; color: inherit; font: inherit; } :where(.site-header, .footer, .exit-dialog) h1, :where(.site-header, .footer, .exit-dialog) h2, :where(.site-header, .footer, .exit-dialog) h3 { margin: 0; color: inherit; } :where(.site-header, .footer, .exit-dialog) img { display: block; max-width: 100%; height: auto; } :where(.site-header, .footer, .exit-dialog) svg { width: 23px; height: 23px; flex-shrink: 0; margin: revert; vertical-align: revert; } /* The theme's `button svg, .button svg{margin-top:-3px}` is (0,0,2) and (0,1,1); the bare svg reset above is only (0,0,1) and loses to both. That -3px shortens the CTA's flex line so min-height wins and it renders 3px short. Match each selector's weight exactly, never exceed it. */ :where(.site-header, .footer, .exit-dialog) button svg { margin: revert; } :where(.site-header, .footer, .exit-dialog) .button svg, :where(.site-header, .footer, .exit-dialog) .text-button svg { margin: revert; } /* ---- demo page content reset ----------------------------------------------- Everything inside a .home-page wrapper is demo markup, which assumes UA defaults plus its own classes. The Orphic theme styles the same bare elements globally, so without this block a ported page inherits the theme's type and colour: h1 goes #8b5e3c, h2 #5a8845, links pick up letter-spacing:-.5px. This lived inline in home.html and so never reached missions.html or kfc-mission.html — which is exactly why it belongs here. Same :where() rule as above: zero specificity, ties the theme's element rules, loses to the demo's class rules. It lists every page wrapper rather than keying on .home-page, because the demo gives each page its OWN body class (home-page home-v4 / missions-page / kfc-page) and styles.css carries 233 `.home-page ...` layout rules. Adding .home-page to another page's wrapper to pick up this reset drags all 233 along with it — e.g. `.home-page main>section>.shell{position:relative}` silently repositioning the KFC signup block. */ :where(.home-page, .missions-page, .kfc-page) p, :where(.home-page, .missions-page, .kfc-page) ul, :where(.home-page, .missions-page, .kfc-page) ol, :where(.home-page, .missions-page, .kfc-page) li { font-size: revert; line-height: revert; color: revert; margin: revert; font-family: revert; } :where(.home-page, .missions-page, .kfc-page) a { font-size: revert; line-height: revert; font-weight: revert; letter-spacing: revert; color: revert; font-family: revert; } :where(.home-page, .missions-page, .kfc-page) h1, :where(.home-page, .missions-page, .kfc-page) h2, :where(.home-page, .missions-page, .kfc-page) h3, :where(.home-page, .missions-page, .kfc-page) h4, :where(.home-page, .missions-page, .kfc-page) h5, :where(.home-page, .missions-page, .kfc-page) h6 { font-family: revert; font-size: revert; line-height: revert; font-weight: revert; color: revert; letter-spacing: revert; margin: revert; text-transform: revert; } :where(.home-page, .missions-page, .kfc-page) blockquote { color: revert; padding: revert; border-left: revert; margin: revert; font-style: revert; } :where(.home-page, .missions-page, .kfc-page) img { font-size: revert; line-height: revert; } :where(.home-page, .missions-page, .kfc-page) button { padding: revert; font: revert; line-height: revert; border-radius: revert; text-align: revert; white-space: revert; text-transform: revert; display: revert; } :where(.home-page, .missions-page, .kfc-page) svg { margin: revert; vertical-align: revert; } /* Match the theme's `button svg, .button svg{margin-top:-3px}` at its own weight ((0,0,2) and (0,1,1)); a bare svg reset at (0,0,1) loses to both. */ :where(.home-page, .missions-page, .kfc-page) button svg, :where(.home-page, .missions-page, .kfc-page) .button svg, :where(.home-page, .missions-page, .kfc-page) .text-button svg { margin: revert; transition: revert; } :where(.home-page, .missions-page, .kfc-page) .button { text-align: revert; } .home-page, .missions-page, .kfc-page { font-family: Nunito, Arial, sans-serif; } /* The theme sets `overflow-wrap: break-word` on , which every descendant inherits. The demo has no such rule, so its text uses `normal`. The difference shows wherever a long unbreakable token sits in a tight box: the community stat "105,000" is 208px of text in a 200px column, which the demo lets overflow on one line but which break-word splits after the comma — measured as two text rects, 173.5px + 34.5px. It is INHERITED, not set per element, so resetting it on the wrappers is enough for everything inside. Affects any long word in ported content, not just this number. */ :where(.home-page, .missions-page, .kfc-page), :where(.site-header, .footer, .exit-dialog) { overflow-wrap: normal; word-wrap: normal; } /* ---- make position:sticky work for the header ------------------------------- The demo's header is a child of , so `position:sticky` has the whole page to stick within. On HubSpot it is not, and TWO separate things break it — fixing either alone changes nothing, which is why this needs both: 1. `{% global_partial %}` wraps its output in
(documented HubSpot behaviour). That div is only as tall as the header itself — measured 95px — and a sticky box cannot stick beyond its parent, so the header unsticks after 95px. `display:contents` removes the wrapper's box so the containing block becomes .body-wrapper instead. These wrappers carry no styling of their own, so dropping their boxes is safe. 2. The theme sets `overflow-x:hidden` on body, which makes it a scroll container and disables sticky for its descendants. `clip` prevents the same horizontal overflow WITHOUT creating a scroll container. Only body is changed; html keeps the theme's value, which is enough. Degradation: browsers without overflow:clip (Safari < 16) fall back to the theme's `hidden` and the header simply is not sticky — layout is unaffected. */ div[data-global-resource-path] { display: contents; } /* Rendering the header as a MODULE adds a second short wrapper inside the first: HubSpot emits
, again only as tall as the header (95px), which re-breaks sticky. Targeted by id rather than the generic .hs_cos_wrapper class: that class wraps every module on the page and collapsing all of them would be far wider-reaching than this needs to be. */ #hs_cos_wrapper_site_header { display: contents; } body { overflow-x: clip; } /* ---- .footer-brand: our markup adds two links the demo does not have -------- The demo's footer logo is a bare and its Mandai X attribution is bare text. The module wraps both in (it exposes `logo_link` and an attribution link), which changes layout in two ways the demo's own CSS cannot account for: 1. At <=700px `.footer-brand` is a `100px 1fr` grid and the demo places the logo with `.footer-brand img{grid-row:1/3}`. Wrapped in , the img is no longer a grid item, so that rule stops applying: the auto-places into row 1 only and the attribution drops into COLUMN 1 - 100px wide, wrapping onto three lines - instead of sitting under the tagline, and the tagline stretches to the now-taller row. `display:contents` drops the 's box so the img is the grid item again and every `.footer-brand img` rule applies verbatim. The link keeps its href, aria-label and focusability. 2. `.footer a{display:block;padding:5px 0}` is written for the nav columns. On the attribution link it turns inline text into a 10px-padded block, and its font-size (12.48px, 12px on mobile) overrides the 11.52px/10.56px the demo gives `.footer-brand>span`, rendering the line ~5px wider. Reverting to inline and inheriting the size restores the demo's box; the hover colour and transform still apply. Both selectors carry .footer as well as .footer-brand on purpose: the demo's styles.css is loaded AFTER chrome.css on the page and repeats `.footer a{display:block;padding:5px 0}` verbatim, so an equal-specificity (0,1,1) selector here would lose on document order. (0,2,1) wins outright. */ .footer .footer-brand > a { display: contents; } .footer .footer-brand > span > a { display: inline; padding: 0; font-size: inherit; } /* Type and colour the chrome needs, without a body{} rule leaking to the page. */ .site-header, .footer, .exit-dialog { font: 400 16px/1.6 Nunito, Arial, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; } .site-header, .site-header *, .footer, .footer *, .exit-dialog, .exit-dialog * { box-sizing: border-box; } /* ---- heading shadow (generated) ---------------------------------------- The theme forces h2/h3 font-size and margin-bottom with !important below 768px, which no amount of specificity or `revert` can beat. These are the DEMO's own heading declarations, re-emitted at equal weight so the design wins. Regenerated by bin/port-demo-assets.sh — do not hand-edit. 100 rules shadowed from 2 stylesheet(s); heading classes seen: 2. */ :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) h1, :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) h2, :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) h3{margin:0!important} :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) h1, :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) h2{line-height:1.07!important} :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) h2{font-size:clamp(35.2px,3.4vw,52.8px)!important} :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) h3{font-size:24px!important;line-height:1.25!important} :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .hero h1, :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .hero h2{font-size:clamp(48px,4.6vw,73.6px)!important;line-height:1.06!important} :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .kfc-slide .hero h2{font-size:clamp(43.2px,4.1vw,64px)!important} :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .trait-detail h3{font-size:36px!important;margin:8px 0 12px!important} :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .mission-body h3{font-size:20.8px!important;line-height:1.25!important;margin:7px 0 13px!important} :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .article-body h3{font-size:21.6px!important;margin-bottom:12px!important} :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .start-copy h2{font-size:52.8px!important;margin-bottom:28px!important} :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .newsletter h3{font-size:26.4px!important;margin-bottom:7px!important} .footer h2{font:900 13.76px/1.4 Nunito!important;margin:12px 0 17px!important} @media(min-width:1500px){:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .hero h1{font-size:75.2px!important}} @media(max-width:1100px){:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .start-copy h2{font-size:44.8px!important}} @media(max-width:850px){:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .hero h1{font-size:48px!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .article-body h3{font-size:19.2px!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .start-copy h2{font-size:38.4px!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .newsletter h3{font-size:21.6px!important}} @media(max-width:700px){:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .hero h1{font-size:clamp(43.2px,8.5vw,59.2px)!important;line-height:1.08!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .kfc-slide .hero-copy h2{font-size:44px!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) h2{font-size:35.2px!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .trait-detail h3{font-size:27.2px!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .mission-body h3{font-size:20.48px!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .article-body h3{font-size:18.4px!important;margin-bottom:9px!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .start-copy h2{font-size:44.8px!important;margin-bottom:23px!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .newsletter h3{font-size:22.4px!important}.footer h2{font-size:12.8px!important;margin:3px 0 12px!important}} @media(max-width:360px){:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .hero h1{font-size:41.6px!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .article-body h3{font-size:16.8px!important}} :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .parent-story-heading{font-size:18.4px!important;line-height:1.45!important;margin-bottom:15px!important} :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .missions .mission-body h3{margin-bottom:20px!important} :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .hub .article-body h3{font-size:22.4px!important;line-height:1.35!important} :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .start .start-copy h2{font-size:clamp(40px,3.8vw,56px)!important} @media(max-width:850px){:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .parent-story-heading{font-size:20px!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .hub .article-body h3{font-size:19.52px!important}} @media(max-width:700px){:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .hero h1{font-size:clamp(44.8px,9.2vw,60.8px)!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .hero h2{font-size:41.6px!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .parent-story-heading{font-size:17.6px!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .hub .article-body h3{font-size:18.08px!important;line-height:1.35!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .start .start-copy h2{font-size:43.2px!important}} .home-page .parent-story-heading{font-size:clamp(22.4px,2vw,26.4px)!important;line-height:1.35!important;margin-bottom:22px!important} .home-page .parent-story .parent-story-heading{margin:0 0 clamp(6px,1vw,12px)!important;font-size:clamp(15.2px,1.45vw,20.48px)!important;line-height:1.25!important} @media(min-width:1101px){.home-page .hero h1, .home-page .hero h2{font-size:clamp(44.8px,4.05vw,56.8px)!important}} .exit-dialog h2{font-size:clamp(32px,4vw,42.4px)!important;line-height:1.12!important;margin-bottom:18px!important} .home-page .mission-map h2{font-size:clamp(32px,3.1vw,48px)!important} @media(max-width:700px){.home-page .mission-map h2{font-size:32px!important}} .home-page .mission-card .mission-body h3{font-size:17.28px!important;margin:3px 0 8px!important} @media(max-width:700px){.home-page .mission-card .mission-body h3{font-size:14.72px!important;line-height:1.18!important;margin:2px 0 6px!important}} .home-page .mission-cat h3{font-size:clamp(18.4px,1.5vw,21.6px)!important;margin:0!important} :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .camp-hero h1{font-size:clamp(48px,4.3vw,70.4px)!important;line-height:1.08!important} :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .trial-overview h3{font-size:42.4px!important;line-height:1.12!important;margin-bottom:20px!important} :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .mission-step h4{margin:0 0 7px!important;font-size:16px!important;line-height:1.4!important} :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .current-mission-copy h3{font-size:42.4px!important;margin-bottom:22px!important;line-height:1.1!important} :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .coming-copy h3{margin:10px 0 12px!important;font-size:24px!important} :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .missions-hero h1{font-size:clamp(44.8px,4.3vw,70.4px)!important;line-height:1.1!important} :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .wall-label h3{font-size:21.6px!important} :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .digital-card h3{font-size:24.8px!important;margin-bottom:17px!important} :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .activity-copy h3{font-size:25.6px!important;margin-bottom:17px!important} @media(max-width:1100px){:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .camp-hero h1{font-size:52.8px!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .mission-wall .mission-body h3{font-size:19.2px!important}} @media(max-width:850px){:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .camp-hero h1{font-size:46.4px!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .missions-hero h1{font-size:48px!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .trial-overview h3, :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .current-mission-copy h3{font-size:36.8px!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .mission-step h4{font-size:14.4px!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .digital-card h3{font-size:20.8px!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .activity-copy h3{font-size:21.6px!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .coming-copy h3{font-size:21.6px!important}} @media(max-width:700px){:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .camp-hero h1{font-size:clamp(42.4px,9.1vw,60.8px)!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .trial-overview h3{font-size:32px!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .mission-step h4{font-size:16px!important;margin-bottom:4px!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .current-mission-copy h3{font-size:38.4px!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .coming-copy h3{font-size:21.6px!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .missions-hero h1{font-size:clamp(41.6px,8.8vw,60.8px)!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .wall-intro h2{font-size:33.6px!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .wall-label h3{font-size:19.2px!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .mission-wall .mission-body h3{font-size:21.6px!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .digital-card h3{font-size:24px!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .activity-copy h3{font-size:23.2px!important}} @media(min-width:480px) and (max-width:700px){:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .mission-wall .mission-body h3{font-size:18.4px!important}} @media(max-width:370px){:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .camp-hero h1{font-size:40.8px!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .trial-overview h3{font-size:28.8px!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .activities-section h2{font-size:32px!important}} :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .wall-subhead{font-size:22.4px!important;line-height:1.4!important;margin-top:24px!important} :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .mission-wall .mission-body h3{margin:0 0 18px!important;font-size:21.6px!important;line-height:1.35!important} :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .camp-hero h1{font-size:clamp(48px,4.8vw,76.8px)!important} :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .path-instructions h3{font:400 32px/1.2 Arco,Nunito,sans-serif!important;margin:0 0 24px!important} :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .signup-inner h2{font-size:clamp(32px,3vw,48px)!important} @media(max-width:700px){:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .camp-hero h1{font-size:clamp(48px,9.5vw,62.4px)!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .path-instructions h3{font-size:30.4px!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .current-mission-copy h3{font-size:36.8px!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .wall-subhead{font-size:19.2px!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .mission-wall .mission-body h3{font-size:22.4px!important}:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .signup-inner h2{font-size:33.6px!important}} :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .camp-hero h1 .camp-title-brand{font-size:clamp(24px,3vw,44.8px)!important;line-height:1.2!important} @media(max-width:700px){:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .camp-hero h1 .camp-title-brand{font-size:clamp(20px,5.2vw,36px)!important}} :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .missions-hero h1 .missions-title-intro{font-size:clamp(24px,3vw,44.8px)!important;line-height:1.2!important;margin-bottom:10px!important} @media(max-width:700px){:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .missions-hero h1 .missions-title-intro{font-size:clamp(20px,5.2vw,36px)!important}} :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .missions-hero h1 .missions-title-intro{font-size:min(44.8px,6cqw)!important} @media(min-width:701px){:where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .missions-hero h1 .missions-title-intro{font-size:min(44.8px,5.2174cqw)!important}} :where(.home-page, .missions-page, .kfc-page, .site-header, .footer, .exit-dialog) .camp-get .path-instructions h3{margin-bottom:0!important}