/* ============================================================ FRESH MINISTRIES — DESIGN SYSTEM v0.5 (converter-clean base) Single shared foundation. Every section references THIS file. Lifted from the approved v0.4 system (sg-button-lab) + the 8-col grid (WEBFLOW-PORT-GUIDE). Converted to be Moden-clean: - class-only (no tag / id / descendant selectors) - single-underscore BEM for blocks (block_element) - REM units - Webflow breakpoints: 991 / 767 / 479 Convert this ONCE into Webflow as the base; sections add only their own classes on top. Fonts (load in ): Marcellus (display), Inter (body), Newsreader (quote) — https://fonts.googleapis.com ============================================================ */ :root{ /* brand palette — the 7 FM colors */ --blue:#295099; --blue-deep:#1d3a70; --blue-ink:#14264a; --sky:#009ace; --teal:#00a287; --orange:#eb903e; --red:#e63c34; --purple:#9c3a8f; --yellow:#fae537; /* neutrals */ --ink:#16202e; --slate:#51606f; --mist:#8a98a6; --line:#e4e9ef; --cloud:#f4f7fa; --paper:#ffffff; /* TEXT EMPHASIS TIERS — hierarchy by tone, not raw opacity. On LIGHT bg use these solid tiers (opacity over non-white muddies). On DARK bg use the --on-dark tiers (white at reduced opacity). Body sits a step below headlines so the eye leads correctly. */ --text-strong:#14264a; /* headlines, emphasis ~13:1 */ --text-body:#2b3a49; /* body copy — soft near-black ~9:1 */ --text-muted:#51606f; /* subheads, supporting, meta ~5.3:1 */ --text-faint:#8a98a6; /* captions, fine print (large only) */ --on-dark-1:#ffffff; /* primary on dark */ --on-dark-2:rgba(255,255,255,.74); /* body on dark */ --on-dark-3:rgba(255,255,255,.52); /* supporting on dark */ /* type families */ --display:'Marcellus', Georgia, serif; --body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --quote:'Newsreader', Georgia, serif; /* LINE-HEIGHT SCALE — unitless, PAIRED to size. Big display tightens, body opens. RULE: never hand-pick a raw line-height on a heading. Apply a type class below (.display-xl/.h1/.h2/.hero-title) or reference one of these tokens, so every size + breakpoint is covered by the system and stops drifting per-page. */ --lh-display:1.02; /* display-xl — largest Marcellus */ --lh-tight:1.1; /* h1 / .hero-title — hero-scale headlines */ --lh-heading:1.18; /* h2 / section titles */ --lh-lead:1.45; /* large lead paragraphs / subheads */ --lh-body:1.6; /* body copy */ --lh-quote:1.34; /* pull-quotes */ /* spacing scale (REM) */ --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem; --s10:8rem; /* section rhythm — the 13–16vh convention as a clamp */ --section-y:clamp(3.5rem, 13vh, 8rem); /* radii + shadow */ --radius:.875rem; --radius-sm:.5rem; --shadow:0 18px 50px -20px rgba(20,38,74,.28); --shadow-sm:0 6px 18px -8px rgba(20,38,74,.22); /* 8-COLUMN GRID */ --maxw:100rem; /* 1600px content band — realistic on wide screens */ --pad:4vw; /* outer gutter */ --g-side:max(var(--pad), calc((100vw - var(--maxw)) / 2)); --g-gap:1.5rem; /* column gap */ } /* minimal reset — Webflow applies box-sizing natively; harmless duplicate */ .fm-reset,*{box-sizing:border-box} /* ============================================================ BASE (apply as classes; no bare-tag styling so it converts) ============================================================ */ .fm-body{font-family:var(--body); color:var(--text-body); line-height:1.6; -webkit-font-smoothing:antialiased; font-size:1.0625rem;} .link{color:var(--sky); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s, color .2s;} .link:hover{color:var(--blue); border-color:currentColor;} /* underline text-link -- colored label + persistent underline, arrow kept, hover deepens. Additive utility (about-r9 timeline per-entry CTAs). Default color = --sky for light contexts; a dark context sets its own color on the element (later source order wins). */ .link-underline{display:inline-flex; align-items:center; gap:.375em; font-family:var(--body); font-weight:600; font-size:.9375rem; color:var(--sky); text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1.5px; transition:color .2s, text-decoration-color .2s;} .link-underline::after{content:"→"; transition:transform .2s;} .link-underline:hover{color:var(--blue);} .link-underline:hover::after{transform:translateX(3px);} @media (prefers-reduced-motion:reduce){ .link-underline,.link-underline::after{transition:none;} } .media{display:block; max-width:100%;} /* ============================================================ DUOTONE MEDIA — lock the FM program-colour duotone on any image slot. Wrap an (or a bg element) in .fm-duo: the photo goes grayscale and the page's --fm-accent multiplies over it. Swap the photo freely (works in Webflow — pick the image there, treatment stays locked). Set --fm-accent once per program page; .is-soft / .is-strong tune the overlay weight. ============================================================ */ .fm-duo{position:relative; isolation:isolate; overflow:hidden;} .fm-duo > img, .fm-duo_img{display:block; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.03) brightness(.96);} .fm-duo::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:1; background:var(--fm-accent,#9c3a8f); opacity:.66; mix-blend-mode:multiply;} .fm-duo.is-soft::after{opacity:.5;} .fm-duo.is-strong::after{opacity:.78;} /* ============================================================ GRID — full-bleed section + inset 8-col band Full = band edge; each tier steps one column; background bleed is a SEPARATE axis from content column-span (the .w-full fix). ============================================================ */ .section{position:relative; width:100%; padding-block:var(--section-y);} .section_grid{ display:grid; grid-template-columns:repeat(8, 1fr); column-gap:var(--g-gap); margin-left:var(--g-side); margin-right:var(--g-side); } /* placement — drop one on any child, named by the columns it spans */ .u-cols-1-8{grid-column:1 / 9;} /* full */ .u-cols-2-7{grid-column:2 / 8;} /* wide */ .u-cols-3-6{grid-column:3 / 7;} /* standard */ .u-cols-4-5{grid-column:4 / 6;} /* narrow */ .u-cols-1-6{grid-column:1 / 7;} /* left 6 */ .u-cols-1-4{grid-column:1 / 5;} /* left 4 */ .u-cols-3-8{grid-column:3 / 9;} /* right 6 */ .u-cols-5-8{grid-column:5 / 9;} /* right 4 */ .u-cols-1-3{grid-column:1 / 4;} /* far-left trio */ .u-cols-5-6{grid-column:5 / 7;} /* middle pair */ .u-cols-7-8{grid-column:7 / 9;} /* far-right pair */ /* background-bleed helpers (separate axis) */ .section_tint{background:var(--cloud);} .section_ink{background:var(--blue-ink); color:var(--on-dark-2);} /* ============================================================ TYPE SCALE (classes only — apply to h1/h2/p in markup) Marcellus is ONE weight (400). Emphasis = size + color, never weight. ============================================================ */ .display-xl{font-family:var(--display); font-weight:400; font-size:clamp(3.625rem, 9vw, 7.75rem); line-height:var(--lh-display); letter-spacing:-.012em; color:var(--text-strong);} /* .hero-title — THE canonical interior hero headline. One size for every page's hero (matches the homepage hero). Heroes apply this class; color sweeps / rainbow clip layer ON TOP of it, they do not redefine the size or line-height. */ .hero-title{font-family:var(--display); font-weight:400; font-size:clamp(2.75rem, 5.6vw, 5.25rem); line-height:var(--lh-tight); letter-spacing:-.008em; color:var(--text-strong);} .h1{font-family:var(--display); font-weight:400; font-size:clamp(2.5rem, 5.2vw, 4.25rem); line-height:var(--lh-tight); letter-spacing:-.01em; color:var(--text-strong);} .h2{font-family:var(--display); font-weight:400; font-size:clamp(1.75rem, 3vw, 2.125rem); line-height:var(--lh-heading); color:var(--text-strong);} .title-sm{font-family:var(--body); font-weight:700; font-size:1.25rem; line-height:1.3; color:var(--text-strong);} .body{font-family:var(--body); font-weight:400; font-size:1.0625rem; line-height:1.6; color:var(--text-body); max-width:68ch;} .body-lg{font-family:var(--body); font-weight:400; font-size:1.1875rem; line-height:1.6; color:var(--text-body); max-width:60ch;} .body-sm{font-family:var(--body); font-size:.9375rem; line-height:1.6; color:var(--text-muted);} .caption{font-family:var(--body); font-size:.8125rem; color:var(--text-faint); letter-spacing:.02em;} .quote{font-family:var(--quote); font-style:italic; font-weight:400; font-size:clamp(1.5625rem, 2.9vw, 2rem); line-height:1.32; letter-spacing:-.005em; color:var(--text-body);} /* text-emphasis utilities — light bg */ .text-1{color:var(--text-strong);} .text-2{color:var(--text-body);} .text-3{color:var(--text-muted);} .text-4{color:var(--text-faint);} /* text-emphasis utilities — dark bg (white at reduced opacity) */ .on-dark-1,.text-white{color:var(--on-dark-1);} .on-dark-2,.text-onink{color:var(--on-dark-2);} .on-dark-3{color:var(--on-dark-3);} /* ============================================================ COLORBAR — the FM rainbow kicker (replaces the retired eyebrow) ============================================================ */ .colorbar{display:flex; height:6px; width:132px; border-radius:3px; overflow:hidden;} .colorbar_i{flex:1;} .colorbar-sm{width:72px; height:5px;} .colorbar_a{background:var(--blue);} .colorbar_b{background:var(--sky);} .colorbar_c{background:var(--teal);} .colorbar_d{background:var(--yellow);} .colorbar_e{background:var(--orange);} .colorbar_f{background:var(--red);} .colorbar_g{background:var(--purple);} /* ============================================================ BUTTON SYSTEM (class-only, element-self hovers only) ============================================================ */ .btn{font-family:var(--body); font-weight:600; font-size:.9375rem; letter-spacing:.01em; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:.625rem; text-decoration:none; line-height:1; border:none; position:relative; white-space:nowrap; transition:background .28s cubic-bezier(.2,.7,.2,1), color .28s, box-shadow .28s, transform .28s;} /* solids */ .btn-solid{background:var(--blue); color:#fff; border-radius:999px; padding:.9375rem 1.875rem; box-shadow:0 8px 20px -10px rgba(41,80,153,.6);} .btn-solid:hover{background:var(--teal); transform:translateY(-2px); box-shadow:0 14px 28px -12px rgba(0,162,135,.6);} .btn-donate{background:var(--orange); color:#fff; border-radius:999px; padding:.9375rem 1.875rem; box-shadow:0 8px 20px -10px rgba(235,144,62,.7);} .btn-donate:hover{background:var(--red); transform:translateY(-2px); box-shadow:0 14px 28px -12px rgba(230,60,52,.7);} .btn-teal{background:var(--teal); color:#fff; border-radius:999px; padding:.9375rem 1.875rem; box-shadow:0 8px 20px -10px rgba(0,162,135,.6);} .btn-teal:hover{background:#008a73; transform:translateY(-2px);} /* outlines — fill on hover */ .btn-outline{background:transparent; box-shadow:inset 0 0 0 1.5px var(--blue); color:var(--blue); border-radius:999px; padding:.9375rem 1.875rem;} .btn-outline:hover{background:var(--blue); color:#fff;} .btn-outline-teal{background:transparent; box-shadow:inset 0 0 0 1.5px var(--teal); color:var(--teal); border-radius:999px; padding:.9375rem 1.875rem;} .btn-outline-teal:hover{background:var(--teal); color:#fff;} /* outline + arrow (no fill) */ .btn-arrow{background:transparent; box-shadow:inset 0 0 0 1.5px rgba(41,80,153,.35); color:var(--blue); border-radius:999px; padding:.9375rem 1.625rem;} .btn-arrow::after{content:"→"; transition:transform .25s;} .btn-arrow:hover{box-shadow:inset 0 0 0 1.5px var(--blue);} .btn-arrow:hover::after{transform:translateX(5px);} /* soft tint */ .btn-tint{background:rgba(0,154,206,.12); color:var(--blue); border-radius:999px; padding:.9375rem 1.875rem;} .btn-tint:hover{background:rgba(0,154,206,.22);} /* text link */ .btn-link{background:none; color:var(--sky); padding:0; font-weight:700;} .btn-link::after{content:"→"; transition:transform .2s;} .btn-link:hover{color:var(--blue);} .btn-link:hover::after{transform:translateX(4px);} /* on-dark variants */ .btn-white{background:#fff; color:var(--blue-ink); border-radius:999px; padding:.9375rem 1.875rem;} .btn-white:hover{transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(0,154,206,.6);} .btn-white-outline{background:transparent; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.65); color:#fff; border-radius:999px; padding:.9375rem 1.875rem;} .btn-white-outline:hover{background:#fff; color:var(--blue-ink); box-shadow:inset 0 0 0 1.5px #fff;} /* ============================================================ RESPONSIVE — Webflow breakpoints only (991 / 767 / 479) ============================================================ */ @media (max-width:991px){ .section_grid{column-gap:1rem;} } @media (max-width:767px){ /* collapse the 8-col band to one reading column */ .section_grid{grid-template-columns:1fr; margin-left:var(--pad); margin-right:var(--pad);} .u-cols-1-8,.u-cols-2-7,.u-cols-3-6,.u-cols-4-5, .u-cols-1-6,.u-cols-1-4,.u-cols-3-8,.u-cols-5-8, .u-cols-1-3,.u-cols-5-6,.u-cols-7-8{grid-column:1 / 2;} } @media (prefers-reduced-motion:reduce){ .btn,.btn-arrow::after,.link{transition:none;} } /* Donation embed: no decorative box -- the Qgiv/Bloomerang embed brings its own white box (matches the Webflow FreshFutures donate callout). Applies to every program page. */ .donembed{background:transparent!important;border:none!important;min-height:0!important; padding:0!important;box-shadow:none!important;max-width:none!important} .donembed_slot{gap:0!important;padding:0!important} .donembed_slot>.colorbar{display:none!important} .qgiv-embed-container{width:100%!important;max-width:720px;margin:1.25rem auto 0;max-height:none!important;overflow:visible!important} /* The embed must render at its natural height, never inside a scroll-box. Nothing on our side caps it: Qgiv's own embed.js seeds the iframe at a fixed 1000px and only grows it to the form's true height via a postMessage resize. max-height:none keeps any wrapper (or a drifted CSS copy) from boxing it in; the min-height floor holds the whole form open so a donor never meets an inner scrollbar while that resize lands, or if a given form type ships non-resizing. Qgiv's dynamic inline height (no !important) still wins for taller forms. FLOOR IS A STOPGAP -- tune to the real form height, and the true fix for a non-resizing form is Qgiv's own responsive-embed setting. */ .qgiv-embed-container iframe{width:100%!important;min-width:0!important;border:0;max-height:none!important;min-height:1400px} @media (max-width:767px){ .qgiv-embed-container iframe{min-height:2000px} } /* wider donate forms: stack the program give-CTA (copy over form) so the embed spans full width */ .give_embedinner{width:100%!important} .give_form{max-width:52rem!important}