/* * Shared CTN theme: brand tokens, navbar and layout primitives, layered on top * of Pico CSS. * * This file is the single source of truth for both the info site and The CTN * Community app. Edit infosite/static/css/ctn-theme.css and run * `./scripts/sync-theme.sh` to propagate. */ /* ------------------------------------------------------------------ * * Brand tokens * ------------------------------------------------------------------ */ :root, :host { --ctn-blue: #3f67c7; --ctn-red: #ea2524; --ctn-red-soft: #e85e57; --ctn-ink: #1b1b1b; --ctn-surface: #f7f7f7; --ctn-heading-font: "Fugaz One", "Helvetica Neue", Helvetica, Arial, sans-serif; --ctn-body-font: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; --ctn-navbar-height: 70px; --ctn-navbar-bg: #fff; --ctn-navbar-border: #e7e7e7; --ctn-navbar-link: #777; --ctn-navbar-link-hover: #333; --ctn-gutter: 15px; } /* ------------------------------------------------------------------ * * Pico overrides * ------------------------------------------------------------------ */ /* Both CTN sites are light-only designs: the section backgrounds, cards and alerts below are hard-coded white/near-white. Pico's automatic dark scheme would repaint only the text (to a pale #c2c7d0) and leave those backgrounds alone, so a phone set to dark mode renders most of the site illegible. The base templates therefore pin data-theme="light" on , which disables Pico's prefers-color-scheme block. Do not remove that attribute without also giving every hard-coded background a dark counterpart. */ /* Pico scales the root font size up on large screens; the CTN designs assume a fixed base, so pin it and scale only slightly on very wide viewports. */ @media (min-width: 576px) { :root, :host { --pico-font-size: 90%; } } @media (min-width: 768px) { :root, :host { --pico-font-size: 90%; } } @media (min-width: 1024px) { :root, :host { --pico-font-size: 90%; } } @media (min-width: 1280px) { :root, :host { --pico-font-size: 100%; } } @media (min-width: 1536px) { :root, :host { --pico-font-size: 100%; } } html { scroll-behavior: smooth; } body { font-family: var(--ctn-body-font); padding-top: var(--ctn-navbar-height); } h1, h2, h3, h4, h5, h6 { font-family: var(--ctn-heading-font); font-weight: 900; } /* Matches Pico's `body > main` specificity so sections butt against the navbar. */ body > main { padding-block: 0; } img { max-width: 100%; height: auto; } section { scroll-margin-top: var(--ctn-navbar-height); } /* ------------------------------------------------------------------ * * Layout primitives * ------------------------------------------------------------------ */ .container, .container-fluid { width: 100%; margin-right: auto; margin-left: auto; padding-right: var(--ctn-gutter); padding-left: var(--ctn-gutter); } @media (min-width: 576px) { .container { max-width: 540px; } } @media (min-width: 768px) { .container { max-width: 720px; } } @media (min-width: 992px) { .container { max-width: 960px; } } @media (min-width: 1200px) { .container { max-width: 1100px; } } @media (min-width: 1400px) { .container { max-width: 1300px; } } .container-gray { background-color: var(--ctn-surface); } /* Card grids. Columns collapse on their own as the viewport narrows. */ .grid { display: grid; gap: 1.5rem; } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } /* Centred reading column. */ .measure { max-width: 62rem; margin-inline: auto; } .measure-narrow { max-width: 46rem; margin-inline: auto; } /* Two-up body/media row, used for the alternating "how it works" steps. */ .split { display: grid; gap: 2rem; align-items: center; } @media (min-width: 768px) { .split { grid-template-columns: 1fr 1fr; } .split-reverse .split-media { order: -1; } } .text-center { text-align: center; } .lead { font-size: 1.125em; font-weight: 400; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); border: 0; } /* ------------------------------------------------------------------ * * Navbar (shared by the info site and the community app) * ------------------------------------------------------------------ */ .ctn-navbar { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; min-height: var(--ctn-navbar-height); background-color: var(--ctn-navbar-bg); border-bottom: 1px solid var(--ctn-navbar-border); } .ctn-navbar .container { display: flex; flex-wrap: nowrap; align-items: center; min-height: var(--ctn-navbar-height); } .ctn-navbar-brand { display: flex; align-items: center; margin-right: auto; min-width: 0; gap: 6px; text-decoration: none; color: var(--ctn-navbar-link); } .ctn-navbar-brand:hover, .ctn-navbar-brand:focus { text-decoration: none; color: var(--ctn-navbar-link-hover); } .ctn-navbar-brand img { height: 64px; width: auto; margin: 3px; padding: 3px; } .ctn-navbar-title { margin-left: 15px; font-family: var(--ctn-heading-font); font-size: 18px; line-height: 1.15; white-space: nowrap; } .ctn-navbar-nav { display: flex; flex-shrink: 0; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; } .ctn-navbar-nav li { padding: 0; list-style: none; } .ctn-navbar-nav a { display: block; padding: 10px 16px; line-height: 40px; color: var(--ctn-navbar-link); text-decoration: none; background: none; white-space: nowrap; } .ctn-navbar-nav a:hover, .ctn-navbar-nav a:focus { color: var(--ctn-navbar-link-hover); text-decoration: none; background: none; } .ctn-navbar-nav a[aria-current="page"] { color: var(--ctn-navbar-link-hover); font-weight: 700; } /* Cross-link to the sibling system, styled as a brand pill. */ .ctn-navbar-nav a.nav-cross-link { margin-left: 10px; padding: 8px 18px; line-height: 1.4; border-radius: 999px; background: var(--ctn-red); color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .ctn-navbar-nav a.nav-cross-link:hover, .ctn-navbar-nav a.nav-cross-link:focus { background: var(--ctn-blue); color: #fff; } .ctn-navbar-toggle { display: none; width: auto; margin: 0 0 0 auto; padding: 9px 10px; background: none; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; } .ctn-navbar-toggle:hover, .ctn-navbar-toggle:focus { background: #ddd; border-color: #ddd; } .ctn-navbar-toggle span { display: block; width: 22px; height: 2px; border-radius: 1px; background-color: #888; } .ctn-navbar-toggle span + span { margin-top: 4px; } /* The brand wordmark only fits alongside a full nav once the container is at its widest, so it is the first thing to go. */ @media (max-width: 1399px) { .ctn-navbar-title { display: none; } .ctn-navbar-nav a { padding: 10px 10px; } .ctn-navbar-nav a.nav-cross-link { margin-left: 6px; padding: 8px 14px; } } /* The info site carries eight nav items, which stop fitting alongside the two institutional logos below ~992px, so both sites collapse at the same width. */ @media (max-width: 991px) { .ctn-navbar .container { flex-wrap: wrap; } .ctn-navbar-toggle { display: block; } .ctn-navbar-brand img { height: 48px; } .ctn-navbar-nav { display: none; order: 3; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 8px; border-top: 1px solid var(--ctn-navbar-border); } .ctn-navbar-nav.open { display: flex; } .ctn-navbar-nav a { padding: 10px 12px; line-height: 1.6; } .ctn-navbar-nav a.nav-cross-link { margin: 8px 12px 0; text-align: center; } } /* Three logos plus the toggle would wrap the bar onto a second row on phones, which would break the fixed body offset. */ @media (max-width: 575px) { .ctn-navbar-brand img { height: 36px; margin: 2px; padding: 2px; } } /* ------------------------------------------------------------------ * * Alerts * ------------------------------------------------------------------ */ .alert-error { position: relative; background: #ffa1a1; } .alert-error header { padding: 0.5rem 1rem; background: #df2222; color: #fff; font-weight: 700; } .alert-success { position: relative; background: #d9f2d9; } .alert-success header { padding: 0.5rem 1rem; background: #2d8f2d; color: #fff; font-weight: 700; } .alert-dismiss { position: absolute; top: 0.35rem; right: 0.5rem; width: 2rem; min-width: 2rem; height: 2rem; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; font-size: 1.5rem; line-height: 1; } .alert-dismiss:hover, .alert-dismiss:focus { background: rgba(0, 0, 0, 0.15); }