/* ============================================================================ PLANNED GIVING — TEMPLATE custom.css Multi-client design system (loads AFTER the vendor base CSS). Current client: United Way of Central Indiana (uwci.plannedgiving.org) ---------------------------------------------------------------------------- HOW TO RE-BRAND FOR A NEW CLIENT You only edit ONE block: "1. CLIENT CONFIG" below. • Colors -> set --brand-* to the client's palette. • Fonts -> set --font-heading / --font-body / --font-button. • Sizing -> set --font-base + the fluid scale knobs (--fluid-min/max). Everything else (the whole file) reads from these variables, so changing a handful of values restyles the entire site. Type sizes scale fluidly with the viewport via clamp(), so you almost never need per-breakpoint font overrides. FILE MAP 1. CLIENT CONFIG ............ edit-me block (colors, fonts, sizing) 2. DERIVED TOKENS .......... palette, spacing, radius, shadow, z, FLUID TYPE 3. Reset & base 4. Typography 5. Layout 6. Header / logo 7. Side navigation (+ working CSS-only mobile menu) 8. Buttons 9. Cards 10. Carousel 11. Gift-planning sections (ways of giving, society, tip, plan-a-gift) 12. Interactive content (how-it-works, benefits, related topics) 13. Forms & calculators 14. Tables 15. Gift diagram / video popup 16. Next steps 17. Bequest form link 18. Alerts 19. FAQ 20. Contact & footer 21. Utilities 22. Sidebar callouts (#vgitgfy, #vggep) 23. Plan-a-Gift modal 24. Gift-plan card grids 25. Compare gift plans 26. Homepage redesigned sections 27. Accessibility, reduced motion, print 28. Responsive fine-tuning ============================================================================ */ @import url("https://fonts.googleapis.com/css2?family=League+Gothic&display=swap"); /* ============================================================================ 1. CLIENT CONFIG — *** THE ONLY BLOCK YOU EDIT PER CLIENT *** ============================================================================ */ :root { /* -- 1a. Brand colors ---------------------------------------------------- */ --brand-primary: #fdb913; /* primary accent (UWCI gold) */ --brand-primary-dark: #b8880e; /* hover/active of primary */ --brand-primary-light: #ffd766; /* tints, soft fills */ --brand-secondary: #d72229; /* secondary accent (UWCI red) */ --brand-secondary-dark: #b51d23; /* hover/active of secondary */ /* On-brand text colors for filled buttons/areas. Set to the color that is readable ON each brand color above. */ --on-primary: #000000; /* text on a primary (gold) fill */ --on-secondary: #ffffff; /* text on a secondary (red) fill */ /* -- 1b. Fonts (families) ------------------------------------------------ */ /* Load the actual font files in the page (Typekit/Google/etc.). Here you only name them. Keep web-safe fallbacks last. */ --font-heading: Arial, Helvetica, sans-serif; --font-body: Arial, Helvetica, sans-serif; --font-button: "league-gothic", "League Gothic", Arial, Helvetica, sans-serif; /* -- 1c. Type sizing knobs ---------------------------------------------- */ /* Base body size (everything scales relative to this). */ --font-base: 1.0625rem; /* ~17px body text */ /* Fluid scaling window: text grows between these viewport widths. Below --fluid-min-vw it stays at the small size; above --fluid-max-vw it stays at the large size. Tune once; the whole scale follows. */ --fluid-min-vw: 22rem; /* 352px */ --fluid-max-vw: 80rem; /* 1280px */ /* Heading weight + letter-spacing (clients with display fonts often want 400 here; text-heavy serif/sans clients want 600-700). */ --heading-weight: 700; --heading-tracking: -0.01em; --heading-line: 1.2; /* -- 1d. Layout knobs ---------------------------------------------------- */ --container-max: 1280px; --sidebar-width: 280px; /* -- 1e. Copy panels ---------------------------------------------------- Surfaces behind the body sections on article/gift pages (How it works, Benefits, Next steps, Related topics, etc.). Default is FLAT — copy sits directly on the page, which most nonprofits prefer. To give a client the old boxed look, just set these four: --panel-bg: #fff; --panel-border: 1px solid var(--border-light); --panel-shadow: var(--shadow-sm); --panel-pad: var(--space-8); -------------------------------------------------------------------- */ --panel-bg: transparent; --panel-border: 0; --panel-shadow: none; --panel-pad: 0; --panel-radius: var(--radius-lg); /* Hairline used to separate flat list rows. */ --rule: 1px solid var(--border-light); } /* ============================================================================ 2. DERIVED TOKENS — you normally don't touch these ============================================================================ */ :root { /* -- Neutral palette -- */ --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1; --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155; --slate-800:#1e293b; --slate-900:#0f172a; --blue-50:#eff6ff; --blue-100:#dbeafe; --blue-200:#bfdbfe; --blue-500:#3b82f6; --blue-600:#2563eb; --blue-700:#1d4ed8; --green-50:#f0fdf4; --green-100:#dcfce7; --green-200:#bbf7d0; --green-500:#22c55e; --green-600:#16a34a; --amber-50:#fffbeb; --amber-100:#fef3c7; --amber-200:#fde68a; --amber-300:#fcd34d; --amber-400:#fbbf24; --amber-500:#f59e0b; --amber-600:#d97706; --red-50:#fef2f2; --red-100:#fee2e2; --red-200:#fecaca; --red-500:#ef4444; --red-600:#dc2626; /* -- Semantic surfaces & text -- */ --bg-primary:#ffffff; --bg-secondary:#f8fafc; --bg-tertiary:#f1f5f9; --bg-elevated:#ffffff; --bg-subtle:#f8fafc; --bg-muted:#e2e8f0; --text-primary:#0f172a; --text-secondary:#475569; --text-tertiary:#64748b; --text-inverse:#ffffff; --text-muted:#94a3b8; --border-light:#e2e8f0; --border-default:#cbd5e1; --border-strong:#94a3b8; /* -- Functional -- */ --success:var(--green-600); --warning:var(--amber-600); --error:var(--red-600); --info:var(--blue-600); --success-bg:var(--green-50); --warning-bg:var(--amber-50); --error-bg:var(--red-50); --info-bg:var(--blue-50); /* -- Shadows -- */ --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); /* -- FLUID TYPE SCALE --------------------------------------------------- Each step is clamp(min, fluid, max). The fluid term is built from the config window (--fluid-min-vw/--fluid-max-vw) so all sizes grow together and stay readable on phones without manual @media overrides. ----------------------------------------------------------------------- */ --fluid-range: calc(var(--fluid-max-vw) - var(--fluid-min-vw)); --text-xs: clamp(0.75rem, calc(0.72rem + 0.15vw), 0.8125rem); --text-sm: clamp(0.8125rem, calc(0.79rem + 0.18vw), 0.9375rem); --text-base: clamp(0.9375rem, calc(0.89rem + 0.30vw), var(--font-base)); --text-lg: clamp(1.0625rem, calc(0.99rem + 0.40vw), 1.1875rem); --text-xl: clamp(1.1875rem, calc(1.08rem + 0.55vw), 1.375rem); --text-2xl: clamp(1.375rem, calc(1.20rem + 0.85vw), 1.75rem); --text-3xl: clamp(1.625rem, calc(1.36rem + 1.30vw), 2.25rem); --text-4xl: clamp(1.875rem, calc(1.45rem + 2.10vw), 2.875rem); --text-5xl: clamp(2.25rem, calc(1.65rem + 3.00vw), 3.5rem); --text-6xl: clamp(2.75rem, calc(1.95rem + 4.00vw), 4.5rem); /* -- Spacing -- */ --space-px:1px; --space-0:0; --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem; --space-7:1.75rem; --space-8:2rem; --space-9:2.25rem; --space-10:2.5rem; --space-11:2.75rem; --space-12:3rem; --space-14:3.5rem; --space-16:4rem; --space-20:5rem; --space-24:6rem; --space-28:7rem; --space-32:8rem; /* -- Radius -- */ --radius-none:0; --radius-sm:0.125rem; --radius-md:0.375rem; --radius-lg:0.5rem; --radius-xl:0.75rem; --radius-2xl:1rem; --radius-3xl:1.5rem; --radius-full:9999px; /* -- Layout -- */ --container-lg:1024px; --container-md:768px; --container-sm:640px; --sidebar-width-sm:240px; /* -- Easing -- */ --ease-linear:cubic-bezier(0,0,1,1); --ease-in:cubic-bezier(0.4,0,1,1); --ease-out:cubic-bezier(0,0,0.2,1); --ease-in-out:cubic-bezier(0.4,0,0.2,1); /* -- Z-index -- */ --z-0:0; --z-10:10; --z-20:20; --z-30:30; --z-40:40; --z-50:50; --z-dropdown:1000; --z-sticky:1100; --z-overlay:1200; --z-modal:1300; --z-popover:1400; --z-tooltip:1500; /* -- Back-compat aliases: older rules referenced --uwci-* directly. They now point at the brand tokens so there is ONE source of truth. -- */ --uwci-black:#000000; --uwci-white:#ffffff; --uwci-gold:var(--brand-primary); --uwci-red:var(--brand-secondary); --uwci-red-dark:var(--brand-secondary-dark); --uwci-text:#000000; --uwci-muted:#3f4d5f; --uwci-border:rgba(0,0,0,0.18); --uwci-font-body:var(--font-body); --uwci-font-button:var(--font-button); } /* ============================================================================ 3. RESET & BASE ============================================================================ */ *, *::before, *::after { box-sizing:border-box; margin:0; padding:0; } html { font-size:16px; -webkit-text-size-adjust:100%; scroll-behavior:smooth; } /* Apply our fonts to the Planned Giving content only, so the client's own header/footer chrome keeps its native typography. */ .pg-content-wrapper, .pg-body, #vgbody { font-family:var(--font-body); font-size:var(--text-base); line-height:1.7; color:var(--text-primary); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } img { max-width:100%; height:auto; image-rendering:-webkit-optimize-contrast; } /* ============================================================================ 4. TYPOGRAPHY (scoped to PG content) ============================================================================ */ .pg-content-wrapper h1, .pg-content-wrapper h2, .pg-content-wrapper h3, .pg-content-wrapper h4, .pg-content-wrapper h5, .pg-content-wrapper h6, .pg-page-title, .pg-section-title { font-family:var(--font-heading); font-weight:var(--heading-weight); line-height:var(--heading-line); letter-spacing:var(--heading-tracking); color:var(--text-primary); margin:0 0 var(--space-4); } .pg-content-wrapper h1, .pg-page-title { font-size:var(--text-4xl); margin-bottom:var(--space-6); position:relative; } .pg-content-wrapper h1::after, .pg-page-title::after { content:''; position:absolute; bottom:-8px; left:0; width:60px; height:3px; background:var(--brand-primary); border-radius:var(--radius-full); } .pg-content-wrapper h2, .pg-section-title { font-size:var(--text-3xl); } .pg-content-wrapper h3 { font-size:var(--text-2xl); } .pg-content-wrapper h4 { font-size:var(--text-xl); } .pg-content-wrapper h5 { font-size:var(--text-lg); } .pg-content-wrapper h6 { font-size:var(--text-base); } .pg-content-wrapper p { margin-bottom:var(--space-4); color:var(--text-secondary); line-height:1.7; } .pg-lede { font-size:var(--text-lg); line-height:1.8; color:var(--text-secondary); font-weight:400; margin-bottom:var(--space-8); } .pg-content-wrapper a { color:var(--brand-secondary); text-decoration:none; transition:color 200ms var(--ease-in-out); } .pg-content-wrapper a:hover { color:var(--brand-secondary-dark); text-decoration:underline; } .pg-content-wrapper strong, .pg-content-wrapper b { font-weight:700; color:var(--text-primary); } .pg-content-wrapper small { font-size:var(--text-sm); color:var(--text-tertiary); } /* ============================================================================ 5. LAYOUT ============================================================================ */ .pg-container { width:100%; max-width:var(--container-max); margin:0 auto; padding:0 var(--space-6); } .pg-container-sm { max-width:var(--container-sm); } .pg-container-md { max-width:var(--container-md); } .pg-container-lg { max-width:var(--container-lg); } .pg-section { padding:var(--space-16) 0; } .pg-section-sm { padding:var(--space-12) 0; } .pg-section-lg { padding:var(--space-20) 0; } .pg-columns { display:grid; gap:var(--space-8); align-items:start; } @media (min-width:1024px) { .pg-columns { grid-template-columns:var(--sidebar-width) 1fr; } } /* ============================================================================ 6. HEADER / LOGO (PG include only; client chrome is untouched) ============================================================================ */ .pg-header { background:rgba(255,255,255,0.95); border-bottom:1px solid var(--border-light); top:0; z-index:var(--z-sticky); backdrop-filter:blur(8px) saturate(180%); } .pg-header .pg-container { padding-top:var(--space-4); padding-bottom:var(--space-4); } .pg-logo { max-height:56px; width:auto; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.1)); } .pg-logo-link { display:inline-block; transition:transform 200ms var(--ease-out); } .pg-logo-link:hover { transform:scale(1.05); text-decoration:none; } /* ============================================================================ 7. SIDE NAVIGATION (single consolidated system) - Vendor markup: ul.pg-side-nav > li > ul > li(.pg-has-sub-nav) > a + span.pg-has-icon(svg) + ul(submenu) - Submenu open/close adds .pg-sub-nav-open (handled by vendor scripts.js). - Arrow = the vendor SVG icon, rotated 90deg when open. - Mobile menu = CSS-only (see 7c). Overrides target vendor base.css so !important is intentional here. ============================================================================ */ /* -- 7a. Container & links -- */ .pg-side-nav, .pg-side-nav ul { list-style:none !important; margin:0 !important; padding:0 !important; } .pg-side-nav li { position:relative; box-sizing:border-box; list-style:none !important; margin:0 !important; padding:0 !important; } .pg-side-nav li::before, .pg-side-nav li::after, .pg-side-nav li::marker { content:none !important; display:none !important; } .pg-side-nav { --nav-accent: var(--brand-primary); --nav-accent-2: var(--brand-secondary); --nav-text: #000; --nav-muted: #303030; --nav-border: rgba(0,0,0,0.18); --nav-hover: color-mix(in srgb, var(--brand-primary) 18%, transparent); background:#fff !important; border:1px solid var(--nav-border) !important; border-radius:var(--radius-lg) !important; box-shadow:var(--shadow-sm) !important; overflow:hidden !important; padding:var(--space-2) !important; font-family:var(--font-body) !important; } .pg-side-nav > li > ul { margin:0 !important; padding:0 !important; } .pg-side-nav > li > ul > li + li { margin-top:2px !important; } .pg-side-nav a { display:block !important; width:100%; border-radius:var(--radius-md) !important; color:var(--nav-text) !important; font-size:var(--text-sm) !important; line-height:1.35 !important; text-decoration:none !important; transition:background-color 160ms var(--ease-out), color 160ms var(--ease-out), box-shadow 160ms var(--ease-out) !important; } .pg-side-nav a::before { display:none !important; } .pg-side-nav > li > ul > li > a, .pg-side-nav > li > ul > li.pg-has-sub-nav > a { padding:10px 38px 10px 12px !important; font-weight:700 !important; } .pg-side-nav a:hover, .pg-side-nav a:focus { background:var(--nav-hover) !important; color:#000 !important; text-decoration:none !important; } .pg-side-nav a:focus-visible { outline:none !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-primary) 45%, transparent) !important; } /* current page */ .pg-side-nav > li > ul > li.pg-current > a, .pg-side-nav ul ul .pg-current > a { background:var(--brand-primary) !important; color:#000 !important; } /* nested submenus */ .pg-side-nav ul ul { margin:4px 0 8px 12px !important; padding-left:12px !important; border-left:2px solid var(--nav-border) !important; display:none; } .pg-side-nav .pg-sub-nav-open > ul { display:block; animation:pgSlideDown 200ms var(--ease-out); } .pg-side-nav ul ul a { padding:7px 10px !important; color:var(--nav-muted) !important; font-size:var(--text-sm) !important; font-weight:500 !important; } .pg-side-nav ul ul ul { margin-left:8px !important; padding-left:10px !important; } .pg-side-nav ul:empty { display:none !important; } @keyframes pgSlideDown { from { opacity:0; max-height:0; } to { opacity:1; max-height:600px; } } /* -- 7b. Submenu arrow = vendor SVG icon, rotated when open -- */ .pg-side-nav .pg-has-sub-nav > a { padding-right:46px !important; } .pg-side-nav .pg-has-sub-nav > .pg-has-icon { position:absolute !important; top:0 !important; right:8px !important; left:auto !important; bottom:0 !important; z-index:3 !important; display:flex !important; align-items:center !important; justify-content:center !important; width:36px !important; min-width:36px !important; height:auto !important; min-height:0 !important; padding:0 !important; margin:0 !important; color:#000 !important; cursor:pointer !important; pointer-events:auto !important; } .pg-side-nav .pg-has-sub-nav > .pg-has-icon::before, .pg-side-nav .pg-has-sub-nav > .pg-has-icon::after { content:none !important; display:none !important; } .pg-side-nav .pg-has-sub-nav > .pg-has-icon svg { position:static !important; top:auto !important; bottom:auto !important; display:block !important; width:18px !important; height:18px !important; flex:0 0 18px !important; fill:currentColor !important; transform:rotate(0deg) !important; transform-origin:50% 50% !important; transition:transform 160ms var(--ease-out), color 160ms var(--ease-out) !important; } .pg-side-nav .pg-has-sub-nav:hover > .pg-has-icon, .pg-side-nav .pg-has-sub-nav > .pg-has-icon:hover { color:var(--brand-secondary) !important; } .pg-side-nav .pg-sub-nav-open > .pg-has-icon svg, .pg-side-nav .pg-current.pg-sub-nav-open > .pg-has-icon svg { transform:rotate(90deg) !important; } .pg-side-nav ul ul .pg-has-sub-nav > a { padding-right:40px !important; } .pg-side-nav ul ul .pg-has-sub-nav > .pg-has-icon { right:4px !important; width:32px !important; min-width:32px !important; height:auto !important; min-height:0 !important; } .pg-side-nav ul ul .pg-has-sub-nav > .pg-has-icon svg { width:15px !important; height:15px !important; flex-basis:15px !important; } /* Open parents also contain their expanded submenu inside the same

, so a full-height icon would drop the arrow into the middle of the dropdown. Cap the icon to the parent ROW height so the arrow stays on the parent's own line. */ .pg-side-nav .pg-sub-nav-open > .pg-has-icon { bottom:auto !important; height:40px !important; } .pg-side-nav ul ul .pg-sub-nav-open > .pg-has-icon { height:34px !important; } /* -- 7c. MOBILE MENU -------------------------------------------------------- The vendor nav already ships a "Menu" toggle button INSIDE the nav:

<-- toggle
<-- the menu

IMPORTANT — open state is the class `.pg-mobile-nav-open` on . This is the SAME class the vendor base CSS already uses, so one script drives both. The script (pg-menu.js / template) toggles that class on click. A