/* Keep Calgary Playing — Sport Calgary brand layer (2026 Brand Guidelines)
Colours: red #EF3340 (the only red) · black #2E2E2E · white · light grey #F5F5F5.
Type: Poppins for everything. Sporty Pro for big display headlines when the licensed files are available.
Form: rounded corners on cards, panels, photos and inputs; pill buttons. */
:root{
--kcp-red:#EF3340;--kcp-black:#2E2E2E;--kcp-grey:#F5F5F5;--kcp-line:#E5E5E5;
--kcp-radius:16px;--kcp-radius-sm:12px;--kcp-pill:999px;
--font-body:Poppins,system-ui,sans-serif;
--font-display:'Sporty Pro',Poppins,system-ui,sans-serif;
}
/* Sporty Pro is a licensed face and is not bundled. Drop the files in assets/fonts/ and uncomment to enable it
on the hero headlines; Poppins ExtraBold stands in until then.
@font-face{font-family:'Sporty Pro';src:url(../assets/fonts/SportyPro-Bold.woff2) format('woff2');font-weight:700 800;font-display:swap} */
h1{font-family:var(--font-display)!important}
/* ---- Rounded forms. Styles live inline on each element, so these match by role. */
a[style*="text-transform:uppercase"][style*="text-decoration:none"][style*="padding:"],
button[style*="text-transform:uppercase"][style*="cursor:pointer"][style*="padding:"]:not([role=tab]),
span[style*="padding:4px 8px"]{border-radius:var(--kcp-pill)}
button[aria-label][style*="width:44px"],button[aria-label][style*="width:46px"],button[aria-label][style*="width:56px"]{border-radius:50%}
[role=tablist][style*="border:2px solid"]{border-radius:var(--kcp-pill);overflow:hidden}
[role=tablist][style*="border-bottom:3px solid"] button{border-radius:var(--kcp-radius-sm) var(--kcp-radius-sm) 0 0}
[style*="border:2px solid #2E2E2E"][style*="padding:24px"],
[style*="border:3px solid #2E2E2E"],
article[style*="background:#fff;padding"],article[style*="background:#F5F5F5;padding"],
div[style*="background:#2E2E2E;color:#fff;padding"],div[role=status][style*="background:#2E2E2E"],
section[style*="background:#F5F5F5;color:#2E2E2E;padding"],section[style*="background:#2E2E2E;color:#fff;padding"],
#countdown,#modal-box,[style*="aspect-ratio"],[style*="gap:2px"][style*="border:2px solid"]{border-radius:var(--kcp-radius)}
[style*="gap:2px"][style*="border:2px solid"],#modal-box,[style*="border:3px solid #2E2E2E"]{overflow:hidden}
.kcp-field,label[style*="padding:16px 18px"],p[style*="background:#F5F5F5"][style*="padding"],span[style*="padding:14px 16px"],
figure[style*="aspect-ratio"] figcaption{border-radius:var(--kcp-radius-sm)}
figure[style*="aspect-ratio"] figcaption{border-top-left-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--kcp-radius)}
div[style*="height:40px;background:rgba"],div[style*="height:28px;background:#EBEBEB"]{border-radius:var(--kcp-pill)}
.kcp-field{border-radius:var(--kcp-radius-sm)}
li[data-reveal] > a[data-card]{border-radius:var(--kcp-radius)}
dl[style*="gap:2px"]{border-radius:var(--kcp-radius);overflow:hidden}
/* ---- A rounded card inside a link or button (asset tiles on Assets & Data and Toolkit). The wrapper takes the card's
radius so its hover shadow, hover background and focus outline follow the card shape, instead of a square
effect with white wedges between it and the rounded card. Markup: */
.kcp-card-link,.kcp-card-link > div{border-radius:var(--kcp-radius)}
/* Asset lightbox: the graphic sits flush and #modal-box rounds the outer corners. Nothing white is painted under the
graphic (white under a dark image bleeds through the anti-aliased curve as a pale arc), so the white panel colour sits
on the caption column only; this dark filler covers any space below the graphic when the caption column is taller. */
#modal-tile > [style*="aspect-ratio"]{border-radius:0}
#modal-tile::after{content:"";flex:1 1 auto;background:#111}
/* ---- Rounding that survives script style changes. When a script sets el.style.x (the scroll reveal in kcp-motion.js,
form state on the pledge page), the browser rewrites the whole style attribute in its own format
("border: 3px solid rgb(46, 46, 46)"), the [style*="…"] matches above stop applying and the card turns square.
These are matched by class, id or data-hover instead, which scripts never rewrite. */
.kcp-card{border-radius:var(--kcp-radius);overflow:hidden}
[data-hover*="box-shadow"]{border-radius:var(--kcp-radius)}
#submit-btn{border-radius:var(--kcp-pill)}
/* A header strip that spans the top of a card (Toolkit e-mails) stays square; the card's rounded clip shapes it.
Rounded on its own it leaves a white crescent inside the border and white wedges under its bottom corners. */
.kcp-card > div[style*="background:#2E2E2E"]:first-child{border-radius:0}
/* ---- Equal-width button pair: both pills take the width of the longer label (one shared 1fr track size).
Side by side on wide rows, stacked at that same width on narrower rows, full width and stacked on phones.
The 728px stacking point is tuned to the home page labels ("Add your name" + "Download the advocacy
toolkit": the longer label sets both widths, 719px side by side in Poppins, 725px in the fallback font).
Update it if the labels change.
Markup: