/* 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); /* fs-73s9.24 (Derick, 2026-09-29, "Love the color plan") laid out twelve theme tokens, one every 30 degrees of the colour wheel - warm half for funding kinds (--k-*), cool half for resource types (--t-*). fs-5sa3.1 (Derick, 2026-09-29, "That's the one! Yes please") replaced the six --k-* funding-kind tokens with his own exact pick, which does not sit on the strict 30-degree wheel (two of the six are only ~2 degrees apart in hue; they read as different colours because one is far less saturated, not because of hue spacing). fs-5sa3.2 (Derick, 2026-09-29) re-assigned the same six hex pairs to match the home page's tile order (largest first): "Oh darn I thought the color order would be the large to small tiles color order" ... "Let's swap brown and yellow. Calls are more exciting as is yellow." Grants pink, Scholarships red, Residencies orange, Prizes gold, Calls yellow, Fellowships brown. --k-prize/--k-residency's orange text is one shade darker than the hex Derick actually saw (#b54708 -> #ad4408): that pair was 4.47:1 on its approved background, just under the 4.5:1 AA floor for the badges' bold small text; #ad4408 clears it (4.79:1) and is not a perceptibly different orange. The six --t-* resource-type tokens are untouched, still exactly the fs-73s9.24 wheel: Galleries teal (150), Services cyan (180), Communities sky blue (210), Theatres blue (240), Cinemas violet (270), Festivals magenta (300) - when Events replaces Services, Events takes the cyan slot. Every kind hue stays >=25 degrees from every type hue (tests/test_colour_plan.py) - fs-73s9.24's Scholarship/Call greens had overlapped Galleries' green/teal by as little as 30 degrees, all reading as the same green family; Derick's approved kind colours are warm (roughly 330-50 degrees) and the closest is ~33 degrees from a type hue. [text on soft background] */ --k-grant: #b0306a; --k-grant-bg: #fbe0ee; --k-scholarship: #b42318; --k-scholarship-bg: #fde2df; --k-residency: #ad4408; --k-residency-bg: #fde5cf; --k-prize: #8a5a00; --k-prize-bg: #fbe7bd; --k-fellowship: #7a4a2a; --k-fellowship-bg: #efe1d4; --k-call: #806500; --k-call-bg: #fcefb4; --t-gallery: #1c7549; --t-gallery-bg: #c5f1db; --t-service: #1b7172; --t-service-bg: #c1f0f1; --t-community: #2869aa; --t-community-bg: #dbe9f6; --t-theatre: #4545d3; --t-theatre-bg: #e6e6f9; --t-cinema: #883fd2; --t-cinema-bg: #eee3f9; --t-festival: #ac28ac; --t-festival-bg: #f8dff8; /* Status colours some other UI pieces happened to reuse from the kind wheel above before it had a fixed hue plan (fs-73s9.24 regression, BigBoy 2026-09-29): the "how sure we are" check badge and the call-for-art money line's "pays"/"free" colour need their own green/teal, independent of whatever the kind wheel assigns to Residencies/Grants. */ --status-good: #2e6337; --status-good-bg: #e4f1e5; --status-partial: #1b5a6e; --status-partial-bg: #e1eef2; --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: #ce85a6; --k-grant-bg: #4c2436; --k-scholarship: #db817b; --k-scholarship-bg: #53211e; --k-residency: #e29264; --k-residency-bg: #573019; --k-prize: #e3a93d; --k-prize-bg: #574119; --k-fellowship: #c59c82; --k-fellowship-bg: #493527; --k-call: #e0b824; --k-call-bg: #574a19; --t-gallery: #4dcb8c; --t-gallery-bg: #1a432f; --t-service: #4dcbcb; --t-service-bg: #194242; --t-community: #7cabd9; --t-community-bg: #223d59; --t-theatre: #a3a3e4; --t-theatre-bg: #323283; --t-cinema: #bd98e1; --t-cinema-bg: #4d2b70; --t-festival: #dd8bdd; --t-festival-bg: #5f245f; --status-good: #9fd6a7; --status-good-bg: #1b3520; --status-partial: #93d0e2; --status-partial-bg: #173640; } } :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: #ce85a6; --k-grant-bg: #4c2436; --k-scholarship: #db817b; --k-scholarship-bg: #53211e; --k-residency: #e29264; --k-residency-bg: #573019; --k-prize: #e3a93d; --k-prize-bg: #574119; --k-fellowship: #c59c82; --k-fellowship-bg: #493527; --k-call: #e0b824; --k-call-bg: #574a19; --t-gallery: #4dcb8c; --t-gallery-bg: #1a432f; --t-service: #4dcbcb; --t-service-bg: #194242; --t-community: #7cabd9; --t-community-bg: #223d59; --t-theatre: #a3a3e4; --t-theatre-bg: #323283; --t-cinema: #bd98e1; --t-cinema-bg: #4d2b70; --t-festival: #dd8bdd; --t-festival-bg: #5f245f; --status-good: #9fd6a7; --status-good-bg: #1b3520; --status-partial: #93d0e2; --status-partial-bg: #173640; } /* ---------- 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); } /* fs-p8cq.8: "Show your art" tile row badges - pastel Type colours, distinct from the k-* set above. */ .t-gallery { color: var(--t-gallery); background: var(--t-gallery-bg); } .t-service { color: var(--t-service); background: var(--t-service-bg); } .t-community { color: var(--t-community); background: var(--t-community-bg); } .t-theatre { color: var(--t-theatre); background: var(--t-theatre-bg); } .t-cinema { color: var(--t-cinema); background: var(--t-cinema-bg); } .t-festival { color: var(--t-festival); background: var(--t-festival-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(--status-good); background: var(--status-good-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(--status-partial); background: var(--status-partial-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-p8cq.8: the "Show your art" tile row (.fs-type-links) is the same tile component as Browse by type (.fs-kind-links) - one shared set of layout rules, kept as a separate class from .fs-kind-links so HomeKindTilesLayout's ".fs-kind-links a" selector still finds exactly the six funding-kind tiles, not these six as well. */ .fs-kind-links, .fs-type-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 12px; } .fs-kind-links a, .fs-type-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, .fs-type-links a:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--rule-2); } .fs-kind-links .fs-badge, .fs-type-links .fs-badge { align-self: flex-start; } .fs-kind-links strong, .fs-type-links strong { font-family: var(--font-head); font-size: 1.1rem; font-weight: 600; } .fs-kind-links strong.fs-count, .fs-type-links strong.fs-count { font-size: 2.2rem; line-height: 1.1; color: var(--teal); } .fs-kind-links span.fs-small, .fs-type-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(--status-good); } .fs-check-line.is-partly svg { color: var(--status-partial); } .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); } } [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-73s9.24 (Derick, 2026-09-29): "make sure it is applied to top filters on Funding and Resources too" - the Galleries and More page's own Type filter (#fs-types, site/galleries.template.md), same treatment as #fs-kinds above. Venue and Shop are real Type values with no t-* token (they get no class at all here, so they stay a plain, neutral chip). */ #fs-types .fs-chip.t-gallery:not([aria-pressed="true"]) { color: var(--t-gallery); background: var(--t-gallery-bg); border-color: transparent; } #fs-types .fs-chip.t-service:not([aria-pressed="true"]) { color: var(--t-service); background: var(--t-service-bg); border-color: transparent; } #fs-types .fs-chip.t-community:not([aria-pressed="true"]) { color: var(--t-community); background: var(--t-community-bg); border-color: transparent; } #fs-types .fs-chip.t-theatre:not([aria-pressed="true"]) { color: var(--t-theatre); background: var(--t-theatre-bg); border-color: transparent; } #fs-types .fs-chip.t-cinema:not([aria-pressed="true"]) { color: var(--t-cinema); background: var(--t-cinema-bg); border-color: transparent; } #fs-types .fs-chip.t-festival:not([aria-pressed="true"]) { color: var(--t-festival); background: var(--t-festival-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), .fs-card:has(h3 button: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-p8cq.4: a Galleries card's title is a