/* FundingSpark theme. build_site.py puts it in every page. Light and dark: the page follows the visitor's system setting ("Auto") unless they pick Light or Dark with the switch in the header (site/directives/theme-switch.html), which puts data-theme="light" or data-theme="dark" on . The dark colours are written twice below (once for Auto, once for a forced Dark) because plain CSS cannot share them. Every rule here sets its values explicitly. The two font families (below, fs-v6y.6) are served from our own /fonts/, not fetched from Google; without them the fallbacks are used. */ /* Fraunces and Source Sans 3 (OFL, site/fonts/OFL-*.txt), latin subset only (covers French accents). Each weight repeats the same file per family/style - Google Fonts serves one variable font per style and lets font-weight pick the instance, so this saves a second download. font-display: optional (fs-s6s.1, Derick 2026-09-27: "the whole page bounces ... it's unprofessional"): "swap" always shows the fallback font first and then reflows the page once the real font arrives, which is the bounce. "optional" gives the font a short window (about 100ms, which the self-hosted files preloaded below normally beat) to be ready before first paint; if it is not, the page keeps the fallback for that visit instead of swapping in later and moving text. */ @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 500; font-display: optional; src: url(/fonts/fraunces-italic.woff2) format('woff2'); } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 500; font-display: optional; src: url(/fonts/fraunces.woff2) format('woff2'); } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: optional; src: url(/fonts/fraunces.woff2) format('woff2'); } @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: optional; src: url(/fonts/sourcesans3.woff2) format('woff2'); } @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: optional; src: url(/fonts/sourcesans3.woff2) format('woff2'); } @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 700; font-display: optional; src: url(/fonts/sourcesans3.woff2) format('woff2'); } @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 800; font-display: optional; src: url(/fonts/sourcesans3.woff2) format('woff2'); } :root { color-scheme: light; --paper: #fbf8f2; --paper-2: #f3eee4; --card: #ffffff; --ink: #1a1e20; --ink-2: #41484d; --ink-3: #5c6468; --rule: #e3dccd; --rule-2: #cbc1ad; --teal: #1f4e5f; --teal-2: #173d4b; --teal-soft: #e3eef1; --on-teal: #ffffff; --link: #1b5a6e; --gold: #a87400; --gold-ink: #825a00; --gold-soft: #fbf0d6; --on-gold: #1f1600; --gold-fill: #dfa941; --urgent: #a8261c; --urgent-soft: #fbe9e6; --soon: #7a4d00; --soon-soft: #fdf0d9; --closed: #5c6468; --closed-soft: #eeebe5; --hero-1: #1f4e5f; --hero-2: #12323e; --hero-ink: #ffffff; --hero-ink-2: #d4e6ec; --focus: #a87400; --shadow: 0 1px 2px rgba(31, 40, 44, .06), 0 4px 14px rgba(31, 40, 44, .06); --shadow-lift: 0 2px 4px rgba(31, 40, 44, .08), 0 10px 24px rgba(31, 40, 44, .10); /* one hue per kind of funding: [text on soft background] */ --k-grant: #1b5a6e; --k-grant-bg: #e1eef2; --k-fellowship: #4b3f8f; --k-fellowship-bg: #ebe8f7; --k-prize: #825a00; --k-prize-bg: #fbefd2; --k-residency: #2e6337; --k-residency-bg: #e4f1e5; --k-scholarship: #8a2f5b; --k-scholarship-bg: #f8e6ee; --k-call: #9a4a1f; --k-call-bg: #fbe8dc; --radius: 12px; --radius-s: 8px; --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-head: "Fraunces", Georgia, "Times New Roman", serif; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --paper: #0f1719; --paper-2: #142024; --card: #17242a; --ink: #eef2f0; --ink-2: #c4cfcf; --ink-3: #9eadae; --rule: #28393f; --rule-2: #3b5159; --teal: #8cc8da; --teal-2: #a9d9e7; --teal-soft: #173640; --on-teal: #0b1d23; --link: #93d0e2; --gold: #e9b755; --gold-ink: #efc46e; --gold-soft: #33280f; --on-gold: #1f1600; --gold-fill: #e9b755; --urgent: #ff9f93; --urgent-soft: #3d1c19; --soon: #f3c56a; --soon-soft: #33280f; --closed: #9eadae; --closed-soft: #1f2c31; --hero-1: #16343f; --hero-2: #0e2229; --hero-ink: #f4f7f6; --hero-ink-2: #bcd6de; --focus: #e9b755; --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-lift: 0 4px 18px rgba(0, 0, 0, .45); --k-grant: #93d0e2; --k-grant-bg: #173640; --k-fellowship: #c3b9f5; --k-fellowship-bg: #2a2548; --k-prize: #efc46e; --k-prize-bg: #33280f; --k-residency: #9fd6a7; --k-residency-bg: #1b3520; --k-scholarship: #f2a9c9; --k-scholarship-bg: #3e1e2e; --k-call: #f0b18c; --k-call-bg: #3a1f10; } } :root[data-theme="dark"] { color-scheme: dark; --paper: #0f1719; --paper-2: #142024; --card: #17242a; --ink: #eef2f0; --ink-2: #c4cfcf; --ink-3: #9eadae; --rule: #28393f; --rule-2: #3b5159; --teal: #8cc8da; --teal-2: #a9d9e7; --teal-soft: #173640; --on-teal: #0b1d23; --link: #93d0e2; --gold: #e9b755; --gold-ink: #efc46e; --gold-soft: #33280f; --on-gold: #1f1600; --gold-fill: #e9b755; --urgent: #ff9f93; --urgent-soft: #3d1c19; --soon: #f3c56a; --soon-soft: #33280f; --closed: #9eadae; --closed-soft: #1f2c31; --hero-1: #16343f; --hero-2: #0e2229; --hero-ink: #f4f7f6; --hero-ink-2: #bcd6de; --focus: #e9b755; --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-lift: 0 4px 18px rgba(0, 0, 0, .45); --k-grant: #93d0e2; --k-grant-bg: #173640; --k-fellowship: #c3b9f5; --k-fellowship-bg: #2a2548; --k-prize: #efc46e; --k-prize-bg: #33280f; --k-residency: #9fd6a7; --k-residency-bg: #1b3520; --k-scholarship: #f2a9c9; --k-scholarship-bg: #3e1e2e; --k-call: #f0b18c; --k-call-bg: #3a1f10; } /* ---------- Page ---------- */ *, *::before, *::after { box-sizing: border-box; } /* scrollbar-gutter (fs-s6s.1): a page that needs a vertical scrollbar is otherwise a hair narrower than one that does not, so the centred body's margins shift by half the scrollbar's width every time a nav tab lands on a page of a different height. Reserving the gutter on every page removes that difference regardless of which pages happen to need the scrollbar. */ html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; } body { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.6; max-width: 980px; margin: 0 auto; padding: 0 20px; text-align: left; overflow-wrap: break-word; transition: background-color .2s ease, color .2s ease; } main { line-height: 1.6; padding-bottom: 8px; } h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); line-height: 1.18; font-weight: 600; letter-spacing: -0.01em; } h1 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.6rem); margin: .5em 0 .4em; font-variation-settings: "opsz" 96; } h2 { font-size: 1.4rem; margin: 1.8em 0 .5em; } h3 { font-size: 1.12rem; margin: 1.2em 0 .3em; } p, ul, ol { margin: 0 0 1em; } strong, b { color: inherit; font-weight: 700; } a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { text-decoration-thickness: 2px; } img { max-width: 100%; } table { width: 100%; } hr { border: 0; border-top: 1px solid var(--rule); margin: 2em 0; } main > p, main > ul, main > ol { max-width: none; } :focus { outline: none; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; } ::selection { background: var(--gold-soft); color: var(--ink); } [hidden] { display: none !important; } .fs-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- Header, nav and footer ---------- */ body > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 18px 0 10px; border-bottom: 1px solid var(--rule); margin-bottom: 8px; } body > header .title { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; border-radius: 6px; } body > header .title:hover { text-decoration: none; } body > header .title h1, body > header .title h2 { font-size: 1.35rem; margin: 0; display: flex; align-items: center; gap: 8px; letter-spacing: -0.02em; font-variation-settings: "opsz" 48; } body > header .title h1::before, body > header .title h2::before { content: ""; width: 26px; height: 26px; flex: none; border-radius: 8px; background-color: #1f4e5f; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e9b755' d='M12 2.5c.5 4.6 2.9 7 7.5 7.5v1c-4.6.5-7 2.9-7.5 7.5h-1c-.5-4.6-2.9-7-7.5-7.5v-1c4.6-.5 7-2.9 7.5-7.5z'/%3E%3C/svg%3E"); background-size: 22px; background-position: center 3px; background-repeat: no-repeat; } body > header nav { flex-basis: 100%; order: 3; } body > header nav p { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 4px; } body > header nav a { margin: 0; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .95rem; padding: 6px 10px; border-radius: 999px; } body > header nav a:first-child { margin-left: -10px; } body > header nav a:hover { background: var(--paper-2); color: var(--ink); } body > header nav a[aria-current="page"] { color: var(--teal); background: var(--teal-soft); } body > footer { color: var(--ink-3); font-size: .88rem; border-top: 1px solid var(--rule); margin-top: 3.5em; padding: 22px 0 36px; text-align: left; display: flex; flex-direction: column; gap: 10px; } body > footer a { color: var(--ink-2); } #footer-directive { display: block; } .fs-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; } .fs-foot p { margin: 0; max-width: 60ch; } .fs-foot nav { display: flex; flex-wrap: wrap; gap: 4px 16px; } /* Theme switch: Auto / Light / Dark (built by site/directives/footer.html) */ .fs-theme { display: inline-flex; border: 1px solid var(--rule-2); border-radius: 999px; padding: 3px; background: var(--card); margin: 0; min-inline-size: 0; } .fs-theme legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .fs-theme input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } .fs-theme label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; padding: 5px 11px; border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--ink-2); line-height: 1.2; user-select: none; } .fs-theme label svg { width: 15px; height: 15px; flex: none; } .fs-theme label:hover { color: var(--ink); background: var(--paper-2); } .fs-theme input:checked + label { background: var(--teal); color: var(--on-teal); } .fs-theme input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 1px; } body > footer .fs-theme { align-self: flex-start; } /* ---------- Shared pieces ---------- */ .fs-tag { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--gold-soft); color: var(--gold-ink); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); padding: 2px 8px; border-radius: 999px; vertical-align: middle; font-family: var(--font-body); } .fs-small { font-size: .88rem; color: var(--ink-3); } .fs-lede { font-size: 1.15rem; color: var(--ink-2); max-width: none; } .fs-btn, #fs-app .fs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; padding: 11px 18px; border-radius: 999px; border: 1.5px solid var(--teal); background: var(--card); color: var(--teal); min-height: 44px; transition: background-color .15s ease, color .15s ease, transform .1s ease, box-shadow .15s ease; } .fs-btn:hover { background: var(--teal-soft); text-decoration: none; } .fs-btn:active { transform: translateY(1px); } .fs-btn svg { width: 18px; height: 18px; flex: none; } .fs-btn-primary, #fs-app .fs-btn-primary { background: var(--teal); color: var(--on-teal); border-color: var(--teal); } .fs-btn-primary:hover, #fs-app .fs-btn-primary:hover { background: var(--teal-2); border-color: var(--teal-2); color: var(--on-teal); } .fs-btn-gold { background: var(--gold-fill); color: var(--on-gold); border-color: var(--gold-fill); } .fs-btn-gold:hover { background: color-mix(in srgb, var(--gold-fill) 82%, #fff); border-color: color-mix(in srgb, var(--gold-fill) 82%, #fff); color: var(--on-gold); } .fs-btn-ghost { background: transparent; color: var(--hero-ink); border-color: color-mix(in srgb, var(--hero-ink) 55%, transparent); } .fs-btn-ghost:hover { background: rgba(255, 255, 255, .1); color: var(--hero-ink); } .fs-btn-quiet, #fs-app .fs-btn-quiet { border-color: transparent; background: transparent; color: var(--ink-2); padding-left: 10px; padding-right: 10px; } .fs-btn-quiet:hover, #fs-app .fs-btn-quiet:hover { background: var(--paper-2); color: var(--ink); } .fs-btn-small, #fs-app .fs-btn-small { font-size: .9rem; padding: 7px 13px; min-height: 36px; } /* Kind badge */ .fs-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px 3px 8px; border-radius: 999px; line-height: 1.4; color: var(--k-grant); background: var(--k-grant-bg); font-family: var(--font-body); } .fs-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .k-fellowship { color: var(--k-fellowship); background: var(--k-fellowship-bg); } .k-prize { color: var(--k-prize); background: var(--k-prize-bg); } .k-residency { color: var(--k-residency); background: var(--k-residency-bg); } .k-scholarship-bursary { color: var(--k-scholarship); background: var(--k-scholarship-bg); } .k-call-for-art { color: var(--k-call); background: var(--k-call-bg); } /* Deadline pill: urgency */ .fs-due { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .88rem; line-height: 1.3; padding: 4px 10px; border-radius: 999px; background: var(--teal-soft); color: var(--teal); } .fs-due svg { width: 15px; height: 15px; flex: none; } .fs-due.is-urgent { background: var(--urgent-soft); color: var(--urgent); } .fs-due.is-soon { background: var(--soon-soft); color: var(--soon); } .fs-due.is-open { background: var(--paper-2); color: var(--ink-2); } .fs-due.is-closed { background: var(--closed-soft); color: var(--closed); } /* Save button (browse cards and opportunity pages share it) */ .fs-save, #fs-app .fs-save { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 700; padding: 6px 12px; min-height: 36px; border-radius: 999px; border: 1.5px solid var(--rule-2); background: var(--card); color: var(--ink-2); transition: background-color .15s, color .15s, border-color .15s; } .fs-save svg { width: 17px; height: 17px; flex: none; } .fs-save:hover { border-color: var(--gold); color: var(--ink); } .fs-save[aria-pressed="true"], #fs-app .fs-save[aria-pressed="true"] { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-ink); } .fs-save[aria-pressed="true"] svg { fill: currentColor; } .fs-save.fs-btn { font-size: 1rem; padding: 11px 18px; min-height: 44px; } /* How sure we are: a compact badge on cards and at the top of each opportunity page */ .fs-check { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body); font-size: .8rem; font-weight: 700; line-height: 1.3; padding: 2px 9px 2px 6px; border-radius: 999px; white-space: nowrap; text-decoration: none; color: var(--k-residency); background: var(--k-residency-bg); border: 1px solid transparent; } .fs-check svg { width: 15px; height: 15px; flex: none; } a.fs-check:hover { text-decoration: underline; text-underline-offset: 2px; } .fs-check.is-partly { color: var(--k-grant); background: var(--k-grant-bg); } .fs-check.is-in-review { color: var(--ink-2); background: var(--paper-2); border-color: var(--rule-2); } .fs-check.is-not-checked { color: var(--ink-2); background: transparent; border-color: var(--rule-2); border-style: dashed; } /* The small note beside a fact the funder's page did not confirm */ .fs-unconfirmed { display: inline-block; vertical-align: middle; font-family: var(--font-body); font-size: .72rem; font-weight: 700; letter-spacing: .02em; line-height: 1.4; padding: 1px 8px; border-radius: 999px; white-space: nowrap; color: var(--soon); background: var(--soon-soft); border: 1px dashed color-mix(in srgb, var(--soon) 45%, transparent); font-variation-settings: normal; text-decoration: none; } /* ---------- Home ---------- */ .fs-hero { position: relative; overflow: hidden; margin: 18px 0 8px; padding: clamp(22px, 4vw, 40px) clamp(20px, 5vw, 48px); border-radius: 20px; color: var(--hero-ink); background: radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--gold) 38%, transparent) 0, transparent 32%), radial-gradient(circle at 8% 110%, rgba(140, 200, 218, .22) 0, transparent 40%), linear-gradient(135deg, var(--hero-1), var(--hero-2)); } .fs-hero::after { content: ""; position: absolute; right: clamp(-40px, -2vw, 0px); bottom: 14px; width: 170px; height: 170px; opacity: .9; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23e9b755' d='M50 6c2.2 20.4 12.6 30.8 33 33v4c-20.4 2.2-30.8 12.6-33 33h-4c-2.2-20.4-12.6-30.8-33-33v-4c20.4-2.2 30.8-12.6 33-33z' opacity='.95'/%3E%3Cpath fill='%23f6d88f' d='M80 64c.8 7.4 4.6 11.2 12 12v2c-7.4.8-11.2 4.6-12 12h-2c-.8-7.4-4.6-11.2-12-12v-2c7.4-.8 11.2-4.6 12-12z'/%3E%3C/svg%3E") no-repeat center / contain; } .fs-hero > * { position: relative; z-index: 1; max-width: 36em; } .fs-hero h1 { color: var(--hero-ink); margin: .2em 0 .35em; font-size: clamp(2rem, 1.2rem + 3.4vw, 3.2rem); } .fs-hero p { color: var(--hero-ink-2); font-size: 1.12rem; max-width: none; text-wrap: pretty; } .fs-hero .fs-eyebrow { color: #f3cc78; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; margin: 0; } .fs-hero .fs-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; } .fs-hero .fs-reassure { font-size: .9rem; margin: 12px 0 0; color: var(--hero-ink-2); } .fs-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin: 2.2em 0 .6em; } .fs-section-head h2 { margin: 0; } /* fs-1d07.11: six tiles now share this row (was five) - minmax narrowed from 170 to 140px so all six fit on one row at the 980px content width (desktop), still wrapping sensibly narrower. */ .fs-kind-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 12px; } .fs-kind-links a { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--radius); text-decoration: none; background: var(--card); border: 1px solid var(--rule); color: var(--ink); box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .fs-kind-links a:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--rule-2); } .fs-kind-links .fs-badge { align-self: flex-start; } .fs-kind-links strong { font-family: var(--font-head); font-size: 1.1rem; font-weight: 600; } .fs-kind-links strong.fs-count { font-size: 2.2rem; line-height: 1.1; color: var(--teal); } .fs-kind-links span.fs-small { margin: 0; } .fs-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; margin: 0 0 .5em; } .fs-tiles > div { position: relative; background: var(--card); border: 1px dashed var(--rule-2); border-radius: var(--radius); padding: 14px 16px 12px; } .fs-tiles strong { display: block; font-family: var(--font-head); font-size: 2.2rem; line-height: 1.1; color: var(--teal); font-weight: 600; } .fs-tiles span { color: var(--ink-2); font-size: .92rem; } .fs-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; counter-reset: step; max-width: none !important; } .fs-steps li { counter-increment: step; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px 16px 14px; } .fs-steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--gold-soft); color: var(--gold-ink); font-weight: 800; margin-bottom: 8px; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); } .fs-steps strong { display: block; font-size: 1.05rem; margin-bottom: 2px; } .fs-steps span { color: var(--ink-2); font-size: .95rem; } .fs-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.5em 0 0; } /* Stories (placeholders only) */ .fs-stories { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; margin: 1em 0; } .fs-story { margin: 0; background: var(--card); border: 1px dashed var(--rule-2); border-radius: var(--radius); padding: 18px 18px 14px; color: var(--ink-2); max-width: none !important; } .fs-story blockquote { margin: 8px 0 10px; padding: 0; border: 0; font-family: var(--font-head); font-style: italic; font-size: 1.12rem; color: var(--ink); line-height: 1.45; } .fs-story figcaption { font-size: .9rem; color: var(--ink-3); } /* Resources and terms */ .fs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 14px; margin: 1em 0; } .fs-cards > section { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 4px 18px 8px; } .fs-cards > section h2 { font-size: 1.15rem; margin: .9em 0 .4em; } .fs-cards ul { padding-left: 1.1em; } /* ---------- Opportunity page ---------- */ .fs-crumbs { margin: 14px 0 0; font-size: .95rem; } .fs-crumbs a { text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .fs-crumbs a:hover { text-decoration: underline; } .fs-opp-head { margin: 18px 0 6px; } .fs-opp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .fs-opp-head h1 { margin: .35em 0 .2em; } .fs-opp-funder { color: var(--ink-2); font-size: 1.08rem; margin: 0; } .fs-deadline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 20px 0 16px; padding: 14px 18px; border-radius: var(--radius); background: var(--teal-soft); border: 1px solid color-mix(in srgb, var(--teal) 25%, transparent); color: var(--ink); } .fs-deadline .fs-deadline-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--card); color: var(--teal); flex: none; } .fs-deadline .fs-deadline-icon svg { width: 22px; height: 22px; } .fs-deadline-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 200px; } .fs-deadline-label { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); } .fs-deadline-date { font-family: var(--font-head); font-size: 1.35rem; font-weight: 600; line-height: 1.25; } .fs-deadline-note { font-size: .92rem; color: var(--ink-2); } .fs-deadline.is-urgent { background: var(--urgent-soft); border-color: color-mix(in srgb, var(--urgent) 35%, transparent); } .fs-deadline.is-urgent .fs-deadline-icon { color: var(--urgent); } .fs-deadline.is-soon { background: var(--soon-soft); border-color: color-mix(in srgb, var(--gold) 40%, transparent); } .fs-deadline.is-soon .fs-deadline-icon { color: var(--soon); } .fs-deadline.is-closed { background: var(--closed-soft); border-color: var(--rule-2); border-style: dashed; } .fs-deadline.is-closed .fs-deadline-icon { color: var(--closed); } .fs-deadline.is-closed .fs-deadline-date { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--ink-2); } .fs-deadline .fs-due { margin-left: auto; } .fs-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 12px; margin: 18px 0 22px; padding: 0; } .fs-facts > div { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 12px 16px; min-width: 0; } .fs-facts dt { font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 2px; } .fs-facts dd { margin: 0; font-weight: 600; color: var(--ink); line-height: 1.4; } .fs-facts .fs-fact-big dd { font-family: var(--font-head); font-size: 1.3rem; } .fs-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0 8px; } .fs-actions .fs-small { margin: 0; flex-basis: 100%; } .fs-detail { margin: 26px 0 0; max-width: none; } .fs-detail h2 { font-size: 1.2rem; margin: 0 0 .4em; padding-top: 18px; border-top: 1px solid var(--rule); } .fs-source { margin: 30px 0 0; padding: 14px 16px; border-radius: var(--radius-s); background: var(--paper-2); font-size: .92rem; color: var(--ink-2); overflow-wrap: anywhere; max-width: none !important; scroll-margin-top: 16px; } .fs-source p { margin: 0 0 4px; } .fs-source .fs-check-line { display: flex; align-items: flex-start; gap: 8px; font-size: 1rem; color: var(--ink); margin-bottom: 6px; } .fs-check-line svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--k-residency); } .fs-check-line.is-partly svg { color: var(--k-grant); } .fs-check-line.is-in-review svg { color: var(--ink-2); } .fs-check-line.is-not-checked svg { color: var(--ink-3); } .fs-source .fs-check-more { padding-left: 28px; } .fs-source .fs-check-src { margin-top: 8px; } .fs-source .fs-report-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--rule-2); } /* "Report a problem" panel */ .fs-report-wrap { display: contents; } .fs-report { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: 0; margin: auto; border: 1px solid var(--rule-2); border-radius: 16px; background: var(--card); color: var(--ink); box-shadow: var(--shadow-lift); } .fs-report::backdrop { background: rgba(8, 18, 22, .55); } .fs-report-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 12px 2px 20px; } .fs-report-head h2 { margin: 0; font-size: 1.35rem; } .fs-report .fs-report-x { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); font: inherit; font-size: 1.7rem; line-height: 1; cursor: pointer; } .fs-report .fs-report-x:hover { background: var(--paper-2); color: var(--ink); } .fs-report-form, .fs-report-done { padding: 4px 20px 20px; } .fs-report-about { margin: 0 0 12px; color: var(--ink-2); } .fs-report-boxes { border: 0; padding: 0; margin: 0 0 14px; min-inline-size: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 8px; } .fs-report-boxes legend { font-weight: 700; padding: 0; margin: 0 0 8px; } .fs-report-box { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; cursor: pointer; font-weight: 600; line-height: 1.3; border: 1.5px solid var(--rule-2); border-radius: var(--radius-s); background: var(--card); color: var(--ink); } .fs-report-box:hover { border-color: var(--teal); } .fs-report-box:has(input:checked) { border-color: var(--teal); background: var(--teal-soft); } .fs-report-box input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--teal); } .fs-report-field { display: block; font-weight: 700; margin: 0 0 4px; } .fs-optional { display: inline-block; font-size: .78rem; font-weight: 700; color: var(--ink-2); background: var(--paper-2); border-radius: 999px; padding: 0 8px; margin-left: 4px; vertical-align: middle; } .fs-report textarea, .fs-report input[type="text"], .fs-form textarea, .fs-form input[type="text"] { display: block; width: 100%; max-width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper); border: 1.5px solid var(--rule-2); border-radius: var(--radius-s); padding: 9px 12px; min-height: 44px; margin: 0 0 12px; } .fs-report textarea, .fs-form textarea { resize: vertical; min-height: 96px; } .fs-report textarea:hover, .fs-form textarea:hover, .fs-form input:hover { border-color: var(--teal); } .fs-form-wrap { max-width: 640px; margin: 8px 0 24px; } .fs-form-wrap .fs-report-form { padding: 0; } .fs-form .fs-visually-hidden input { min-height: 0; } .fs-res-report { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rule); } .fs-res-report .fs-form-wrap { margin: 14px 0 0; } .fs-report-note { margin: -6px 0 12px; } .fs-report-error { margin: 0 0 10px; color: var(--urgent); font-weight: 700; } .fs-report-error:empty { display: none; } .fs-report-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--rule); } .fs-report-off { margin: 0; flex: 1 1 240px; padding: 10px 12px; border-radius: var(--radius-s); background: var(--gold-soft); color: var(--ink); font-weight: 600; } .fs-report-thanks { font-size: 1rem; font-weight: 400; color: var(--ink); margin: 8px 0 6px; } .fs-fb-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid var(--rule); margin: 0 0 16px; } .fs-fb-tabs [role="tab"] { border: 0; background: transparent; color: var(--ink-2); padding: 10px 14px 12px; margin-bottom: -2px; border-bottom: 3px solid transparent; border-radius: 8px 8px 0 0; font: inherit; font-weight: 700; min-height: 44px; cursor: pointer; } .fs-fb-tabs [role="tab"]:hover { color: var(--ink); background: var(--paper-2); } .fs-fb-tabs [role="tab"][aria-selected="true"] { color: var(--teal); border-bottom-color: var(--gold); } .fs-fb-panel > .fs-report-field:not(:first-child) { margin-top: 14px; } .fs-report-done .fs-btn { margin-top: 8px; } /* ---------- Browse page ---------- */ /* fs-p65t (Derick, 2026-09-27 ~20:00 PT): "I really want all of the filters to be tighter vertically so the opportunities appear higher on the page." Put the title+subtitle beside the Find/Saved/My profile tabs on desktop, one line - reverted by fs-nnna (Derick, ~22:50 PT: "looks funny to the right ... let's go back to putting it on its own line below the heading"): the subtitle stacks under the h1 again, at every width. */ .fs-browse-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 16px; margin: 10px 0 4px; } .fs-browse-head { margin: 0 0 4px; } .fs-browse-head h1 { margin: 0; } .fs-browse-head p { margin: 4px 0 0; color: var(--ink-2); } .fs-browse-top .fs-tabs { margin: 0; } #fs-app { margin-top: 6px; } #fs-app button { font: inherit; cursor: pointer; } #fs-app select, #fs-app input[type="search"], #fs-app input[type="text"] { font: inherit; font-size: 1rem; color: var(--ink); background: var(--card); border: 1.5px solid var(--rule-2); border-radius: var(--radius-s); padding: 9px 12px; min-height: 44px; max-width: 100%; } #fs-app select { padding-right: 34px; appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23808a8e' d='M5.5 7.5 10 12l4.5-4.5 1 1L10 14 4.5 8.5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; } #fs-app select.is-set { border-color: var(--teal); background-color: var(--teal-soft); color: var(--ink); font-weight: 700; box-shadow: inset 0 0 0 1px var(--teal); } #fs-app input:hover, #fs-app select:hover { border-color: var(--teal); } /* Tabs */ .fs-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--rule); margin: 0 0 18px; overflow-x: auto; scrollbar-width: none; } .fs-tabs::-webkit-scrollbar { display: none; } #fs-app .fs-tab { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; border: 0; background: transparent; color: var(--ink-2); padding: 10px 14px 12px; margin-bottom: -2px; border-bottom: 3px solid transparent; border-radius: 8px 8px 0 0; font-weight: 700; font-size: 1rem; min-height: 44px; } #fs-app .fs-tab svg { width: 18px; height: 18px; flex: none; } #fs-app .fs-tab:hover { color: var(--ink); background: var(--paper-2); } #fs-app .fs-tab[aria-selected="true"] { color: var(--teal); border-bottom-color: var(--gold); } #fs-app .fs-tab:focus-visible { outline-offset: -3px; } .fs-count-badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; font-size: .78rem; font-weight: 800; background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--rule-2); } .fs-count-badge.has { background: var(--gold-fill); color: var(--on-gold); border-color: var(--gold); } .fs-count-badge.is-bump { animation: fs-bump .35s ease; } @keyframes fs-bump { 40% { transform: scale(1.3); } } .fs-profile-dot { font-size: .75rem; font-weight: 800; color: var(--k-residency); background: var(--k-residency-bg); border-radius: 999px; padding: 1px 8px; } [role="tabpanel"][hidden] { display: none; } /* Search and filters */ .fs-search { position: relative; display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .fs-search > svg { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; } #fs-app .fs-search input[type="search"] { flex: 1 1 auto; min-width: 0; padding-left: 44px; font-size: 1.05rem; min-height: 50px; border-radius: 999px; } #fs-app .fs-search input.is-set { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); } /* fs-23rl: the "Filters" button at the right end of the search bar - its count badge and chevron share the existing pill chip/badge styling (#fs-app .fs-btn, .fs-count-badge), reused rather than invented, per fs-dcbq. */ .fs-filters-toggle { flex: none; white-space: nowrap; } #fs-app .fs-filters-toggle { line-height: 1.6; } .fs-filters-toggle .fs-chevron { width: 14px; height: 14px; transition: transform .15s ease; } .fs-filters-toggle[aria-expanded="true"] .fs-chevron { transform: rotate(180deg); } .fs-count-badge[hidden] { display: none; } .fs-filter-panel[hidden] { display: none; } .fs-filter-label { display: block; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; } .fs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; } /* fs-gba.6, fs-mwsb, fs-p65t: every filter row (Type, Offer, Art forms, Community) puts its heading beside its own row of chips or toggles when there's room, in a shared fixed-width column so every row's chips line up at the same left edge - "Art forms" is left free to wrap onto a second line, vertically centred, rather than widen the column. Below the breakpoint (with everything else on the page) they stack, heading above the row, same as before. */ .fs-filter-row { display: grid; grid-template-columns: 84px 1fr; align-items: center; column-gap: 14px; margin: 0 0 6px; } .fs-filter-row .fs-filter-label, .fs-filter-row .fs-chips, .fs-filter-row .fs-toggles { margin: 0; } /* fs-t7vj (Derick, 2026-09-28 ~20:20 PT): "differentiate the different categories of filters ... add a bit of vertical space between them" - a faint hairline under each filter row inside the #fs-filter-panel (Type/Offer/Art forms/Community/Other on Browse; Kind/Province/Other on Galleries, fs-73s9.6), skipping the last so it doesn't double up against the row below. */ #fs-filter-panel .fs-filter-row { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--rule-2); } #fs-filter-panel .fs-filter-row:last-of-type { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } #fs-app .fs-chip { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--rule-2); background: var(--card); color: var(--ink); border-radius: 999px; padding: 4px 12px; font-size: .95rem; font-weight: 600; min-height: 32px; line-height: 1.2; transition: background-color .12s, border-color .12s, color .12s; } #fs-app .fs-chip:hover { border-color: var(--teal); } #fs-app .fs-chip .fs-n { font-size: .8rem; font-weight: 700; color: var(--ink-3); background: var(--paper-2); border-radius: 999px; padding: 0 7px; min-width: 22px; text-align: center; } #fs-app .fs-chip .fs-tick { display: none; width: 16px; height: 16px; } #fs-app .fs-chip[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: var(--on-teal); } #fs-app .fs-chip[aria-pressed="true"] .fs-tick { display: inline-block; } #fs-app .fs-chip[aria-pressed="true"] .fs-n { background: color-mix(in srgb, var(--on-teal) 20%, transparent); color: var(--on-teal); } #fs-app .fs-chip.is-empty:not([aria-pressed="true"]) { color: var(--ink-3); border-style: dashed; } /* fs-p65t: Art forms' "+N more" / "Show fewer" toggle chip - dashed, like an empty-count chip, so it visually reads as "more options exist" rather than a filter you could turn on. */ #fs-app .fs-chip-more { border-style: dashed; color: var(--ink-2); } /* fs-t7vj (Derick, 2026-09-28 ~20:20 PT): "use a different, alternating colour shade on the bubbles" for Type - tinted with the SAME --k-* tokens as the kind badge on a result card (.fs-badge/.k-grant etc, above), reused rather than invented; every other filter row stays neutral. Selecting a chip still switches to the usual teal "on" state - the tint is only for telling the options apart while choosing. */ #fs-kinds .fs-chip.k-grant:not([aria-pressed="true"]) { color: var(--k-grant); background: var(--k-grant-bg); border-color: transparent; } #fs-kinds .fs-chip.k-fellowship:not([aria-pressed="true"]) { color: var(--k-fellowship); background: var(--k-fellowship-bg); border-color: transparent; } #fs-kinds .fs-chip.k-prize:not([aria-pressed="true"]) { color: var(--k-prize); background: var(--k-prize-bg); border-color: transparent; } #fs-kinds .fs-chip.k-residency:not([aria-pressed="true"]) { color: var(--k-residency); background: var(--k-residency-bg); border-color: transparent; } #fs-kinds .fs-chip.k-scholarship-bursary:not([aria-pressed="true"]) { color: var(--k-scholarship); background: var(--k-scholarship-bg); border-color: transparent; } #fs-kinds .fs-chip.k-call-for-art:not([aria-pressed="true"]) { color: var(--k-call); background: var(--k-call-bg); border-color: transparent; } .fs-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 8px; } label.fs-select-inline { display: inline-flex; } .fs-filters select { width: auto; min-width: 150px; } .fs-toggles { display: flex; flex-wrap: wrap; gap: 0 18px; align-items: center; } .fs-toggle { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 10px !important; min-height: 44px; cursor: pointer; text-transform: none !important; letter-spacing: normal !important; font-size: .98rem !important; font-weight: 600 !important; color: var(--ink-2) !important; } .fs-toggle input { width: 20px; height: 20px; accent-color: var(--teal); margin: 0; } .fs-toggle .fs-n { font-size: .8rem; font-weight: 700; color: var(--ink-2); background: var(--paper-2); border-radius: 999px; padding: 0 7px; min-width: 22px; text-align: center; } .fs-more { margin: 0 0 12px; border: 1px solid var(--rule); border-radius: var(--radius-s); background: var(--card); } .fs-more summary { cursor: pointer; padding: 10px 14px; font-weight: 700; color: var(--ink-2); list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; } .fs-more summary::-webkit-details-marker { display: none; } .fs-more summary::before { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--paper-2); font-weight: 800; } .fs-more[open] summary::before { content: "\2212"; } .fs-more .fs-chips { padding: 0 14px 4px; } .fs-more .fs-toggles { padding: 0 14px 10px; } .fs-toggle.is-empty { color: var(--ink-3) !important; } /* Active filters row */ .fs-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; margin: 4px 0 12px; background: var(--teal-soft); border-radius: var(--radius-s); border: 1px solid color-mix(in srgb, var(--teal) 25%, transparent); } .fs-active[hidden] { display: none; } .fs-active-label { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-right: 2px; } #fs-app .fs-active-chip { display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--teal); color: var(--on-teal); border-radius: 999px; padding: 5px 8px 5px 12px; font-size: .9rem; font-weight: 700; min-height: 34px; line-height: 1.2; } #fs-app .fs-active-chip .fs-x { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--on-teal) 22%, transparent); font-size: 14px; line-height: 1; } #fs-app .fs-active-chip:hover .fs-x { background: color-mix(in srgb, var(--on-teal) 40%, transparent); } #fs-app .fs-clear-all { border: 0; background: transparent; color: var(--link); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; padding: 6px 6px; margin-left: auto; min-height: 34px; } /* Results */ .fs-results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 6px 0 12px; } .fs-results-bar p { margin: 0; font-weight: 600; color: var(--ink-2); } .fs-results-bar p strong { color: var(--ink); } /* fs-p65t: "Sort by moves into the results bar beside the count." */ .fs-results-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; } .fs-sort-inline select { width: auto; min-width: 170px; } .fs-save-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: 100%; padding: 12px; margin: 0 0 12px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-s); } .fs-save-search[hidden] { display: none; } #fs-app .fs-save-search input { flex: 1 1 200px; } .fs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 14px; } .fs-card { position: relative; display: flex; flex-direction: column; gap: 6px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px 16px 14px; box-shadow: var(--shadow); min-width: 0; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .fs-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--rule-2); } .fs-card:has(h3 a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; } .fs-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .fs-card h3 { margin: 4px 0 0; font-size: 1.14rem; line-height: 1.28; } .fs-card h3 a { color: var(--ink); text-decoration: none; } .fs-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); } .fs-card h3 a:focus-visible { outline: none; } .fs-card:hover h3 a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; } .fs-card .fs-save, .fs-card .fs-check, .fs-card .fs-card-link { position: relative; z-index: 2; } .fs-funder { margin: 0; color: var(--ink-2); font-size: .95rem; font-weight: 600; } .fs-community-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 0; } .fs-community-tag { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 700; line-height: 1.3; padding: 3px 9px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); } .fs-community-tag svg { width: 11px; height: 11px; flex: none; } .fs-community-tag.is-dedicated { background: var(--gold-soft); color: var(--gold-ink); } .fs-summary { margin: 2px 0 4px; color: var(--ink-2); font-size: .95rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* fs-1d07.10: the money block on a call-for-art card - both directions, then the funder's own quote (mock docs/design/mocks/calls-for-art-card.html). */ .fs-money { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-s); background: var(--paper-2); display: flex; flex-direction: column; gap: 6px; } .fs-money-line { display: flex; align-items: flex-start; gap: 8px; font-size: .95rem; font-weight: 700; line-height: 1.35; } .fs-money-line svg { width: 18px; height: 18px; flex: none; margin-top: 1px; stroke-width: 2.4; } .fs-money-line.is-pays { color: var(--k-residency); } .fs-money-line.is-free { color: var(--k-residency); } .fs-money-line.is-charged { color: var(--soon); } .fs-money-line.is-unknown { color: var(--ink-2); font-weight: 600; } .fs-money-quote { margin: 0; font-size: .86rem; font-weight: 400; font-style: italic; color: var(--ink-2); line-height: 1.45; } .fs-money-quote cite { font-style: normal; font-weight: 600; } .fs-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--rule); font-size: .9rem; color: var(--ink-2); } .fs-meta-item { display: inline-flex; align-items: center; gap: 5px; min-width: 0; } .fs-meta-item svg { width: 15px; height: 15px; flex: none; color: var(--ink-3); } .fs-amt { font-weight: 700; color: var(--ink); } .fs-card.is-closed { background: color-mix(in srgb, var(--card) 60%, var(--paper)); box-shadow: none; } .fs-card.is-closed h3 a, .fs-card.is-closed .fs-amt { color: var(--ink-2); } /* Empty states */ .fs-empty { text-align: center; padding: 34px 18px; border: 1.5px dashed var(--rule-2); border-radius: var(--radius); background: var(--card); grid-column: 1 / -1; } .fs-empty svg { width: 56px; height: 56px; color: var(--gold); margin-bottom: 6px; } .fs-empty h3 { margin: 0 0 6px; font-size: 1.2rem; } .fs-empty p { margin: 0 auto 14px; max-width: 42ch; color: var(--ink-2); } /* Saved and profile panels */ .fs-panel-note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: var(--radius-s); background: var(--paper-2); color: var(--ink-2); font-size: .92rem; margin: 0 0 18px; } .fs-panel-note svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--teal); } .fs-panel-note.is-warn { background: var(--urgent-soft); color: var(--ink); } .fs-panel-note.is-warn svg { color: var(--urgent); } .fs-sub { display: flex; align-items: center; gap: 10px; margin: 24px 0 12px; font-size: 1.25rem; } .fs-sub:first-of-type { margin-top: 4px; } .fs-search-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; max-width: none; } .fs-search-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 12px 14px; } .fs-search-list .fs-search-info { flex: 1 1 220px; min-width: 0; } .fs-search-list strong { display: block; font-size: 1.05rem; } .fs-search-list .fs-small { margin: 0; } .fs-search-list .fs-search-actions { display: flex; gap: 6px; } .fs-fieldset { border: 0; padding: 0; margin: 0 0 18px; min-inline-size: 0; } .fs-fieldset legend { font-family: var(--font-head); font-size: 1.1rem; font-weight: 600; padding: 0; margin-bottom: 4px; } .fs-fieldset .fs-small { margin: 0 0 10px; } .fs-profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; margin-bottom: 18px; } .fs-profile-grid label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; } .fs-profile-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-top: 16px; border-top: 1px solid var(--rule); } .fs-status { font-weight: 700; color: var(--k-residency); font-size: .95rem; } /* Toast */ .fs-toast { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 50; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); background: var(--ink); color: var(--paper); padding: 10px 12px 10px 16px; border-radius: 12px; box-shadow: var(--shadow-lift); font-weight: 600; font-size: .95rem; transition: opacity .2s ease, transform .2s ease; } .fs-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } #fs-app .fs-toast button { border: 0; background: transparent; color: var(--gold); font-weight: 800; padding: 6px 8px; border-radius: 6px; text-decoration: underline; } .fs-toast:empty { display: none; } /* ---------- Small screens ---------- */ @media (max-width: 600px) { body { font-size: 16px; padding: 0 16px; } body > header { padding-top: 12px; } body > header .title h1, body > header .title h2 { font-size: 1.2rem; } /* fs-gba.2 (Derick, 2026-09-27 ~13:10 PT): the 5 tabs must fit one row down to 320px with no wrap. min-height (not padding) holds the >=44px tap target so shrinking the horizontal padding to fit the row doesn't also shrink the tap target. */ body > header nav p { gap: 2px 2px; } body > header nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; font-size: .875rem; } /* Derick 2026-09-27: the Home tab's text sits on the page margin, like the logo - the desktop -10px pull (sized for 10px of tab padding) only needs to cancel this 2px of padding here. */ body > header nav a:first-child { margin-left: -2px; } /* fs-gba.6: not enough room for the Type/Offer heading beside its chips on a phone - split the heading onto its own line above them, same as it always was before that row existed. */ .fs-filter-row { display: block; } .fs-filter-row .fs-filter-label { display: block; margin: 0 0 6px; } /* fs-p65t: the desktop-only tightening (title+subtitle+tabs on one row, ~32px chips) stays mobile's own, roomier layout - a phone has no spare width for any of it, and chips are the only way to reach these filters here (no mouse), so they keep the full 44px tap target. */ .fs-browse-top { display: block; margin: 10px 0 4px; } .fs-browse-top .fs-tabs { margin: 10px 0 18px; } .fs-chips { gap: 8px; margin: 0 0 14px; } #fs-app .fs-chip { min-height: 44px; padding: 6px 13px; } .fs-theme label { padding: 5px 8px; } .fs-theme label span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .fs-hero { border-radius: 16px; } .fs-hero::after { width: 110px; height: 110px; top: 10px; right: -18px; opacity: .55; } .fs-hero .fs-cta .fs-btn { flex: 1 1 100%; } #fs-app .fs-tab { padding: 10px 10px 12px; font-size: .95rem; } #fs-app .fs-tab svg { display: none; } .fs-deadline .fs-due { margin-left: 0; } .fs-actions .fs-btn { flex: 1 1 100%; } .fs-report-head { padding-left: 16px; } .fs-report-form, .fs-report-done { padding: 4px 16px 16px; } .fs-report-actions .fs-btn { flex: 1 1 100%; } .fs-results-bar .fs-btn { flex: none; } } /* fs-p8cq.2 (Derick, 2026-09-28): "shrink dropdown widths with shorter phrases ... one dropdown per row on mobile is wasteful of space." At phone width the select dropdowns pair up two to a row instead of each claiming its own - a firm two-column grid keeps that pairing predictable regardless of which selects/buttons happen to be visible; anything that is not itself a dropdown (a button) spans the full row instead, so a lone odd select is the one left sitting by itself, on the left, rather than stretched to fill the row. */ @media (max-width: 480px) { .fs-results-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .fs-results-actions > :not(.fs-select-inline) { grid-column: 1 / -1; } .fs-results-actions .fs-select-inline select { width: 100%; min-width: 0; } .fs-res-bar-right { flex-wrap: wrap; } #fs-res-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; } #fs-res-filters select { width: 100%; min-width: 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* ---------- School award groups (pipeline/publish/groups.py) ---------- */ .fs-aw-filters { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; margin: 1.2rem 0 .4rem; } .fs-aw-filters label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: .85rem; color: var(--ink-2); } .fs-aw-filters input, .fs-aw-filters select { font: inherit; font-weight: 400; color: var(--ink); background: var(--card); border: 1px solid var(--rule-2); border-radius: 8px; padding: 8px 10px; } .fs-aw-list { list-style: none; padding: 0; margin: .6rem 0 1.5rem; display: grid; gap: 10px; } .fs-aw-list > li { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; } .fs-aw-list > li[hidden] { display: none; } .fs-aw-list h3 { margin: 0 0 4px; font-size: 1.05rem; } .fs-aw-list p { margin: 0 0 8px; color: var(--ink-2); font-size: .92rem; } .fs-aw-list dl { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; font-size: .85rem; } .fs-aw-list dl div { display: flex; gap: 6px; } .fs-aw-list dt { color: var(--ink-3); } .fs-aw-list dd { margin: 0; color: var(--ink); font-weight: 600; } @media (max-width: 640px) { .fs-aw-filters { grid-template-columns: 1fr; } } /* ---------- What is offered (D18) ---------- */ .fs-offered { display: grid; gap: 4px; } .fs-offered h3 { margin: .8rem 0 .2rem; font-size: .95rem; color: var(--ink-2); } .fs-offered ul { margin: 0; padding-left: 1.2rem; } .fs-offered li { margin: 2px 0; } .fs-more > p.fs-small { margin: 0 16px 8px; } /* ---------- About page: problems as cards across the page width ---------- */ /* fs-s6s.10 (Derick, 2026-09-27): "this page is a marketing page ... much flashier and way easier to consume in a single glance" - a bolder, larger heading in the site's own teal, and a top accent bar in the same colour, so a tile reads before its one-line body does. */ .fs-about > ul { list-style: none; padding: 0; margin: 12px 0 8px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); max-width: none; } .fs-about > ul > li { background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--teal); border-radius: 10px; padding: 14px 16px; color: var(--ink-2); line-height: 1.5; } .fs-about > ul > li strong { display: block; color: var(--teal); font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 4px; } .fs-about > p { max-width: none; } .fs-about h2 { margin-top: 1.8rem; } .fs-about > ul:nth-of-type(2) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); } /* Resources page (the services list). Colours come from the variables above, so it follows Light and Dark. Search plus three dropdown filters (the only ones that split the data usefully), reusing the Browse page's .fs-filters row (docs/design/resources-page.md, fs-v6y.18). */ .fs-res { margin-top: 8px; } .fs-res-filters { margin: 0 0 12px; } .fs-res-bar-right { display: flex; align-items: center; gap: 12px; } .fs-res-sort { font-size: .9rem; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; } .fs-res-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; } .fs-res-card { position: relative; display: flex; flex-direction: column; gap: 6px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); min-width: 0; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .fs-res-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--rule-2); } .fs-res-card:has(.fs-res-open:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; } .fs-res-card h3 { margin: 0; font-size: 1.1rem; line-height: 1.28; } .fs-res-card p { margin: 0; max-width: none; } .fs-res-open { all: unset; cursor: pointer; color: var(--ink); font-weight: 700; } .fs-res-open::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); } .fs-res-card:hover .fs-res-open { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .fs-res-what { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink-2); font-size: .95rem; line-height: 1.45; } .fs-res-card .fs-res-meta { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--rule); font-size: .88rem; color: var(--ink-2); display: flex; flex-wrap: wrap; } .fs-res-meta span + span::before { content: "\00b7"; margin: 0 7px; color: var(--ink-3); } .fs-res-tags { display: flex; flex-wrap: wrap; gap: 4px 6px; } .fs-res-tag { display: inline-block; font-size: .8rem; padding: 2px 9px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--rule); } .fs-res-tag-type { background: var(--teal-soft); color: var(--teal); border-color: transparent; font-weight: 700; } .fs-res-none { padding: 30px 0; text-align: center; color: var(--ink-3); } .fs-res-none p { margin: 0 0 12px; } .fs-res-locked { overflow: hidden; } .fs-res-scrim { position: fixed; inset: 0; background: rgba(10, 15, 20, .5); z-index: 60; } .fs-res-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(560px, 100%); background: var(--card); color: var(--ink); overflow: auto; overscroll-behavior: contain; padding: 22px 22px 60px; box-shadow: -10px 0 40px rgba(0, 0, 0, .25); } .fs-res-drawer[hidden], .fs-res-scrim[hidden] { display: none; } .fs-res-drawer h2 { margin: 0 34px 6px 0; font-size: 1.6rem; line-height: 1.15; } .fs-res-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border: 1px solid var(--rule-2); border-radius: var(--radius-s); background: var(--card); color: var(--ink); font-size: 1.3rem; line-height: 1; cursor: pointer; } .fs-res-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; } @media (max-width: 520px) { .fs-res-two { grid-template-columns: 1fr; } .fs-res-drawer { padding: 18px 16px 60px; } } .fs-res-box { border: 1px solid var(--rule); border-radius: var(--radius-s); padding: 4px 12px 8px; } .fs-res-box h3 { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 8px 0 4px; } .fs-res-box ul { margin: 0; padding-left: 1.1em; } .fs-res-facts { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 6px 14px; margin: 14px 0; font-size: .95rem; } .fs-res-facts dt { color: var(--ink-3); } .fs-res-facts dd { margin: 0; overflow-wrap: anywhere; } @media (max-width: 520px) { .fs-res-facts { grid-template-columns: 1fr; } } /* Placeholders while the Browse page's listings load (fs-05j.4) */ .fs-skel { display: grid; gap: 12px; align-content: start; min-height: 190px; } .fs-skel-line { display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--paper-2) 25%, var(--rule) 50%, var(--paper-2) 75%); background-size: 200% 100%; animation: fs-shimmer 1.6s ease-in-out infinite; } .fs-skel-line.s1 { width: 30%; } .fs-skel-line.s2 { width: 80%; height: 20px; } .fs-skel-line.s3 { width: 95%; } .fs-skel-line.s4 { width: 55%; } @keyframes fs-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } } @media (prefers-reduced-motion: reduce) { .fs-skel-line { animation: none; } } /* Data page (tools/data_quality.py): completion bars and the by-kind table. Moved here from a page-only inline