/* ============================================================================ PLANNED GIVING - TEMPLATE custom.css DEPLOY BUILD: NEXT-CLIENT-STARTER-2026-08-04 Multi-client design system (loads AFTER the vendor base CSS). Current client: set in section 33 at the bottom of this file ---------------------------------------------------------------------------- HOW TO RE-BRAND FOR A NEW CLIENT Edit only section 33: fonts, colors, type, buttons, forms, and banner. * 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. TEMPLATE DEFAULTS ........ fallback colors, fonts, and 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 33. New-client configuration (edit this section) 34. Reusable client-matching modules 35. Cross-client production hardening ============================================================================ */ /* Client font files belong in section 33 so rebranding stays in one place. */ @import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700;800;900&display=swap"); /* ============================================================================ 1. TEMPLATE DEFAULTS - overridden by the client block in section 33 ============================================================================ */ :root { /* -- 1a. Brand colors ---------------------------------------------------- */ --brand-primary: #006990; /* primary brand color */ --brand-primary-dark: #004f6d; /* hover/active teal */ --brand-primary-light: #d8edf4; /* pale teal tint */ --brand-secondary: #8f0e2b; /* secondary CTA/accent color */ --brand-secondary-dark: #6f0a21; /* hover/active burgundy */ /* On-brand text colors for filled buttons/areas. Set to the color that is readable ON each brand color above. */ --on-primary: #ffffff; /* white text on the red primary fill */ --on-secondary: #ffffff; /* white text on the secondary 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: "Prata", Georgia, "Times New Roman", serif; --font-body: "Roboto", Arial, Helvetica, sans-serif; --font-button: "Roboto Slab", "Roboto", Arial, Helvetica, sans-serif; /* -- Component tokens: buttons ------------------------------------------ Client-specific controls for every CTA and form action in the template. */ --button-bg:var(--brand-primary); --button-bg-hover:var(--brand-secondary); --button-text:var(--on-primary); --button-text-hover:var(--on-secondary); --button-border:var(--brand-primary); --button-border-hover:var(--brand-secondary); --button-radius:var(--radius-full); --button-font-size:var(--text-base); --button-weight:600; --button-transform:none; --button-tracking:0.02em; --button-min-height:48px; --button-padding-block:0.75rem; --button-padding-inline:1.5rem; /* -- Component tokens: forms -------------------------------------------- */ --form-bg:#ffffff; --form-section-bg:var(--bg-subtle); --form-border:var(--border-default); --form-border-focus:var(--brand-primary); --form-text:var(--text-primary); --form-placeholder:var(--text-muted); --form-radius:var(--radius-md); --form-control-height:48px; --form-control-padding:0.75rem 0.875rem; --form-row-gap:var(--space-3); --form-section-gap:var(--space-8); /* -- Component tokens: comparison tables ------------------------------- */ --compare-header-bg:var(--brand-primary); --compare-header-text:var(--on-primary); --compare-header-link:var(--on-primary); --compare-body-bg:#ffffff; --compare-body-alt:var(--bg-subtle); --compare-body-text:var(--text-primary); --compare-border:var(--border-light); --compare-check:var(--brand-secondary); --compare-link:var(--brand-primary); /* -- 1c. Type sizing knobs ---------------------------------------------- */ /* Base body size (everything scales relative to this). */ --font-base: 1rem; /* base body text size */ /* 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: 600; --heading-tracking: 0; --heading-line: 1.25; --heading-color:var(--text-primary); --heading-transform:none; --heading-h1-size:var(--text-4xl); --heading-h2-size:var(--text-3xl); --heading-h3-size:var(--text-2xl); --heading-h4-size:var(--text-xl); --heading-h1-space:var(--space-6); --heading-section-space:var(--space-4); /* Navigation and homepage-banner typography. */ --nav-font:var(--font-body); --nav-font-size:var(--text-base); --nav-font-weight:600; --nav-line-height:1.35; --nav-letter-spacing:0; --nav-text-transform:none; --nav-sub-font-size:var(--text-sm); --nav-sub-font-weight:500; --banner-caption-font:var(--font-heading); --banner-caption-weight:700; --banner-caption-line-height:1.15; --banner-caption-letter-spacing:0; --banner-caption-transform:none; --home-section-pad:var(--space-16); --home-section-pad-mobile:var(--space-12); --home-section-gap:0; --home-section-transition-pad:var(--space-6); --home-section-transition-pad-mobile:var(--space-4); --home-band-breakout-start:0px; --home-band-breakout-end:0px; /* -- 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:#000000; --text-secondary:#54595f; --text-tertiary:#6c7378; --text-inverse:#ffffff; --text-muted:#8a9499; --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.875rem, calc(1.55rem + 1.00vw), 2rem); /* Elim h2 ~= 32px */ --text-4xl: clamp(2.25rem, calc(1.55rem + 2.50vw), 3.5rem); /* Elim h1 ~= 56px */ --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); } .pg-content-wrapper h1::after, .pg-page-title::after { content:none; display:none; } .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:var(--on-primary) !important; } /* Current item sits on the red fill -> its dropdown arrow uses on-primary too. */ .pg-side-nav .pg-current > .pg-has-icon { color:var(--on-primary) !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; } /* ============================================================================ 9. CARDS ============================================================================ */ .pg-page-card { background:var(--bg-primary); border:1px solid var(--border-light); border-radius:var(--radius-2xl); padding:var(--space-6); display:flex; flex-direction:column; height:100%; position:relative; overflow:hidden; text-decoration:none; color:inherit; transition:transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out), border-color 300ms var(--ease-out); } .pg-page-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--brand-primary); transform:scaleX(0); transform-origin:left; transition:transform 300ms var(--ease-out); } .pg-page-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-xl); border-color:var(--brand-primary); text-decoration:none; color:#000; } .pg-page-card:hover::before { transform:scaleX(1); } .pg-page-card-title { font-size:var(--text-xl); font-weight:600; margin-bottom:var(--space-3); color:var(--text-primary); } .pg-page-card p { color:var(--text-secondary); } .pg-page-card-outer { display:grid; gap:var(--space-6); margin:var(--space-8) 0; } @media (min-width:768px) { .pg-page-card-outer { grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); } } .pg-page-card-cols { grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); } .pg-page-cards-sm .pg-page-card-outer { grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); } .pg-page-cards-lg .pg-page-card-outer { grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); } /* ============================================================================ 11. GIFT-PLANNING SECTIONS ============================================================================ */ /* -- Ways of Giving cards -- */ .pg-has-ways-of-giving { background:var(--bg-primary); padding:var(--space-20) 0; position:relative; overflow:hidden; } .pg-has-ways-of-giving::before { content:''; position:absolute; top:-50%; right:-25%; width:50%; height:200%; background:radial-gradient(circle, var(--bg-tertiary), transparent); border-radius:50%; opacity:0.5; filter:blur(100px); } .pg-has-ways-of-giving .pg-section-title { text-align:center; margin-bottom:var(--space-12); font-size:var(--text-4xl); } .pg-has-ways-of-giving .pg-card { background:var(--bg-primary); border-radius:var(--radius-2xl); overflow:hidden; display:flex; flex-direction:column; height:100%; text-decoration:none; color:inherit; box-shadow:var(--shadow-sm); border:1px solid var(--border-light); transition:transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out); } .pg-has-ways-of-giving .pg-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-xl); text-decoration:none; color:inherit; } .pg-has-ways-of-giving .pg-card-image { height:200px; overflow:hidden; position:relative; } .pg-has-ways-of-giving .pg-card-image::after { content:''; position:absolute; bottom:0; left:0; right:0; height:50%; background:linear-gradient(to top, rgba(0,0,0,0.3), transparent); } .pg-has-ways-of-giving .pg-card-image img { width:100%; height:100%; object-fit:cover; transition:transform 500ms var(--ease-out); } .pg-has-ways-of-giving .pg-card:hover img { transform:scale(1.1); } .pg-has-ways-of-giving .pg-card-content { padding:var(--space-6); flex:1; } .pg-has-ways-of-giving .pg-strong { font-size:var(--text-xl); font-weight:600; color:var(--text-primary); margin-bottom:var(--space-2); display:block; } /* -- Legacy Society -- */ .pg-has-society { background:var(--bg-tertiary); padding:var(--space-16) 0; border-radius:var(--radius-3xl); margin:var(--space-8) 0; } .pg-society-inner { display:grid; gap:clamp(1.5rem, 4vw, 3rem); align-items:center; } @media (min-width:1024px) { .pg-society-inner { grid-template-columns:minmax(0, 1.15fr) minmax(280px, 0.85fr); } } .pg-society-media { display:flex; align-items:center; justify-content:center; width:100%; min-width:0; margin:0; } .pg-society-img { display:block; width:100%; height:auto; max-width:520px; max-height:480px; object-fit:cover; object-position:center; border-radius:var(--radius-2xl); box-shadow:var(--shadow-lg); transition:transform 300ms var(--ease-out), filter 300ms var(--ease-out); } .pg-society-text .pg-button { max-width:100%; white-space:normal; text-align:center; } .pg-society-img:hover { transform:rotate(-2deg) scale(1.02); filter:grayscale(0.2); } /* -- Tip of the Week -- */ .pg-has-tip-of-the-week { background:var(--bg-primary); border:2px solid var(--border-light); border-radius:var(--radius-2xl); padding:var(--space-8); margin:var(--space-8) 0; position:relative; overflow:hidden; } .pg-has-tip-of-the-week::before { content:''; position:absolute; top:-50%; right:-20%; width:400px; height:400px; background:radial-gradient(circle, var(--warning-bg), transparent); opacity:0.3; } .pg-has-tip-of-the-week .pg-section-title { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-6); } .pg-has-tip-of-the-week .fa-lightbulb { font-size:var(--text-2xl); color:var(--warning); filter:drop-shadow(0 0 10px rgba(217,119,6,0.3)); } .pg-has-tip-of-the-week .readmoretip { margin-top:var(--space-4); } /* -- Plan-a-Gift CTA band -- */ .pg-has-pag { background:var(--brand-primary); color:var(--on-primary); padding:var(--space-8); border-radius:var(--radius-3xl); margin:var(--space-8) 0; position:relative; overflow:hidden; } .pg-has-pag::before { content:''; position:absolute; top:-50%; left:-30%; width:60%; height:200%; background:rgba(255,255,255,0.1); transform:rotate(45deg); } .pg-has-pag .pg-section-title span { background:transparent; padding:0 var(--space-6); } .pg-has-pag .pg-columns { display:grid; gap:var(--space-8); align-items:center; margin-top:var(--space-6); } @media (min-width:768px) { .pg-has-pag .pg-columns { grid-template-columns:auto 1fr; } } .pg-has-pag a { display:inline-block; background:var(--brand-secondary); color:var(--on-secondary); padding:var(--space-3) var(--space-6); border-radius:var(--radius-full); font-weight:600; box-shadow:var(--shadow-md); text-decoration:none; transition:transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), background-color 200ms var(--ease-out); } .pg-has-pag a:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); text-decoration:none; background:var(--brand-secondary-dark); } .pg-has-pag .fa-gift { font-size:var(--text-4xl); animation:pgFloat 3s ease-in-out infinite; } @keyframes pgFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } } .pg-plan-a-gift-copy { font-size:var(--text-lg); line-height:1.7; margin-bottom:var(--space-6); } /* ============================================================================ 12. INTERACTIVE CONTENT BLOCKS (gift/article pages) FLAT BY DEFAULT - copy sits on the page, no shadowed boxes. Surfaces are driven by the --panel-* tokens (section 1e) so a client can opt into boxes. ============================================================================ */ /* Shared section shell (flat unless a client sets the panel tokens). */ #vghowworks, #vgbenefits, #vgnext, .pg-important-related-topics { background:var(--panel-bg); border:var(--panel-border); border-radius:var(--panel-radius); box-shadow:var(--panel-shadow); padding:var(--panel-pad); margin:var(--space-10) 0; } /* Shared section heading: simple client-style typography. */ #vghowworks h2, #vgbenefits h2, #vgnext h2, .pg-important-related-topics h2 { color:var(--text-primary); font-family:var(--font-heading); font-size:var(--text-2xl); margin:0 0 var(--space-6); } #vghowworks h2::after, #vgbenefits h2::after, #vgnext h2::after, .pg-important-related-topics h2::after { content:none; display:none; } /* -- How it works: numbered steps on hairline rows (no cards) -- NOTE: the step text is mixed inline content (text + links), so we use an absolutely-positioned number + left padding rather than grid. A grid would scatter each text node / link into its own cell and break the sentence. */ #vghowworks ul { list-style:none !important; counter-reset:step; margin:0; padding:0; } #vghowworks li { display:block; list-style:none !important; counter-increment:step; position:relative; padding:var(--space-5) 0 var(--space-5) calc(34px + var(--space-4)); color:var(--text-secondary); line-height:1.7; font-size:var(--text-base); border-top:var(--rule); } #vghowworks li:first-child { border-top:0; } #vghowworks li::before { content:counter(step); position:absolute; left:0; top:var(--space-5); width:34px; height:34px; border-radius:50%; background:var(--brand-primary); color:var(--on-primary); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:var(--text-base); } #vghowworks li p, #vghowworks li div { margin:0; } /* -- Benefits: clean checkmark list (no cards, no native bullet) -- */ #vgbenefits ul { list-style:none !important; list-style-type:none !important; margin:0; padding:0; } #vgbenefits li { display:block; list-style:none !important; /* kill vendor disc marker */ position:relative; padding:var(--space-2) 0 var(--space-2) var(--space-9); color:var(--text-secondary); line-height:1.7; } #vgbenefits li::before { content:''; position:absolute; left:0; top:var(--space-2); width:24px; height:24px; border-radius:50%; background:color-mix(in srgb, var(--success) 14%, transparent); color:var(--success); display:block; } #vgbenefits li::after { content:''; position:absolute; left:8px; top:calc(var(--space-2) + 5px); width:6px; height:10px; border:solid var(--success); border-width:0 2px 2px 0; transform:rotate(45deg); } /* -- Related topics: clean linked list with hairline rows (no boxes) -- */ .pg-important-related-topics ul { list-style:none !important; list-style-type:none !important; margin:0; padding:0; } .pg-important-related-topics li { display:block; list-style:none !important; border-top:var(--rule); } .pg-important-related-topics li:first-child { border-top:0; } .pg-important-related-topics a { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-4) 0; color:var(--text-primary); font-weight:600; font-size:var(--text-base); line-height:1.5; text-decoration:none; transition:color 160ms var(--ease-out), padding-left 160ms var(--ease-out); } .pg-important-related-topics a::after { content:'\2192'; flex-shrink:0; color:var(--brand-secondary); font-weight:700; transition:transform 160ms var(--ease-out); } .pg-important-related-topics a:hover { color:var(--brand-secondary); padding-left:var(--space-2); } .pg-important-related-topics a:hover::after { transform:translateX(4px); } .pg-important-related-topics a[href$=".doc"]::after, .pg-important-related-topics a[href$=".pdf"]::after { content:'\2193'; } /* ============================================================================ 13. FORMS & CALCULATORS ============================================================================ */ #vgcom { background:var(--bg-primary); padding:var(--space-8); border-radius:var(--radius-2xl); box-shadow:var(--shadow-sm); border:1px solid var(--border-light); margin:var(--space-8) 0; } #vgcom h2 { color:var(--text-primary); border-bottom:2px solid var(--border-light); padding-bottom:var(--space-4); margin-bottom:var(--space-6); font-size:var(--text-2xl); } #vgcom section { margin-bottom:var(--space-6); } #vgcom label { display:block; padding:var(--space-4); background:var(--bg-tertiary); border-radius:var(--radius-lg); margin-bottom:var(--space-3); cursor:pointer; border:2px solid transparent; position:relative; transition:border-color 200ms var(--ease-out), background-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out); } #vgcom label:hover { border-color:var(--brand-primary); background:var(--bg-primary); box-shadow:var(--shadow-sm); } #vgcom input[type="checkbox"] { position:absolute; opacity:0; cursor:pointer; height:0; width:0; } #vgcom input[type="checkbox"]:checked + label { border-color:var(--brand-primary); background:var(--bg-primary); box-shadow:var(--shadow-md); } #vgcom label p { margin:0 0 var(--space-2) 0; font-size:var(--text-base); line-height:1.5; color:var(--text-secondary); } #vgcom label p span { display:block; font-weight:600; font-size:var(--text-lg); color:var(--text-primary); margin-bottom:var(--space-1); } #vgcom .checkmark { position:absolute; top:var(--space-4); right:var(--space-4); height:20px; width:20px; background-color:var(--bg-muted); border-radius:var(--radius-sm); transition:background-color 200ms var(--ease-out); } #vgcom .checkmark:after { content:""; position:absolute; display:none; left:7px; top:3px; width:5px; height:10px; border:solid var(--text-inverse); border-width:0 3px 3px 0; transform:rotate(45deg); } #vgcom input[type="checkbox"]:checked ~ .checkmark { background-color:var(--brand-primary); } #vgcom input[type="checkbox"]:checked ~ .checkmark:after { display:block; } #vgcom input[type="submit"] { background:var(--brand-primary); color:var(--on-primary); border:none; padding:var(--space-3) var(--space-8); border-radius:var(--radius-full); font-weight:600; cursor:pointer; float:right; font-size:var(--text-base); transition:background-color 300ms var(--ease-out), transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out); } #vgcom input[type="submit"]:hover { background:var(--brand-secondary); color:var(--on-secondary); transform:translateY(-2px); box-shadow:var(--shadow-md); } /* generic form elements */ .pg-form-group { margin-bottom:var(--space-4); } .pg-form-label { display:block; margin-bottom:var(--space-2); font-weight:500; color:var(--text-primary); } .pg-form-input { width:100%; padding:var(--space-3); border:1px solid var(--border-default); border-radius:var(--radius-md); font-size:var(--text-base); transition:border-color 200ms var(--ease-out); } .pg-form-input:focus { outline:none; border-color:var(--brand-primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent); } .pg-form-textarea { min-height:120px; resize:vertical; } /* ============================================================================ 14. TABLES ============================================================================ */ #vggoals { width:100%; background:var(--bg-primary); border-radius:var(--radius-2xl); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--border-light); margin:var(--space-8) 0; } #vggoals thead { background:var(--brand-primary); } #vggoals thead p strong { color:var(--on-primary) !important; } #vggoals th { padding:var(--space-4) var(--space-6); font-weight:600; text-align:left; color:var(--on-primary); font-size:var(--text-sm); text-transform:uppercase; letter-spacing:0.05em; } #vggoals td { padding:var(--space-4) var(--space-6); border-bottom:1px solid var(--border-light); color:var(--text-secondary); vertical-align:top; } #vggoals tbody tr { transition:background-color 200ms var(--ease-out); } #vggoals tbody tr:hover { background:var(--bg-tertiary); } #vggoals tbody tr:last-child td { border-bottom:none; } #vggoals a { color:var(--brand-secondary); font-weight:500; } #vggoals a:hover { color:var(--brand-secondary-dark); } @media (max-width:768px) { #vggoals thead { display:none; } #vggoals tr { display:block; margin-bottom:var(--space-4); background:var(--bg-primary); border-radius:var(--radius-lg); padding:var(--space-4); box-shadow:var(--shadow-sm); border:1px solid var(--border-light); } #vggoals td { display:block; text-align:left; padding:var(--space-2) 0 var(--space-2) 50%; border:none; position:relative; } #vggoals td::before { content:attr(data-label); position:absolute; left:0; top:var(--space-2); font-weight:600; color:var(--text-primary); width:45%; } } /* ============================================================================ 15. GIFT DIAGRAM ============================================================================ */ #vggiftdiag { text-align:center; margin:0 auto; } .vggiftdiag_logo { margin:var(--space-4) auto 0; width:100px; padding:5px; transition:opacity 500ms var(--ease-out); } .pg-gift-diagram-end .vggiftdiag_logo { opacity:1; } #vgdiagram { margin:0 auto; } .giftvideo { margin:0 auto; } body .bg-card { background-color:#fff !important; } /* ============================================================================ 16. NEXT STEPS ============================================================================ */ /* Flat: section shell + heading inherit the shared rules in section 12. */ #vgnext { background:var(--panel-bg); border:var(--panel-border); border-radius:var(--panel-radius); box-shadow:var(--panel-shadow); padding:var(--panel-pad); margin:var(--space-10) 0; } #vgnext ul { display:grid; gap:var(--space-3); list-style:none !important; list-style-type:none !important; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); margin:0; padding:0; } #vgnext li { position:relative; display:block; list-style:none !important; padding:var(--space-4) var(--space-5); border:var(--rule); border-radius:var(--radius-md); transition:border-color 160ms var(--ease-out), background-color 160ms var(--ease-out); } #vgnext li::marker { content:none !important; display:none !important; } #vgnext li::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--brand-primary); border-radius:var(--radius-full) 0 0 var(--radius-full); opacity:0; transition:opacity 160ms var(--ease-out); } #vgnext li:hover { border-color:var(--brand-primary); background:color-mix(in srgb, var(--brand-primary) 6%, transparent); } #vgnext li:hover::before { opacity:1; } #vgnext a { color:var(--text-primary); font-weight:600; text-decoration:none; } .vgicon { display:none !important; } /* ============================================================================ 17. BEQUEST FORM LINK ============================================================================ */ /* Block flow (NOT flex): this box mixes an icon with inline text + links. Flex turned each word/link into its own item and wrapped "click here" onto two lines. Float the icon and let the sentence flow normally. */ .vgbequestformlink { display:block; overflow:hidden; padding:var(--space-4) var(--space-5); background:transparent; border:0; border-left:4px solid var(--brand-primary); border-radius:0; box-shadow:none; font-size:var(--text-base); line-height:1.7; color:var(--text-secondary); margin:var(--space-6) 0; } .vgbequestformlink img { float:left; max-width:44px; height:auto; margin:2px var(--space-4) var(--space-2) 0; } .vgbequestformlink a { display:inline; color:var(--brand-secondary); font-weight:600; text-decoration:underline; transition:color 200ms var(--ease-out); } .vgbequestformlink a:hover { color:var(--brand-secondary-dark); } @media (max-width:768px) { .vgbequestformlink { padding:var(--space-4); } .vgbequestformlink img { max-width:40px; } } /* ============================================================================ 18. ALERTS ============================================================================ */ .pg-alert { padding:var(--space-4); border-radius:var(--radius-lg); margin-bottom:var(--space-4); border:1px solid; } .pg-alert-info { background:var(--info-bg); border-color:var(--blue-200); color:var(--info); } .pg-alert-success { background:var(--success-bg); border-color:var(--green-200); color:var(--success); } .pg-alert-warning { background:var(--warning-bg); border-color:var(--amber-200); color:var(--warning); } .pg-alert-error { background:var(--error-bg); border-color:var(--red-200); color:var(--error); } .pg-alert-accent { background:var(--bg-primary); border:2px solid var(--brand-primary); color:var(--text-primary); } .pg-alert a { color:inherit; font-weight:600; text-decoration:none; display:flex; align-items:center; gap:var(--space-3); transition:opacity 200ms var(--ease-out); } .pg-alert a:hover { opacity:0.8; text-decoration:none; } /* ============================================================================ 19. FAQ ============================================================================ */ #vgsubqa { margin:var(--space-8) 0; } #vgsubqa > p { padding:var(--space-4) var(--space-4) var(--space-4) var(--space-12); background:var(--bg-tertiary); border-radius:var(--radius-lg); margin-bottom:var(--space-2); cursor:pointer; font-weight:600; color:var(--text-primary); position:relative; transition:background-color 200ms var(--ease-out); } #vgsubqa > p:hover { background:var(--bg-primary); box-shadow:var(--shadow-sm); } .vgslide { max-height:0; overflow:hidden; transition:max-height 300ms var(--ease-in-out); background:var(--bg-primary); border-radius:var(--radius-lg); margin-bottom:var(--space-4); } .pg-faq-open + .vgslide { max-height:1000px; transition:max-height 400ms var(--ease-in-out); } #vgsubqa .vgslide p, #vgsubqa .vgslide ul { margin:var(--space-4); color:var(--text-secondary); } .pg-faq-toggle img { float:left; padding-right:10px; } /* ============================================================================ 20. CONTACT & FOOTER ============================================================================ */ .pg-has-contact { background:var(--bg-tertiary); padding:var(--space-16) 0; } .pg-contact { margin-top:var(--space-6); } .pg-contacts { display:grid; gap:var(--space-8); margin-top:var(--space-8); } @media (min-width:768px) { .pg-contacts { grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); } } .pg-contact-item { background:var(--bg-primary); padding:var(--space-6); border-radius:var(--radius-xl); box-shadow:var(--shadow-sm); border:1px solid var(--border-light); } .pg-contact-item.pg-has-img { display:flex; gap:var(--space-4); align-items:flex-start; } .pg-contact-item .pg-img-wrap { width:120px; height:120px; border-radius:var(--radius-lg); overflow:hidden; flex-shrink:0; } .pg-contact-item .pg-img-wrap img { width:100%; height:100%; object-fit:cover; } .pg-contact-item ul { list-style:none; padding:0; margin:0; font-size:var(--text-sm); } .pg-contact-item ul li { margin-bottom:var(--space-2); line-height:1.4; } .pg-contact-item ul li.pg-contact-name { font-weight:600; font-size:var(--text-base); color:var(--text-primary); margin-bottom:var(--space-3); } @media (max-width:768px) { .pg-contact-item.pg-has-img { flex-direction:column; text-align:center; } .pg-contact-item .pg-img-wrap { align-self:center; } } .pg-is-footer { background:var(--brand-primary); color:var(--text-inverse); padding:var(--space-8) 0; text-align:center; font-size:var(--text-sm); } .pg-is-footer a, .pg-is-footer p { color:#fff !important; } .pg-is-footer a { text-decoration:underline; } .pg-footer_proupgrade { max-width:var(--container-lg); margin:0 auto; padding:0 var(--space-4); } /* ============================================================================ 21. UTILITIES ============================================================================ */ .pg-sr-only, .hideOffScreen { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); border:0; } .pg-text-align-center { text-align:center; } .pg-text-align-left { text-align:left; } .pg-text-align-right { text-align:right; } .pg-nowrap { white-space:nowrap; } .pg-has-line-beside { position:relative; display:flex; align-items:center; justify-content:center; } .pg-has-line-beside::before, .pg-has-line-beside::after { content:''; flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--border-light), transparent); } .pg-has-line-beside span { padding:0 var(--space-8); font-weight:600; background:var(--bg-primary); } .pg-has-background-color { padding:var(--space-16) 0; } .pg-has-primary-background-color { background:var(--brand-primary); color:var(--on-primary); } .pg-has-secondary-background-color { background-color:var(--bg-secondary); } .pg-has-light-grey-background-color { background-color:var(--bg-tertiary); } .pg-has-white-background-color { background-color:var(--bg-primary); } .pg-has-primary-color { color:var(--text-primary); } .pg-has-white-color { color:var(--text-inverse); } .pg-has-dark-grey-color { color:var(--text-primary); } .pg-mb-0 { margin-bottom:0; } .pg-mb-2 { margin-bottom:var(--space-2); } .pg-mb-4 { margin-bottom:var(--space-4); } .pg-mb-6 { margin-bottom:var(--space-6); } .pg-mb-8 { margin-bottom:var(--space-8); } .pg-mt-0 { margin-top:0; } .pg-mt-2 { margin-top:var(--space-2); } .pg-mt-4 { margin-top:var(--space-4); } .pg-mt-6 { margin-top:var(--space-6); } .pg-mt-8 { margin-top:var(--space-8); } .pg-p-0 { padding:0; } .pg-p-2 { padding:var(--space-2); } .pg-p-4 { padding:var(--space-4); } .pg-p-6 { padding:var(--space-6); } .pg-p-8 { padding:var(--space-8); } .vg-clearfix::after { content:""; display:table; clear:both; } /* fade-in helper */ @keyframes pgFadeInUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } } .pg-fade-in { animation:pgFadeInUp 0.6s var(--ease-out) forwards; } @keyframes pgSpin { to { transform:rotate(360deg); } } .pg-loading { position:relative; pointer-events:none; } .pg-loading::after { content:''; position:absolute; top:50%; left:50%; width:20px; height:20px; margin:-10px 0 0 -10px; border:2px solid var(--border-light); border-top-color:var(--brand-primary); border-radius:50%; animation:pgSpin 1s linear infinite; } /* legacy vendor cleanup */ #vgbody ol { list-style:inherit !important; margin-left:20px; } #vgbody ul { list-style-type:disc !important; } body #vgbody #vgWPW input, body #vgbody #vgWPW textarea { border:1px solid #ccc; } /* ============================================================================ 22. SIDEBAR CALLOUTS (#vgitgfy "in this guide", #vggep estate-plan nav) ============================================================================ */ #vgitgfy { float:right; width:360px; max-width:42%; margin:0 0 1.5rem 1.5rem; padding:1rem 1.25rem; background:#fff; background-image:linear-gradient(180deg, rgba(2,38,88,0.04), rgba(0,46,109,0.02)); border:1px solid rgba(2,38,88,0.15); border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.06); box-sizing:border-box; position:relative; } @media (min-width:1025px) { #vgitgfy { position:sticky; top:1.25rem; } } #vgitgfy::before { content:""; position:absolute; left:0; top:12px; bottom:12px; width:4px; border-radius:4px; background-image:linear-gradient(180deg, var(--brand-primary), var(--brand-secondary)); opacity:0.9; } #vgitgfy h2 { margin:0 0 0.5rem 0; font-size:var(--text-xl); line-height:1.2; color:#022658; letter-spacing:0.2px; } #vgitgfy > p { margin:0 0 0.75rem 0; color:#12324f; font-size:var(--text-base); } #vgitgfy li { position:relative; padding:0.4rem 0 0.4rem 1.5rem; margin:0; color:#2a3b4f; font-size:var(--text-base); line-height:1.45; border-bottom:1px dashed rgba(2,38,88,0.15); } #vgitgfy li:last-child { border-bottom:none; } #vgitgfy a:focus, #vgitgfy button:focus, #vgitgfy li:focus-within { box-shadow:inset 0 0 0 2px rgba(76,156,217,0.35); border-radius:6px; } @media (max-width:1024px) { #vgitgfy { float:none; width:100%; max-width:100%; margin:1rem 0; } } #vggep { float:right; width:280px; background:#fff; border:1px solid #ddd; border-radius:8px; padding:16px; margin:0 0 20px 20px; box-shadow:0 2px 6px rgba(0,0,0,0.05); } #vggep .title { font-size:var(--text-lg); font-weight:700; margin-bottom:12px; color:var(--brand-secondary); border-bottom:2px solid var(--brand-secondary); padding-bottom:4px; } #vggep a { display:block; padding:8px 12px; margin-bottom:6px; border-radius:6px; text-decoration:none; font-size:var(--text-sm); font-weight:500; color:#333; background:#f9f9f9; transition:all 0.2s ease; } #vggep a strong { margin-right:6px; color:var(--brand-secondary); } #vggep a:hover, #vggep a:focus { background:var(--brand-secondary); color:#fff; outline:none; } #vggep a:hover strong, #vggep a:focus strong { color:#fff; } #vggep a.selected { background:var(--brand-secondary); color:#fff; font-weight:600; } #vggep a.selected strong { color:#fff; } #vggep a.lite { background:transparent; color:var(--brand-secondary); font-size:var(--text-sm); font-weight:500; border:1px dashed #bbb; padding:6px 10px; } #vggep a.lite:hover, #vggep a.lite:focus { background:#eef5fa; color:var(--brand-secondary); border-color:var(--brand-secondary); } @media (max-width:1024px) { #vggep { float:none; width:100%; margin:1rem 0; } } /* ============================================================================ 24. GIFT-PLAN CARD GRIDS Shared card language for .pg-gift-plans and .pg-page-card-cols grids (gift lists, footer tools, "Explore More"). Overrides vendor base.css. ============================================================================ */ .pg-gift-plans .pg-page-card-outer, .pg-page-card-outer.pg-page-card-cols { display:grid !important; gap:22px !important; margin:34px 0 !important; } .pg-gift-plans .pg-page-card-outer { grid-template-columns:repeat(2, minmax(0, 1fr)) !important; } .pg-page-card-outer.pg-page-card-cols { grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important; } .pg-gift-plans .pg-page-card-outer > article, .pg-page-card-outer.pg-page-card-cols > article, .pg-page-card-outer.pg-page-card-cols > .pg-page-card { min-width:0 !important; } .pg-gift-plans .pg-page-card, .pg-page-card-outer.pg-page-card-cols > .pg-page-card, .pg-page-card-outer.pg-page-card-cols > article > .pg-page-card { box-sizing:border-box !important; display:flex !important; flex-direction:column !important; min-height:185px !important; height:100% !important; padding:26px !important; background:#fff !important; border:1px solid rgba(0,0,0,0.16) !important; border-top:5px solid var(--brand-primary) !important; border-radius:var(--radius-md) !important; box-shadow:none !important; color:#000 !important; font-family:var(--font-body) !important; text-align:left !important; text-decoration:none !important; transform:none !important; transition:border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important; } .pg-gift-plans .pg-page-card::before, .pg-page-card-outer.pg-page-card-cols .pg-page-card::before, .pg-gift-plans .pg-page-card .pg-button::before, .pg-page-card-outer.pg-page-card-cols .pg-page-card .pg-button::before { display:none !important; } .pg-gift-plans .pg-page-card:hover, .pg-gift-plans .pg-page-card:focus, .pg-page-card-outer.pg-page-card-cols > .pg-page-card:hover, .pg-page-card-outer.pg-page-card-cols > .pg-page-card:focus, .pg-page-card-outer.pg-page-card-cols > article > .pg-page-card:hover, .pg-page-card-outer.pg-page-card-cols > article > .pg-page-card:focus { border-color:var(--brand-secondary) !important; border-top-color:var(--brand-secondary) !important; box-shadow:0 10px 24px rgba(0,0,0,0.10) !important; color:#000 !important; outline:none !important; text-decoration:none !important; transform:translateY(-2px) !important; } .pg-gift-plans .pg-page-card:focus-visible { box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-primary) 45%, transparent), 0 10px 24px rgba(0,0,0,0.10) !important; } .pg-gift-plans .pg-page-card-title, .pg-page-card-outer.pg-page-card-cols .pg-page-card-title { margin:0 0 14px !important; color:#000 !important; font-family:var(--font-heading) !important; font-size:var(--text-2xl) !important; font-weight:400 !important; line-height:1.28 !important; text-align:left !important; text-decoration:none !important; } .pg-gift-plans .pg-page-card p, .pg-page-card-outer.pg-page-card-cols .pg-page-card p { margin:0 !important; color:#000 !important; font-family:var(--font-body) !important; font-size:var(--text-base) !important; font-weight:400 !important; line-height:1.58 !important; text-align:left !important; text-decoration:none !important; } .pg-gift-plans .pg-page-card .pg-button, .pg-page-card-outer.pg-page-card-cols .pg-page-card .pg-button { box-sizing:border-box !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:12px !important; width:fit-content !important; max-width:100% !important; min-height:52px !important; margin:auto 0 0 !important; padding:15px 34px !important; background:var(--brand-primary) !important; border:1px solid var(--brand-primary) !important; border-radius:var(--radius-md) !important; box-shadow:none !important; color:var(--on-primary) !important; font-family:var(--font-button) !important; font-size:var(--text-lg) !important; font-weight:400 !important; line-height:1 !important; letter-spacing:0.02em !important; text-align:center !important; text-decoration:none !important; transition:background-color 160ms ease, border-color 160ms ease, color 160ms ease !important; } .pg-gift-plans .pg-page-card .pg-button span { display:inline-block !important; margin:0 !important; color:currentColor !important; transition:transform 160ms ease !important; } .pg-gift-plans .pg-page-card:hover .pg-button, .pg-gift-plans .pg-page-card:focus .pg-button, .pg-page-card-outer.pg-page-card-cols .pg-page-card:hover .pg-button, .pg-page-card-outer.pg-page-card-cols .pg-page-card:focus .pg-button { background:var(--brand-secondary) !important; border-color:var(--brand-secondary) !important; color:var(--on-secondary) !important; } .pg-gift-plans .pg-page-card:hover .pg-button span, .pg-gift-plans .pg-page-card:focus .pg-button span { transform:translateX(3px) !important; } .pg-gift-plans .pg-page-card *, .pg-page-card-outer.pg-page-card-cols .pg-page-card * { text-decoration:none !important; } .pg-section-title.pg-text-align-center { color:#000 !important; font-family:var(--font-heading) !important; font-size:var(--text-3xl) !important; font-weight:400 !important; line-height:1.24 !important; text-align:center !important; } @media (max-width:900px) { .pg-gift-plans .pg-page-card-outer { grid-template-columns:1fr !important; } } @media (max-width:640px) { .pg-gift-plans .pg-page-card-outer, .pg-page-card-outer.pg-page-card-cols { gap:16px !important; margin:28px 0 !important; } .pg-gift-plans .pg-page-card, .pg-page-card-outer.pg-page-card-cols > .pg-page-card, .pg-page-card-outer.pg-page-card-cols > article > .pg-page-card { min-height:0 !important; padding:22px !important; } .pg-gift-plans .pg-page-card .pg-button, .pg-page-card-outer.pg-page-card-cols .pg-page-card .pg-button { width:100% !important; } } /* ============================================================================ 26. GIFT DIAGRAM / VIDEO POPUP (#blankets overlay + #popped lightbox) ============================================================================ */ body.overlay-open { overflow:hidden !important; } #vgbody #blankets { box-sizing:border-box !important; inset:0 !important; width:100vw !important; height:100vh !important; background:rgba(0,0,0,0.58) !important; z-index:9000 !important; } #vgbody #blankets[style*="display: block"], #vgbody #blankets[style*="display:block"] { display:flex !important; align-items:center !important; justify-content:center !important; padding:24px !important; } #vgbody #popped { box-sizing:border-box !important; top:50% !important; left:50% !important; width:min(900px, calc(100vw - 48px)) !important; max-width:900px !important; margin:0 !important; padding:18px !important; background:#fff !important; border:1px solid rgba(0,0,0,0.14) !important; border-radius:var(--radius-md) !important; box-shadow:0 24px 70px rgba(0,0,0,0.32) !important; transform:translate(-50%, -50%) !important; z-index:9001 !important; } #vgbody #popped[style*="display: block"], #vgbody #popped[style*="display:block"] { display:block !important; } #vgbody #popped #popped_close { position:static !important; display:block !important; height:0 !important; } #vgbody #close_popped { position:absolute !important; top:-18px !important; right:-18px !important; box-sizing:border-box !important; width:44px !important; height:44px !important; max-width:none !important; max-height:none !important; padding:7px !important; background:#fff !important; border:2px solid #000 !important; border-radius:50% !important; box-shadow:0 8px 18px rgba(0,0,0,0.28) !important; cursor:pointer !important; object-fit:contain !important; z-index:2 !important; } #vgbody #close_popped:hover, #vgbody #close_popped:focus { background:var(--brand-primary) !important; } #vgbody #popped iframe, #vgbody #popped video { display:block !important; width:100% !important; max-width:100% !important; aspect-ratio:16 / 9 !important; height:auto !important; min-height:0 !important; margin:0 !important; background:#fff !important; border:0 !important; border-radius:4px !important; } @media (max-width:760px) { #vgbody #blankets[style*="display: block"], #vgbody #blankets[style*="display:block"] { padding:14px !important; } #vgbody #popped { width:calc(100vw - 28px) !important; padding:12px !important; } #vgbody #close_popped { top:-14px !important; right:-10px !important; width:38px !important; height:38px !important; padding:6px !important; } } /* ============================================================================ 27. HOMEPAGE REDESIGNED SECTIONS ============================================================================ */ /* -- Society (modern) -- */ .society-section-modern { background:linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding:var(--space-20) 0; position:relative; overflow:hidden; } .society-section-modern::before { content:''; position:absolute; top:-50%; right:-30%; width:60%; height:150%; background:radial-gradient(circle, rgba(255,255,255,0.4), transparent); pointer-events:none; } .society-content-wrapper { display:grid; gap:var(--space-12); align-items:center; position:relative; z-index:2; } @media (min-width:1024px) { .society-content-wrapper { grid-template-columns:1fr 1fr; } } .society-text-content { order:2; } @media (min-width:1024px) { .society-text-content { order:1; } } .society-heading { font-size:var(--text-4xl); font-weight:var(--heading-weight); color:var(--text-primary); margin-bottom:var(--space-6); line-height:1.2; } .society-description { font-size:var(--text-lg); color:var(--text-secondary); line-height:1.8; margin-bottom:var(--space-8); } .society-cta-button { display:inline-flex; align-items:center; gap:var(--space-3); padding:var(--space-4) var(--space-8); background:var(--brand-primary); color:var(--on-primary); border-radius:var(--radius-full); font-weight:600; text-decoration:none; box-shadow:var(--shadow-md); transition:transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out), background-color 300ms var(--ease-out), color 300ms var(--ease-out); } .society-cta-button:hover { transform:translateY(-2px); box-shadow:var(--shadow-xl); background:var(--brand-secondary); color:var(--on-secondary); text-decoration:none; } .society-cta-button span { transition:transform 300ms var(--ease-out); } .society-cta-button:hover span { transform:translateX(4px); } .society-image-wrapper { order:1; position:relative; } @media (min-width:1024px) { .society-image-wrapper { order:2; } } .society-image-container { position:relative; border-radius:var(--radius-3xl); overflow:hidden; box-shadow:var(--shadow-2xl); transform:rotate(3deg); transition:transform 400ms var(--ease-out); } .society-image-container:hover { transform:rotate(0deg) scale(1.02); } .society-image-container img { width:100%; height:auto; display:block; } .society-image-overlay { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(to top, rgba(0,0,0,0.7), transparent); padding:var(--space-8) var(--space-6) var(--space-6); color:#fff; } .society-image-overlay h3 { font-size:var(--text-xl); font-weight:600; margin:0; color:#fff; } /* -- Tip (modern) -- */ .tip-section-modern { background:#fff; padding:var(--space-16) 0; } .tip-container { max-width:900px; margin:0 auto; text-align:center; } .tip-header { display:inline-flex; align-items:center; gap:var(--space-3); background:var(--amber-50); padding:var(--space-3) var(--space-6); border-radius:var(--radius-full); margin-bottom:var(--space-8); } .tip-icon { width:32px; height:32px; background:var(--amber-500); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:var(--text-lg); } .tip-header h2 { font-size:var(--text-2xl); font-weight:600; color:var(--text-primary); margin:0; } .tip-content-box { background:linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); border:2px solid var(--amber-200); border-radius:var(--radius-2xl); padding:var(--space-10); position:relative; overflow:hidden; } .tip-main-content { position:relative; z-index:2; font-size:var(--text-lg); line-height:1.8; color:var(--text-secondary); } .tip-links-section { margin-top:var(--space-8); padding-top:var(--space-8); border-top:2px dashed var(--amber-300); } .tip-links-grid { display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:center; } .tip-link-item { display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-3) var(--space-5); background:#fff; border:2px solid var(--amber-400); border-radius:var(--radius-lg); color:var(--text-primary); font-weight:500; text-decoration:none; white-space:nowrap; transition:all 200ms var(--ease-out); } .tip-link-item:hover { background:var(--amber-500); border-color:var(--amber-600); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-md); text-decoration:none; } .tip-link-item::after { content:'\2192'; transition:transform 200ms var(--ease-out); } .tip-link-item:hover::after { transform:translateX(3px); } /* -- Planning (modern) -- */ .planning-section-modern { background:var(--slate-50); padding:var(--space-20) 0; } .planning-header { text-align:center; margin-bottom:var(--space-12); } .planning-header h2 { font-size:var(--text-4xl); font-weight:var(--heading-weight); color:var(--text-primary); margin-bottom:var(--space-4); } .planning-header p { font-size:var(--text-lg); color:var(--text-secondary); max-width:600px; margin:0 auto; line-height:1.6; } .planning-cards-grid { display:grid; gap:var(--space-8); margin-top:var(--space-12); } @media (min-width:768px) { .planning-cards-grid { grid-template-columns:repeat(3, 1fr); } } .planning-card { background:#fff; border-radius:var(--radius-2xl); overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; height:100%; position:relative; border:1px solid var(--border-light); transition:transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out); } .planning-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--brand-primary); transform:scaleX(0); transform-origin:left; transition:transform 300ms var(--ease-out); } .planning-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-2xl); text-decoration:none; } .planning-card:hover::before { transform:scaleX(1); } .planning-card-icon { padding:var(--space-8) var(--space-6) 0; font-size:48px; display:flex; align-items:center; justify-content:center; } .planning-card-content { padding:var(--space-6); flex:1; display:flex; flex-direction:column; } .planning-card h3 { font-size:var(--text-xl); font-weight:600; color:var(--text-primary); margin-bottom:var(--space-3); } .planning-card p { color:var(--text-secondary); line-height:1.6; flex:1; } .planning-card-arrow { margin-top:var(--space-4); color:var(--brand-secondary); font-weight:600; display:flex; align-items:center; gap:var(--space-2); } .planning-card:hover .planning-card-arrow { gap:var(--space-3); } /* -- Contact (modern) -- */ .contact-section-modern { background:linear-gradient(180deg, #fff 0%, var(--slate-50) 100%); padding:var(--space-20) 0; position:relative; } .contact-header { text-align:center; margin-bottom:var(--space-12); } .contact-header h2 { font-size:var(--text-4xl); font-weight:var(--heading-weight); color:var(--text-primary); margin-bottom:var(--space-4); } .contact-header p { font-size:var(--text-lg); color:var(--text-secondary); max-width:600px; margin:0 auto; } .contact-cards-wrapper { display:grid; gap:var(--space-8); margin-top:var(--space-8); } @media (min-width:768px) { .contact-cards-wrapper { grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); } } .contact-card { background:#fff; border:1px solid var(--border-light); border-radius:var(--radius-2xl); padding:var(--space-8); position:relative; overflow:hidden; transition:transform 300ms var(--ease-out), border-color 300ms var(--ease-out); } .contact-card::before { content:''; position:absolute; inset:-2px; background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); border-radius:var(--radius-2xl); opacity:0; transition:opacity 300ms var(--ease-out); z-index:-1; } .contact-card:hover { transform:translateY(-4px); border-color:transparent; } .contact-card:hover::before { opacity:1; } .contact-card-inner { position:relative; background:#fff; border-radius:calc(var(--radius-2xl) - 2px); padding:var(--space-8); margin:calc(-1 * var(--space-8)); z-index:1; display:flex; gap:var(--space-6); align-items:flex-start; } .contact-avatar { width:100px; height:100px; border-radius:var(--radius-2xl); overflow:hidden; flex-shrink:0; box-shadow:var(--shadow-md); } .contact-avatar img { width:100%; height:100%; object-fit:cover; } .contact-info { flex:1; } .contact-name { font-size:var(--text-xl); font-weight:700; color:var(--text-primary); margin-bottom:var(--space-2); } .contact-title { font-size:var(--text-sm); color:var(--brand-secondary); font-weight:500; margin-bottom:var(--space-4); } .contact-details { display:flex; flex-direction:column; gap:var(--space-2); } .contact-detail-item { display:flex; align-items:center; gap:var(--space-3); font-size:var(--text-sm); color:var(--text-secondary); } .contact-detail-icon { width:20px; height:20px; background:var(--slate-100); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:12px; } .contact-detail-item a { color:var(--text-secondary); text-decoration:none; transition:color 200ms var(--ease-out); } .contact-detail-item a:hover { color:var(--brand-secondary); } @media (max-width:768px) { .society-heading, .planning-header h2, .contact-header h2 { font-size:var(--text-3xl); } .society-image-container { transform:none; } .tip-content-box { padding:var(--space-6); } .planning-card-icon { font-size:36px; padding:var(--space-6) var(--space-4) 0; } .contact-card-inner { flex-direction:column; text-align:center; } .contact-avatar { margin:0 auto; } .contact-details { align-items:center; } } /* ============================================================================ ARTICLE BODY LINKS (client red, underlined - excludes buttons) ============================================================================ */ /* NOTE on inline text flow: links in copy used to render as blocks (breaking sentences mid-line). The cause was flex/grid on their CONTAINERS - a flex/ grid parent "blockifies" child links regardless of any display rule on the link itself. The fix is upstream: #vghowworks li, #vgbenefits li and .vgbequestformlink are now display:block (see sections 12 & 17), so links flow inline normally. No per-link display override is needed here. */ #vgbody.pg-article p a:not(.pg-button):not(.pg-button-item), #vgbody.pg-article li a:not(.pg-button):not(.pg-button-item), #vgbody.pg-article dd a:not(.pg-button):not(.pg-button-item), #vgbody.pg-article blockquote a:not(.pg-button):not(.pg-button-item), #vghowworks a, .pg-important-related-topics a { color:var(--brand-secondary) !important; text-decoration:underline !important; text-decoration-color:currentColor !important; text-underline-offset:3px !important; text-decoration-thickness:1.5px !important; } #vgbody.pg-article p a:not(.pg-button):not(.pg-button-item):hover, #vgbody.pg-article li a:not(.pg-button):not(.pg-button-item):hover, #vgbody.pg-article dd a:not(.pg-button):not(.pg-button-item):hover, #vgbody.pg-article blockquote a:not(.pg-button):not(.pg-button-item):hover, #vghowworks a:hover, .pg-important-related-topics a:hover { color:var(--brand-secondary-dark) !important; text-decoration-color:currentColor !important; } #vgbody.pg-article p a:not(.pg-button):not(.pg-button-item):focus-visible, #vghowworks a:focus-visible, .pg-important-related-topics a:focus-visible { border-radius:3px !important; outline:2px solid var(--brand-secondary) !important; outline-offset:3px !important; } /* ============================================================================ 28. ACCESSIBILITY, MOTION & PRINT ============================================================================ */ *:focus { outline:2px solid var(--brand-primary); outline-offset:2px; } *:focus:not(:focus-visible) { outline:none; } .pg-skip-link { position:absolute; top:-40px; left:0; background:var(--brand-primary); color:var(--on-primary); padding:var(--space-2) var(--space-4); text-decoration:none; border-radius:var(--radius-md); z-index:var(--z-tooltip); } .pg-skip-link:focus { top:var(--space-2); left:var(--space-2); } @media (prefers-contrast:high) { :root { --border-light:var(--border-strong); --text-secondary:var(--text-primary); } #vghowworks li, .pg-important-related-topics, .pg-important-related-topics li { border-color:var(--text-primary); } } @media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; } #vghowworks li:hover, .pg-important-related-topics li:hover { transform:none; } } @media print { .pg-header, .pg-side-nav, .pg-mobile-menu-toggle, .pg-pre-footer, .pg-is-footer, .vgprinthide, .banner-carousel .arrow { display:none !important; } .pg-content-wrapper, .pg-body, #vgbody { font-size:12pt; line-height:1.5; color:#000; background:#fff; } .pg-main-content { max-width:100%; margin:0; padding:0; } .pg-page-card { border:1px solid #ccc; break-inside:avoid; } a { color:#000; text-decoration:underline; } a[href^="http"]:after { content:" (" attr(href) ")"; } } /* ============================================================================ 29. RESPONSIVE FINE-TUNING (Type scales fluidly via clamp(), so only structural tweaks remain.) ============================================================================ */ @media (max-width:1024px) { .pg-columns { grid-template-columns:1fr; } .pg-has-intro .pg-columns { display:block; } .pg-has-intro .pg-is-3 { margin-bottom:var(--space-6); order:1; } .pg-has-intro .pg-is-9 { order:2; } } @media (max-width:768px) { .pg-container { padding:0 var(--space-4); } .pg-section { padding:var(--space-12) 0; } .pg-page-card { padding:var(--space-4); } .pg-has-pag .pg-columns { grid-template-columns:1fr; text-align:center; gap:var(--space-4); } .pg-society-inner { grid-template-columns:1fr; text-align:center; } } @media (max-width:480px) { .pg-page-card-outer { grid-template-columns:1fr; } #vgnext ul { grid-template-columns:1fr; } .pg-has-ways-of-giving .pg-columns { grid-template-columns:1fr; } } /* ============================================================================ 30. FIXED-HEADER OFFSET (inner pages) The client's Squarespace header is position:fixed (~90px tall). The SQS runtime that normally pads the body below it was dropped on the VPS, so inner pages slid up under the header and clipped the page title. Push the inner-page main section clear of the header. * Inner pages start with .pg-section.pg-has-main-content -> offset them. * Homepage starts with .pg-has-main-content (no .pg-section) -> left as-is. --pg-header-offset is set to the exact header height by the menu script (pg-menu.js / template); the px values below are safe fallbacks if that script isn't loaded. ============================================================================ */ html { scroll-padding-top: calc(var(--pg-header-offset, 96px) + var(--space-2)); } .pg-content-wrapper > .pg-section.pg-has-main-content { padding-top: calc(var(--pg-header-offset, 96px) + var(--space-6)); } @media (max-width:1024px) { .pg-content-wrapper > .pg-section.pg-has-main-content { padding-top: calc(var(--pg-header-offset, 84px) + var(--space-5)); } } /* ============================================================================ 30A. REUSABLE CONTENT RHYTHM & READING-ORDER IMPROVEMENTS Cross-client layout rules only. Colors, fonts, and sizing continue to come from the client configuration in section 33. ============================================================================ */ /* Keep long-form copy comfortable to scan without constraining grids, media, forms, or card collections. */ #vgbody.pg-article > p, #vgbody.pg-article > ul, #vgbody.pg-article > ol, #vgbody.pg-article > blockquote, #vghowworks > p, #vgbenefits > p, #vgnext > p { max-width:72ch; } .pg-content-wrapper p + h2, .pg-content-wrapper ul + h2, .pg-content-wrapper ol + h2, .pg-content-wrapper p + h3, .pg-content-wrapper ul + h3, .pg-content-wrapper ol + h3 { margin-top:clamp(1.75rem, 3vw, 2.75rem); } .pg-content-wrapper li + li, #vgbody li + li { margin-top:var(--space-2); } /* Homepage sections use one predictable vertical rhythm. This prevents the oversized desktop gaps and cramped mobile transitions produced by several generations of page markup. */ .pg-content-wrapper > .pg-section:not(.pg-has-main-content), .pg-has-ways-of-giving, .society-section-modern, .tip-section-modern, .planning-section-modern, .contact-section-modern { padding-block:clamp(3rem, 6vw, 5rem); } .planning-header, .contact-header { margin-bottom:clamp(1.75rem, 4vw, 3rem); } .planning-cards-grid, .contact-cards-wrapper { gap:clamp(1rem, 2.5vw, 2rem); margin-top:clamp(1.5rem, 3vw, 3rem); } .planning-card-content, .contact-card, .tip-content-box { padding:clamp(1.25rem, 3vw, 2rem); } /* Plan a Gift: retain the branded CTA while giving its copy a clear hierarchy, readable measure, and touch-friendly actions. */ .pg-has-pag { isolation:isolate; margin-block:clamp(2rem, 5vw, 4rem); padding:clamp(1.5rem, 4vw, 3rem); } .pg-has-pag::before { z-index:-1; pointer-events:none; } .pg-has-pag .pg-section-title { max-width:22ch; margin:0 0 var(--space-4); color:var(--on-primary) !important; font-size:clamp(1.75rem, 3vw, 2.5rem); line-height:1.15; } .pg-has-pag .pg-section-title span { padding:0; color:inherit; } .pg-has-pag .pg-columns { grid-template-columns:minmax(0, 1fr); gap:clamp(1rem, 3vw, 2rem); margin-top:var(--space-4); } .pg-has-pag p, .pg-plan-a-gift-copy { max-width:65ch; margin:0 0 var(--space-5); color:var(--on-primary) !important; font-size:clamp(1rem, 1.2vw, 1.125rem); line-height:1.65; } .pg-has-pag a, .pg-has-pag .pg-button, .pg-has-pag .pg-button-item { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0.75rem 1.5rem; line-height:1.2; text-align:center; } /* "Is this gift for you?" must remain in reading order. Sticky positioning and a floating 42%-wide column made adjacent paragraphs difficult to follow. */ #vgitgfy, body #vgbody #vgitgfy { position:relative !important; inset:auto !important; float:none !important; clear:both !important; width:100% !important; max-width:760px !important; margin:clamp(1.75rem, 4vw, 3rem) auto !important; padding:clamp(1.25rem, 3vw, 1.75rem) !important; } #vgitgfy h2 { margin:0 0 var(--space-3) !important; color:var(--brand-primary) !important; font-family:var(--font-heading) !important; font-size:clamp(1.375rem, 2vw, 1.75rem) !important; line-height:1.2 !important; } #vgitgfy > p { margin:0 0 var(--space-4) !important; color:var(--text-secondary) !important; line-height:1.6 !important; } #vgitgfy ul, #vgitgfy ol { margin:0 !important; padding:0 !important; } #vgitgfy li { padding:0.65rem 0 0.65rem 1.5rem !important; color:var(--text-primary) !important; line-height:1.55 !important; } @media (max-width:768px) { .pg-has-pag { border-radius:var(--radius-2xl); } .pg-has-pag .pg-columns { text-align:left; } .pg-has-pag a, .pg-has-pag .pg-button, .pg-has-pag .pg-button-item { width:100%; } #vgitgfy, body #vgbody #vgitgfy { max-width:none !important; margin-block:var(--space-6) !important; } } /* ============================================================================ 33. START HERE FOR A NEW CLIENT Replace values only in this section. Reusable modules begin at section 34. ============================================================================ */ /* Optional custom fonts. Keep font files on the planned-giving domain or embed them as data URLs so cross-domain CORS rules cannot force fallback fonts. @font-face { font-family:"ClientHeading"; font-style:normal; font-weight:400 700; font-display:swap; src:url("data:font/woff2;base64,REPLACE_ME") format("woff2"); } */ :root { /* Identity and brand palette. */ --client-name:"St. Andrew's Episcopal School"; --client-url:"saes.org"; --brand-primary:#017380; --brand-primary-dark:#264c59; --brand-primary-light:#dcecef; --brand-secondary:#c32032; --brand-secondary-dark:#991827; --on-primary:#ffffff; --on-secondary:#ffffff; /* Font families. Use loaded family names or safe system fallbacks. */ --font-heading:"Lato", Arial, Helvetica, sans-serif; --font-body:"Lato", Arial, Helvetica, sans-serif; --font-button:"Lato", Arial, Helvetica, sans-serif; /* Buttons and actions. */ --button-bg:var(--brand-secondary); --button-bg-hover:var(--brand-secondary-dark); --button-text:var(--on-secondary); --button-text-hover:var(--on-secondary); --button-border:var(--brand-secondary); --button-border-hover:var(--brand-secondary-dark); --button-radius:3px; --button-font-size:1rem; --button-weight:800; --button-transform:uppercase; --button-tracking:0.035em; --button-min-height:48px; --button-padding-block:0.75rem; --button-padding-inline:1.5rem; /* Forms. */ --form-bg:#ffffff; --form-section-bg:#f5f4f2; --form-border:#c9c8c5; --form-border-focus:var(--brand-primary); --form-text:#231f20; --form-placeholder:#78787a; --form-radius:3px; --form-control-height:48px; --form-control-padding:0.75rem 0.875rem; --form-row-gap:0.75rem; --form-section-gap:2rem; /* Comparison picker and results table. */ --compare-header-bg:var(--brand-primary); --compare-header-text:var(--on-primary); --compare-header-link:var(--on-primary); --compare-body-bg:#ffffff; --compare-body-alt:#f5f4f2; --compare-body-text:#231f20; --compare-border:#d6d3cf; --compare-check:var(--brand-secondary); --compare-link:var(--brand-primary); /* Heading hierarchy: client content H2 visually maps to PG page H1. */ --font-base:1.125rem; --heading-weight:700; --heading-tracking:0.0125em; --heading-line:1.1; --heading-color:var(--brand-primary); --heading-transform:none; --heading-h1-size:clamp(2.5rem, 4vw, 4rem); --heading-h2-size:clamp(2rem, 3vw, 2.5rem); --heading-h3-size:clamp(1.4rem, 2vw, 1.75rem); --heading-h4-size:clamp(1.1rem, 1.5vw, 1.25rem); --heading-h1-space:1.5rem; --heading-section-space:1.25rem; /* Planned-giving navigation. */ --nav-font:var(--font-heading); --nav-font-size:0.9375rem; --nav-font-weight:800; --nav-line-height:1.2; --nav-letter-spacing:0.02em; --nav-text-transform:uppercase; --nav-sub-font-size:0.875rem; --nav-sub-font-weight:700; /* Homepage banner caption typography. */ --banner-caption-font:var(--font-heading); --banner-caption-weight:800; --banner-caption-line-height:1.15; --banner-caption-letter-spacing:0.01em; --banner-caption-transform:none; --banner-caption-rail-size:clamp(1.35rem, 2.15vw, 2rem); --banner-caption-mobile-size:clamp(1.125rem, 4.75vw, 1.5rem); /* Homepage section rhythm. */ --home-section-pad:clamp(1.75rem, 2.5vw, 2.5rem); --home-section-pad-mobile:1.5rem; --home-section-gap:1rem; --home-section-transition-pad:clamp(1rem, 1.5vw, 1.5rem); --home-section-transition-pad-mobile:0.875rem; --home-band-breakout-start:5rem; --home-band-breakout-end:3rem; /* Shared content rail and homepage component spacing. */ --page-gutter:24px; --page-gutter-mobile:14px; --card-gap:clamp(16px, 2vw, 24px); --card-copy-to-cta-gap:1.125rem; /* Alert / legislation call-to-action. */ --alert-accent:var(--brand-secondary); --alert-on-accent:var(--on-secondary); --alert-radius:3px; --alert-shadow:0 16px 36px rgb(15 23 42 / 10%); /* Final legal/mission footer paragraph. */ --legal-footer-bg:var(--brand-primary-dark); --legal-footer-text:var(--on-primary); --legal-footer-radius:4px; --legal-footer-font-size:clamp(0.75rem, 0.9vw, 0.875rem); /* Layout and neutral surfaces. */ --container-max:1185px; --sidebar-width:270px; --bg-primary:#ffffff; --bg-secondary:#f5f4f2; --bg-tertiary:#edecea; --bg-elevated:#ffffff; --bg-subtle:#f8f7f5; --bg-muted:#e3e1dd; --text-primary:#231f20; --text-secondary:#4f4d4d; --text-tertiary:#78787a; --text-muted:#78787a; --border-light:#dedbd7; --border-default:#c9c8c5; --border-strong:#9c9996; /* Article panels: keep flat unless the client uses cards. */ --panel-bg:transparent; --panel-border:0; --panel-shadow:none; --panel-pad:0; --panel-radius:var(--radius-lg); /* Homepage banner sizing and natural photography. */ --banner-height:clamp(340px, 38vw, 500px); --banner-mobile-height:clamp(280px, 70vw, 400px); --banner-radius:18px; --banner-mobile-radius:14px; --banner-image-position:center center; --banner-aspect-ratio:16 / 7.6; --banner-tablet-aspect-ratio:16 / 9; --banner-mobile-aspect-ratio:4 / 3; --banner-caption-rail-width:660px; --banner-caption-rail-bg:rgb(10 25 28 / 0.78); --banner-control-bg:var(--brand-primary); --banner-control-color:#ffffff; --banner-control-hover-bg:var(--brand-primary-dark); --banner-dot-bg:var(--brand-primary-dark); --banner-caption-max:min(640px, 72%); --banner-caption-left:clamp(32px, 5vw, 72px); --banner-caption-right:clamp(32px, 5vw, 72px); --banner-caption-bottom:clamp(30px, 5vw, 68px); --banner-caption-top:clamp(30px, 5vw, 68px); --banner-caption-size:clamp(2rem, 4vw, 3.5rem); --banner-overlay:none; } /* Optional per-slide crop overrides. */ /* .pg-banner__slide:nth-child(1) { --banner-image-position:center center; } .pg-banner__slide:nth-child(2) { --banner-image-position:center 35%; } */ /* Add truly client-specific selectors below this line only when tokens cannot express the required result. Keep them inside section 33. */ /* SAES source-site typography: page titles are uppercase and tightly set; article copy uses Lato at an 18px / 1.5 rhythm. */ .pg-content-wrapper, .pg-body, #vgbody { line-height:1.5 !important; } .pg-content-wrapper p, #vgbody p, .pg-content-wrapper li, #vgbody li { line-height:1.5 !important; } .pg-content-wrapper .pg-page-title:not(.pg-sr-only), .pg-content-wrapper h1:not(.pg-sr-only) { font-weight:700 !important; letter-spacing:0.013em !important; text-transform:uppercase !important; } .pg-content-wrapper .pg-section-title.pg-text-align-center { letter-spacing:0.0125em !important; text-transform:uppercase !important; } /* ============================================================================ 34. REUSABLE TEMPLATE MODULES These are safe cross-client fixes/patterns. Rebrand with the variables in section 33 first; only edit these rules when markup or behavior changes. ============================================================================ */ /* -- 34a. Compact alert / tax incentive bubble ------------------------------ Live markup often uses:
    New Tax Incentives...
    This keeps the alert slim with a small green pulse dot instead of a large banner block. -------------------------------------------------------------------------- */ .wc-content-cards-section:has(#alert.pg-alert) { margin-top:clamp(8px, 1.5vw, 18px) !important; padding-top:clamp(8px, 1.5vw, 18px) !important; } #alert.pg-alert { position:relative !important; display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; max-width:980px !important; min-height:0 !important; margin:0 auto clamp(14px, 2vw, 22px) !important; padding:9px 14px !important; border:1px solid color-mix(in srgb, var(--brand-primary) 18%, var(--border-light)) !important; border-radius:10px !important; background:#fff !important; box-shadow:0 8px 20px rgb(0 22 19 / 0.055) !important; } #alert.pg-alert::before { content:"" !important; flex:0 0 auto !important; width:11px !important; height:11px !important; margin-right:10px !important; border-radius:999px !important; background:var(--alert-dot-color, var(--green-500)) !important; box-shadow:0 0 0 0 color-mix(in srgb, var(--alert-dot-color, var(--green-500)) 42%, transparent) !important; animation:pgAlertPulse 2.4s ease-out infinite !important; } #alert.pg-alert a { display:inline-flex !important; align-items:center !important; justify-content:center !important; min-height:0 !important; margin:0 !important; padding:3px 0 !important; color:var(--brand-primary-dark) !important; font-family:var(--font-heading) !important; font-size:clamp(0.92rem, 0.35vw + 0.85rem, 1rem) !important; font-weight:700 !important; line-height:1.25 !important; letter-spacing:0 !important; text-align:center !important; text-decoration:none !important; } #alert.pg-alert a::after { content:"\2192" !important; margin-left:8px !important; color:var(--brand-secondary) !important; font-family:var(--font-body) !important; transform:translateY(-1px) !important; transition:transform 180ms var(--ease-out) !important; } #alert.pg-alert a:hover, #alert.pg-alert a:focus-visible { color:var(--brand-secondary-dark) !important; text-decoration:underline !important; text-decoration-thickness:2px !important; text-underline-offset:4px !important; } #alert.pg-alert a:hover::after, #alert.pg-alert a:focus-visible::after { transform:translate(3px, -1px) !important; } @keyframes pgAlertPulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--alert-dot-color, var(--green-500)) 42%, transparent); } 70% { box-shadow:0 0 0 8px color-mix(in srgb, var(--alert-dot-color, var(--green-500)) 0%, transparent); } 100% { box-shadow:0 0 0 0 color-mix(in srgb, var(--alert-dot-color, var(--green-500)) 0%, transparent); } } @media (prefers-reduced-motion:reduce) { #alert.pg-alert::before { animation:none !important; } } @media (max-width:640px) { #alert.pg-alert { justify-content:flex-start !important; padding:9px 12px !important; } #alert.pg-alert a { justify-content:flex-start !important; text-align:left !important; } } /* -- 34b. Homepage carousel banner: image-first, slim caption rail ---------- Matches the common live markup: .pg-banner > .pg-banner__viewport > .pg-banner__track > .pg-banner__slide > .pg-banner__link > img + caption The caption is intentionally a thin rail so it does not cover the photo. -------------------------------------------------------------------------- */ .pg-banner, .pg-banner *, .pg-banner *::before, .pg-banner *::after { box-sizing:border-box !important; } .pg-banner { --pg-banner-radius:var(--banner-radius, 16px); --pg-banner-edge:clamp(14px, 2.4vw, 28px); --pg-banner-control:46px; --pg-banner-accent:var(--banner-control-bg, var(--brand-primary-light)); --pg-banner-active:var(--banner-dot-bg, var(--brand-primary)); --pg-banner-ink:var(--banner-control-color, var(--brand-primary-dark)); position:relative !important; width:100% !important; height:auto !important; min-height:var(--banner-min-height, 260px) !important; max-height:var(--banner-max-height, 410px) !important; aspect-ratio:var(--banner-aspect-ratio, 16 / 7.6) !important; margin:0 !important; padding:0 !important; overflow:hidden !important; isolation:isolate !important; border-radius:var(--pg-banner-radius) !important; background:#000 !important; box-shadow:0 16px 38px rgb(0 22 19 / 0.14) !important; } .pg-banner::before, .pg-banner::after, .pg-banner__viewport::before, .pg-banner__viewport::after, .pg-banner__track::before, .pg-banner__track::after, .pg-banner__slide::before, .pg-banner__slide::after, .pg-banner__link::before { content:none !important; display:none !important; } .pg-banner__viewport, .pg-banner__track, .pg-banner__slide, .pg-banner__link { height:100% !important; min-height:100% !important; } .pg-banner__viewport { position:relative !important; width:100% !important; overflow:hidden !important; } .pg-banner__track { display:flex !important; flex-wrap:nowrap !important; gap:0 !important; width:100% !important; margin:0 !important; padding:0 !important; border:0 !important; list-style:none !important; transition:transform 500ms cubic-bezier(.22,.61,.36,1) !important; will-change:transform !important; } .pg-banner__slide { flex:0 0 100% !important; width:100% !important; min-width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; border:0 !important; list-style:none !important; background:#000 !important; } .pg-banner__slide[hidden] { display:block !important; } .pg-banner__link { position:relative !important; display:block !important; width:100% !important; overflow:hidden !important; color:#fff !important; text-decoration:none !important; } .pg-banner__link::after { content:"" !important; position:absolute !important; inset:0 !important; z-index:1 !important; display:block !important; pointer-events:none !important; background:var(--banner-overlay, linear-gradient(180deg, transparent 42%, rgb(0 0 0 / 0.36) 100%)) !important; } .pg-banner__img { position:absolute !important; inset:0 !important; z-index:0 !important; display:block !important; width:100% !important; height:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; border:0 !important; object-fit:cover !important; object-position:var(--banner-image-position, center center) !important; filter:var(--banner-image-filter, brightness(1.06) contrast(1.03) saturate(1.02)) !important; } .pg-banner__caption, .pg-banner__caption.pg-pos-bottom, .pg-banner__caption:not(.pg-pos-top) { position:absolute !important; z-index:2 !important; top:auto !important; right:auto !important; bottom:calc(var(--pg-banner-edge) + var(--pg-banner-control) + 12px) !important; left:clamp(18px, 3vw, 34px) !important; display:block !important; width:min(var(--banner-caption-rail-width, 760px), calc(100% - 68px)) !important; max-width:min(var(--banner-caption-rail-width, 760px), calc(100% - 68px)) !important; min-height:0 !important; margin:0 !important; padding:8px 16px !important; border:0 !important; border-left:4px solid var(--pg-banner-accent) !important; border-radius:8px !important; background:var(--banner-caption-rail-bg, rgb(0 0 0 / 0.58)) !important; box-shadow:0 8px 18px rgb(0 22 19 / 0.14) !important; color:#fff !important; text-align:left !important; text-shadow:none !important; transform:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } .pg-banner__caption.pg-pos-top { top:var(--pg-banner-edge) !important; bottom:auto !important; } .pg-banner__caption.pg-pos-center { left:clamp(18px, 3vw, 34px) !important; right:auto !important; transform:none !important; text-align:left !important; } .pg-banner__caption::before, .pg-banner__caption::after { content:none !important; display:none !important; } .pg-banner__caption-text { display:block !important; max-width:none !important; color:#fff !important; font-family:var(--font-heading) !important; font-size:var(--banner-caption-rail-size, clamp(0.95rem, 1.15vw, 1.12rem)) !important; font-weight:800 !important; line-height:1.2 !important; letter-spacing:0 !important; text-shadow:none !important; } .pg-banner__arrow, .pg-banner__toggle, .pg-banner__dot { all:unset !important; appearance:none !important; -webkit-appearance:none !important; box-sizing:border-box !important; display:flex !important; align-items:center !important; justify-content:center !important; margin:0 !important; padding:0 !important; border:0 !important; background-image:none !important; color:var(--pg-banner-ink) !important; cursor:pointer !important; font-size:0 !important; line-height:0 !important; text-indent:0 !important; text-shadow:none !important; transform:none !important; } .pg-banner__arrow::before, .pg-banner__arrow::after, .pg-banner__toggle::before, .pg-banner__toggle::after, .pg-banner__dot::after { content:none !important; display:none !important; } .pg-banner__arrow i, .pg-banner__toggle i, .pg-banner__dot i, .pg-banner__arrow [class*="fa-"], .pg-banner__toggle [class*="fa-"], .pg-banner__dot [class*="fa-"], .pg-banner__arrow [class*="dashicon"], .pg-banner__toggle [class*="dashicon"], .pg-banner__dot [class*="dashicon"] { display:none !important; } .pg-banner__arrow { position:absolute !important; bottom:var(--pg-banner-edge) !important; z-index:4 !important; width:var(--pg-banner-control) !important; height:var(--pg-banner-control) !important; min-width:var(--pg-banner-control) !important; min-height:var(--pg-banner-control) !important; border-radius:10px !important; background:var(--pg-banner-accent) !important; box-shadow:0 8px 20px rgb(0 0 0 / 0.26) !important; } .pg-banner__arrow--prev { left:var(--pg-banner-edge) !important; } .pg-banner__arrow--next { left:calc(var(--pg-banner-edge) + var(--pg-banner-control) + 8px) !important; right:auto !important; } .pg-banner__arrow svg { display:block !important; width:23px !important; height:23px !important; fill:none !important; color:currentColor !important; pointer-events:none !important; } .pg-banner__arrow svg path { stroke:currentColor !important; stroke-width:3 !important; } .pg-banner__controls { position:absolute !important; right:var(--pg-banner-edge) !important; bottom:var(--pg-banner-edge) !important; z-index:4 !important; display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:8px !important; max-width:calc(100% - (var(--pg-banner-edge) * 2) - 108px) !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } .pg-banner__toggle { width:44px !important; height:44px !important; min-width:44px !important; min-height:44px !important; border-radius:10px !important; background:var(--pg-banner-accent) !important; box-shadow:0 8px 20px rgb(0 0 0 / 0.26) !important; } .pg-banner__toggle svg { display:block !important; width:18px !important; height:18px !important; margin:0 !important; fill:currentColor !important; color:currentColor !important; pointer-events:none !important; } .pg-banner__toggle .pg-banner__icon-pause { display:block !important; } .pg-banner__toggle .pg-banner__icon-play { display:none !important; } .pg-banner__toggle[data-state="paused"] .pg-banner__icon-pause { display:none !important; } .pg-banner__toggle[data-state="paused"] .pg-banner__icon-play { display:block !important; } .pg-banner__dots { display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:8px !important; width:auto !important; max-width:min(260px, 36vw) !important; overflow-x:auto !important; scrollbar-width:none !important; } .pg-banner__dots::-webkit-scrollbar { display:none !important; } .pg-banner__dot { width:44px !important; height:44px !important; min-width:44px !important; min-height:44px !important; border-radius:10px !important; background:var(--pg-banner-active) !important; box-shadow:0 8px 20px rgb(0 0 0 / 0.26) !important; } .pg-banner__dot::before { content:"" !important; display:block !important; width:8px !important; height:8px !important; border-radius:999px !important; background:rgb(255 255 255 / 0.82) !important; } .pg-banner__dot[aria-current="true"] { background:var(--pg-banner-accent) !important; } .pg-banner__dot[aria-current="true"]::before { width:10px !important; height:10px !important; background:#fff !important; } .pg-banner__arrow:hover, .pg-banner__arrow:focus-visible, .pg-banner__toggle:hover, .pg-banner__toggle:focus-visible, .pg-banner__dot:hover, .pg-banner__dot:focus-visible { background:var(--banner-control-hover-bg, var(--brand-primary-light)) !important; } .pg-banner__arrow:focus-visible, .pg-banner__dot:focus-visible, .pg-banner__toggle:focus-visible, .pg-banner__link:focus-visible { outline:3px solid #fff !important; outline-offset:3px !important; } @media (max-width:900px) { .pg-banner { aspect-ratio:var(--banner-tablet-aspect-ratio, 16 / 9) !important; min-height:var(--banner-tablet-min-height, 260px) !important; max-height:var(--banner-tablet-max-height, 380px) !important; } } @media (max-width:640px) { .pg-banner { --pg-banner-radius:var(--banner-mobile-radius, 14px); --pg-banner-edge:14px; --pg-banner-control:44px; aspect-ratio:var(--banner-mobile-aspect-ratio, 4 / 3) !important; min-height:var(--banner-mobile-min-height, 300px) !important; max-height:var(--banner-mobile-max-height, 420px) !important; } .pg-banner__caption, .pg-banner__caption.pg-pos-bottom, .pg-banner__caption:not(.pg-pos-top) { right:12px !important; bottom:62px !important; left:12px !important; width:auto !important; max-width:none !important; padding:7px 12px !important; } .pg-banner__caption.pg-pos-top { top:18px !important; bottom:auto !important; } .pg-banner__caption-text { font-size:var(--banner-caption-mobile-size, clamp(0.88rem, 3.5vw, 1rem)) !important; } .pg-banner__arrow--next { left:66px !important; } .pg-banner__controls { max-width:calc(100% - 124px) !important; gap:6px !important; } } @media (max-width:360px) { .pg-banner { --pg-banner-edge:12px; --pg-banner-control:38px; } .pg-banner__arrow--next { left:54px !important; } .pg-banner__controls { max-width:calc(100% - 100px) !important; gap:4px !important; } .pg-banner__dots { gap:4px !important; } .pg-banner__toggle, .pg-banner__dot { width:38px !important; min-width:38px !important; height:38px !important; min-height:38px !important; } } @media (prefers-reduced-motion:reduce) { .pg-banner__track, .pg-banner__img { transition:none !important; } } /* -- 34c. Plan-a-Gift popup final fix --------------------------------------- The Plan-a-Gift tool uses #blanket + #vg_planagift_v2, not #blankets/#popped. Keeps the overlay above fixed site headers, constrains modal height, and keeps footer actions visible while long question steps scroll. -------------------------------------------------------------------------- */ body:has(#vg_planagift_v2[style*="display:block"]), body:has(#vg_planagift_v2[style*="display: block"]) { overflow:hidden !important; } body #blanket, html body #blanket[style*="display:block"], html body #blanket[style*="display: block"] { position:fixed !important; inset:0 !important; width:100vw !important; height:100dvh !important; min-height:100vh !important; margin:0 !important; padding:0 !important; background:rgba(15,23,42,0.72) !important; backdrop-filter:blur(3px) saturate(115%) !important; -webkit-backdrop-filter:blur(3px) saturate(115%) !important; z-index:100000 !important; } body #vg_planagift_v2, html body #vg_planagift_v2[style*="display:block"], html body #vg_planagift_v2[style*="display: block"] { position:fixed !important; top:50% !important; right:auto !important; bottom:auto !important; left:50% !important; flex-direction:column !important; width:min(760px, calc(100vw - 32px)) !important; max-width:760px !important; height:auto !important; max-height:calc(100dvh - 48px) !important; min-height:0 !important; margin:0 !important; padding:0 !important; overflow:hidden !important; background:#fff !important; border:1px solid rgba(15,23,42,0.16) !important; border-radius:14px !important; box-shadow:0 28px 80px rgba(0,0,0,0.38) !important; color:var(--text-primary) !important; transform:translate(-50%, -50%) !important; z-index:100001 !important; } /* Respect the vendor script's inline open/closed state. The modal's base layout must not force display:flex, or display:none set by the close control is overridden and the dialog can never disappear. */ html body #vg_planagift_v2[style*="display:block"], html body #vg_planagift_v2[style*="display: block"] { display:flex !important; } html body #vg_planagift_v2[style*="display:none"], html body #vg_planagift_v2[style*="display: none"] { display:none !important; } body #vg_planagift_v2 *, body #vg_planagift_v2 *::before, body #vg_planagift_v2 *::after { box-sizing:border-box !important; } body #vg_planagift_v2 #vgpag_close { position:absolute !important; top:14px !important; right:14px !important; left:auto !important; z-index:3 !important; display:block !important; width:34px !important; height:34px !important; max-width:34px !important; max-height:34px !important; padding:7px !important; background:#fff !important; border:1px solid rgba(15,23,42,0.22) !important; border-radius:999px !important; box-shadow:0 8px 20px rgba(15,23,42,0.22) !important; cursor:pointer !important; object-fit:contain !important; opacity:1 !important; } body #vg_planagift_v2 #vgpag { display:flex !important; flex:1 1 auto !important; flex-direction:column !important; width:100% !important; min-height:0 !important; max-height:calc(100dvh - 48px) !important; margin:0 !important; padding:0 !important; overflow:hidden !important; } body #vg_planagift_v2 fieldset { flex:1 1 auto !important; min-height:0 !important; width:100% !important; max-width:none !important; margin:0 !important; padding:34px 32px 24px !important; overflow:auto !important; border:0 !important; } body #vg_planagift_v2 legend { margin:0 0 20px !important; padding:0 44px 14px 0 !important; border-bottom:3px solid var(--brand-primary) !important; } body #vg_planagift_v2 legend strong { display:block !important; margin:0 !important; color:var(--text-primary) !important; font-family:var(--font-heading) !important; font-size:clamp(1.65rem, 2.4vw, 2.35rem) !important; font-weight:var(--heading-weight) !important; line-height:1.15 !important; } body #vg_planagift_v2 legend em { display:block !important; margin:8px 0 0 !important; color:var(--text-secondary) !important; font-style:normal !important; line-height:1.45 !important; } body #vg_planagift_v2 fieldset > input[type="radio"] { position:absolute !important; opacity:0 !important; pointer-events:none !important; } body #vg_planagift_v2 fieldset > input[type="radio"] + label { position:relative !important; display:flex !important; align-items:center !important; gap:14px !important; width:100% !important; min-height:58px !important; margin:0 0 12px !important; padding:16px 18px 16px 52px !important; background:#f8fafc !important; border:1px solid #d5dee8 !important; border-radius:10px !important; color:var(--text-primary) !important; cursor:pointer !important; font-size:var(--text-base) !important; line-height:1.35 !important; } body #vg_planagift_v2 fieldset > input[type="radio"] + label::before { content:"" !important; position:absolute !important; left:20px !important; top:50% !important; width:20px !important; height:20px !important; border:2px solid #748393 !important; border-radius:999px !important; background:#fff !important; transform:translateY(-50%) !important; } body #vg_planagift_v2 fieldset > input[type="radio"]:checked + label { border-color:var(--brand-primary) !important; background:color-mix(in srgb, var(--brand-primary-light) 45%, #fff) !important; } body #vg_planagift_v2 fieldset > input[type="radio"]:checked + label::before { border-color:var(--brand-primary) !important; box-shadow:inset 0 0 0 5px #fff !important; background:var(--brand-primary) !important; } body #vg_planagift_v2 p { margin:16px 0 0 !important; color:var(--text-primary) !important; line-height:1.55 !important; } body #vg_planagift_v2 .vgpag_footer { position:relative !important; z-index:2 !important; display:grid !important; grid-template-columns:minmax(0, 1fr) auto auto !important; align-items:center !important; gap:14px !important; flex:0 0 auto !important; width:100% !important; min-height:86px !important; margin:0 !important; padding:18px 32px !important; border-top:1px solid #dbe4ec !important; background:#f8fafc !important; box-shadow:0 -12px 28px rgba(15,23,42,0.06) !important; } body #vg_planagift_v2 #vgpag_err { display:block !important; min-height:0 !important; margin:0 !important; color:#b42318 !important; font-weight:700 !important; line-height:1.35 !important; } body #vg_planagift_v2 #vgpag_err:not(:empty) { padding:10px 12px !important; border-left:4px solid #f04438 !important; border-radius:8px !important; background:#fff1f0 !important; } body #vg_planagift_v2 #vgpagback, body #vg_planagift_v2 #vgpagnext { display:inline-flex !important; align-items:center !important; justify-content:center !important; min-width:120px !important; min-height:50px !important; margin:0 !important; padding:14px 24px !important; border:1px solid var(--brand-primary) !important; border-radius:8px !important; background:var(--brand-primary) !important; color:var(--on-primary) !important; cursor:pointer !important; font-family:var(--font-button) !important; font-size:var(--text-base) !important; font-weight:800 !important; line-height:1 !important; text-align:center !important; } body #vg_planagift_v2 #vgpagback[style*="display:none"], body #vg_planagift_v2 #vgpagback[style*="display: none"] { display:none !important; } body #vg_planagift_v2 #vgpagback { background:#fff !important; color:var(--brand-primary) !important; } body #vg_planagift_v2 #vgpagback:hover, body #vg_planagift_v2 #vgpagback:focus-visible, body #vg_planagift_v2 #vgpagnext:hover, body #vg_planagift_v2 #vgpagnext:focus-visible { box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-primary-light) 80%, transparent) !important; outline:0 !important; } @media (max-width:720px) { body #vg_planagift_v2, html body #vg_planagift_v2[style*="display:block"], html body #vg_planagift_v2[style*="display: block"] { width:calc(100vw - 20px) !important; max-height:calc(100dvh - 20px) !important; border-radius:12px !important; } body #vg_planagift_v2 #vgpag { max-height:calc(100dvh - 20px) !important; } body #vg_planagift_v2 fieldset { padding:26px 18px 18px !important; } body #vg_planagift_v2 legend { padding-right:38px !important; } body #vg_planagift_v2 .vgpag_footer { grid-template-columns:1fr !important; gap:10px !important; padding:14px 18px !important; } body #vg_planagift_v2 #vgpagback, body #vg_planagift_v2 #vgpagnext { width:100% !important; } } /* -- 34d. Gift diagram / video popup final fix ------------------------------ The gift diagram/video lightbox uses #blankets + #popped. This version centers the popup, fixes z-index/overlay conflicts, keeps media responsive, and restores a reliable close button. -------------------------------------------------------------------------- */ body.overlay-open, body:has(#blankets[style*="display: block"]), body:has(#blankets[style*="display:block"]) { overflow:hidden !important; } body #vgbody #blankets, body #blankets { position:fixed !important; box-sizing:border-box !important; inset:0 !important; width:100vw !important; height:100dvh !important; min-height:100vh !important; margin:0 !important; padding:0 !important; background:rgba(8,13,22,0.68) !important; backdrop-filter:blur(8px) saturate(120%) !important; -webkit-backdrop-filter:blur(8px) saturate(120%) !important; z-index:100000 !important; } body #vgbody #blankets[style*="display: block"], body #vgbody #blankets[style*="display:block"], body #blankets[style*="display: block"], body #blankets[style*="display:block"] { display:block !important; } body #vgbody #popped, body #blankets #popped, body #popped { position:fixed !important; box-sizing:border-box !important; top:50% !important; right:auto !important; bottom:auto !important; left:50% !important; width:min(920px, calc(100vw - 40px)) !important; max-width:920px !important; height:auto !important; max-height:calc(100dvh - 40px) !important; margin:0 !important; margin-left:0 !important; padding:clamp(10px, 1.8vw, 18px) !important; overflow:visible !important; background:#fff !important; border:1px solid rgba(15,23,42,0.12) !important; border-radius:8px !important; box-shadow:0 26px 80px rgba(0,0,0,0.34) !important; opacity:1 !important; transform:translate(-50%, -50%) !important; z-index:100001 !important; } body #vgbody #popped[style*="display: block"], body #vgbody #popped[style*="display:block"], body #popped[style*="display: block"], body #popped[style*="display:block"] { display:block !important; } body #vgbody #popped #popped_close, body #popped #popped_close { position:static !important; display:block !important; width:0 !important; height:0 !important; padding:0 !important; margin:0 !important; background:none !important; } body #vgbody #close_popped, body #popped #close_popped, body #close_popped { display:block !important; position:absolute !important; top:-16px !important; right:-16px !important; left:auto !important; width:42px !important; height:42px !important; max-width:none !important; max-height:none !important; padding:8px !important; background:#fff !important; border:1px solid rgba(15,23,42,0.22) !important; border-radius:999px !important; box-shadow:0 12px 28px rgba(15,23,42,0.28) !important; cursor:pointer !important; object-fit:contain !important; opacity:1 !important; visibility:visible !important; z-index:100002 !important; } body #vgbody #close_popped:hover, body #vgbody #close_popped:focus-visible, body #popped #close_popped:hover, body #popped #close_popped:focus-visible, body #close_popped:hover, body #close_popped:focus-visible { outline:0 !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-primary-light) 80%, transparent), 0 12px 28px rgba(15,23,42,0.28) !important; } body #vgbody #popped iframe, body #vgbody #popped video, body #popped iframe, body #popped video { display:block !important; width:100% !important; max-width:100% !important; aspect-ratio:16 / 9 !important; height:auto !important; max-height:calc(100dvh - 84px) !important; min-height:0 !important; margin:0 !important; background:#000 !important; border:0 !important; border-radius:6px !important; } @media (max-width:760px) { body #vgbody #popped, body #blankets #popped, body #popped { width:min(640px, calc(100vw - 24px)) !important; max-height:calc(100dvh - 24px) !important; padding:8px !important; } body #vgbody #close_popped, body #popped #close_popped, body #close_popped { top:-12px !important; right:-8px !important; width:38px !important; height:38px !important; padding:7px !important; } } /* -- 34e. Plan-a-Gift contrast + planned-giving legal footer ---------------- These selectors target the shared vendor markup used across clients. Keep all palette and font choices token-driven; do not add client colors here. -------------------------------------------------------------------------- */ .pg-content-wrapper .pg-has-pag, #vgbody .pg-has-pag { padding-block:clamp(2.5rem, 5vw, 4rem) !important; } .pg-content-wrapper .pg-has-pag > .pg-container, #vgbody .pg-has-pag > .pg-container { width:min(100%, var(--container-max)) !important; margin-inline:auto !important; padding-inline:clamp(1.25rem, 4vw, 3rem) !important; } .pg-content-wrapper .pg-has-pag .pg-section-title, .pg-content-wrapper .pg-has-pag .pg-section-title.pg-text-align-center, #vgbody .pg-has-pag .pg-section-title { max-width:none !important; margin:0 0 clamp(1.25rem, 3vw, 2rem) !important; color:var(--on-primary) !important; font-family:var(--font-heading) !important; font-size:clamp(1.75rem, 3vw, 2.5rem) !important; font-weight:var(--heading-weight) !important; line-height:1.15 !important; text-align:left !important; } .pg-content-wrapper .pg-has-pag .pg-has-line-beside::before, .pg-content-wrapper .pg-has-pag .pg-has-line-beside::after, #vgbody .pg-has-pag .pg-has-line-beside::before, #vgbody .pg-has-pag .pg-has-line-beside::after { content:none !important; display:none !important; background:none !important; } .pg-content-wrapper .pg-has-pag .pg-has-line-beside, #vgbody .pg-has-pag .pg-has-line-beside { display:block !important; } .pg-content-wrapper .pg-has-pag .pg-section-title span, #vgbody .pg-has-pag .pg-section-title span { padding:0 var(--space-5) 0 0 !important; background:transparent !important; color:inherit !important; } .pg-content-wrapper .pg-has-pag .pg-lede, .pg-content-wrapper .pg-has-pag p, #vgbody .pg-has-pag .pg-lede, #vgbody .pg-has-pag p { max-width:68ch !important; color:var(--on-primary) !important; font-size:clamp(1rem, 1.4vw, 1.1875rem) !important; line-height:1.65 !important; } .pg-content-wrapper .pg-has-pag a, #vgbody .pg-has-pag a { color:var(--on-secondary) !important; } /* Vendor legal/copyright strip. It sits outside #vgbody on many templates, so it needs its own centered inner measure and viewport-safe side gutters. */ #vgfooter.pg-copyright, .pg-content-wrapper + #vgfooter.pg-copyright, body > #vgfooter.pg-copyright { width:100% !important; margin:0 !important; padding:clamp(1.25rem, 3vw, 2rem) max(clamp(1rem, 4vw, 3rem), env(safe-area-inset-right)) clamp(1.25rem, 3vw, 2rem) max(clamp(1rem, 4vw, 3rem), env(safe-area-inset-left)) !important; background:var(--bg-primary) !important; border-top:0 !important; color:var(--text-secondary) !important; font-family:var(--font-body) !important; text-align:left !important; } #vgfooter .pg-notice, #vgfooter .pg-links { width:min(100%, var(--container-max)) !important; max-width:var(--container-max) !important; margin-inline:auto !important; color:var(--text-secondary) !important; font-family:var(--font-body) !important; font-size:clamp(0.875rem, 1vw, 1rem) !important; line-height:1.55 !important; } #vgfooter .pg-notice { margin-block:0 var(--space-3) !important; } #vgfooter .pg-notice span { display:inline !important; color:inherit !important; } #vgfooter .pg-notice span + span::before { content:" " !important; } #vgfooter .pg-links { display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:0.4rem 0.75rem !important; margin-block:0 !important; } #vgfooter .pg-links > a, #vgfooter .pg-copyright-info, #vgfooter .pg-copyright-info > a { color:var(--brand-primary) !important; font-size:inherit !important; line-height:inherit !important; text-underline-offset:3px !important; } #vgfooter .pg-copyright-info { display:inline-flex !important; flex-wrap:wrap !important; gap:0.4rem !important; } /* Shared contact/pre-footer sections should align with the same page gutter. */ .pg-pre-footer .pg-section > .pg-container, .pg-has-contact > .pg-container { padding-inline:clamp(1.25rem, 4vw, 3rem) !important; } @media (max-width:640px) { .pg-content-wrapper .pg-has-pag, #vgbody .pg-has-pag { margin-block:var(--space-6) !important; padding-block:var(--space-10) !important; border-radius:0 !important; } .pg-content-wrapper .pg-has-pag .pg-section-title, #vgbody .pg-has-pag .pg-section-title { font-size:clamp(1.6rem, 8vw, 2rem) !important; } .pg-content-wrapper .pg-has-pag .pg-has-line-beside::before, .pg-content-wrapper .pg-has-pag .pg-has-line-beside::after, #vgbody .pg-has-pag .pg-has-line-beside::before, #vgbody .pg-has-pag .pg-has-line-beside::after { display:none !important; } .pg-content-wrapper .pg-has-pag .pg-section-title span, #vgbody .pg-has-pag .pg-section-title span { padding:0 !important; } #vgfooter .pg-links { align-items:flex-start !important; flex-direction:column !important; } } /* -- 34f. Plan-a-Gift wizard option normalization -------------------------- The vendor emits two option structures: input + label span > br + input + label Style both structures identically so every choice has the same hit area, alignment, and visual hierarchy across all client sites. -------------------------------------------------------------------------- */ body #vg_planagift_v2 { width:min(760px, calc(100vw - 32px)) !important; max-width:760px !important; max-height:min(760px, calc(100dvh - 32px)) !important; border-radius:14px !important; } body #vg_planagift_v2 #vgpag { max-height:min(760px, calc(100dvh - 32px)) !important; } body #vg_planagift_v2 fieldset { padding:clamp(1.5rem, 4vw, 2rem) !important; scrollbar-gutter:stable !important; } body #vg_planagift_v2 legend { width:100% !important; margin:0 0 var(--space-5) !important; padding:0 3rem var(--space-4) 0 !important; border-bottom:2px solid var(--brand-primary) !important; } body #vg_planagift_v2 legend strong { font-size:clamp(1.5rem, 3vw, 2rem) !important; line-height:1.15 !important; } body #vg_planagift_v2 legend em { margin-top:var(--space-2) !important; font-size:clamp(1rem, 1.8vw, 1.125rem) !important; line-height:1.45 !important; } body #vg_planagift_v2 fieldset > span[class^="pag_q1_"], body #vg_planagift_v2 fieldset > span[class*=" pag_q1_"] { display:block !important; width:100% !important; height:auto !important; margin:0 !important; padding:0 !important; } body #vg_planagift_v2 fieldset > br, body #vg_planagift_v2 fieldset > span[class^="pag_q1_"] > br, body #vg_planagift_v2 fieldset > span[class*=" pag_q1_"] > br { display:none !important; } body #vg_planagift_v2 fieldset > span[class^="pag_q1_"] > input[type="radio"], body #vg_planagift_v2 fieldset > span[class*=" pag_q1_"] > input[type="radio"] { position:absolute !important; opacity:0 !important; pointer-events:none !important; } body #vg_planagift_v2 fieldset > input[type="radio"] + label, body #vg_planagift_v2 fieldset > span[class^="pag_q1_"] > input[type="radio"] + label, body #vg_planagift_v2 fieldset > span[class*=" pag_q1_"] > input[type="radio"] + label { position:relative !important; display:flex !important; align-items:center !important; width:100% !important; min-height:56px !important; margin:0 0 var(--space-3) !important; padding:0.875rem 1rem 0.875rem 3.25rem !important; background:var(--bg-subtle) !important; border:1px solid var(--border-default) !important; border-radius:10px !important; color:var(--text-primary) !important; cursor:pointer !important; font-family:var(--font-body) !important; font-size:var(--text-base) !important; line-height:1.4 !important; transition:background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important; } body #vg_planagift_v2 fieldset > input[type="radio"] + label::before, body #vg_planagift_v2 fieldset > span[class^="pag_q1_"] > input[type="radio"] + label::before, body #vg_planagift_v2 fieldset > span[class*=" pag_q1_"] > input[type="radio"] + label::before { content:"" !important; position:absolute !important; top:50% !important; left:1.25rem !important; width:20px !important; height:20px !important; background:#fff !important; border:2px solid var(--border-strong) !important; border-radius:50% !important; transform:translateY(-50%) !important; } body #vg_planagift_v2 fieldset > input[type="radio"]:checked + label, body #vg_planagift_v2 fieldset > span[class^="pag_q1_"] > input[type="radio"]:checked + label, body #vg_planagift_v2 fieldset > span[class*=" pag_q1_"] > input[type="radio"]:checked + label { background:color-mix(in srgb, var(--brand-primary-light) 45%, #fff) !important; border-color:var(--brand-primary) !important; box-shadow:0 0 0 2px color-mix(in srgb, var(--brand-primary) 18%, transparent) !important; } body #vg_planagift_v2 fieldset > input[type="radio"]:checked + label::before, body #vg_planagift_v2 fieldset > span[class^="pag_q1_"] > input[type="radio"]:checked + label::before, body #vg_planagift_v2 fieldset > span[class*=" pag_q1_"] > input[type="radio"]:checked + label::before { background:var(--brand-primary) !important; border-color:var(--brand-primary) !important; box-shadow:inset 0 0 0 5px #fff !important; } body #vg_planagift_v2 fieldset > input[type="radio"]:focus-visible + label, body #vg_planagift_v2 fieldset > span[class^="pag_q1_"] > input[type="radio"]:focus-visible + label, body #vg_planagift_v2 fieldset > span[class*=" pag_q1_"] > input[type="radio"]:focus-visible + label { outline:3px solid color-mix(in srgb, var(--brand-primary) 35%, transparent) !important; outline-offset:2px !important; } body #vg_planagift_v2 .vgpag_footer { grid-template-columns:minmax(0, 1fr) auto auto !important; min-height:82px !important; padding:var(--space-4) clamp(1.5rem, 4vw, 2rem) !important; } body #vg_planagift_v2 #vgpagback, body #vg_planagift_v2 #vgpagnext { min-width:120px !important; min-height:48px !important; padding:0.75rem 1.5rem !important; } @media (max-width:640px) { body #vg_planagift_v2 { width:calc(100vw - 16px) !important; max-height:calc(100dvh - 16px) !important; border-radius:10px !important; } body #vg_planagift_v2 #vgpag { max-height:calc(100dvh - 16px) !important; } body #vg_planagift_v2 fieldset { padding:1.25rem 1rem !important; } body #vg_planagift_v2 legend { padding-right:2.5rem !important; } body #vg_planagift_v2 .vgpag_footer { grid-template-columns:1fr 1fr !important; gap:var(--space-3) !important; padding:var(--space-3) 1rem !important; } body #vg_planagift_v2 #vgpag_err { grid-column:1 / -1 !important; } body #vg_planagift_v2 #vgpagback, body #vg_planagift_v2 #vgpagnext { width:100% !important; min-width:0 !important; } } /* -- 34g. Token-driven button normalization -------------------------------- } /* -- 34i. Plan-a-Gift compact-height scrolling ----------------------------- Follow-up questions are fieldsets nested inside the active top-level fieldset. Only the top-level step should be the scrolling flex child; making every nested fieldset flex:1 creates a second clipped scroll area and pushes the action footer below the viewport on shorter screens. -------------------------------------------------------------------------- */ body #vg_planagift_v2 #vgpag > fieldset { flex:1 1 auto !important; min-height:0 !important; max-height:100% !important; overflow-x:hidden !important; overflow-y:auto !important; overscroll-behavior:contain !important; -webkit-overflow-scrolling:touch !important; scrollbar-gutter:stable !important; } body #vg_planagift_v2 #vgpag > fieldset > fieldset, body #vg_planagift_v2 #vgpag .sub_fieldset { flex:none !important; width:100% !important; height:auto !important; min-height:0 !important; max-height:none !important; margin:var(--space-5) 0 0 !important; padding:var(--space-4) clamp(0px, 1vw, var(--space-4)) 0 !important; overflow:visible !important; } body #vg_planagift_v2 #vgpag > fieldset > .vgpag_footer { position:sticky !important; right:auto !important; bottom:0 !important; left:auto !important; margin:var(--space-5) calc(0px - clamp(1.5rem, 4vw, 2rem)) 0 !important; } @media (max-width:640px) { body #vg_planagift_v2 #vgpag > fieldset > .vgpag_footer { bottom:0 !important; margin:var(--space-4) -1rem 0 !important; } } /* -- 34g. Token-driven button normalization -------------------------------- All reusable CTA variants read from the section 33 button tokens. This keeps component behavior shared while allowing a new client to replace its entire button language in the single client configuration block. -------------------------------------------------------------------------- */ .pg-button, .pg-button-item, .pg-has-pag a, .society-cta-button, .planning-card .pg-button, .pg-gift-plans .pg-page-card .pg-button, .pg-page-card-outer.pg-page-card-cols .pg-page-card .pg-button, body #vg_planagift_v2 #vgpagback, body #vg_planagift_v2 #vgpagnext { display:inline-flex !important; align-items:center !important; justify-content:center !important; min-height:var(--button-min-height) !important; padding:var(--button-padding-block) var(--button-padding-inline) !important; background:var(--button-bg) !important; border:1px solid var(--button-border) !important; border-radius:var(--button-radius) !important; box-shadow:none !important; color:var(--button-text) !important; font-family:var(--font-button) !important; font-size:var(--button-font-size) !important; font-weight:var(--button-weight) !important; line-height:1 !important; letter-spacing:var(--button-tracking) !important; text-align:center !important; text-decoration:none !important; text-transform:var(--button-transform) !important; cursor:pointer !important; transition:background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important; } .pg-button:hover, .pg-button:focus-visible, .pg-button-item:hover, .pg-button-item:focus-visible, .pg-has-pag a:hover, .pg-has-pag a:focus-visible, .society-cta-button:hover, .society-cta-button:focus-visible, .planning-card:hover .pg-button, .planning-card:focus-within .pg-button, .pg-gift-plans .pg-page-card:hover .pg-button, .pg-gift-plans .pg-page-card:focus .pg-button, .pg-page-card-outer.pg-page-card-cols .pg-page-card:hover .pg-button, .pg-page-card-outer.pg-page-card-cols .pg-page-card:focus .pg-button, body #vg_planagift_v2 #vgpagback:hover, body #vg_planagift_v2 #vgpagback:focus-visible, body #vg_planagift_v2 #vgpagnext:hover, body #vg_planagift_v2 #vgpagnext:focus-visible { background:var(--button-bg-hover) !important; border-color:var(--button-border-hover) !important; color:var(--button-text-hover) !important; box-shadow:0 6px 16px rgba(15,23,42,0.16) !important; text-decoration:none !important; transform:translateY(-1px) !important; } .pg-button:focus-visible, .pg-button-item:focus-visible, .pg-has-pag a:focus-visible, .society-cta-button:focus-visible, body #vg_planagift_v2 #vgpagback:focus-visible, body #vg_planagift_v2 #vgpagnext:focus-visible { outline:3px solid color-mix(in srgb, var(--button-bg) 35%, transparent) !important; outline-offset:3px !important; } /* Outline buttons retain their outline treatment but use the same client font, shape, sizing, and hover colors. */ .pg-button-outline { background:transparent !important; border-color:var(--button-border) !important; color:var(--button-bg) !important; } .pg-button-outline:hover, .pg-button-outline:focus-visible { background:var(--button-bg) !important; border-color:var(--button-border) !important; color:var(--button-text) !important; } .pg-button-ghost { background:transparent !important; border-color:transparent !important; color:var(--text-secondary) !important; } .pg-button-ghost:hover, .pg-button-ghost:focus-visible { background:var(--bg-tertiary) !important; border-color:var(--border-default) !important; color:var(--text-primary) !important; box-shadow:none !important; transform:none !important; } .pg-button-sm { min-height:38px !important; padding:0.55rem 1rem !important; font-size:var(--text-xs) !important; } .pg-button-lg { min-height:52px !important; padding:0.9rem 1.75rem !important; font-size:var(--text-base) !important; } button, input[type="submit"], .pg-button { cursor:pointer; } button:disabled, input[type="submit"]:disabled, .pg-button:disabled { opacity:0.6; cursor:not-allowed; } @media (max-width:640px) { .pg-button, .pg-button-item, .pg-has-pag a, .society-cta-button { width:100% !important; max-width:100% !important; white-space:normal !important; } } /* -- 34h. Responsive legacy form system ------------------------------------ Vendor forms such as #frm_stocktransfer use tables for layout. These rules preserve the form controls and submission behavior while rendering the table as accessible, responsive rows. All visual choices come from section 33. -------------------------------------------------------------------------- */ #vgbody form[id^="frm_"], .pg-content-wrapper form[id^="frm_"] { width:100% !important; max-width:900px !important; margin:clamp(1.5rem, 4vw, 3rem) 0 !important; padding:clamp(1.25rem, 3vw, 2rem) !important; background:var(--form-bg) !important; border:1px solid var(--form-border) !important; border-radius:calc(var(--form-radius) + 2px) !important; box-shadow:0 12px 32px rgba(15,23,42,0.08) !important; color:var(--form-text) !important; font-family:var(--font-body) !important; } #vgbody form[id^="frm_"] > p:first-child, .pg-content-wrapper form[id^="frm_"] > p:first-child { margin:0 0 var(--space-6) !important; padding:var(--space-3) var(--space-4) !important; background:color-mix(in srgb, var(--brand-primary-light) 35%, #fff) !important; border-left:4px solid var(--brand-primary) !important; border-radius:var(--form-radius) !important; color:var(--form-text) !important; font-size:var(--text-sm) !important; line-height:1.5 !important; } #vgbody form[id^="frm_"] table, #vgbody form[id^="frm_"] tbody, .pg-content-wrapper form[id^="frm_"] table, .pg-content-wrapper form[id^="frm_"] tbody { display:block !important; width:100% !important; margin:0 !important; padding:0 !important; border:0 !important; border-spacing:0 !important; } #vgbody form[id^="frm_"] tr, .pg-content-wrapper form[id^="frm_"] tr { display:grid !important; grid-template-columns:minmax(180px, 250px) minmax(0, 1fr) !important; align-items:center !important; gap:var(--space-5) !important; width:100% !important; padding:calc(var(--form-row-gap) / 2) 0 !important; border:0 !important; } #vgbody form[id^="frm_"] td, .pg-content-wrapper form[id^="frm_"] td { display:block !important; width:auto !important; min-width:0 !important; margin:0 !important; padding:0 !important; background:transparent !important; border:0 !important; vertical-align:middle !important; } #vgbody form[id^="frm_"] td[colspan="2"], .pg-content-wrapper form[id^="frm_"] td[colspan="2"] { grid-column:1 / -1 !important; } #vgbody form[id^="frm_"] td[colspan="2"]:has(> fieldset), .pg-content-wrapper form[id^="frm_"] td[colspan="2"]:has(> fieldset) { margin-top:var(--form-section-gap) !important; } #vgbody form[id^="frm_"] tr:first-child td[colspan="2"], .pg-content-wrapper form[id^="frm_"] tr:first-child td[colspan="2"] { margin-top:0 !important; } #vgbody form[id^="frm_"] fieldset, .pg-content-wrapper form[id^="frm_"] fieldset { min-width:0 !important; margin:0 !important; padding:0 !important; background:transparent !important; border:0 !important; } #vgbody form[id^="frm_"] td[colspan="2"] > fieldset > legend, .pg-content-wrapper form[id^="frm_"] td[colspan="2"] > fieldset > legend { display:block !important; width:100% !important; margin:0 0 var(--space-4) !important; padding:var(--space-4) var(--space-5) !important; background:var(--form-section-bg) !important; border:0 !important; border-left:5px solid var(--brand-primary) !important; border-radius:var(--form-radius) !important; } #vgbody form[id^="frm_"] legend h2, .pg-content-wrapper form[id^="frm_"] legend h2 { margin:0 !important; color:var(--brand-primary) !important; font-family:var(--font-heading) !important; font-size:clamp(1.25rem, 2.3vw, 1.65rem) !important; font-weight:var(--heading-weight) !important; line-height:1.2 !important; } #vgbody form[id^="frm_"] label:not(.pg-visually-hidden), .pg-content-wrapper form[id^="frm_"] label:not(.pg-visually-hidden) { display:block !important; margin:0 !important; color:var(--form-text) !important; font-size:var(--text-base) !important; font-weight:600 !important; line-height:1.4 !important; } #vgbody form[id^="frm_"] input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]), #vgbody form[id^="frm_"] select, #vgbody form[id^="frm_"] textarea, .pg-content-wrapper form[id^="frm_"] input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]), .pg-content-wrapper form[id^="frm_"] select, .pg-content-wrapper form[id^="frm_"] textarea { display:block !important; width:100% !important; max-width:none !important; min-height:var(--form-control-height) !important; margin:0 !important; padding:var(--form-control-padding) !important; background:var(--form-bg) !important; border:1px solid var(--form-border) !important; border-radius:var(--form-radius) !important; box-shadow:0 1px 2px rgba(15,23,42,0.04) !important; color:var(--form-text) !important; font-family:var(--font-body) !important; font-size:16px !important; line-height:1.4 !important; transition:border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease !important; } #vgbody form[id^="frm_"] textarea, .pg-content-wrapper form[id^="frm_"] textarea { min-height:140px !important; resize:vertical !important; } #vgbody form[id^="frm_"] input::placeholder, #vgbody form[id^="frm_"] textarea::placeholder, .pg-content-wrapper form[id^="frm_"] input::placeholder, .pg-content-wrapper form[id^="frm_"] textarea::placeholder { color:var(--form-placeholder) !important; opacity:1 !important; } #vgbody form[id^="frm_"] input:focus, #vgbody form[id^="frm_"] select:focus, #vgbody form[id^="frm_"] textarea:focus, .pg-content-wrapper form[id^="frm_"] input:focus, .pg-content-wrapper form[id^="frm_"] select:focus, .pg-content-wrapper form[id^="frm_"] textarea:focus { border-color:var(--form-border-focus) !important; outline:0 !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--form-border-focus) 22%, transparent) !important; } #vgbody form[id^="frm_"] input:required:invalid:not(:placeholder-shown), .pg-content-wrapper form[id^="frm_"] input:required:invalid:not(:placeholder-shown) { border-color:#b42318 !important; } /* Radio choices become full-width, touch-friendly rows. */ #vgbody form[id^="frm_"] .pg-radio-input, .pg-content-wrapper form[id^="frm_"] .pg-radio-input { position:relative !important; display:grid !important; grid-template-columns:24px minmax(0, 1fr) !important; gap:var(--space-3) !important; align-items:start !important; margin:0 0 var(--space-3) !important; padding:var(--space-4) !important; background:var(--form-bg) !important; border:1px solid var(--form-border) !important; border-radius:var(--form-radius) !important; } #vgbody form[id^="frm_"] .pg-radio-input input[type="radio"], .pg-content-wrapper form[id^="frm_"] .pg-radio-input input[type="radio"] { width:20px !important; height:20px !important; margin:2px 0 0 !important; accent-color:var(--brand-primary) !important; } #vgbody form[id^="frm_"] .pg-radio-input label:not(.pg-visually-hidden), .pg-content-wrapper form[id^="frm_"] .pg-radio-input label:not(.pg-visually-hidden) { grid-column:2 !important; cursor:pointer !important; font-weight:500 !important; } #vgbody form[id^="frm_"] .pg-radio-input textarea, .pg-content-wrapper form[id^="frm_"] .pg-radio-input textarea { grid-column:2 !important; margin-top:var(--space-3) !important; } /* Submit and reset actions share the client button language. */ #vgbody form[id^="frm_"] > button, .pg-content-wrapper form[id^="frm_"] > button { min-height:var(--button-min-height) !important; margin:var(--space-5) var(--space-3) 0 0 !important; padding:var(--button-padding-block) var(--button-padding-inline) !important; background:var(--button-bg) !important; border:1px solid var(--button-border) !important; border-radius:var(--button-radius) !important; color:var(--button-text) !important; font-family:var(--font-button) !important; font-size:var(--button-font-size) !important; font-weight:var(--button-weight) !important; line-height:1 !important; letter-spacing:var(--button-tracking) !important; text-transform:var(--button-transform) !important; cursor:pointer !important; } #vgbody form[id^="frm_"] > button[type="reset"], .pg-content-wrapper form[id^="frm_"] > button[type="reset"] { background:transparent !important; color:var(--button-bg) !important; } #vgbody form[id^="frm_"] > button:hover, #vgbody form[id^="frm_"] > button:focus-visible, .pg-content-wrapper form[id^="frm_"] > button:hover, .pg-content-wrapper form[id^="frm_"] > button:focus-visible { background:var(--button-bg-hover) !important; border-color:var(--button-border-hover) !important; color:var(--button-text-hover) !important; } @media (max-width:720px) { #vgbody form[id^="frm_"], .pg-content-wrapper form[id^="frm_"] { margin-block:var(--space-6) !important; padding:var(--space-4) !important; border-radius:var(--form-radius) !important; box-shadow:none !important; } #vgbody form[id^="frm_"] tr, .pg-content-wrapper form[id^="frm_"] tr { grid-template-columns:minmax(0, 1fr) !important; gap:var(--space-2) !important; padding:var(--space-2) 0 !important; } #vgbody form[id^="frm_"] td, .pg-content-wrapper form[id^="frm_"] td { grid-column:1 !important; } #vgbody form[id^="frm_"] td[colspan="2"]:has(> fieldset), .pg-content-wrapper form[id^="frm_"] td[colspan="2"]:has(> fieldset) { margin-top:var(--space-6) !important; } #vgbody form[id^="frm_"] td[colspan="2"] > fieldset > legend, .pg-content-wrapper form[id^="frm_"] td[colspan="2"] > fieldset > legend { padding:var(--space-3) var(--space-4) !important; } #vgbody form[id^="frm_"] > button, .pg-content-wrapper form[id^="frm_"] > button { width:100% !important; margin:var(--space-3) 0 0 !important; } } /* -- 34i. Contrast-safe comparison results --------------------------------- Nested links previously ignored the table-cell foreground and reused an article-link color, which could produce dark red text on teal/blue headers. Every result-table color now comes from section 33 comparison tokens. -------------------------------------------------------------------------- */ html body .vgrelatedlinks, html body #vgrelatedlinks { display:none !important; } #vgcomo { width:100% !important; margin:clamp(1.5rem, 4vw, 2.5rem) 0 !important; background:var(--compare-body-bg) !important; border:1px solid var(--compare-border) !important; border-radius:var(--form-radius) !important; border-collapse:separate !important; border-spacing:0 !important; color:var(--compare-body-text) !important; font-family:var(--font-body) !important; } #vgcomo th, #vgcomo td { padding:clamp(0.75rem, 1.8vw, 1rem) !important; background:var(--compare-body-bg) !important; border-right:1px solid var(--compare-border) !important; border-bottom:1px solid var(--compare-border) !important; color:var(--compare-body-text) !important; font-size:clamp(0.875rem, 1.2vw, 1rem) !important; line-height:1.45 !important; vertical-align:middle !important; } #vgcomo tr > :last-child { border-right:0 !important; } #vgcomo tbody tr:last-child > td { border-bottom:0 !important; } #vgcomo tbody tr:not(.vgsection):nth-child(even) > td { background:var(--compare-body-alt) !important; } /* Plan-name header and category divider rows. */ #vgcomo thead th, #vgcomo thead td, #vgcomo thead th *, #vgcomo thead td *, #vgcomo tr.vgsection > th, #vgcomo tr.vgsection > td, #vgcomo tr.vgsection > th *, #vgcomo tr.vgsection > td * { background:var(--compare-header-bg) !important; color:var(--compare-header-text) !important; } #vgcomo thead a, #vgcomo tr.vgsection a { color:var(--compare-header-link) !important; font-weight:700 !important; text-decoration:none !important; text-decoration-color:currentColor !important; text-underline-offset:3px !important; } #vgcomo thead a:hover, #vgcomo thead a:focus-visible, #vgcomo tr.vgsection a:hover, #vgcomo tr.vgsection a:focus-visible { color:var(--compare-header-link) !important; text-decoration:underline !important; } /* Some vendor builds omit and place the plan-name row first. */ #vgcomo > tbody:first-child > tr:first-child > th, #vgcomo > tbody:first-child > tr:first-child > td, #vgcomo > tbody:first-child > tr:first-child > th *, #vgcomo > tbody:first-child > tr:first-child > td * { background:var(--compare-header-bg) !important; color:var(--compare-header-text) !important; } #vgcomo > tbody:first-child > tr:first-child a { color:var(--compare-header-link) !important; font-weight:700 !important; } /* Body links retain a branded color only on the light table surface. */ #vgcomo tbody tr:not(.vgsection):not(:first-child) a { color:var(--compare-link) !important; font-weight:600 !important; text-decoration:underline !important; text-decoration-color:color-mix(in srgb, var(--compare-link) 55%, transparent) !important; text-underline-offset:3px !important; } #vgcomo .pg-has-checkmark { color:var(--compare-check) !important; text-align:center !important; } #vgcomo .pg-has-checkmark img { display:block !important; width:20px !important; height:20px !important; margin:auto !important; object-fit:contain !important; } /* The picker should use normal document flow; a sticky Compare button can obscure choices on shorter screens. */ #vgcom > input[type="submit"] { position:static !important; top:auto !important; min-height:var(--button-min-height) !important; padding:var(--button-padding-block) var(--button-padding-inline) !important; background:var(--button-bg) !important; border:1px solid var(--button-border) !important; border-radius:var(--button-radius) !important; color:var(--button-text) !important; font-family:var(--font-button) !important; font-size:var(--button-font-size) !important; font-weight:var(--button-weight) !important; letter-spacing:var(--button-tracking) !important; text-transform:var(--button-transform) !important; } @media (max-width:760px) { #vgcomo { display:block !important; max-width:100% !important; overflow-x:auto !important; overscroll-behavior-inline:contain !important; -webkit-overflow-scrolling:touch !important; } #vgcomo thead, #vgcomo tbody, #vgcomo tr { min-width:680px !important; } #vgcomo tr > :first-child { position:sticky !important; left:0 !important; z-index:1 !important; min-width:170px !important; box-shadow:6px 0 10px rgba(15,23,42,0.06) !important; } #vgcomo thead tr > :first-child, #vgcomo tr.vgsection > :first-child, #vgcomo > tbody:first-child > tr:first-child > :first-child { z-index:2 !important; background:var(--compare-header-bg) !important; color:var(--compare-header-text) !important; } #vgcom > input[type="submit"] { width:100% !important; } } /* -- 34j. Natural banner photography --------------------------------------- Client-supplied images render without filters, opacity changes, gradients, blend modes, or pseudo-element tints. Caption styling remains independent. -------------------------------------------------------------------------- */ .pg-banner__img, .pg-banner img, .banner-carousel img { filter:none !important; -webkit-filter:none !important; opacity:1 !important; mix-blend-mode:normal !important; } .pg-banner__link, .pg-banner__slide, .pg-banner__media { filter:none !important; opacity:1 !important; background-image:none !important; mix-blend-mode:normal !important; } .pg-banner__link::before, .pg-banner__link::after, .pg-banner__slide::before, .pg-banner__slide::after, .pg-banner__media::before, .pg-banner__media::after, .banner-carousel .slide::before, .banner-carousel .slide::after { content:none !important; display:none !important; background:none !important; background-image:none !important; filter:none !important; opacity:0 !important; mix-blend-mode:normal !important; } /* -- 34k. Flat compare-picker markup --------------------------------------- Older clients emit label + checkbox as direct siblings of #vgcom, while newer clients wrap each option. A two-column grid keeps both siblings on one row without changing form semantics or JavaScript behavior. -------------------------------------------------------------------------- */ #vgcom:has(> label + input[type="checkbox"]) { display:grid !important; grid-template-columns:minmax(0, 1fr) 32px !important; grid-auto-flow:row dense !important; align-items:stretch !important; gap:var(--space-3) var(--space-4) !important; width:100% !important; max-width:100% !important; margin:clamp(1.5rem, 4vw, 2.5rem) 0 0 !important; padding:clamp(1.25rem, 3vw, 2rem) !important; background:var(--form-bg) !important; border:1px solid var(--form-border) !important; border-radius:calc(var(--form-radius) + 2px) !important; box-shadow:0 10px 28px rgba(15,23,42,0.07) !important; } #vgcom:has(> label + input[type="checkbox"]) > h2 { grid-column:1 / -1 !important; width:100% !important; margin:var(--space-6) 0 var(--space-2) !important; padding:0 0 var(--space-3) !important; border-bottom:3px solid var(--brand-primary) !important; color:var(--brand-primary) !important; font-family:var(--font-heading) !important; font-size:clamp(1.25rem, 2.4vw, 1.75rem) !important; font-weight:var(--heading-weight) !important; line-height:1.2 !important; } #vgcom:has(> label + input[type="checkbox"]) > h2:first-of-type { margin-top:0 !important; } #vgcom:has(> label + input[type="checkbox"]) > label { grid-column:1 !important; align-self:stretch !important; display:block !important; min-width:0 !important; min-height:74px !important; margin:0 !important; padding:var(--space-4) var(--space-5) !important; background:var(--form-section-bg) !important; border:1px solid var(--form-border) !important; border-left:5px solid var(--brand-primary) !important; border-radius:var(--form-radius) !important; color:var(--form-text) !important; cursor:pointer !important; font-family:var(--font-body) !important; font-size:var(--text-base) !important; line-height:1.55 !important; transition:border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease !important; } #vgcom:has(> label + input[type="checkbox"]) > label:hover, #vgcom:has(> label + input[type="checkbox"]) > label:focus-within { background:color-mix(in srgb, var(--brand-primary-light) 38%, var(--form-bg)) !important; border-color:var(--brand-secondary) !important; border-left-color:var(--brand-secondary) !important; box-shadow:0 5px 14px rgba(15,23,42,0.08) !important; } #vgcom:has(> label + input[type="checkbox"]) > label > a { display:inline !important; color:var(--brand-primary) !important; font-size:var(--text-lg) !important; font-weight:700 !important; line-height:1.3 !important; text-decoration:none !important; } #vgcom:has(> label + input[type="checkbox"]) > label > a:hover, #vgcom:has(> label + input[type="checkbox"]) > label > a:focus-visible { color:var(--brand-secondary-dark) !important; text-decoration:underline !important; text-underline-offset:3px !important; } #vgcom:has(> label + input[type="checkbox"]) > input[type="checkbox"] { grid-column:2 !important; align-self:center !important; justify-self:center !important; position:relative !important; inset:auto !important; display:block !important; width:24px !important; height:24px !important; margin:0 !important; opacity:1 !important; visibility:visible !important; clip:auto !important; clip-path:none !important; appearance:auto !important; -webkit-appearance:auto !important; accent-color:var(--brand-secondary) !important; cursor:pointer !important; } /* The label immediately precedes its checkbox in legacy vendor markup. Give the full option card a persistent selected state and a keyboard focus cue. */ #vgcom:has(> label + input[type="checkbox"]) > label:has(+ input[type="checkbox"]:checked) { background:color-mix(in srgb, var(--brand-secondary) 14%, var(--form-bg)) !important; border-color:var(--brand-secondary) !important; border-left-color:var(--brand-secondary) !important; box-shadow:0 0 0 2px color-mix(in srgb, var(--brand-secondary) 24%, transparent) !important; } #vgcom:has(> label + input[type="checkbox"]) > label:has(+ input[type="checkbox"]:focus-visible) { outline:3px solid color-mix(in srgb, var(--brand-secondary) 35%, transparent) !important; outline-offset:3px !important; } #vgcom:has(> label + input[type="checkbox"]) > input[type="submit"] { grid-column:1 / -1 !important; justify-self:end !important; width:auto !important; margin:var(--space-3) 0 !important; } #vgcom:has(> label + input[type="checkbox"]) > br, #vgcom:has(> label + input[type="checkbox"]) > input[type="hidden"] { display:none !important; } @media (max-width:640px) { #vgcom:has(> label + input[type="checkbox"]) { grid-template-columns:minmax(0, 1fr) 28px !important; gap:var(--space-3) !important; padding:var(--space-4) !important; box-shadow:none !important; } #vgcom:has(> label + input[type="checkbox"]) > label { min-height:0 !important; padding:var(--space-4) !important; } #vgcom:has(> label + input[type="checkbox"]) > input[type="submit"] { width:100% !important; justify-self:stretch !important; } } /* -- 34l. Mobile side-navigation state compatibility ----------------------- Some vendor builds toggle body.pg-mobile-nav-open; newer builds update only #pg-menu-toggle[aria-expanded]. Support both without requiring script edits. -------------------------------------------------------------------------- */ @media (max-width:1024px) { #pg-menu-toggle { position:relative !important; display:flex !important; align-items:center !important; width:100% !important; min-height:52px !important; padding:0.875rem 1rem !important; background:var(--brand-primary) !important; border:1px solid var(--brand-primary) !important; border-radius:var(--form-radius) !important; color:var(--on-primary) !important; font-family:var(--font-button) !important; font-size:var(--text-base) !important; font-weight:var(--button-weight) !important; cursor:pointer !important; visibility:visible !important; opacity:1 !important; } #pg-menu-toggle::before { content:"\2630" !important; display:inline-block !important; margin-right:0.6rem !important; font-family:Arial, Helvetica, sans-serif !important; font-size:1.15rem !important; line-height:1 !important; } #pg-menu-toggle[aria-expanded="true"]::before, body.pg-mobile-nav-open #pg-menu-toggle::before { content:"\2715" !important; } #pg-menu-toggle + ul { display:block !important; max-height:0 !important; margin:0 !important; padding:0 !important; overflow:hidden !important; visibility:hidden !important; opacity:0 !important; transition:max-height 280ms var(--ease-out), opacity 180ms ease, visibility 0s linear 280ms !important; } #pg-menu-toggle[aria-expanded="true"] + ul, body.pg-mobile-nav-open #pg-menu-toggle + ul { max-height:2400px !important; margin-top:var(--space-2) !important; padding-bottom:var(--space-2) !important; overflow:visible !important; visibility:visible !important; opacity:1 !important; transition:max-height 320ms var(--ease-out), opacity 180ms ease, visibility 0s linear 0s !important; } #pg-menu-toggle[aria-expanded="true"] + ul a, body.pg-mobile-nav-open #pg-menu-toggle + ul a { display:block !important; } } /* -- 34m. Client-matched semantic heading hierarchy ------------------------ Keep the vendor's correct H1/H2/H3 document structure. Only the visual levels are mapped to the client site through section 33 heading tokens: client content H2 -> planned-giving page H1 client subheading -> planned-giving H2 client supporting heading -> planned-giving H3 The shared client-site hero (#pageTitle) remains native and is not targeted. -------------------------------------------------------------------------- */ .pg-content-wrapper .pg-page-title:not(.pg-sr-only), .pg-content-wrapper h1:not(.pg-sr-only) { margin:0 0 var(--heading-h1-space) !important; color:var(--heading-color) !important; font-family:var(--font-heading) !important; font-size:var(--heading-h1-size) !important; font-weight:var(--heading-weight) !important; line-height:var(--heading-line) !important; letter-spacing:var(--heading-tracking) !important; text-transform:var(--heading-transform) !important; } .pg-content-wrapper h2, .pg-content-wrapper .pg-section-title { margin-top:0 !important; margin-bottom:var(--heading-section-space) !important; color:var(--heading-color) !important; font-family:var(--font-heading) !important; font-size:var(--heading-h2-size) !important; font-weight:var(--heading-weight) !important; line-height:var(--heading-line) !important; letter-spacing:var(--heading-tracking) !important; text-transform:var(--heading-transform) !important; } .pg-content-wrapper h3 { color:var(--heading-color) !important; font-family:var(--font-heading) !important; font-size:var(--heading-h3-size) !important; font-weight:var(--heading-weight) !important; line-height:var(--heading-line) !important; letter-spacing:var(--heading-tracking) !important; text-transform:var(--heading-transform) !important; } .pg-content-wrapper h4 { color:var(--heading-color) !important; font-family:var(--font-heading) !important; font-size:var(--heading-h4-size) !important; line-height:var(--heading-line) !important; text-transform:var(--heading-transform) !important; } /* Card titles are a supporting level, not page-section headings. */ .pg-content-wrapper .pg-page-card-title { font-size:var(--heading-h3-size) !important; font-weight:400 !important; } /* Preserve deliberate inverse headings on the branded Plan-a-Gift panel. */ .pg-content-wrapper .pg-has-pag .pg-section-title, #vgbody .pg-has-pag .pg-section-title { color:var(--on-primary) !important; } @media (max-width:640px) { .pg-content-wrapper .pg-page-title:not(.pg-sr-only), .pg-content-wrapper h1:not(.pg-sr-only) { overflow-wrap:anywhere; } } /* -- 34n. Client-matched navigation and banner typography ----------------- These rules bring planned-giving navigation and carousel text into the same typographic system, with all client values supplied by section 33. Section 34o separately normalizes the shared header's exact measured line height. -------------------------------------------------------------------------- */ .pg-side-nav, .pg-side-nav a, #pg-menu-toggle { font-family:var(--nav-font) !important; } /* -- 34p. Final homepage spacing rhythm ------------------------------------ Homepage sections already carry generous internal padding. Remove stacked external margins so adjacent sections do not create accidental 64-96px blank bands. Keep the alert strip's intentional zero padding, and tighten the carousel-to-options transition where two section edges meet. Values remain client-configurable in section 33. -------------------------------------------------------------------------- */ #vgbody.pg-page-gift-index > .pg-section:not(:first-child) { padding-top:var(--home-section-pad) !important; padding-bottom:var(--home-section-pad) !important; } #vgbody.pg-page-gift-index > .pg-has-intro:not(:first-child) { padding-bottom:var(--home-section-transition-pad) !important; } #vgbody.pg-page-gift-index > .pg-has-extra-gifts { padding-top:var(--home-section-transition-pad) !important; } #vgbody.pg-page-gift-index > .pg-has-society, #vgbody.pg-page-gift-index > .pg-has-tip-of-the-week, #vgbody.pg-page-gift-index > .pg-has-pag, #vgbody.pg-page-gift-index > .pg-personal-planning { margin-top:var(--home-section-gap) !important; margin-bottom:var(--home-section-gap) !important; } @media (max-width:640px) { #vgbody.pg-page-gift-index > .pg-section:not(:first-child) { padding-top:var(--home-section-pad-mobile) !important; padding-bottom:var(--home-section-pad-mobile) !important; } #vgbody.pg-page-gift-index > .pg-has-intro:not(:first-child) { padding-bottom:var(--home-section-transition-pad-mobile) !important; } #vgbody.pg-page-gift-index > .pg-has-extra-gifts { padding-top:var(--home-section-transition-pad-mobile) !important; } /* The client header's Bootstrap row extends four pixels beyond its mobile container on the planned-giving include. Contain that rounding overflow. */ #header, #header .header-body, #header .header-container { max-width:100% !important; overflow-x:clip !important; } } .pg-side-nav > li > ul > li > a, .pg-side-nav > li > ul > li.pg-has-sub-nav > a { font-size:var(--nav-font-size) !important; font-weight:var(--nav-font-weight) !important; line-height:var(--nav-line-height) !important; letter-spacing:var(--nav-letter-spacing) !important; text-transform:var(--nav-text-transform) !important; } .pg-side-nav ul ul a { font-size:var(--nav-sub-font-size) !important; font-weight:var(--nav-sub-font-weight) !important; line-height:var(--nav-line-height) !important; letter-spacing:var(--nav-letter-spacing) !important; text-transform:var(--nav-text-transform) !important; } .pg-banner, .pg-banner__slide, .pg-banner__link, .pg-banner__caption, .pg-banner__caption-text { font-family:var(--banner-caption-font) !important; } .pg-banner__caption-text { font-size:var(--banner-caption-rail-size) !important; font-weight:var(--banner-caption-weight) !important; line-height:var(--banner-caption-line-height) !important; letter-spacing:var(--banner-caption-letter-spacing) !important; text-transform:var(--banner-caption-transform) !important; } @media (max-width:640px) { .pg-side-nav > li > ul > li > a, .pg-side-nav > li > ul > li.pg-has-sub-nav > a { font-size:clamp(1.05rem, 4.5vw, var(--nav-font-size)) !important; } .pg-banner__caption-text { font-size:var(--banner-caption-mobile-size) !important; } } /* ============================================================================ 35. CROSS-CLIENT PRODUCTION HARDENING Reusable fixes proven across live client sites. All visual decisions read from section 33 tokens; keep client names, IDs, copy, and image paths out. ============================================================================ */ /* -- 35a. Shared homepage rail and vertical rhythm ------------------------- */ .pg-has-intro > .pg-container, .pg-has-extra-gifts > .pg-container, .pg-personal-planning > .pg-container, .pg-has-contact > .pg-container { width:calc(100% - (2 * var(--page-gutter))) !important; max-width:var(--container-max) !important; margin-inline:auto !important; padding-inline:0 !important; } .pg-has-extra-gifts, .pg-has-society, .pg-has-tip-of-the-week, .pg-has-pag, .pg-personal-planning, .pg-has-contact { padding-block:var(--home-section-pad) !important; } .pg-has-society, .pg-has-tip-of-the-week, .pg-has-pag { width:calc(100% - (2 * var(--page-gutter))) !important; max-width:var(--container-max) !important; margin:var(--home-section-gap) auto !important; } .pg-has-extra-gifts .pg-page-card-outer, .pg-personal-planning .pg-page-card-outer { width:100% !important; max-width:none !important; margin:1.25rem 0 0 !important; gap:var(--card-gap) !important; } @media (max-width:700px) { .pg-has-intro > .pg-container, .pg-has-extra-gifts > .pg-container, .pg-personal-planning > .pg-container, .pg-has-contact > .pg-container, .pg-has-society, .pg-has-tip-of-the-week, .pg-has-pag { width:calc(100% - (2 * var(--page-gutter-mobile))) !important; } } /* -- 35b. Desktop sidebar + banner uses every pixel of the rail ------------ */ @media (min-width:1025px) { .pg-has-intro > .pg-container > .pg-columns { display:grid !important; grid-template-columns:var(--sidebar-width) minmax(0, 1fr) !important; align-items:start !important; gap:var(--space-8) !important; width:100% !important; margin:0 !important; } .pg-has-intro > .pg-container > .pg-columns > .pg-is-3, .pg-has-intro > .pg-container > .pg-columns > .pg-is-9 { flex:none !important; width:auto !important; min-width:0 !important; max-width:none !important; margin:0 !important; padding:0 !important; } .pg-has-intro .pg-static-banner, .pg-has-intro .pg-static-banner__img { display:block !important; width:100% !important; max-width:100% !important; margin:0 !important; } } /* -- 35c. Alert / tax-incentive banner ------------------------------------ */ #alert.pg-alert { position:relative !important; isolation:isolate !important; box-sizing:border-box !important; width:calc(100% - (2 * var(--page-gutter))) !important; max-width:var(--container-max) !important; margin:clamp(16px, 2.5vw, 30px) auto !important; padding:0 !important; overflow:hidden !important; border:1px solid color-mix(in srgb, var(--alert-accent) 22%, transparent) !important; border-left:7px solid var(--alert-accent) !important; border-radius:var(--alert-radius) !important; background:linear-gradient(90deg, color-mix(in srgb, var(--alert-accent) 10%, #fff), #fff 58%) !important; box-shadow:var(--alert-shadow) !important; } #alert.pg-alert > a { box-sizing:border-box !important; display:flex !important; align-items:center !important; gap:clamp(12px, 2vw, 18px) !important; width:100% !important; min-height:74px !important; padding:clamp(18px, 2.6vw, 28px) clamp(46px, 5vw, 70px) clamp(18px, 2.6vw, 28px) clamp(22px, 4vw, 40px) !important; color:var(--brand-primary-dark) !important; font-family:var(--font-button) !important; font-size:clamp(1rem, 1.25vw, 1.16rem) !important; font-weight:700 !important; line-height:1.35 !important; text-decoration:none !important; } #alert.pg-alert > a::before { content:"Alert" !important; flex:0 0 auto !important; padding:7px 12px !important; border-radius:999px !important; background:var(--alert-accent) !important; color:var(--alert-on-accent) !important; font-size:0.78rem !important; font-weight:800 !important; line-height:1 !important; letter-spacing:0.08em !important; text-transform:uppercase !important; } #alert.pg-alert > a::after { content:"Learn more" !important; margin-left:auto !important; color:var(--alert-accent) !important; font-size:0.92rem !important; font-weight:800 !important; white-space:nowrap !important; text-decoration:underline !important; text-underline-offset:4px !important; } @media (max-width:700px) { #alert.pg-alert { width:calc(100% - (2 * var(--page-gutter-mobile))) !important; } #alert.pg-alert > a { display:grid !important; grid-template-columns:1fr !important; gap:10px !important; min-height:0 !important; padding:18px 44px 18px 20px !important; } #alert.pg-alert > a::before, #alert.pg-alert > a::after { justify-self:start !important; margin-left:0 !important; } } /* -- 35d. Mobile navigation final state ----------------------------------- Required behavior: the vendor or a tiny controller must toggle aria-expanded on #pg-menu-toggle. CSS displays the corresponding state. */ @media (max-width:1024px) { ul.pg-side-nav, ul.pg-side-nav > li { height:auto !important; max-height:none !important; overflow:visible !important; } ul.pg-side-nav > li > #pg-menu-toggle + ul { display:none !important; position:static !important; width:100% !important; height:auto !important; max-height:none !important; margin:0 !important; padding:var(--space-2) !important; overflow-x:hidden !important; overflow-y:auto !important; } ul.pg-side-nav > li > #pg-menu-toggle[aria-expanded="true"] + ul { display:block !important; max-height:70vh !important; } } /* -- 35e. Responsive gift diagram/video and reliable close target ---------- */ @media (max-width:1024px) { .pg-has-main-content .pg-columns, .pg-has-main-content .pg-column, .pg-has-main-content .pg-main-content, #vgbody, #vggiftdiag { min-width:0 !important; max-width:100% !important; } #vggiftdiag { width:100% !important; overflow:hidden !important; } #vggiftdiag iframe.giftvideo, #vggiftdiag .giftvideo { display:block !important; box-sizing:border-box !important; width:100% !important; max-width:100% !important; height:auto !important; min-height:0 !important; aspect-ratio:570 / 350 !important; border:0 !important; } } @media (max-width:760px) { body #vgbody #popped #close_popped, body #popped #close_popped, body #close_popped { position:absolute !important; top:0.5rem !important; right:0.5rem !important; bottom:auto !important; left:auto !important; box-sizing:border-box !important; width:44px !important; height:44px !important; max-width:44px !important; max-height:44px !important; padding:0.625rem !important; transform:none !important; pointer-events:auto !important; touch-action:manipulation !important; opacity:1 !important; visibility:visible !important; z-index:9010 !important; } } /* -- 35f. Goals & Benefits mobile cards ----------------------------------- */ @media (max-width:760px) { #vggoals, #vggoals tbody, #vggoals tr, #vggoals td { box-sizing:border-box !important; width:100% !important; max-width:100% !important; } #vggoals { display:block !important; table-layout:auto !important; } #vggoals tr { display:block !important; padding:1rem !important; } #vggoals td { display:block !important; position:static !important; padding:0.75rem 0 !important; text-align:left !important; overflow-wrap:anywhere !important; } #vggoals td + td { border-top:1px solid var(--border-light) !important; } #vggoals td::before { display:block !important; position:static !important; width:auto !important; margin:0 0 0.375rem !important; color:var(--brand-primary-dark) !important; font-family:var(--font-button) !important; font-size:var(--text-xs) !important; font-weight:700 !important; letter-spacing:0.06em !important; text-transform:uppercase !important; } #vggoals td:nth-child(1)::before { content:"Your Goal" !important; } #vggoals td:nth-child(2)::before { content:"Gift Approach" !important; } #vggoals td:nth-child(3)::before { content:"Benefit" !important; } } /* -- 35g. Homepage semantic bullets and Personal Planning CTA rhythm ------- */ .pg-has-tip-of-the-week .pg-container ul { margin:1rem 0 1.25rem !important; padding-left:1.5rem !important; list-style:disc outside !important; } .pg-has-tip-of-the-week .pg-container ul > li { display:list-item !important; margin:0 0 0.75rem !important; padding-left:0.25rem !important; list-style:disc outside !important; line-height:1.65 !important; } .pg-has-tip-of-the-week .pg-container ul > li::marker { color:var(--brand-primary) !important; } .pg-personal-planning .pg-page-card > p:not(.pg-button) { margin-bottom:var(--card-copy-to-cta-gap) !important; } .pg-personal-planning .pg-page-card > .pg-button { margin-top:auto !important; } /* -- 35h. Inverse pre-footer headings without changing card colors --------- */ .pg-pre-footer .pg-personal-planning > .pg-container > .pg-section-title, .pg-pre-footer .pg-personal-planning > .pg-container > .pg-section-title span, .pg-pre-footer .pg-personal-planning > .pg-container > .pg-lede, .pg-pre-footer .pg-personal-planning > .pg-container > .pg-lede > a, .pg-pre-footer .pg-personal-planning > .pg-container > .pg-lede > a span, .pg-pre-footer .pg-has-extra-gifts > .pg-container > .pg-section-title, .pg-pre-footer .pg-has-extra-gifts > .pg-container > .pg-section-title span { color:var(--on-primary) !important; } .pg-pre-footer .pg-has-extra-gifts > .pg-container > .pg-section-title span { background:transparent !important; } /* -- 35i. Legislation CTA when markup is article > a > .pg-button ---------- */ .pg-legislation .pg-page-card-outer > article { display:flex !important; flex-direction:column !important; align-items:flex-start !important; } .pg-legislation .pg-page-card-outer > article > a { display:inline-flex !important; width:auto !important; margin-top:auto !important; text-decoration:none !important; } .pg-legislation .pg-page-card-outer > article > a > .pg-button { display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:0.625rem !important; min-height:46px !important; height:auto !important; margin:0 !important; padding:0.75rem 1.5rem !important; background:var(--button-bg) !important; border-color:var(--button-border) !important; color:var(--button-text) !important; line-height:1.25 !important; } .pg-legislation .pg-page-card-outer > article > a:hover > .pg-button, .pg-legislation .pg-page-card-outer > article > a:focus > .pg-button { background:var(--button-bg-hover) !important; border-color:var(--button-border-hover) !important; color:var(--button-text-hover) !important; } /* -- 35j. Final legal/mission paragraph as contained footer ---------------- */ #main-content > .pg-pre-footer + p:last-child { box-sizing:border-box !important; width:calc(100% - (2 * var(--page-gutter))) !important; max-width:var(--container-max) !important; margin:1rem auto 1.5rem !important; padding:1rem 1.5rem !important; background:var(--legal-footer-bg) !important; border-radius:var(--legal-footer-radius) !important; color:var(--legal-footer-text) !important; font-size:var(--legal-footer-font-size) !important; line-height:1.55 !important; text-align:center !important; } @media (max-width:700px) { #main-content > .pg-pre-footer + p:last-child { width:calc(100% - (2 * var(--page-gutter-mobile))) !important; padding:0.875rem 1rem !important; } } /* ============================================================================ 36. WAYNESBURG HOMEPAGE SECTION-BY-SECTION FINISHING Keep these corrections page-scoped. The host page uses several different wrappers, so a single global margin or width rule would shift unrelated gift pages and make the homepage rails disagree at responsive breakpoints. ============================================================================ */ /* -- 36a. Align the page title with the alert, intro and options rail ------- */ #vgbody.pg-page-gift-index > h1:not(.pg-sr-only) { box-sizing:border-box !important; width:calc(100% - (2 * var(--page-gutter))) !important; max-width:var(--container-max) !important; } /* -- 36b. Ways of Giving: full background, static imagery, clear type ------ The host article has an asymmetric desktop inset (social rail + article padding). These two tokens let the branded band reach both page edges while its inner .pg-container remains on the shared content rail. */ #vgbody.pg-page-gift-index > .pg-has-ways-of-giving { box-sizing:border-box !important; width:calc(100% + var(--home-band-breakout-start) + var(--home-band-breakout-end)) !important; max-width:none !important; margin-right:calc(-1 * var(--home-band-breakout-end)) !important; margin-left:calc(-1 * var(--home-band-breakout-start)) !important; border-radius:0 !important; /* -- 36b. True viewport-wide homepage bands ------------------------------- The homepage bands live under different host wrappers. Break them out with viewport geometry, then place every section's content back on one centered rail. This removes the white side gutters without stretching readable copy. */ body:has(#vgbody.pg-page-gift-index) { overflow-x:clip !important; } #vgbody.pg-page-gift-index > .pg-has-ways-of-giving .pg-section-title, #vgbody.pg-page-gift-index > .pg-has-ways-of-giving .pg-section-title span { color:var(--on-primary) !important; text-shadow:none !important; } #vgbody.pg-page-gift-index > .pg-has-ways-of-giving .pg-card, #vgbody.pg-page-gift-index > .pg-has-ways-of-giving .pg-card:hover, #vgbody.pg-page-gift-index > .pg-has-ways-of-giving .pg-card:focus, #vgbody.pg-page-gift-index > .pg-has-ways-of-giving .pg-card:focus-visible { color:var(--text-primary) !important; transform:none !important; transition:border-color 160ms ease, box-shadow 160ms ease !important; } #vgbody.pg-page-gift-index > .pg-has-ways-of-giving .pg-card-image, #vgbody.pg-page-gift-index > .pg-has-ways-of-giving .pg-card-image figure, #vgbody.pg-page-gift-index > .pg-has-ways-of-giving .pg-card-image img, #vgbody.pg-page-gift-index > .pg-has-ways-of-giving .pg-card:hover img, #vgbody.pg-page-gift-index > .pg-has-ways-of-giving .pg-card:focus img { animation:none !important; transform:none !important; transition:none !important; } #vgbody.pg-page-gift-index > .pg-has-ways-of-giving .pg-card-image::after { content:none !important; display:none !important; } #vgbody.pg-page-gift-index > .pg-has-ways-of-giving .pg-card-content { background:var(--bg-primary) !important; } #vgbody.pg-page-gift-index > .pg-has-ways-of-giving .pg-strong { color:var(--text-primary) !important; } #vgbody.pg-page-gift-index > .pg-has-ways-of-giving .pg-card-content p:not(.pg-strong) { color:var(--text-secondary) !important; } /* -- 36c. Honor the template's full-bleed section class -------------------- Plan-a-Gift, Personal Planning and Tip of the Week are direct children of .site-main, unlike the sections inside #vgbody. Normalize them as contiguous background bands and keep their content on one centered rail. */ .site-main > .pg-waynesburg-full-bleed { align-self:stretch !important; .pg-home-full-bleed { box-sizing:border-box !important; position:relative !important; right:auto !important; left:50% !important; width:100% !important; width:100vw !important; min-width:100vw !important; max-width:none !important; margin-top:0 !important; margin-right:0 !important; margin-bottom:0 !important; margin-left:0 !important; margin-left:-50vw !important; padding-top:var(--home-section-pad) !important; padding-right:0 !important; padding-bottom:var(--home-section-pad) !important; padding-left:0 !important; border-radius:0 !important; } #vgbody.pg-page-gift-index > .pg-home-full-bleed { margin-top:0 !important; margin-bottom:0 !important; } .site-main > .pg-waynesburg-full-bleed > .pg-container { .pg-home-full-bleed > .pg-container { box-sizing:border-box !important; width:calc(100% - (2 * var(--page-gutter))) !important; max-width:var(--container-max) !important; margin-right:auto !important; margin-left:auto !important; padding-right:var(--page-gutter) !important; padding-left:var(--page-gutter) !important; } .site-main > .pg-has-tip-of-the-week.pg-waynesburg-full-bleed { .pg-home-full-bleed.pg-has-tip-of-the-week { border-top:1px solid var(--border-light) !important; border-right:0 !important; border-bottom:0 !important; border-left:0 !important; } /* Remove the host article's unused bottom padding before the first full-width band. This makes the Society-to-Plan-a-Gift transition match every other homepage section transition instead of creating a one-off 64px gap. */ body:has(#vgbody.pg-page-gift-index) .site-main > br { display:none !important; } /* Remove the host article's bottom inset before the first viewport-wide band. With the Society band now flush, Plan-a-Gift follows it without a stray white strip or a one-off 64px transition. */ .basic-page:has(#vgbody.pg-page-gift-index) { padding-bottom:0 !important; } @media (max-width:1279px) { #vgbody.pg-page-gift-index > .pg-has-ways-of-giving { --home-band-breakout-start:2rem; --home-band-breakout-end:2rem; } /* -- 36c. Plan-a-Gift alignment ------------------------------------------- Keep the title aligned with the copy column, reserve a stable icon column, and let the call to action sit beside the copy instead of drifting through a loose multi-column layout. */ .pg-home-plan-a-gift.pg-home-full-bleed .pg-section-title, .pg-home-plan-a-gift.pg-home-full-bleed .pg-section-title.pg-text-align-center { margin:0 0 1rem calc(72px + var(--space-6)) !important; text-align:left !important; } .pg-home-plan-a-gift.pg-home-full-bleed .pg-plan-a-gift-layout { display:grid !important; grid-template-columns:72px minmax(0, 1fr) !important; gap:var(--space-6) !important; align-items:center !important; margin:0 !important; } .pg-home-plan-a-gift.pg-home-full-bleed .pg-plan-a-gift-icon { display:flex !important; width:auto !important; min-width:0 !important; align-items:center !important; justify-content:center !important; margin:0 !important; padding:0 !important; } .pg-home-plan-a-gift.pg-home-full-bleed .pg-plan-a-gift-content { display:grid !important; grid-template-columns:minmax(0, 65ch) auto !important; gap:var(--space-6) !important; align-items:center !important; min-width:0 !important; } .pg-home-plan-a-gift.pg-home-full-bleed .pg-plan-a-gift-content > p { max-width:none !important; margin:0 !important; } .pg-home-plan-a-gift.pg-home-full-bleed .pg-plan-a-gift-content > p:last-child { justify-self:start !important; } .pg-home-plan-a-gift.pg-home-full-bleed .pg-plan-a-gift-content a { white-space:nowrap !important; } @media (max-width:700px) { #vgbody.pg-page-gift-index > h1:not(.pg-sr-only) { width:calc(100% - (2 * var(--page-gutter-mobile))) !important; } .site-main > .pg-waynesburg-full-bleed { .pg-home-full-bleed { padding-top:var(--home-section-pad-mobile) !important; padding-bottom:var(--home-section-pad-mobile) !important; } .site-main > .pg-waynesburg-full-bleed > .pg-container { .pg-home-full-bleed > .pg-container { width:calc(100% - (2 * var(--page-gutter-mobile))) !important; padding-right:var(--page-gutter-mobile) !important; padding-left:var(--page-gutter-mobile) !important; } .pg-home-plan-a-gift.pg-home-full-bleed .pg-section-title, .pg-home-plan-a-gift.pg-home-full-bleed .pg-section-title.pg-text-align-center { margin-left:0 !important; } .pg-home-plan-a-gift.pg-home-full-bleed .pg-plan-a-gift-layout, .pg-home-plan-a-gift.pg-home-full-bleed .pg-plan-a-gift-content { grid-template-columns:minmax(0, 1fr) !important; } .pg-home-plan-a-gift.pg-home-full-bleed .pg-plan-a-gift-icon { justify-content:flex-start !important; } .pg-home-plan-a-gift.pg-home-full-bleed .pg-plan-a-gift-content a { white-space:normal !important; } }