/* ========================================================================== NFCR phone layer (767px and below) - 0.9.35 Source: "NFCR Mobile Site" design. Loaded last, after every element sheet. Pairs with js/mobile.js (Read more, Show all, accordions, collapsible sections). Tablets (768-1024px) keep the responsive layout of the element sheets. Editors: add the CSS class nfcr-no-collapse to a row/element to keep it fully open on phones. ========================================================================== */ @media (max-width: 767px) { /* ---------- Tokens: the design's phone scale ---------- */ :root { --nfcr-gutter: 12px; /* cards sit 12px from the screen edge, as in the design */ --nfcr-section-gap: 12px; --nfcr-type-k: .2; /* section titles: 24-27px; the Page Header title is set to 32px below */ --nfcr-fs-h1: 32px; --nfcr-fs-h2: 24px; --nfcr-fs-h2-sm: 24px; --nfcr-fs-intro: 16px; --nfcr-fs-body: 16px; --nfcr-fs-h3-xl: 20px; --nfcr-r-section: 24px; --nfcr-panel-pad-y: 26px; --nfcr-panel-pad-x: 20px; --nfcr-space-l: 12px; --nfcr-space-xl: 12px; --nfcr-lh-body: 1.6; } /* ---------- Page rhythm: every section is a rounded card, 12px apart ---------- */ body.nfcr-site #main { padding-bottom: 0; } body.nfcr-site .nfcr-footer { padding-top: 0; padding-bottom: 12px; margin-top: 0; } body.nfcr-site .edgtf-content-inner { padding-bottom: 0; } body.nfcr-site .nfcr-section { margin-bottom: 12px !important; } body.nfcr-site .nfcr-section.nfcr-gap-l, body.nfcr-site .nfcr-section.nfcr-space-tight, body.nfcr-site .nfcr-section.nfcr-space-m { margin-bottom: 12px !important; } /* A section with no box of its own keeps the laptop look (page background, no coloured card). layout.css pads every section row with the gutter using !important, so the text inset is set with !important too. */ body.nfcr-site .nfcr-section.nfcr-m-card { padding: 10px 20px !important; } body.nfcr-site .nfcr-section.nfcr-m-card .vc_row, body.nfcr-site .nfcr-section.nfcr-m-card .wpb_column { padding-left: 0; padding-right: 0; } /* A heading row marked nfcr-space-none sits directly on the row under it (as on the laptop): no gap between them */ body.nfcr-site .nfcr-section.nfcr-m-join-first, body.nfcr-site .nfcr-section.nfcr-m-join-mid { margin-bottom: 0 !important; } body.nfcr-site .nfcr-section.nfcr-m-card.nfcr-m-join-first, body.nfcr-site .nfcr-section.nfcr-m-card.nfcr-m-join-mid { padding-bottom: 6px !important; } body.nfcr-site .nfcr-section.nfcr-m-join-first .nfcr-sh { margin-bottom: 0; } /* The heading's own link / button: on phones it comes after the whole section */ body.nfcr-site .nfcr-m-cta { display: flex; flex-direction: column; align-items: stretch; margin-top: 20px; } body.nfcr-site .nfcr-m-cta > a.nfcr-link { align-self: flex-start; padding: 10px 0; } body.nfcr-site .nfcr-m-cta > .nfcr-btn-wrap { margin-top: 0; } /* Stacked columns: no desktop column gap, 14px between blocks */ body.nfcr-site .nfcr-section { --nfcr-col-gap: 0px; } body.nfcr-site .nfcr-section .wpb_column + .wpb_column { margin-top: 14px; } body.nfcr-site .nfcr-section .nfcr-sh { margin-bottom: 14px; } body.nfcr-site .nfcr-section .nfcr-sh--flush { margin-bottom: 0; } body.nfcr-site .nfcr-section .wpb_text_column.wpb_content_element { margin-bottom: 14px; } body.nfcr-site .nfcr-section .wpb_text_column.nfcr-mt-s, body.nfcr-site .nfcr-section .wpb_text_column.nfcr-mt-m, body.nfcr-site .nfcr-section .nfcr-fineprint { margin-top: 14px; } .nfcr-m-empty { display: none !important; } /* The theme does not set border-box globally: anything given width:100% plus padding/border must opt in */ body.nfcr-site .nfcr-btn, body.nfcr-site .nfcr-btn-combo, body.nfcr-site .nfcr-btn-wrap, body.nfcr-site .nfcr-link, body.nfcr-site .nfcr-split__foot, body.nfcr-site .nfcr-hero__actions, body.nfcr-site .nfcr-intro__actions, body.nfcr-site .nfcr-cta__actions, body.nfcr-site .nfcr-band__action, body.nfcr-site .nfcr-stat, body.nfcr-site .nfcr-card, body.nfcr-site .nfcr-chip, body.nfcr-site .nfcr-intro__stat, body.nfcr-site .nfcr-intro__fact, body.nfcr-site .nfcr-hero__fact, body.nfcr-site .nfcr-intro__search, body.nfcr-site .nfcr-intro__search-input, body.nfcr-site .nfcr-feed__filter, body.nfcr-site .nfcr-m-toggle { box-sizing: border-box; max-width: 100%; } /* ---------- Type ---------- */ body.nfcr-site .nfcr-eyebrow, body.nfcr-site p.nfcr-eyebrow { font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: 1px; text-transform: uppercase; } body.nfcr-site .nfcr-sh .nfcr-sh__title { letter-spacing: -.3px; line-height: 1.2; } body.nfcr-site h1.nfcr-sh__title, body.nfcr-site .nfcr-hero .nfcr-hero__title { font-size: 32px; line-height: 1.15; letter-spacing: -.5px; } body.nfcr-site .nfcr-sh .nfcr-sh__lead, body.nfcr-site .nfcr-sh .nfcr-sh__intro, body.nfcr-site .nfcr-hero .nfcr-hero__intro, body.nfcr-site .nfcr-split__text, body.nfcr-site .nfcr-split__lead, body.nfcr-site .nfcr-cta__text { font-size: 16px; line-height: 1.6; } body.nfcr-site .nfcr-card__title, body.nfcr-site .nfcr-gift__title, body.nfcr-site .nfcr-step__title { font-size: 17px; line-height: 1.35; } body.nfcr-site .nfcr-card__text, body.nfcr-site .nfcr-step__text { font-size: 15px; line-height: 1.55; } /* ---------- Buttons: full-width pills, 52px (design) ---------- */ body.nfcr-site .nfcr-btn-wrap, body.nfcr-site .nfcr-hero .nfcr-hero__actions, body.nfcr-site .nfcr-intro .nfcr-intro__actions, body.nfcr-site .nfcr-cta .nfcr-cta__actions, body.nfcr-site .nfcr-split .nfcr-split__foot, body.nfcr-site .nfcr-band .nfcr-band__action { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; } body.nfcr-site .nfcr-btn-combo { display: flex; width: 100%; } body.nfcr-site .nfcr-btn-combo > .nfcr-btn { flex: 1 1 auto; min-height: 52px; justify-content: center; text-align: center; border-radius: 28px; font-size: 16px; } body.nfcr-site .nfcr-btn-combo > .nfcr-btn-combo__circle { display: none; } body.nfcr-site .nfcr-btn-wrap > .nfcr-btn, body.nfcr-site .nfcr-hero__actions > .nfcr-btn, body.nfcr-site .nfcr-intro__actions > .nfcr-btn, body.nfcr-site .nfcr-cta__actions > .nfcr-btn, body.nfcr-site .nfcr-split__foot > .nfcr-btn, body.nfcr-site .nfcr-band__action > .nfcr-btn { display: flex; width: 100%; min-height: 52px; justify-content: center; border-radius: 28px; font-size: 16px; } /* text links: plain text flow, so the arrow sits right after the last word (not pushed to the far edge) */ body.nfcr-site .nfcr-btn-wrap > .nfcr-link, body.nfcr-site .nfcr-hero__actions > .nfcr-link, body.nfcr-site .nfcr-intro__actions > .nfcr-link { align-self: flex-start; display: block; padding: 10px 0; font-size: 15px; font-weight: 600; line-height: 1.4; } body.nfcr-site a.nfcr-link svg, body.nfcr-site a.nfcr-card__link svg { display: inline-block; margin-left: 6px; vertical-align: -3px; } body.nfcr-site a.nfcr-card__link { display: inline-block; line-height: 1.4; } /* long labels wrap instead of pushing the page sideways */ body.nfcr-site .nfcr-btn, body.nfcr-site .nfcr-chip { white-space: normal; max-width: 100%; text-align: center; } body.nfcr-site .nfcr-btn-combo, body.nfcr-site .nfcr-chips, body.nfcr-site .nfcr-chips__list { min-width: 0; max-width: 100%; } body.nfcr-site .nfcr-chip { text-align: left; } /* Short, uniform chip rows (the year pills): an equal-width grid instead of ragged wrapping (mobile.js sets the class) */ body.nfcr-site .nfcr-m-chipgrid { display: grid; grid-template-columns: repeat(var(--nfcr-m-cols, 3), minmax(0, 1fr)); gap: 10px; } body.nfcr-site .nfcr-m-chipgrid > * { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; min-width: 0; margin: 0; text-align: center; } /* The "See where your money goes" card link keeps its laptop colour in every state (a phone can apply visited / tapped colours) */ body.nfcr-site .nfcr-intro .nfcr-intro__card-link, body.nfcr-site .nfcr-intro .nfcr-intro__card-link:visited, body.nfcr-site .nfcr-intro .nfcr-intro__card-link:focus, body.nfcr-site .nfcr-intro .nfcr-intro__card-link:active, body.nfcr-site .nfcr-intro .nfcr-intro__card-link:hover { color: var(--nfcr-orange-soft) !important; } /* The laptop's space-above classes (16 / 26 / 40px) are too much on a phone: one tighter scale, so blocks sit 12-20px apart */ body.nfcr-site .nfcr-section .nfcr-mt-s { margin-top: 12px; } body.nfcr-site .nfcr-section .nfcr-mt-m { margin-top: 16px; } body.nfcr-site .nfcr-section .nfcr-mt-l { margin-top: 20px; } /* Pill blocks that follow a heading + text (e.g. "Why does cancer develop?"): even air above and below */ body.nfcr-site .nfcr-section .wpb_column + .wpb_column:has(.nfcr-chips--block) { margin-top: 0; } body.nfcr-site .nfcr-chips.nfcr-chips--block { margin-top: 2px !important; margin-bottom: 2px !important; } /* ... but next to another block (a card list, a button, a split box) a chip group keeps the normal 14px, it must not touch it; under a heading the heading's own margin is enough */ body.nfcr-site :not(.nfcr-guide__body) > .nfcr-chips.nfcr-chips--block:has(+ *) { margin-bottom: 14px !important; } body.nfcr-site :not(.nfcr-guide__body) > * + .nfcr-chips.nfcr-chips--block:not(.nfcr-sh + .nfcr-chips) { margin-top: 14px !important; } body.nfcr-site :not(.nfcr-guide__body) > .nfcr-sh + .nfcr-chips.nfcr-chips--block { margin-top: 8px !important; } /* A heading in its own column, with its text in the next column (two columns that stack on phones): the heading's bottom margin and the next column's top margin used to ADD UP (about 27px). Same gap as a heading with its own intro text (about 13px). Laptop: the two columns sit side by side, so nothing changes there. */ body.nfcr-site .nfcr-section .wpb_column:has(> .vc_column-inner > .wpb_wrapper > .nfcr-sh:last-child) > .vc_column-inner > .wpb_wrapper > .nfcr-sh { margin-bottom: 0; } body.nfcr-site .nfcr-section .wpb_column:has(> .vc_column-inner > .wpb_wrapper > .nfcr-sh:last-child) + .wpb_column { margin-top: 13px; } /* ---------- Toggles added by mobile.js ---------- */ .nfcr-m-more:not(.is-shown) { display: none !important; } body.nfcr-site .nfcr-m-toggle { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; margin: 0; padding: 6px 0; border: 0; background: none; box-shadow: none; font: 600 15px/1.3 var(--nfcr-font); color: var(--nfcr-orange); text-align: left; cursor: pointer; } body.nfcr-site .nfcr-m-toggle:hover { color: var(--nfcr-orange-hover); background: none; } body.nfcr-site .nfcr-panel--dark .nfcr-m-toggle, body.nfcr-site .nfcr-cta--dark .nfcr-m-toggle, body.nfcr-site .nfcr-split--dark .nfcr-m-toggle { color: var(--nfcr-orange-soft); } /* ---------- Accordion rows (pillars, numbered cards, program cards) ---------- */ .nfcr-m-acc__item:not(.is-open) > .nfcr-m-acc__body { display: none !important; } body.nfcr-site .nfcr-m-acc__item { min-height: 0 !important; gap: 0 !important; } /* pillars (text on the navy panel) are plain rows with dividers */ body.nfcr-site .nfcr-split__pillar.nfcr-m-acc__item { padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent) !important; border-radius: 0 !important; box-shadow: none !important; } body.nfcr-site .nfcr-split__pillar.nfcr-m-acc__item:first-child { border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent) !important; } /* numbered / topic cards: the laptop card (white, shadow), the row is its header */ body.nfcr-site .nfcr-cards .nfcr-card.nfcr-m-acc__item { padding: 0 !important; margin: 0 !important; } body.nfcr-site .nfcr-cards:has(> .nfcr-m-acc__item) { gap: 10px; } body.nfcr-site .nfcr-card.nfcr-m-acc__item > .nfcr-m-acc__head { padding: 14px 18px; } /* a card with a small label above its title ("Part 1" on the Living With Cancer jump cards): the label is part of the header, always visible, with room above it, and the title sits right under it (the label used to fold away and touch the card's top edge when opened) */ body.nfcr-site .nfcr-card.nfcr-m-acc__item > .nfcr-card__eyebrow { margin: 0; padding: 18px 18px 0; } body.nfcr-site .nfcr-card.nfcr-m-acc__item > .nfcr-card__eyebrow + .nfcr-m-acc__head { min-height: 0; padding-top: 4px; padding-bottom: 16px; } body.nfcr-site .nfcr-card.nfcr-m-acc__item > .nfcr-card__eyebrow ~ .nfcr-card__links { margin-top: 0; } /* numbered cards: [ 01 ] Title [+] - the number stays visible when the card is closed */ body.nfcr-site .nfcr-cards--numbered .nfcr-card.nfcr-m-acc__item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; } body.nfcr-site .nfcr-cards--numbered .nfcr-card.nfcr-m-acc__item > .nfcr-card__num { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 40px; height: 40px; margin: 0 0 0 16px; padding: 0; border-radius: 50%; font-size: 14px; line-height: 1; } body.nfcr-site .nfcr-cards--numbered .nfcr-card.nfcr-m-acc__item > .nfcr-m-acc__head { padding: 14px 16px 14px 14px; } body.nfcr-site .nfcr-cards--numbered .nfcr-card.nfcr-m-acc__item > .nfcr-m-acc__body { grid-column: 1 / -1; } body.nfcr-site .nfcr-card.nfcr-m-acc__item > .nfcr-m-acc__body { padding-left: 18px; padding-right: 18px; } body.nfcr-site .nfcr-m-acc__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 52px; margin: 0; padding: 14px 2px; font-size: 16px; font-weight: 600; line-height: 1.4; cursor: pointer; } body.nfcr-site .nfcr-m-acc__head::after { content: "+"; flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--nfcr-surface); color: var(--nfcr-orange); font-size: 18px; font-weight: 500; line-height: 1; } body.nfcr-site .nfcr-m-acc__item.is-open > .nfcr-m-acc__head::after { content: "\2212"; } body.nfcr-site .nfcr-m-acc__body { padding-bottom: 14px; } body.nfcr-site .nfcr-split__pillar .nfcr-split__pillar-num { display: none; } body.nfcr-site .nfcr-split .nfcr-split__pillars { margin: 0 0 20px; padding: 0 24px; } /* air between the last divider and the button below */ body.nfcr-site .nfcr-split .nfcr-split__pillars .nfcr-m-acc__head { padding-left: 0; padding-right: 0; } body.nfcr-site .nfcr-split .nfcr-split__pillars .nfcr-m-acc__body { padding-left: 0; padding-right: 0; } /* program cards: the photo banner is the row. Same banner as on the laptop: the photo fills it, a navy gradient sits behind the label and title (white text), the +/- on its corner. The programs underneath keep their padding and line up with the title (20px). */ body.nfcr-site .nfcr-pc__card.nfcr-m-acc__item { overflow: hidden; border: 0 !important; border-radius: 18px !important; background: #fff !important; box-shadow: 0 4px 14px rgba(2, 20, 60, .05) !important; margin: 0 0 10px !important; } body.nfcr-site .nfcr-pc__card .nfcr-pc__media.nfcr-m-acc__head { position: relative; height: 190px; min-height: 190px; padding: 0; } body.nfcr-site .nfcr-pc__card .nfcr-pc__media .nfcr-pc__img { z-index: 0; } /* single (non-accordion) program cards, e.g. the two big ones on Fundraising: same 190px banner and the text lines up with the title at 20px */ body.nfcr-site .nfcr-pc__card .nfcr-pc__media { height: 190px; } body.nfcr-site .nfcr-pc__card:not(.nfcr-m-acc__item) .nfcr-pc__entry { margin-left: 20px; margin-right: 20px; } body.nfcr-site .nfcr-pc__card .nfcr-pc__media.nfcr-m-acc__head::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 40%, var(--nfcr-navy) 100%); /* fallback */ background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--nfcr-navy) 88%, transparent) 100%); } body.nfcr-site .nfcr-pc__card .nfcr-pc__media.nfcr-m-acc__head::after { position: absolute; z-index: 2; left: auto; bottom: auto; inset: 14px 14px auto auto; width: 28px; height: 28px; background: #fff; } body.nfcr-site .nfcr-pc__card .nfcr-pc__media .nfcr-pc__heading { z-index: 2; } body.nfcr-site .nfcr-pc__card .nfcr-pc__entry.nfcr-m-acc__body { margin: 0 20px; padding: 22px 0 20px; } body.nfcr-site .nfcr-pc__card .nfcr-pc__entry.nfcr-m-acc__body + .nfcr-pc__entry.nfcr-m-acc__body { padding: 20px 0 24px; } /* ---------- Stats: rows with the figure on the left (design) ---------- */ body.nfcr-site .nfcr-stats .nfcr-stats__grid { padding-top: 16px !important; display: grid; grid-template-columns: minmax(0, 1fr) !important; gap: 8px; margin: 0; padding: 0; } body.nfcr-site .nfcr-stats .nfcr-stat { display: flex; flex-direction: row; align-items: center; gap: 14px; margin: 0; padding: 14px 16px; border-radius: 16px; text-align: left; } /* colours stay as on the laptop (white cards on the wash for "light", dark glass on navy...); only variants that have no box of their own get the pale row from the design */ body.nfcr-site .nfcr-stats--plain .nfcr-stat { border-radius: 0; } body.nfcr-site .nfcr-stats .nfcr-stat__value { flex: none; min-width: 76px; font-size: 26px; line-height: 1.15; font-weight: 700; white-space: nowrap; } body.nfcr-site .nfcr-stats .nfcr-stat__value--text { white-space: normal; overflow-wrap: anywhere; font-size: 18px; line-height: 1.25; } body.nfcr-site .nfcr-stats .nfcr-stat:has(.nfcr-stat__value--text) { flex-direction: column; align-items: flex-start; gap: 4px; } body.nfcr-site .nfcr-stats .nfcr-stat__label { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; } body.nfcr-site .nfcr-stats .nfcr-stat__dots { display: none; } /* Article page: the closing "Keep reading" block keeps the 12px gap above the footer like every other page */ body.nfcr-site .nfcr-art__more { margin-bottom: 12px; } /* Latest: the topic filter pills are all visible, no sideways scrolling: an even two-column grid (an odd last pill spans the full row), so every category can be seen at a glance */ body.nfcr-site .nfcr-feed .nfcr-feed__filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 20px; padding: 0; overflow: visible; } body.nfcr-site .nfcr-feed .nfcr-feed__filter { justify-content: center; text-align: center; min-height: 48px; padding: 10px 14px; } body.nfcr-site .nfcr-feed .nfcr-feed__filter:last-child:nth-child(odd) { grid-column: 1 / -1; } /* Link strip (Donate: "Tax-Smart Ways to Support NFCR"): on phones the options are separated by horizontal lines (after the 1st and the 2nd) with the same 18px above and below each line, instead of a vertical line beside each option; the text lines up with the heading */ body.nfcr-site .nfcr-strip .nfcr-strip__list { gap: 0; } body.nfcr-site .nfcr-strip .nfcr-strip__item { padding: 0; border-left: 0; } body.nfcr-site .nfcr-strip .nfcr-strip__li + .nfcr-strip__li { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--nfcr-line-chip); } /* Path cards (For Patients & Caregivers: "I have cancer" / "I'm caring for someone"): on phones they sit under the hero box, as wide as it is and 12px apart, instead of straddling its bottom edge (the laptop's overlap covered the last line of the hero text) */ body.nfcr-site .nfcr-hero-paths { margin: 12px 0 0; gap: 12px; } body.nfcr-site .nfcr-hero-paths a.nfcr-hero-path { padding: 18px 16px; gap: 14px; } /* Open row lists (For Patients & Caregivers): a closing line after the last row marks where the list ends (the laptop design leaves it open) */ body.nfcr-site .nfcr-rl--open:not(.nfcr-rl--has-note) .nfcr-rl__row:last-child { border-bottom: 1px solid var(--nfcr-line-chip); } body.nfcr-site .nfcr-rl--open.nfcr-rl--on-dark:not(.nfcr-rl--has-note) .nfcr-rl__row:last-child { border-bottom-color: var(--nfcr-on-dark-line); } /* ... unless a divider row follows the list (class nfcr-rule-top, e.g. inside the dark Caregivers panel): that divider is the one line, no doubling */ body.nfcr-site .vc_row:has(+ .vc_row.nfcr-rule-top) .nfcr-rl--open:not(.nfcr-rl--has-note) .nfcr-rl__row:last-child { border-bottom: 0; } body.nfcr-site .nfcr-section .vc_row:has(.nfcr-rl--open) + .vc_row.nfcr-rule-top { margin-top: 0; } /* the row already ends with its own padding: the divider sits evenly between the list and the next heading */ /* Checklist (the cancer type pages: "What happens after diagnosis?" + "A few steps can help"): heading and text, then the list, and the print button closes the section (it sat between the text and the list) */ body.nfcr-site .nfcr-checklist:not(.nfcr-checklist--tracker) { display: flex; flex-direction: column; gap: 14px; } body.nfcr-site .nfcr-checklist:not(.nfcr-checklist--tracker) > .nfcr-checklist__intro { display: contents; } body.nfcr-site .nfcr-checklist:not(.nfcr-checklist--tracker) .nfcr-checklist__intro > .nfcr-sh { order: 0; margin-bottom: 0; } body.nfcr-site .nfcr-checklist:not(.nfcr-checklist--tracker) > .nfcr-checklist__panel { order: 1; } body.nfcr-site .nfcr-checklist:not(.nfcr-checklist--tracker) .nfcr-checklist__print { order: 2; margin-top: 6px; } /* the person link ("Meet Dr. ... researcher"): the arrow follows the last word instead of running to the far edge (arrow tied by mobile.js) */ body.nfcr-site .nfcr-split__person .nfcr-m-tie svg { display: inline-block; margin-left: 6px; vertical-align: -3px; } /* Stats that carry a picture (9 in 10: the row of people; 61 years and <1%: a line with its scale): the figure and its label stay on one row and the picture takes the full row under them (it used to be squeezed in beside them, which crushed the label into a sliver) */ body.nfcr-site .nfcr-stats .nfcr-stat:has(> .nfcr-stat__people, > .nfcr-stat__line) { flex-wrap: wrap; row-gap: 0; } body.nfcr-site .nfcr-stats .nfcr-stat:has(> .nfcr-stat__people, > .nfcr-stat__line) > .nfcr-stat__label { flex: 1 1 0; } body.nfcr-site .nfcr-stats .nfcr-stat > .nfcr-stat__people, body.nfcr-site .nfcr-stats .nfcr-stat > .nfcr-stat__line, body.nfcr-site .nfcr-stats .nfcr-stat > .nfcr-stat__scale { flex: 0 0 100%; min-width: 0; box-sizing: border-box; } body.nfcr-site .nfcr-stats .nfcr-stat > .nfcr-stat__people { flex-wrap: wrap; } /* Amount cards ("The power of your donation") read as the same rows */ body.nfcr-site .nfcr-cards--amount { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; } body.nfcr-site .nfcr-cards--amount .nfcr-card { display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; text-align: left; } body.nfcr-site .nfcr-cards--amount .nfcr-card__title { flex: none; min-width: 92px; margin: 0; font-size: 22px; font-weight: 700; text-align: left; } body.nfcr-site .nfcr-cards--amount .nfcr-card__text { margin: 0; font-size: 14px; line-height: 1.5; } /* ---------- Project index ("01 Free Radicals..."): one white list, straight full-width dividers ---------- */ body.nfcr-site .nfcr-cards.nfcr-cards--index { gap: 0 !important; border-radius: 20px; overflow: hidden; } body.nfcr-site .nfcr-cards.nfcr-cards--index .nfcr-card { border-radius: 0; box-shadow: none; border: 0; border-bottom: 1px solid #E3E8F2; } body.nfcr-site .nfcr-cards.nfcr-cards--index .nfcr-card:last-child { border-bottom: 0; } /* ---------- Cards: one column, 10px apart ---------- */ body.nfcr-site .nfcr-cards { display: grid; grid-template-columns: minmax(0, 1fr) !important; gap: 10px; } body.nfcr-site .nfcr-cards .nfcr-card { border-radius: 18px; } /* Points ("Every contribution moves the mission forward"): a bold line under a straight orange rule, no card: no rounded corners (they bent the rule) */ /* ... and each statement sits centred between two orange rules (equal space above and below), with a closing rule after the last one */ body.nfcr-site .nfcr-cards.nfcr-cards--points { gap: 0; } body.nfcr-site .nfcr-cards--points .nfcr-card { border-radius: 0; padding: 18px 0; } body.nfcr-site .nfcr-cards--points .nfcr-card:last-child { border-bottom: 2px solid var(--nfcr-accent); } /* Joined cards (one panel, hairline dividers) and plain stat rows (hairline rules) are not boxes: rounded corners bent their dividers */ body.nfcr-site .nfcr-cards--joined .nfcr-card { border-radius: 0; } /* team portraits: a compact row, not a tall photo */ body.nfcr-site .nfcr-cards--portrait .nfcr-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 12px 14px; } body.nfcr-site .nfcr-cards--portrait .nfcr-card__portrait, body.nfcr-site .nfcr-cards--portrait .nfcr-card__avatar { grid-row: 1 / span 3; width: 72px; height: 72px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; } /* ---------- Page Header (.nfcr-hero): picture first, then the text: layout only, colours stay as on the laptop ---------- */ body.nfcr-site .nfcr-hero:not(.nfcr-hero--profile) { display: flex; flex-direction: column; margin-top: 0; border-radius: 24px; overflow: hidden; } body.nfcr-site .nfcr-hero:not(.nfcr-hero--profile) .nfcr-hero__img { position: static; order: -1; display: block; width: 100%; height: 260px; opacity: 1; object-fit: cover; z-index: auto; } body.nfcr-site .nfcr-hero:not(.nfcr-hero--profile) .nfcr-hero__shade { display: none; } body.nfcr-site .nfcr-hero:not(.nfcr-hero--profile) .nfcr-hero__body { max-width: none; padding: 26px 20px; } body.nfcr-site .nfcr-hero:not(.nfcr-hero--profile) .nfcr-hero__crumbs { margin-bottom: 14px; } body.nfcr-site .nfcr-hero__crumbs--outside { padding: 0 8px; } body.nfcr-site .nfcr-hero:not(.nfcr-hero--profile) .nfcr-hero__ribbon { font-size: 12px; letter-spacing: .5px; } body.nfcr-site .nfcr-hero:not(.nfcr-hero--profile) .nfcr-hero__intro, body.nfcr-site .nfcr-hero:not(.nfcr-hero--profile) .nfcr-hero__lead { max-width: none; margin-top: 12px; } body.nfcr-site .nfcr-hero:not(.nfcr-hero--profile) .nfcr-hero__lead { font-size: 17px; font-weight: 500; } body.nfcr-site .nfcr-hero:not(.nfcr-hero--profile) .nfcr-hero__actions { margin-top: 18px; } body.nfcr-site .nfcr-m-toggle.nfcr-m-toggle--on-dark { color: var(--nfcr-orange-soft); } /* facts / "parts" strips inside the hero: stacked under the text, laptop colours */ body.nfcr-site .nfcr-hero:not(.nfcr-hero--profile) .nfcr-hero__facts, body.nfcr-site .nfcr-hero:not(.nfcr-hero--profile) .nfcr-hero__parts { position: static; display: grid; grid-template-columns: minmax(0, 1fr); width: auto; margin: 0; } body.nfcr-site .nfcr-hero:not(.nfcr-hero--profile) .nfcr-hero__fact { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 14px; } body.nfcr-site .nfcr-hero:not(.nfcr-hero--profile) .nfcr-hero__fact-value { min-width: 76px; font-size: 26px; } body.nfcr-site .nfcr-hero:not(.nfcr-hero--profile) .nfcr-hero__fact-label { margin: 0; font-size: 14px; } /* hero parts that link to their first guide topic: the whole row is the tap target, the arrow sits in a round chip on the right */ body.nfcr-site .nfcr-hero .nfcr-hero__part-link { justify-content: center; min-height: 48px; padding-right: 52px; } body.nfcr-site .nfcr-hero .nfcr-hero__part-go { top: 50%; right: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--nfcr-surface); transform: translateY(-50%); } body.nfcr-site .nfcr-hero .nfcr-hero__part-go svg { width: 16px; height: 16px; } body.nfcr-site .nfcr-hero .nfcr-hero__part-link:hover .nfcr-hero__part-go { transform: translateY(-50%); } /* a fact whose value is a phrase, not a figure ("3 main groups"): the value sits above its label instead of beside it */ body.nfcr-site .nfcr-m-stack { flex-direction: column-reverse !important; align-items: flex-start !important; gap: 4px !important; } /* ---------- Intro (hero variant with photo): photo on top, then the text on the page background (laptop colours) ---------- */ body.nfcr-site .nfcr-intro { display: flex; flex-direction: column; gap: 0; padding: 0; } body.nfcr-site .nfcr-intro .nfcr-intro__media { display: contents; } body.nfcr-site .nfcr-intro .nfcr-intro__media.nfcr-intro__media--card { display: block; position: relative; order: 2; width: auto; height: auto; margin: 0 0 12px; padding: 24px 22px; } body.nfcr-site .nfcr-intro .nfcr-intro__pic--main, body.nfcr-site .nfcr-intro .nfcr-intro__photo { position: relative; order: -1; width: 100%; height: 260px; border: 0; border-radius: 24px; inset: auto; overflow: hidden; } body.nfcr-site .nfcr-intro .nfcr-intro__pic--small { display: none; } body.nfcr-site .nfcr-intro .nfcr-intro__img { position: static; display: block; width: 100%; height: 260px; object-fit: cover; order: -1; border-radius: 24px; } body.nfcr-site .nfcr-intro .nfcr-intro__pic .nfcr-intro__img, body.nfcr-site .nfcr-intro .nfcr-intro__photo .nfcr-intro__img { position: absolute; inset: 0; width: 100%; height: 100%; } body.nfcr-site .nfcr-intro .nfcr-intro__body { order: 0; padding: 22px 8px 14px; } body.nfcr-site .nfcr-intro .nfcr-intro__stat, body.nfcr-site .nfcr-intro .nfcr-intro__media--collage .nfcr-intro__stat { position: static; inset: auto; transform: none; width: auto; max-width: none; order: 2; display: flex; align-items: center; gap: 14px; margin: 0 0 12px; padding: 14px 16px; } body.nfcr-site .nfcr-intro .nfcr-intro__stat-value, body.nfcr-site .nfcr-intro .nfcr-intro__media--collage .nfcr-intro__stat-value { flex: none; min-width: 76px; font-size: 26px; } body.nfcr-site .nfcr-intro .nfcr-intro__stat-label { font-size: 14px; line-height: 1.5; } body.nfcr-site .nfcr-intro .nfcr-intro__aside { order: 3; margin: 0 0 12px; border-radius: 18px; } /* stacked variant (Ways to Give): the photo comes first like the other pages (order -1 above), then the text, then the questions box */ body.nfcr-site .nfcr-intro .nfcr-intro__statement { margin-top: 14px; } /* The photo's stat card sits ON the photo, as on the laptop. Who We Are (collage): it straddles the bottom edge of the photo. Other intros (How to Help, What We Fund, Fundraising): inside the photo, 14px from its edges. */ body.nfcr-site .nfcr-intro .nfcr-intro__media:has(.nfcr-intro__stat) { display: block; position: relative; order: -1; width: 100%; height: auto; min-height: 0; } body.nfcr-site .nfcr-intro .nfcr-intro__media:has(.nfcr-intro__stat) .nfcr-intro__stat { position: absolute; z-index: 3; order: 0; margin: 0; top: auto; left: 14px; right: 14px; bottom: 14px; width: auto; max-width: none; transform: none; } body.nfcr-site .nfcr-intro .nfcr-intro__media--collage:has(.nfcr-intro__stat) { margin-bottom: 44px; } body.nfcr-site .nfcr-intro .nfcr-intro__media--collage:has(.nfcr-intro__stat) .nfcr-intro__stat { left: 16px; right: auto; bottom: -34px; max-width: calc(100% - 32px); } /* Photo with a caption on it (Discoveries): the photo stays one box, so its gradient and caption stay on the photo */ body.nfcr-site .nfcr-intro .nfcr-intro__media.nfcr-intro__media--caption { display: block; position: relative; order: -1; width: 100%; height: 300px; min-height: 0; overflow: hidden; border-radius: 24px; } body.nfcr-site .nfcr-intro .nfcr-intro__media.nfcr-intro__media--caption .nfcr-intro__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; order: 0; } /* ---------- Home hero: photo slider on top (260px), facts stacked under the text ---------- */ body.nfcr-site .nfcr-intro .nfcr-intro__media--slider { display: grid; position: relative; order: -1; width: 100%; height: auto; min-height: 0; padding-top: 260px; overflow: visible; border-radius: 0; background: none; } body.nfcr-site .nfcr-intro .nfcr-intro__media--slider::after { display: none; } body.nfcr-site .nfcr-intro .nfcr-intro__media--slider .nfcr-intro__slide { position: absolute; inset: 0 0 auto 0; width: 100%; height: 260px; border-radius: 24px; } body.nfcr-site .nfcr-intro .nfcr-intro__media--slider .nfcr-intro__arrow { top: 130px; } /* 0.9.36: the stats sit right under the photo, full width (a strip of up to 3 rows), with one photo or a slider. order -1 keeps them next to the photo (the photo is order -1 and comes first in the page), ahead of the text. */ body.nfcr-site .nfcr-intro .nfcr-intro__facts { position: static; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; order: -1; align-self: stretch; width: auto; min-width: 0; margin: 12px 0 12px; padding: 4px 0; list-style: none; } body.nfcr-site .nfcr-intro .nfcr-intro__facts[data-count] { width: auto; min-width: 0; margin: 12px 0 12px; } body.nfcr-site .nfcr-intro .nfcr-intro__media--facts::after { display: none; } /* the photo fade was for stats on the photo; on a phone they sit under it */ /* Slider: only the strip of the photo showing takes space under the photo (no gap for a photo with fewer stats); it fades in with the photo */ body.nfcr-site .nfcr-intro .nfcr-intro__media--slider .nfcr-intro__facts--slide { display: none; } body.nfcr-site .nfcr-intro .nfcr-intro__media--slider .nfcr-intro__facts--slide.is-active { display: grid; opacity: 1; visibility: visible; animation: nfcr-facts-in .6s ease; } @keyframes nfcr-facts-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { body.nfcr-site .nfcr-intro .nfcr-intro__media--slider .nfcr-intro__facts--slide.is-active { animation: none; } } body.nfcr-site .nfcr-intro .nfcr-intro__fact { display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; gap: 2px 14px; padding: 14px 16px; } body.nfcr-site .nfcr-intro .nfcr-intro__fact + .nfcr-intro__fact { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .3); } body.nfcr-site .nfcr-intro .nfcr-intro__fact-value { flex: none; min-width: 76px; max-width: 100%; font-size: 22px; font-weight: 700; } body.nfcr-site .nfcr-intro .nfcr-intro__fact-label { flex: 1 1 150px; min-width: 0; margin-top: 0; font-size: 14px; line-height: 1.5; } /* a long value (a campaign name) pushes its label to the next line */ /* A stat with text only: the text takes the whole row */ body.nfcr-site .nfcr-intro .nfcr-intro__fact--text .nfcr-intro__fact-label { flex: 1 1 100%; font-size: 16px; font-weight: 600; line-height: 1.45; } /* A stat whose headline is a phrase (a campaign name; mobile.js adds nfcr-m-stack): headline first, its label under it */ body.nfcr-site .nfcr-intro .nfcr-intro__facts .nfcr-intro__fact.nfcr-m-stack { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; } body.nfcr-site .nfcr-intro .nfcr-intro__facts .nfcr-intro__fact.nfcr-m-stack .nfcr-intro__fact-label { flex: none; } /* ---------- History timeline (Who We Are): a vertical grey line joins the rings, as the horizontal one does on the laptop ---------- */ body.nfcr-site .nfcr-steps.nfcr-steps--timeline { display: block; position: relative; } body.nfcr-site .nfcr-steps--timeline .nfcr-step { display: block; position: relative; padding: 0 0 26px 40px; } body.nfcr-site .nfcr-steps--timeline .nfcr-step__dot { position: absolute; left: 0; top: 0; } body.nfcr-site .nfcr-steps--timeline .nfcr-step::before { display: block; content: ""; position: absolute; left: 9px; right: auto; top: 24px; bottom: 2px; width: 2px; height: auto; background: #C9D4EA; } body.nfcr-site .nfcr-steps--timeline .nfcr-step:last-child { padding-bottom: 0; } body.nfcr-site .nfcr-steps--timeline .nfcr-step:last-child::before { display: none; } body.nfcr-site .nfcr-steps--timeline .nfcr-step__year { margin-top: 0; font-size: 26px; } body.nfcr-site .nfcr-steps--timeline .nfcr-step__title { margin-top: 8px; font-size: 17px; } body.nfcr-site .nfcr-steps--timeline .nfcr-step__text { font-size: 15px; line-height: 1.55; } body.nfcr-site .nfcr-steps__end { margin-top: 16px; } /* ---------- Home timeline: kept as it is; its closing link becomes the design's full-width button ---------- */ body.nfcr-site .nfcr-timeline .nfcr-timeline__item--end { margin: 0; padding: 8px 0 0; border: 0; list-style: none; } body.nfcr-site .nfcr-timeline .nfcr-timeline__item--end::before { display: none; } body.nfcr-site .nfcr-timeline .nfcr-timeline__item--end a.nfcr-link { display: block; box-sizing: border-box; width: 100%; padding: 15px 20px; border-radius: 28px; background: var(--nfcr-orange); color: #fff !important; font-size: 16px; font-weight: 600; line-height: 1.35; text-align: center; } body.nfcr-site .nfcr-timeline .nfcr-timeline__item--end a.nfcr-link:hover { background: var(--nfcr-orange-hover); } body.nfcr-site .nfcr-timeline .nfcr-timeline__item--end a.nfcr-link svg { display: none; } /* ---------- Guide: the laptop guide rebuilt for phones ---------- progress card ("Your guide n / N") -> part headings -> topic cards (part pill, "Topic n of N", +/-) -> Previous / Next bar. Colours are the laptop's: white cards, navy text, orange accents. */ body.nfcr-site .nfcr-guide.nfcr-m-guide { display: block; background: none; box-shadow: none; } body.nfcr-site .nfcr-m-guide .nfcr-guide__nav, body.nfcr-site .nfcr-m-guide .nfcr-guide__pager { display: none !important; } body.nfcr-site .nfcr-m-guide .nfcr-guide__panel { padding: 0; background: none; box-shadow: none; border-radius: 0; overflow: visible; } body.nfcr-site .nfcr-m-guide .nfcr-guide__stage { padding: 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; } /* progress card */ body.nfcr-site .nfcr-m-gprog { display: block; box-sizing: border-box; padding: 18px 20px 16px; border-radius: 24px; background: #fff; } body.nfcr-site .nfcr-m-gprog__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: var(--nfcr-fs-meta); font-weight: 600; color: var(--nfcr-navy); } body.nfcr-site .nfcr-m-gprog__count { white-space: nowrap; } body.nfcr-site .nfcr-m-gprog__bar { height: 6px; border-radius: 6px; background: var(--nfcr-track); overflow: hidden; } body.nfcr-site .nfcr-m-gprog__fill { display: block; width: var(--nfcr-guide-pct, 0%); height: 100%; border-radius: 6px; background: var(--nfcr-orange); transition: width .3s; } body.nfcr-site .nfcr-m-gprog__note { margin: 10px 0 0; font-size: 13px; line-height: 1.4; color: var(--nfcr-text-2); } /* part heading (the laptop navigator's "PART 2 / Reduce your risk / 7 topics") */ body.nfcr-site .nfcr-m-gpart { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 12px 0 0; padding: 0 8px; } body.nfcr-site .nfcr-m-gpart__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } body.nfcr-site .nfcr-m-gpart__num { font-size: 12px; font-weight: 700; letter-spacing: .9px; line-height: 1.3; text-transform: uppercase; color: var(--nfcr-orange); } body.nfcr-site .nfcr-m-gpart__name { font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: -.2px; color: var(--nfcr-navy); } body.nfcr-site .nfcr-m-gpart__n { flex-shrink: 0; padding-bottom: 2px; font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--nfcr-text-2); } /* topic card */ html.nfcr-js body.nfcr-site .nfcr-m-guide .nfcr-guide__topic, body.nfcr-site .nfcr-m-guide .nfcr-guide__topic { display: block !important; margin: 0; padding: 18px 20px 20px; border: 0; border-radius: 24px; background: #fff; /* the laptop guide panel is white */ scroll-margin-top: calc(var(--nfcr-header-h, 80px) + 10px); } body.nfcr-site .nfcr-m-guide .nfcr-guide__topic + .nfcr-guide__topic { margin-top: 0; padding-top: 18px; border-top: 0; } body.nfcr-site .nfcr-m-gtopic .nfcr-guide__meta { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; margin: 0 0 12px; cursor: pointer; } body.nfcr-site .nfcr-m-gtopic .nfcr-guide__pill { display: none; } /* the full "Part 1 ยท Name" pill is the laptop's; the phone shows the short one + the part heading */ body.nfcr-site .nfcr-m-gtopic .nfcr-m-gpill { display: inline-block; flex-shrink: 0; padding: 5px 12px; border-radius: var(--nfcr-r-chip); background: var(--nfcr-orange-tint); font-size: 12px; font-weight: 700; letter-spacing: .6px; line-height: 1.4; text-transform: uppercase; color: var(--nfcr-orange-deep); } body.nfcr-site .nfcr-m-gtopic .nfcr-guide__count { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--nfcr-text-2); } body.nfcr-site .nfcr-m-gtopic .nfcr-m-gplus { all: unset; box-sizing: border-box; display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 34px; height: 34px; margin-left: auto; border-radius: 50%; background: var(--nfcr-surface); font: 500 20px/1 var(--nfcr-font); color: var(--nfcr-orange); cursor: pointer; -webkit-tap-highlight-color: transparent; } body.nfcr-site .nfcr-m-gtopic .nfcr-m-gplus::before { content: "+"; } body.nfcr-site .nfcr-m-gtopic.is-open .nfcr-m-gplus::before { content: "\2212"; } body.nfcr-site .nfcr-m-gtopic .nfcr-m-gplus:focus-visible { outline: 2px solid var(--nfcr-navy); outline-offset: 2px; } body.nfcr-site .nfcr-m-gtopic .nfcr-m-gtopic__head { padding: 0; min-height: 0; cursor: pointer; } body.nfcr-site .nfcr-m-gtopic .nfcr-sh { margin-bottom: 0; } body.nfcr-site .nfcr-m-gtopic .nfcr-sh .nfcr-sh__title { font-size: 22px; line-height: 1.2; } body.nfcr-site .nfcr-m-gtopic.is-open .nfcr-guide__body { margin-top: 18px; } body.nfcr-site .nfcr-m-gtopic:not(.is-open) .nfcr-guide__body, body.nfcr-site .nfcr-m-gtopic:not(.is-open) .nfcr-m-gtopic__head .nfcr-sh__lead, body.nfcr-site .nfcr-m-gtopic:not(.is-open) .nfcr-m-gtopic__head .nfcr-sh__intro, body.nfcr-site .nfcr-m-gtopic:not(.is-open) .nfcr-m-gpager { display: none; } /* Previous / Next bar (full width at the foot of an opened topic, as the laptop panel's pager) */ body.nfcr-site .nfcr-m-gpager { display: grid; grid-template-columns: 1fr 1fr; margin: 22px -20px -20px; border-top: 1px solid var(--nfcr-line); } body.nfcr-site .nfcr-m-gpager.nfcr-m-gpager--solo { grid-template-columns: minmax(0, 1fr); } body.nfcr-site .nfcr-m-gpager__btn { all: unset; box-sizing: border-box; display: block; min-width: 0; padding: 14px 18px 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; } body.nfcr-site .nfcr-m-gpager__btn:focus-visible { outline: 2px solid var(--nfcr-navy); outline-offset: -4px; } body.nfcr-site .nfcr-m-gpager__prev { border-right: 1px solid var(--nfcr-line); border-bottom-left-radius: 24px; text-align: left; } body.nfcr-site .nfcr-m-gpager--solo .nfcr-m-gpager__prev { border-right: 0; border-bottom-right-radius: 24px; } body.nfcr-site .nfcr-m-gpager__prev:disabled { opacity: .4; cursor: default; } body.nfcr-site .nfcr-m-gpager__next { border-bottom-right-radius: 24px; background: var(--nfcr-navy); text-align: right; } body.nfcr-site .nfcr-m-gpager__label { display: block; font: 700 11.5px/1.4 var(--nfcr-font); letter-spacing: .8px; text-transform: uppercase; } body.nfcr-site .nfcr-m-gpager__prev .nfcr-m-gpager__label { color: var(--nfcr-text-2); } body.nfcr-site .nfcr-m-gpager__next .nfcr-m-gpager__label { color: var(--nfcr-orange-on-navy); } body.nfcr-site .nfcr-m-gpager__title { display: block; margin-top: 4px; font: 600 14.5px/1.3 var(--nfcr-font); overflow-wrap: anywhere; } body.nfcr-site .nfcr-m-gpager__prev .nfcr-m-gpager__title { color: var(--nfcr-navy); } body.nfcr-site .nfcr-m-gpager__next .nfcr-m-gpager__title { color: #fff; } /* journey steps inside a topic: one column (guide.css packs them 2-up, which pushed the cards out of the topic card) */ body.nfcr-site .nfcr-guide .nfcr-guide__body .nfcr-steps { grid-template-columns: minmax(0, 1fr); } } /* the toggles only exist on phones */ .nfcr-m-toggle, .nfcr-m-gprog, .nfcr-m-gpart, .nfcr-m-gpill, .nfcr-m-gplus, .nfcr-m-gpager { display: none; }