/* ============================================================================ THE INNER CITY NETWORK — Brand theme, design tokens & logo colour system ---------------------------------------------------------------------------- HOW LOGO COLOUR WORKS (single source of truth): 1. Each brand colour is a token below (--ic-navy, --ic-emerald, …). 2. `--logo-color` is the ONE setting that drives the logo everywhere. 3. Every renders an SVG that paints with `currentColor`, and the rule `ic-logo { color: var(--logo-color); }` binds that to the token. CHANGE THE SITE-WIDE LOGO COLOUR — pick ONE: • Set an attribute on the root element: • …or override the token in one place: :root { --logo-color: var(--ic-gold); } ADD A NEW COLOUR LATER (no change to the logo asset itself): 1. Add a token: --ic-: #RRGGBB; 2. Add a theme mapping: [data-theme=""] { --logo-color: var(--ic-); } The logo asset (web/assets/logo/ic-logo.svg and the inline markup in web/assets/js/ic-logo.js) is APPROVED and is never modified by this file. ========================================================================== */ :root { /* --- Brand colour tokens (add more here in the future) --- */ --ic-navy: #17255a; /* Primary recommendation */ --ic-emerald: #0b7a4b; --ic-burgundy: #6e1423; --ic-wine: #7a1e2e; --ic-recognition-navy: #1c2a5d; /* founding recognition section background */ --ic-teal: #0e7c7b; --ic-gold: #b8860b; --ic-black: #141414; /* --- The single setting that controls the logo everywhere --- */ --logo-color: var(--ic-navy); /* --- Soft brand tints (legacy light washes — keep for rare pale uses) --- */ --tint-navy: #dde4f5; --tint-emerald: #d4ebdf; --tint-burgundy: #f0dce1; --tint-teal: #d0e9e8; --tint-gold: #f1e4b8; /* --- Homepage artwork palette — used across the whole site --- */ --art-wine: #601d2e; --art-blue: #1b485f; --art-gold: #c99540; /* homepage + business directory band */ --art-teal: #5a8276; --art-cream: #e3cda6; /* homepage + church directory band */ --art-terra: #b06a2e; --art-leaf: #4f6f55; --art-steel: #506e7e; /* --- Neutral UI palette (bright, airy) --- */ --page-bg: #ffffff; --surface: #ffffff; --surface-2: #dde4f5; /* default tinted section background (navy) */ --text: #1f2430; --text-muted: #5b6472; --border: #e6e8ef; --border-strong: #d5d9e4; --nav-link: #333a47; --nav-link-hover: var(--logo-color); /* --- Semantic colours (Design System §24.4) --- */ --success: #0b7a4b; --warning: #b8860b; --error: #b3261e; --info: #0e7c7b; /* --- Spacing scale --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* --- Radius, shadow, layout tokens --- */ --radius-sm: 8px; --radius: 14px; --radius-lg: 20px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(23, 37, 90, 0.06), 0 1px 3px rgba(23, 37, 90, 0.05); --shadow: 0 6px 20px rgba(23, 37, 90, 0.08); --shadow-lg: 0 18px 48px rgba(23, 37, 90, 0.14); --container: 1200px; --header-h: 76px; /* --- Typography --- */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-serif: Georgia, "Times New Roman", "Iowan Old Style", serif; } /* --- Named theme variations: each maps the single --logo-color token --- */ [data-theme="navy"] { --logo-color: var(--ic-navy); } [data-theme="emerald"] { --logo-color: var(--ic-emerald); } [data-theme="burgundy"] { --logo-color: var(--ic-burgundy); } [data-theme="teal"] { --logo-color: var(--ic-teal); } [data-theme="gold"] { --logo-color: var(--ic-gold); } [data-theme="black"] { --logo-color: var(--ic-black); } /* ============================================================================ LOGO COMPONENT (approved — do not modify the artwork) ========================================================================== */ ic-logo { display: inline-flex; color: var(--logo-color); line-height: 0; } ic-logo .ic-logo__link { display: inline-flex; color: inherit; /* keep currentColor flowing through the anchor */ text-decoration: none; border-radius: 6px; outline-offset: 4px; } ic-logo .ic-logo__link:focus-visible { outline: 3px solid var(--logo-color); } ic-logo .ic-logo__svg { display: block; height: clamp(38px, 5vw, 56px); width: auto; } /* Footer logo sits on a tinted panel; a slightly smaller mark reads better. */ .site-footer ic-logo .ic-logo__svg { height: 44px; } /* ============================================================================ GLOBAL / RESET ========================================================================== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--page-bg); color: var(--text); font-family: var(--font-sans); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: var(--logo-color); } h1, h2, h3 { line-height: 1.15; color: var(--text); } :focus-visible { outline: 3px solid var(--logo-color); outline-offset: 2px; } /* ============================================================================ LAYOUT UTILITIES / REUSABLE COMPONENTS (Design System §24.6–§24.8) ========================================================================== */ .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); } .section { padding: clamp(48px, 7vh, 96px) 0; } [id] { scroll-margin-top: 110px; } /* offset for the sticky header on anchor jumps */ .page-hub [id] { scroll-margin-top: calc(var(--site-header-offset, 236px) + 8px); } /* Homepage Founding Member blue band: land flush under the fixed header (no white strip, text fully visible). */ .page-home { --site-header-offset: 190px; } @media (max-width: 1080px) { .page-home { --site-header-offset: 132px; } } #pricing { scroll-margin-top: var(--site-header-offset, 190px); } .page-hub.has-overlay-header { --site-header-offset: 236px; } @media (max-width: 1080px) { .page-hub.has-overlay-header { --site-header-offset: 210px; } } .section--tight { padding: var(--space-7) 0; } /* Full-strength art colours for tinted sections (homepage rhythm, site-wide) */ .section--tint { background: var(--art-blue); } .section--tint-burgundy { background: var(--art-wine); } .section--tint-black { background: #000; } .section--tint-teal { background: var(--art-teal); } .section--tint-emerald { background: var(--art-leaf); } .section--tint-gold { background: var(--art-gold); } .section--art-cream { background: var(--art-cream); } .section--art-gold { background: var(--art-gold); } /* Directory category bands — photo behind see-through blocks */ .section--dir-biz-cats, .section--dir-church-denoms { position: relative; isolation: isolate; overflow: hidden; margin-top: 0; color: #1a1a1a; /* Frosted blocks stay readable over a bright photo */ --band-card-bg: rgba(18, 12, 8, 0.4); --band-card-bg-hover: rgba(18, 12, 8, 0.52); --band-card-border: rgba(255, 255, 255, 0.5); --band-card-border-hover: rgba(255, 255, 255, 0.72); --band-card-ink: #fff; --band-card-ink-soft: rgba(255, 255, 255, 0.92); } .section--dir-biz-cats { background-color: #b8893a; background-image: linear-gradient(180deg, rgba(20, 14, 8, 0.18) 0%, rgba(20, 14, 8, 0.22) 100%), url("../media/img/dir-biz-category-bg.png?v=4"); background-size: cover; background-position: center; background-repeat: no-repeat; } .section--dir-church-denoms { background-color: #d4c09a; background-image: linear-gradient(180deg, rgba(20, 14, 8, 0.16) 0%, rgba(20, 14, 8, 0.2) 100%), url("../media/img/dir-church-denom-bg.png?v=4"); background-size: cover; background-position: center; background-repeat: no-repeat; } .section--dir-biz-cats .eyebrow, .section--dir-biz-cats .section-title, .section--dir-church-denoms .eyebrow, .section--dir-church-denoms .section-title { color: #ffffff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); } .section--dir-biz-cats .section-sub, .section--dir-church-denoms .section-sub { color: rgba(255, 255, 255, 0.95); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); } .section--dir-biz-cats .denom-status, .section--dir-church-denoms .denom-status { color: #1a2744; background: rgba(255, 255, 255, 0.95); border-color: rgba(255, 255, 255, 0.55); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); } .section--dir-biz-cats .cat-card, .section--dir-church-denoms .cat-card { background: var(--band-card-bg); border-color: var(--band-card-border); box-shadow: none; color: var(--band-card-ink); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .section--dir-biz-cats .cat-card:hover, .section--dir-biz-cats .cat-card:focus-visible, .section--dir-church-denoms .cat-card:hover, .section--dir-church-denoms .cat-card:focus-visible { background: var(--band-card-bg-hover); border-color: var(--band-card-border-hover); } .section--dir-biz-cats .cat-card, .section--dir-biz-cats .cat-card b, .section--dir-biz-cats .cat-card span, .section--dir-church-denoms .cat-card, .section--dir-church-denoms .cat-card b, .section--dir-church-denoms .cat-card span { color: var(--band-card-ink); } .section--dir-biz-cats .cat-card span, .section--dir-church-denoms .cat-card span { color: var(--band-card-ink-soft); } /* Match listing-row icon tiles (church = gold/white, business = cream/black) */ .section--dir-biz-cats .cat-card__icon { background: #e3cda6 !important; color: #1a1a1a !important; border: 1px solid rgba(122, 90, 24, 0.18); } .section--dir-biz-cats .cat-card__icon svg { stroke: #1a1a1a; color: #1a1a1a; } .section--dir-biz-cats .cat-card__icon img { filter: brightness(0) saturate(100%); opacity: 0.92; } .section--dir-church-denoms .cat-card__icon { background: #c99540 !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.22); } .section--dir-church-denoms .cat-card__icon svg { stroke: #ffffff; color: #ffffff; } .section--dir-church-denoms .cat-card__icon img { filter: brightness(0) invert(1); opacity: 0.96; } .section--dir-biz-cats .biz-cat-card.is-active, .section--dir-church-denoms .denom-card.is-active { background: rgba(255, 255, 255, 0.92); border-color: rgba(255, 255, 255, 0.95); color: #1a1a1a; } .section--dir-biz-cats .biz-cat-card.is-active b, .section--dir-biz-cats .biz-cat-card.is-active span, .section--dir-church-denoms .denom-card.is-active b, .section--dir-church-denoms .denom-card.is-active span { color: #1a1a1a; } /* Listings stay on a clean white stage */ .section--dir-listings { background: #ffffff; color: var(--text); } .section--art-terra { background: var(--art-terra); } .section--art-leaf { background: var(--art-leaf); } .section--art-steel { background: var(--art-steel); } .hub-sale.section--art-cream { background: var(--art-cream); } .section--tint .eyebrow, .section--tint .section-title, .section--tint .section-sub, .section--tint .gov-office-group__title, .section--tint-burgundy .eyebrow, .section--tint-burgundy .section-title, .section--tint-burgundy .section-sub, .section--tint-burgundy .gov-office-group__title, .section--tint-black .eyebrow, .section--tint-black .section-title, .section--tint-black .section-sub, .section--tint-teal .eyebrow, .section--tint-teal .section-title, .section--tint-teal .section-sub, .section--tint-teal .gov-office-group__title, .section--tint-emerald .eyebrow, .section--tint-emerald .section-title, .section--tint-emerald .section-sub, .section--tint-emerald .gov-office-group__title, .section--art-terra .eyebrow, .section--art-terra .section-title, .section--art-terra .section-sub, .section--art-leaf .eyebrow, .section--art-leaf .section-title, .section--art-leaf .section-sub, .section--art-steel .eyebrow, .section--art-steel .section-title, .section--art-steel .section-sub { color: #fff; } .section--tint .section-sub, .section--tint .gov-office-group__hint, .section--tint-burgundy .section-sub, .section--tint-burgundy .gov-office-group__hint, .section--tint-black .section-sub, .section--tint-teal .section-sub, .section--tint-teal .gov-office-group__hint, .section--tint-emerald .section-sub, .section--tint-emerald .gov-office-group__hint, .section--art-terra .section-sub, .section--art-leaf .section-sub, .section--art-steel .section-sub { color: rgba(255, 255, 255, 0.88); } .section--tint .link-all, .section--tint .section-sub a, .section--tint-burgundy .link-all, .section--tint-burgundy .section-sub a, .section--tint-teal .link-all, .section--tint-teal .section-sub a, .section--tint-emerald .link-all, .section--tint-emerald .section-sub a, .section--art-terra .link-all, .section--art-terra .section-sub a, .section--art-leaf .link-all, .section--art-leaf .section-sub a, .section--art-steel .link-all, .section--art-steel .section-sub a { color: #fff; } .section--tint-gold .eyebrow, .section--tint-gold .section-title, .section--art-gold .eyebrow, .section--art-gold .section-title, .section--art-cream .eyebrow, .section--art-cream .section-title { color: #1a1a1a; } .section--tint-gold .section-sub, .section--art-gold .section-sub, .section--art-cream .section-sub { color: rgba(26, 26, 26, 0.82); } .section--tint .btn:not(.btn--solid), .section--tint-burgundy .btn:not(.btn--solid), .section--tint-teal .btn:not(.btn--solid), .section--tint-emerald .btn:not(.btn--solid), .section--art-terra .btn:not(.btn--solid), .section--art-leaf .btn:not(.btn--solid), .section--art-steel .btn:not(.btn--solid) { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.45); color: #fff; } .section--tint .btn:not(.btn--solid):hover, .section--tint-burgundy .btn:not(.btn--solid):hover, .section--tint-teal .btn:not(.btn--solid):hover, .section--tint-emerald .btn:not(.btn--solid):hover, .section--art-terra .btn:not(.btn--solid):hover, .section--art-leaf .btn:not(.btn--solid):hover, .section--art-steel .btn:not(.btn--solid):hover { background: #fff; color: var(--art-blue); } .section--tint-red { background: #d64545; } .section--tint-red .eyebrow, .section--tint-red .section-title, .section--tint-red .section-sub, .section--tint-red .gov-office-group__title, .section--tint-red .gov-section-count, .section--tint-red .denom-status { color: #fff; } /* Berkeley / Dorchester county bands — distinct from Charleston's burgundy */ .section--tint-pine { background: #2f5d3f; } .section--tint-indigo { background: #3c3a70; } .section--tint-pine .eyebrow, .section--tint-pine .section-title, .section--tint-pine .section-sub, .section--tint-pine .gov-office-group__title, .section--tint-pine .gov-section-count, .section--tint-indigo .eyebrow, .section--tint-indigo .section-title, .section--tint-indigo .section-sub, .section--tint-indigo .gov-office-group__title, .section--tint-indigo .gov-section-count { color: #fff; } .section--tint-pine .section-sub, .section--tint-indigo .section-sub { color: rgba(255, 255, 255, 0.88); } .section--tint-pine .btn:not(.btn--solid), .section--tint-indigo .btn:not(.btn--solid) { border-color: rgba(255, 255, 255, 0.55); color: #fff; } .section--tint-pine .btn:not(.btn--solid):hover, .section--tint-indigo .btn:not(.btn--solid):hover { background: rgba(255, 255, 255, 0.14); } .section--tint .gov-section-count, .section--tint-burgundy .gov-section-count, .section--tint-teal .gov-section-count, .section--tint-emerald .gov-section-count, .section--tint-pine .gov-section-count, .section--tint-indigo .gov-section-count { color: rgba(255, 255, 255, 0.88); } /* Businesses — moss category band + soft moss listing icons */ .section--biz-moss { background: #596d5a; } /* Events — season chip band (navy) */ .section--ace-moss, section.section.section--ace-moss { background: #192d57 !important; background-color: #192d57 !important; } /* Events — calendar search band (same navy) */ .section--ace-search, section.section.section--ace-search { background: #192d57 !important; background-color: #192d57 !important; } .section--ace-search .ace-filters-note, .section--ace-search .ace-dir-count, .section--ace-search .section-sub, .section--ace-search #ace-visible-count, .section--ace-search #ace-total-count { color: rgba(255, 255, 255, 0.88); } .section--ace-search .dir-empty, .section--ace-search p { color: rgba(255, 255, 255, 0.88); } .section--biz-moss .eyebrow, .section--biz-moss .section-title { color: #fff; } .section--biz-moss .section-sub { color: rgba(255, 255, 255, 0.88); } /* Filter status pill on moss band — same light pill as churches */ .section--biz-moss .denom-status { color: #1a2744; background: rgba(255, 255, 255, 0.95); border-color: rgba(255, 255, 255, 0.55); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); } .page-businesses .dir-row__badge { background: #e3cda6 !important; color: #1a1a1a !important; } .page-businesses .dir-row__badge svg { stroke: #1a1a1a; color: #1a1a1a; } .page-churches .dir-row__badge { background: #c99540 !important; color: #ffffff !important; } .page-churches .dir-row__badge svg { stroke: #ffffff; color: #ffffff; } /* Churches — wine red denomination band (softer than logo red) */ .section--church-red { background: var(--art-wine); } .section--church-red .eyebrow, .section--church-red .section-title { color: #fff; } .section--church-red .section-sub { color: rgba(255, 255, 255, 0.88); } /* Filter status pill sits on the red band — light fill + dark type for contrast */ .section--church-red .denom-status { color: #1a2744; background: rgba(255, 255, 255, 0.95); border-color: rgba(255, 255, 255, 0.55); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); } .section--tint-gold .denom-status, .section--art-gold .denom-status, .section--art-cream .denom-status { color: #1a2744; background: rgba(255, 255, 255, 0.92); border-color: rgba(26, 26, 26, 0.12); box-shadow: 0 4px 14px rgba(26, 26, 26, 0.08); } /* ============================================================ Writing cards on colored bands Lighter tint of the section color + white type (same relationship as Don’t-miss purple boxes) ============================================================ */ .section--tint, .section--tint-burgundy, .section--tint-teal, .section--tint-emerald, .section--tint-gold, .section--tint-red, .section--tint-pine, .section--tint-indigo, .section--art-terra, .section--art-leaf, .section--art-steel, .section--art-gold, .section--biz-moss, .section--church-red, .section--radio-navy, .section--pricing-royal, .section--ace-moss { --band-card-bg: rgba(255, 255, 255, 0.1); --band-card-bg-hover: rgba(255, 255, 255, 0.16); --band-card-border: rgba(255, 255, 255, 0.35); --band-card-border-hover: rgba(255, 255, 255, 0.55); --band-card-ink: #fff; --band-card-ink-soft: rgba(255, 255, 255, 0.88); } /* Cream bands — lighter cream boxes; dark type for contrast */ .section--art-cream, .section--radio-cream, .hub-sale.section--art-cream { --band-card-bg: color-mix(in srgb, #fff 42%, var(--art-cream)); --band-card-bg-hover: color-mix(in srgb, #fff 55%, var(--art-cream)); --band-card-border: rgba(26, 26, 26, 0.14); --band-card-border-hover: rgba(26, 26, 26, 0.24); --band-card-ink: #1a1a1a; --band-card-ink-soft: rgba(26, 26, 26, 0.78); } .section--tint .card, .section--tint .ace-card, .section--tint .ace-feature, .section--tint .ace-quick-link, .section--tint .ce-card, .section--tint .gov-card, .section--tint .cat-card, .section--tint .why-card, .section--tint .voice, .section--tint .hub-guide, .section--tint .election-card, .section--tint .radio-card, .section--tint .price-card, .section--tint-burgundy .card, .section--tint-burgundy .ace-card, .section--tint-burgundy .ace-feature, .section--tint-burgundy .ace-quick-link, .section--tint-burgundy .ce-card, .section--tint-burgundy .gov-card, .section--tint-burgundy .cat-card, .section--tint-burgundy .why-card, .section--tint-burgundy .voice, .section--tint-burgundy .hub-guide, .section--tint-burgundy .election-card, .section--tint-burgundy .radio-card, .section--tint-burgundy .price-card, .section--tint-teal .card, .section--tint-teal .ace-card, .section--tint-teal .ace-feature, .section--tint-teal .ace-quick-link, .section--tint-teal .ce-card, .section--tint-teal .gov-card, .section--tint-teal .cat-card, .section--tint-teal .why-card, .section--tint-teal .voice, .section--tint-teal .hub-guide, .section--tint-teal .election-card, .section--tint-teal .radio-card, .section--tint-teal .price-card, .section--tint-emerald .card, .section--tint-emerald .ace-card, .section--tint-emerald .ace-feature, .section--tint-emerald .ace-quick-link, .section--tint-emerald .ce-card, .section--tint-emerald .gov-card, .section--tint-emerald .cat-card, .section--tint-emerald .why-card, .section--tint-emerald .voice, .section--tint-emerald .hub-guide, .section--tint-emerald .election-card, .section--tint-emerald .radio-card, .section--tint-emerald .price-card, .section--tint-gold .card, .section--tint-gold .ace-card, .section--tint-gold .ace-feature, .section--tint-gold .ace-quick-link, .section--tint-gold .ce-card, .section--tint-gold .gov-card, .section--tint-gold .cat-card, .section--tint-gold .why-card, .section--tint-gold .voice, .section--tint-gold .hub-guide, .section--tint-gold .election-card, .section--tint-gold .radio-card, .section--tint-gold .price-card, .section--tint-red .card, .section--tint-red .ace-card, .section--tint-red .gov-card, .section--tint-pine .card, .section--tint-pine .ace-card, .section--tint-pine .gov-card, .section--tint-indigo .card, .section--tint-indigo .ace-card, .section--tint-indigo .gov-card, .section--art-terra .card, .section--art-terra .hub-guide, .section--art-terra .why-card, .section--art-leaf .card, .section--art-leaf .why-card, .section--art-steel .card, .section--art-gold .card, .section--art-gold .cat-card, .section--art-cream .card, .section--art-cream .hub-guide, .hub-sale.section--art-cream .card, .section--biz-moss .cat-card, .section--church-red .cat-card, .section--radio-navy .radio-card, .section--radio-cream .radio-card, .section--pricing-royal .price-card { background: var(--band-card-bg); border-color: var(--band-card-border); box-shadow: none; color: var(--band-card-ink); } .section--tint .card:hover, .section--tint .card:focus-visible, .section--tint .ace-card:hover, .section--tint .ace-card:focus-visible, .section--tint .ace-feature:hover, .section--tint .ace-feature:focus-visible, .section--tint .ace-quick-link:hover, .section--tint .ace-quick-link:focus-visible, .section--tint .ce-card:hover, .section--tint .ce-card:focus-visible, .section--tint .gov-card:hover, .section--tint .gov-card:focus-visible, .section--tint .cat-card:hover, .section--tint .radio-card:hover, .section--tint .price-card:hover, .section--tint-burgundy .card:hover, .section--tint-burgundy .card:focus-visible, .section--tint-burgundy .ace-card:hover, .section--tint-burgundy .ace-card:focus-visible, .section--tint-burgundy .ace-feature:hover, .section--tint-burgundy .ace-feature:focus-visible, .section--tint-burgundy .ace-quick-link:hover, .section--tint-burgundy .ace-quick-link:focus-visible, .section--tint-burgundy .ce-card:hover, .section--tint-burgundy .ce-card:focus-visible, .section--tint-burgundy .gov-card:hover, .section--tint-burgundy .gov-card:focus-visible, .section--tint-burgundy .cat-card:hover, .section--tint-burgundy .radio-card:hover, .section--tint-burgundy .price-card:hover, .section--tint-teal .card:hover, .section--tint-teal .card:focus-visible, .section--tint-teal .ace-card:hover, .section--tint-teal .ace-card:focus-visible, .section--tint-teal .ace-feature:hover, .section--tint-teal .ace-feature:focus-visible, .section--tint-teal .ace-quick-link:hover, .section--tint-teal .ace-quick-link:focus-visible, .section--tint-teal .ce-card:hover, .section--tint-teal .ce-card:focus-visible, .section--tint-teal .gov-card:hover, .section--tint-teal .gov-card:focus-visible, .section--tint-teal .cat-card:hover, .section--tint-teal .radio-card:hover, .section--tint-teal .price-card:hover, .section--tint-emerald .card:hover, .section--tint-emerald .card:focus-visible, .section--tint-emerald .ace-card:hover, .section--tint-emerald .ace-card:focus-visible, .section--tint-emerald .ace-feature:hover, .section--tint-emerald .ace-feature:focus-visible, .section--tint-emerald .ace-quick-link:hover, .section--tint-emerald .ace-quick-link:focus-visible, .section--tint-emerald .ce-card:hover, .section--tint-emerald .ce-card:focus-visible, .section--tint-emerald .gov-card:hover, .section--tint-emerald .gov-card:focus-visible, .section--tint-emerald .cat-card:hover, .section--tint-emerald .radio-card:hover, .section--tint-emerald .price-card:hover, .section--tint-gold .card:hover, .section--tint-gold .card:focus-visible, .section--tint-gold .ace-card:hover, .section--tint-gold .ace-card:focus-visible, .section--tint-gold .ace-feature:hover, .section--tint-gold .ace-feature:focus-visible, .section--tint-gold .ace-quick-link:hover, .section--tint-gold .ace-quick-link:focus-visible, .section--tint-gold .ce-card:hover, .section--tint-gold .ce-card:focus-visible, .section--tint-gold .gov-card:hover, .section--tint-gold .gov-card:focus-visible, .section--tint-gold .cat-card:hover, .section--tint-gold .why-card:hover, .section--tint-gold .radio-card:hover, .section--tint-gold .price-card:hover, .section--tint-red .gov-card:hover, .section--tint-pine .gov-card:hover, .section--tint-indigo .gov-card:hover, .section--art-terra .card:hover, .section--art-terra .hub-guide:hover, .section--art-leaf .card:hover, .section--art-gold .card:hover, .section--art-cream .card:hover, .hub-sale.section--art-cream .card:hover, .section--biz-moss .cat-card:hover, .section--church-red .cat-card:hover, .section--radio-navy .radio-card:hover, .section--radio-cream .radio-card:hover, .section--pricing-royal .price-card:hover { background: var(--band-card-bg-hover); border-color: var(--band-card-border-hover); box-shadow: none; } /* Force writing inside band cards to match the purple-box pattern */ .section--tint .card h3, .section--tint .card p, .section--tint .card .note__foot, .section--tint .card .event__body h3, .section--tint .card .event__body p, .section--tint .ace-card, .section--tint .ace-card h3, .section--tint .ace-card__when, .section--tint .ace-card__meta, .section--tint .ace-card__desc, .section--tint .ace-card__cta, .section--tint .ace-feature h3, .section--tint .ace-feature p, .section--tint .ace-feature__when, .section--tint .ace-quick-link, .section--tint .ace-quick-link__label, .section--tint .ace-quick-link strong, .section--tint .ace-quick-link span, .section--tint .gov-card, .section--tint .gov-card h3, .section--tint .gov-card p, .section--tint .gov-card__office, .section--tint .gov-card__district, .section--tint .gov-card__meta, .section--tint .ce-card, .section--tint .ce-card h3, .section--tint .ce-card p, .section--tint .cat-card, .section--tint .cat-card b, .section--tint .cat-card span, .section--tint .why-card, .section--tint .why-card h3, .section--tint .why-card p, .section--tint .why-card ul, .section--tint .voice, .section--tint .voice p, .section--tint .voice__who b, .section--tint .voice__who span, .section--tint .hub-guide, .section--tint .hub-guide h3, .section--tint .hub-guide li, .section--tint .election-card, .section--tint .election-card h3, .section--tint .election-card > p, .section--tint .election-card__when, .section--tint .election-card__list, .section--tint .election-card__list b, .section--tint .radio-card, .section--tint .radio-card__name, .section--tint .radio-card__format, .section--tint .radio-card__owner, .section--tint .price-card, .section--tint .price-card h3, .section--tint .price-card .price, .section--tint .price-card .price small, .section--tint .price-card .price-sub, .section--tint .price-card ul, .section--tint .price-card .price-note, .section--tint-burgundy .card h3, .section--tint-burgundy .card p, .section--tint-burgundy .card .note__foot, .section--tint-burgundy .card .event__body h3, .section--tint-burgundy .card .event__body p, .section--tint-burgundy .ace-card, .section--tint-burgundy .ace-card h3, .section--tint-burgundy .ace-card__when, .section--tint-burgundy .ace-card__meta, .section--tint-burgundy .ace-card__desc, .section--tint-burgundy .ace-card__cta, .section--tint-burgundy .ace-feature h3, .section--tint-burgundy .ace-feature p, .section--tint-burgundy .ace-feature__when, .section--tint-burgundy .ace-quick-link, .section--tint-burgundy .ace-quick-link__label, .section--tint-burgundy .ace-quick-link strong, .section--tint-burgundy .ace-quick-link span, .section--tint-burgundy .gov-card, .section--tint-burgundy .gov-card h3, .section--tint-burgundy .gov-card p, .section--tint-burgundy .gov-card__office, .section--tint-burgundy .gov-card__district, .section--tint-burgundy .gov-card__meta, .section--tint-burgundy .ce-card, .section--tint-burgundy .ce-card h3, .section--tint-burgundy .ce-card p, .section--tint-burgundy .cat-card, .section--tint-burgundy .cat-card b, .section--tint-burgundy .cat-card span, .section--tint-burgundy .why-card, .section--tint-burgundy .why-card h3, .section--tint-burgundy .why-card p, .section--tint-burgundy .why-card ul, .section--tint-burgundy .voice, .section--tint-burgundy .voice p, .section--tint-burgundy .voice__who b, .section--tint-burgundy .voice__who span, .section--tint-burgundy .hub-guide, .section--tint-burgundy .hub-guide h3, .section--tint-burgundy .hub-guide li, .section--tint-burgundy .election-card, .section--tint-burgundy .election-card h3, .section--tint-burgundy .election-card > p, .section--tint-burgundy .election-card__when, .section--tint-burgundy .election-card__list, .section--tint-burgundy .election-card__list b, .section--tint-teal .card h3, .section--tint-teal .card p, .section--tint-teal .card .note__foot, .section--tint-teal .card .event__body h3, .section--tint-teal .card .event__body p, .section--tint-teal .ace-card, .section--tint-teal .ace-card h3, .section--tint-teal .ace-card__when, .section--tint-teal .ace-card__meta, .section--tint-teal .ace-card__desc, .section--tint-teal .ace-card__cta, .section--tint-teal .ace-feature h3, .section--tint-teal .ace-feature p, .section--tint-teal .ace-feature__when, .section--tint-teal .ace-quick-link, .section--tint-teal .ace-quick-link__label, .section--tint-teal .ace-quick-link strong, .section--tint-teal .ace-quick-link span, .section--tint-teal .gov-card, .section--tint-teal .gov-card h3, .section--tint-teal .gov-card p, .section--tint-teal .gov-card__office, .section--tint-teal .gov-card__district, .section--tint-teal .gov-card__meta, .section--tint-teal .ce-card, .section--tint-teal .ce-card h3, .section--tint-teal .ce-card p, .section--tint-emerald .card h3, .section--tint-emerald .card p, .section--tint-emerald .card .note__foot, .section--tint-emerald .ace-card, .section--tint-emerald .ace-card h3, .section--tint-emerald .ace-card__when, .section--tint-emerald .ace-card__meta, .section--tint-emerald .ace-card__desc, .section--tint-emerald .ace-card__cta, .section--tint-emerald .ace-feature h3, .section--tint-emerald .ace-feature p, .section--tint-emerald .ace-feature__when, .section--tint-emerald .gov-card, .section--tint-emerald .gov-card h3, .section--tint-emerald .gov-card p, .section--tint-emerald .gov-card__office, .section--tint-emerald .gov-card__district, .section--tint-emerald .gov-card__meta, .section--tint-gold .card h3, .section--tint-gold .card p, .section--tint-gold .card .note__foot, .section--tint-gold .ace-card, .section--tint-gold .ace-card h3, .section--tint-gold .ace-card__when, .section--tint-gold .ace-card__meta, .section--tint-gold .ace-card__desc, .section--tint-gold .ace-card__cta, .section--tint-gold .ace-feature h3, .section--tint-gold .ace-feature p, .section--tint-gold .ace-feature__when, .section--tint-gold .ce-card, .section--tint-gold .ce-card h3, .section--tint-gold .ce-card p, .section--tint-gold .why-card, .section--tint-gold .why-card h3, .section--tint-gold .why-card p, .section--tint-gold .why-card ul, .section--tint-gold .election-card, .section--tint-gold .election-card h3, .section--tint-gold .election-card > p, .section--tint-gold .election-card__when, .section--tint-gold .election-card__list, .section--tint-gold .election-card__list b, .section--tint-red .gov-card, .section--tint-red .gov-card h3, .section--tint-red .gov-card p, .section--tint-red .gov-card__office, .section--tint-red .gov-card__district, .section--tint-red .gov-card__meta, .section--tint-pine .gov-card, .section--tint-pine .gov-card h3, .section--tint-pine .gov-card p, .section--tint-pine .gov-card__office, .section--tint-pine .gov-card__district, .section--tint-pine .gov-card__meta, .section--tint-indigo .gov-card, .section--tint-indigo .gov-card h3, .section--tint-indigo .gov-card p, .section--tint-indigo .gov-card__office, .section--tint-indigo .gov-card__district, .section--tint-indigo .gov-card__meta, .section--art-terra .card h3, .section--art-terra .card p, .section--art-terra .hub-guide, .section--art-terra .hub-guide h3, .section--art-terra .hub-guide li, .section--art-leaf .card h3, .section--art-leaf .card p, .section--art-gold .card h3, .section--art-gold .card p, .section--art-cream .card h3, .section--art-cream .card p, .hub-sale.section--art-cream .card h3, .hub-sale.section--art-cream .card p, .section--biz-moss .cat-card, .section--biz-moss .cat-card b, .section--biz-moss .cat-card span, .section--church-red .cat-card, .section--church-red .cat-card b, .section--church-red .cat-card span, .section--radio-navy .radio-card, .section--radio-navy .radio-card__name, .section--radio-navy .radio-card__format, .section--radio-navy .radio-card__owner, .section--radio-navy .radio-card__body, .section--radio-navy .radio-card__calls, .section--pricing-royal .price-card, .section--pricing-royal .price-card h3, .section--pricing-royal .price-card .price, .section--pricing-royal .price-card .price small, .section--pricing-royal .price-card .price-sub, .section--pricing-royal .price-card ul, .section--pricing-royal .price-card .price-note { color: var(--band-card-ink); } .section--tint .card p, .section--tint .card .note__foot, .section--tint .card .event__body p, .section--tint .ace-card__meta, .section--tint .ace-card__desc, .section--tint .ace-feature p, .section--tint .ace-quick-link span:last-child, .section--tint .gov-card p, .section--tint .gov-card__office, .section--tint .gov-card__district, .section--tint .gov-card__meta, .section--tint .ce-card p, .section--tint .cat-card span, .section--tint .why-card p, .section--tint .why-card ul, .section--tint .voice p, .section--tint .voice__who span, .section--tint .hub-guide li, .section--tint .election-card > p, .section--tint .election-card__list, .section--tint .radio-card__format, .section--tint .radio-card__owner, .section--tint .price-card .price small, .section--tint .price-card .price-sub, .section--tint .price-card ul, .section--tint .price-card .price-note, .section--tint-burgundy .card p, .section--tint-burgundy .card .note__foot, .section--tint-burgundy .card .event__body p, .section--tint-burgundy .ace-card__meta, .section--tint-burgundy .ace-card__desc, .section--tint-burgundy .ace-feature p, .section--tint-burgundy .ace-quick-link span:last-child, .section--tint-burgundy .gov-card p, .section--tint-burgundy .gov-card__office, .section--tint-burgundy .gov-card__district, .section--tint-burgundy .gov-card__meta, .section--tint-burgundy .ce-card p, .section--tint-burgundy .cat-card span, .section--tint-burgundy .why-card p, .section--tint-burgundy .why-card ul, .section--tint-burgundy .voice p, .section--tint-burgundy .voice__who span, .section--tint-burgundy .hub-guide li, .section--tint-burgundy .election-card > p, .section--tint-burgundy .election-card__list, .section--tint-teal .card p, .section--tint-teal .card .note__foot, .section--tint-teal .ace-card__meta, .section--tint-teal .ace-card__desc, .section--tint-teal .ace-feature p, .section--tint-teal .gov-card p, .section--tint-teal .gov-card__office, .section--tint-teal .gov-card__district, .section--tint-teal .gov-card__meta, .section--tint-teal .ce-card p, .section--tint-emerald .card p, .section--tint-emerald .ace-card__meta, .section--tint-emerald .ace-card__desc, .section--tint-emerald .gov-card p, .section--tint-emerald .gov-card__office, .section--tint-emerald .gov-card__district, .section--tint-emerald .gov-card__meta, .section--tint-gold .card p, .section--tint-gold .ace-card__meta, .section--tint-gold .ace-card__desc, .section--tint-gold .ce-card p, .section--tint-gold .why-card p, .section--tint-gold .why-card ul, .section--tint-gold .election-card > p, .section--tint-gold .election-card__list, .section--tint-red .gov-card p, .section--tint-red .gov-card__office, .section--tint-red .gov-card__district, .section--tint-red .gov-card__meta, .section--tint-pine .gov-card p, .section--tint-pine .gov-card__office, .section--tint-pine .gov-card__district, .section--tint-pine .gov-card__meta, .section--tint-indigo .gov-card p, .section--tint-indigo .gov-card__office, .section--tint-indigo .gov-card__district, .section--tint-indigo .gov-card__meta, .section--art-terra .card p, .section--art-terra .hub-guide li, .section--art-leaf .card p, .section--art-gold .card p, .section--art-cream .card p, .hub-sale.section--art-cream .card p, .section--biz-moss .cat-card span, .section--church-red .cat-card span, .section--radio-navy .radio-card__format, .section--radio-navy .radio-card__owner, .section--pricing-royal .price-card .price small, .section--pricing-royal .price-card .price-sub, .section--pricing-royal .price-card ul, .section--pricing-royal .price-card .price-note { color: var(--band-card-ink-soft); } /* Business category icons — stroke matches the moss section, keep pastel tile fills */ .section--biz-moss .cat-card__icon { color: #596d5a; } .section--biz-moss .cat-card__icon svg { stroke: #596d5a; color: #596d5a; } /* Soften event date cells on tinted bands so they sit in the lighter box */ .section--tint .event__date .d, .section--tint-burgundy .event__date .d, .section--tint-teal .event__date .d, .section--tint-emerald .event__date .d, .section--tint-gold .event__date .d { color: var(--band-card-ink); } .section--pricing-royal .price-card ul li::before, .section--pricing-royal .price-card.price-card--featured h3, .section--pricing-royal .price-card.price-card--featured .price, .section--pricing-royal .price-card.price-card--free .price, .section--pricing-royal .price-card.price-card--free ul li::before { color: var(--band-card-ink); } .section--radio-navy .radio-card__body { background: transparent; } /* Chips / tags — only on dark translucent cards (not white season banners) */ .section--tint-burgundy .ace-quick-link ~ * .chip, .section--tint:not(.ace-season-block) .ace-card__tags .chip { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.35); color: #fff; } /* Season event banners: restore original white writing area under the artwork (all season colors — keeps posters readable against a clean white footer). */ .ace-season-block .ace-card, .ace-season-block .ace-feature, .section--tint .ace-card, .section--tint-burgundy .ace-card, .section--tint-teal .ace-card, .section--tint-emerald .ace-card, .section--tint-gold .ace-card, .section--tint .ace-feature, .section--tint-burgundy .ace-feature, .section--tint-teal .ace-feature, .section--tint-emerald .ace-feature, .section--tint-gold .ace-feature, .section--tint-gold .ce-card { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-sm); color: inherit; } .ace-season-block .ace-card:hover, .ace-season-block .ace-card:focus-visible, .ace-season-block .ace-feature:hover, .ace-season-block .ace-feature:focus-visible, .section--tint .ace-card:hover, .section--tint .ace-card:focus-visible, .section--tint-burgundy .ace-card:hover, .section--tint-burgundy .ace-card:focus-visible, .section--tint-teal .ace-card:hover, .section--tint-teal .ace-card:focus-visible, .section--tint-emerald .ace-card:hover, .section--tint-emerald .ace-card:focus-visible, .section--tint-gold .ace-card:hover, .section--tint-gold .ace-card:focus-visible { background: var(--surface); border-color: color-mix(in srgb, var(--logo-color) 40%, var(--border)); box-shadow: var(--shadow); } .ace-season-block .ace-card h3, .section--tint .ace-card h3, .section--tint-burgundy .ace-card h3, .section--tint-teal .ace-card h3, .section--tint-emerald .ace-card h3, .section--tint-gold .ace-card h3, .section--tint .ace-feature h3, .section--tint-burgundy .ace-feature h3, .section--tint-teal .ace-feature h3, .section--tint-emerald .ace-feature h3, .section--tint-gold .ace-feature h3, .section--tint-gold .ce-card h3 { color: var(--ic-navy); } .ace-season-block .ace-card__when, .section--tint .ace-card__when, .section--tint-burgundy .ace-card__when, .section--tint-teal .ace-card__when, .section--tint-emerald .ace-card__when, .section--tint-gold .ace-card__when, .section--tint .ace-feature__when, .section--tint-burgundy .ace-feature__when, .section--tint-teal .ace-feature__when, .section--tint-emerald .ace-feature__when, .section--tint-gold .ace-feature__when { color: var(--ic-gold); } .ace-season-block .ace-card__meta, .ace-season-block .ace-card__desc, .section--tint .ace-card__meta, .section--tint .ace-card__desc, .section--tint-burgundy .ace-card__meta, .section--tint-burgundy .ace-card__desc, .section--tint-teal .ace-card__meta, .section--tint-teal .ace-card__desc, .section--tint-emerald .ace-card__meta, .section--tint-emerald .ace-card__desc, .section--tint-gold .ace-card__meta, .section--tint-gold .ace-card__desc, .section--tint .ace-feature p, .section--tint-burgundy .ace-feature p, .section--tint-teal .ace-feature p, .section--tint-emerald .ace-feature p, .section--tint-gold .ace-feature p, .section--tint-gold .ce-card p { color: var(--text-muted); } .ace-season-block .ace-card__cta, .section--tint .ace-card__cta, .section--tint-burgundy .ace-card__cta, .section--tint-teal .ace-card__cta, .section--tint-emerald .ace-card__cta, .section--tint-gold .ace-card__cta { color: var(--logo-color); } .ace-season-block .ace-card__tags .chip, .section--tint .ace-card__tags .chip, .section--tint-burgundy .ace-card__tags .chip, .section--tint-teal .ace-card__tags .chip, .section--tint-emerald .ace-card__tags .chip, .section--tint-gold .ace-card__tags .chip { background: color-mix(in srgb, var(--ic-navy) 8%, #fff); border-color: var(--border); color: var(--text); } /* Homepage kept these tokens locally — now inherit from :root */ .page-home .newsletter.section--art-steel h2, .page-home .newsletter.section--art-steel .eyebrow { color: #fff; } .page-home .newsletter.section--art-steel p, .page-home .newsletter.section--art-steel .newsletter__note { color: rgba(255, 255, 255, 0.88); } .page-home .newsletter.section--home-finale { position: relative; isolation: isolate; overflow: hidden; background-color: #0a1630; background-image: linear-gradient(180deg, rgba(4, 12, 35, 0.42) 0%, rgba(4, 12, 35, 0.28) 45%, rgba(4, 12, 35, 0.48) 100%), url("../media/img/hero.jpg?v=3"); background-position: center center; background-size: cover; background-repeat: no-repeat; } .page-home .newsletter.section--home-finale .newsletter__card { background: rgba(255, 255, 255, 0.96); border-color: rgba(23, 37, 90, 0.12); box-shadow: 0 16px 40px rgba(4, 12, 35, 0.28); } .page-home .newsletter.section--home-finale h2 { color: #1a1a1a; } .page-home .newsletter.section--home-finale p, .page-home .newsletter.section--home-finale .newsletter__note { color: var(--text-muted); } /* Soft rose / green directory bands — now full art colours like the homepage */ .section--tint-soft-rose { background: var(--art-cream); } .section--tint-soft-rose .eyebrow, .section--tint-soft-rose .section-title, .section--tint-soft-rose .section-sub, .section--tint-soft-rose .denom-status { color: #1a1a1a; } .section--tint-soft-rose .section-sub, .section--tint-soft-rose .denom-status { color: rgba(26, 26, 26, 0.82); } .section--tint-soft-rose .eyebrow { color: var(--art-wine); } .section--tint-green { background: var(--art-leaf); } .section--tint-green .eyebrow, .section--tint-green .section-title, .section--tint-green .section-sub, .section--tint-green .denom-status { color: #fff; } .section--tint-green .section-sub, .section--tint-green .denom-status { color: rgba(255, 255, 255, 0.88); } .section--tint-green .eyebrow { color: rgba(255, 255, 255, 0.9); } .gov-find-section { background: var(--art-cream); /* Nudge Find My Representative copy up slightly — band height stays the same */ padding-top: clamp(36px, 5vh, 64px); } .gov-find-section .eyebrow, .gov-find-section .section-title { color: #1a1a1a; } .gov-find-section .section-sub { color: rgba(26, 26, 26, 0.82); } .gov-find-section .gov-find-form.card { background: #fff; border-color: color-mix(in srgb, var(--art-blue) 18%, transparent); box-shadow: 0 10px 28px rgba(23, 37, 90, 0.1); } .gov-find-section .gov-find-form.card:hover { transform: none; box-shadow: 0 10px 28px rgba(23, 37, 90, 0.1); border-color: color-mix(in srgb, var(--art-blue) 18%, transparent); } .gov-email-btn, .gov-email-btn.btn--solid { background: #0a1424; border-color: #0a1424; color: #fff; } .gov-email-btn:hover, .gov-email-btn.btn--solid:hover { background: #525a7a; border-color: #525a7a; color: #fff; filter: none; } .section--brand { background: linear-gradient(135deg, var(--ic-navy), #223a86); color: #fff; } .page-home .section--brand { background: #ed1c24; margin-top: 0; } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); } .section-head__titles { max-width: 720px; } .eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--logo-color); margin: 0 0 var(--space-2); } .section-title { font-family: var(--font-serif); font-size: clamp(26px, 3.4vw, 36px); margin: 0; letter-spacing: -0.01em; } .section-sub { color: var(--text-muted); font-size: 16px; margin: var(--space-2) 0 0; } .link-all { flex: none; font-weight: 700; font-size: 15px; text-decoration: none; color: var(--logo-color); white-space: nowrap; } .link-all:hover { text-decoration: underline; } .link-all::after { content: " \2192"; } /* --- Buttons --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 10px 18px; border-radius: var(--radius-sm); font-weight: 700; font-size: 15px; line-height: 1; text-decoration: none; border: 1.5px solid var(--logo-color); color: var(--logo-color); background: transparent; white-space: nowrap; cursor: pointer; transition: transform 0.06s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .btn:hover { box-shadow: var(--shadow-sm); } .btn:active { transform: translateY(1px); } .btn--solid { background: var(--logo-color); color: #fff; } .btn--solid:hover { filter: brightness(1.08); } .btn--logo-red, .btn--logo-red.btn--solid { background: #ed1c24; border-color: #ed1c24; color: #fff; } .btn--logo-red:hover, .btn--logo-red.btn--solid:hover { background: #d41820; border-color: #d41820; filter: none; } /* Beige / gold — matches the warm nav color at the top of the site */ .btn--beige, .btn--beige.btn--solid { background: var(--ic-gold); border-color: var(--ic-gold); color: #fff; } .btn--beige:hover, .btn--beige.btn--solid:hover { background: #9a7209; border-color: #9a7209; color: #fff; filter: none; } .btn--lg { padding: 15px 26px; font-size: 16px; border-radius: 10px; } .btn--block { width: 100%; } .btn--on-brand { border-color: #fff; color: #fff; } .btn--on-brand.btn--solid { background: #fff; color: var(--ic-navy); } /* --- Icon button (e.g. search) --- */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; } .icon-btn:hover { color: var(--logo-color); border-color: var(--border-strong); } .icon-btn svg { width: 24px; height: 24px; } /* --- Cards --- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease; } a.card, .card--link { text-decoration: none; color: inherit; display: block; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); } /* --- Grids --- */ .grid { display: grid; gap: var(--space-5); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .grid--auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } /* --- Chips / badges --- */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; background: var(--tint-navy); color: var(--ic-navy); } .badge { display: inline-block; padding: 3px 9px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; background: var(--accent-tint, var(--tint-navy)); color: var(--accent, var(--ic-navy)); } /* ============================================================================ SITE HEADER — logo perfectly centred, navigation balanced, sticky ---------------------------------------------------------------------------- The 3-column grid `1fr auto 1fr` mathematically centres the middle (logo) column, so the logo stays centred at every width. ========================================================================== */ .site-header { background: rgba(255, 255, 255, 0.9); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; } .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-5); max-width: 1320px; margin: 0 auto; padding: 12px var(--space-5); } .header-nav { min-width: 0; } .header-nav--left { justify-self: start; } .header-nav--right { justify-self: end; } .brand { justify-self: center; } .header-nav ul { display: flex; align-items: center; gap: var(--space-5); margin: 0; padding: 0; list-style: none; } .header-nav--right ul { gap: var(--space-4); } .header-nav a { color: var(--nav-link); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; } .header-nav a:hover, .header-nav a:focus-visible { color: var(--nav-link-hover); } .header-actions { display: inline-flex; align-items: center; gap: var(--space-3); } /* Mobile menu toggle (hidden on desktop by default; always shown on overlay header) */ .menu-toggle { display: none; appearance: none; border: 1.5px solid var(--border); background: var(--surface); border-radius: var(--radius-sm); width: 48px; height: 48px; align-items: center; justify-content: center; cursor: pointer; color: var(--text); } .menu-toggle svg { width: 24px; height: 24px; } /* Hamburger dropdown panel */ .mobile-menu { display: none; border-top: 1px solid var(--border); background: #ffffff; box-shadow: var(--shadow); } .mobile-menu ul { list-style: none; margin: 0; padding: var(--space-3) var(--space-5) var(--space-4); display: grid; gap: 2px; max-width: 360px; } .mobile-menu a { display: block; padding: 14px 10px; color: var(--nav-link); text-decoration: none; font-weight: 600; font-size: 16px; border-radius: var(--radius-sm); } .mobile-menu a:hover { background: var(--surface-2); color: var(--nav-link-hover); } .mobile-menu.is-open { display: block; } /* Phone accordion: Hub / Events expand only after tap (same top-level menu on every page) */ .mobile-menu__toggle { appearance: none; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 10px; border: 0; background: transparent; color: var(--nav-link); font: inherit; font-weight: 600; font-size: 16px; text-align: left; border-radius: var(--radius-sm); cursor: pointer; } .mobile-menu__toggle::after { content: ""; width: 0.45em; height: 0.45em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.18s ease; flex: none; opacity: 0.65; } .mobile-menu__item--sub.is-open > .mobile-menu__toggle::after { transform: rotate(-135deg); margin-top: 4px; } .mobile-menu__toggle:hover { background: var(--surface-2); color: var(--nav-link-hover); } .mobile-menu__panel { list-style: none; margin: 0 0 4px; padding: 0 0 4px 12px; display: grid; gap: 2px; border-left: 2px solid color-mix(in srgb, var(--ic-navy) 18%, var(--border)); margin-left: 10px; } .mobile-menu__panel[hidden] { display: none !important; } .mobile-menu__panel a { font-size: 15px; font-weight: 500; padding: 11px 10px; color: var(--text-muted); } .mobile-menu__panel a:hover { color: var(--nav-link-hover); } /* ============================================================================ OVERLAY HEADER - WHITE top bar: logo + account actions (fixed size — never shrinks). - MENU sits below that bar (over the blue skyline on the homepage, in WHITE text). - On scroll: logo bar stays put; skyline slides away under the menu; menu then sits on white with dark text. Menu position never moves. - Directory pages use the same markup; menu starts in the solid white state. ========================================================================== */ .site-header--overlay { position: fixed; top: 0; left: 0; right: 0; background: transparent; backdrop-filter: none; border-bottom: none; box-shadow: none; z-index: 100; } /* --- Permanent white top bar (logo + account actions) --- */ .header-bar { background: #ffffff; box-shadow: 0 1px 0 rgba(16, 32, 68, 0.08); /* extra white band between the logo and the blue skyline */ padding-bottom: 18px; overflow: visible; } .header-bar__inner { position: relative; max-width: 1320px; margin: 0 auto; display: flex; align-items: center; justify-content: center; padding: 22px var(--space-5) 18px; min-height: 96px; overflow: visible; } /* Brand lockup: centered The IC mark (no wordmark) */ .site-header--overlay .brand { display: flex; justify-content: center; align-items: center; } .site-header--overlay .brand-lockup { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: #111; line-height: 1; } .site-header--overlay .brand-lockup__img { display: block; width: clamp(140px, 16vw, 200px); height: auto; flex-shrink: 0; margin: 0 auto; } .site-header--overlay .brand-lockup__wordmark { display: none; } .footer-brand .brand-lockup--footer { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: #fff; line-height: 1; } .footer-brand .brand-lockup--footer .brand-lockup__img { display: block; width: 130px; height: auto; flex-shrink: 0; } .footer-brand .brand-lockup--footer .brand-lockup__wordmark { display: none; } /* Account actions pinned to the right of the white bar */ .site-header--overlay .header-actions { position: absolute; top: 50%; right: var(--space-5); transform: translateY(-50%); display: inline-flex; align-items: center; gap: var(--space-4); } .header-signin { color: var(--nav-link); text-decoration: none; font-weight: 600; font-size: 17px; white-space: nowrap; } .header-signin:hover { color: var(--logo-color); } /* "List Your Business" — white with blue trim; light-blue fill on hover */ .btn--hero { background: #fff; color: var(--ic-navy); border: 1.5px solid #6ba8d4; /* darker trim so it stays visible on hover */ font-size: 16px; padding: 12px 20px; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .btn--hero:hover { background: #eaf6fd; border-color: #6ba8d4; box-shadow: var(--shadow); filter: none; } /* Menu toggle pinned to the left of the white bar — matches List Your Business */ .site-header--overlay .menu-toggle { display: inline-flex; position: absolute; left: var(--space-5); top: 50%; transform: translateY(-50%); z-index: 2; background: #fff; border: 1.5px solid #6ba8d4; color: var(--ic-navy); transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .site-header--overlay .menu-toggle:hover { background: #eaf6fd; border-color: #6ba8d4; color: var(--ic-navy); box-shadow: var(--shadow); } /* Header quick-search panel (opens from magnifying glass) */ .header-search { position: relative; } .header-search__panel { position: absolute; top: calc(100% + 10px); right: 0; width: min(360px, calc(100vw - 32px)); background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; z-index: 120; } .header-search__panel[hidden] { display: none; } .header-search__form { display: grid; gap: 10px; } .header-search__label { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); } .header-search__input, .header-search__select { width: 100%; appearance: none; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: #fff; color: var(--text); font: inherit; font-size: 15px; padding: 12px 14px; } .header-search__input:focus, .header-search__select:focus { outline: 2px solid var(--logo-color); outline-offset: 1px; border-color: var(--logo-color); } .header-search__hint { margin: 4px 0 0; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); } .header-search__list { list-style: none; margin: 0; padding: 4px; max-height: 220px; overflow: auto; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: #fff; } .header-search__list li[hidden] { display: none; } .header-search__list button { display: block; width: 100%; text-align: left; appearance: none; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 15px; font-weight: 600; padding: 10px 12px; border-radius: 6px; cursor: pointer; } .header-search__list button:hover, .header-search__list button:focus-visible { background: var(--tint-navy); color: var(--ic-navy); outline: none; } .header-search__empty { margin: 0; padding: 12px; font-size: 14px; color: var(--text-muted); } .header-search__suggest { margin: 0 0 8px; } .header-search__suggest[hidden] { display: none; } .header-search__suggest-list button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; } .header-search__suggest-list strong { font-weight: 700; } .header-search__meta { font-size: 12px; font-weight: 600; color: var(--text-muted); } .dir-row.is-search-focus { border-color: color-mix(in srgb, var(--ic-gold, #b8860b) 65%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ic-gold, #b8860b) 35%, transparent); background: color-mix(in srgb, var(--ic-gold, #b8860b) 10%, #fff); scroll-margin-top: calc(var(--site-header-offset, 236px) + 16px); } .dir-row { scroll-margin-top: calc(var(--site-header-offset, 236px) + 16px); } /* --- Primary menu: over the blue skyline (white text); stays fixed while sky scrolls away --- */ .header-nav-main { background: transparent; transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; border-bottom: 1px solid transparent; } .header-nav-main__inner { max-width: 1320px; margin: 0 auto; display: flex; justify-content: center; /* flush onto the skyline under the white logo bar */ padding: 8px var(--space-5) 14px; } .header-nav-main__inner > ul { display: flex; align-items: center; gap: clamp(20px, 3vw, 42px); margin: 0; padding: 0; list-style: none; } .header-nav-main a { color: #ffffff; text-decoration: none; font-weight: 600; font-size: 16px; white-space: nowrap; /* Soft dark halo — readable white type over bright skyline, sky still shows through */ text-shadow: 0 0 2px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.85), 0 2px 8px rgba(0, 0, 0, 0.55), 0 0 18px rgba(4, 12, 35, 0.45); } .header-nav-main__inner > ul > li > a:hover { color: #ffffff; opacity: 0.88; } /* Events dropdown — hidden until hover/focus/open */ .nav-item--has-sub { position: relative; } .nav-sub__toggle { appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; color: #ffffff; font: inherit; font-weight: 600; font-size: 16px; white-space: nowrap; text-shadow: 0 0 2px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.85), 0 2px 8px rgba(0, 0, 0, 0.55), 0 0 18px rgba(4, 12, 35, 0.45); } .nav-sub__toggle::after { content: ""; display: inline-block; width: 0; height: 0; margin-left: 6px; vertical-align: middle; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0.85; transition: transform 0.2s ease; } .nav-item--has-sub.is-open .nav-sub__toggle::after, .nav-item--has-sub:hover .nav-sub__toggle::after { transform: rotate(180deg); } .header-nav-main .nav-sub { display: none; position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); min-width: 280px; max-height: min(70vh, 560px); overflow-y: auto; margin: 0; padding: 8px; list-style: none; flex-direction: column; align-items: stretch; gap: 2px; background: #fff; border: 1px solid rgba(16, 32, 68, 0.12); border-radius: 12px; box-shadow: 0 12px 28px rgba(8, 16, 40, 0.18); z-index: 80; } .header-nav-main .nav-item--has-sub.is-open > .nav-sub, .header-nav-main .nav-item--has-sub:hover > .nav-sub, .header-nav-main .nav-item--has-sub:focus-within > .nav-sub { display: flex; } .header-nav-main .nav-sub a { display: block; padding: 11px 14px; border-radius: 8px; color: #1a2744 !important; text-shadow: none !important; font-size: 14px !important; font-weight: 600; white-space: normal; line-height: 1.35; opacity: 1 !important; } .header-nav-main .nav-sub a:hover, .header-nav-main .nav-sub a:focus-visible { background: #f3f5f9; color: #1a2744 !important; opacity: 1 !important; } .site-header--overlay.is-scrolled .header-nav-main { background: #ffffff; border-bottom-color: rgba(16, 32, 68, 0.08); box-shadow: 0 1px 0 rgba(16, 32, 68, 0.06); } .site-header--overlay.is-scrolled .header-nav-main a { color: var(--ic-gold); text-shadow: none; } .site-header--overlay.is-scrolled .header-nav-main a:hover { color: var(--ic-navy); opacity: 1; } .site-header--overlay.is-scrolled .nav-sub__toggle { color: var(--ic-gold); text-shadow: none; } .site-header--overlay.is-scrolled .nav-sub__toggle:hover { color: var(--ic-navy); } /* Pages without a skyline band: keep menu solid (never white-on-white) */ .site-header--overlay.is-solid .header-nav-main { background: #ffffff; border-bottom: 1px solid rgba(16, 32, 68, 0.08); box-shadow: 0 1px 0 rgba(16, 32, 68, 0.06); } .site-header--overlay.is-solid .header-nav-main a, .site-header--overlay.is-solid .nav-sub__toggle { color: var(--ic-gold); text-shadow: none; } .site-header--overlay.is-solid .header-nav-main a:hover, .site-header--overlay.is-solid .nav-sub__toggle:hover { color: var(--ic-navy); opacity: 1; } /* Keep logo bar (and its search dropdown) above the menu strip. Search panel is a child of .header-bar — if this stays below .header-nav-main, the solid scrolled menu covers the "What are you looking for?" field. */ .site-header--overlay .header-bar { position: relative; z-index: 50; } /* Primary menu + its dropdowns must sit above the Hub section bar (z-index 20) or The Hub / Events menus open *behind* that navy strip on hub.html. */ .site-header--overlay .header-nav-main { position: relative; z-index: 30; } .header-nav-main .nav-item--has-sub.is-open, .header-nav-main .nav-item--has-sub:hover, .header-nav-main .nav-item--has-sub:focus-within { z-index: 40; } /* ============================================================================ HERO ========================================================================== */ .hero { position: relative; min-height: 100vh; /* fills the whole screen on load */ display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden; background: #0a1630; } /* Crossfading Charleston skyline slideshow */ .hero__slides { position: absolute; inset: 0; z-index: 0; } .hero__slide { position: absolute; inset: 0; background-position: center center; background-size: cover; background-repeat: no-repeat; opacity: 0; transform: scale(1.04); transition: opacity 1.6s ease-in-out, transform 8s ease-out; will-change: opacity, transform; } .hero__slide.is-active { opacity: 1; transform: scale(1); z-index: 1; } /* Optional looping skyline video (data-driven via market-media.json). Still images remain as CSS background / poster fallback underneath. */ .skyline-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; z-index: 2; pointer-events: none; border: 0; } .hero.has-skyline-video .hero__slide { /* Keep stills as fallback under the video; freeze crossfade while video plays */ transition: none; } .hero.has-skyline-video .hero__slide:not(.is-active) { opacity: 0; visibility: hidden; } .page-skyline { position: relative; overflow: hidden; } .page-skyline .skyline-video { z-index: 0; } .hero.has-skyline-video .skyline-video { z-index: 1; } .hero.has-skyline-video .hero__veil { z-index: 2; } @media (prefers-reduced-motion: reduce) { .skyline-video { display: none !important; } } @media (max-width: 768px) { .skyline-video { display: none !important; } } .hero__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 180deg, rgba(4, 12, 35, 0.34) 0%, rgba(4, 12, 35, 0.08) 32%, rgba(4, 12, 35, 0.12) 62%, rgba(4, 12, 35, 0.55) 100% ); } .hero__credit { position: absolute; right: var(--space-5); bottom: var(--space-4); z-index: 3; margin: 0; max-width: min(420px, calc(100% - 48px)); padding: 6px 10px; border-radius: 6px; background: rgba(4, 12, 35, 0.55); color: rgba(255, 255, 255, 0.9); font-size: 11px; font-weight: 500; letter-spacing: 0.01em; line-height: 1.35; text-align: right; pointer-events: none; } .hero__credit[hidden] { display: none; } .hero__inner { position: relative; z-index: 2; max-width: var(--container); margin: 0 auto; /* sit under the fixed header, with room under the larger logo bar */ padding: clamp(200px, 26vh, 260px) var(--space-5) var(--space-8); text-align: center; width: 100%; } .hero__brand-name { margin: 0 0 var(--space-3); font-family: var(--font-serif); font-size: clamp(22px, 3.2vw, 34px); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: #ffffff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); } .hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.85); border: 1px solid var(--border); color: var(--ic-navy); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; padding: 7px 14px; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); margin-bottom: var(--space-5); } .hero h1 { font-family: var(--font-serif); font-size: clamp(34px, 6vw, 60px); letter-spacing: -0.02em; margin: 0 auto var(--space-4); max-width: 15ch; color: #ffffff; text-shadow: 0 2px 18px rgba(4, 12, 35, 0.55); } .hero h1 span { color: #ffffff; display: block; } .hero__sub { color: rgba(255, 255, 255, 0.94); font-size: clamp(16px, 2vw, 20px); max-width: 62ch; margin: 0 auto var(--space-6); text-shadow: 0 1px 12px rgba(4, 12, 35, 0.5); } /* --- Hero search --- */ .searchbar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-3); display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: var(--space-2); max-width: 920px; margin: 0 auto; text-align: left; } .field { display: flex; flex-direction: column; gap: 4px; padding: 6px 10px; } .field label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); } .field input, .field select { border: none; background: transparent; font-size: 15px; color: var(--text); font-family: inherit; padding: 2px 0; min-width: 0; } .field select { cursor: pointer; } .field input:focus, .field select:focus { outline: none; } .field + .field { border-left: 1px solid var(--border); } .searchbar .btn { align-self: stretch; } .hero__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6); margin-top: var(--space-6); } .hero__stat { text-align: center; } .hero__stat b { display: block; font-size: 26px; color: #ffffff; font-family: var(--font-serif); text-shadow: 0 1px 10px rgba(4, 12, 35, 0.5); } .hero__stat span { font-size: 13px; color: rgba(255, 255, 255, 0.88); font-weight: 600; text-shadow: 0 1px 8px rgba(4, 12, 35, 0.5); } /* ============================================================================ QUICK ACCESS CARDS ========================================================================== */ .quick { margin-top: 0; /* cards begin below the full-screen hero */ padding-top: var(--space-8); padding-bottom: var(--space-8); position: relative; background: var(--page-bg); /* opaque so it covers the pinned image as it scrolls up */ z-index: 2; } .quick .grid { gap: var(--space-5); align-items: stretch; } .quick-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); min-height: 190px; height: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: transform 0.14s ease, box-shadow 0.14s ease; } .quick-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .quick-card__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-tint, var(--tint-navy)); color: var(--accent, var(--ic-navy)); } .quick-card__icon svg { width: 26px; height: 26px; } .quick-card h3 { margin: 0; font-size: 18px; padding-right: 0.2rem; overflow-wrap: anywhere; } .quick-card p { margin: 0 0 auto; padding-right: 0.35rem; color: var(--text-muted); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; } .quick-card--cultural { border-color: color-mix(in srgb, var(--ic-gold) 55%, var(--border)); box-shadow: 0 10px 28px color-mix(in srgb, var(--ic-gold) 18%, transparent); } .quick-card--cultural .quick-card__icon { background: color-mix(in srgb, var(--ic-gold) 22%, transparent); color: #8a5a00; } /* Homepage — Claim Your Listing banner (below quick-access cards) */ .claim-banner { position: relative; background: #ffffff; overflow: hidden; } .claim-banner__intro { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(2rem, 4.5vw, 3.2rem) 1.25rem 0.35rem; } .claim-banner__eyebrow { margin: 0 0 0.7rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #17255a; } .claim-banner__intro h2 { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.05em; color: #17255a; } .claim-banner__title-main { font-family: "Playfair Display", var(--font-serif); font-weight: 800; font-size: clamp(2.15rem, 5.4vw, 3.7rem); line-height: 1.05; letter-spacing: -0.02em; } .claim-banner__title-script { font-family: "Great Vibes", cursive; font-weight: 400; font-size: clamp(2.4rem, 6vw, 4.15rem); line-height: 1.05; color: #c4a35a; } .claim-banner__lede { margin: 0.85rem auto 0; max-width: 36rem; font-size: clamp(0.98rem, 1.5vw, 1.12rem); line-height: 1.5; color: #17255a; font-weight: 600; } .claim-banner__body { position: relative; padding: 1.25rem 0 2.75rem; background: #ffffff; } .claim-banner__body::before, .claim-banner__body::after { content: ""; position: absolute; top: 12%; width: 110px; height: 220px; pointer-events: none; background-image: radial-gradient(circle, rgba(23, 37, 90, 0.14) 1.15px, transparent 1.25px); background-size: 11px 11px; } .claim-banner__body::before { left: 0; } .claim-banner__body::after { right: 0; background-image: radial-gradient(circle, rgba(110, 20, 35, 0.14) 1.15px, transparent 1.25px); } .claim-banner__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.6rem); margin: 0 0 2rem; } .claim-banner__card { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 1.55rem 1.55rem 1.45rem; border-radius: 22px; box-shadow: 0 16px 40px rgba(23, 37, 90, 0.1); overflow-wrap: anywhere; } .claim-banner__card--claim { background: linear-gradient(180deg, #ffffff 0%, #f8ecee 100%); border: 1px solid color-mix(in srgb, var(--ic-burgundy) 16%, #fff); } .claim-banner__card--create { background: linear-gradient(180deg, #ffffff 0%, #eef2fb 100%); border: 1px solid color-mix(in srgb, var(--ic-navy) 14%, #fff); } .claim-banner__icon { width: 3.15rem; height: 3.15rem; border-radius: 50%; display: grid; place-items: center; margin-bottom: 0.9rem; color: #fff; } .claim-banner__card--claim .claim-banner__icon { background: var(--ic-burgundy, #6e1423); } .claim-banner__card--create .claim-banner__icon { background: var(--ic-navy, #17255a); } .claim-banner__icon svg { width: 1.35rem; height: 1.35rem; } .claim-banner__kicker { margin: 0 0 0.35rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.02em; } .claim-banner__card--claim .claim-banner__kicker { color: var(--ic-burgundy, #6e1423); } .claim-banner__card--create .claim-banner__kicker { color: var(--ic-navy, #17255a); } .claim-banner__card h3 { margin: 0 0 0.55rem; font-family: "Playfair Display", var(--font-serif); font-size: clamp(1.45rem, 2.4vw, 1.85rem); font-weight: 700; color: #17255a; line-height: 1.15; } .claim-banner__card p { margin: 0; color: #3a4460; font-size: 0.98rem; line-height: 1.55; max-width: 42ch; } .claim-banner__btn { margin-top: auto; border: 0; border-radius: 10px; padding: 0.72rem 1.15rem; font-weight: 800; } .claim-banner__btn--claim { background: var(--ic-burgundy, #6e1423) !important; border-color: var(--ic-burgundy, #6e1423) !important; color: #fff !important; } .claim-banner__btn--create { background: var(--ic-navy, #17255a) !important; border-color: var(--ic-navy, #17255a) !important; color: #fff !important; } .claim-banner__audience { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.6rem); margin: 0 0 2rem; } .claim-banner .why-card { min-width: 0; background: #ffffff; border: 1px solid color-mix(in srgb, var(--ic-navy) 12%, #ffffff); border-radius: 22px; box-shadow: 0 16px 40px rgba(23, 37, 90, 0.1); } .claim-banner .why-card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(23, 37, 90, 0.14); border-color: color-mix(in srgb, var(--ic-navy) 18%, #ffffff); } .claim-banner .why-card h3 { color: #17255a; } .claim-banner .why-card p, .claim-banner .why-card ul { color: #4a5570; } .claim-banner .why-card .btn { background: var(--accent, var(--ic-navy)); border-color: var(--accent, var(--ic-navy)); color: #fff; } .claim-banner .why-card .btn:hover { filter: brightness(1.08); color: #fff; } .claim-banner__benefits { list-style: none; margin: 0; padding: 0.35rem 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } .claim-banner__benefits li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.7rem; align-items: start; min-width: 0; padding: 0.35rem 1rem; } .claim-banner__benefits li + li { border-left: 1px solid #d8deea; } .claim-banner__benefit-icon { width: 1.7rem; height: 1.7rem; color: #c4a35a; flex-shrink: 0; } .claim-banner__benefit-icon svg { width: 100%; height: 100%; } .claim-banner__benefits strong { display: block; margin: 0 0 0.2rem; color: #17255a; font-size: 0.98rem; } .claim-banner__benefits span { display: block; color: #4a5570; font-size: 0.84rem; line-height: 1.4; } @media (max-width: 1100px) { .claim-banner__audience { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .claim-banner__benefits { grid-template-columns: 1fr 1fr; gap: 1rem 0; } .claim-banner__benefits li:nth-child(3) { border-left: 0; } } @media (max-width: 720px) { .claim-banner__cards, .claim-banner__audience, .claim-banner__benefits { grid-template-columns: 1fr; } .claim-banner__benefits li + li, .claim-banner__benefits li:nth-child(3) { border-left: 0; border-top: 1px solid #d8deea; padding-top: 1rem; } .claim-banner__body::before, .claim-banner__body::after { display: none; } } /* ============================================================================ LISTING / BUSINESS / CHURCH CARDS ========================================================================== */ .tile__media { height: 150px; background: linear-gradient(135deg, var(--accent, var(--ic-navy)), color-mix(in srgb, var(--accent, var(--ic-navy)) 55%, #ffffff)); position: relative; } .tile__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Advertisement media: photo with a legibility scrim + overlaid text */ .tile__media--ad::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 15, 40, 0.12) 0%, rgba(10, 15, 40, 0.66) 100%); } .ad-text { position: relative; z-index: 1; color: #fff; font-family: var(--font-serif); font-size: 26px; line-height: 1.2; text-align: center; padding: 0 24px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); } /* Homepage Featured Advertisements — Featured Listing sample size/scope */ .home-featured-ads { align-items: stretch; } .home-featured-ad { display: flex; flex-direction: column; overflow: hidden; height: 100%; } .home-featured-ad__media { height: 240px; display: grid; place-items: center; flex: 0 0 auto; } .home-featured-ad__body { padding: 14px 18px 16px !important; display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; } .home-featured-ad__type, .home-featured-ad__when { margin: 0; font-size: 12px; line-height: 1.35; font-weight: 700; color: rgba(22, 50, 85, 0.78); } .home-featured-ad__about { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--text-muted); } @media (max-width: 720px) { .home-featured-ad__media { height: 200px; } } .tile__logo { position: absolute; left: var(--space-4); bottom: -26px; width: 60px; height: 60px; border-radius: 14px; background: #fff; border: 1px solid var(--border); display: grid; place-items: center; font-family: var(--font-serif); font-weight: 700; font-size: 22px; color: var(--accent, var(--ic-navy)); box-shadow: var(--shadow-sm); } .tile__body { padding: var(--space-6) var(--space-5) var(--space-5); } .tile__body h3 { margin: 0 0 4px; font-size: 17px; } .tile__meta { margin: 0 0 var(--space-3); color: var(--text-muted); font-size: 14px; } .tile__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .rating { font-weight: 700; font-size: 14px; color: var(--ic-navy); } .rating .stars { color: var(--ic-gold); } /* Homepage IC Highlights — photo band + light tint + white copy. Default photos match the directory category bands. JS may override background-image inline with a Premium member’s interior photo. */ #churches.home-featured-biz { background-color: #d4c09a; background-image: linear-gradient(180deg, rgba(20, 14, 8, 0.3) 0%, rgba(20, 14, 8, 0.36) 100%), url("../media/img/dir-church-denom-bg.png?v=4"); background-size: cover; background-position: center; background-repeat: no-repeat; } #ic-highlights.section--art-gold { background-color: #b8893a; background-image: linear-gradient(180deg, rgba(20, 14, 8, 0.3) 0%, rgba(20, 14, 8, 0.36) 100%), url("../media/img/dir-biz-category-bg.png?v=4"); background-size: cover; background-position: center; background-repeat: no-repeat; } /* Compact claim block under IC Showcase section copy */ .home-showcase-claim { display: inline-flex; align-items: center; justify-content: center; text-align: center; margin-top: 0.85rem; padding: 0.45rem 1.1rem 0.5rem; line-height: 1.15; border-radius: 6px; max-width: max-content; } .home-showcase-claim strong { display: block; font-family: "Playfair Display", var(--font-serif, Georgia, serif); font-size: clamp(0.95rem, 1.35vw, 1.12rem); font-weight: 800; letter-spacing: -0.01em; color: #17255a; text-shadow: none; } .home-showcase-claim--church { background: #e1d2b2; } .home-showcase-claim--business { background: #b48c4d; } .home-showcase-claim--business strong { color: #1a1208; } #churches .eyebrow, #churches .section-title, #churches .link-all, #churches .home-card-rail-label, #ic-highlights .eyebrow, #ic-highlights .section-title, #ic-highlights .link-all, #ic-highlights .home-card-rail-label { color: #ffffff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); } #churches .section-sub, #ic-highlights .section-sub { color: rgba(255, 255, 255, 0.95); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); } #churches .link-all:hover, #ic-highlights .link-all:hover { color: #ffffff; opacity: 0.88; } /* Highlight cards stay solid white over the photo bands */ #churches .home-featured-biz__card, #ic-highlights .home-featured-biz__card { background: #fff !important; color: #1a1a1a !important; border: 1px solid #b8bfd0; box-shadow: 0 10px 28px rgba(23, 37, 90, 0.1), 0 1px 3px rgba(23, 37, 90, 0.04); transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease; } #churches .home-featured-biz__card:hover, #ic-highlights .home-featured-biz__card:hover { border-color: #8f98ae; box-shadow: 0 10px 28px rgba(23, 37, 90, 0.18), 0 3px 10px rgba(23, 37, 90, 0.1); transform: translateY(-1px); } #churches .home-featured-biz__card h3, #churches .home-featured-biz__card .rating, #ic-highlights .home-featured-biz__card h3, #ic-highlights .home-featured-biz__card .rating { color: #17255a !important; } #churches .home-featured-biz__card .tile__meta, #ic-highlights .home-featured-biz__card .tile__meta { color: rgba(26, 26, 26, 0.68) !important; } #churches .home-featured-biz__empty, #ic-highlights .home-featured-biz__empty { color: rgba(255, 255, 255, 0.95); background: rgba(18, 12, 8, 0.35); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); } /* Homepage IC Highlights — flexible premium cards under skyline */ .home-featured-biz { background: radial-gradient(ellipse 80% 55% at 0% 0%, rgba(210, 146, 40, 0.16), transparent 55%), radial-gradient(ellipse 70% 50% at 100% 100%, rgba(23, 37, 90, 0.08), transparent 50%), var(--art-cream); } .home-featured-biz .section-head { align-items: end; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); } .home-featured-biz .section-sub { max-width: 54ch; } .home-featured-biz .link-all { color: #17255a; font-weight: 700; } .home-featured-biz .link-all:hover { color: #0f1a3d; } .home-featured-biz__grid { align-items: stretch; } .home-featured-biz .home-featured-biz__card { height: 100%; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid rgba(23, 37, 90, 0.08); box-shadow: 0 10px 28px rgba(23, 37, 90, 0.1), 0 1px 3px rgba(23, 37, 90, 0.04); color: #1a1a1a; transition: transform 0.22s ease, box-shadow 0.22s ease; } .home-featured-biz .home-featured-biz__card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(23, 37, 90, 0.14), 0 2px 6px rgba(23, 37, 90, 0.06); background: #fff; } .home-featured-biz__media { height: 230px; position: relative; } .home-featured-biz__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .home-featured-biz__slot { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 0.35rem 0.7rem; border-radius: 999px; background: rgba(255, 255, 255, 0.94); color: #17255a; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); } .home-featured-biz__card .tile__body { padding: 1.45rem 1.15rem 1.2rem; } .home-featured-biz__card .tile__body h3 { font-family: var(--font-serif); font-size: 1.2rem; color: #17255a; } .home-featured-biz__card .tile__meta { color: rgba(26, 26, 26, 0.68); } .home-featured-biz__card .rating { color: #17255a; } .home-featured-biz__empty { grid-column: 1 / -1; margin: 0; padding: 2rem; text-align: center; color: rgba(26, 26, 26, 0.7); background: rgba(255, 255, 255, 0.55); border-radius: 16px; } /* All-caps rail label above first card (BUSINESSES / CHURCHES) */ .home-card-rail-label { margin: 0 0 0.65rem; font-family: var(--font-sans); font-size: clamp(17px, 1.85vw, 22px); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #1a1a1a; line-height: 1.2; } .section--art-gold .home-card-rail-label { color: #1a1a1a; } #ic-highlights .home-card-rail-label { color: #ffffff; } /* Premium-sized homepage rails (Churches + Businesses). Card size matches Premium Listing (= live Featured Ad × 1.14). Cards stay that size and sit nearly touching so the row fits on screen. Use safe centering so an oversized row never bleeds off the right edge. */ .home-premium-rail { --home-prem-w: min( calc(((min(100vw, var(--container)) - (2 * var(--space-5)) - var(--space-5)) / 2) * 1.14), 100% ); --home-prem-h: 480px; --home-prem-gap: 2px; width: 100%; max-width: 100%; margin: 0; padding-inline: var(--space-5); box-sizing: border-box; display: flex; justify-content: safe center; justify-content: center; overflow-x: hidden; } @supports (justify-content: safe center) { .home-premium-rail { justify-content: safe center; } } .home-premium-rail__inner { width: max-content; max-width: 100%; margin-inline: auto; } .home-premium-rail__grid { display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: var(--home-prem-gap); width: max-content; max-width: 100%; } .home-premium-rail__grid > .card { flex: 0 0 var(--home-prem-w); width: var(--home-prem-w); max-width: 100%; height: var(--home-prem-h); display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; } .home-premium-rail__grid > .card .tile__media, .home-premium-rail__grid > .card .home-featured-biz__media { flex: 1 1 auto; height: auto !important; min-height: 0; position: relative; } .home-premium-rail__grid > .card .tile__body { flex: 0 0 auto; } .home-featured-biz .home-premium-rail__grid > .card.home-featured-biz__card { height: var(--home-prem-h); } @media (max-width: 900px) { .home-premium-rail { --home-prem-h: 420px; --home-prem-gap: 8px; } .home-premium-rail__grid { flex-wrap: wrap; width: 100%; } .home-premium-rail__inner { width: 100%; } .home-premium-rail__grid > .card { flex: 1 1 calc(50% - var(--home-prem-gap)); width: auto; max-width: var(--home-prem-w); height: auto; min-height: min(var(--home-prem-h), 420px); } .home-premium-rail__grid > .card .tile__media, .home-premium-rail__grid > .card .home-featured-biz__media { min-height: 200px; } } @media (max-width: 640px) { .home-premium-rail { --home-prem-h: 380px; } .home-premium-rail__grid > .card { flex: 1 1 100%; max-width: 100%; width: 100%; } .home-premium-rail__grid > .card .tile__media, .home-premium-rail__grid > .card .home-featured-biz__media { min-height: 180px; } } @media (max-width: 900px) { .home-featured-biz__media { height: 200px; } } @media (max-width: 640px) { .home-featured-biz__media { height: 180px; } } /* ============================================================================ PREMIUM LISTING DEMO CARDS (homepage sales examples) ========================================================================== */ .section--premium-demos { background: radial-gradient(ellipse 70% 50% at 10% 0%, color-mix(in srgb, var(--ic-gold) 14%, transparent), transparent 55%), radial-gradient(ellipse 60% 45% at 100% 100%, color-mix(in srgb, var(--ic-navy) 10%, transparent), transparent 50%), linear-gradient(180deg, #f7f8fc 0%, #ffffff 55%); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .premium-demo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: stretch; } .premium-demo-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid color-mix(in srgb, var(--ic-gold) 35%, var(--border)); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); height: 100%; transition: transform 0.28s ease, box-shadow 0.28s ease; } .premium-demo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .premium-demo-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ic-navy); } .premium-demo-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; } .premium-demo-card:hover .premium-demo-card__media img { transform: scale(1.04); } .premium-demo-card__badge { position: absolute; top: 14px; left: 14px; z-index: 1; padding: 6px 12px; border-radius: var(--radius-pill); background: linear-gradient(135deg, var(--ic-gold), #e0b84a); color: #1a1208; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); } .premium-demo-card__body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); flex: 1; } .premium-demo-card__brand { display: flex; align-items: center; gap: var(--space-3); margin-top: -36px; position: relative; z-index: 1; } .premium-demo-card__logo { flex: none; width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; background: #fff; border: 2px solid #fff; box-shadow: var(--shadow); font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: var(--ic-burgundy); } .premium-demo-card__logo--gold { color: var(--ic-navy); background: linear-gradient(180deg, #fff 0%, #fff8e8 100%); } .premium-demo-card__type { margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .premium-demo-card h3 { margin: 0; font-family: var(--font-serif); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; color: var(--ic-navy); } .premium-demo-card__desc { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-muted); } .premium-demo-card__rating { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-muted); } .premium-demo-card__rating .stars { color: var(--ic-gold); letter-spacing: 1px; } .premium-demo-card__rating strong { color: var(--ic-navy); } .premium-demo-card__facts { margin: 0; display: grid; gap: 12px; padding: var(--space-4); border-radius: var(--radius); background: color-mix(in srgb, var(--tint-navy) 55%, #fff); border: 1px solid var(--border); } .premium-demo-card--church .premium-demo-card__facts { background: color-mix(in srgb, var(--tint-burgundy) 45%, #fff); } .premium-demo-card__facts div { display: grid; gap: 2px; } .premium-demo-card__facts dt { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } .premium-demo-card__facts dd { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ic-navy); font-weight: 600; } .premium-demo-card__facts a { color: var(--ic-navy); text-decoration: none; } .premium-demo-card__facts a:hover { color: var(--logo-color); text-decoration: underline; } .premium-demo-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: var(--space-2); } .premium-demo-footnote { margin: var(--space-6) auto 0; max-width: 62ch; text-align: center; font-size: 13px; color: var(--text-muted); } .premium-demo-footnote a { color: var(--logo-color); font-weight: 600; } /* ============================================================================ LISTING PREVIEWS — Basic / Featured / Premium / Community after pricing ========================================================================== */ .listing-preview-cta-band { background: #ffffff; margin: 0; padding: 0; } .listing-preview-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; gap: 16px 24px; margin: 0 auto; padding: clamp(18px, 2.4vw, 26px) 0; border-radius: 0; background: transparent; border: none; } .listing-preview-cta > div { text-align: center; } .listing-preview-cta h3 { margin: 0 0 4px; color: #1a1a1a; font-size: clamp(17px, 2vw, 20px); line-height: 1.25; } .listing-preview-cta p { margin: 0 auto; color: #1a1a1a; font-size: 14px; max-width: 52ch; } .listing-preview-cta .btn { flex-shrink: 0; } /* Pricing cards on royal blue: outline Create & Pay — white border + white text */ .section--pricing-royal .price-card > a.btn, .section--pricing-royal .price-card > a.btn.btn--solid { background: transparent !important; border: 1.5px solid #fff !important; color: #fff !important; box-shadow: none !important; } .section--pricing-royal .price-card > a.btn:hover, .section--pricing-royal .price-card > a.btn.btn--solid:hover, .section--pricing-royal .price-card > a.btn:focus-visible, .section--pricing-royal .price-card > a.btn.btn--solid:focus-visible { background: rgba(255, 255, 255, 0.14) !important; border-color: #fff !important; color: #fff !important; } .section--listing-previews { position: relative; overflow: hidden; background: #ffffff; border-top: 0; padding: 0; } .section--listing-previews[hidden] { display: none !important; } .section--listing-previews.is-open { display: block; } .listing-preview-drawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s cubic-bezier(0.22, 1, 0.36, 1); } .section--listing-previews.is-open .listing-preview-drawer { grid-template-rows: 1fr; } .listing-preview-drawer__inner { overflow: hidden; min-height: 0; opacity: 0; transform: translateY(-12px); transition: opacity 0.4s ease 0.05s, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); } .section--listing-previews.is-open .listing-preview-drawer__inner { opacity: 1; transform: translateY(0); } .listing-preview-drawer__head { position: relative; margin-bottom: var(--space-4); } .listing-preview-close { position: absolute; top: 12px; right: 12px; z-index: 2; border: 1px solid rgba(4, 19, 43, 0.2); border-radius: var(--radius-pill); padding: 8px 16px; background: rgba(255, 255, 255, 0.92); color: var(--ic-navy); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .listing-preview-close:hover { background: #fff; border-color: rgba(4, 19, 43, 0.4); } @media (max-width: 640px) { .listing-preview-cta { flex-direction: column; align-items: center; } .listing-preview-close { position: static; margin: 0 0 12px auto; display: block; } } .section--listing-previews .container { max-width: 920px; } .listing-preview-drawer__inner > .container { max-width: 920px; padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(40px, 6vw, 72px); border-top: 1px solid rgba(23, 37, 90, 0.1); } .listing-preview-head { position: relative; isolation: isolate; overflow: hidden; margin-bottom: var(--space-4); padding: var(--space-4) var(--space-5); border: 1px solid color-mix(in srgb, #e7cca1 55%, transparent); border-radius: 22px; background: radial-gradient(ellipse 90% 70% at 10% 0%, rgba(231, 204, 161, 0.55), transparent 55%), radial-gradient(ellipse 70% 60% at 100% 100%, rgba(27, 72, 95, 0.12), transparent 50%), linear-gradient(165deg, #fffdf8 0%, #f6ecda 55%, #ead9b8 100%); box-shadow: 0 14px 36px rgba(8, 20, 40, 0.28), 0 2px 8px rgba(8, 20, 40, 0.14); } .listing-preview-head::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; z-index: 1; background: linear-gradient(90deg, #d29228, #e7cca1, #1b485f, #601d2e); } .listing-preview-head > * { position: relative; z-index: 1; } .listing-preview-head .eyebrow { color: #8a5a12; } .listing-preview-head .section-title { font-size: clamp(22px, 3vw, 30px); color: #163255; } .listing-preview-head .section-sub { margin-inline: auto; font-size: 14px; max-width: 52ch; color: rgba(22, 50, 85, 0.78); } .listing-preview-grid > * { position: relative; z-index: 1; } /* Shared “price-card” energy for every preview shell */ .listing-preview--basic, .listing-preview--premium, .listing-preview--featured, .listing-preview--community, .listing-preview--personal, .listing-preview-include, .premium-demo-footnote { position: relative; isolation: isolate; overflow: hidden; padding: var(--space-4); border: 1px solid transparent; border-radius: 22px; background: #fff; box-shadow: 0 14px 36px rgba(8, 20, 40, 0.28), 0 2px 8px rgba(8, 20, 40, 0.14); transition: transform 0.22s ease, box-shadow 0.22s ease; } .listing-preview--basic::before, .listing-preview--premium::before, .listing-preview--featured::before, .listing-preview--community::before, .listing-preview--personal::before, .listing-preview-include::before, .premium-demo-footnote::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 7px; z-index: 1; background: linear-gradient(90deg, #1b485f, #d29228, #601d2e); } .listing-preview--basic::after, .listing-preview--premium::after, .listing-preview--featured::after, .listing-preview--community::after, .listing-preview--personal::after, .listing-preview-include::after { content: ""; position: absolute; inset: -25% -35% auto auto; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.65), transparent 68%); pointer-events: none; z-index: 0; } .listing-preview--basic > *, .listing-preview--premium > *, .listing-preview--featured > *, .listing-preview--community > *, .listing-preview--personal > *, .listing-preview-include > *, .premium-demo-footnote > * { position: relative; z-index: 1; } .listing-preview--basic:hover, .listing-preview--premium:hover, .listing-preview--featured:hover, .listing-preview--community:hover { transform: translateY(-5px); box-shadow: 0 22px 48px rgba(8, 20, 40, 0.36), 0 4px 14px rgba(8, 20, 40, 0.18); } /* Distinct artistic washes — match pricing plan personality */ .listing-preview--basic { background: radial-gradient(ellipse 80% 55% at 100% 0%, rgba(27, 72, 95, 0.2), transparent 55%), linear-gradient(165deg, #ffffff 0%, #eef4f8 55%, #dce8f0 100%); border-color: color-mix(in srgb, #1b485f 28%, transparent); } .listing-preview--basic::before { background: linear-gradient(90deg, #1b485f, #506e7e, #e7cca1); } .listing-preview--basic .listing-preview__price { color: #1b485f; } .listing-preview--premium { background: radial-gradient(ellipse 85% 60% at 0% 100%, rgba(176, 106, 46, 0.26), transparent 55%), linear-gradient(165deg, #fffdf8 0%, #f7ebcf 50%, #efd8a4 100%); border-color: color-mix(in srgb, #d29228 42%, transparent); } .listing-preview--premium::before { background: linear-gradient(90deg, #d29228, #b06a2e, #601d2e); } .listing-preview--premium .listing-preview__price { color: #8a5a12; } .listing-preview--premium .listing-preview__head h3 { color: #6b4510; } .listing-preview--featured { background: radial-gradient(ellipse 100% 70% at 50% -10%, rgba(210, 146, 40, 0.38), transparent 55%), linear-gradient(165deg, #fff8ec 0%, #f3e2c4 40%, #ead4ad 100%); border-color: color-mix(in srgb, #d29228 45%, #601d2e); } .listing-preview--featured::before { height: 8px; background: linear-gradient(90deg, #d29228, #601d2e, #1b485f); } .listing-preview--featured .listing-preview__price { color: #601d2e; } .listing-preview--featured .listing-preview__head h3 { color: #3a121c; } .listing-preview--community { background: radial-gradient(ellipse 90% 55% at 100% 100%, rgba(46, 100, 100, 0.28), transparent 55%), linear-gradient(165deg, #f5fafb 0%, #e2eef3 48%, #c9dde8 100%); border-color: color-mix(in srgb, #2e6464 35%, transparent); } .listing-preview--community::before { background: linear-gradient(90deg, #2e6464, #1b485f, #506e7e); } .listing-preview--community .listing-preview__price { color: #1b485f; } .listing-preview--community .listing-preview__head h3 { color: #163255; } .listing-preview--personal { background: radial-gradient(ellipse 90% 55% at 0% 100%, rgba(196, 154, 58, 0.28), transparent 55%), linear-gradient(165deg, #fffbf2 0%, #f7edd6 48%, #efe0b8 100%); border-color: color-mix(in srgb, #c49a3a 40%, transparent); } .listing-preview--personal::before { background: linear-gradient(90deg, #f0c14b, #c49a3a, #8a5a12); } .listing-preview--personal .listing-preview__price { color: #8a5a12; } .listing-preview--personal .listing-preview__head h3 { color: #6e480e; } .personal-ad-demo { max-width: 220px; margin: 0 auto; background: #fff; border: 1px solid color-mix(in srgb, #c49a3a 35%, var(--border)); border-radius: 16px; overflow: hidden; box-shadow: 0 8px 20px rgba(23, 37, 90, 0.12); text-align: center; } .personal-ad-demo__photo { aspect-ratio: 1; background: #1a2248; overflow: hidden; } .personal-ad-demo__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .personal-ad-demo__body { padding: 12px 12px 14px; display: grid; gap: 4px; } .personal-ad-demo__kind { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9b3d66; } .personal-ad-demo__name { margin: 0; font-family: var(--font-serif); font-size: 18px; line-height: 1.2; color: var(--ic-navy); } .personal-ad-demo__city { margin: 0; font-size: 12px; color: var(--text-muted); } .personal-ad-demo__msg { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--text); font-style: italic; } .personal-ad-demo__actions { display: grid; gap: 8px; margin-top: var(--space-3); } .personal-ad-demo__actions .btn { width: 100%; justify-content: center; text-align: center; white-space: normal; line-height: 1.25; min-height: 44px; } .premium-demo-footnote { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); text-align: center; font-size: 12px; background: radial-gradient(ellipse 80% 60% at 0% 0%, rgba(231, 204, 161, 0.4), transparent 55%), linear-gradient(165deg, #fffdf8 0%, #f3ead8 100%); border-color: color-mix(in srgb, #e7cca1 50%, transparent); color: rgba(22, 50, 85, 0.78); } .premium-demo-footnote::before { background: linear-gradient(90deg, #e7cca1, #d29228, #1b485f); } .listing-preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; } .listing-preview--basic { grid-column: 1 / -1; } /* Basic ($19.99) only: exact Businesses/Churches directory listing width */ .section--listing-previews.is-open .listing-preview-drawer__inner { overflow-x: visible; } #preview-basic.listing-preview--basic { width: max-content; max-width: calc(100vw - 24px); padding: var(--space-4); box-sizing: border-box; margin-inline: calc((100% - min( calc(var(--container) - 2 * var(--space-5) + 2 * var(--space-4) + 2px), calc(100vw - 24px) )) / 2); } #preview-basic .listing-preview__dir, #preview-basic .dir-row { width: min(calc(var(--container) - 2 * var(--space-5)), calc(100vw - 2 * var(--space-5))); max-width: none; box-sizing: border-box; } #preview-basic .listing-preview__head, #preview-basic .listing-preview__caption, #preview-basic .listing-preview__actions { width: min(calc(var(--container) - 2 * var(--space-5)), calc(100vw - 2 * var(--space-5))); max-width: 100%; box-sizing: border-box; } .listing-preview--premium { grid-column: 1 / -1; } /* Premium pricing preview shell = exact on-screen box of one homepage Featured Advertisement (#ads .home-featured-ad). Same markup fills the box. */ #preview-premium.listing-preview--premium { display: flex; flex-direction: column; align-items: center; } #preview-premium .listing-preview__head { width: 100%; max-width: min( calc((min(100vw, var(--container)) - (2 * var(--space-5)) - var(--space-5)) / 2), 100% ); margin-bottom: var(--space-3); } .premium-live-size-shell { position: relative; width: min( calc((min(100vw, var(--container)) - (2 * var(--space-5)) - var(--space-5)) / 2), 100% ); /* Fallback until JS copies live Featured Ad height (+14% for Premium) */ height: 480px; max-width: 100%; margin-inline: auto; overflow: hidden; border-radius: var(--radius-lg); } .premium-live-size-shell--featured { background: var(--art-teal); box-shadow: var(--shadow); } .premium-preview-ad { display: flex !important; flex-direction: column; width: 100%; height: 100%; margin: 0; background: color-mix(in srgb, #0d3a3a 22%, transparent); border: 1px solid color-mix(in srgb, #fff 28%, transparent); border-radius: var(--radius-lg); overflow: hidden; color: #fff; text-decoration: none; box-sizing: border-box; } .premium-preview-ad:hover { transform: none; } .premium-preview-ad__media { position: relative; flex: 1 1 auto; min-height: 240px; height: auto !important; max-height: none !important; display: grid; place-items: center; overflow: hidden; } .premium-preview-ad__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .premium-preview-ad__badge { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 4px 10px; border-radius: var(--radius-pill); background: linear-gradient(135deg, var(--ic-gold), #e0b84a); color: #1a1208; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); } .premium-preview-ad .home-featured-ad__body { flex: 0 0 auto; background: transparent; color: #fff; } .premium-preview-ad .tile__meta, .premium-preview-ad .home-featured-ad__type, .premium-preview-ad .home-featured-ad__when, .premium-preview-ad .home-featured-ad__about { color: rgba(255, 255, 255, 0.92); } .premium-preview-ad .home-featured-ad__type, .premium-preview-ad .home-featured-ad__when { color: rgba(255, 255, 255, 0.88); } .premium-preview-actions { margin-top: var(--space-3); display: flex; justify-content: center; width: 100%; max-width: min( calc((min(100vw, var(--container)) - (2 * var(--space-5)) - var(--space-5)) / 2), 100% ); } .premium-preview-actions .btn { background: transparent; border: 1.5px solid #8a5a12; color: #8a5a12; box-shadow: none; } .premium-preview-actions .btn:hover { background: rgba(138, 90, 18, 0.1); } @media (max-width: 720px) { .premium-live-size-shell { height: 380px; } } .listing-preview-pair { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 16px; width: 100%; } .listing-preview-pair > .listing-preview { display: flex; flex-direction: column; padding: 10px; min-width: 0; aspect-ratio: 1 / 1; height: auto; flex: 0 0 auto; overflow: hidden; box-sizing: border-box; } /* Featured = ~3/4 Premium (JS); Community / Personal keep fixed squares */ .listing-preview-pair > .listing-preview--featured { width: auto; height: auto; aspect-ratio: auto; max-width: none; } .listing-preview-pair > .listing-preview--community { width: min(385px, 100%); } .listing-preview-pair > .listing-preview--personal { width: min(305px, 100%); } .listing-preview-pair .listing-preview__head { margin: 0 0 8px; text-align: center; flex: 0 0 auto; } .listing-preview-pair .listing-preview__head h3 { font-size: clamp(15px, 1.2vw, 18px); margin: 0; } .listing-preview-pair .listing-preview__price { font-size: 18px; margin: 2px 0; } .listing-preview-pair .listing-preview__note { font-size: 11px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .listing-preview-pair .listing-preview__caption { display: none; } .listing-preview__live { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; max-width: 100%; min-height: 0; height: auto; text-decoration: none; color: inherit; aspect-ratio: auto; overflow: hidden; } /* Featured Advertisement sample — fill remaining square shell */ .listing-preview-pair .listing-preview__live.card { aspect-ratio: auto; } .listing-preview-pair .listing-preview__live .tile__media--ad { height: auto !important; flex: 1 1 48%; min-height: 0; max-height: 52%; aspect-ratio: auto; } .listing-preview-pair .listing-preview__live .tile__body, .listing-preview-pair .listing-preview__ad-copy { flex: 0 0 auto; padding: 8px 10px !important; display: flex; flex-direction: column; gap: 3px; } .listing-preview-pair .listing-preview__ad-type, .listing-preview-pair .listing-preview__ad-when { margin: 0; font-size: 10px; line-height: 1.25; font-weight: 700; color: rgba(22, 50, 85, 0.78); } .listing-preview-pair .listing-preview__ad-about { margin: 0; font-size: 11px; line-height: 1.3; color: rgba(22, 50, 85, 0.88); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .listing-preview-pair .listing-preview__live .ad-text { font-size: clamp(14px, 1.4vw, 20px); padding: 0 12px; } /* Community Event sample */ .listing-preview-pair .listing-preview__live.ce-card { aspect-ratio: auto; max-width: none; } .listing-preview-pair .ce-card__media { flex: 1 1 42%; min-height: 0; max-height: 46%; aspect-ratio: auto; height: auto; } .listing-preview-pair .ce-card__body { flex: 1 1 auto; padding: 8px 10px; gap: 3px; min-height: 0; overflow: hidden; } .listing-preview-pair .ce-card__body h3 { font-size: 15px; line-height: 1.15; } .listing-preview-pair .ce-card__body p:not(.ce-card__loc) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 11px; line-height: 1.3; } .listing-preview-pair .ce-card__loc, .listing-preview-pair .ce-card__when { font-size: 10px; } .listing-preview-pair .ce-card__cta { padding-top: 0; font-size: 11px; } /* Personal Ad / Wall Tribute — photo + writing room */ .listing-preview__live--tribute { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; max-width: none; width: 100%; margin-inline: 0; min-height: 0; animation: none; aspect-ratio: auto; padding: 10px 8px; box-shadow: 0 10px 28px rgba(23, 37, 90, 0.14); overflow: hidden; } .listing-preview__live--tribute .hub-member__photo { width: 72px; height: 72px; flex: 0 0 auto; } .listing-preview__live--tribute .hub-member__body { max-width: 100%; width: 100%; text-align: center; flex: 1 1 auto; min-height: 0; } .listing-preview__live--tribute .hub-member__msg { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; } .listing-preview__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; flex: 0 0 auto; } .listing-preview__actions .btn { width: 100%; justify-content: center; text-align: center; white-space: normal; line-height: 1.15; min-height: 34px; padding: 6px 8px; font-size: 11px; } /* Preview Create & Pay — outline style tuned to each ad shell */ .listing-preview--basic .listing-preview__actions .btn { background: transparent; border: 1.5px solid #1b485f; color: #1b485f; } .listing-preview--basic .listing-preview__actions .btn:hover { background: rgba(27, 72, 95, 0.1); } .listing-preview--featured .listing-preview__actions .btn { background: transparent; border: 1.5px solid #6e480e; color: #6e480e; } .listing-preview--featured .listing-preview__actions .btn:hover { background: rgba(110, 72, 14, 0.1); } .listing-preview--community .listing-preview__actions .btn { background: transparent; border: 1.5px solid #1b6b66; color: #1b6b66; } .listing-preview--community .listing-preview__actions .btn:hover { background: rgba(27, 107, 102, 0.1); } .listing-preview--personal .listing-preview__actions .btn { background: transparent; border: 1.5px solid #601d2e; color: #601d2e; } .listing-preview--personal .listing-preview__actions .btn:hover { background: rgba(96, 29, 46, 0.1); } .listing-preview--premium .premium-demo-card__actions .btn { background: transparent; border: 1.5px solid #8a5a12; color: #8a5a12; } .listing-preview--premium .premium-demo-card__actions .btn:hover { background: rgba(138, 90, 18, 0.1); } .listing-preview__dir { max-width: 100%; } .listing-preview__caption { margin: var(--space-3) 0 0; text-align: center; font-size: 13px; color: var(--text-muted); } .listing-preview-include { grid-column: 1 / -1; margin: 0; padding: var(--space-4) var(--space-5); text-align: left; max-width: none; margin-inline: 0; width: 100%; background: radial-gradient(ellipse 90% 60% at 0% 0%, rgba(210, 146, 40, 0.32), transparent 55%), linear-gradient(165deg, #fffdf6 0%, #f8edd4 48%, #efdcb0 100%); border-color: color-mix(in srgb, #d29228 48%, transparent); } .listing-preview-include::before { background: linear-gradient(90deg, #d29228, #e7cca1, #8a5a12); } .listing-preview-include__label { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #8a5a00; } .listing-preview-include p { margin: 0 0 10px; font-size: 13px; line-height: 1.45; color: var(--text); } .listing-preview-include p:last-child { margin-bottom: 0; } .listing-preview-include a { color: #601d2e; font-weight: 700; text-decoration-thickness: 1.5px; text-underline-offset: 2px; } /* Size hierarchy: Premium > Featured > Community — compact for laptop screens */ .premium-demo-card--size-lg .premium-demo-card__media { aspect-ratio: 16 / 8; min-height: 0; max-height: 180px; } .premium-demo-card--size-lg .premium-demo-card__body { padding: var(--space-4) var(--space-5); gap: var(--space-3); } .premium-demo-card--size-lg .premium-demo-card__logo { width: 52px; height: 52px; font-size: 18px; border-radius: 14px; } .premium-demo-card--size-lg h3 { font-size: clamp(20px, 2.2vw, 26px); } .premium-demo-card--size-lg .premium-demo-card__desc { font-size: 14px; max-width: 62ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .premium-demo-card--size-lg .premium-demo-card__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; } .premium-demo-card--size-md .premium-demo-card__media { aspect-ratio: 16 / 9; max-height: 140px; } .premium-demo-card--size-md h3 { font-size: clamp(17px, 1.8vw, 20px); } .premium-demo-card--size-md .premium-demo-card__desc { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .premium-demo-card--size-md .premium-demo-card__body { padding: var(--space-3) var(--space-4); gap: 10px; } .premium-demo-card--size-md .premium-demo-card__logo { width: 44px; height: 44px; font-size: 15px; } .premium-demo-card--size-md .premium-demo-card__facts { padding: 10px 12px; gap: 8px; } .premium-demo-card--size-md .premium-demo-card__facts dd { font-size: 12px; } .premium-demo-card--size-sm { max-width: 100%; } .premium-demo-card--size-sm .premium-demo-card__media { aspect-ratio: 16 / 10; max-height: 120px; } .premium-demo-card--size-sm .premium-demo-card__body { padding: var(--space-3); gap: 8px; } .premium-demo-card--size-sm h3 { font-size: 16px; } .premium-demo-card--size-sm .premium-demo-card__desc { font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .premium-demo-card--size-sm .premium-demo-card__facts { padding: 8px 10px; gap: 6px; } .premium-demo-card--size-sm .premium-demo-card__facts dt { font-size: 10px; } .premium-demo-card--size-sm .premium-demo-card__facts dd { font-size: 11px; font-weight: 600; } .premium-demo-card--size-sm .premium-demo-card__badge { top: 8px; left: 8px; padding: 3px 8px; font-size: 10px; } .premium-demo-card--size-sm .btn { padding: 7px 12px; font-size: 12px; } .listing-preview__head { margin: 0 0 var(--space-3); text-align: center; } .listing-preview__head h3 { margin: 0 0 2px; font-family: var(--font-serif); font-size: clamp(18px, 2vw, 22px); color: var(--ic-navy); } .listing-preview__price { margin: 0 0 4px; font-family: var(--font-serif); font-size: 22px; line-height: 1; color: var(--ic-navy); } .listing-preview__price span { font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--text-muted); } .listing-preview__note { margin: 0; font-size: 14px; color: var(--text-muted); } .premium-demo-card--basic { border-color: var(--border); box-shadow: var(--shadow-sm); background: linear-gradient(180deg, #fff 0%, #f8f9fc 100%); } .premium-demo-card--basic:hover { box-shadow: var(--shadow); } .premium-demo-card__body--basic { padding-top: var(--space-4); } .premium-demo-card__brand--flush { margin-top: 0; } .premium-demo-card__logo--basic { color: var(--ic-navy); border: 1px solid var(--border); box-shadow: none; } .premium-demo-card__basic-hint { margin: 0; font-size: 12px; font-style: italic; line-height: 1.4; color: var(--text-muted); } /* Compact all ad demos inside listing-previews on laptop screens */ .section--listing-previews .premium-demo-card { border-radius: 18px; border: 1px solid rgba(23, 37, 90, 0.12); box-shadow: 0 10px 28px rgba(23, 37, 90, 0.12), 0 1px 4px rgba(23, 37, 90, 0.06); background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.9) 100%); } .section--listing-previews .premium-demo-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(23, 37, 90, 0.18), 0 2px 8px rgba(23, 37, 90, 0.08); } .section--listing-previews .premium-demo-card--size-lg { border-color: color-mix(in srgb, #d29228 45%, transparent); box-shadow: 0 14px 34px rgba(138, 90, 18, 0.18), 0 2px 8px rgba(23, 37, 90, 0.08); } .section--listing-previews .premium-demo-card--featured-plan { border-color: color-mix(in srgb, #601d2e 35%, #d29228); } .section--listing-previews .premium-demo-card--event { border-color: color-mix(in srgb, #2e6464 40%, transparent); } .section--listing-previews .premium-demo-card__media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 42%; background: linear-gradient(180deg, transparent, rgba(8, 20, 40, 0.35)); pointer-events: none; } .section--listing-previews .premium-demo-card__brand { margin-top: -28px; gap: var(--space-2); } .section--listing-previews .premium-demo-card__badge { top: 10px; left: 10px; padding: 4px 9px; font-size: 10px; } .section--listing-previews .premium-demo-card__promo { grid-template-columns: 72px minmax(0, 1fr); gap: 10px; padding: 8px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(210, 146, 40, 0.2); } .section--listing-previews .premium-demo-card__promo img { width: 72px; height: 54px; } .section--listing-previews .premium-demo-card__actions .btn { padding: 8px 14px; font-size: 13px; } .section--listing-previews .listing-preview--premium .premium-demo-card__actions .btn { background: transparent; border: 1.5px solid #8a5a12; color: #8a5a12; box-shadow: none; } .section--listing-previews .listing-preview--premium .premium-demo-card__actions .btn:hover { background: rgba(138, 90, 18, 0.1); border-color: #8a5a12; color: #8a5a12; } .section--listing-previews .listing-preview-include p { font-size: 13px; line-height: 1.45; } .premium-demo-card--featured-plan { border-color: color-mix(in srgb, var(--logo-color) 40%, var(--border)); } .premium-demo-card__badge--featured { background: linear-gradient(135deg, var(--logo-color), #3a5f9e); color: #fff; } .premium-demo-card__badge--event { background: linear-gradient(135deg, var(--ic-teal), #1a8a84); color: #fff; } .premium-demo-card--event { border-color: color-mix(in srgb, var(--ic-teal) 40%, var(--border)); } .premium-demo-card__promo { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--ic-gold) 35%, var(--border)); background: linear-gradient(180deg, #fffdf6 0%, #fff 100%); } .premium-demo-card__promo img { width: 96px; height: 72px; object-fit: cover; border-radius: 10px; display: block; } .premium-demo-card__promo-label { display: block; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #8a5a00; margin-bottom: 2px; } .premium-demo-card__promo strong { display: block; font-size: 14px; color: var(--ic-navy); margin-bottom: 2px; } .premium-demo-card__promo p { margin: 0; font-size: 12px; line-height: 1.4; color: var(--text-muted); } @media (max-width: 900px) { .premium-demo-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } .listing-preview-grid { grid-template-columns: 1fr; max-width: none; } .listing-preview-pair { flex-direction: column; align-items: center; max-width: none; margin-inline: 0; } .listing-preview-pair .listing-preview__actions { grid-template-columns: 1fr; } .premium-demo-card--size-lg .premium-demo-card__media { aspect-ratio: 16 / 9; min-height: 0; } .premium-demo-card--size-lg .premium-demo-card__facts { grid-template-columns: 1fr; } } @media (max-width: 640px) { .premium-demo-card__promo { grid-template-columns: 1fr; } .premium-demo-card__promo img { width: 100%; height: 120px; } } /* --- Event cards with photo banner + date badge --- */ .event { display: flex; flex-direction: column; gap: 0; padding: 0; } .event__media { height: 132px; position: relative; } .event__media img { width: 100%; height: 100%; object-fit: cover; } .event__row { display: flex; gap: var(--space-4); padding: var(--space-4); align-items: center; } .event__date-wrap { position: relative; flex: none; width: 72px; align-self: stretch; min-height: 72px; } .event__claim { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 8px 6px; border-radius: 12px; text-align: center; text-decoration: none; font-size: 11px; font-weight: 800; line-height: 1.2; letter-spacing: 0.02em; color: #fff; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: none; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .event__body { min-width: 0; } .event__body h3 { margin: 0 0 4px; font-size: 16px; } .event__body p { margin: 0; color: var(--text-muted); font-size: 14px; } .event__claim:hover, .event__claim:focus-visible { background: rgba(255, 255, 255, 0.28); border-color: rgba(255, 255, 255, 0.65); color: #fff; outline: none; transform: scale(1.03); } /* --- Around Town / announcement / deal list items --- */ .note { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); } .note__media { margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-1); height: 158px; position: relative; } .note__media img { width: 100%; height: 100%; object-fit: cover; } .note h3 { margin: 0; font-size: 17px; } .note p { margin: 0; color: var(--text-muted); font-size: 14px; } .note__foot { margin-top: var(--space-2); font-size: 13px; font-weight: 600; color: var(--text-muted); } .deal__tag { align-self: flex-start; background: var(--tint-gold); color: #7a5a00; } /* --- Community Voices (testimonials) --- */ .voice { padding: var(--space-6) var(--space-5); } .voice p { margin: 0 0 var(--space-4); font-size: 16px; font-style: italic; color: #2b3346; } .voice__who { display: flex; align-items: center; gap: var(--space-3); } .voice__avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--accent-tint, var(--tint-navy)); color: var(--accent, var(--ic-navy)); display: grid; place-items: center; font-weight: 700; overflow: hidden; flex: none; } .voice__avatar img { width: 100%; height: 100%; object-fit: cover; } .voice__who b { display: block; font-size: 14px; } .voice__who span { font-size: 13px; color: var(--text-muted); } .voice__num { display: inline-block; font-family: var(--font-sans); font-style: normal; font-weight: 800; font-size: 12px; letter-spacing: 0.08em; color: #fff; background: rgba(10, 18, 40, 0.42); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px; padding: 3px 10px; margin: 0 0 12px; } .voices-toggle { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; white-space: nowrap; flex: none; margin-left: auto; } .voices-grid:not(.is-open) .voices-grid__extra { display: none; } /* ============================================================================ WHY JOIN ========================================================================== */ .why-card { padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; height: 100%; } .why-card__media { margin: calc(var(--space-6) * -1) calc(var(--space-5) * -1) var(--space-5); height: 148px; position: relative; } .why-card__media img { width: 100%; height: 100%; object-fit: cover; } .why-card__icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-tint, var(--tint-navy)); color: var(--accent, var(--ic-navy)); margin-bottom: var(--space-4); } .why-card__icon svg { width: 24px; height: 24px; } .why-card h3 { margin: 0 0 var(--space-2); font-size: 19px; } .why-card p { margin: 0 0 var(--space-4); color: var(--text-muted); font-size: 14px; } .why-card ul { margin: 0 0 var(--space-5); padding-left: 18px; color: var(--text-muted); font-size: 14px; } .why-card ul li { margin-bottom: 4px; } .why-card .btn { margin-top: auto; align-self: flex-start; } /* ============================================================================ MOBILE APP CTA ========================================================================== */ .app { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); align-items: center; } .app__eyebrow { color: #ffe5e5; } .app h2 { font-family: var(--font-serif); font-size: clamp(26px, 3.4vw, 38px); margin: 0 0 var(--space-3); color: #fff; } .app p { color: #fff5f5; font-size: 17px; margin: 0 0 var(--space-5); max-width: 52ch; } .app__badges { display: flex; flex-wrap: wrap; gap: var(--space-3); } .store-badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 12px; background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255,255,255,0.28); color: #fff; text-decoration: none; } .store-badge svg { width: 22px; height: 22px; } .store-badge b { display: block; font-size: 15px; line-height: 1.1; } .store-badge span { font-size: 11px; opacity: 0.8; } .app__phone { justify-self: center; width: min(280px, 80%); aspect-ratio: 9 / 16; border-radius: 34px; background: #0e1836; border: 8px solid #0e1836; box-shadow: var(--shadow-lg); overflow: hidden; display: grid; place-items: center; padding: 0; } .app__phone img { width: 100%; height: 100%; object-fit: cover; } /* ============================================================================ NEWSLETTER ========================================================================== */ .newsletter { text-align: center; } .newsletter__card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(28px, 5vw, 56px); max-width: 760px; margin: 0 auto; } .newsletter h2 { font-family: var(--font-serif); font-size: clamp(24px, 3vw, 34px); margin: 0 0 var(--space-2); } .newsletter p { color: var(--text-muted); margin: 0 auto var(--space-5); max-width: 48ch; } .newsletter__form { display: flex; gap: var(--space-2); max-width: 520px; margin: 0 auto; } .newsletter__form input { flex: 1; min-width: 0; padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: 10px; font-size: 15px; font-family: inherit; } .newsletter__form input:focus { outline: none; border-color: var(--logo-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--logo-color) 18%, transparent); } .newsletter__note { font-size: 12px; color: var(--text-muted); margin-top: var(--space-3); } /* ============================================================================ FOOTER ========================================================================== */ .site-footer { /* Muted, grounded take on the mint green (#99E6B2) — deep sage that still reads as the same color family but sits comfortably with the site. */ background: linear-gradient(168deg, #2f6f4d 0%, #245a3e 60%, #1f4f37 100%); border-top: 1px solid rgba(157, 226, 184, 0.35); color: #eaf5ee; } .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-6); padding: var(--space-8) 0 var(--space-7); } .footer-brand p { color: rgba(234, 245, 238, 0.78); font-size: 14px; max-width: 34ch; margin: var(--space-4) 0; } .footer-social { display: flex; gap: var(--space-2); } .footer-social a { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22); color: #f4fbf7; } .footer-social a:hover { color: #ffffff; border-color: #ed1c24; background: #ed1c24; } .footer-social svg { width: 18px; height: 18px; } .footer-col h4 { margin: 0 0 var(--space-4); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: #ffffff; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); } .footer-col a { color: rgba(234, 245, 238, 0.85); text-decoration: none; font-size: 14px; } .footer-col a:hover { color: #ffffff; } .footer-col li { color: rgba(234, 245, 238, 0.72); font-size: 14px; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.16); padding: var(--space-5) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; color: rgba(234, 245, 238, 0.72); font-size: 13px; } .footer-credit { color: rgba(234, 245, 238, 0.72); font-size: 12px; } .footer-bottom .footer-credit a { color: #ffffff; text-decoration: underline; text-underline-offset: 2px; } .footer-bottom .footer-credit a:hover { color: #ffffff; } .footer-bottom nav { display: flex; gap: var(--space-5); flex-wrap: wrap; } .footer-bottom a { color: rgba(234, 245, 238, 0.8); text-decoration: none; } .footer-bottom a:hover { color: #ffffff; } /* ============================================================================ BROWSE BY CATEGORY (Sparkle-style category-first navigation, modernized) ========================================================================== */ .cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); } .cat-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; padding: var(--space-5) var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease; } .cat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); } .cat-card__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-tint, var(--tint-navy)); color: var(--accent, var(--ic-navy)); } .cat-card__icon svg { width: 26px; height: 26px; } .cat-card b { font-size: 14px; font-weight: 700; line-height: 1.2; } .cat-card span { font-size: 12px; color: var(--text-muted); } /* Denomination browse grid (church directory) */ .denom-grid { grid-template-columns: repeat(5, 1fr); } button.cat-card { appearance: none; font: inherit; cursor: pointer; width: 100%; } .denom-status { margin: 0 0 var(--space-4); padding: 10px 14px; border-radius: var(--radius); background: color-mix(in srgb, var(--ic-navy) 8%, #fff); border: 1px solid color-mix(in srgb, var(--ic-navy) 18%, var(--border)); color: var(--text); font-size: 14px; font-weight: 600; } .denom-card.is-active, .biz-cat-card.is-active { border-color: var(--accent, var(--logo-color)); box-shadow: var(--shadow); outline: 2px solid color-mix(in srgb, var(--accent, var(--logo-color)) 45%, transparent); outline-offset: 2px; background: color-mix(in srgb, var(--accent, var(--logo-color)) 6%, #fff); } .denom-card__icon { background: #fff; border: 1px solid var(--border); overflow: hidden; pointer-events: none; } .denom-card__icon img { width: 36px; height: 36px; object-fit: contain; display: block; pointer-events: none; } @media (max-width: 1080px) { .denom-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 820px) { .denom-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .denom-grid { grid-template-columns: repeat(2, 1fr); } } /* ============================================================================ EVENT TYPE QUICK LINKS ========================================================================== */ .type-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); } .type-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); text-decoration: none; font-weight: 600; font-size: 14px; transition: color 0.14s ease, border-color 0.14s ease; } .type-chip:hover { border-color: var(--logo-color); color: var(--logo-color); } .type-chip svg { width: 16px; height: 16px; } .home-events-directory-link { margin: var(--space-6) 0 0; text-align: center; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.88); } .home-events-directory-link a { color: #ffffff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .home-events-directory-link a:hover { opacity: 0.9; } /* ============================================================================ "BE FIRST TO JOIN / FREE AD" CALL-TO-ACTION BAND ========================================================================== */ .join-band__inner { background: linear-gradient(135deg, #1b485f, #0f3040); color: #fff; border-radius: var(--radius-lg); padding: clamp(28px, 5vw, 52px); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; box-shadow: var(--shadow-lg); } .join-band__text { max-width: 62ch; } .join-band .eyebrow { color: #cfe0ff; } .join-band h2 { font-family: var(--font-serif); font-size: clamp(24px, 3.2vw, 34px); margin: 0 0 var(--space-2); color: #fff; } .join-band p { margin: 0; color: #d6e0f5; font-size: 16px; } /* ============================================================================ PUBLIC ACCOUNT + LISTING / ADVERTISING PLANS ========================================================================== */ .section--public-account { background: radial-gradient(ellipse 80% 60% at 10% 20%, rgba(15, 52, 96, 0.06), transparent 55%), radial-gradient(ellipse 70% 50% at 90% 80%, rgba(196, 154, 58, 0.08), transparent 50%), var(--bg); } .public-account { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-7) var(--space-8); align-items: start; } .public-account__intro .section-title { margin-bottom: var(--space-3); } .public-account__intro .section-sub { margin-bottom: var(--space-5); max-width: 44ch; } .public-account__benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .public-account__benefits li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--text); } .public-account__benefits li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 0.45em; border-radius: 50%; background: var(--ic-gold); box-shadow: 0 0 0 3px rgba(196, 154, 58, 0.18); } .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); align-items: stretch; padding-top: 18px; } .price-card { position: relative; isolation: isolate; overflow: hidden; padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; height: 100%; border: 1px solid transparent; border-radius: 22px; background: #fff; box-shadow: 0 10px 28px rgba(23, 37, 90, 0.1), 0 2px 6px rgba(23, 37, 90, 0.05); transition: transform 0.22s ease, box-shadow 0.22s ease; } .price-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 7px; z-index: 1; background: linear-gradient(90deg, #1b485f, #d29228, #601d2e); } .price-card::after { content: ""; position: absolute; inset: -20% -30% auto auto; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.55), transparent 68%); pointer-events: none; z-index: 0; } .price-card > * { position: relative; z-index: 1; } .price-card:hover { transform: translateY(-6px); box-shadow: 0 18px 42px rgba(23, 37, 90, 0.16), 0 4px 12px rgba(23, 37, 90, 0.08); } .price-card--featured { border: 1.5px solid rgba(27, 72, 95, 0.35); box-shadow: 0 16px 40px rgba(96, 29, 46, 0.18), 0 4px 12px rgba(23, 37, 90, 0.1); position: relative; overflow: visible; transform: translateY(-4px); } .price-card--featured:hover { transform: translateY(-10px); } .price-card__tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #601d2e, #1b485f); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 16px; border-radius: var(--radius-pill); white-space: nowrap; z-index: 2; box-shadow: 0 6px 16px rgba(96, 29, 46, 0.35); } .price-card h3 { margin: 0; font-size: 18px; } .price-card .price { font-family: var(--font-serif); font-size: 40px; color: var(--ic-navy); margin: var(--space-3) 0 2px; line-height: 1; } .price-card .price small { font-size: 14px; color: var(--text-muted); font-family: var(--font-sans); font-weight: 600; } .price-card .price-sub { color: var(--text-muted); font-size: 14px; margin: 0 0 var(--space-4); } .price-card ul { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: 9px; color: var(--text-muted); font-size: 14px; } .price-card ul li { display: flex; gap: 9px; align-items: flex-start; } .price-card ul li::before { content: "\2713"; color: var(--success); font-weight: 800; flex: none; } .price-card .price-note { margin: 0 0 var(--space-5); font-size: 13px; line-height: 1.4; color: var(--text-muted); font-style: italic; } .price-card .btn { width: 100%; min-height: 48px; margin-top: auto; padding: 11px 10px; white-space: normal; line-height: 1.25; text-align: center; } /* Distinct artistic washes per plan */ .price-card--free { background: radial-gradient(ellipse 90% 60% at 0% 0%, rgba(79, 111, 85, 0.28), transparent 55%), linear-gradient(165deg, #f4faf5 0%, #dff0e4 48%, #cfe6d6 100%); border-color: color-mix(in srgb, #4f6f55 35%, transparent); } .price-card--free::before { background: linear-gradient(90deg, #4f6f55, #2e6464, #d29228); } .price-card--free .price { color: #2d5a38; } .price-card--free ul li::before { color: #2d5a38; } .price-card--free .btn--solid { background: linear-gradient(135deg, #2e6464, #4f6f55); border-color: transparent; color: #fff; box-shadow: 0 8px 18px rgba(46, 100, 100, 0.28); } .price-card--free .btn--solid:hover { background: linear-gradient(135deg, #245252, #3d5944); border-color: transparent; } .price-card--basic { background: radial-gradient(ellipse 80% 55% at 100% 0%, rgba(27, 72, 95, 0.18), transparent 55%), linear-gradient(165deg, #ffffff 0%, #eef4f8 55%, #dce8f0 100%); border-color: color-mix(in srgb, #1b485f 22%, transparent); } .price-card--basic::before { background: linear-gradient(90deg, #1b485f, #506e7e, #e7cca1); } .price-card--basic .price { color: #1b485f; } .price-card--featured { background: radial-gradient(ellipse 100% 70% at 50% -10%, rgba(210, 146, 40, 0.35), transparent 55%), linear-gradient(165deg, #fff8ec 0%, #f3e2c4 40%, #ead4ad 100%); border-color: color-mix(in srgb, #d29228 45%, #601d2e); } .price-card--featured::before { background: linear-gradient(90deg, #d29228, #601d2e, #1b485f); height: 8px; } .price-card--featured .price { color: #601d2e; } .price-card--featured h3 { color: #3a121c; } .price-card--featured .btn--solid { background: linear-gradient(135deg, #601d2e, #1b485f); border-color: transparent; color: #fff; box-shadow: 0 10px 22px rgba(96, 29, 46, 0.3); } .price-card--featured .btn--solid:hover { background: linear-gradient(135deg, #4c1724, #14384a); border-color: transparent; } .price-card--premium { background: radial-gradient(ellipse 85% 60% at 0% 100%, rgba(176, 106, 46, 0.22), transparent 55%), linear-gradient(165deg, #fffdf8 0%, #f7ebcf 50%, #efd8a4 100%); border-color: color-mix(in srgb, #d29228 40%, transparent); } .price-card--premium::before { background: linear-gradient(90deg, #d29228, #b06a2e, #601d2e); } .price-card--premium .price { color: #8a5a12; } .price-card--premium ul li::before { color: #b06a2e; } .price-card--community { background: radial-gradient(ellipse 90% 55% at 100% 100%, rgba(80, 110, 126, 0.28), transparent 55%), linear-gradient(165deg, #f5fafb 0%, #e2eef3 48%, #c9dde8 100%); border-color: color-mix(in srgb, #506e7e 35%, transparent); } .price-card--community::before { background: linear-gradient(90deg, #506e7e, #1b485f, #2e6464); } .price-card--community .price { color: #1b485f; } .price-card--community .btn--solid { background: linear-gradient(135deg, #1b485f, #506e7e); border-color: transparent; color: #fff; box-shadow: 0 8px 18px rgba(27, 72, 95, 0.28); } .price-card--community .btn--solid:hover { background: linear-gradient(135deg, #14384a, #3f5866); border-color: transparent; } .price-card--connect { background: radial-gradient(ellipse 90% 55% at 0% 100%, rgba(196, 154, 58, 0.28), transparent 55%), linear-gradient(165deg, #fffbf2 0%, #f7edd6 48%, #efe0b8 100%); border-color: color-mix(in srgb, #c49a3a 40%, transparent); } .price-card--connect::before { background: linear-gradient(90deg, #f0c14b, #c49a3a, #8a5a12); } .price-card--connect .price { color: #8a5a12; } .price-card--connect ul li::before { color: #b8860b; } .price-card--connect .btn--solid { background: linear-gradient(135deg, #8a5a12, #c49a3a); border-color: transparent; color: #fff; box-shadow: 0 8px 18px rgba(138, 90, 18, 0.28); } .price-card--connect .btn--solid:hover { background: linear-gradient(135deg, #6e480e, #a87f2e); border-color: transparent; } .price-card--personal-ad { background: radial-gradient(ellipse 90% 55% at 100% 0%, rgba(196, 92, 138, 0.22), transparent 55%), linear-gradient(165deg, #fff7fb 0%, #fde8f1 48%, #f3d5e4 100%); border-color: color-mix(in srgb, #c45c8a 40%, transparent); } .price-card--personal-ad::before { background: linear-gradient(90deg, #c45c8a, #9b3d66, #601d2e); } .price-card--personal-ad .price { color: #9b3d66; } .price-card--personal-ad ul li::before { color: #c45c8a; } .price-card--personal-ad .btn--solid { background: linear-gradient(135deg, #9b3d66, #c45c8a); border-color: transparent; color: #fff; box-shadow: 0 8px 18px rgba(155, 61, 102, 0.28); } .price-card--personal-ad .btn--solid:hover { background: linear-gradient(135deg, #7a2f50, #a84d72); border-color: transparent; } /* Homepage pricing — blue stage with a soft spotlight so plan cards stay the focus */ .section--pricing-royal { background: radial-gradient(ellipse 80% 60% at 50% -5%, rgba(255, 255, 255, 0.3), transparent 58%), radial-gradient(ellipse 70% 55% at 100% 100%, rgba(10, 40, 80, 0.28), transparent 55%), #3a83d8; } .section--pricing-royal .eyebrow, .section--pricing-royal .section-title { color: #ffffff; } .section--pricing-royal .section-sub, .section--pricing-royal .price-orgs-note { color: rgba(255, 255, 255, 0.9); } .section--pricing-royal .price-orgs-note strong { color: #ffffff; } .price-grace-callout { max-width: 56rem; margin: 0 auto var(--space-6); padding: 14px 22px; text-align: center; font-size: 15px; line-height: 1.55; color: #1a2744; background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(255, 255, 255, 0.65); border-radius: 14px; box-shadow: 0 8px 22px rgba(10, 30, 70, 0.18); } .price-grace-callout strong { color: #17255a; font-weight: 800; } .section--pricing-royal .price-grace-callout { color: #1a2744; } /* ========================================================================== CAROLINAS FOUNDING MEMBER — pricing campaign ========================================================================== */ .cfm-hero { max-width: 46rem; margin: 0 auto clamp(1.75rem, 4vw, 2.75rem); text-align: center; } .cfm-hero__eyebrow { margin: 0 0 0.65rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 232, 180, 0.95); } .cfm-hero__title { margin: 0 0 0.75rem; font-family: var(--font-serif); font-size: clamp(1.85rem, 4.2vw, 2.85rem); line-height: 1.12; letter-spacing: -0.02em; color: #fff; } .cfm-hero__lock { margin: 0 0 1.35rem; font-size: clamp(1.05rem, 2.2vw, 1.35rem); font-weight: 700; line-height: 1.35; color: #ffe8b4; } .cfm-hero__copy { text-align: left; max-width: 40rem; margin: 0 auto; } .cfm-hero__copy p { margin: 0 0 0.85rem; font-size: 1.02rem; line-height: 1.6; color: rgba(255, 255, 255, 0.92); } .cfm-hero__copy strong { color: #fff; font-weight: 800; } .price-grid--founding { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: clamp(1.75rem, 4vw, 2.75rem); } .price-card--showcase { max-width: 36rem; margin: 0 auto clamp(1.75rem, 4vw, 2.75rem); } .price-card--founding { overflow: visible; } .cfm-plan-badge { margin: 0 0 0.55rem; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #8a5a12; } .cfm-price-label { margin: 0.35rem 0 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); } .cfm-regular { margin: 0.35rem 0 1rem; font-size: 0.9rem; color: var(--text-muted); } .cfm-regular__strike { text-decoration: line-through; text-decoration-thickness: 1.5px; opacity: 0.85; } /* Membership plan benefits + ⓘ tips + Founding lock-in emphasis */ .plan-tagline { margin: 0 0 0.85rem; font-size: 0.95rem; font-weight: 600; color: var(--text-muted); line-height: 1.35; } .plan-benefits { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.55rem; } .plan-benefits > li, .plan-benefit { display: flex; align-items: flex-start; gap: 0.35rem; margin: 0; padding: 0; font-size: 0.92rem; line-height: 1.4; color: var(--text); } .plan-benefit__text { flex: 1; min-width: 0; } .plan-benefit--lock-in, .plan-benefit--lock-in .plan-benefit__text { color: var(--ic-recognition-navy, #1c2a5d); font-weight: 800; letter-spacing: 0.01em; } .price-card .plan-benefit--lock-in::before, .section--pricing-royal .price-card .plan-benefit--lock-in::before { color: var(--ic-recognition-navy, #1c2a5d); } .plan-benefit--lock-in { margin-top: 0.2rem; animation: plan-lock-in-pulse 2.8s ease-in-out infinite; } @keyframes plan-lock-in-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.88; } } @media (prefers-reduced-motion: reduce) { .plan-benefit--lock-in { animation: none; } } .plan-info { position: relative; flex: none; display: inline-flex; align-items: flex-start; margin-top: 0.05rem; z-index: 2; } .plan-info__btn { appearance: none; border: 0; background: transparent; color: inherit; font-size: 0.95rem; line-height: 1; padding: 0.1rem; margin: 0; cursor: pointer; border-radius: 999px; opacity: 0.9; } .plan-info__btn:hover, .plan-info__btn:focus-visible, .plan-info__btn[aria-expanded="true"] { opacity: 1; outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--ic-gold) 45%, transparent); } .plan-info__panel { position: absolute; z-index: 80; left: auto; right: 0; top: calc(100% + 10px); /* Avoid transform — subpixel transforms + parent card effects blur tooltip text */ transform: none; width: min(18.5rem, 72vw); padding: 0.8rem 0.9rem; background: #ffffff; color: #1a1a1a; border: 1px solid #e6e8ef; border-radius: 10px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); text-align: left; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: geometricPrecision; filter: none; opacity: 1; backdrop-filter: none; } .plan-info__title { display: block; margin: 0 0 0.4rem; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ic-wine, #7a1e2e); font-weight: 800; -webkit-font-smoothing: antialiased; } .plan-info__body { margin: 0; font-size: 0.88rem; line-height: 1.5; font-weight: 600; color: #1a1a1a; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-shadow: none; filter: none; opacity: 1; } .ead-package__tagline { margin: 0.35rem 0 0.5rem; font-size: 0.84rem; } .ead-package__benefits { margin: 0.25rem 0 0; gap: 0.4rem; } .ead-package__benefits .plan-benefit, .ead-package__benefits > li { font-size: 0.8rem; } .plan-info__panel--source { display: none !important; } .plan-info__panel--float { position: fixed; z-index: 10000; left: 12px; top: 12px; right: auto; transform: none; width: min(18.5rem, calc(100vw - 24px)); padding: 0.85rem 0.95rem; background: #ffffff; color: #1a1a1a; border: 1px solid #e6e8ef; border-radius: 10px; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22); text-align: left; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: geometricPrecision; filter: none; opacity: 1; backdrop-filter: none; } .plan-info__panel--float .plan-info__title { color: var(--ic-wine, #7a1e2e); font-weight: 800; } .plan-info__panel--float .plan-info__body { color: #1a1a1a; font-weight: 600; font-size: 0.9rem; line-height: 1.5; text-shadow: none; filter: none; } /* Founding Member cards on the royal blue pricing stage */ .section--pricing-royal .price-card--founding, .section--pricing-royal .price-card--founding.price-card--basic, .section--pricing-royal .price-card--founding.price-card--featured, .section--pricing-royal .price-card--founding.price-card--premium, .section--pricing-royal .price-card--showcase { overflow: visible; color: #ffffff; background: var(--band-card-bg); border-color: var(--band-card-border); } .section--pricing-royal .price-card--showcase { border-color: #c4a35a; box-shadow: 0 0 0 1px color-mix(in srgb, #c4a35a 35%, transparent); } /* Hover lift uses transform which can blur open ⓘ panels — keep shadow-only hover */ .section--pricing-royal .price-card--founding:hover, .section--pricing-royal .price-card--showcase:hover { transform: none; box-shadow: 0 18px 42px rgba(10, 30, 70, 0.28), 0 4px 12px rgba(10, 30, 70, 0.16); } .section--pricing-royal .price-card--founding .cfm-plan-badge, .section--pricing-royal .price-card--founding .cfm-price-label, .section--pricing-royal .price-card--founding h3, .section--pricing-royal .price-card--founding .price, .section--pricing-royal .price-card--founding .price small, .section--pricing-royal .price-card--founding .cfm-regular, .section--pricing-royal .price-card--founding .cfm-regular__strike, .section--pricing-royal .price-card--founding .plan-tagline, .section--pricing-royal .price-card--founding .plan-benefits, .section--pricing-royal .price-card--founding .plan-benefit, .section--pricing-royal .price-card--founding .plan-benefit__text, .section--pricing-royal .price-card--founding ul, .section--pricing-royal .price-card--founding .price-note, .section--pricing-royal .price-card--founding .plan-info__btn, .section--pricing-royal .price-card--showcase .cfm-plan-badge, .section--pricing-royal .price-card--showcase .cfm-price-label, .section--pricing-royal .price-card--showcase h3, .section--pricing-royal .price-card--showcase .price, .section--pricing-royal .price-card--showcase .price small, .section--pricing-royal .price-card--showcase .plan-tagline, .section--pricing-royal .price-card--showcase .plan-benefits, .section--pricing-royal .price-card--showcase .plan-benefit, .section--pricing-royal .price-card--showcase .plan-benefit__text, .section--pricing-royal .price-card--showcase ul, .section--pricing-royal .price-card--showcase .price-note, .section--pricing-royal .price-card--showcase .plan-info__btn { color: #ffffff; } .section--pricing-royal .price-card--founding .cfm-regular, .section--pricing-royal .price-card--founding .cfm-regular__strike, .section--pricing-royal .price-card--founding .plan-tagline, .section--pricing-royal .price-card--founding .price-note, .section--pricing-royal .price-card--founding .price small { opacity: 1; } .section--pricing-royal .price-card--founding ul li::before, .section--pricing-royal .price-card--founding .plan-benefit::before, .section--pricing-royal .price-card--showcase ul li::before, .section--pricing-royal .price-card--showcase .plan-benefit::before { color: #ffffff; } .section--pricing-royal .price-card--founding .plan-benefit--lock-in, .section--pricing-royal .price-card--founding .plan-benefit--lock-in .plan-benefit__text, .section--pricing-royal .price-card--founding .plan-benefit--lock-in::before { color: #1c2a5d !important; /* recognition navy — not bright red */ font-weight: 800; } /* Also Available cards: compact centered glass row (match classic founding layout) */ .section--pricing-royal .cfm-other { width: min(64rem, 100%); max-width: 64rem; margin-left: auto; margin-right: auto; margin-bottom: clamp(1.75rem, 4vw, 2.5rem); } .section--pricing-royal .price-grid--other { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.65rem, 1.5vw, 0.95rem); align-items: stretch; padding-top: 0.15rem; width: 100%; max-width: 100%; margin: 0 auto; } .section--pricing-royal .price-grid--other .price-card, .section--pricing-royal .price-grid--other .price-card.price-card--free, .section--pricing-royal .price-grid--other .price-card.price-card--community, .section--pricing-royal .price-grid--other .price-card.price-card--connect, .section--pricing-royal .price-grid--other .price-card.price-card--personal-ad { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 16px; padding: 1.15rem 0.95rem 1rem; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.38); box-shadow: none; color: #ffffff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .section--pricing-royal .price-grid--other .price-card:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.55); box-shadow: 0 12px 24px rgba(10, 30, 70, 0.16); } .section--pricing-royal .price-grid--other .price-card::after { opacity: 0.28; width: 120px; height: 120px; } .section--pricing-royal .price-grid--other .price-card h3 { font-size: 0.98rem; line-height: 1.25; color: #ffffff; } .section--pricing-royal .price-grid--other .price-card .price { font-size: clamp(1.65rem, 2.4vw, 2rem); margin: 0.55rem 0 0.15rem; color: #ffffff; } .section--pricing-royal .price-grid--other .price-card .price small { font-size: 0.78rem; color: rgba(255, 255, 255, 0.9); } .section--pricing-royal .price-grid--other .price-card .price-sub { font-size: 0.8rem; line-height: 1.35; margin: 0 0 0.7rem; color: rgba(255, 255, 255, 0.9); } .section--pricing-royal .price-grid--other .price-card ul { gap: 0.45rem; margin: 0 0 0.7rem; font-size: 0.78rem; line-height: 1.35; color: #ffffff; } .section--pricing-royal .price-grid--other .price-card ul li { color: #ffffff; } .section--pricing-royal .price-grid--other .price-card .price-note { font-size: 0.72rem; margin: 0 0 0.75rem; color: rgba(255, 255, 255, 0.88); } .section--pricing-royal .price-grid--other .price-card ul li::before { color: #ffffff; content: "\2713"; font-size: 0.78rem; } .section--pricing-royal .price-grid--other .price-card > a.btn { margin-top: auto; min-height: 42px; padding: 0.55rem 0.6rem; font-size: 0.86rem; background: transparent !important; border: 1.5px solid #fff !important; color: #fff !important; box-shadow: none !important; } .section--pricing-royal .price-grid--other .price-card--free::before { background: linear-gradient(90deg, #d29228, #e0b35a, #4f6f55); height: 5px; } .section--pricing-royal .price-grid--other .price-card--community::before { background: linear-gradient(90deg, #2e6464, #1b485f, #506e7e); height: 5px; } .section--pricing-royal .price-grid--other .price-card--connect::before { background: linear-gradient(90deg, #d29228, #b06a2e, #8a5a12); height: 5px; } .section--pricing-royal .price-grid--other .price-card--personal-ad::before { background: linear-gradient(90deg, #c45c8a, #9b3d66, #601d2e); height: 5px; } .cfm-other { margin: 0 auto clamp(1.75rem, 4vw, 2.5rem); } .cfm-other__title { margin: 0 0 0.4rem; text-align: center; font-family: var(--font-serif); font-size: clamp(1.25rem, 2.5vw, 1.55rem); color: #fff; } .cfm-other__sub { margin: 0 auto 1.1rem; max-width: 40rem; text-align: center; font-size: 0.95rem; line-height: 1.5; color: rgba(255, 255, 255, 0.9); } .price-grid--other { grid-template-columns: repeat(4, minmax(0, 1fr)); } .section--pricing-royal .price-card--founding .plan-info__panel, .section--pricing-royal .price-card--founding .plan-info__panel * { filter: none; text-shadow: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .section--pricing-royal .price-card--founding .plan-info__panel { background: #ffffff; color: #1a1a1a; border-color: #e6e8ef; } .section--pricing-royal .price-card--founding .plan-info__title { color: var(--ic-wine, #7a1e2e); } .section--pricing-royal .price-card--founding .plan-info__body { color: #1a1a1a; font-weight: 600; } .cfm-policy { margin: 1rem 0 0; padding: 0.95rem 1rem; border-radius: 12px; background: #ffffff; border: 1px solid color-mix(in srgb, #17255a 14%, #e6e8ef); } .section--pricing-royal .cfm-panel .cfm-policy { background: #ffffff; border-color: rgba(23, 37, 90, 0.16); box-shadow: 0 4px 14px rgba(10, 30, 70, 0.08); } .cfm-policy__title { margin: 0 0 0.45rem; font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 800; color: var(--ic-wine, #7a1e2e); } .section--pricing-royal .cfm-panel .cfm-policy__title { color: var(--ic-wine, #7a1e2e); } .cfm-policy__body { margin: 0; font-size: 0.95rem; line-height: 1.55; color: #1a2744; -webkit-font-smoothing: antialiased; } .section--pricing-royal .cfm-panel .cfm-policy__body { color: #1a2744; } .cfm-panel { max-width: 46rem; margin: 0 auto clamp(1.5rem, 3.5vw, 2.25rem); padding: clamp(1.35rem, 3vw, 1.85rem) clamp(1.25rem, 3vw, 1.75rem); border-radius: 18px; background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 12px 32px rgba(10, 30, 70, 0.16); color: #1a2744; } .cfm-panel__title { margin: 0 0 0.85rem; font-family: var(--font-serif); font-size: clamp(1.35rem, 2.8vw, 1.75rem); line-height: 1.2; color: var(--ic-navy); text-align: center; } .cfm-panel__body p { margin: 0 0 0.75rem; font-size: 1rem; line-height: 1.6; color: rgba(26, 39, 68, 0.88); } .cfm-panel__body p:last-child { margin-bottom: 0; } .cfm-panel--value { background: radial-gradient(ellipse 70% 80% at 0% 0%, rgba(210, 146, 40, 0.16), transparent 55%), rgba(255, 255, 255, 0.97); } .cfm-panel--define { background: radial-gradient(ellipse 70% 80% at 100% 0%, rgba(26, 58, 110, 0.1), transparent 55%), radial-gradient(ellipse 55% 70% at 0% 100%, rgba(210, 146, 40, 0.14), transparent 50%), rgba(255, 255, 255, 0.98); scroll-margin-top: 6rem; } .cfm-panel--lockin { background: radial-gradient(ellipse 65% 90% at 100% 0%, rgba(26, 58, 110, 0.1), transparent 55%), radial-gradient(ellipse 55% 70% at 0% 100%, rgba(210, 146, 40, 0.12), transparent 50%), rgba(255, 255, 255, 0.98); } .cfm-lockin-rates { list-style: none; margin: 1rem 0 0; padding: 0.85rem 1rem; border-radius: 12px; background: rgba(26, 58, 110, 0.06); border: 1px solid rgba(26, 58, 110, 0.12); } .cfm-lockin-rates li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.45rem 0; font-size: 0.98rem; color: rgba(26, 39, 68, 0.9); border-bottom: 1px solid rgba(26, 58, 110, 0.1); } .cfm-lockin-rates li:last-child { border-bottom: none; padding-bottom: 0; } .cfm-lockin-rates li:first-child { padding-top: 0; } .cfm-lockin-rates strong { font-variant-numeric: tabular-nums; color: var(--ic-navy); white-space: nowrap; } .cfm-panel--history { background: radial-gradient(ellipse 70% 80% at 50% 0%, rgba(210, 146, 40, 0.16), transparent 55%), rgba(255, 255, 255, 0.98); } .cfm-history__body { text-align: center; } .cfm-history__lead { font-size: 1.05rem; font-weight: 600; color: rgba(26, 39, 68, 0.92); } .cfm-history__milestones-title { margin: 1.15rem 0 0.75rem; font-family: var(--font-serif); font-size: clamp(1.15rem, 2.2vw, 1.35rem); color: var(--ic-navy); text-align: center; } .cfm-history__milestones { list-style: none; margin: 0 auto; padding: 0; max-width: 26rem; display: grid; gap: 0.55rem; } .cfm-history__milestones li { position: relative; padding: 0.7rem 0.9rem 0.7rem 2.55rem; border-radius: 12px; background: rgba(26, 58, 110, 0.05); border: 1px solid rgba(26, 58, 110, 0.1); color: rgba(26, 39, 68, 0.92); font-size: 0.98rem; font-weight: 650; line-height: 1.35; } .cfm-history__milestones li::before { content: "★"; position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); color: #e0b03a; font-size: 1.05rem; line-height: 1; text-shadow: 0 1px 0 rgba(120, 80, 0, 0.2); } .cfm-history__close { margin: 1.15rem 0 0; text-align: center; font-family: var(--font-serif); font-size: clamp(1.05rem, 2vw, 1.2rem); line-height: 1.45; color: var(--ic-navy); } .cfm-why { max-width: 52rem; margin: 0 auto clamp(1.75rem, 4vw, 2.5rem); text-align: center; } .cfm-why__title { margin: 0 0 1.1rem; font-family: var(--font-serif); font-size: clamp(1.35rem, 2.8vw, 1.75rem); color: #fff; } .cfm-why__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1rem; text-align: left; } .cfm-why__list li { position: relative; padding: 0.9rem 1rem 0.9rem 2.35rem; border-radius: 12px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); color: rgba(255, 255, 255, 0.95); font-size: 0.95rem; line-height: 1.45; font-weight: 600; } .cfm-why__list li::before { content: "✓"; position: absolute; left: 0.85rem; top: 0.9rem; color: #ffe8b4; font-weight: 800; } .cfm-recognition { width: 100vw; max-width: none; margin: 0 calc(50% - 50vw) clamp(1.75rem, 4vw, 2.5rem); padding: 0; text-align: center; color: #fff; background: #1c2a5d; border: none; border-radius: 0; box-shadow: none; overflow: hidden; } .cfm-recognition__layout { display: grid; gap: clamp(0.9rem, 2.2vw, 1.35rem); justify-items: center; width: min(46rem, calc(100% - 2.5rem)); max-width: none; margin: 0 auto; padding: clamp(1.5rem, 3.5vw, 2.25rem) 0 clamp(1.25rem, 3vw, 1.85rem); } .cfm-recognition__gifts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.75rem, 2vw, 1.15rem); width: 100%; max-width: 38rem; align-items: stretch; } .cfm-recognition__gift { margin: 0; width: 100%; max-width: 100%; text-align: center; display: flex; flex-direction: column; height: 100%; } .cfm-recognition__gift img { display: block; width: 100%; /* Exact certificate image ratio so certificate is unchanged; plaque fills the same box */ aspect-ratio: 1024 / 854; height: auto; object-fit: cover; object-position: center; border-radius: 10px; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.28)); background: rgba(8, 14, 40, 0.35); } .cfm-recognition__gift-caption { margin: 0.55rem 0 0; display: grid; gap: 0.2rem; color: rgba(255, 255, 255, 0.95); } .cfm-recognition__gift-caption strong { display: block; font-size: clamp(0.82rem, 1.25vw, 0.95rem); font-weight: 800; color: #ffe8b4; } .cfm-recognition__gift-caption span { display: block; font-size: clamp(0.75rem, 1.1vw, 0.85rem); line-height: 1.35; color: rgba(255, 255, 255, 0.92); } .cfm-recognition__award-photo { position: relative; z-index: 0; margin: 0; width: min(100%, 28rem); max-width: 100%; isolation: isolate; } .cfm-recognition__award-photo::before { content: ""; position: absolute; z-index: -1; pointer-events: none; /* Original warm spotlight behind the award */ inset: -18% -12% -8% -18%; background: radial-gradient( ellipse 80% 55% at 0% 0%, rgba(248, 226, 182, 0.68), rgba(223, 171, 72, 0.42) 42%, transparent 68% ); } .cfm-recognition__award-photo img { display: block; width: 100%; height: auto; border-radius: 14px; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.28)); } .cfm-recognition__closer { margin: 0.1rem 0 0; max-width: min(32rem, 100%); font-family: var(--font-serif); font-size: clamp(0.92rem, 1.6vw, 1.08rem); font-weight: 700; line-height: 1.3; color: #ffe8b4; text-align: center; } .cfm-recognition__copy { position: relative; z-index: 2; width: 100%; max-width: none; padding: 0 clamp(0.25rem, 1vw, 0.75rem) 0.2rem; margin: 0; text-align: center; background: #1c2a5d; } .cfm-recognition__title { margin: 0 0 0.3rem; font-family: var(--font-serif); font-size: clamp(1.12rem, 1.9vw, 1.4rem); color: #fff; } .cfm-recognition__award { margin: 0 auto; max-width: none; font-size: clamp(0.8rem, 1.2vw, 0.9rem); line-height: 1.4; color: rgba(255, 255, 255, 0.94); text-wrap: balance; } .cfm-recognition__link { color: inherit; font-weight: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; text-decoration-color: rgba(231, 204, 161, 0.85); } .cfm-recognition__link:hover, .cfm-recognition__link:focus-visible { color: #ffe8b4; text-decoration-color: #ffe8b4; } .cfm-recognition__note { margin: 0.2rem auto 0; max-width: none; font-size: 0.74rem; line-height: 1.4; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.78); text-wrap: balance; } .cfm-recognition__milestones { margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.22); } .cfm-founders-first10 { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; } .cfm-founders-first10__item { display: grid; gap: 0.1rem; } .cfm-founders-first10__rank { font-family: Syne, sans-serif; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.02em; color: #fff; } .cfm-founders-first10__name { font-size: 1.02rem; line-height: 1.35; color: rgba(255, 255, 255, 0.95); } .cfm-founders-first10__item.is-open .cfm-founders-first10__name { color: rgba(255, 255, 255, 0.45); } .cfm-founders-remaining { margin-top: 1.1rem; padding-top: 0.85rem; border-top: 1px solid rgba(255, 255, 255, 0.22); } .cfm-founders-remaining__label { margin: 0; font-family: Syne, sans-serif; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; color: #fff; } .cfm-founders-remaining__value { margin: 0.2rem 0 0; font-size: 1.05rem; color: rgba(255, 255, 255, 0.95); } /* Site-wide Admin access modal + dashboard */ .ic-admin-header-link { font-weight: 700; letter-spacing: 0.02em; } .ic-admin-access { position: fixed; inset: 0; z-index: 12000; display: grid; place-items: center; padding: 1rem; } .ic-admin-access[hidden] { display: none !important; } .ic-admin-access__backdrop { position: absolute; inset: 0; background: rgba(10, 22, 48, 0.55); } .ic-admin-access__card { position: relative; z-index: 1; width: min(100%, 24rem); padding: 1.35rem 1.25rem; border-radius: 16px; background: #fff; color: #1a2744; box-shadow: 0 18px 48px rgba(10, 22, 48, 0.28); } .ic-admin-access__card h2 { margin: 0 0 0.4rem; font-size: 1.35rem; } .ic-admin-access__card > p { margin: 0 0 1rem; color: rgba(26, 39, 68, 0.72); font-size: 0.95rem; line-height: 1.45; } .ic-admin-access__error { margin: 0.35rem 0 0; color: #b00020; font-size: 0.9rem; } .ic-admin-access__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } body.ic-admin-access-open { overflow: hidden; } .admin-dash__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.25rem; } .admin-dash__note { margin: 0; color: var(--text-muted); } .admin-dash__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; } .admin-dash__card { display: flex; flex-direction: column; gap: 0.45rem; padding: 1.15rem 1.2rem; text-decoration: none; color: inherit; border: 1px solid rgba(26, 39, 68, 0.12); transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .admin-dash__card:hover { border-color: rgba(26, 39, 68, 0.28); box-shadow: 0 10px 28px rgba(10, 30, 70, 0.1); transform: translateY(-2px); } .admin-dash__eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(26, 39, 68, 0.55); } .admin-dash__card h2 { margin: 0; font-size: 1.2rem; line-height: 1.25; } .admin-dash__card p { margin: 0; flex: 1; color: rgba(26, 39, 68, 0.72); font-size: 0.95rem; line-height: 1.45; } .admin-dash__cta { margin-top: 0.35rem; font-weight: 700; color: var(--ic-navy); font-size: 0.92rem; } /* Founding Members admin */ .founders-admin__toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .founders-admin__filters, .founders-admin__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } .founders-admin__filters .btn.is-active { background: var(--ic-navy); color: #fff; border-color: var(--ic-navy); } .founders-admin__count { margin: 0 0 0.75rem; color: var(--text-muted); font-size: 0.92rem; } .founders-admin__table-wrap { overflow-x: auto; margin-bottom: 1.5rem; } .founders-admin__table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .founders-admin__table th, .founders-admin__table td { padding: 0.55rem 0.65rem; text-align: left; border-bottom: 1px solid rgba(26, 39, 68, 0.12); vertical-align: top; } .founders-admin__table th { white-space: nowrap; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(26, 39, 68, 0.7); } .founders-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-transform: inherit; letter-spacing: inherit; } .founders-sort:hover { color: var(--ic-navy); } .founders-admin__empty { text-align: center; color: var(--text-muted); padding: 1.25rem !important; } .founders-admin__dev { padding: 1.25rem; max-width: 36rem; } .founders-admin__mark-paid { display: grid; gap: 0.75rem; margin-top: 0.75rem; } .founders-admin__result { margin: 0.75rem 0 0; font-weight: 600; } .cfm-cta { max-width: min(40rem, 100%); margin: 0 auto clamp(1.75rem, 4vw, 2.5rem); padding: clamp(1.35rem, 3vw, 1.75rem) clamp(1.15rem, 2.5vw, 1.5rem); text-align: center; border-radius: 18px; background: radial-gradient(ellipse 80% 70% at 50% 0%, rgba(255, 255, 255, 0.2), transparent 60%), linear-gradient(160deg, #1a2f66 0%, #17255a 55%, #601d2e 100%); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 16px 40px rgba(10, 20, 50, 0.28); } .cfm-cta__title { margin: 0 0 0.55rem; font-family: var(--font-serif); font-size: clamp(1.4rem, 3vw, 1.85rem); color: #fff; line-height: 1.2; } .cfm-cta__sub { margin: 0 0 1.25rem; font-size: 1.02rem; line-height: 1.5; color: rgba(255, 255, 255, 0.9); } .cfm-cta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } .cfm-cta__primary.btn--solid { background: linear-gradient(135deg, #e0a43a, #c4841c); border-color: transparent; color: #1a1205; font-weight: 800; } .cfm-cta__primary.btn--solid:hover { background: linear-gradient(135deg, #ecc05a, #d29228); border-color: transparent; color: #1a1205; } .cfm-cta__secondary { background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.65); color: #fff; } .cfm-cta__secondary:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; color: #fff; } .cfm-notice { max-width: 48rem; margin: 0 auto clamp(1.5rem, 3vw, 2rem); padding: 1rem 1.15rem; border-radius: 12px; background: rgba(8, 18, 45, 0.28); border: 1px solid rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.88); font-size: 0.88rem; line-height: 1.55; } .cfm-notice p { margin: 0 0 0.65rem; } .cfm-notice p:last-child { margin-bottom: 0; } .cfm-notice__asterisk { opacity: 0.85; font-size: 0.82rem; } @media (max-width: 1080px) { .price-grid--founding { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; } .price-grid--other { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cfm-why__list { grid-template-columns: 1fr; } .cfm-recognition { text-align: center; } .cfm-recognition__layout { gap: clamp(1rem, 4vw, 1.5rem); width: min(100% - 1.5rem, 32rem); max-width: none; padding: clamp(1.35rem, 5vw, 2rem) 0 clamp(1.15rem, 4vw, 1.65rem); } .cfm-recognition__gifts { grid-template-columns: 1fr; max-width: 18rem; } .cfm-recognition__award-photo { width: min(100%, 24rem); } .cfm-recognition__copy { width: 100%; max-width: none; text-align: center; } .cfm-founders-first10 { text-align: left; } .cfm-founders-remaining { text-align: left; } } @media (max-width: 640px) { .price-grid--other { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; } .cfm-cta__actions { flex-direction: column; } .cfm-cta__actions .btn { width: 100%; } } /* ============================================================================ PRICING SALES SHOWCASE — visual previews ========================================================================== */ .section--showcase { background: linear-gradient(180deg, #f5f7fb 0%, #eef2f9 45%, #ffffff 100%); border-top: 1px solid var(--border); } .showcase-block { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr); gap: var(--space-7) var(--space-8); align-items: center; padding: var(--space-8) 0; border-bottom: 1px solid rgba(23, 37, 90, 0.08); } .showcase-block:last-of-type { border-bottom: none; padding-bottom: var(--space-5); } .showcase-block--reverse { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr); } .showcase-block--reverse .showcase-block__copy { order: 2; } .showcase-block--reverse .showcase-block__visual { order: 1; } .showcase-block--wide { grid-template-columns: 1fr; text-align: center; } .showcase-block__copy--center { max-width: 58ch; margin: 0 auto var(--space-6); } .showcase-block__copy h3 { margin: 0 0 var(--space-3); font-family: var(--font-serif); font-size: clamp(26px, 3vw, 34px); color: var(--ic-navy); line-height: 1.15; } .showcase-block__copy p { margin: 0 0 var(--space-4); color: var(--text-muted); font-size: 16px; line-height: 1.55; max-width: 42ch; } .showcase-block--wide .showcase-block__copy p { max-width: none; margin-inline: auto; } .showcase-plan { display: inline-block; margin-bottom: var(--space-3); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ic-gold); } .showcase-caption { font-size: 14px !important; font-style: italic; color: var(--ic-navy) !important; border-left: 3px solid var(--ic-gold); padding-left: 12px; } .showcase-places { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .showcase-places li { background: var(--tint-navy); color: var(--ic-navy); font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: var(--radius-sm); } .showcase-places--premium li { background: var(--tint-gold); color: #6b5208; } .showcase-block__visual { display: grid; gap: var(--space-4); } .showcase-block__visual--full { width: 100%; max-width: none; } .showcase-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-7); } /* --- Featured / Premium ad mocks --- */ .mock-ad { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); max-width: 540px; } .mock-ad--featured { display: grid; grid-template-columns: 1.05fr 1fr; } .mock-ad__media { position: relative; min-height: 180px; background: #1a1f2e; } .mock-ad__media img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; } .mock-ad__label { position: absolute; top: 12px; left: 12px; z-index: 1; background: rgba(23, 37, 90, 0.88); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; } .mock-ad__body { padding: var(--space-5); display: flex; flex-direction: column; gap: 8px; } .mock-ad__org { margin: 0; font-size: 12px; font-weight: 700; color: var(--ic-gold); text-transform: uppercase; letter-spacing: 0.05em; } .mock-ad__body h4 { margin: 0; font-family: var(--font-serif); font-size: 22px; color: var(--ic-navy); line-height: 1.2; } .mock-ad__body p { margin: 0; font-size: 14px; color: var(--text-muted); line-height: 1.45; } .mock-ad__cta { align-self: flex-start; margin-top: 8px; pointer-events: none; } .mock-ad--premium { max-width: none; } .mock-ad__media--lg { min-height: 280px; display: grid; place-items: end stretch; } .mock-ad__overlay { position: relative; z-index: 1; padding: var(--space-6); background: linear-gradient(180deg, transparent 0%, rgba(12, 18, 40, 0.88) 55%); color: #fff; } .mock-ad__verified { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; background: var(--ic-gold); color: #1a1405; padding: 4px 10px; border-radius: var(--radius-sm); margin-bottom: 10px; } .mock-ad__overlay h4 { margin: 0 0 6px; font-family: var(--font-serif); font-size: clamp(28px, 3.5vw, 36px); line-height: 1.1; } .mock-ad__overlay p { margin: 0 0 14px; font-size: 15px; opacity: 0.92; } .mock-manage { background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: var(--space-4) var(--space-5); max-width: 540px; } .mock-manage__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 12px; align-items: baseline; } .mock-manage__head strong { color: var(--ic-navy); font-size: 14px; } .mock-manage__status { font-size: 12px; font-weight: 600; color: var(--success); background: var(--tint-emerald); padding: 3px 9px; border-radius: var(--radius-pill); } .mock-manage__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; } .mock-manage__grid span { text-align: center; font-size: 12px; font-weight: 600; color: var(--ic-navy); background: #f4f6fb; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 6px; } .mock-manage p { margin: 0; font-size: 13px; color: var(--text-muted); } .mock-premium-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .mock-premium-slots__item { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow-sm); } .mock-premium-slots__item img { width: 100%; height: 100%; object-fit: cover; display: block; } .mock-premium-slots__item span { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px; background: linear-gradient(transparent, rgba(12, 18, 40, 0.85)); color: #fff; font-size: 12px; font-weight: 700; } /* --- Analytics mock --- */ .mock-analytics { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-5); max-width: 560px; margin-right: auto; } .mock-analytics__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); } .mock-analytics__head strong { color: var(--ic-navy); font-size: 16px; } .mock-analytics__head span { font-size: 12px; color: var(--text-muted); font-weight: 600; } .mock-analytics__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: var(--space-4); } .mock-analytics__stats div { background: linear-gradient(180deg, #f7f9fd, #eef2f9); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 10px; text-align: center; } .mock-analytics__stats b { display: block; font-family: var(--font-serif); font-size: 22px; color: var(--ic-navy); line-height: 1.1; margin-bottom: 4px; } .mock-analytics__stats span { font-size: 11px; font-weight: 600; color: var(--text-muted); line-height: 1.25; } .mock-analytics__chart { display: flex; align-items: flex-end; gap: 8px; height: 88px; padding: 8px 4px 0; margin-bottom: var(--space-3); border-bottom: 1px solid var(--border); } .mock-analytics__chart span { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--ic-navy), #3a4f8f); opacity: 0.9; } .mock-analytics__foot { margin: 0; font-size: 13px; color: var(--text-muted); } .mock-analytics__foot em { color: var(--ic-navy); font-style: normal; font-weight: 600; } /* --- Ad location sitemap mock --- */ .mock-sitemap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-5); max-width: 900px; margin: 0 auto; text-align: left; } .mock-sitemap__chrome { display: flex; align-items: center; gap: 6px; margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); } .mock-sitemap__chrome span { width: 10px; height: 10px; border-radius: 50%; background: #d5d9e4; } .mock-sitemap__chrome span:nth-child(1) { background: #e57373; } .mock-sitemap__chrome span:nth-child(2) { background: #ffb74d; } .mock-sitemap__chrome span:nth-child(3) { background: #81c784; } .mock-sitemap__chrome em { margin-left: 10px; font-style: normal; font-size: 12px; color: var(--text-muted); font-weight: 600; } .mock-sitemap__hero { min-height: 96px; margin-bottom: 12px; } .mock-sitemap__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 12px; } .mock-slot { border-radius: var(--radius); padding: var(--space-4); min-height: 84px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; border: 2px dashed transparent; } .mock-slot strong { font-size: 14px; color: var(--ic-navy); } .mock-slot span { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-pill); } .mock-slot--featured { background: rgba(14, 124, 123, 0.08); border-color: rgba(14, 124, 123, 0.45); } .mock-slot--featured span { background: var(--tint-teal); color: var(--ic-teal); } .mock-slot--premium { background: rgba(184, 134, 11, 0.1); border-color: rgba(184, 134, 11, 0.5); } .mock-slot--premium span { background: var(--tint-gold); color: #6b5208; } .mock-sitemap__legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border); font-size: 13px; color: var(--text-muted); font-weight: 600; } .mock-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .mock-dot--featured { background: var(--ic-teal); } .mock-dot--premium { background: var(--ic-gold); } @media (max-width: 820px) { .showcase-block, .showcase-block--reverse { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-6) 0; } .showcase-block--reverse .showcase-block__copy, .showcase-block--reverse .showcase-block__visual { order: unset; } .mock-ad, .mock-manage, .mock-analytics { max-width: none; margin: 0; } .mock-ad--featured { grid-template-columns: 1fr; } .mock-ad__media { min-height: 200px; } .mock-manage__grid { grid-template-columns: repeat(2, 1fr); } .mock-analytics__stats { grid-template-columns: repeat(2, 1fr); } .showcase-block__copy p { max-width: none; } } /* ============================================================================ FOOTER DISCLAIMER (directory-only notice) ========================================================================== */ .footer-note { padding: var(--space-4) 0 var(--space-5); } .footer-note p { margin: 0; font-size: 12px; color: rgba(234, 245, 238, 0.6); max-width: 96ch; } /* ============================================================================ RESPONSIVE ========================================================================== */ @media (max-width: 1080px) { .cat-grid { grid-template-columns: repeat(4, 1fr); } .header-nav--left ul, .header-nav--right .header-nav__links { display: none; } .menu-toggle { display: inline-flex; } .site-header--overlay .header-nav-main, .site-header--overlay .header-actions { display: none; } /* Thick Hub blue bar is desktop/tablet Hub chrome only — never the phone hamburger menu */ .hub-comm-nav { display: none !important; } .page-hub.has-overlay-header { --site-header-offset: 150px; } /* Keep logo clear of hamburger (left) and Market chip (right) — refined further in the final phone header block after .market-chip rules. */ .site-header--overlay .brand-lockup__img { width: min(112px, 30vw); } .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 820px) { /* Fixed backgrounds are unreliable on mobile — let the hero scroll normally */ .hero { min-height: auto; } .searchbar { grid-template-columns: 1fr 1fr; } .field.field--q { grid-column: 1 / -1; } .field + .field { border-left: none; } .searchbar .btn { grid-column: 1 / -1; } .grid--3 { grid-template-columns: repeat(2, 1fr); } .cat-grid { grid-template-columns: repeat(3, 1fr); } .price-grid { grid-template-columns: 1fr; } .public-account { grid-template-columns: 1fr; gap: var(--space-5); } .join-band__inner { flex-direction: column; align-items: flex-start; } .app { grid-template-columns: 1fr; text-align: center; } .app p { margin-inline: auto; } .app__badges { justify-content: center; } .footer-top { grid-template-columns: 1fr 1fr; } .section-head { flex-direction: column; align-items: flex-start; } } @media (max-width: 560px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } .cat-grid { grid-template-columns: repeat(2, 1fr); } .searchbar { grid-template-columns: 1fr; } .footer-top { grid-template-columns: 1fr; } .newsletter__form { flex-direction: column; } .hero__stats { gap: var(--space-5); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } } /* ============================================================================ DIRECTORY PAGES (used only on businesses/churches/organizations/resources pages — no homepage classes are affected) ========================================================================== */ /* Fixed overlay header: skyline strip sits under the menu (same as homepage) */ .has-overlay-header { --site-header-offset: 190px; } .has-overlay-header main { padding-top: 0; } /* Compact skyline under the fixed header — menu reads white on blue until scroll */ .page-skyline { width: 100%; max-width: none; height: min(42vh, 400px); min-height: calc(var(--site-header-offset) + 140px); margin: 0; background-image: linear-gradient(180deg, rgba(4, 12, 35, 0.16) 0%, rgba(4, 12, 35, 0.02) 45%, rgba(4, 12, 35, 0.18) 100%), url("../media/img/hero.jpg"); background-position: center top, center top; background-size: cover, cover; background-repeat: no-repeat, no-repeat; } @media (max-width: 1080px) { .has-overlay-header { --site-header-offset: 150px; } } /* Directory first paint: skyline + hero fill the viewport so the next section never peeks in at the bottom. */ .dir-first-screen { min-height: 100svh; display: flex; flex-direction: column; } .dir-first-screen .page-skyline { flex: 0 0 auto; } .dir-first-screen .subpage-hero { flex: 1 1 auto; display: flex; flex-direction: column; border-bottom: none; } .dir-first-screen .subpage-hero--white { padding-bottom: 0; margin-bottom: 0; } .dir-first-screen .subpage-hero--white::after { display: none; } .dir-first-screen .subpage-hero__inner { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: min(1120px, 100%); margin-inline: auto; box-sizing: border-box; } .dir-first-screen:has(.dir-notice) .page-skyline { /* Keep directory skylines the same size as Events / Community Events */ height: min(42vh, 400px); min-height: calc(var(--site-header-offset) + 140px); } .dir-first-screen:has(.dir-notice) .subpage-hero__inner { padding-top: clamp(18px, 2.5vh, 28px); padding-bottom: clamp(18px, 2.5vh, 28px); } .dir-first-screen:has(.dir-notice) .dir-filters { margin-top: 14px; padding: 12px; } .dir-first-screen:has(.dir-notice) .dir-field input, .dir-first-screen:has(.dir-notice) .dir-field select { padding: 8px 10px; } /* SC Markets: keep city strip flush to bottom of first view, but tall enough that the photos don’t look squished. Compact the copy above. */ .dir-first-screen:has(.markets-city-strip) .subpage-hero__inner { flex: 0 0 auto; justify-content: flex-start; padding-top: clamp(1.25rem, 3vh, 2.5rem); padding-bottom: clamp(0.75rem, 1.75vh, 1.25rem); } .dir-first-screen .markets-city-strip { flex: 1 1 auto; min-height: clamp(220px, 34vh, 400px); margin-top: 0; margin-bottom: 0; } @media (max-width: 720px) { .dir-first-screen { min-height: 0; } .dir-first-screen:has(.dir-notice) .page-skyline { height: min(42vh, 400px); min-height: calc(var(--site-header-offset) + 140px); } .dir-first-screen .markets-city-strip { flex: 1 1 auto; min-height: clamp(160px, 28vh, 240px); height: auto; } } /* --- Compact page header band + breadcrumb --- */ .subpage-hero { background: linear-gradient(180deg, color-mix(in srgb, var(--logo-color) 8%, #ffffff), var(--surface-2)); border-bottom: 1px solid var(--border); } .subpage-hero--white { background: #ffffff; position: relative; z-index: 2; /* Extra white runway so category photos never peek into the filter band */ padding-bottom: clamp(5rem, 10vw, 8rem); margin-bottom: 0; border-bottom: none; box-shadow: none; } .subpage-hero--white::after { content: ""; display: block; height: clamp(1.25rem, 2.5vw, 2rem); background: #ffffff; } .subpage-hero--art-cream { background: var(--art-cream); border-bottom: 1px solid color-mix(in srgb, var(--art-gold) 35%, transparent); } .subpage-hero--art-cream h1, .subpage-hero--art-cream .breadcrumb, .subpage-hero--art-cream .breadcrumb a { color: #1a1a1a; } .subpage-hero--art-cream p { color: rgba(26, 26, 26, 0.82); } .subpage-hero--art-steel { background: var(--art-steel); border-bottom: none; } .subpage-hero--art-steel h1, .subpage-hero--art-steel .breadcrumb, .subpage-hero--art-steel .breadcrumb a, .subpage-hero--art-steel p { color: #fff; } .subpage-hero--art-steel p { color: rgba(255, 255, 255, 0.88); } .subpage-hero--art-blue { background: var(--art-blue); border-bottom: none; } .subpage-hero--art-blue h1, .subpage-hero--art-blue .breadcrumb, .subpage-hero--art-blue .breadcrumb a { color: #fff; } .subpage-hero--art-blue p { color: rgba(255, 255, 255, 0.88); } .subpage-hero--art-blue .breadcrumb a:hover { color: #fff; } .subpage-hero__inner { padding: clamp(28px, 4vh, 48px) 0 var(--space-7); } .subpage-hero--white .subpage-hero__inner { padding-bottom: clamp(2.5rem, 5vw, 3.75rem); } .section--dir-biz-cats.section--tight, .section--dir-church-denoms.section--tight { padding-top: clamp(2.5rem, 5vw, 3.5rem); padding-bottom: clamp(2.25rem, 4.5vw, 3.25rem); } .breadcrumb { font-size: 13px; color: var(--text-muted); margin: 0 0 var(--space-3); } .breadcrumb a { color: var(--text-muted); text-decoration: none; } .breadcrumb a:hover { color: var(--logo-color); text-decoration: underline; } .breadcrumb__place { color: var(--logo-color, #1a2a5c); font-weight: 700; } /* Dark hero bands — city must stay readable (white) */ .gov-dir-hero .breadcrumb, .gov-dir-hero .breadcrumb a, .gov-dir-hero .breadcrumb__place, .ace-dir-hero .breadcrumb, .ace-dir-hero .breadcrumb a, .ace-dir-hero .breadcrumb__place, .ce-dir-hero .breadcrumb, .ce-dir-hero .breadcrumb a, .ce-dir-hero .breadcrumb__place, .election-dir-hero .breadcrumb, .election-dir-hero .breadcrumb a, .election-dir-hero .breadcrumb__place, .subpage-hero--art-steel .breadcrumb, .subpage-hero--art-steel .breadcrumb a, .subpage-hero--art-steel .breadcrumb__place, .subpage-hero--art-blue .breadcrumb, .subpage-hero--art-blue .breadcrumb a, .subpage-hero--art-blue .breadcrumb__place { color: #fff; } .eyebrow__place { font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .eyebrow__sep { opacity: 0.75; font-weight: 600; } .subpage-hero h1 { font-family: var(--font-serif); font-size: clamp(28px, 4vw, 42px); margin: 0 0 var(--space-2); letter-spacing: -0.01em; } .subpage-hero h1.dir-page-title { font-size: clamp(18px, 2.4vw, 30px); font-weight: 700; line-height: 1.3; white-space: normal; } .dir-page-title__sep { margin: 0 0.2em; font-weight: 700; opacity: 0.55; } .dir-page-title__brand, .dir-page-title__place { white-space: nowrap; } .dir-page-title__place { color: var(--logo-color, #1a2a5c); } @media (max-width: 640px) { .subpage-hero h1.dir-page-title { font-size: clamp(17px, 4.6vw, 22px); } } .subpage-hero p { margin: 0; color: var(--text-muted); font-size: 16px; max-width: 68ch; } .ead-claim-howto__title { margin: 18px 0 6px; font-family: var(--font-sans, inherit); font-size: clamp(1.05rem, 1.8vw, 1.25rem); font-weight: 800; line-height: 1.3; color: var(--text); letter-spacing: 0.01em; } .ead-claim-howto__body { margin: 0 0 14px !important; font-size: 14px !important; line-height: 1.5; max-width: 62ch; } /* --- Filter bar --- */ .dir-filters { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--space-4); margin-top: var(--space-5); display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-3); align-items: end; } .dir-filters + .dir-notice { margin-top: var(--space-4); } .dir-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .dir-field--name { grid-column: span 4; } .dir-field--type { grid-column: span 3; } .dir-field--city { grid-column: span 2; } .dir-field--zip { grid-column: span 3; } .dir-field--dist { grid-column: span 8; } .dir-field--locate { grid-column: span 4; } .dir-field label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); } .dir-field input, .dir-field select { width: 100%; padding: 11px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 15px; font-family: inherit; color: var(--text); background: var(--surface); } .dir-field input:focus, .dir-field select:focus { outline: none; border-color: var(--logo-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--logo-color) 16%, transparent); } .dir-field--locate .btn { width: 100%; } /* --- Area heading (city / market reinforcer above listings) --- */ .dir-area-heading { margin: 0 0 var(--space-4); padding: 0.85rem 1.2rem; border-radius: 10px; background: var(--ic-navy, #192d57); color: #ffffff; font-size: clamp(1.35rem, 2.4vw, 1.85rem); font-weight: 800; letter-spacing: 0.01em; line-height: 1.2; } .section--dir-listings .dir-toolbar { margin-top: 0; } /* --- Toolbar (count + reset) --- */ .dir-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-6) 0 var(--space-4); } .dir-count { font-weight: 700; color: var(--text); } .dir-count span { color: var(--logo-color); } .dir-count .dir-count__section { color: var(--ic-navy, #17255a); } .dir-count .dir-count__sep { color: color-mix(in srgb, var(--ic-navy, #17255a) 45%, transparent); font-weight: 700; } /* --- Listing claim / grace-period notice --- */ .dir-notice { margin: 0; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--ic-navy) 18%, var(--border)); border-left: 4px solid var(--ic-navy); border-radius: var(--radius); background: linear-gradient(180deg, #f4eee4 0%, #f7f3ea 100%); box-shadow: var(--shadow-sm); color: var(--text); } .dir-notice__dates { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 8px; padding: 0 0 8px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text); } .dir-notice__dates strong { font-weight: 700; color: var(--ic-navy); margin-right: 4px; } .dir-notice p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); max-width: none; } .dir-notice strong { color: var(--text); font-weight: 700; } @media (min-width: 900px) { .dir-notice { display: grid; grid-template-columns: minmax(168px, 230px) minmax(0, 1fr); gap: 0 16px; align-items: start; padding: 10px 14px; } .dir-notice__dates { flex-direction: column; gap: 4px; margin: 0; padding: 0 14px 0 0; border-bottom: none; border-right: 1px solid var(--border); } } @media (max-width: 720px) { .dir-notice { padding: 10px 12px; } .dir-notice__dates { flex-direction: column; gap: 4px; } } /* --- Directory list --- */ .dir-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .dir-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); background: var(--surface); border: 1px solid #b8bfd0; border-radius: var(--radius); padding: 14px var(--space-5); box-shadow: var(--shadow-sm); transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease; } .dir-row:hover { border-color: #8f98ae; box-shadow: 0 10px 28px rgba(23, 37, 90, 0.18), 0 3px 10px rgba(23, 37, 90, 0.1); transform: translateY(-1px); } .dir-row[hidden] { display: none; } .dir-row__verified { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ic-navy); background: var(--tint-gold); border: 1px solid color-mix(in srgb, var(--ic-gold) 55%, transparent); border-radius: 999px; padding: 2px 8px; } .dir-ad { list-style: none; margin: 0; padding: 0; } .dir-ad[hidden] { display: none; } .dir-ad__inner { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-4); align-items: stretch; text-decoration: none; color: inherit; background: linear-gradient(135deg, color-mix(in srgb, var(--ic-gold) 18%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--ic-gold) 45%, var(--border)); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .dir-ad--premium .dir-ad__inner { grid-template-columns: 180px 1fr; background: linear-gradient(135deg, color-mix(in srgb, var(--ic-navy) 12%, var(--surface)), color-mix(in srgb, var(--ic-gold) 14%, var(--surface))); border-color: color-mix(in srgb, var(--ic-navy) 35%, var(--border)); } .dir-ad__media { min-height: 110px; background: var(--tint-navy); } .dir-ad--premium .dir-ad__media { min-height: 140px; } .dir-ad__media img, .dir-ad__placeholder { width: 100%; height: 100%; object-fit: cover; display: block; } .dir-ad__placeholder { background: linear-gradient(135deg, color-mix(in srgb, var(--ic-gold) 35%, transparent), transparent), var(--tint-navy); } .dir-ad__body { padding: 14px var(--space-5) 14px 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; } .dir-ad__eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ic-navy); } .dir-ad__body h3 { margin: 0; font-size: 1.05rem; } .dir-ad__sub, .dir-ad__about { margin: 0; color: var(--text-muted); font-size: 14px; } .dir-ad__about { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 720px) { .dir-ad__inner, .dir-ad--premium .dir-ad__inner { grid-template-columns: 1fr; } .dir-ad__media, .dir-ad--premium .dir-ad__media { min-height: 160px; } .dir-ad__body { padding: 12px var(--space-4) 16px; } } .home-highlight-placeholder__art { width: 100%; height: 100%; min-height: 180px; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--ic-gold) 40%, transparent), transparent 55%), linear-gradient(145deg, var(--tint-navy), color-mix(in srgb, var(--ic-burgundy) 25%, var(--surface))); } .dir-row__main { display: flex; align-items: center; gap: var(--space-4); min-width: 0; flex: 1; } .dir-row__badge { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-tint, var(--tint-navy)); color: var(--accent, var(--logo-color)); } .dir-row__badge svg { width: 22px; height: 22px; } .dir-row__info { min-width: 0; } .dir-row__name { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .dir-row__tag { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; padding: 2px 9px; border-radius: var(--radius-pill); background: var(--accent-tint, var(--tint-navy)); color: var(--accent, var(--ic-navy)); text-transform: uppercase; } .dir-row__addr { margin: 3px 0 0; color: var(--text-muted); font-size: 14px; } .dir-row__dates { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; line-height: 1.4; color: var(--text-muted); } .dir-row__dates span { white-space: nowrap; } .dir-row__dates strong { font-weight: 700; color: var(--text); } .dir-row__dates [data-dir-days].is-expired, .dir-notice [data-dir-days].is-expired { color: var(--error); font-weight: 700; } .dir-row__dates [data-dir-days].is-urgent, .dir-notice [data-dir-days].is-urgent { color: var(--art-terra); font-weight: 700; } .dir-row__contact { display: flex; align-items: center; gap: var(--space-4); flex: none; } .dir-row__phone { font-weight: 700; font-size: 14px; color: var(--text); white-space: nowrap; } .dir-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; justify-content: flex-end; } .dir-actions a { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); text-decoration: none; } .dir-actions a:hover { color: var(--logo-color); border-color: var(--border-strong); background: var(--surface-2); } .dir-actions svg { width: 18px; height: 18px; } /* --- Empty state --- */ .dir-empty { text-align: center; padding: var(--space-8) var(--space-4); color: var(--text-muted); border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-2); } @media (max-width: 900px) { .dir-field--name { grid-column: span 6; } .dir-field--type { grid-column: span 6; } .dir-field--city { grid-column: span 4; } .dir-field--zip { grid-column: span 4; } .dir-field--dist { grid-column: span 4; } .dir-field--locate { grid-column: span 12; } } @media (max-width: 720px) { .dir-filters { grid-template-columns: 1fr 1fr; } .dir-field { grid-column: span 1 !important; } .dir-field--name { grid-column: 1 / -1 !important; } .dir-field--locate { grid-column: 1 / -1 !important; } .dir-row { flex-direction: column; align-items: stretch; gap: var(--space-3); } .dir-row__contact { justify-content: space-between; } } /* ============================================================================ ELECTIONS & VOTER GUIDE ========================================================================== */ /* Same padding rhythm as .gov-find-section — white instead of cream */ .election-dates-section { padding-top: clamp(36px, 5vh, 64px); background: #ffffff; } .election-highlights { gap: var(--space-5); } .election-card { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); } .election-card__when { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--logo-color); } .election-card h3 { margin: 0; font-size: 20px; } .election-card > p { margin: 0; color: var(--text-muted); font-size: 15px; } .election-card__list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: 10px; } .election-card__list li { font-size: 14px; color: var(--text); padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius-sm); border: 1px solid var(--border); } .election-card__list b { color: var(--text); } .election-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; } .election-timeline li { display: grid; grid-template-columns: minmax(120px, 160px) 1fr; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); align-items: start; } .election-timeline li:last-child { border-bottom: none; } .election-timeline__date { font-size: 13px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--logo-color); padding-top: 2px; } .election-timeline h3 { margin: 0 0 4px; font-size: 17px; } .election-timeline p { margin: 0; color: var(--text-muted); font-size: 14px; } @media (max-width: 640px) { .election-timeline li { grid-template-columns: 1fr; gap: 6px; } } /* ============================================================================ THE HUB — curated community wall ========================================================================== */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .page-hub { background: #f7f5f1; } /* One Hub section ≈ one screen (below fixed header + blue bar) */ .page-hub .hub-intro, .page-hub .hub-wall-panel, .page-hub .hub-memorial-section.hub-panel, .page-hub .hub-community-section.hub-panel { box-sizing: border-box; min-height: calc(100svh - var(--site-header-offset, 236px)); } .page-hub .hub-talk.hub-panel { min-height: auto; } .hub-intro { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--site-header-offset, 236px) + 20px) 0 28px; background: radial-gradient(ellipse 70% 55% at 15% 20%, rgba(240, 193, 75, 0.18), transparent 55%), radial-gradient(ellipse 60% 50% at 90% 10%, rgba(226, 62, 87, 0.1), transparent 50%), linear-gradient(180deg, #fff 0%, #f7f5f1 100%); text-align: center; } .hub-intro__inner { max-width: 760px; margin: 0 auto; width: 100%; } .hub-intro .breadcrumb { justify-content: center; margin-bottom: 12px; } .hub-logo { --hub-font: "Syne", Georgia, "Times New Roman", serif; display: inline-flex; align-items: center; gap: 14px; margin: 0 auto 8px; animation: hub-logo-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; } .hub-logo__orb { position: relative; width: 56px; height: 56px; flex: none; } .hub-logo__pulse { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(135deg, #f0c14b, #ff8a3d 50%, #e23e57); opacity: 0.35; animation: hub-pulse 3.2s ease-in-out infinite; } .hub-logo__core { position: absolute; inset: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #2a3a7a, #121a3d 70%); box-shadow: inset 0 0 0 3px rgba(240, 193, 75, 0.55); } .hub-logo__core::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #f0c14b; box-shadow: 0 0 16px rgba(240, 193, 75, 0.55); } .hub-logo__word { display: flex; flex-direction: column; align-items: stretch; width: max-content; max-width: 100%; line-height: 0.85; text-align: left; } .hub-logo__the { font-family: var(--hub-font); font-weight: 700; font-size: clamp(12px, 1.7vw, 16px); letter-spacing: 0.28em; text-transform: uppercase; color: #b8860b; margin-left: 4px; align-self: flex-start; } .hub-logo__hub { font-family: var(--hub-font); font-weight: 800; font-size: clamp(34px, 5.6vw, 54px); letter-spacing: 0.02em; color: #17255a; text-transform: uppercase; background: linear-gradient(180deg, #24316e 0%, #121a3d 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 0.92; } /* Location under CONNECT — same size as THE IC; JS spreads letters to CONNECT width */ .hub-logo__place { display: block; width: 100%; box-sizing: border-box; margin-top: 0.4em; font-family: var(--hub-font); font-weight: 700; font-size: clamp(12px, 1.7vw, 16px); line-height: 1.15; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; overflow: visible; color: #b8860b; -webkit-text-fill-color: #b8860b; } .hub-logo__bars { display: flex; align-items: flex-end; gap: 4px; height: 48px; margin-left: 4px; padding-bottom: 2px; } .hub-logo__bars i { display: block; width: 8px; border-radius: 3px; background: linear-gradient(180deg, #f0c14b, #e23e57); animation: hub-bar 1.6s ease-in-out infinite; } .hub-logo__bars i:nth-child(1) { height: 38%; animation-delay: 0s; } .hub-logo__bars i:nth-child(2) { height: 62%; animation-delay: 0.12s; } .hub-logo__bars i:nth-child(3) { height: 88%; animation-delay: 0.24s; } .hub-logo__bars i:nth-child(4) { height: 54%; animation-delay: 0.36s; } .hub-logo__bars i:nth-child(5) { height: 74%; animation-delay: 0.48s; } .hub-logo__bars i:nth-child(6) { height: 46%; animation-delay: 0.6s; } @keyframes hub-logo-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } } @keyframes hub-pulse { 0%, 100% { transform: scale(1); opacity: 0.32; } 50% { transform: scale(1.12); opacity: 0.48; } } @keyframes hub-bar { 0%, 100% { transform: scaleY(0.85); } 50% { transform: scaleY(1.12); } } @media (prefers-reduced-motion: reduce) { .hub-logo, .hub-logo__pulse, .hub-logo__bars i, .hub-member { animation: none !important; } } .hub-intro__headline { margin: 0 auto var(--space-2); max-width: 28ch; font-family: "Syne", Georgia, serif; font-size: clamp(22px, 3.4vw, 32px); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--ic-navy); } .hub-intro__lead { margin: 0 auto var(--space-3); max-width: 38ch; font-size: 15px; line-height: 1.45; color: var(--text); } .hub-intro__tagline { margin: 0 auto var(--space-3); max-width: 46ch; font-size: clamp(17px, 2.2vw, 20px); line-height: 1.5; color: var(--text); } .hub-intro__note { margin: 0 auto var(--space-5); max-width: 52ch; font-size: 14px; line-height: 1.5; color: var(--text-muted); } .hub-can { list-style: none; margin: 0 auto var(--space-3); padding: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 580px; } .hub-can a, .hub-can li { padding: 6px 11px; font-size: 12px; font-weight: 700; color: var(--ic-navy); background: #fff; border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 1px 0 rgba(12, 18, 40, 0.04); text-decoration: none; } .hub-can a:hover { border-color: color-mix(in srgb, var(--ic-navy) 45%, var(--border)); box-shadow: 0 4px 12px rgba(23, 37, 90, 0.1); } .hub-steps-block { margin: 0 auto; max-width: 520px; } .hub-steps__title { margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ic-navy); } .hub-steps { list-style: none; margin: 0 auto; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; align-items: center; max-width: 520px; background: rgba(255, 255, 255, 0.72); border: 1px solid var(--border); border-radius: var(--radius-lg); font-size: 13px; font-weight: 600; color: var(--text); } .hub-steps li { display: inline-flex; align-items: center; gap: 8px; } .hub-steps__n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ic-navy); color: #fff; font-size: 11px; font-weight: 800; } .hub-intro__jump { margin: var(--space-3) 0 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } /* --- New to The Hub? onboarding --- */ .hub-onboard { background: #f7f5f1; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding-top: var(--space-6); padding-bottom: var(--space-6); } .hub-onboard__wrap { max-width: 760px; } .hub-onboard__header { text-align: center; margin-bottom: var(--space-5); } .hub-onboard__lead { margin: 8px auto 0; max-width: 48ch; font-size: 15px; line-height: 1.5; color: var(--text-muted); } .hub-onboard__block { margin-bottom: var(--space-5); } .hub-onboard__block h3, .hub-onboard__option h3 { margin: 0 0 8px; font-family: "Syne", Georgia, serif; font-size: clamp(18px, 2.4vw, 22px); color: var(--ic-navy, #17255a); } .hub-onboard__block > p, .hub-onboard__option > p { margin: 0 0 12px; font-size: 15px; line-height: 1.5; color: var(--text); } .hub-onboard__can { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .hub-onboard__can li { padding: 6px 11px; font-size: 12px; font-weight: 700; color: var(--ic-navy); background: #fff; border: 1px solid var(--border); border-radius: 999px; } .hub-onboard__examples-label { margin: 0 0 8px !important; font-size: 13px !important; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted) !important; } .hub-onboard__examples { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .hub-onboard__examples li { margin: 0; padding: 10px 14px; font-size: 15px; line-height: 1.4; color: var(--ic-navy); background: #fff; border-left: 3px solid var(--ic-gold, #b8860b); } .hub-onboard__options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .hub-onboard__option { padding: var(--space-4); background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); } .hub-onboard__option ol { margin: 0 0 14px; padding-left: 1.25rem; display: grid; gap: 6px; } .hub-onboard__option li { font-size: 14px; line-height: 1.45; color: var(--text); } .hub-onboard__cta { margin: 0 !important; } .hub-talk-compose__title { margin: 0 0 6px; font-family: "Syne", Georgia, serif; font-size: clamp(18px, 2.4vw, 22px); color: var(--ic-navy, #17255a); } .hub-talk-compose__blurb { margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: var(--text-muted); } @media (max-width: 720px) { .hub-onboard__options { grid-template-columns: 1fr; } } .hub-celebrate-bridge { padding: var(--space-7) 0 var(--space-4); text-align: center; background: #f7f5f1; } .hub-celebrate-bridge__inner { max-width: 560px; margin: 0 auto; } .hub-celebrate-bridge .section-sub { margin-left: auto; margin-right: auto; } .hub-celebrate-bridge a { font-weight: 700; color: var(--ic-navy); text-underline-offset: 3px; } /* Welcome to the Wall — white intro listing all personal-ad types */ .hub-wall-welcome { background: #ffffff; padding: 28px 0 8px; } .hub-wall-welcome .hub-wall-panel__intro { max-width: 680px; margin-bottom: 10px; } .hub-wall-welcome__lead { margin-bottom: 0.85rem !important; } .hub-wall-welcome__list { list-style: none; margin: 0 auto 0.35rem; padding: 0; display: grid; gap: 0.4rem; max-width: 34rem; text-align: left; } .hub-wall-welcome__list li { position: relative; padding-left: 1.15rem; font-size: 15px; line-height: 1.45; color: rgba(26, 26, 26, 0.88); font-weight: 600; } .hub-wall-welcome__list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--art-wine, #6e1423); } /* Wall Tribute — gold intro + mural as one viewport panel */ .hub-wall-panel { display: flex; flex-direction: column; background: var(--art-gold); padding-top: 28px; } .hub-wall-panel--tribute { background: var(--art-gold); } .hub-wall-panel--tribute .hub-wall-panel__intro .section-title { color: #1a1a1a; } .hub-wall-panel--tribute .hub-wall-panel__intro .section-sub { color: rgba(26, 26, 26, 0.82); } .hub-wall-panel--tribute .hub-wall-panel__intro a { color: var(--art-wine); } .hub-wall-panel__intro { text-align: center; max-width: 640px; margin: 0 auto 18px; padding: 0 var(--space-5); } .hub-wall-panel__intro .section-title { margin: 4px 0 8px; font-size: clamp(26px, 3.2vw, 36px); color: #1a1a1a; } .hub-wall-panel__intro .hub-talk__eyebrow { color: #1a1a1a; } .hub-wall-panel__intro .section-sub { margin: 0 auto; font-size: 15px; line-height: 1.45; color: rgba(26, 26, 26, 0.82); } .hub-wall-panel__intro a { font-weight: 700; color: var(--art-wine); text-underline-offset: 3px; } /* --- Community Wall mural --- */ .hub-wall-section { padding: 0 0 var(--space-8); } .hub-wall-panel .hub-wall { flex: 1; min-height: 0; } .hub-wall { position: relative; min-height: calc(100svh - var(--site-header-offset, 190px)); background-color: #1a2248; } .hub-wall__sticky { position: sticky; top: var(--site-header-offset, 190px); height: calc(100svh - var(--site-header-offset, 190px)); z-index: 0; pointer-events: none; } .hub-wall__art { position: absolute; inset: 0; background-color: #1a2248; background-image: linear-gradient(180deg, rgba(12, 18, 40, 0.12) 0%, rgba(12, 18, 40, 0.28) 100%), url("../media/img/hub-mural.jpg"); background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; } .hub-wall__veil { position: absolute; inset: 0; background: radial-gradient(ellipse 55% 45% at 50% 42%, rgba(255, 255, 255, 0.06), transparent 62%); pointer-events: none; } .hub-wall__stage { position: relative; z-index: 1; margin-top: calc(-1 * (100svh - var(--site-header-offset, 190px))); min-height: calc(100svh - var(--site-header-offset, 190px)); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-5); padding: var(--space-6) var(--space-5); } .hub-wall__row { display: flex; align-items: center; justify-content: center; gap: 14px 18px; width: 100%; } .hub-wall__row .hub-featured, .hub-wall__row .hub-comm-grid { width: auto; flex: 0 1 1080px; } .hub-wall-more { flex: none; appearance: none; border: 0; background: transparent; color: #fff; font: inherit; font-size: 14px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; white-space: nowrap; padding: 8px 2px; text-shadow: 0 1px 10px rgba(8, 12, 30, 0.65); } .hub-wall-more:hover, .hub-wall-more:focus-visible { color: #fff; opacity: 0.88; } .hub-member--extra[hidden] { display: none !important; } /* --- Framed artwork for sale (below the wall) --- */ .hub-sale { background: #fff; } .hub-sale__policy { max-width: 760px; margin: 0 auto var(--space-7); padding: var(--space-4) var(--space-5); text-align: center; font-size: 15px; line-height: 1.55; color: var(--text); background: color-mix(in srgb, var(--tint-navy) 55%, #fff); border: 1px solid color-mix(in srgb, var(--ic-navy) 14%, var(--border)); border-radius: var(--radius); } .hub-sale__policy strong { display: block; margin-bottom: 6px; color: var(--ic-navy); font-size: 14px; letter-spacing: 0.02em; } .hub-sale__foot { max-width: 720px; margin: var(--space-6) auto 0; text-align: center; font-size: 14px; line-height: 1.5; color: var(--text-muted); } .hub-sale__foot a { color: var(--ic-navy); font-weight: 600; } .hub-sale__layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr); gap: var(--space-7) var(--space-8); align-items: center; max-width: 980px; margin: 0 auto; } .hub-sale__layout[hidden] { display: none !important; } .hub-frame { margin: 0; justify-self: center; width: min(100%, 480px); } .hub-frame__outer { background: linear-gradient(145deg, #3a2a18 0%, #1a120a 45%, #5a4330 100%); padding: 14px; border-radius: 4px; box-shadow: 0 2px 0 rgba(255, 255, 255, 0.12) inset, 0 18px 48px rgba(23, 37, 90, 0.18), 0 4px 12px rgba(0, 0, 0, 0.2); } .hub-frame__mat { background: #f4efe6; padding: 18px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); } .hub-frame__mat img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #ddd; } .hub-frame__tag { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 14px; padding: 0 4px; } .hub-frame__forsale { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ic-gold); } .hub-frame__price { font-family: "Syne", Georgia, serif; font-size: clamp(28px, 4vw, 36px); font-weight: 800; color: var(--ic-navy); line-height: 1; } .hub-sale__info h3 { margin: 0 0 4px; font-family: "Syne", Georgia, serif; font-size: clamp(26px, 3vw, 34px); color: var(--ic-navy); } .hub-sale__studio { margin: 0 0 var(--space-4); font-size: 15px; font-weight: 600; color: var(--text-muted); } .hub-sale__title { margin: 0 0 var(--space-3); font-size: 16px; line-height: 1.45; color: var(--text); } .hub-sale__purchase { margin: 0 0 var(--space-5); font-size: 14px; line-height: 1.5; color: var(--text-muted); } .hub-sale__actions { display: flex; flex-wrap: wrap; gap: 10px; } .hub-featured { display: grid; gap: var(--space-5); width: 100%; max-width: 1080px; margin-inline: auto; justify-content: center; justify-items: stretch; align-items: stretch; } .hub-featured[data-count="1"] { grid-template-columns: minmax(0, 380px); } .hub-featured[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 340px)); } .hub-featured[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 320px)); } .hub-featured--many, .hub-featured--expandable { grid-template-columns: repeat(3, minmax(0, 320px)); } .hub-featured--many[data-count="4"], .hub-featured--many[data-count="5"], .hub-featured--many[data-count="6"], .hub-featured--expandable:not([data-count="1"]):not([data-count="2"]):not([data-count="3"]) { grid-template-columns: repeat(auto-fit, minmax(260px, 320px)); justify-content: center; } .hub-panel { display: flex; flex-direction: column; justify-content: flex-start; padding-top: 32px; padding-bottom: 40px; } .hub-panel__inner { width: 100%; } .hub-panel .section-head { margin-bottom: 18px; } .hub-panel .section-title { font-size: clamp(26px, 3.2vw, 36px); } .hub-memorial-section { background: var(--art-wine); } .hub-memorial-section .eyebrow, .hub-memorial-section .section-title { color: #fff; } .hub-memorial-section .section-sub { color: rgba(255, 255, 255, 0.88); } .hub-memorial-section .section-sub a, .hub-memorial-section .section-sub a:visited, .hub-community-section--weddings .section-sub a, .hub-community-section--weddings .section-sub a:visited, .section--tint-burgundy .section-sub a, .section--tint-burgundy .section-sub a:visited, .section--pricing-royal .section-sub a, .section--pricing-royal .section-sub a:visited { color: #fff; } .hub-memorial-section .section-sub a:hover, .hub-memorial-section .section-sub a:focus-visible, .hub-community-section--weddings .section-sub a:hover, .hub-community-section--weddings .section-sub a:focus-visible, .section--tint-burgundy .section-sub a:hover, .section--tint-burgundy .section-sub a:focus-visible, .section--pricing-royal .section-sub a:hover, .section--pricing-royal .section-sub a:focus-visible { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.85); } .hub-memorials { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(260px, 320px)); justify-content: center; } .hub-memorials__empty { grid-column: 1 / -1; margin: 0 auto; max-width: 42ch; text-align: center; color: var(--text-muted); font-size: 15px; } .hub-member--memorial { border: 1px solid color-mix(in srgb, var(--ic-navy) 18%, var(--border)); background: #fff; } .hub-member__kind { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ic-burgundy, #6e1423); } .ead-package--tribute { border-color: color-mix(in srgb, #c45c8a 50%, var(--border)); background: linear-gradient(135deg, #fff7fb 0%, #fde8f1 100%); } .ead-package--tribute:has(input:checked), .ead-package--tribute.ead-package--selected { border-color: #c45c8a; box-shadow: 0 0 0 2px color-mix(in srgb, #c45c8a 25%, transparent); } .ead-package--tribute .ead-package__price { color: #9b3d66; } .ead-personal-type { margin: 0 0 var(--space-5); padding: var(--space-5); border: 1px solid color-mix(in srgb, #c45c8a 28%, var(--border)); border-radius: var(--radius); background: linear-gradient(165deg, #fffafc 0%, #f8eef3 100%); } .ead-personal-type h2 { margin: 0 0 var(--space-2); font-size: clamp(20px, 2.4vw, 26px); } .ead-personal-type .section-sub { margin: 0 0 var(--space-4); } .ead-personal-type__grid { display: grid; gap: 10px; } .ead-personal-type__option { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; cursor: pointer; font-size: 14px; line-height: 1.45; color: var(--text); } .ead-personal-type__option:has(input:checked) { border-color: #c45c8a; box-shadow: 0 0 0 2px color-mix(in srgb, #c45c8a 22%, transparent); background: #fff7fb; } .ead-personal-type__option input { margin-top: 3px; flex: none; } .ead-package--memorial { border-color: color-mix(in srgb, #5a6b8c 50%, var(--border)); background: linear-gradient(135deg, #f7f8fc 0%, #e8ecf5 100%); } .ead-package--memorial:has(input:checked), .ead-package--memorial.ead-package--selected { border-color: #5a6b8c; box-shadow: 0 0 0 2px color-mix(in srgb, #5a6b8c 25%, transparent); } .ead-package--memorial .ead-package__price { color: #3f4d6b; } .ead-package--newborn { border-color: color-mix(in srgb, #e8a86a 45%, var(--border)); background: linear-gradient(135deg, #fffaf5 0%, #f7ebe0 100%); } .ead-package--newborn:has(input:checked), .ead-package--newborn.ead-package--selected { border-color: #c47a3a; box-shadow: 0 0 0 2px color-mix(in srgb, #c47a3a 25%, transparent); } .ead-package--newborn .ead-package__price { color: #a05a22; } .ead-package--wedding { border-color: color-mix(in srgb, #c9a0b8 45%, var(--border)); background: linear-gradient(135deg, #fbf7fa 0%, #f0e4ec 100%); } .ead-package--wedding:has(input:checked), .ead-package--wedding.ead-package--selected { border-color: #8a5a7a; box-shadow: 0 0 0 2px color-mix(in srgb, #8a5a7a 25%, transparent); } .ead-package--wedding .ead-package__price { color: #6a4060; } .ead-packages--top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-3); margin: 0; } .tribute-live__card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); text-align: center; } .tribute-live__photo { aspect-ratio: 1; background: #1a2248; display: grid; place-items: center; color: #c5cee3; overflow: hidden; } .tribute-live__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .tribute-live__body { padding: var(--space-4); display: grid; gap: 8px; } .tribute-live__kind { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9b3d66; } .tribute-live__card--memorial .tribute-live__kind { color: #3f4d6b; } .tribute-live__body h3 { margin: 0; font-family: var(--font-serif); font-size: 22px; color: var(--ic-navy); } .tribute-live__dates { margin: 0; font-size: 13px; color: var(--text-muted); } .tribute-live__msg { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-muted); } .tribute-live__note { margin: 0; padding: var(--space-3) var(--space-4); font-size: 13px; color: var(--text-muted); background: color-mix(in srgb, var(--tint-emerald, #e8f5ee) 55%, #fff); border-top: 1px solid var(--border); } .hub-featured__empty { margin: 0 auto; padding: var(--space-6); max-width: 40ch; text-align: center; color: #fff; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: var(--radius-lg); backdrop-filter: blur(8px); } .hub-member { background: rgba(255, 255, 255, 0.96); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: 0 18px 48px rgba(8, 12, 30, 0.28); display: grid; gap: var(--space-4); justify-items: center; text-align: center; animation: hub-card-in 0.7s ease both; } .hub-featured[data-count="3"] .hub-member:nth-child(2) { animation-delay: 0.1s; } .hub-featured[data-count="3"] .hub-member:nth-child(3) { animation-delay: 0.2s; } .hub-featured[data-count="2"] .hub-member:nth-child(2) { animation-delay: 0.1s; } @keyframes hub-card-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } .hub-member__photo { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.45); } .hub-member__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .hub-member__body { max-width: 28ch; } .hub-member h3 { margin: 0 0 2px; font-family: "Syne", Georgia, serif; font-size: 20px; color: var(--ic-navy); } .hub-member__city { margin: 0 0 var(--space-3); font-size: 13px; font-weight: 600; color: var(--ic-gold); letter-spacing: 0.04em; text-transform: uppercase; } .hub-member__msg { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text-muted); } .hub-art-credit { margin: var(--space-6) auto 0; text-align: center; color: #fff; font-size: 13px; background: rgba(12, 18, 40, 0.55); backdrop-filter: blur(6px); padding: 8px 16px; border-radius: var(--radius-pill); width: fit-content; } .hub-art-credit span { opacity: 0.85; margin-right: 4px; } .hub-art-credit strong { font-weight: 700; } /* --- Submit --- */ .hub-submit-section { background: #fff; } .hub-submit-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-7) var(--space-8); align-items: start; } .hub-submit-points { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: 10px; } .hub-submit-points li { position: relative; padding-left: 22px; font-size: 15px; color: var(--text-muted); line-height: 1.4; } .hub-submit-points li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 8px; height: 8px; border-radius: 50%; background: var(--ic-gold); } .hub-form { background: #f7f5f1; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); display: grid; gap: var(--space-4); box-shadow: var(--shadow-sm); } .hub-form__field { display: grid; gap: 8px; } .hub-form__field label { font-size: 13px; font-weight: 700; color: var(--ic-navy); } .hub-form__field label span { font-weight: 500; color: var(--text-muted); } .hub-form textarea { width: 100%; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 12px 14px; font: inherit; font-size: 15px; resize: vertical; min-height: 110px; background: #fff; } .hub-form textarea:focus { outline: 2px solid var(--ic-navy); outline-offset: 1px; } .hub-form__count { margin: 0; font-size: 12px; color: var(--text-muted); text-align: right; } .hub-form__count.is-warn { color: var(--warning); font-weight: 700; } .hub-form__hint, .hub-form__legal { margin: 0; font-size: 12px; color: var(--text-muted); line-height: 1.45; } .hub-file { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #fff; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 12px 14px; } .hub-file input[type="file"] { font-size: 13px; max-width: 100%; } .hub-file span { font-size: 13px; color: var(--text-muted); } .hub-queue-status, .hub-submit-note { margin: 0; font-size: 14px; line-height: 1.45; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--tint-emerald); color: #0a4d30; } .hub-submit-note { background: var(--tint-navy); color: var(--ic-navy); } /* --- Guidelines --- */ .hub-guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); max-width: 900px; margin: 0 auto; } .hub-guide { background: var(--surface); border-radius: var(--radius-lg); padding: var(--space-6); border: 1px solid var(--border); } .hub-guide h3 { margin: 0 0 var(--space-4); font-family: "Syne", Georgia, serif; font-size: 22px; } .hub-guide--yes { border-top: 4px solid var(--success); } .hub-guide--no { border-top: 4px solid var(--error); } .hub-guide ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .hub-guide li { position: relative; padding-left: 22px; font-size: 15px; color: var(--text-muted); line-height: 1.4; } .hub-guide--yes li::before { content: "\2713"; position: absolute; left: 0; color: var(--success); font-weight: 800; } .hub-guide--no li::before { content: "\2715"; position: absolute; left: 0; color: var(--error); font-weight: 800; } /* --- Community Conversations (Facebook-style threads) --- */ .hub-talk { background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(184, 134, 11, 0.08), transparent 55%), #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding-top: var(--space-5); padding-bottom: var(--space-6); } .hub-talk__wrap { max-width: 760px; } .hub-talk__header { text-align: center; margin-bottom: var(--space-4); } .hub-talk__header--compact { margin-bottom: var(--space-3); } .hub-talk__eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ic-gold, #b8860b); } .hub-talk__header .section-title { margin: 0 auto; font-size: clamp(22px, 3vw, 28px); } .hub-talk__blurb { margin: 8px auto 0; max-width: 48ch; font-size: 14px; line-height: 1.5; color: var(--text-muted); } .hub-talk__access { margin: 10px auto 0; max-width: 52ch; font-size: 14px; line-height: 1.5; color: var(--text-muted); } .hub-can__tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; color: #8a5a12; background: color-mix(in srgb, #f0c14b 28%, #fff); } .hub-can__tag--free { color: #0d5c38; background: color-mix(in srgb, #2d5a38 16%, #fff); } .hub-talk-gate { margin: 0 0 var(--space-5); } .hub-talk-gate__card { padding: clamp(18px, 2.5vw, 28px); border-radius: 18px; border: 1px solid color-mix(in srgb, #c49a3a 40%, var(--border)); background: radial-gradient(ellipse 90% 60% at 0% 0%, rgba(240, 193, 75, 0.22), transparent 55%), linear-gradient(165deg, #fffbf2 0%, #f7edd6 100%); box-shadow: 0 10px 28px rgba(23, 37, 90, 0.1); } .hub-talk-gate__eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #8a5a12; } .hub-talk-gate__card h3 { margin: 0 0 10px; font-family: var(--font-serif); font-size: clamp(22px, 3vw, 28px); color: var(--ic-navy); } .hub-talk-gate__card > p { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: var(--text); } .hub-talk-gate__list { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 8px; } .hub-talk-gate__list li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--text); } .hub-talk-gate__list li::before { content: "\2713"; color: #8a5a12; font-weight: 800; flex: none; } .hub-talk-gate__note { margin: 12px 0 0 !important; font-size: 12px !important; color: var(--text-muted) !important; } .hub-talk-gate__browse { margin: 14px 0 0 !important; font-size: 13px !important; } .hub-talk-gate__browse a { color: var(--ic-navy); font-weight: 600; } .hub-talk-pass-btn { border: 1px solid color-mix(in srgb, #c49a3a 50%, transparent); border-radius: var(--radius-pill); padding: 7px 12px; background: linear-gradient(135deg, #fff8e8, #f0e0b0); color: #6e480e; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .hub-talk-pass-btn:hover { background: linear-gradient(135deg, #fff3d6, #e8d49a); } .hub-featured-talk { margin: 0 0 var(--space-5); scroll-margin-top: calc(var(--site-header-offset, 158px) + 12px); } .hub-featured-talk[hidden] { display: none !important; } .hub-featured-talk__head { text-align: center; margin-bottom: 12px; } .hub-featured-talk__head h3 { margin: 0 0 4px; font-family: "Syne", Georgia, serif; font-size: 18px; color: var(--ic-navy); } .hub-featured-talk__head p { margin: 0; font-size: 14px; color: var(--text-muted); } .hub-talk-post--featured { border: 2px solid rgba(184, 134, 11, 0.45); background: linear-gradient(180deg, #fffdf6 0%, #fff 40%); box-shadow: 0 12px 32px rgba(12, 18, 40, 0.08); } .hub-talk-badges { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px 0; } .hub-talk-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .hub-talk-badge--day { background: var(--ic-navy); color: #fff; } .hub-talk-badge--active { background: var(--tint-emerald, #e8f5ee); color: #0a4d30; } .hub-talk-badge--new { background: #fff3d6; color: #7a5a00; } .hub-talk__identity { display: grid; gap: 8px; margin: 0 0 var(--space-5); padding: 16px 18px; background: var(--tint-navy, #eef2f8); border-radius: var(--radius-md); border: 1px solid var(--border); } .hub-talk__identity label { font-size: 13px; font-weight: 700; color: var(--ic-navy); } .hub-talk__identity-row { display: flex; flex-wrap: wrap; gap: 10px; } .hub-talk__identity-row input { flex: 1 1 220px; min-width: 0; padding: 11px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit; font-size: 15px; background: #fff; } .hub-talk__identity-hint { margin: 0; font-size: 13px; color: var(--text-muted); } .hub-talk-compose { display: grid; gap: 12px; margin-bottom: var(--space-5); padding: 16px 18px; background: #f7f5f1; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 10px 28px rgba(12, 18, 40, 0.05); } .hub-talk-compose__top { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: end; scroll-margin-top: calc(var(--site-header-offset, 158px) + 12px); } .hub-talk-compose__who { display: grid; gap: 6px; text-align: left; } .hub-talk-compose__who label { font-size: 13px; font-weight: 700; color: var(--ic-navy); } .hub-talk-compose__who input { width: 100%; padding: 11px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit; font-size: 15px; background: #fff; box-sizing: border-box; } .hub-talk-compose h3 { margin: 0; font-family: "Syne", Georgia, serif; font-size: 20px; color: var(--ic-navy); } .hub-talk-prompts__label { margin: 0; font-size: 13px; font-weight: 700; color: var(--ic-navy); text-align: left; } .hub-talk-prompts { display: flex; flex-wrap: wrap; gap: 8px; } .hub-prompt { appearance: none; border: 1px solid var(--border-strong); background: #fff; color: var(--ic-navy); font: inherit; font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 999px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .hub-prompt:hover, .hub-prompt.is-active { background: var(--ic-navy); border-color: var(--ic-navy); color: #fff; } .hub-talk-compose textarea, .hub-talk-reply-form textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit; font-size: 15px; line-height: 1.45; resize: vertical; background: #fff; box-sizing: border-box; } .hub-talk-compose textarea:focus, .hub-talk-reply-form textarea:focus, .hub-talk-compose__who input:focus, .hub-talk__identity-row input:focus { outline: 2px solid rgba(184, 134, 11, 0.45); outline-offset: 1px; border-color: var(--ic-gold, #b8860b); } .hub-talk-compose__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; } .hub-talk-compose__post { min-width: 96px; } .hub-talk--empty .hub-talk-compose { animation: hub-compose-pulse 2.6s ease-in-out infinite; } .hub-talk--empty .hub-prompt--hello { animation: hub-hello-pulse 2.6s ease-in-out infinite; } @keyframes hub-compose-pulse { 0%, 100% { box-shadow: 0 10px 28px rgba(12, 18, 40, 0.05); } 50% { box-shadow: 0 0 0 8px rgba(23, 37, 90, 0.08), 0 10px 28px rgba(12, 18, 40, 0.08); } } @keyframes hub-hello-pulse { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 0 5px rgba(23, 37, 90, 0.12); } } @media (prefers-reduced-motion: reduce) { .hub-talk--empty .hub-talk-compose, .hub-talk--empty .hub-prompt--hello { animation: none; } } .hub-talk-compose__count { margin: 0; font-size: 13px; color: var(--text-muted); } .hub-talk-compose__count.is-warn { color: var(--warning); font-weight: 700; } .hub-talk-share-details { border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: #fff; padding: 4px 12px 10px; } .hub-talk-share-details summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ic-navy); padding: 8px 0; list-style-position: outside; } .hub-talk-share { margin: 0; padding: 4px 0 0; border: 0; display: grid; gap: 8px; } .hub-talk-share legend { padding: 0 4px; font-size: 12px; font-weight: 700; color: var(--ic-navy); } .hub-talk-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); cursor: pointer; } .hub-talk-share input[type="email"], .hub-talk-share input[type="tel"], .hub-talk-reply-form input[type="email"], .hub-talk-reply-form input[type="tel"] { width: 100%; max-width: 320px; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit; font-size: 14px; } .hub-talk-compose .btn--block { justify-content: center; } .hub-talk-compose__legal { margin: 0; font-size: 12px; line-height: 1.4; color: var(--text-muted); text-align: center; } .hub-talk-compose__legal a { color: var(--ic-navy); font-weight: 700; } .hub-talk-feed-head { margin: 0 0 var(--space-4); text-align: center; } .hub-talk-feed-title { margin: 0 0 6px; font-family: "Syne", Georgia, serif; font-size: 22px; color: var(--ic-navy); } .hub-talk-feed-sub { margin: 0; font-size: 14px; color: var(--text-muted); } .hub-talk-feed { display: grid; gap: var(--space-4); } .hub-talk-empty { margin: 0; padding: 28px; text-align: center; color: var(--text-muted); background: #f7f5f1; border-radius: var(--radius-md); } .hub-talk-post { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 8px 24px rgba(12, 18, 40, 0.04); } .hub-talk-post__main { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 16px 18px 12px; } .hub-talk-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; letter-spacing: 0.02em; color: #fff; background: linear-gradient(145deg, var(--ic-navy), #2a3d6e); flex-shrink: 0; } .hub-talk-avatar--lg { width: 44px; height: 44px; font-size: 14px; background: linear-gradient(145deg, #8b6914, var(--ic-gold, #b8860b)); } /* Shared member avatars */ .ic-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: grid; place-items: center; background: linear-gradient(145deg, var(--ic-navy), #2a3d6e); box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(12, 18, 40, 0.08); } .ic-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .ic-avatar--default { color: #fff; font-size: 13px; font-weight: 800; letter-spacing: 0.02em; font-family: "Syne", Georgia, serif; } .ic-avatar--lg { width: 48px; height: 48px; font-size: 15px; } .ic-avatar--xl { width: 112px; height: 112px; font-size: 36px; box-shadow: 0 0 0 4px #fff, 0 8px 24px rgba(12, 18, 40, 0.12); } .hub-talk-compose__photo-link { margin: 4px 0 0; font-size: 12px; } .hub-talk-compose__photo-link a { color: var(--ic-navy); font-weight: 700; text-underline-offset: 2px; } .hub-talk-reply-form__top { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; } /* Profile settings */ .page-profile .profile-settings { max-width: 640px; } .profile-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 24px; margin-bottom: var(--space-5); box-shadow: 0 8px 24px rgba(12, 18, 40, 0.04); } .profile-card h2 { margin: 0 0 8px; font-family: "Syne", Georgia, serif; font-size: 22px; color: var(--ic-navy); } .profile-card__sub { margin: 0 0 18px; font-size: 14px; line-height: 1.45; color: var(--text-muted); } .profile-avatar-panel { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; } .profile-avatar-actions { display: grid; gap: 10px; justify-items: start; } .profile-upload-btn { cursor: pointer; } .profile-hint { margin: 0; font-size: 13px; color: var(--text-muted); max-width: 36ch; } .profile-field { display: grid; gap: 8px; margin-bottom: 14px; font-size: 14px; font-weight: 700; color: var(--ic-navy); } .profile-field input { padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit; font-weight: 500; font-size: 15px; } .profile-next { margin: 0; text-align: center; font-size: 15px; } .profile-next a { font-weight: 700; color: var(--ic-navy); } @media (max-width: 640px) { .profile-avatar-panel { flex-direction: column; align-items: flex-start; } .ic-avatar--xl { width: 96px; height: 96px; font-size: 30px; } } .hub-talk-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin-bottom: 8px; } .hub-talk-meta strong { font-size: 15px; color: var(--ic-navy); } .hub-talk-city { font-size: 13px; color: var(--text-muted); } .hub-talk-meta time { font-size: 12px; color: var(--text-muted); margin-left: auto; } .hub-talk-post__text { margin: 0 0 10px; font-size: 16px; line-height: 1.5; color: var(--text); white-space: pre-wrap; } .hub-talk-contact { margin: 0 0 10px; padding: 8px 10px; font-size: 13px; line-height: 1.4; background: var(--tint-emerald, #e8f5ee); border-radius: var(--radius-sm); color: #0a4d30; } .hub-talk-contact span { font-weight: 700; margin-right: 4px; } .hub-talk-contact__link { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .hub-talk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 13px; color: var(--text-muted); margin-top: 4px; } .hub-talk-stat { font-size: 13px; } .hub-talk-stat--people { color: var(--ic-navy); font-weight: 600; } .hub-talk-reply-btn { appearance: none; border: 1px solid var(--ic-navy); background: var(--ic-navy); padding: 6px 14px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 700; color: #fff; cursor: pointer; } .hub-talk-reply-btn:hover { background: #24316e; border-color: #24316e; } .hub-talk-report-btn { appearance: none; border: 0; background: transparent; padding: 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .hub-talk-report-btn:hover { color: var(--error, #b42318); } .hub-talk-locked { margin: 0 0 10px; padding: 10px 12px; font-size: 13px; line-height: 1.4; background: #fff4e5; border-left: 3px solid #c47d0e; border-radius: var(--radius-sm); color: #6b4a00; } .hub-talk-post--locked { opacity: 0.96; border-color: rgba(196, 125, 14, 0.35); } /* --- Hub admin health dashboard --- */ .page-hub-admin .hub-admin-wrap { max-width: 880px; } .hub-admin-login { display: grid; gap: 14px; padding: 22px; } .hub-admin-login h2 { margin: 0; font-family: "Syne", Georgia, serif; } .hub-admin-field { display: grid; gap: 6px; font-size: 14px; font-weight: 700; } .hub-admin-field input { padding: 11px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit; } .hub-admin-toolbar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: var(--space-5); } .hub-admin-note { margin: 0; font-size: 13px; color: var(--text-muted); max-width: 48ch; } .hub-admin-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px; margin-bottom: var(--space-5); box-shadow: 0 8px 24px rgba(12, 18, 40, 0.04); } .hub-admin-card h2 { margin: 0 0 8px; font-family: "Syne", Georgia, serif; font-size: 22px; color: var(--ic-navy); } .hub-admin-card__sub { margin: 0 0 16px; font-size: 14px; color: var(--text-muted); } .hub-admin-card__head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: 14px; } .hub-admin-card__head h2 { margin: 0; } .hub-admin-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; } .hub-admin-stats li { padding: 12px 14px; background: #f7f5f1; border-radius: var(--radius-md); font-size: 13px; color: var(--text-muted); } .hub-admin-stats strong { display: block; font-size: 22px; color: var(--ic-navy); font-family: "Syne", Georgia, serif; } .hub-admin-summary { margin-top: 16px; padding: 14px 16px; background: var(--tint-navy, #eef2f8); border-radius: var(--radius-md); border-left: 4px solid var(--ic-navy); } .hub-admin-summary h3 { margin: 0 0 8px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ic-navy); } .hub-admin-summary p { margin: 0 0 8px; font-size: 15px; line-height: 1.55; color: var(--text); } .hub-admin-summary time { font-size: 12px; color: var(--text-muted); } .hub-admin-empty { margin: 0; padding: 18px; text-align: center; color: var(--text-muted); background: #f7f5f1; border-radius: var(--radius-md); } .hub-admin-item, .hub-admin-member { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 12px; background: #fff; } .hub-admin-item__top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; font-size: 13px; font-weight: 700; } .hub-admin-pill { display: inline-flex; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; text-transform: uppercase; background: #fff3d6; color: #7a5a00; } .hub-admin-pill--warn { background: #fde8e8; color: #8a1f1f; } .hub-admin-item h3, .hub-admin-member h3 { margin: 0 0 6px; font-size: 16px; color: var(--ic-navy); } .hub-admin-item__body { margin: 0 0 8px; font-size: 14px; line-height: 1.45; } .hub-admin-item__why { margin: 0 0 6px; font-size: 13px; line-height: 1.4; color: #6b4a00; background: #fff8eb; padding: 8px 10px; border-radius: var(--radius-sm); } .hub-admin-item__meta { margin: 0 0 12px; font-size: 12px; color: var(--text-muted); } .hub-admin-item__actions { display: flex; flex-wrap: wrap; gap: 8px; } .hub-admin-timeline { margin: 0 0 12px; padding-left: 18px; font-size: 13px; color: var(--text-muted); line-height: 1.45; } .hub-admin-timeline time { color: var(--text-muted); } .hub-talk-thread { margin: 0; padding: 0 18px 16px 62px; display: grid; gap: 12px; background: linear-gradient(180deg, transparent, #faf9f7 12%); } .hub-talk-reply { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 10px 12px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); } .hub-talk-reply__body p { margin: 0 0 6px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; } .hub-talk-reply-form { display: grid; gap: 10px; padding: 12px; background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius-md); } .hub-talk-reply-form[hidden] { display: none !important; } .hub-talk-reply-form__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .hub-talk-reply-form__row .btn { margin-left: auto; } @media (max-width: 640px) { .hub-talk-post__main { padding: 14px; gap: 10px; } .hub-talk-thread { padding-left: 14px; padding-right: 14px; } .hub-talk-meta time { margin-left: 0; width: 100%; } .hub-talk-reply-form__row .btn { margin-left: 0; width: 100%; } .hub-steps { gap: 12px; } } /* Homepage Hub teaser */ .hub-teaser { position: relative; overflow: hidden; background: url("../media/img/hub-mural.jpg") center / cover; color: #fff; padding: var(--space-8) 0; } .hub-teaser__inner { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: var(--space-6); align-items: center; } .hub-teaser .hub-logo { margin-bottom: var(--space-4); } .hub-teaser .hub-logo__hub { background: none; -webkit-background-clip: unset; background-clip: unset; -webkit-text-fill-color: #ffffff; color: #ffffff; text-shadow: 0 2px 18px rgba(12, 18, 40, 0.35); } .hub-teaser .hub-logo__the { color: #f0c14b; } .hub-teaser p { margin: 0 0 var(--space-4); max-width: 54ch; font-size: 17px; line-height: 1.5; color: #ffffff; font-weight: 600; text-shadow: 0 1px 10px rgba(12, 18, 40, 0.45); } .hub-teaser__artist { margin: 0 0 var(--space-5) !important; padding: 12px 14px; border-left: 3px solid #f0c14b; background: rgba(12, 18, 40, 0.28); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 14px !important; font-weight: 500 !important; max-width: 54ch; color: #ffffff !important; text-shadow: 0 1px 8px rgba(12, 18, 40, 0.4); } .hub-teaser__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } /* Hub page: flame-colored nav over light intro, black when scrolled */ .page-hub .header-nav-main a { color: #ff8a3d; text-shadow: none; } .page-hub .header-nav-main a:hover, .page-hub .header-nav-main a[aria-current="page"] { color: #e23e57; opacity: 1; } .page-hub .site-header--overlay.is-scrolled .header-nav-main a { color: #111111; } .page-hub .site-header--overlay.is-scrolled .header-nav-main a:hover, .page-hub .site-header--overlay.is-scrolled .header-nav-main a[aria-current="page"] { color: #111111; opacity: 0.72; } @media (max-width: 980px) { .hub-featured[data-count="3"], .hub-featured--expandable, .hub-featured--many { grid-template-columns: repeat(2, minmax(0, 320px)); } .hub-featured[data-count="3"] .hub-member:last-child { grid-column: auto; max-width: none; justify-self: stretch; } .hub-submit-layout { grid-template-columns: 1fr; } .hub-teaser__inner { grid-template-columns: 1fr; text-align: left; } .hub-teaser .hub-logo { justify-content: flex-start; } .hub-teaser__actions { justify-content: flex-start; } .hub-sale__layout { grid-template-columns: 1fr; gap: var(--space-5); } .hub-frame { width: min(100%, 420px); } } @media (max-width: 700px) { .hub-featured[data-count="1"], .hub-featured[data-count="2"], .hub-featured[data-count="3"], .hub-featured--expandable, .hub-featured--many { grid-template-columns: minmax(0, 1fr); max-width: 420px; } .hub-featured[data-count="3"] .hub-member:last-child { grid-column: auto; max-width: none; justify-self: stretch; } .hub-logo { flex-wrap: wrap; justify-content: center; } .hub-logo__bars { display: none; } .hub-guide-grid { grid-template-columns: 1fr; } .hub-wall { min-height: calc(100svh - var(--site-header-offset, 150px)); } .hub-wall__sticky { top: var(--site-header-offset, 150px); height: calc(100svh - var(--site-header-offset, 150px)); } .hub-wall__stage { margin-top: calc(-1 * (100svh - var(--site-header-offset, 150px))); min-height: calc(100svh - var(--site-header-offset, 150px)); padding: var(--space-5) var(--space-4); } .hub-wall__row { flex-direction: column; align-items: stretch; } .hub-wall-more { align-self: flex-end; } .hub-comm-scene { min-height: calc(100svh - var(--site-header-offset, 150px)); } .hub-comm-scene__sticky { top: var(--site-header-offset, 150px); height: calc(100svh - var(--site-header-offset, 150px)); } .hub-comm-scene__stage { margin-top: calc(-1 * (100svh - var(--site-header-offset, 150px))); min-height: calc(100svh - var(--site-header-offset, 150px)); padding: var(--space-5) var(--space-4); } .hub-wall-panel { min-height: auto; } .hub-wall-panel .hub-wall { min-height: calc(100svh - var(--site-header-offset, 150px)); } } /* ============================================================================ ANNUAL CULTURAL EVENTS (directory + profiles) ========================================================================== */ .events-lead-note { margin: var(--space-4) 0 0; max-width: 78ch; font-size: 14px; line-height: 1.5; color: var(--text-muted); } .events-claim { margin: var(--space-3) 0 0; font-size: 14px; font-weight: 600; color: var(--ic-navy); } .events-claim a { color: var(--logo-color); } .ace-banner-notice { position: relative; isolation: isolate; background: linear-gradient(105deg, rgba(8, 14, 28, 0.88) 0%, rgba(8, 14, 28, 0.78) 42%, rgba(8, 14, 28, 0.55) 100%), url("../media/img/ace-create-listing-bg.png") center / cover no-repeat; color: #fff; border-bottom: none; /* Nudge the create-listing copy up slightly for room below it */ padding-top: clamp(36px, 5vh, 64px); padding-bottom: clamp(56px, 9vh, 104px); } .ace-banner-notice .eyebrow, .ace-banner-notice .section-title, .ace-banner-notice .section-sub, .ace-banner-notice .ace-banner-notice__steps li, .ace-banner-notice .ace-banner-notice__steps ul, .ace-banner-notice .ace-banner-notice__steps strong { color: #fff; } .ace-banner-notice .section-sub { color: rgba(255, 255, 255, 0.9); } .ace-banner-notice .section-sub a, .ace-banner-notice .ace-banner-notice__steps a { color: #fff; text-decoration: underline; text-underline-offset: 0.18em; font-weight: 600; } .ace-banner-notice .section-sub a:hover, .ace-banner-notice .ace-banner-notice__steps a:hover { color: var(--art-cream); } .ace-banner-notice__steps { max-width: 720px; margin: 0 0 var(--space-5); } .ace-banner-notice__steps ol { margin: 0; padding-left: 1.35rem; display: grid; gap: var(--space-4); } .ace-banner-notice__steps li { line-height: 1.55; color: rgba(255, 255, 255, 0.95); } .ace-banner-notice__steps ul { margin: 8px 0 0; padding-left: 1.2rem; display: grid; gap: 4px; color: rgba(255, 255, 255, 0.88); } .ace-banner-notice__steps a { color: #fff; font-weight: 600; } .ace-banner-notice__cta { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); } .ace-banner-notice__cta .btn:not(.btn--solid) { color: #fff; border-color: rgba(255, 255, 255, 0.85); background: transparent; } .ace-banner-notice__cta .btn:not(.btn--solid):hover { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: #fff; } .ace-banner-notice__cta .btn--solid { background: #ffffff; border-color: #ffffff; color: #1a2744; } .ace-banner-notice__cta .btn--solid:hover { background: #f1f4fa; border-color: #f1f4fa; color: #1a2744; filter: none; } .section--ead-create { padding: 0; /* One continuous wash from form through preview to the footer */ background: linear-gradient(180deg, color-mix(in srgb, var(--logo-color) 8%, #ffffff), var(--surface-2)); } .section--ead-form { background: linear-gradient(180deg, color-mix(in srgb, var(--logo-color) 8%, #ffffff), var(--surface-2)); } .ead-plans-stage { /* Uses .section--pricing-royal for the homepage blue + spotlight */ border-radius: 0; padding: clamp(40px, 6vh, 72px) 0; margin: 0; width: 100%; } .ead-plans-bar { /* Content sits directly on the blue — no white wrapper */ padding: 0; margin-bottom: 0; background: transparent; border: none; box-shadow: none; } .ead-plans-bar h2 { margin-top: 0; font-family: var(--font-serif); color: #ffffff; } .ead-plans-bar .section-sub { color: rgba(255, 255, 255, 0.9); } .ead-founder-note { max-width: 46rem; margin: 0 0 1.25rem; padding: 1rem 1.15rem; border-radius: 14px; background: radial-gradient(ellipse 70% 90% at 0% 0%, rgba(224, 176, 58, 0.22), transparent 55%), rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.95); } .ead-founder-note__eyebrow { margin: 0 0 0.35rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #f0d48a; } .ead-founder-note p:last-child { margin: 0; font-size: 0.98rem; line-height: 1.55; } .ead-packages--top .ead-package { grid-template-columns: auto minmax(0, 1fr); min-width: 0; min-height: 100%; height: 100%; padding: 1rem 1.15rem 1rem 0.9rem; overflow: hidden; } .ead-packages--top .ead-package > div { min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } .ead-packages--top .ead-package__benefits .plan-benefit, .ead-packages--top .ead-package__benefits > li { min-width: 0; padding-right: 0.15rem; } .ead-packages--top .ead-package .plan-benefit__text { overflow-wrap: anywhere; word-break: break-word; hyphens: auto; } .ead-packages--top .ead-package .plan-info { flex-shrink: 0; margin-right: 0.1rem; } .ead-form-main { padding: var(--space-5) var(--space-6); min-width: 0; background: #ffffff; } .ead-form-main > h2:first-child, .ead-form-main .ead-workflow > h2:first-child { margin-top: 0; } .ead-preview-stage { /* Match the soft light wash used by the form section above — no teal */ background: linear-gradient(180deg, color-mix(in srgb, var(--logo-color) 8%, #ffffff), var(--surface-2)) !important; border-radius: 0; padding: clamp(40px, 6vh, 72px) 0; margin: 0; border: none; width: 100%; } .ead-preview-panel { position: static; padding: var(--space-5) var(--space-6); background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius-lg); min-height: 420px; width: 100%; max-width: none; box-shadow: var(--shadow-sm); } .ead-listing-preview, .ead-ad-preview { min-height: 280px; } .ead-ad-preview[hidden], .ead-listing-preview[hidden] { display: none !important; } /* Event advertisement portal */ .ead-submit-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); align-items: start; } /* Keep upload controls and helper text inside the form card. */ .ead-form-main .ce-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ead-form-main .ce-field { min-width: 0; } .ead-form-main .ce-field input, .ead-form-main .ce-field textarea, .ead-form-main .ce-field select { border-color: #a9b4c8; box-shadow: 0 0 0 1px rgba(23, 37, 90, 0.06); } .ead-form-main .ce-field input:focus, .ead-form-main .ce-field textarea:focus, .ead-form-main .ce-field select:focus { border-color: var(--ic-navy); box-shadow: 0 0 0 3px rgba(23, 37, 90, 0.14); outline: none; } .ead-form-main .ce-field input[type="file"] { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; } .ead-form-main .ce-field small { max-width: 100%; overflow-wrap: anywhere; } .ead-preview-panel__head { margin-bottom: var(--space-4); } .ead-preview-panel__head h2 { margin: 0 0 6px; font-family: var(--font-serif); font-size: 24px; color: var(--ic-navy); } .ead-preview-panel__head p { margin: 0; font-size: 15px; color: var(--text-muted); } .ead-edit-note { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); background: color-mix(in srgb, var(--ic-gold) 18%, #fff); border-radius: var(--radius); color: var(--ic-navy); font-weight: 600; } .ead-workflow-banner { margin: 0 0 var(--space-5); padding: var(--space-4); border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--ic-navy) 22%, var(--border)); background: linear-gradient(135deg, #f5f8ff 0%, color-mix(in srgb, var(--tint-navy) 55%, #fff) 100%); } .ead-workflow-banner__plan { margin: 0 0 8px; font-family: var(--font-serif); font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; line-height: 1.2; color: var(--ic-navy); } .ead-workflow-banner strong { display: block; margin: 0 0 4px; color: var(--ic-navy); font-size: 15px; } .ead-workflow-banner p:not(.ead-workflow-banner__plan) { margin: 0; font-size: 14px; color: var(--text-muted); line-height: 1.45; } .ead-field-hint { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); } .ead-field-hint strong { color: var(--ic-navy); font-weight: 700; } .ead-online-req { margin: 0 0 var(--space-3); font-size: 14px; line-height: 1.45; color: var(--text-muted); } .ead-online-req strong { color: var(--ic-navy); } .ce-form__grid > .ead-online-req { margin: 0; padding-top: 2px; } .ead-workflow { margin-top: var(--space-2); } .ead-subhead { margin: var(--space-5) 0 var(--space-3); font-family: var(--font-serif); font-size: 20px; color: var(--ic-navy); } .ce-field small { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; color: var(--text-muted); line-height: 1.4; } .listing-live { display: grid; gap: var(--space-4); } .listing-live__dir-label, .listing-live__profile-label { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } .listing-live__dir-label span { font-weight: 600; text-transform: none; letter-spacing: 0; } .listing-live__dir { margin: 0; background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); } .listing-live__card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .listing-live__cover { aspect-ratio: 16 / 9; background: #1a2248; display: grid; place-items: center; color: #c5cee3; font-size: 14px; overflow: hidden; } .listing-live__cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .listing-live__brand { display: grid; grid-template-columns: 64px 1fr; gap: var(--space-3); align-items: center; padding: var(--space-4) var(--space-4) var(--space-2); } .listing-live__logo { width: 64px; height: 64px; border-radius: 14px; background: color-mix(in srgb, var(--tint-navy) 80%, #fff); border: 1px solid var(--border); display: grid; place-items: center; overflow: hidden; font-size: 11px; color: var(--text-muted); font-weight: 700; } .listing-live__logo img { width: 100%; height: 100%; object-fit: cover; } .listing-live__type { margin: 0 0 2px; font-size: 12px; font-weight: 700; color: var(--ic-gold); letter-spacing: 0.04em; text-transform: uppercase; } .listing-live__brand h3 { margin: 0; font-family: var(--font-serif); font-size: 22px; color: var(--ic-navy); line-height: 1.2; } .listing-live__desc { margin: 0; padding: 0 var(--space-4) var(--space-3); font-size: 15px; line-height: 1.5; color: var(--text-muted); } .listing-live__facts { margin: 0; padding: 0 var(--space-4) var(--space-3); display: grid; gap: 10px; } .listing-live__facts div { display: grid; gap: 2px; } .listing-live__facts dt { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .listing-live__facts dd { margin: 0; font-size: 14px; color: var(--ic-navy); white-space: pre-line; } .listing-live__facts a { color: var(--ic-navy); font-weight: 600; } .listing-live__socials { list-style: none; margin: 0; padding: 0 var(--space-4) var(--space-3); display: flex; flex-wrap: wrap; gap: 8px; } .listing-live__socials a { display: inline-block; padding: 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--tint-navy) 70%, #fff); border: 1px solid var(--border); font-size: 12px; font-weight: 700; color: var(--ic-navy); text-decoration: none; } .listing-live__gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 var(--space-4) var(--space-3); } .listing-live__gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; } .listing-live__note { margin: 0; padding: var(--space-3) var(--space-4) var(--space-4); font-size: 13px; line-height: 1.45; color: var(--text-muted); background: color-mix(in srgb, var(--tint-emerald, #e8f5ee) 55%, #fff); border-top: 1px solid var(--border); } .ead-packages { display: grid; gap: var(--space-3); margin: 0 0 var(--space-4); } .ead-package { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; min-width: 0; padding: var(--space-4) 1.15rem var(--space-4) var(--space-4); border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .ead-package:hover { transform: translateY(-1px); } .ead-package:has(input:checked), .ead-package--selected { box-shadow: var(--shadow-sm); } .ead-package--basic { border-color: color-mix(in srgb, var(--ic-gold, #c4a35a) 55%, var(--border)); background: linear-gradient(135deg, #fffaf0 0%, color-mix(in srgb, var(--tint-gold, #f7f0e0) 65%, #fff) 100%); } .ead-package--basic:has(input:checked), .ead-package--basic.ead-package--selected { border-color: var(--ic-gold, #c4a35a); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ic-gold, #c4a35a) 28%, transparent); } .ead-package--basic .ead-package__price { color: #8a6b2a; } .ead-package--featured { border-color: color-mix(in srgb, var(--ic-navy) 50%, var(--border)); background: linear-gradient(135deg, #f4f7ff 0%, color-mix(in srgb, var(--tint-navy) 70%, #fff) 100%); } .ead-package--featured:has(input:checked), .ead-package--featured.ead-package--selected { border-color: var(--ic-navy); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ic-navy) 22%, transparent); } .ead-package--featured .ead-package__price { color: var(--ic-navy); } .ead-package--premium { border-color: color-mix(in srgb, var(--ic-burgundy, #8b2e3b) 50%, var(--border)); background: linear-gradient(135deg, #fff5f7 0%, color-mix(in srgb, var(--tint-burgundy, #f3e4e7) 60%, #fff) 100%); } .ead-package--premium:has(input:checked), .ead-package--premium.ead-package--selected { border-color: var(--ic-burgundy, #8b2e3b); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ic-burgundy, #8b2e3b) 25%, transparent); } .ead-package--premium .ead-package__price { color: var(--ic-burgundy, #8b2e3b); } .ead-package--showcase { border-color: color-mix(in srgb, var(--ic-gold, #c4a35a) 70%, var(--border)); background: linear-gradient(135deg, #fffaf0 0%, color-mix(in srgb, var(--tint-gold, #f7f0e0) 70%, #fff) 100%); } .ead-package--showcase:has(input:checked), .ead-package--showcase.ead-package--selected { border-color: var(--ic-gold, #c4a35a); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ic-gold, #c4a35a) 32%, transparent); } .ead-package--showcase .ead-package__price { color: #8a6b2a; } .ead-package--community { border-color: color-mix(in srgb, var(--ic-teal) 50%, var(--border)); background: linear-gradient(135deg, #f0fbf9 0%, color-mix(in srgb, var(--tint-teal) 60%, #fff) 100%); } .ead-package--community:has(input:checked), .ead-package--community.ead-package--selected { border-color: var(--ic-teal); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ic-teal) 25%, transparent); } .ead-package--community .ead-package__price { color: var(--ic-teal); } .ead-package strong { display: block; color: var(--ic-navy); } .ead-package__price { display: block; margin: 4px 0; font-size: 15px; font-weight: 700; } .ead-package p { margin: 0; font-size: 14px; color: var(--text-muted); } .ead-payment-placeholder { margin: 0 0 var(--space-5); padding: var(--space-4); background: color-mix(in srgb, var(--tint-teal) 70%, #fff); border-style: dashed; } .ead-payment-placeholder p { margin: 6px 0 0; color: var(--text-muted); font-size: 14px; } .ace-ad-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } .ace-ad-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .ace-ad-card__media { aspect-ratio: 16 / 9; background: #1a2248; overflow: hidden; } .ace-ad-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .ace-ad-card__placeholder { height: 100%; display: grid; place-items: center; color: #c5cee3; font-size: 14px; padding: var(--space-4); text-align: center; } .ace-ad-card__body { padding: var(--space-4); display: grid; gap: 8px; } .ace-ad-card__org { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ic-gold); } .ace-ad-card h3 { margin: 0; font-family: var(--font-serif); font-size: 20px; color: var(--ic-navy); line-height: 1.25; } .ace-ad-card__body > p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-muted); } .ace-ad-card__cta { justify-self: start; margin-top: 4px; } /* Larger live preview on the submit page (~30% scale-up) */ .ace-ad-card--preview { box-shadow: var(--shadow); } .ace-ad-card--preview .ace-ad-card__media { aspect-ratio: 16 / 9; min-height: 220px; } .ace-ad-card--preview .ace-ad-card__placeholder { font-size: 17px; padding: var(--space-5); } .ace-ad-card--preview .ace-ad-card__body { padding: var(--space-5); gap: 10px; } .ace-ad-card--preview .ace-ad-card__org { font-size: 13px; letter-spacing: 0.09em; } .ace-ad-card--preview h3 { font-size: 26px; line-height: 1.22; } .ace-ad-card--preview .ace-ad-card__body > p { font-size: 16px; line-height: 1.5; } .ace-ad-card--preview .ace-ad-card__cta { margin-top: 6px; font-size: 15px; padding: 10px 18px; } .ead-dash-list, .ead-admin-list { display: grid; gap: var(--space-4); } .ead-dash-explain { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr); gap: var(--space-6); align-items: start; max-width: 980px; } .ead-dash-banner { position: relative; width: 100%; /* Tall enough that the next section stays below the first viewport */ max-height: none; overflow: hidden; background: #1a2744; border-top: 1px solid rgba(16, 32, 68, 0.08); border-bottom: 1px solid rgba(16, 32, 68, 0.08); } .ead-dash-banner img { display: block; width: 100%; height: clamp(300px, calc(100svh - var(--site-header-offset, 160px) - 200px), 620px); object-fit: cover; object-position: center 28%; } .ead-dash-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 16, 36, 0.28) 0%, transparent 22%, transparent 78%, rgba(8, 16, 36, 0.22) 100%), linear-gradient(180deg, rgba(8, 16, 36, 0.12) 0%, transparent 35%, rgba(8, 16, 36, 0.18) 100%); pointer-events: none; } .ead-dash-explain__card { padding: var(--space-5) var(--space-6); border: 1px solid color-mix(in srgb, var(--ic-navy) 16%, var(--border)); border-left: 4px solid var(--ic-navy); border-radius: var(--radius); background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%); box-shadow: var(--shadow-sm); } .ead-dash-explain__card h2 { margin: 0 0 var(--space-4); font-family: var(--font-serif); font-size: clamp(22px, 2.4vw, 28px); color: var(--ic-navy); } .ead-dash-explain__steps { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--space-4); color: var(--text-muted); font-size: 15px; line-height: 1.55; } .ead-dash-explain__steps strong { color: var(--text); display: inline; } .ead-dash-explain__note { margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--border); font-size: 14px; line-height: 1.55; color: var(--text-muted); } @media (max-width: 820px) { .ead-dash-explain { grid-template-columns: 1fr; } } .ead-dash-card, .ead-admin-card { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4); } .ead-dash-card__media, .ead-admin-card__media { aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: #1a2248; } .ead-dash-card__media img, .ead-admin-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .ead-dash-card__body h3, .ead-admin-card__body h3 { margin: 6px 0; font-family: var(--font-serif); color: var(--ic-navy); } .ead-dash-card__actions, .ead-admin-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-3); } .ead-pill { display: inline-block; margin: 0; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--tint-navy); color: var(--ic-navy); } .ead-pill--pending { background: var(--tint-gold); } .ead-pill--changes_requested { background: var(--tint-teal); } .ead-pill--approved, .ead-pill--live { background: var(--tint-emerald); } .ead-pill--rejected { background: var(--tint-burgundy); } .ead-pill--expired { background: #e8e8e8; color: var(--text-muted); } .ead-change-request { margin: 8px 0 0; padding: 8px 10px; background: color-mix(in srgb, var(--tint-gold) 60%, #fff); border-radius: 8px; font-size: 14px; } @media (max-width: 1100px) { .ead-packages--top { grid-template-columns: 1fr 1fr; } } @media (max-width: 1100px) { .ead-submit-layout { grid-template-columns: 1fr; } .ead-preview-panel { position: static; max-width: none; min-height: 0; } .ead-packages--top { grid-template-columns: 1fr; } .ace-ad-card--preview .ace-ad-card__media { min-height: 180px; } .ace-ad-card--preview h3 { font-size: 22px; } .ace-ad-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 800px) { .ead-form-main .ce-form__grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .ace-ad-grid { grid-template-columns: 1fr; } .ead-dash-card, .ead-admin-card { grid-template-columns: 1fr; } } .ace-dir-hero { background: #ed1c24; border-bottom: none; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--site-header-offset, 190px) - var(--page-skyline-height, 320px)); } .ace-dir-hero > .subpage-hero__inner { width: 100%; max-width: min(58rem, 92%); margin-inline: auto; text-align: center; padding-top: clamp(2.25rem, 5vh, 4rem); padding-bottom: clamp(2.25rem, 5vh, 4rem); box-sizing: border-box; } .ace-dir-hero h1 { font-size: clamp(2.4rem, 5vw, 3.75rem); line-height: 1.1; margin: 0 0 1rem; } .ace-dir-hero h1, .ace-dir-hero .eyebrow, .ace-dir-hero .breadcrumb, .ace-dir-hero .breadcrumb a { color: #fff; } .ace-dir-hero .eyebrow { display: block; margin-bottom: 10px; } .ace-dir-hero .breadcrumb { justify-content: center; } .ace-dir-hero p { color: rgba(255, 255, 255, 0.9); max-width: 48rem; margin-left: auto; margin-right: auto; font-size: clamp(1.05rem, 1.55vw, 1.2rem); line-height: 1.55; } .ace-dir-hero a { color: #fff; text-decoration: underline; text-underline-offset: 0.18em; } .ace-dir-hero a:hover { color: var(--art-cream); } .ace-dir-hero .breadcrumb a:hover { color: #fff; } .ace-season-row { margin-top: var(--space-2); } .ace-season-row .type-chip { text-decoration: none; } /* Season chip strip sits on the bluish-gray band */ .section--ace-moss .ace-season-row { background: transparent; } .ace-season-block { scroll-margin-top: 110px; } .ace-bridge--season { scroll-margin-top: calc(var(--site-header-offset, 158px) + 16px); } .ace-season-block.section--tint-gold { background: var(--art-gold); } .ace-season-block.section--tint-burgundy { background: var(--art-wine); } .ace-season-block.section--tint-teal { background: var(--art-teal); } .ace-season-block.section--tint-emerald { background: var(--art-leaf); } /* Fall / MOJA band — navy (not teal art-blue) */ .ace-season-block.section--tint { background: #112549; } .ace-season-block.section--tint-burgundy .eyebrow, .ace-season-block.section--tint-burgundy .section-title, .ace-season-block.section--tint-burgundy .section-sub, .ace-season-block.section--tint-teal .eyebrow, .ace-season-block.section--tint-teal .section-title, .ace-season-block.section--tint-teal .section-sub, .ace-season-block.section--tint-emerald .eyebrow, .ace-season-block.section--tint-emerald .section-title, .ace-season-block.section--tint-emerald .section-sub, .ace-season-block.section--tint .eyebrow, .ace-season-block.section--tint .section-title, .ace-season-block.section--tint .section-sub { color: #fff; } .ace-season-block.section--tint-gold .eyebrow, .ace-season-block.section--tint-gold .section-title { color: #1a1a1a; } .ace-season-block.section--tint-gold .section-sub { color: rgba(26, 26, 26, 0.82); } .ace-bridge { background: #fff; padding: clamp(48px, 7vw, 88px) 0; border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); } .ace-bridge--purple { background: var(--art-wine); border-top: 0; border-bottom: 0; } .ace-bridge--split { padding: clamp(28px, 4vw, 44px) 0; } .ace-bridge__inner { max-width: 720px; } .ace-bridge__inner--split { max-width: 1100px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: start; } .ace-bridge__col { min-width: 0; } .ace-bridge__eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ic-gold); } .ace-bridge h3 { margin: 0 0 12px; font-family: var(--font-serif); font-size: clamp(26px, 3.5vw, 36px); line-height: 1.2; color: var(--ic-navy); } .ace-bridge--split h3 { font-size: clamp(22px, 2.8vw, 30px); margin-bottom: 8px; } .ace-bridge p:last-child, .ace-bridge h3 + p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--text-muted); } .ace-bridge--split h3 + p { font-size: 15px; line-height: 1.5; max-width: 42ch; } /* Purple “Don’t miss” bridge — force every line white after base bridge colors */ .ace-bridge.ace-bridge--purple, .ace-bridge.ace-bridge--purple .ace-bridge__eyebrow, .ace-bridge.ace-bridge--purple h3, .ace-bridge.ace-bridge--purple p, .ace-bridge.ace-bridge--purple p:last-child, .ace-bridge.ace-bridge--purple h3 + p { color: #fff; } @media (max-width: 720px) { .ace-bridge__inner--split { grid-template-columns: 1fr; gap: 22px; } .ace-bridge__col + .ace-bridge__col { padding-top: 18px; border-top: 1px solid rgba(16, 32, 68, 0.12); } } .ace-bridge--search { background: #fff; } .ace-dir-count { margin: var(--space-4) 0 0; } .ace-season-block .ace-grid { margin-top: 0; } .ace-season-count { font-family: var(--font-sans, inherit); font-size: 0.72em; font-weight: 600; color: var(--text-muted); } .ace-quick-links { gap: var(--space-4); } .ace-quick-link { display: grid; gap: 6px; padding: var(--space-5); text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .ace-quick-link:hover, .ace-quick-link:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--ic-teal) 45%, var(--border)); outline: none; } .ace-quick-link__label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ic-teal); } .ace-quick-link strong { font-family: var(--font-serif); font-size: 20px; color: var(--ic-navy); font-weight: 700; } .ace-quick-link span:last-child { font-size: 14px; line-height: 1.45; color: var(--text-muted); } /* Don’t-miss empty state on purple — writing white (cards use band-card pattern above) */ .section--tint-burgundy .dir-empty { color: #fff; } .ace-claim-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); } .ace-claim-band .section-title { margin-bottom: 6px; } .ace-claim-band .section-sub { margin: 0; max-width: 54ch; } /* Organizers CTA — full-bleed artwork background with readable type on top */ .ace-organizers-band { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient( 105deg, rgba(8, 14, 28, 0.72) 0%, rgba(8, 14, 28, 0.55) 48%, rgba(8, 14, 28, 0.38) 100% ), url("../media/img/ace-organizers-bg.png?v=2") center / cover no-repeat; color: #fff; } .ace-organizers-band .eyebrow, .ace-organizers-band .section-title, .ace-organizers-band .section-sub { color: #fff; } .ace-organizers-band .section-sub { color: rgba(255, 255, 255, 0.92); } .ace-organizers-band__actions { display: flex; flex-wrap: wrap; gap: 12px; } .ace-organizers-band .btn:not(.btn--solid) { color: #fff; border-color: rgba(255, 255, 255, 0.35); background: #0a1424; } .ace-organizers-band .btn:not(.btn--solid):hover { background: #525a7a; border-color: #525a7a; color: #fff; } .ace-organizers-band .btn--solid { background: #0a1424; border-color: #0a1424; color: #fff; } .ace-organizers-band .btn--solid:hover { background: #525a7a; border-color: #525a7a; } /* Keep-it-current purple band — email CTA: white fill, black text */ .section--tint-burgundy .gov-email-btn, .section--tint-burgundy .gov-email-btn.btn--solid, .section--tint-burgundy .btn--solid { background: #fff; border-color: #fff; color: #000; } .section--tint-burgundy .gov-email-btn:hover, .section--tint-burgundy .gov-email-btn.btn--solid:hover, .section--tint-burgundy .btn--solid:hover { background: #f2f2f2; border-color: #f2f2f2; color: #000; filter: none; } .ace-filters { margin-bottom: var(--space-6); } .ace-featured-band { background: #000; } .ace-featured { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); } @media (max-width: 1100px) { .ace-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .ace-feature { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } .ace-feature:hover, .ace-feature:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--ic-gold) 45%, var(--border)); outline: none; } .ace-feature__media { aspect-ratio: 3 / 4; overflow: hidden; background: #0a0a0a; position: relative; } .ace-feature__media img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 0.45s ease; filter: none; } .ace-feature:hover .ace-feature__media img { transform: scale(1.02); } .ace-feature__title-on-media { display: none; } .ace-feature__body { padding: var(--space-4); display: grid; gap: 6px; } .ace-feature__when { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ic-gold); } .ace-feature h3 { margin: 0; font-family: var(--font-serif); font-size: 18px; line-height: 1.25; color: var(--ic-navy); } .ace-feature p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .ace-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } .ace-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; animation: ace-fade-up 0.55s ease both; } .ace-card:nth-child(2) { animation-delay: 0.04s; } .ace-card:nth-child(3) { animation-delay: 0.08s; } .ace-card:nth-child(4) { animation-delay: 0.12s; } .ace-card:nth-child(5) { animation-delay: 0.16s; } .ace-card:nth-child(6) { animation-delay: 0.2s; } .ace-card:hover, .ace-card:focus-visible { transform: translateY(-5px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--logo-color) 40%, var(--border)); outline: none; } .ace-card__media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #0a0a0a; } .ace-card__media img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 0.5s ease; /* Keep posters vivid — no grey veil */ filter: none; } .ace-card:hover .ace-card__media img { transform: scale(1.02); } .ace-card__title-on-media { display: none; } .ace-card__when { position: static; display: inline-block; margin: 0 0 4px; padding: 0; border-radius: 0; background: transparent; color: var(--ic-gold); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; box-shadow: none; } .ace-card__body { padding: var(--space-4) var(--space-4) var(--space-5); display: grid; gap: 8px; flex: 1; } .ace-card h3 { margin: 0; font-family: var(--font-serif); font-size: clamp(18px, 2vw, 22px); line-height: 1.25; color: var(--ic-navy); } .ace-card__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-muted); } .ace-card__desc { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .ace-card__tags { display: flex; flex-wrap: wrap; gap: 6px; } .ace-card__cta { margin-top: auto; padding-top: 8px; font-size: 13px; font-weight: 700; color: var(--logo-color); } @keyframes ace-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* Profile */ .ace-hero { position: relative; color: #fff; min-height: clamp(420px, 68vh, 620px); display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: var(--space-8); overflow: hidden; } .ace-hero__banner { position: absolute; inset: 0; z-index: 0; } .ace-hero__banner img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .ace-hero__banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 12, 28, 0.45) 0%, rgba(8, 12, 28, 0.72) 55%, rgba(8, 12, 28, 0.92) 100%); } .ace-hero__content { position: relative; z-index: 1; padding-top: calc(var(--site-header-offset, 190px) + 36px); max-width: 920px; } .has-overlay-header .ace-hero__content { padding-top: calc(var(--site-header-offset, 190px) + 28px); } .ace-hero .breadcrumb, .ace-hero .breadcrumb a { color: rgba(255, 255, 255, 0.78); } .ace-hero__when { display: inline-block; margin: var(--space-3) 0; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ic-gold); } .ace-hero h1 { margin: 0 0 var(--space-3); font-family: var(--font-serif); font-size: clamp(32px, 5vw, 52px); line-height: 1.1; color: #fff; } .ace-hero__lead { margin: 0 0 var(--space-5); font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, 0.88); max-width: 62ch; } .ace-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; } .ace-hero__actions .btn { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.28); color: #fff; } .ace-hero__actions .btn--solid { background: var(--ic-gold); border-color: var(--ic-gold); color: #1a1208; } .ace-profile__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.85fr); gap: var(--space-7); align-items: start; } .ace-profile__main h2, .ace-profile__aside h2 { margin: 0 0 var(--space-3); font-family: var(--font-serif); font-size: 26px; color: var(--ic-navy); } .ace-profile__main h2 + p, .ace-profile__main p { margin: 0 0 var(--space-5); font-size: 16px; line-height: 1.6; color: var(--text-muted); } .ace-profile__muted { color: var(--text-muted); font-size: 14px; } .ace-factsheet { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); margin-bottom: var(--space-5); } .ace-factsheet dl { margin: 0; display: grid; gap: 12px; } .ace-factsheet dt { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ic-gold); } .ace-factsheet dd { margin: 2px 0 0; font-size: 14px; line-height: 1.45; color: var(--text); } .ace-factsheet a { color: var(--logo-color); font-weight: 600; } .ace-claim-box { margin: var(--space-4) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--border); font-size: 13px; line-height: 1.5; color: var(--text-muted); } .ace-map { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); aspect-ratio: 4 / 3; background: #e8eaf0; } .ace-map iframe { width: 100%; height: 100%; border: 0; display: block; } .ace-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); } .ace-gallery__item { margin: 0; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4 / 3; background: #1a2248; } .ace-gallery__item--lead { grid-column: 1 / -1; aspect-ratio: 21 / 9; } .ace-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 1100px) { .ace-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ace-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 800px) { .ace-featured, .ace-grid { grid-template-columns: 1fr; } .ace-profile__grid { grid-template-columns: 1fr; } .ace-gallery { grid-template-columns: 1fr 1fr; } .ace-gallery__item--lead { grid-column: 1 / -1; } } /* ============================================================================ COMMUNITY EVENTS ========================================================================== */ .ce-dir-hero { background: var(--art-teal); border-bottom: none; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--site-header-offset, 190px) - var(--page-skyline-height, 320px)); } .ce-dir-hero > .subpage-hero__inner { width: 100%; max-width: min(58rem, 92%); margin-inline: auto; text-align: center; padding-top: clamp(2.25rem, 5vh, 4rem); padding-bottom: clamp(2.25rem, 5vh, 4rem); box-sizing: border-box; } .ce-dir-hero h1 { font-size: clamp(2.4rem, 5vw, 3.75rem); line-height: 1.1; margin: 0 0 1rem; } .ce-dir-hero h1, .ce-dir-hero .breadcrumb, .ce-dir-hero .breadcrumb a { color: #fff; } .ce-dir-hero .breadcrumb { justify-content: center; } .ce-dir-hero p { color: rgba(255, 255, 255, 0.9); max-width: 48rem; margin-left: auto; margin-right: auto; font-size: clamp(1.05rem, 1.55vw, 1.2rem); line-height: 1.55; } .ce-dir-hero .breadcrumb a:hover { color: #fff; } .ce-dir-hero .ce-price-callout { color: #fff; } .ce-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(1.25rem, 3vh, 2rem); justify-content: center; } .ce-dir-hero .ce-hero-actions .btn { min-height: 48px; padding-inline: 1.35rem; font-size: 1rem; } .ce-dir-hero .ce-hero-actions .btn:not(.btn--solid) { color: #fff; border-color: #fff; background: transparent; } .ce-dir-hero .ce-hero-actions .btn:not(.btn--solid):hover { color: var(--art-teal); background: #fff; border-color: #fff; } /* Skyline + hero = first screen (next band only after scroll) */ .events-first-screen { min-height: 100svh; display: flex; flex-direction: column; } .events-first-screen .page-skyline { flex: 0 0 auto; } .events-first-screen .ace-dir-hero, .events-first-screen .ce-dir-hero, .events-first-screen .gov-dir-hero, .events-first-screen .election-dir-hero, .events-first-screen .subpage-hero { flex: 1 1 auto; } .ce-price-callout { margin-top: var(--space-4); font-size: 15px; color: var(--ic-navy); } .ce-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } /* First-view orange band matches Events dark band; cards stay below the fold */ .ce-featured-band { padding-top: clamp(36px, 5vh, 64px); padding-bottom: clamp(56px, 9vh, 104px); } .ce-featured-band .section-head { margin-bottom: 0; } #ce-featured { margin-top: clamp(8rem, 18vh, 14rem); } .ce-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.28s ease, box-shadow 0.28s ease; } .ce-card:hover, .ce-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow); outline: none; } .ce-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #1a2248; } .ce-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; } .ce-card:hover .ce-card__media img { transform: scale(1.05); } .ce-card__badge { position: absolute; top: 12px; left: 12px; padding: 5px 10px; border-radius: 999px; background: var(--ic-gold); color: #1a1208; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .ce-card__body { padding: var(--space-4); display: grid; gap: 8px; flex: 1; } .ce-card__when { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ic-teal); } .ce-card h3 { margin: 0; font-family: var(--font-serif); font-size: 20px; color: var(--ic-navy); line-height: 1.25; } .ce-card__loc { margin: 0; font-size: 13px; font-weight: 600; color: var(--text-muted); } .ce-card p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-muted); } .ce-card__cta { margin-top: auto; padding-top: 6px; font-size: 13px; font-weight: 700; color: var(--logo-color); } .ce-flyer { margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); } .ce-flyer img { width: 100%; display: block; } .ce-submit-wrap { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-6); align-items: start; } .ce-submit-note ul { margin: 0 0 var(--space-4); padding-left: 1.1rem; color: var(--text-muted); line-height: 1.55; } .ce-form.card { padding: var(--space-5) var(--space-6); } .ce-form h2 { margin-top: 0; font-family: var(--font-serif); color: var(--ic-navy); } .ce-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .ce-field { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ic-navy); } .ce-field--full { grid-column: 1 / -1; } .ce-field input, .ce-field textarea, .ce-field select, .ce-admin-toolbar select { font: inherit; font-weight: 500; padding: 12px 18px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--text); } .ce-form__legal { font-size: 13px; color: var(--text-muted); line-height: 1.5; } .ce-submit-success { grid-column: 1 / -1; border-color: color-mix(in srgb, var(--ic-emerald) 40%, var(--border)); background: var(--tint-emerald); } .ce-admin-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; } .ce-admin-toolbar label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; } .ce-admin-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4); margin-bottom: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } .ce-admin-row__media { aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: #1a2248; } .ce-admin-row__media img { width: 100%; height: 100%; object-fit: cover; } .ce-admin-row h3 { margin: 0 0 6px; font-size: 18px; color: var(--ic-navy); } .ce-admin-meta { font-size: 13px; color: var(--text-muted); } .ce-admin-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .ce-status { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; vertical-align: middle; } .ce-status--pending { background: #fff3cd; color: #7a5b00; } .ce-status--approved { background: #d8f5e5; color: #0d5c38; } .ce-status--rejected { background: #fde2e1; color: #8a1f1a; } .ce-status--archived { background: #e8eaf0; color: #3a4460; } .ce-status--featured { background: color-mix(in srgb, var(--ic-gold) 40%, #fff); color: #6a4a00; } .price-grid--with-community { grid-template-columns: repeat(4, minmax(0, 1fr)); } .price-grid--with-community .price-card--community, .price-grid--with-community .price-card--connect, .price-grid--with-community .price-card--personal-ad { grid-column: span 1; } .price-grid--with-community .price-card--community { grid-column: 1 / 2; } .price-grid--with-community .price-card--connect { grid-column: 2 / 3; } .price-grid--with-community .price-card--personal-ad { grid-column: 3 / 5; } @media (min-width: 1101px) { .price-grid--with-community { grid-template-columns: repeat(12, minmax(0, 1fr)); } .price-grid--with-community .price-card--free, .price-grid--with-community .price-card--basic, .price-grid--with-community .price-card--featured, .price-grid--with-community .price-card--premium { grid-column: span 3; } .price-grid--with-community .price-card--community, .price-grid--with-community .price-card--connect, .price-grid--with-community .price-card--personal-ad { grid-column: span 4; } } .price-orgs-note { max-width: 70ch; margin: 0 auto var(--space-6); text-align: center; font-size: 14px; color: var(--text-muted); } @media (max-width: 1200px) { .price-grid--with-community { grid-template-columns: repeat(2, minmax(0, 1fr)); } .price-grid--with-community .price-card--community, .price-grid--with-community .price-card--connect, .price-grid--with-community .price-card--personal-ad, .price-grid--with-community .price-card--free, .price-grid--with-community .price-card--basic, .price-grid--with-community .price-card--featured, .price-grid--with-community .price-card--premium { grid-column: auto; } } @media (max-width: 1100px) { .ce-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .price-grid--with-community { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ce-submit-wrap { grid-template-columns: 1fr; } } @media (max-width: 800px) { .ce-grid { grid-template-columns: 1fr; } .ce-form__grid { grid-template-columns: 1fr; } .ce-admin-row { grid-template-columns: 1fr; } .price-grid--with-community { grid-template-columns: 1fr; } } /* ============================================================================ GOVERNMENT DIRECTORY + FIND MY REPRESENTATIVE ========================================================================== */ .gov-dir-hero { background: var(--art-blue); border-bottom: none; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--site-header-offset, 190px) - var(--page-skyline-height, 320px)); } .gov-dir-hero > .subpage-hero__inner, .election-dir-hero > .subpage-hero__inner { width: 100%; max-width: min(58rem, 92%); margin-inline: auto; text-align: center; padding-top: clamp(2.25rem, 5vh, 4rem); padding-bottom: clamp(2.25rem, 5vh, 4rem); box-sizing: border-box; display: block; flex: none; } .gov-dir-hero h1, .election-dir-hero h1 { font-size: clamp(2.4rem, 5vw, 3.75rem); line-height: 1.1; margin: 0 0 1rem; color: #fff; } .gov-dir-hero .breadcrumb, .gov-dir-hero .breadcrumb a, .election-dir-hero .breadcrumb, .election-dir-hero .breadcrumb a { color: #fff; } .gov-dir-hero p, .gov-dir-hero .events-lead-note, .election-dir-hero p, .election-dir-hero .events-lead-note { color: rgba(255, 255, 255, 0.9); max-width: 48rem; margin-left: auto; margin-right: auto; font-size: clamp(1.05rem, 1.55vw, 1.2rem); line-height: 1.55; } .gov-dir-hero .breadcrumb a:hover, .election-dir-hero .breadcrumb a:hover { color: #fff; } .gov-dir-hero .ce-hero-actions, .election-dir-hero .ce-hero-actions { justify-content: center; } .election-dir-hero { background: var(--art-blue); border-bottom: none; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--site-header-offset, 190px) - var(--page-skyline-height, 320px)); } /* Distinct from section tints below (navy / gold / teal / burgundy / emerald) */ .gov-directory { padding: 0; } .gov-search-band { /* Blue-black band behind Directory Search */ background: #0a1424; padding: var(--space-8) 0 var(--space-7); color: #fff; } .gov-search-band .eyebrow, .gov-search-band .section-title { color: #fff; } .gov-search-band .section-title:hover, .gov-search-band .eyebrow:hover { color: #525a7a; } .gov-roster-band { background: #1e2a58; padding: var(--space-7) 0 var(--space-10); color: #e8ecf5; } .gov-search-band .dir-filters { /* Soft purple (same as writing hover) replacing the old light grey box */ background: #525a7a; border-color: color-mix(in srgb, #525a7a 70%, #fff); } .gov-search-band .dir-filters label { color: rgba(255, 255, 255, 0.92); } .gov-search-band #gov-reset, .gov-search-band .dir-field--actions .btn { border-color: #fff; color: #fff; background: transparent; } .gov-search-band #gov-reset:hover, .gov-search-band #gov-reset:focus-visible, .gov-search-band .dir-field--actions .btn:hover, .gov-search-band .dir-field--actions .btn:focus-visible { border-color: #fff; color: #fff; background: rgba(255, 255, 255, 0.12); box-shadow: none; } .gov-name-index { list-style: decimal; margin: 0; padding: var(--space-5) var(--space-5) var(--space-5) 2.25rem; background: color-mix(in srgb, #fff 8%, transparent); border: 1px solid color-mix(in srgb, #fff 16%, transparent); border-radius: var(--radius-lg); box-shadow: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 28px; columns: unset; color: #dce3f2; } .gov-name-index li { margin: 0; padding: 4px 0; break-inside: avoid; } .gov-name-index__item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; margin: 0; padding: 4px 6px; border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; font: inherit; color: inherit; } .gov-name-index__item:hover, .gov-name-index__item:focus-visible { background: color-mix(in srgb, #fff 12%, transparent); outline: none; } .gov-name-index__name { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.25; } .gov-name-index__office { font-size: 13px; color: color-mix(in srgb, #fff 68%, #1e2a58); line-height: 1.35; } @media (max-width: 720px) { .gov-name-index { grid-template-columns: 1fr; } } .gov-office-group { margin-top: var(--space-6); } .section-head + .gov-office-group, .section-head + .gov-office-pack { margin-top: 0; } .gov-office-pack { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); margin-top: var(--space-6); align-items: start; } .gov-office-pack .gov-office-group { margin-top: 0; } .gov-office-group--compact .gov-grid { grid-template-columns: 1fr; } .gov-office-group--compact .gov-office-group__title { font-size: clamp(18px, 2vw, 24px); margin-bottom: 10px; } .gov-office-group__title { margin: 0 0 8px; font-family: var(--font-serif); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; color: var(--ic-navy); } .gov-office-group__hint { margin: 0 0 16px; font-size: 15px; line-height: 1.45; max-width: 42rem; color: var(--text-muted); } .gov-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); } .gov-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.25s ease, box-shadow 0.25s ease; } .gov-card--flash { outline: 3px solid var(--ic-gold); outline-offset: 3px; box-shadow: var(--shadow); } .gov-card:hover, .gov-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow); outline: none; } .gov-card__photo { aspect-ratio: 4 / 5; background: #1a2248; overflow: hidden; } .gov-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .gov-card__body { padding: var(--space-4); display: grid; gap: 4px; } .gov-card h3 { margin: 0; font-family: var(--font-serif); font-size: 18px; color: var(--ic-navy); line-height: 1.25; } .gov-card__office { margin: 0; font-size: 13px; font-weight: 700; color: var(--text); } .gov-card__district { margin: 0; font-size: 12px; color: var(--text-muted); } .gov-card__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .gov-level, .gov-party { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .gov-level { background: var(--tint-navy); color: var(--ic-navy); } .gov-party { background: #f3f5f9; color: var(--text-muted); } .gov-section-count { font-family: var(--font-sans, inherit); font-size: 0.7em; color: var(--text-muted); font-weight: 600; } .gov-find-form { padding: var(--space-5); margin-bottom: var(--space-5); } .gov-find-form__grid { display: grid; grid-template-columns: 1.4fr 1fr 0.7fr; gap: var(--space-4); margin-bottom: var(--space-4); } .gov-find-hint { margin: var(--space-3) 0 0; font-size: 13px; color: var(--text-muted); } .gov-find-results { scroll-margin-top: 110px; } .gov-find-banner { margin: 0 0 var(--space-5); padding: var(--space-4); background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); } .gov-find-summary { margin: 0 0 var(--space-3); } .gov-find-local-note { margin: 0 0 var(--space-3); font-size: 15px; color: var(--ic-navy); } .gov-find-jumps { display: flex; flex-wrap: wrap; gap: 8px; } .gov-find-jump { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--art-blue) 12%, #fff); color: var(--ic-navy); text-decoration: none; font-size: 13px; font-weight: 600; } .gov-find-jump:hover { background: color-mix(in srgb, var(--art-blue) 22%, #fff); } .gov-find-group { margin-bottom: var(--space-6); scroll-margin-top: 120px; } .gov-find-group h3 { margin: 0 0 var(--space-3); font-family: var(--font-serif); color: var(--ic-navy); font-size: 24px; } .gov-find-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } .gov-result { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } .gov-result__photo { width: 96px; height: 120px; border-radius: 10px; overflow: hidden; background: #1a2248; } .gov-result__photo img { width: 100%; height: 100%; object-fit: cover; } .gov-result__level { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--art-blue, #1b485f); } .gov-result h3 { margin: 0 0 4px; font-size: 18px; } .gov-result h3 a { color: var(--ic-navy); text-decoration: none; } .gov-result__contacts { display: grid; gap: 4px; margin: 8px 0 12px; font-size: 13px; color: var(--text-muted); } .gov-result__contacts a { color: var(--logo-color); font-weight: 600; } .gov-result__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .gov-result__ext { font-size: 13px; font-weight: 600; color: var(--text-muted); text-decoration: underline; text-underline-offset: 0.15em; } .gov-profile-hero { padding: var(--space-7) 0; background: linear-gradient(180deg, color-mix(in srgb, var(--tint-navy) 80%, #fff), #fff); } .gov-profile-hero__grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-6); align-items: start; } .gov-profile-hero__photo { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow); background: #1a2248; } .gov-profile-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .gov-profile-hero h1 { margin: 10px 0 6px; font-family: var(--font-serif); font-size: clamp(32px, 4vw, 48px); color: var(--ic-navy); } .gov-profile-hero__office { margin: 0 0 8px; font-size: 18px; font-weight: 700; } @media (max-width: 1100px) { .gov-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gov-office-pack { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gov-find-form__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 800px) { .gov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gov-office-pack { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gov-find-form__grid, .gov-find-grid, .gov-profile-hero__grid { grid-template-columns: 1fr; } } @media (max-width: 520px) { .gov-grid { grid-template-columns: 1fr; } .gov-office-pack { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ------------------------------------------------------------------ */ /* Hub community sections — blue bar under main menu + celebration cards */ /* ------------------------------------------------------------------ */ .hub-comm-nav { position: relative; /* Below .header-nav-main (30) so Hub/Events dropdowns are not covered */ z-index: 10; background: color-mix(in srgb, var(--ic-navy) 96%, #000); border-bottom: 1px solid color-mix(in srgb, var(--ic-gold) 35%, transparent); box-shadow: 0 8px 24px rgba(10, 18, 48, 0.18); } /* On The Hub: blue bar sits in the fixed header, right under the gold main menu */ .page-hub .site-header .hub-comm-nav { margin: 0; box-shadow: none; border-top: 1px solid color-mix(in srgb, #fff 12%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--ic-navy) 88%, #000) 0%, #15203c 100%); } .page-hub .site-header .hub-comm-nav__inner { padding: 8px 0 10px; } .page-hub .site-header--overlay:not(.is-scrolled):not(.is-solid) .hub-comm-nav { /* Soft bleed from transparent menu into navy, then into page white */ background: linear-gradient(180deg, rgba(10, 18, 48, 0.35) 0%, #15203c 55%, #15203c 100%); border-top-color: rgba(255, 255, 255, 0.1); } .hub-comm-nav__inner { display: flex; flex-wrap: wrap; gap: 4px 2px; padding: 10px 0; justify-content: center; } .hub-comm-nav a { color: rgba(255, 255, 255, 0.82); text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; padding: 8px 12px; border-radius: 999px; transition: background 0.2s ease, color 0.2s ease; } .hub-comm-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.1); } .hub-comm-nav a[aria-current="page"] { color: var(--ic-navy); background: var(--ic-gold); } .hub-memorial-section.hub-panel, .hub-community-section--newborns.hub-panel, .hub-community-section--weddings.hub-panel { padding-top: 0; padding-bottom: 0; display: flex; flex-direction: column; } .hub-comm-panel__intro { text-align: center; max-width: 640px; margin: 0 auto; padding: 28px var(--space-5) 18px; } .hub-comm-panel__intro .section-title { margin: 4px 0 8px; font-size: clamp(26px, 3.2vw, 36px); } .hub-comm-panel__intro .section-sub { margin: 0 auto; font-size: 15px; line-height: 1.45; } .hub-comm-scene { position: relative; min-height: calc(100svh - var(--site-header-offset, 190px)); } .hub-comm-scene__sticky { position: sticky; top: var(--site-header-offset, 190px); height: calc(100svh - var(--site-header-offset, 190px)); z-index: 0; pointer-events: none; } .hub-comm-scene__art { position: absolute; inset: 0; background-color: #1a2248; background-image: linear-gradient(180deg, rgba(12, 18, 40, 0.12) 0%, rgba(12, 18, 40, 0.28) 100%), url("../media/img/hub-mural.jpg"); background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; } .hub-comm-scene .hub-wall__veil { position: absolute; inset: 0; background: radial-gradient(ellipse 55% 45% at 50% 42%, rgba(255, 255, 255, 0.06), transparent 62%); pointer-events: none; } .hub-comm-scene__stage { position: relative; z-index: 1; margin-top: calc(-1 * (100svh - var(--site-header-offset, 190px))); min-height: calc(100svh - var(--site-header-offset, 190px)); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: var(--space-6) var(--space-5); } .hub-comm-card--extra[hidden] { display: none !important; } .hub-comm-scene .hub-comm-card { background: rgba(255, 255, 255, 0.96); border-color: rgba(255, 255, 255, 0.7); box-shadow: 0 18px 48px rgba(8, 12, 30, 0.28); } .hub-comm-scene .hub-comm-card:hover { background: #fff; box-shadow: 0 20px 52px rgba(8, 12, 30, 0.32); } .hub-memorial-section .hub-comm-scene .hub-comm-card__eyebrow, .hub-memorial-section .hub-comm-scene .hub-comm-card--memory .hub-comm-card__eyebrow, .hub-memorial-section .hub-comm-scene .hub-comm-card h3, .hub-community-section--weddings .hub-comm-scene .hub-comm-card__eyebrow, .hub-community-section--weddings .hub-comm-scene .hub-comm-card--wedding .hub-comm-card__eyebrow, .hub-community-section--weddings .hub-comm-scene .hub-comm-card h3, .hub-community-section--newborns .hub-comm-scene .hub-comm-card__eyebrow, .hub-community-section--newborns .hub-comm-scene .hub-comm-card--newborn .hub-comm-card__eyebrow, .hub-community-section--newborns .hub-comm-scene .hub-comm-card h3 { color: var(--ic-navy); } .hub-memorial-section .hub-comm-scene .hub-comm-card__meta, .hub-memorial-section .hub-comm-scene .hub-comm-card__family, .hub-memorial-section .hub-comm-scene .hub-comm-card__msg, .hub-community-section--weddings .hub-comm-scene .hub-comm-card__meta, .hub-community-section--weddings .hub-comm-scene .hub-comm-card__family, .hub-community-section--weddings .hub-comm-scene .hub-comm-card__msg, .hub-community-section--newborns .hub-comm-scene .hub-comm-card__meta, .hub-community-section--newborns .hub-comm-scene .hub-comm-card__family, .hub-community-section--newborns .hub-comm-scene .hub-comm-card__msg { color: rgba(26, 26, 26, 0.78); } .hub-memorial-section .hub-comm-scene .hub-comm-card--memory .hub-comm-card__eyebrow { color: #6b5a3e; } .hub-community-section--newborns .hub-comm-scene .hub-comm-card--newborn .hub-comm-card__eyebrow { color: #b06a2e; } .hub-community-section--weddings .hub-comm-scene .hub-comm-card--wedding .hub-comm-card__eyebrow { color: #7a4a6a; } .hub-comm-scene .hub-wall-more { color: #fff; } .hub-community-section--newborns { background: var(--art-cream); } .hub-community-section--newborns .eyebrow, .hub-community-section--newborns .section-title { color: #1a1a1a; } .hub-community-section--newborns .section-sub { color: rgba(26, 26, 26, 0.82); } .hub-community-section--weddings { background: var(--art-teal); } .hub-community-section--weddings .eyebrow, .hub-community-section--weddings .section-title { color: #fff; } .hub-community-section--weddings .section-sub { color: rgba(255, 255, 255, 0.88); } .hub-memorial-section .hub-comm-grid { margin-top: var(--space-2); } .hub-comm-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--space-4); max-width: 1080px; margin-left: auto; margin-right: auto; } .hub-comm-toolbar__count { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-muted); } .hub-comm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 320px)); gap: var(--space-5); justify-content: center; justify-items: stretch; max-width: 1080px; margin-inline: auto; } .hub-comm-empty { grid-column: 1 / -1; margin: 0; padding: var(--space-7) var(--space-4); text-align: center; color: var(--text-muted); font-size: 16px; line-height: 1.55; background: color-mix(in srgb, var(--tint-navy) 35%, #fff); border-radius: var(--radius-lg); } .hub-comm-more-wrap { display: flex; justify-content: center; margin-top: var(--space-5); } .hub-comm-future { margin: var(--space-6) 0 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); text-align: center; max-width: 40rem; margin-left: auto; margin-right: auto; } .hub-comm-future a { color: var(--logo-color); font-weight: 600; } .hub-comm-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 10px 28px rgba(16, 24, 48, 0.06); transition: transform 0.25s ease, box-shadow 0.25s ease; width: 100%; } .hub-comm-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(16, 24, 48, 0.1); } .hub-comm-card__media { aspect-ratio: 4 / 3; background: #1a2248; overflow: hidden; } .hub-comm-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .hub-comm-card__ph { display: grid; place-items: center; height: 100%; color: rgba(255, 255, 255, 0.55); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; } .hub-comm-card__body { padding: 16px 18px 18px; display: grid; gap: 6px; } .hub-comm-card__eyebrow { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--logo-color); } .hub-comm-card--memory .hub-comm-card__eyebrow { color: #6b5a3e; } .hub-comm-card--newborn .hub-comm-card__eyebrow { color: #b06a2e; } .hub-comm-card--wedding .hub-comm-card__eyebrow { color: #7a4a6a; } .hub-comm-card h3 { margin: 0; font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.25; color: var(--ic-navy); } .hub-comm-card__meta, .hub-comm-card__family { margin: 0; font-size: 13px; color: var(--text-muted); } .hub-comm-card__family { font-style: italic; } .hub-comm-card__msg { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--text); } .hub-comm-card--memory { border-color: color-mix(in srgb, #c4a574 40%, var(--border)); } .hub-comm-card--newborn { border-color: color-mix(in srgb, #e8a86a 35%, var(--border)); } .hub-comm-card--wedding { border-color: color-mix(in srgb, #c9a0b8 40%, var(--border)); } /* Writing half of hub cards — lighter tint of each section’s own background */ .hub-memorial-section .hub-comm-card { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.35); box-shadow: none; } .hub-memorial-section .hub-comm-card:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.55); box-shadow: none; } .hub-memorial-section .hub-comm-card__body { background: transparent; } .hub-memorial-section .hub-comm-card__eyebrow, .hub-memorial-section .hub-comm-card--memory .hub-comm-card__eyebrow, .hub-memorial-section .hub-comm-card h3, .hub-memorial-section .hub-comm-card__meta, .hub-memorial-section .hub-comm-card__family, .hub-memorial-section .hub-comm-card__msg { color: #fff; } .hub-memorial-section .hub-comm-card__meta, .hub-memorial-section .hub-comm-card__family, .hub-memorial-section .hub-comm-card__msg { color: rgba(255, 255, 255, 0.88); } .hub-memorial-section .hub-comm-toolbar__count, .hub-memorial-section .hub-comm-empty { color: rgba(255, 255, 255, 0.88); } .hub-memorial-section .hub-comm-empty { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.28); } .hub-community-section--weddings .hub-comm-card { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.35); box-shadow: none; } .hub-community-section--weddings .hub-comm-card:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.55); box-shadow: none; } .hub-community-section--weddings .hub-comm-card__body { background: transparent; } .hub-community-section--weddings .hub-comm-card__eyebrow, .hub-community-section--weddings .hub-comm-card--wedding .hub-comm-card__eyebrow, .hub-community-section--weddings .hub-comm-card h3, .hub-community-section--weddings .hub-comm-card__meta, .hub-community-section--weddings .hub-comm-card__family, .hub-community-section--weddings .hub-comm-card__msg { color: #fff; } .hub-community-section--weddings .hub-comm-card__meta, .hub-community-section--weddings .hub-comm-card__family, .hub-community-section--weddings .hub-comm-card__msg { color: rgba(255, 255, 255, 0.88); } .hub-community-section--weddings .hub-comm-toolbar__count, .hub-community-section--weddings .hub-comm-empty { color: rgba(255, 255, 255, 0.88); } .hub-community-section--weddings .hub-comm-empty { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.28); } .hub-community-section--newborns .hub-comm-card { background: color-mix(in srgb, #fff 42%, var(--art-cream)); border-color: rgba(26, 26, 26, 0.14); box-shadow: none; } .hub-community-section--newborns .hub-comm-card:hover { background: color-mix(in srgb, #fff 55%, var(--art-cream)); border-color: rgba(26, 26, 26, 0.22); box-shadow: none; } .hub-community-section--newborns .hub-comm-card__body { background: transparent; } .hub-memorial-section .hub-comm-scene .hub-comm-card, .hub-community-section--weddings .hub-comm-scene .hub-comm-card, .hub-community-section--newborns .hub-comm-scene .hub-comm-card { background: #fff; border-color: rgba(255, 255, 255, 0.85); box-shadow: 0 18px 48px rgba(8, 12, 30, 0.28); } .hub-memorial-section .hub-comm-scene .hub-comm-card:hover, .hub-community-section--weddings .hub-comm-scene .hub-comm-card:hover, .hub-community-section--newborns .hub-comm-scene .hub-comm-card:hover { background: #fff; border-color: #fff; box-shadow: 0 20px 52px rgba(8, 12, 30, 0.32); } .hub-memorial-section .hub-comm-scene .hub-comm-card__body, .hub-community-section--weddings .hub-comm-scene .hub-comm-card__body, .hub-community-section--newborns .hub-comm-scene .hub-comm-card__body { background: #fff; } .hub-memorial-section .hub-comm-scene .hub-comm-card h3, .hub-community-section--weddings .hub-comm-scene .hub-comm-card h3, .hub-community-section--newborns .hub-comm-scene .hub-comm-card h3 { color: var(--ic-navy); } .hub-memorial-section .hub-comm-scene .hub-comm-card__meta, .hub-memorial-section .hub-comm-scene .hub-comm-card__family, .hub-memorial-section .hub-comm-scene .hub-comm-card__msg, .hub-community-section--weddings .hub-comm-scene .hub-comm-card__meta, .hub-community-section--weddings .hub-comm-scene .hub-comm-card__family, .hub-community-section--weddings .hub-comm-scene .hub-comm-card__msg, .hub-community-section--newborns .hub-comm-scene .hub-comm-card__meta, .hub-community-section--newborns .hub-comm-scene .hub-comm-card__family, .hub-community-section--newborns .hub-comm-scene .hub-comm-card__msg { color: rgba(26, 26, 26, 0.78); } .hub-memorial-section .hub-comm-scene .hub-comm-card__eyebrow, .hub-memorial-section .hub-comm-scene .hub-comm-card--memory .hub-comm-card__eyebrow { color: #6b5a3e; } .hub-community-section--newborns .hub-comm-scene .hub-comm-card__eyebrow, .hub-community-section--newborns .hub-comm-scene .hub-comm-card--newborn .hub-comm-card__eyebrow { color: #b06a2e; } .hub-community-section--weddings .hub-comm-scene .hub-comm-card__eyebrow, .hub-community-section--weddings .hub-comm-scene .hub-comm-card--wedding .hub-comm-card__eyebrow { color: #7a4a6a; } .hub-community-section--newborns .hub-comm-card__eyebrow, .hub-community-section--newborns .hub-comm-card--newborn .hub-comm-card__eyebrow, .hub-community-section--newborns .hub-comm-card h3, .hub-community-section--newborns .hub-comm-card__meta, .hub-community-section--newborns .hub-comm-card__family, .hub-community-section--newborns .hub-comm-card__msg { color: #1a1a1a; } .hub-community-section--newborns .hub-comm-card__meta, .hub-community-section--newborns .hub-comm-card__family, .hub-community-section--newborns .hub-comm-card__msg { color: rgba(26, 26, 26, 0.78); } .hub-community-section--newborns .hub-comm-toolbar__count { color: rgba(26, 26, 26, 0.72); } .hub-community-section--newborns .hub-comm-empty { color: rgba(26, 26, 26, 0.78); background: color-mix(in srgb, #fff 42%, var(--art-cream)); border: 1px solid rgba(26, 26, 26, 0.12); } .mobile-menu__section { margin-top: 8px; padding: 10px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); pointer-events: none; } @media (max-width: 980px) { .hub-comm-grid { grid-template-columns: repeat(2, minmax(0, 320px)); } } @media (max-width: 700px) { .hub-comm-grid { grid-template-columns: minmax(0, 1fr); max-width: 440px; gap: var(--space-6); /* one card fills the phone view; scroll to the next */ scroll-snap-type: y proximity; } .hub-comm-card, .hub-featured .hub-member { min-height: calc(100svh - var(--site-header-offset, 210px) - 56px); scroll-snap-align: start; scroll-margin-top: calc(var(--site-header-offset, 210px) + 12px); } .hub-comm-card__media { flex: 1 1 auto; min-height: 48vh; aspect-ratio: auto; } .hub-featured .hub-member { display: flex; flex-direction: column; justify-content: center; } .hub-comm-nav a { font-size: 12px; padding: 7px 10px; } .hub-comm-toolbar { flex-direction: column; align-items: stretch; max-width: 440px; } .hub-comm-toolbar .btn { text-align: center; } .page-hub.has-overlay-header { --site-header-offset: 150px; } .page-hub .hub-intro, .page-hub .hub-wall-panel, .page-hub .hub-panel { min-height: auto; } .page-hub .hub-intro { min-height: 100svh; padding-top: calc(var(--site-header-offset, 150px) + 16px); } .hub-panel { padding-top: 24px; } } /* Sitewide: breathing room under sticky headers on subpages */ @media (max-width: 700px) { .directory-grid, .biz-grid, .church-grid, .org-grid, .events-grid, .ce-grid { justify-content: center; } } /* ============================================================================ MEDIA PAGE — ICWN weekly broadcast + Tri-County radio ========================================================================== */ /* --- Broadcast theater: player left, month's editions right ------------ */ .wicn-theater { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; min-height: 100vh; min-height: 100svh; padding: clamp(150px, 19vh, 208px) 0 clamp(58px, 8vh, 88px); overflow: hidden; background: #060e22; color: #fff; } .wicn-theater__bg { position: absolute; inset: 0; z-index: 0; background-image: linear-gradient( 180deg, rgba(4, 10, 26, 0.86) 0%, rgba(4, 10, 26, 0.7) 45%, rgba(4, 10, 26, 0.92) 100% ), url("../media/img/icwn-stage.jpg?v=1"); background-position: center center; background-size: cover; background-repeat: no-repeat; } .wicn-theater__inner { position: relative; z-index: 2; width: min(1560px, calc(100% - 2 * clamp(18px, 4vw, 48px))); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(288px, 0.82fr); gap: clamp(20px, 2.6vw, 38px); align-items: start; } /* ---------------------------------------------------------- Video stage */ .wicn-stage { min-width: 0; display: grid; gap: 12px; } .wicn-stage__frame { position: relative; aspect-ratio: 16 / 9; width: 100%; /* Never let the 16:9 box grow taller than the screen can show */ max-width: calc((100svh - 300px) * 16 / 9); margin: 0 auto; border-radius: 14px; overflow: hidden; background: #04091a; border: 1px solid rgba(231, 204, 161, 0.22); box-shadow: 0 26px 70px rgba(2, 6, 18, 0.6); container-type: size; container-name: wicnstage; } .wicn-stage__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #04091a; } .wicn-stage__yt { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; background: #04091a; } .wicn-theater.is-youtube .wicn-cover { pointer-events: none; } /* Branded cover — Local News placeholder (and legacy on-air card) */ .wicn-cover { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; text-align: center; opacity: 1; transition: opacity 0.7s ease, visibility 0s; } .wicn-cover.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.7s ease, visibility 0s linear 0.7s; } .wicn-cover__art { position: absolute; inset: 0; background-image: linear-gradient( 180deg, rgba(4, 10, 26, 0.62) 0%, rgba(4, 10, 26, 0.42) 42%, rgba(4, 10, 26, 0.8) 100% ), url("../media/img/icwn-stage.jpg?v=1"); background-position: center center; background-size: cover; transform: scale(1.02); animation: icwn-drift 26s ease-in-out infinite alternate; } @keyframes icwn-drift { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.07) translate3d(0, -1.2%, 0); } } @media (prefers-reduced-motion: reduce) { .wicn-cover__art { animation: none; } } .wicn-cover__body { position: relative; z-index: 2; display: grid; justify-items: center; align-content: center; padding: clamp(12px, 2.2vw, 30px); width: 100%; height: 100%; max-width: 62ch; overflow: hidden; } .wicn-cover__body > * { flex-shrink: 0; } /* Big play button on the cover */ .wicn-bigplay { display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(14px, 2vh, 24px); padding: 11px 24px 11px 11px; border: 0; border-radius: var(--radius-pill); background: var(--art-gold); color: #16110a; font-size: clamp(14px, 1.5vw, 16px); font-weight: 800; cursor: pointer; box-shadow: 0 14px 34px rgba(2, 6, 18, 0.55); transition: transform 0.12s ease, filter 0.15s ease; } .wicn-bigplay:hover { filter: brightness(1.07); transform: translateY(-1px); } .wicn-bigplay[hidden] { display: none; } .wicn-bigplay__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #16110a; color: var(--art-gold); } .wicn-bigplay__icon svg { width: 19px; height: 19px; margin-left: 2px; } /* Pulsing ring while the news open is playing */ .wicn-theater.is-intro .wicn-bigplay__icon { animation: wicn-open-pulse 1.2s ease-in-out infinite; } @keyframes wicn-open-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(231, 204, 161, 0.55); } 50% { box-shadow: 0 0 0 12px rgba(231, 204, 161, 0); } } @media (prefers-reduced-motion: reduce) { .wicn-theater.is-intro .wicn-bigplay__icon { animation: none; } } /* -------------------------------------------------------- Player controls */ .wicn-stage__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; } .wicn-stage__now { margin: 0; min-width: 0; flex: 1 1 200px; color: rgba(255, 255, 255, 0.9); font-size: 13.5px; font-weight: 600; letter-spacing: 0.02em; } .wicn-stage__controls { display: flex; flex-wrap: wrap; gap: 8px; } .wicn-ctl { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px 8px 9px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius-pill); background: rgba(4, 10, 26, 0.66); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; backdrop-filter: blur(4px); transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.12s ease; } .wicn-ctl:hover { background: rgba(4, 10, 26, 0.9); border-color: rgba(231, 204, 161, 0.5); transform: translateY(-1px); } .wicn-ctl__icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--art-gold); color: #16110a; } .wicn-ctl__icon svg { width: 15px; height: 15px; } /* Play / pause icon swap */ .wicn-ctl__pause { display: none; } .wicn-ctl.is-playing .wicn-ctl__play { display: none; } .wicn-ctl.is-playing .wicn-ctl__pause { display: block; } /* Sound icon swap — .is-muted means audio is off */ .wicn-ctl__muted { display: none; } .wicn-ctl.is-muted .wicn-ctl__muted { display: block; } .wicn-ctl.is-muted .wicn-ctl__unmuted { display: none; } .wicn-ctl.is-muted .wicn-ctl__icon { background: rgba(255, 255, 255, 0.28); color: #fff; } /* Enlarge icon swap */ .wicn-ctl__shrink { display: none; } .wicn-ctl--enlarge.is-on .wicn-ctl__grow { display: none; } .wicn-ctl--enlarge.is-on .wicn-ctl__shrink { display: block; } /* ------------------------------------------------- Enlarged / full view */ .wicn-stage.is-enlarged { position: fixed; inset: 0; z-index: 999; margin: 0; padding: clamp(10px, 2vh, 24px); gap: 10px; grid-template-rows: minmax(0, 1fr) auto; background: #02060f; } .wicn-stage.is-enlarged .wicn-stage__frame { height: 100%; aspect-ratio: auto; border-radius: 10px; border-color: rgba(231, 204, 161, 0.14); } .wicn-stage.is-enlarged .wicn-stage__video, .wicn-stage.is-enlarged .wicn-stage__yt { object-fit: contain; } body.wicn-locked { overflow: hidden; } /* Native fullscreen, when the browser grants it */ .wicn-stage:fullscreen { padding: clamp(10px, 2vh, 24px); background: #02060f; grid-template-rows: minmax(0, 1fr) auto; } .wicn-stage:fullscreen .wicn-stage__frame { height: 100%; aspect-ratio: auto; } .wicn-stage:fullscreen .wicn-stage__video, .wicn-stage:fullscreen .wicn-stage__yt { object-fit: contain; } /* ------------------------------------------------------- News sources list */ .wicn-archive { min-width: 0; padding: clamp(18px, 2vw, 26px); border-radius: 14px; border: 1px solid rgba(231, 204, 161, 0.24); background: rgba(4, 14, 34, 0.72); backdrop-filter: blur(8px); box-shadow: 0 20px 54px rgba(2, 6, 18, 0.5); } .wicn-archive__eyebrow { margin: 0 0 6px; color: var(--art-gold); font-size: 10.5px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } .wicn-archive__title { margin: 0 0 4px; font-family: var(--font-serif); font-size: clamp(19px, 2.1vw, 25px); line-height: 1.2; color: #fff; } .wicn-archive__month { margin: 0 0 16px; color: rgba(255, 255, 255, 0.7); font-size: 13px; letter-spacing: 0.03em; } .wicn-archive__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .wicn-episode { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; background: rgba(255, 255, 255, 0.045); color: #fff; font: inherit; text-align: left; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.12s ease; } .wicn-episode:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(231, 204, 161, 0.45); transform: translateX(2px); } .wicn-episode.is-current { border-color: var(--art-gold); background: rgba(231, 204, 161, 0.14); } .wicn-episode[disabled] { cursor: not-allowed; opacity: 0.5; transform: none; } .wicn-episode[disabled]:hover { background: rgba(255, 255, 255, 0.045); border-color: rgba(255, 255, 255, 0.12); transform: none; } .wicn-episode__num { display: grid; place-items: center; width: 40px; height: 30px; white-space: nowrap; border-radius: 8px; background: rgba(4, 10, 26, 0.7); border: 1px solid rgba(231, 204, 161, 0.3); color: var(--art-gold); font-size: 11px; font-weight: 800; letter-spacing: 0.04em; } .wicn-episode.is-current .wicn-episode__num { background: var(--art-gold); border-color: var(--art-gold); color: #16110a; } .wicn-episode__text { min-width: 0; } .wicn-episode__date { display: block; font-size: 14px; font-weight: 700; letter-spacing: 0.01em; } .wicn-episode__state { display: block; margin-top: 2px; color: rgba(255, 255, 255, 0.62); font-size: 11.5px; letter-spacing: 0.03em; } .wicn-episode.is-current .wicn-episode__state { color: var(--art-gold); } .wicn-episode__go { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; } .wicn-episode__go svg { width: 14px; height: 14px; } .wicn-episode:hover .wicn-episode__go { background: var(--art-gold); color: #16110a; } .wicn-episode[disabled] .wicn-episode__go { background: rgba(255, 255, 255, 0.08); } .wicn-archive__note { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.62); font-size: 12px; line-height: 1.5; } /* ---------------------------------------------------------- Cover sizing */ /* The cover lives inside a 16:9 box now, so scale the branding down to fit. */ .wicn-cover .icwn-onair { margin-bottom: clamp(8px, 1.6vh, 16px); padding: 5px 13px 5px 10px; font-size: clamp(9px, 0.85vw, 11px); } .wicn-cover .icwn-onair__dot { width: 7px; height: 7px; } .wicn-cover .icwn-wordmark { gap: clamp(5px, 0.7vw, 11px); margin-bottom: 8px; } .wicn-cover .icwn-wordmark span { min-width: clamp(30px, 3.5vw, 52px); padding: clamp(3px, 0.5vw, 8px) clamp(4px, 0.5vw, 8px); border-width: 1.5px; font-size: clamp(17px, 2.3vw, 34px); } .wicn-cover .icwn-hero__eyebrow { margin-bottom: clamp(8px, 1.4vh, 16px); font-size: clamp(8.5px, 0.8vw, 11px); } .wicn-cover h1 { margin: 0 0 clamp(7px, 1.2vh, 14px); color: #fff; font-family: var(--font-serif); font-weight: 700; font-size: clamp(19px, 2.5vw, 38px); line-height: 1.1; text-shadow: 0 2px 22px rgba(4, 10, 26, 0.85); } .wicn-cover .icwn-hero__sub { margin-bottom: clamp(9px, 1.6vh, 18px); max-width: 52ch; font-size: clamp(12px, 1.15vw, 16px); line-height: 1.5; } .wicn-cover .icwn-hero__meta { font-size: clamp(10.5px, 0.9vw, 12.5px); } /* Scale the cover to the actual frame, not the window, so nothing spills out */ @container wicnstage (min-width: 0px) { .wicn-cover .icwn-onair { margin-bottom: clamp(6px, 2.4cqh, 16px); padding: 0.5cqh 2.2cqw 0.5cqh 1.7cqw; font-size: clamp(8px, 1.35cqw, 12px); } .wicn-cover .icwn-wordmark { gap: clamp(4px, 1.1cqw, 12px); margin-bottom: clamp(4px, 1.4cqh, 10px); } .wicn-cover .icwn-wordmark span { min-width: clamp(26px, 5.6cqw, 62px); padding: clamp(2px, 0.9cqh, 10px) clamp(3px, 0.8cqw, 9px); font-size: clamp(15px, 3.7cqw, 44px); } .wicn-cover .icwn-hero__eyebrow { margin-bottom: clamp(6px, 2.2cqh, 16px); font-size: clamp(7.5px, 1.25cqw, 12px); } .wicn-cover h1 { margin-bottom: clamp(5px, 1.9cqh, 15px); font-size: clamp(16px, 4cqw, 44px); } .wicn-cover .icwn-hero__sub { margin-bottom: clamp(6px, 2.4cqh, 18px); font-size: clamp(10px, 1.85cqw, 19px); } .wicn-cover .icwn-hero__meta { gap: 0.6cqh 3.2cqw; font-size: clamp(9px, 1.35cqw, 14px); } .wicn-cover .icwn-hero__meta li + li::before { margin-right: 3.2cqw; margin-left: calc(-1.6cqw - 2px); } .wicn-bigplay { margin-top: clamp(8px, 3cqh, 24px); padding: 0.9cqh 2.6cqw 0.9cqh 1cqh; font-size: clamp(11px, 1.6cqw, 17px); } .wicn-bigplay__icon { width: clamp(24px, 5cqh, 42px); height: clamp(24px, 5cqh, 42px); } .wicn-bigplay__icon svg { width: 55%; height: 55%; } } /* Very short frames: drop the paragraph so the branding and button still fit */ @container wicnstage (max-height: 300px) { .wicn-cover .icwn-hero__sub { display: none; } } @container wicnstage (max-height: 230px) { .wicn-cover .icwn-hero__meta { display: none; } } .wicn-theater .icwn-scroll { position: absolute; left: 50%; bottom: clamp(12px, 2.4vh, 26px); transform: translateX(-50%); z-index: 3; } /* ------------------------------------------------------------- Responsive */ @media (max-width: 1100px) { .wicn-theater__inner { grid-template-columns: minmax(0, 1fr); gap: 20px; } .wicn-theater { min-height: 0; padding-top: clamp(132px, 17vh, 176px); } .wicn-archive__list { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } } @media (max-width: 640px) { .wicn-stage__bar { justify-content: flex-start; } .wicn-stage__now { flex-basis: 100%; } .wicn-stage__controls { width: 100%; } .wicn-ctl { flex: 1 1 auto; justify-content: center; padding: 8px 11px 8px 8px; font-size: 12px; } .wicn-archive__list { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 400px) { .wicn-ctl__label { display: none; } .wicn-ctl { flex: 0 0 auto; padding: 8px; } } /* Short laptop screens: keep the whole theater inside one view */ @media (min-width: 1101px) and (max-height: 800px) { .wicn-theater { padding-top: clamp(120px, 15vh, 158px); padding-bottom: clamp(34px, 5vh, 52px); } .wicn-archive { padding: 15px 16px; } .wicn-archive__month { margin-bottom: 11px; } .wicn-archive__list { gap: 6px; } .wicn-episode { padding: 8px 11px; gap: 10px; } .wicn-episode__num { width: 38px; height: 26px; } .wicn-archive__note { margin-top: 11px; padding-top: 10px; } .wicn-theater .icwn-scroll { display: none; } } /* On-air indicator */ .icwn-onair { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 var(--space-5); padding: 7px 16px 7px 12px; border-radius: var(--radius-pill); background: rgba(237, 28, 36, 0.92); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; box-shadow: 0 6px 20px rgba(237, 28, 36, 0.35); } .icwn-onair__dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: icwn-pulse 1.8s ease-in-out infinite; } @keyframes icwn-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.72); } } @media (prefers-reduced-motion: reduce) { .icwn-onair__dot { animation: none; } } /* ICWN call-letter wordmark */ .icwn-wordmark { display: flex; justify-content: center; gap: clamp(8px, 1.4vw, 16px); margin: 0 0 var(--space-3); } .icwn-wordmark span { display: inline-flex; align-items: center; justify-content: center; min-width: clamp(46px, 7vw, 74px); padding: clamp(6px, 1vw, 12px) clamp(6px, 0.9vw, 10px); border: 2px solid var(--art-gold); border-radius: 8px; background: rgba(4, 10, 26, 0.5); color: var(--art-cream); font-family: var(--font-serif); font-size: clamp(28px, 4.6vw, 52px); font-weight: 700; line-height: 1; letter-spacing: 0.02em; box-shadow: 0 8px 26px rgba(4, 10, 26, 0.45); } .icwn-hero__eyebrow { margin: 0 0 var(--space-4); color: var(--art-cream); font-size: clamp(12px, 1.5vw, 14px); font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; } .icwn-hero__inner h1 { font-family: var(--font-serif); font-size: clamp(30px, 5vw, 54px); line-height: 1.12; letter-spacing: -0.02em; margin: 0 auto var(--space-4); max-width: 18ch; color: #fff; text-shadow: 0 2px 22px rgba(4, 10, 26, 0.7); } .icwn-hero__sub { margin: 0 auto var(--space-6); max-width: 60ch; color: rgba(255, 255, 255, 0.92); font-size: clamp(15px, 1.9vw, 19px); line-height: 1.6; text-shadow: 0 1px 14px rgba(4, 10, 26, 0.6); } .icwn-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); } .icwn-play { display: inline-flex; align-items: center; gap: 14px; padding: 12px 26px 12px 12px; border: 0; border-radius: var(--radius-pill); background: var(--art-gold); color: #16110a; font-size: 16px; font-weight: 800; letter-spacing: 0.01em; cursor: pointer; box-shadow: 0 14px 34px rgba(4, 10, 26, 0.5); transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.15s ease; } .icwn-play:hover { filter: brightness(1.07); transform: translateY(-1px); } .icwn-play:active { transform: translateY(1px); } .icwn-play[disabled] { opacity: 0.7; cursor: progress; } .icwn-play__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #16110a; color: var(--art-gold); } .icwn-play__icon svg { width: 20px; height: 20px; margin-left: 2px; } .icwn-ghost-btn { display: inline-flex; align-items: center; padding: 12px 22px; border: 1.5px solid rgba(255, 255, 255, 0.7); border-radius: var(--radius-pill); color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease; } .icwn-ghost-btn:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; } .icwn-status { margin: 0 auto var(--space-4); max-width: 52ch; padding: 10px 16px; border-radius: var(--radius-sm); background: rgba(4, 10, 26, 0.72); border: 1px solid rgba(231, 204, 161, 0.35); color: var(--art-cream); font-size: 14px; line-height: 1.5; } .icwn-status[hidden] { display: none; } /* Live transcript while the spoken studio edition is on air */ .icwn-live { margin: 0 auto var(--space-4); max-width: 62ch; padding: 14px 18px; border-radius: var(--radius-sm); background: rgba(4, 10, 26, 0.82); border-left: 4px solid var(--art-gold); color: #fff; font-size: clamp(14px, 1.7vw, 16px); line-height: 1.55; text-align: left; box-shadow: 0 10px 28px rgba(4, 10, 26, 0.45); } .icwn-live[hidden] { display: none; } .icwn-hero.is-listening .icwn-onair { background: rgba(11, 122, 75, 0.95); box-shadow: 0 6px 20px rgba(11, 122, 75, 0.35); } .icwn-hero.is-listening .icwn-play { background: #fff; color: #16110a; } .icwn-hero.is-listening .icwn-play__icon { background: var(--art-wine); color: #fff; } .icwn-hero.is-listening .icwn-play__icon svg { display: none; } .icwn-hero.is-listening .icwn-play__icon::after { content: ""; width: 12px; height: 12px; background: #fff; border-radius: 2px; } .icwn-hero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin: 0; padding: 0; list-style: none; color: rgba(255, 255, 255, 0.8); font-size: 13px; letter-spacing: 0.04em; } .icwn-hero__meta li { display: inline-flex; align-items: center; } .icwn-hero__meta li + li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--art-gold); margin-right: 22px; margin-left: -13px; } .icwn-hero__meta strong { color: #fff; font-weight: 700; } .icwn-scroll { position: absolute; left: 50%; bottom: clamp(16px, 3vh, 30px); transform: translateX(-50%); z-index: 3; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; color: rgba(255, 255, 255, 0.85); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; transition: opacity 0.2s ease, color 0.15s ease; } .icwn-scroll:hover { color: var(--art-gold); } .icwn-scroll svg { width: 20px; height: 20px; animation: icwn-nudge 2s ease-in-out infinite; } @keyframes icwn-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } @media (prefers-reduced-motion: reduce) { .icwn-scroll svg { animation: none; } } /* --- Rundown ----------------------------------------------------------- */ .icwn-rundown { list-style: none; margin: var(--space-7) 0 0; padding: 0; display: grid; gap: 12px; } .icwn-chapter { display: grid; grid-template-columns: 84px 1fr; gap: var(--space-4); align-items: start; padding: 18px 20px; border: 1px solid var(--border); border-left: 4px solid var(--art-gold); border-radius: var(--radius-sm); background: #fff; transition: box-shadow 0.15s ease, transform 0.12s ease; } .icwn-chapter:hover { box-shadow: var(--shadow-sm); transform: translateX(2px); } .icwn-chapter__time { font-family: var(--font-serif); font-size: 17px; font-weight: 700; color: var(--ic-navy); font-variant-numeric: tabular-nums; padding-top: 2px; } .icwn-chapter__body h3 { margin: 0 0 4px; font-family: var(--font-serif); font-size: 19px; color: var(--ic-navy); } .icwn-chapter__body p { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.55; } .icwn-chapter__link { display: inline-block; margin-top: 8px; color: var(--ic-navy); font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .icwn-chapter__link:hover { color: var(--art-wine); } .icwn-tip { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); margin-top: var(--space-7); padding: clamp(22px, 3vw, 32px); border-radius: var(--radius-md, 12px); background: var(--art-cream); overflow: visible; } /* Diagonal split — same width as the why-card gap; color matches the section ground */ .icwn-tip::before { content: ""; position: absolute; top: -14%; bottom: -14%; right: clamp(150px, 18vw, 230px); width: var(--space-5); background: #1a0a14; transform: skewX(-20deg); z-index: 0; pointer-events: none; } .icwn-tip > * { position: relative; z-index: 1; } .icwn-tip h3 { margin: 0 0 6px; font-family: var(--font-serif); font-size: clamp(20px, 2.6vw, 26px); color: #1a1a1a; } .icwn-tip p { margin: 0; color: rgba(26, 26, 26, 0.78); font-size: 15px; } /* --- Why ICWN exists — artistic red wall -------------------------------- */ .section--icwn-why { position: relative; isolation: isolate; color: #fffaf7; background-color: #1a0a14; background-image: linear-gradient( 180deg, rgba(10, 4, 12, 0.45) 0%, rgba(10, 4, 12, 0.22) 40%, rgba(10, 4, 12, 0.48) 100% ), url("../media/img/icwn-why-wall.jpg?v=4"); background-size: cover; background-position: center; } .section--icwn-why .eyebrow { color: #f0c9a0; letter-spacing: 0.16em; } .section--icwn-why .section-title { color: #fffaf7; text-shadow: 0 2px 18px rgba(20, 4, 10, 0.35); } .section--icwn-why .section-sub, .section--icwn-why .icwn-why__lead { color: rgba(255, 248, 244, 0.9); max-width: 62ch; } .icwn-why__lead { max-width: 62ch; } .icwn-why__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-5); margin-top: var(--space-7); } .icwn-why__card { padding: clamp(22px, 2.6vw, 30px); border-radius: var(--radius-md, 12px); background: rgba(255, 250, 246, 0.96); border: 1px solid rgba(255, 220, 200, 0.35); box-shadow: 0 14px 36px rgba(20, 4, 10, 0.28); backdrop-filter: blur(2px); } .icwn-why__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 12px; background: var(--ic-navy); color: var(--art-gold); } .icwn-why__icon svg { width: 26px; height: 26px; } .icwn-why__card h3 { margin: 0 0 8px; font-family: var(--font-serif); font-size: 21px; color: var(--ic-navy); } .icwn-why__card p { margin: 0; color: var(--text-muted); font-size: 14.5px; line-height: 1.6; } .section--icwn-why .icwn-tip { background: rgba(231, 204, 161, 0.94); border: 1px solid rgba(255, 236, 210, 0.45); box-shadow: 0 12px 30px rgba(20, 4, 10, 0.22); } .section--icwn-why .icwn-tip::before { /* Match the Why section ground so the cut reads as a gap */ background: #1a0a14; width: var(--space-5); } /* --- Radio directory --------------------------------------------------- */ .section--radio-navy { background: var(--ic-navy); } .section--radio-navy .eyebrow { color: var(--art-gold); } .section--radio-navy .section-title { color: #fff; } .section--radio-navy .section-sub { color: rgba(255, 255, 255, 0.85); } .radio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-5); margin-top: var(--space-7); } .radio-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-md, 12px); background: #fff; box-shadow: 0 10px 30px rgba(4, 10, 26, 0.28); transition: transform 0.15s ease, box-shadow 0.15s ease; } .radio-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(4, 10, 26, 0.4); } .radio-card__dial { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: clamp(22px, 3vw, 30px) var(--space-4); color: var(--art-cream); text-align: center; background: var(--art-blue); } .radio-card--wine .radio-card__dial { background: var(--art-wine); } .radio-card--blue .radio-card__dial { background: var(--art-blue); } .radio-card--gold .radio-card__dial { background: var(--art-gold); color: #1a1a1a; } .radio-card--teal .radio-card__dial { background: var(--art-teal); } .radio-card--leaf .radio-card__dial { background: var(--art-leaf); } .radio-card--terra .radio-card__dial { background: var(--art-terra); } .radio-card__freq { font-family: var(--font-serif); font-size: clamp(34px, 5vw, 46px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; } .radio-card__band { font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.9; } .radio-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--space-5); } .radio-card__calls { margin: 0 0 2px; font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); } .radio-card__name { margin: 0 0 6px; font-family: var(--font-serif); font-size: 23px; color: var(--ic-navy); } .radio-card__format { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--art-wine); } .radio-card__owner { margin: 0 0 10px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ic-navy); opacity: 0.72; } .radio-card__note { margin: 0 0 var(--space-5); color: var(--text-muted); font-size: 14.5px; line-height: 1.55; } .radio-card--steel .radio-card__dial { background: #2f4a63; } .radio-card--plum .radio-card__dial { background: #4a1530; } /* Listen buttons — open the station site (same look as before) */ .radio-card__actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; } .radio-listen { display: inline-flex; align-items: center; gap: 9px; padding: 10px 20px 10px 12px; border: 0; border-radius: var(--radius-pill); background: var(--ic-navy); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, transform 0.12s ease; } a.radio-listen:hover, a.radio-listen:focus-visible { color: #fff; text-decoration: none; transform: translateY(-1px); } .radio-listen:hover { transform: translateY(-1px); } .radio-card.is-playing .radio-listen { background: var(--art-wine); } .radio-card.is-loading .radio-listen { background: #55606f; } .radio-card.is-error .radio-listen { background: var(--art-terra); } .radio-listen:disabled { background: #626875; color: rgba(255, 255, 255, 0.88); cursor: not-allowed; opacity: 0.9; } .radio-listen:disabled:hover { transform: none; } .radio-listen:disabled .radio-listen__icon svg { width: 15px; height: 15px; } .radio-listen__icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); } .radio-listen__play { width: 15px; height: 15px; } .radio-card.is-playing .radio-listen__play { display: none; } /* Equalizer bars shown while a station is playing */ .radio-eq { display: none; align-items: flex-end; gap: 2px; width: 15px; height: 15px; } .radio-card.is-playing .radio-eq { display: inline-flex; } .radio-eq i { display: block; width: 3px; height: 100%; background: #fff; border-radius: 1px; transform-origin: bottom; animation: radioEq 0.9s ease-in-out infinite; } .radio-eq i:nth-child(2) { animation-delay: 0.18s; } .radio-eq i:nth-child(3) { animation-delay: 0.36s; } .radio-eq i:nth-child(4) { animation-delay: 0.54s; } @keyframes radioEq { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } } @media (prefers-reduced-motion: reduce) { .radio-eq i { animation: none; transform: scaleY(0.6); } } .radio-card__site { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--ic-navy); text-decoration: none; border-bottom: 2px solid transparent; transition: border-color 0.15s ease, color 0.15s ease; } .radio-card__site:hover { color: var(--art-wine); border-bottom-color: var(--art-wine); } /* Sticky "now playing" strip under the grid */ .radio-nowplaying { position: sticky; bottom: 14px; z-index: 3; display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; margin: var(--space-6) auto 0; padding: 10px 12px 10px 16px; border-radius: var(--radius-pill); background: #04132b; color: #fff; box-shadow: 0 12px 30px rgba(4, 10, 26, 0.5); } .radio-nowplaying__eq { display: inline-flex; align-items: flex-end; gap: 2px; width: 16px; height: 16px; } .radio-nowplaying__eq i { display: block; width: 3px; height: 100%; background: var(--art-gold); border-radius: 1px; transform-origin: bottom; animation: radioEq 0.9s ease-in-out infinite; } .radio-nowplaying__eq i:nth-child(2) { animation-delay: 0.18s; } .radio-nowplaying__eq i:nth-child(3) { animation-delay: 0.36s; } .radio-nowplaying__eq i:nth-child(4) { animation-delay: 0.54s; } .radio-nowplaying__text { font-size: 14px; font-weight: 700; letter-spacing: 0.01em; } .radio-nowplaying__stop { padding: 6px 16px; border: 0; border-radius: var(--radius-pill); background: var(--art-wine); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; transition: background-color 0.15s ease; } .radio-nowplaying__stop:hover { background: #8a1f2f; } .radio-crg { margin-top: var(--space-7); padding: clamp(22px, 3vw, 34px); border-radius: var(--radius-md, 12px); border: 1px solid rgba(231, 204, 161, 0.35); border-left: 5px solid var(--art-gold); background: rgba(4, 19, 43, 0.55); color: rgba(255, 248, 244, 0.92); } .radio-crg__eyebrow { margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--art-gold); } .radio-crg h3 { margin: 0 0 10px; font-family: var(--font-serif); font-size: clamp(22px, 3vw, 28px); color: #fff; } .radio-crg p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 248, 244, 0.88); } .radio-crg strong { color: #fff; } .radio-crg__list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .radio-crg__list li { padding: 14px 16px; border-radius: 10px; border: 1px solid rgba(231, 204, 161, 0.22); background: rgba(255, 255, 255, 0.05); font-size: 14px; line-height: 1.5; } .radio-crg__list strong { display: block; font-size: 15px; letter-spacing: 0.01em; } .radio-crg__list span { color: rgba(255, 248, 244, 0.6); font-size: 13px; } .radio-crg__list em { display: block; margin-top: 6px; font-style: normal; font-size: 13px; color: var(--art-gold); } .radio-heritage { margin-top: var(--space-7); padding: clamp(22px, 3vw, 34px); border-radius: var(--radius-md, 12px); border: 1px solid rgba(231, 204, 161, 0.35); border-left: 5px solid var(--art-gold); background: rgba(255, 255, 255, 0.06); } .radio-heritage__eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--art-gold); } .radio-heritage h3 { margin: 0 0 10px; font-family: var(--font-serif); font-size: clamp(22px, 3vw, 28px); color: #fff; } .radio-heritage p { margin: 0; max-width: 78ch; color: rgba(255, 255, 255, 0.85); font-size: 15.5px; line-height: 1.65; } .radio-note { margin: var(--space-6) 0 0; color: rgba(255, 255, 255, 0.75); font-size: 14px; } .radio-note a { color: var(--art-gold); text-decoration: underline; text-underline-offset: 3px; } /* --- Station advertising ----------------------------------------------- */ .section--radio-cream { background: var(--art-cream); } .section--radio-cream .eyebrow { color: #8a5a12; } .section--radio-cream .section-title { color: #1a1a1a; } .section--radio-cream .section-sub { color: rgba(26, 26, 26, 0.8); } .radio-ads { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-5); margin-top: var(--space-7); } .radio-ad { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-md, 12px); background: #fff; text-decoration: none; box-shadow: 0 8px 24px rgba(26, 26, 26, 0.16); transition: transform 0.15s ease, box-shadow 0.15s ease; } .radio-ad:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(26, 26, 26, 0.24); } .radio-ad img { display: block; width: 100%; aspect-ratio: 1200 / 628; object-fit: cover; } .radio-ad__slot { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 5px 11px; border-radius: var(--radius-pill); background: rgba(4, 10, 26, 0.78); color: var(--art-cream); font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; } .radio-ad__caption { display: block; padding: var(--space-4) var(--space-5) var(--space-5); } .radio-ad__caption strong { display: block; margin-bottom: 4px; font-family: var(--font-serif); font-size: 18px; color: var(--ic-navy); } .radio-ad__caption span { color: var(--text-muted); font-size: 14px; line-height: 1.5; } .radio-advertise { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); margin-top: var(--space-7); padding: clamp(24px, 3.4vw, 40px); border-radius: var(--radius-md, 12px); background: var(--ic-navy); } .radio-advertise__eyebrow { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--art-gold); } .radio-advertise h3 { margin: 0 0 8px; font-family: var(--font-serif); font-size: clamp(22px, 3vw, 30px); color: #fff; } .radio-advertise p { margin: 0; max-width: 56ch; color: rgba(255, 255, 255, 0.85); font-size: 15.5px; line-height: 1.6; } .radio-advertise__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); } /* --- WICN tip submit (video / voice / photos) --------------------------- */ .section--wicn-tip { padding: 0; background: radial-gradient(ellipse 80% 60% at 10% 0%, rgba(138, 31, 47, 0.08), transparent 55%), radial-gradient(ellipse 70% 50% at 90% 100%, rgba(4, 19, 43, 0.06), transparent 50%), var(--art-cream); } .section--wicn-tip[hidden] { display: none !important; } .section--wicn-tip.is-open { display: block; } .wicn-tip-drawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s cubic-bezier(0.22, 1, 0.36, 1); } .section--wicn-tip.is-open .wicn-tip-drawer { grid-template-rows: 1fr; } .wicn-tip-drawer__inner { overflow: hidden; min-height: 0; opacity: 0; transform: translateY(-12px); transition: opacity 0.4s ease 0.05s, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); } .section--wicn-tip.is-open .wicn-tip-drawer__inner { opacity: 1; transform: translateY(0); } .wicn-tip-drawer__inner > .container { padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(40px, 6vw, 72px); } .wicn-tip-drawer__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 24px; margin-bottom: var(--space-5); } .wicn-tip-drawer__head .section-sub { margin-bottom: 0; } .wicn-tip-close { flex-shrink: 0; margin-top: 4px; border: 1px solid rgba(4, 19, 43, 0.2); border-radius: var(--radius-pill); padding: 8px 16px; background: transparent; color: var(--ic-navy); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .wicn-tip-close:hover { background: rgba(4, 19, 43, 0.06); border-color: rgba(4, 19, 43, 0.35); } .section--wicn-tip .eyebrow { color: #8a1f2f; } .section--wicn-tip .section-title { color: #1a1a1a; } .section--wicn-tip .section-sub { color: rgba(26, 26, 26, 0.78); max-width: 62ch; } .wicn-tip-form { margin-top: var(--space-5); padding: clamp(22px, 3vw, 36px); border-radius: var(--radius-md, 12px); background: #fff; border: 1px solid rgba(26, 26, 26, 0.08); box-shadow: 0 12px 40px rgba(4, 10, 26, 0.08); display: grid; gap: var(--space-5); } .wicn-tip-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .wicn-tip-mode { display: grid; gap: 6px; justify-items: start; text-align: left; padding: 16px 18px; border-radius: 12px; border: 2px solid rgba(4, 19, 43, 0.12); background: #faf8f4; color: var(--ic-navy); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .wicn-tip-mode:hover { border-color: rgba(138, 31, 47, 0.35); } .wicn-tip-mode.is-active { border-color: var(--logo-color, #8a1f2f); background: #fff; box-shadow: 0 0 0 3px rgba(138, 31, 47, 0.12); } .wicn-tip-mode__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(4, 19, 43, 0.06); color: var(--logo-color, #8a1f2f); } .wicn-tip-mode.is-active .wicn-tip-mode__icon { background: var(--logo-color, #8a1f2f); color: #fff; } .wicn-tip-mode__icon svg { width: 20px; height: 20px; } .wicn-tip-mode strong { font-size: 15px; font-weight: 800; letter-spacing: 0.01em; } .wicn-tip-mode span { font-size: 13px; color: rgba(26, 26, 26, 0.65); line-height: 1.35; } .wicn-tip-panel[hidden] { display: none !important; } .wicn-tip-preview[hidden], .wicn-tip-photos[hidden], .wicn-tip-status[hidden], .wicn-tip-recorder__timer[hidden], .wicn-tip-recorder audio[hidden], .wicn-tip-recorder .btn[hidden] { display: none !important; } .wicn-tip-drop { display: grid; justify-items: center; gap: 8px; text-align: center; padding: clamp(28px, 5vw, 44px) 20px; border: 2px dashed rgba(4, 19, 43, 0.22); border-radius: 12px; background: #f7f5f1; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .wicn-tip-drop:hover, .wicn-tip-drop:focus-within { border-color: var(--logo-color, #8a1f2f); background: #fff8f6; } .wicn-tip-drop__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(138, 31, 47, 0.1); color: var(--logo-color, #8a1f2f); } .wicn-tip-drop__icon svg { width: 24px; height: 24px; } .wicn-tip-drop strong { font-size: 16px; color: var(--ic-navy); } .wicn-tip-drop span { font-size: 13px; color: rgba(26, 26, 26, 0.62); max-width: 36ch; } .wicn-tip-preview { margin-top: 14px; display: grid; gap: 12px; } .wicn-tip-preview video { display: block; width: 100%; max-height: 360px; border-radius: 12px; background: #0a1224; object-fit: contain; } .wicn-tip-preview__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; } .wicn-tip-preview__meta p { margin: 0; font-size: 14px; font-weight: 600; color: var(--ic-navy); } .wicn-tip-clear { border: 0; background: transparent; color: var(--logo-color, #8a1f2f); font: inherit; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .wicn-tip-recorder { display: grid; gap: 14px; justify-items: center; text-align: center; padding: clamp(22px, 4vw, 36px) 18px; border-radius: 12px; background: #04132b; color: #fffaf7; } .wicn-tip-recorder__meter { display: flex; align-items: flex-end; gap: 5px; height: 36px; } .wicn-tip-recorder__meter span { width: 5px; height: 10px; border-radius: 3px; background: rgba(231, 204, 161, 0.45); } .wicn-tip-recorder.is-recording .wicn-tip-recorder__meter span { animation: wicn-eq 0.7s ease-in-out infinite alternate; background: var(--art-gold, #e7cca1); } .wicn-tip-recorder.is-recording .wicn-tip-recorder__meter span:nth-child(2) { animation-delay: 0.08s; } .wicn-tip-recorder.is-recording .wicn-tip-recorder__meter span:nth-child(3) { animation-delay: 0.16s; } .wicn-tip-recorder.is-recording .wicn-tip-recorder__meter span:nth-child(4) { animation-delay: 0.04s; } .wicn-tip-recorder.is-recording .wicn-tip-recorder__meter span:nth-child(5) { animation-delay: 0.2s; } .wicn-tip-recorder.is-recording .wicn-tip-recorder__meter span:nth-child(6) { animation-delay: 0.12s; } .wicn-tip-recorder.is-recording .wicn-tip-recorder__meter span:nth-child(7) { animation-delay: 0.18s; } .wicn-tip-recorder.is-recording .wicn-tip-recorder__meter span:nth-child(8) { animation-delay: 0.06s; } @keyframes wicn-eq { from { height: 8px; } to { height: 34px; } } .wicn-tip-recorder__status { margin: 0; max-width: 42ch; font-size: 15px; line-height: 1.5; color: rgba(255, 248, 244, 0.88); } .wicn-tip-recorder__timer { margin: 0; font-family: var(--font-serif); font-size: 28px; letter-spacing: 0.04em; color: var(--art-gold, #e7cca1); } .wicn-tip-recorder__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .wicn-tip-recorder .btn { min-width: 140px; } .wicn-tip-recorder .btn:not(.btn--solid) { border-color: rgba(255, 255, 255, 0.45); color: #fff; } .wicn-tip-recorder .btn:not(.btn--solid):hover { background: rgba(255, 255, 255, 0.1); } .wicn-tip-recorder audio { width: min(100%, 420px); margin-top: 4px; } .wicn-tip-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-top: 14px; } .wicn-tip-photo { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #eee; } .wicn-tip-photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .wicn-tip-photo__remove { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(4, 10, 26, 0.78); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; } .wicn-tip-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; } .wicn-tip-field { display: grid; gap: 6px; } .wicn-tip-field--full { grid-column: 1 / -1; } .wicn-tip-field label { font-size: 13px; font-weight: 700; color: var(--ic-navy); } .wicn-tip-field label span { font-weight: 500; color: rgba(26, 26, 26, 0.55); } .wicn-tip-field input, .wicn-tip-field textarea { width: 100%; border: 1px solid rgba(4, 19, 43, 0.18); border-radius: 10px; padding: 12px 14px; font: inherit; font-size: 15px; background: #fff; color: #1a1a1a; } .wicn-tip-field textarea { resize: vertical; min-height: 120px; line-height: 1.5; } .wicn-tip-field input:focus, .wicn-tip-field textarea:focus { outline: 2px solid var(--ic-navy); outline-offset: 1px; } .wicn-tip-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding-top: 4px; } .wicn-tip-submit .btn { min-width: 180px; } .wicn-tip-submit__note { margin: 0; flex: 1; min-width: 220px; font-size: 13px; line-height: 1.45; color: rgba(26, 26, 26, 0.62); } .wicn-tip-submit__note a { color: var(--logo-color, #8a1f2f); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .wicn-tip-status { margin: 0; padding: 14px 16px; border-radius: 10px; font-size: 14px; line-height: 1.5; background: #eef6ef; color: #1d4a2a; border: 1px solid rgba(45, 120, 70, 0.25); } .wicn-tip-status.is-error { background: #fff1f0; color: #7a1f1f; border-color: rgba(138, 31, 47, 0.28); } @media (max-width: 720px) { .icwn-chapter { grid-template-columns: 1fr; gap: 6px; } /* Keep the scroll cue clear of the meta line on short phone viewports */ .icwn-hero__inner { padding-bottom: 104px; } .icwn-hero__meta li + li::before { display: none; } .icwn-hero__meta { gap: 6px 16px; } .radio-advertise, .icwn-tip { flex-direction: column; align-items: flex-start; } .icwn-tip::before { display: none; } .wicn-tip-modes { grid-template-columns: 1fr; } .wicn-tip-fields { grid-template-columns: 1fr; } } /* ---- Market context chip + SC Markets hub (geography foundation) ---- */ .market-chip { position: relative; display: inline-flex; flex-direction: column; align-items: stretch; max-width: 168px; z-index: 40; } .market-chip__toggle { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; max-width: 168px; padding: 6px 10px; border-radius: 8px; border: 1.5px solid rgba(25, 45, 87, 0.22); background: #fff; color: var(--ic-navy, #192d57); text-decoration: none; line-height: 1.15; cursor: pointer; font: inherit; text-align: left; transition: background 0.15s ease, border-color 0.15s ease; } .market-chip__toggle:hover, .market-chip__toggle:focus-visible, .market-chip.is-open .market-chip__toggle { background: #eaf6fd; border-color: #6ba8d4; } .market-chip__label { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; } .market-chip__row { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; } .market-chip__name { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 118px; } .market-chip__chevron { flex: 0 0 auto; font-size: 9px; line-height: 1; opacity: 0.75; transform: translateY(0.5px); } .market-chip.is-open .market-chip__chevron { transform: rotate(180deg) translateY(-0.5px); } .market-chip__menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; max-width: min(300px, 78vw); max-height: min(420px, 60vh); overflow: auto; padding: 6px; border-radius: 10px; border: 1px solid rgba(25, 45, 87, 0.18); background: #fff; box-shadow: 0 10px 28px rgba(23, 37, 90, 0.16); z-index: 50; } .market-chip__group { padding: 4px 0 8px; } .market-chip__group + .market-chip__group { border-top: 1px solid rgba(25, 45, 87, 0.1); margin-top: 4px; padding-top: 8px; } .market-chip__group-label { margin: 0 10px 4px; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(25, 45, 87, 0.55); } .market-chip__option--statewide { font-weight: 800; } .market-chip__option--state { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 800; } .market-chip__option-hint { font-size: 16px; line-height: 1; opacity: 0.45; font-weight: 400; } .market-chip__option--back { font-weight: 700; color: rgba(25, 45, 87, 0.75); margin-bottom: 2px; } .market-chip__option { display: block; width: 100%; border: 0; background: transparent; color: var(--ic-navy, #192d57); text-align: left; font: inherit; font-size: 13px; font-weight: 600; padding: 8px 10px; border-radius: 7px; cursor: pointer; } .market-chip__option:hover, .market-chip__option:focus-visible { background: #eaf6fd; } .market-chip__option.is-selected { background: rgba(23, 37, 90, 0.08); } .market-chip__soon { font-size: 10px; font-weight: 600; color: #8a5a2b; } /* Market chip: phone = right of logo (balances hamburger); desktop = left beside hamburger */ .site-header--overlay .market-chip { position: absolute; top: 50%; right: max(12px, env(safe-area-inset-right, 0px)); left: auto; transform: translateY(-50%); z-index: 60; max-width: min(148px, 40vw); } .site-header--overlay .market-chip.is-open { z-index: 80; } .site-header--overlay .market-chip__toggle { border-color: rgba(25, 45, 87, 0.2); max-width: 100%; } .site-header--overlay .market-chip__menu { left: auto; right: 0; min-width: min(260px, calc(100vw - 24px)); max-width: min(280px, calc(100vw - 24px)); max-height: min(360px, 55vh); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 90; } @media (min-width: 1081px) { .site-header--overlay .market-chip { left: calc(var(--space-5) + 48px + 10px); right: auto; top: 50%; transform: translateY(-50%); max-width: 168px; } .site-header--overlay .market-chip__menu { position: absolute; top: calc(100% + 6px); left: 0; right: auto; min-width: 220px; max-width: min(280px, 70vw); } } /* * Phone/tablet header (final overrides — must stay below other market-chip rules): * Row 1: centered logo only * Row 2: hamburger left + Market chip right (down by the picture line) * City list: fixed full-width panel so nothing clips off-screen */ @media (max-width: 1080px) { .site-header--overlay .header-bar { padding-bottom: 10px; } .site-header--overlay .header-bar__inner { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; align-items: center; justify-items: stretch; gap: 6px 12px; min-height: 0; padding: 10px 12px 8px; padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); } .site-header--overlay .brand { grid-column: 1 / -1; grid-row: 1; justify-content: center; justify-self: center; } .site-header--overlay .brand-lockup__img { width: min(128px, 42vw); } .site-header--overlay .menu-toggle { position: static; top: auto; left: auto; transform: none; grid-column: 1; grid-row: 2; justify-self: start; align-self: center; } .site-header--overlay .market-chip { position: static; top: auto; right: auto; left: auto; transform: none; grid-column: 3; grid-row: 2; justify-self: end; align-self: center; max-width: min(168px, 48vw); width: max-content; } .site-header--overlay .market-chip__toggle { max-width: 100%; padding: 6px 10px; } .site-header--overlay .market-chip__name { max-width: 120px; font-size: 12px; } .site-header--overlay .market-chip__menu, .site-header--overlay .market-chip.is-open .market-chip__menu { position: fixed !important; left: max(12px, env(safe-area-inset-left, 0px)) !important; right: max(12px, env(safe-area-inset-right, 0px)) !important; width: auto !important; min-width: 0 !important; max-width: none !important; max-height: min(50vh, 340px) !important; overflow-x: hidden; overflow-y: auto; z-index: 200; box-sizing: border-box; } .has-overlay-header { --site-header-offset: 168px; } .page-hub.has-overlay-header { --site-header-offset: 168px; } } .mobile-menu__market-label { font-weight: 700; text-transform: uppercase; font-size: 0.85em; letter-spacing: 0.04em; opacity: 0.75; margin-right: 0.35em; } .mobile-menu__market-option { display: block; width: 100%; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; font-size: 0.95rem; font-weight: 600; padding: 0.65rem 0.85rem; border-radius: 8px; cursor: pointer; } .mobile-menu__market-option:hover, .mobile-menu__market-option:focus-visible { background: rgba(23, 37, 90, 0.08); } .mobile-menu__market-option.is-selected { background: rgba(23, 37, 90, 0.12); font-weight: 800; } .mobile-menu__market-heading { list-style: none; margin: 0.75rem 0.85rem 0.25rem; padding: 0; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.55; } .markets-hub__note { margin-top: 0.75rem; font-weight: 600; color: var(--ic-navy, #192d57); } .markets-city-strip { display: flex; width: 100%; margin: 0; padding: 0; gap: 0; align-items: stretch; } .markets-city-strip__cell { position: relative; flex: 1 1 0; min-width: 0; margin: 0; overflow: hidden; } .markets-city-strip__cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .markets-city-strip__cell figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; margin: 0; padding: 12px 6px 8px; background: linear-gradient(180deg, transparent, rgba(8, 14, 32, 0.78)); color: #fff; font-size: clamp(8px, 0.95vw, 12px); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; line-height: 1.2; } .markets-hub__footnote { margin-top: 1.5rem; font-size: 0.95rem; opacity: 0.85; max-width: 42rem; } .markets-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.5rem; } .market-card { border: 1px solid var(--border, #d8dde6); border-radius: 12px; padding: 1.25rem 1.35rem; background: #fff; display: flex; flex-direction: column; gap: 0.55rem; min-height: 100%; } .market-card.is-active { border-color: var(--ic-navy, #192d57); box-shadow: 0 0 0 2px rgba(25, 45, 87, 0.12); } .market-card.is-soon { opacity: 0.92; background: #fafbfc; } .market-card__status { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ic-navy, #192d57); } .market-card.is-soon .market-card__status { color: #8a5a2b; } .market-card h3 { margin: 0; font-size: 1.25rem; } .market-card p { margin: 0; font-size: 0.95rem; } .market-card__meta { font-size: 0.85rem !important; opacity: 0.8; } .market-card__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; padding-top: 0.75rem; } .market-card__soon { font-size: 0.9rem; font-weight: 600; opacity: 0.75; } @media (max-width: 960px) { .markets-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .markets-grid { grid-template-columns: 1fr; } } /* ========================================================================== MERCH — mockup-aligned commerce hub ========================================================================== */ .page-merch .page-skyline { display: none; } /* Merch has no skyline under the fixed overlay header — clear the full header stack. */ .page-merch.has-overlay-header main { padding-top: var(--site-header-offset, 190px); } .merch-spacer { height: clamp(28px, 4vw, 48px); background: #fff; } .merch-strip { background: #121820; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .merch-strip__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; padding-top: 0.55rem; padding-bottom: 0.55rem; } .merch-strip__label { margin: 0; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.8rem; color: var(--art-gold); } .merch-strip__tagline { margin: 0; font-size: clamp(0.78rem, 1.4vw, 0.95rem); font-weight: 600; letter-spacing: 0.02em; text-align: right; color: rgba(255, 255, 255, 0.92); } /* —— IC Marketplace nav (Merch / Shop / Product only) —— */ .mp-nav__bar { background: #121820; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.08); position: relative; z-index: 40; } .mp-nav__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.75rem 1rem; align-items: center; min-height: 52px; padding-top: 0.45rem; padding-bottom: 0.45rem; } .mp-nav__brand { display: inline-flex; flex-direction: column; text-decoration: none; line-height: 1.1; flex: 0 0 auto; } .mp-nav__brand-label { font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.78rem; color: var(--art-gold); } .mp-nav__brand-sub { font-size: 0.68rem; color: rgba(255, 255, 255, 0.65); letter-spacing: 0.04em; } .mp-nav__toggle { display: none; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.06); color: #fff; border-radius: 999px; padding: 0.4rem 0.85rem; font-size: 0.78rem; font-weight: 700; cursor: pointer; } .mp-nav__menu { min-width: 0; } .mp-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: 0.1rem; overflow-x: auto; scrollbar-width: thin; } .mp-nav__item { position: relative; flex: 0 0 auto; } .mp-nav__link { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.45rem 0.55rem; color: rgba(255, 255, 255, 0.9); text-decoration: none; font-size: 0.78rem; font-weight: 600; white-space: nowrap; border-radius: 8px; } .mp-nav__link:hover, .mp-nav__link:focus-visible { background: rgba(255, 255, 255, 0.08); color: #fff; } .mp-nav__item.is-featured > .mp-nav__link { color: var(--art-gold); } .mp-nav__link--soon { opacity: 0.55; cursor: default; } .mp-nav__link--soon em { font-style: normal; font-size: 0.65rem; margin-left: 0.25rem; color: var(--art-gold); } .mp-nav__caret { font-size: 0.65rem; opacity: 0.7; } .mp-nav__mega { display: none; position: absolute; left: 0; top: calc(100% + 0.15rem); min-width: min(34rem, 72vw); padding: 0.85rem 1rem; background: #1a2230; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); z-index: 50; } .mp-nav__mega-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.65rem; padding-bottom: 0.55rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .mp-nav__mega-head strong { font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; color: #ffe08a; } .mp-nav__mega-head a { color: rgba(255, 255, 255, 0.75); text-decoration: none; font-size: 0.78rem; font-weight: 700; } .mp-nav__mega-head a:hover { color: #fff; } .mp-nav__item.has-mega:hover > .mp-nav__mega, .mp-nav__item.has-mega:focus-within > .mp-nav__mega { display: block; } .mp-nav__mega-grid { display: grid; grid-template-columns: repeat(var(--mp-cols, 2), minmax(0, 1fr)); gap: 0.15rem 1rem; } .mp-nav__mega-link { display: block; padding: 0.4rem 0.35rem; color: rgba(255, 255, 255, 0.88); text-decoration: none; font-size: 0.84rem; border-radius: 6px; } .mp-nav__mega-link:hover, .mp-nav__mega-link:focus-visible { background: rgba(240, 193, 75, 0.12); color: #ffe08a; } .mp-nav__tagline { margin: 0; font-size: clamp(0.72rem, 1.2vw, 0.86rem); font-weight: 600; color: rgba(255, 255, 255, 0.78); text-align: right; white-space: nowrap; } .mp-nav__aside { display: inline-flex; align-items: center; gap: 0.85rem; justify-self: end; } .mp-nav__cart { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.7rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; text-decoration: none; font-size: 0.78rem; font-weight: 700; white-space: nowrap; } .mp-nav__cart:hover { background: rgba(240, 193, 75, 0.14); border-color: rgba(240, 193, 75, 0.45); } /* Shop category page */ .shop-band, .product-band { background: #f7f4ef; padding: clamp(1.5rem, 4vw, 2.75rem) 0 3rem; min-height: 50vh; } .shop-crumb { margin: 0 0 0.85rem; font-size: 0.86rem; color: rgba(23, 37, 90, 0.65); } .shop-crumb a { color: #17255a; text-decoration: none; font-weight: 650; } .shop-crumb a:hover { text-decoration: underline; } .shop-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.15rem; } .shop-title { margin: 0.15rem 0 0; font-family: var(--font-serif); font-size: clamp(1.6rem, 3vw, 2.35rem); color: #17255a; } .shop-meta { margin: 0; font-size: 0.9rem; color: rgba(23, 37, 90, 0.65); white-space: nowrap; } .shop-note { margin: 0.55rem 0 0; max-width: 46rem; color: rgba(26, 26, 26, 0.75); } .shop-subcats { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 1rem; } .shop-chip { display: inline-flex; align-items: center; padding: 0.35rem 0.75rem; border-radius: 999px; border: 1px solid rgba(23, 37, 90, 0.16); background: #fff; color: #17255a; text-decoration: none; font-size: 0.8rem; font-weight: 700; } .shop-chip.is-active, .shop-chip:hover { background: #17255a; border-color: #17255a; color: #fff; } .shop-layout { display: grid; grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr); gap: 1.25rem; align-items: start; } .shop-filters { background: #fff; border: 1px solid rgba(23, 37, 90, 0.1); border-radius: 14px; padding: 1rem; } .shop-filters__title { margin: 0 0 0.85rem; font-size: 0.92rem; letter-spacing: 0.04em; text-transform: uppercase; color: #17255a; } .shop-filters__field { display: grid; gap: 0.35rem; margin-bottom: 0.85rem; font-size: 0.84rem; color: rgba(23, 37, 90, 0.8); } .shop-filters__field select { border: 1px solid rgba(23, 37, 90, 0.18); border-radius: 10px; padding: 0.5rem 0.65rem; font: inherit; background: #fff; } .shop-filters__check { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.86rem; color: rgba(23, 37, 90, 0.8); margin-bottom: 0.85rem; } .shop-filters__hint { margin: 0; font-size: 0.78rem; line-height: 1.45; color: rgba(23, 37, 90, 0.55); } .shop-toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; margin-bottom: 1.25rem; padding: 0.85rem 1rem; background: #fff; border: 1px solid rgba(23, 37, 90, 0.1); border-radius: 14px; } .shop-toolbar__search { flex: 1 1 14rem; } .shop-toolbar__search input, .shop-toolbar__sort select { width: 100%; border: 1px solid rgba(23, 37, 90, 0.18); border-radius: 999px; padding: 0.55rem 0.9rem; font: inherit; background: #fff; } .shop-toolbar__sort { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.86rem; color: rgba(23, 37, 90, 0.8); } .shop-toolbar__sort select { width: auto; min-width: 10rem; } .shop-toolbar__filter { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.86rem; color: rgba(23, 37, 90, 0.8); } .shop-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } .shop-card { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(23, 37, 90, 0.08); border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.18s ease, box-shadow 0.18s ease; } .shop-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(23, 37, 90, 0.1); } .shop-card__media { aspect-ratio: 1 / 1; background: #ece7df; overflow: hidden; } .shop-card__img { width: 100%; height: 100%; object-fit: cover; display: block; } .shop-card__placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: rgba(255, 255, 255, 0.9); font-family: var(--font-serif); font-size: 2.4rem; } .shop-card__placeholder--navy { background: #17255a; } .shop-card__placeholder--gold { background: #c99a4a; } .shop-card__placeholder--teal { background: #2e6464; } .shop-card__placeholder--steel { background: #506e7e; } .shop-card__body { padding: 0.85rem 0.9rem 1rem; } .shop-card__body h3 { margin: 0 0 0.25rem; font-size: 0.98rem; line-height: 1.3; color: #17255a; } .shop-card__vendor { margin: 0 0 0.35rem; font-size: 0.78rem; color: rgba(23, 37, 90, 0.55); } .shop-card__price { margin: 0; font-weight: 800; color: #7a1f35; } .shop-empty { margin: 1.5rem 0; color: rgba(23, 37, 90, 0.7); } .shop-pager { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1.5rem; } .shop-pager__btn { border: 1px solid rgba(23, 37, 90, 0.2); background: #fff; color: #17255a; border-radius: 999px; padding: 0.45rem 0.95rem; font-weight: 700; cursor: pointer; } .shop-pager__btn:disabled { opacity: 0.45; cursor: default; } .shop-pager__status { font-size: 0.88rem; color: rgba(23, 37, 90, 0.7); } /* Product detail */ .product-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; background: #fff; border: 1px solid rgba(23, 37, 90, 0.08); border-radius: 18px; padding: clamp(1rem, 2.5vw, 1.5rem); } .product-gallery__main { aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; background: #ece7df; } .product-gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; } .product-gallery__placeholder { width: 100%; height: 100%; display: grid; place-items: center; background: #17255a; color: #fff; font-family: var(--font-serif); font-size: 4rem; } .product-gallery__thumbs { display: flex; gap: 0.5rem; margin-top: 0.75rem; } .product-gallery__thumb { width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; cursor: pointer; background: #ece7df; } .product-gallery__thumb.is-active { border-color: #c99a4a; } .product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .product-info__vendor { margin: 0 0 0.35rem; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(23, 37, 90, 0.55); font-weight: 700; } .product-info h1 { margin: 0 0 0.55rem; font-family: var(--font-serif); font-size: clamp(1.55rem, 3vw, 2.2rem); color: #17255a; } .product-info__price { margin: 0 0 0.85rem; font-size: 1.35rem; font-weight: 800; color: #7a1f35; } .product-info__desc, .product-info__ship, .product-info__reviews, .product-info__note { color: rgba(26, 26, 26, 0.8); line-height: 1.55; } .product-info h2 { margin: 1.15rem 0 0.4rem; font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; color: #17255a; } .product-info__specs { margin: 0; padding-left: 1.1rem; color: rgba(26, 26, 26, 0.8); } .product-info__actions { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1.25rem; } .product-info__note { margin-top: 0.85rem; padding: 0.75rem 0.9rem; border-radius: 10px; background: rgba(201, 154, 74, 0.12); border: 1px solid rgba(201, 154, 74, 0.28); } .cart-shell { max-width: 42rem; } .cart-empty { margin-top: 1rem; padding: 1.5rem; background: #fff; border: 1px solid rgba(23, 37, 90, 0.1); border-radius: 16px; } .cart-empty p { margin: 0 0 0.65rem; color: #17255a; font-size: 1.05rem; font-weight: 700; } .cart-empty__note { font-weight: 400 !important; color: rgba(26, 26, 26, 0.75) !important; font-size: 0.95rem !important; line-height: 1.55; } .cart-empty__actions { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1.15rem; } @media (max-width: 1100px) { .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mp-nav__tagline { display: none; } .mp-nav__inner { grid-template-columns: auto minmax(0, 1fr) auto; } } @media (max-width: 900px) { .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shop-layout { grid-template-columns: 1fr; } .product-layout { grid-template-columns: 1fr; } .mp-nav__toggle { display: inline-flex; } .mp-nav__menu { display: none; grid-column: 1 / -1; } .mp-nav__menu.is-open { display: block; } .mp-nav__list { flex-direction: column; overflow: visible; padding-bottom: 0.5rem; } .mp-nav__mega { position: static; display: none; min-width: 0; margin: 0.25rem 0 0.5rem; box-shadow: none; } .mp-nav__item.has-mega:hover > .mp-nav__mega, .mp-nav__item.has-mega:focus-within > .mp-nav__mega, .mp-nav__menu.is-open .mp-nav__item.has-mega > .mp-nav__mega { display: block; } } @media (max-width: 640px) { .shop-grid { grid-template-columns: 1fr 1fr; } .shop-head { flex-direction: column; align-items: flex-start; } } .merch-hero-band { background: linear-gradient(115deg, #e8d5a8 0%, #d9b56a 42%, #c99a4a 100%); padding: clamp(2.5rem, 6vw, 4.5rem) 0; } .merch-hero-band__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } .merch-hero-band__copy h1 { margin: 0 0 1rem; font-family: var(--font-serif); font-size: clamp(2rem, 4.5vw, 3.35rem); line-height: 1.12; letter-spacing: -0.02em; color: #17255a; } .merch-hero-band__line { display: block; color: #17255a; } .merch-hero-band__accent { display: block; color: #7a1f35; margin-top: 0.15em; } .merch-hero-band__copy p { margin: 0 0 1.35rem; max-width: 38ch; font-size: 1.05rem; line-height: 1.55; color: rgba(26, 26, 26, 0.82); } .merch-hero-band__art { justify-self: end; width: min(100%, 460px); } .merch-hero-art { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 30px rgba(23, 37, 90, 0.18)); } .merch-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.35rem; border-radius: 999px; font-weight: 700; text-decoration: none; border: none; } .merch-btn--navy { background: #17255a; color: #fff; } .merch-btn--navy:hover { background: #24316e; color: #fff; } .merch-btn--wine { background: #7a1f35; color: #fff; } .merch-btn--wine:hover { background: #5c1628; color: #fff; } .merch-band { padding: clamp(2.25rem, 5vw, 3.75rem) 0; } .merch-band--books { background: #e6d3a6; } .merch-band--triple { background: #f4efe4; } .merch-band--music { background: #6e1c2e; color: #fff; } .merch-band__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; } .merch-band__head--stack { flex-direction: column; align-items: flex-start; margin-bottom: 1rem; } .merch-band__eyebrow { margin: 0 0 0.35rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(26, 26, 26, 0.65); } .merch-band__eyebrow--light { color: rgba(255, 255, 255, 0.75); } .merch-band__title { margin: 0; font-family: var(--font-serif); font-size: clamp(1.55rem, 3vw, 2.25rem); line-height: 1.15; color: #17255a; } .merch-band__title--sm { font-size: clamp(1.25rem, 2.2vw, 1.65rem); } .merch-band__title--light { color: #fff; } .merch-band__link { font-weight: 700; font-size: 0.92rem; color: #7a1f35; text-decoration: none; white-space: nowrap; } .merch-band__link:hover { text-decoration: underline; } .merch-band__link--light { color: rgba(255, 255, 255, 0.92); } .merch-band__footer-link { margin: 1.75rem 0 0; text-align: center; } .merch-band__footer-link a { font-weight: 700; color: #7a1f35; text-decoration: none; } .merch-band__footer-link a:hover { text-decoration: underline; } .merch-books-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.85rem; } .merch-book { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; } .merch-book__cover { display: block; aspect-ratio: 2 / 3; border-radius: 6px; overflow: hidden; box-shadow: 0 10px 22px rgba(23, 37, 90, 0.16); text-decoration: none; } .merch-book__title { margin: 0.35rem 0 0; font-family: var(--font-serif); font-size: 0.92rem; line-height: 1.2; color: #17255a; } .merch-book__title a { color: inherit; text-decoration: none; } .merch-book__title a:hover { text-decoration: underline; } .merch-book__author { margin: 0; font-size: 0.78rem; color: rgba(26, 26, 26, 0.7); } .merch-book__buy { display: inline-flex; align-items: center; justify-content: center; margin-top: 0.25rem; padding: 0.4rem 0.55rem; border-radius: 6px; background: #7a1f35; color: #fff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; } .merch-book__buy:hover { background: #5c1628; color: #fff; } .merch-book__price { margin: 0; font-size: 0.78rem; font-weight: 700; color: rgba(26, 26, 26, 0.75); } .merch-tile__cover, .merch-book__cover .merch-tile__cover, .merch-spot__media .merch-tile__cover, .merch-digital__media .merch-tile__cover, .merch-music__media .merch-tile__cover, .book-detail__cover .merch-tile__cover { width: 100%; height: 100%; min-height: 100%; display: grid; place-items: center; padding: 0.65rem; text-align: center; box-sizing: border-box; } .merch-tile__cover span { font-family: var(--font-serif); font-weight: 700; font-size: 0.85rem; line-height: 1.2; color: #fff; text-wrap: balance; } .merch-tile__cover--navy { background: linear-gradient(160deg, #24316e, #121a3d); } .merch-tile__cover--burgundy { background: linear-gradient(160deg, #8b2342, #4a1024); } .merch-tile__cover--steel { background: linear-gradient(160deg, #4a5d73, #243246); } .merch-tile__cover--gold { background: linear-gradient(160deg, #d29228, #8a5a12); } .merch-tile__cover--teal { background: linear-gradient(160deg, #2a7a7a, #134040); } .merch-tile__cover--cream { background: linear-gradient(160deg, #f3e6c8, #d9c49a); } .merch-tile__cover--cream span { color: #1a1a1a; } .merch-tile__img { width: 100%; height: 100%; object-fit: cover; display: block; } .merch-triple { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); } .merch-mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .merch-tile { background: #fff; border-radius: 10px; overflow: hidden; border: 1px solid rgba(26, 26, 26, 0.08); padding-bottom: 0.65rem; } .merch-tile__media { aspect-ratio: 1; background: #17255a; } .merch-tile__name { margin: 0.5rem 0.55rem 0.15rem; font-size: 0.85rem; line-height: 1.25; color: #17255a; } .merch-tile__price { margin: 0 0.55rem; font-size: 0.8rem; font-weight: 700; color: #7a1f35; } .merch-tile__buy { display: inline-block; margin: 0.35rem 0.55rem 0; font-size: 0.72rem; font-weight: 800; color: #17255a; text-decoration: underline; } .merch-spotlight-grid, .merch-digital-grid { display: grid; gap: 0.85rem; } .merch-spot, .merch-digital { background: #fff; border-radius: 10px; overflow: hidden; border: 1px solid rgba(26, 26, 26, 0.08); } .merch-spot__media, .merch-digital__media { aspect-ratio: 16 / 10; background: #24316e; } .merch-spot__name, .merch-digital__name { margin: 0.55rem 0.7rem 0.15rem; font-family: var(--font-serif); font-size: 1rem; color: #17255a; } .merch-spot__brand { margin: 0 0.7rem; font-size: 0.78rem; font-weight: 700; color: #b8860b; } .merch-spot__price, .merch-digital__price { margin: 0.25rem 0.7rem 0.75rem; font-weight: 800; color: #7a1f35; } .merch-music-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.9rem; } .merch-music__media { aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: rgba(0, 0, 0, 0.25); margin-bottom: 0.55rem; } .merch-music__name { margin: 0; font-family: var(--font-serif); font-size: 1rem; color: #fff; } .merch-music__artist, .merch-music__price { margin: 0.15rem 0 0; font-size: 0.82rem; color: rgba(255, 255, 255, 0.82); } .merch-music__price { font-weight: 700; color: #f0c14b; } .merch-values { background: #1f4a3d; color: #fff; padding: 1.35rem 0; } .merch-values__inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; text-align: center; } .merch-values__item p { margin: 0.35rem 0 0; font-size: 0.9rem; font-weight: 700; } .merch-values__icon { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #f0c14b; } .merch-values__icon svg { width: 1.15rem; height: 1.15rem; } .merch-cta { background: #f3ead7; padding: clamp(2rem, 4vw, 3rem) 0; } .merch-cta__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem; align-items: center; } .merch-cta__copy h2 { margin: 0 0 1rem; font-family: var(--font-serif); font-size: clamp(1.55rem, 3vw, 2.1rem); color: #17255a; } .merch-cta__perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; } .merch-cta__perks li { display: flex; align-items: center; gap: 0.65rem; color: #17255a; font-size: 0.98rem; } .merch-cta__perks span { color: #b8860b; font-size: 1.1rem; } .book-detail { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: var(--space-6); align-items: start; } .book-detail__cover { border-radius: 12px; overflow: hidden; aspect-ratio: 3 / 4; background: #0f1738; } .book-detail__author { font-weight: 700; color: var(--text-muted); } .merch-admin__toolbar { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-bottom: var(--space-4); } .merch-admin__form { padding: 1.25rem; margin-bottom: var(--space-5); } .merch-admin__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1rem; } .merch-admin__grid .ce-field--full { grid-column: 1 / -1; } .merch-admin__table-wrap { overflow-x: auto; } .merch-admin__table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .merch-admin__table th, .merch-admin__table td { text-align: left; padding: 0.65rem 0.5rem; border-bottom: 1px solid var(--border); vertical-align: top; } .merch-admin__muted { color: var(--text-muted); font-size: 0.88rem; } .merch-admin__row-actions { white-space: nowrap; } @media (max-width: 1100px) { .merch-books-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } .merch-music-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .merch-hero-band__inner, .merch-triple, .merch-cta__inner { grid-template-columns: 1fr; } .merch-hero-band__art { justify-self: stretch; width: 100%; max-width: 420px; } .merch-values__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } .merch-strip__inner { flex-direction: column; align-items: flex-start; } .merch-strip__tagline { text-align: left; } } @media (max-width: 640px) { .merch-books-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .merch-music-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .book-detail { grid-template-columns: 1fr; } .merch-admin__grid { grid-template-columns: 1fr; } } /* ========================================================================== MERCH MARKETPLACE — mockup chrome (search + icon nav + home sections) ========================================================================== */ .page-merch.has-overlay-header main#mm-home, .page-merch.has-overlay-header main:has(#marketplace-nav) { padding-top: var(--site-header-offset, 190px); } .page-merch #marketplace-nav.mp-nav { flex: 0 0 auto; } /* Gold hero fills the first screen under header + marketplace nav; white trust only after scroll */ .page-merch .merch-hero-band.mm-hero { display: flex; flex-direction: column; box-sizing: border-box; min-height: calc(100svh - var(--site-header-offset, 190px) - var(--mp-nav-height, 180px)); padding-top: clamp(1.75rem, 3.5vw, 3.25rem); padding-bottom: 0; } .page-merch .merch-hero-band.mm-hero .merch-hero-band__inner { flex: 1 1 auto; align-content: center; } .page-merch .merch-hero-band.mm-hero .mm-hero__trust { margin-top: auto; } /* —— White search bar (under site nav) —— */ .mp-nav { background: #fff; border-bottom: 1px solid rgba(26, 26, 26, 0.08); position: relative; z-index: 35; } .mm-top { background: #fff; } .mm-top__search-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem 1.25rem; align-items: center; padding-top: 0.85rem; padding-bottom: 0.85rem; } .mm-top__brand { display: block; text-decoration: none; font-family: var(--font-sans, "Montserrat", system-ui, sans-serif); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.15; color: #7a1f35; white-space: nowrap; } .mm-top__brand span { display: inline; color: #7a1f35; } .mm-top__brand br + span, .mm-top__brand span { letter-spacing: 0.14em; } .mm-search { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: stretch; width: 100%; max-width: 720px; margin: 0 auto; border: 1.5px solid rgba(26, 26, 26, 0.18); border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(23, 37, 90, 0.04); } .mm-search__cat { border: none; border-right: 1px solid rgba(26, 26, 26, 0.12); background: #f7f5f1; padding: 0.7rem 0.85rem; font-size: 0.82rem; font-weight: 600; color: #1a1a1a; max-width: 11rem; cursor: pointer; } .mm-search__input { border: none; padding: 0.7rem 1rem; font-size: 0.95rem; min-width: 0; outline: none; background: #fff; } .mm-search__input::placeholder { color: rgba(26, 26, 26, 0.45); } .mm-search__btn { border: none; background: #121820; color: #fff; width: 3.1rem; display: grid; place-items: center; cursor: pointer; } .mm-search__btn:hover { background: #24316e; } .mm-search__btn svg { width: 1.15rem; height: 1.15rem; } .mm-top__utils { display: flex; align-items: center; gap: 0.85rem 1.1rem; flex-wrap: wrap; justify-content: flex-end; } .mm-top__utils a { display: inline-flex; align-items: center; gap: 0.3rem; text-decoration: none; font-size: 0.78rem; font-weight: 700; color: #1a1a1a; white-space: nowrap; } .mm-top__utils a:hover { color: #7a1f35; } .mm-top__cart em { font-style: normal; display: inline-grid; place-items: center; min-width: 1.2rem; height: 1.2rem; padding: 0 0.3rem; margin-left: 0.15rem; border-radius: 999px; background: #7a1f35; color: #fff; font-size: 0.68rem; font-weight: 800; } /* —— Icon category row —— */ .mm-icon-nav { border-top: 1px solid rgba(255, 255, 255, 0.1); background: #121820; padding: 0.75rem 0 0.95rem; } .mm-icon-nav__inner { display: flex; align-items: stretch; justify-content: space-between; gap: 0.35rem; overflow-x: auto; scrollbar-width: thin; padding-bottom: 0.15rem; } .mm-icon-nav__item { flex: 1 0 auto; min-width: 4.6rem; max-width: 6.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; text-decoration: none; color: #fff; padding: 0.35rem 0.4rem; border-radius: 10px; transition: background 0.15s ease, color 0.15s ease; } .mm-icon-nav__item:hover, .mm-icon-nav__item:focus-visible { background: rgba(255, 255, 255, 0.1); color: #fff; } .mm-icon-nav__icon { display: grid; place-items: center; width: 1.65rem; height: 1.65rem; color: #fff; } .mm-icon-nav__item:hover .mm-icon-nav__icon { color: #fff; } .mm-icon-nav__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; } .mm-icon-nav__icon svg [fill="currentColor"], .mm-icon-nav__icon svg circle[fill="currentColor"] { fill: currentColor; } .mm-icon-nav__label { font-size: 0.68rem; font-weight: 600; text-align: center; line-height: 1.2; letter-spacing: 0.01em; color: #fff; } /* —— Hero extras —— */ .mm-hero { padding-bottom: 0; } .mm-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } .merch-btn--outline { background: transparent; color: #17255a; border: 2px solid #17255a; } .merch-btn--outline:hover { background: #17255a; color: #fff; } .mm-hero__trust { margin-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid rgba(23, 37, 90, 0.12); background: rgba(255, 255, 255, 0.22); } .mm-hero__trust-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 1.5rem; padding: 0.85rem 0; font-size: 0.82rem; font-weight: 700; color: #17255a; } /* —— Trust cards —— */ .mm-trust { background: #fff; padding: clamp(1.5rem, 3vw, 2.25rem) 0; border-bottom: 1px solid rgba(26, 26, 26, 0.06); } .mm-trust__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } .mm-trust__card { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; padding: 1.1rem 1.15rem; border: 1px solid rgba(26, 26, 26, 0.08); border-radius: 12px; background: #faf8f4; } .mm-trust__card h3 { margin: 0; font-size: 1rem; font-family: var(--font-serif); color: #17255a; } .mm-trust__card p { margin: 0; font-size: 0.85rem; color: rgba(26, 26, 26, 0.7); } .mm-trust__icon { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 10px; font-size: 1.15rem; margin-bottom: 0.25rem; } .mm-trust__icon--wine { background: rgba(122, 31, 53, 0.12); color: #7a1f35; } .mm-trust__icon--orange { background: rgba(224, 122, 61, 0.18); color: #c45a1a; } .mm-trust__icon--blue { background: rgba(23, 37, 90, 0.12); color: #17255a; } .mm-trust__icon--green { background: rgba(47, 107, 79, 0.14); color: #1f4a3d; } /* —— Generic section —— */ .mm-section { padding: clamp(2rem, 4.5vw, 3.25rem) 0; background: #fff; } .mm-section--alt { background: #f7f4ee; } .mm-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.35rem; } .mm-section__head h2 { margin: 0; font-family: var(--font-serif); font-size: clamp(1.45rem, 2.8vw, 2rem); color: #17255a; line-height: 1.15; } .mm-section__sub { margin: 0.35rem 0 0; font-size: 0.92rem; color: rgba(26, 26, 26, 0.65); } .mm-section__head a { font-weight: 700; font-size: 0.9rem; color: #7a1f35; text-decoration: none; white-space: nowrap; } .mm-section__head a:hover { text-decoration: underline; } .mm-section__head--light h2, .mm-section__head--light .mm-section__sub { color: #fff; } .mm-section__head--light .mm-section__sub { color: rgba(255, 255, 255, 0.78); } .mm-section__head--light a { color: #f0c14b; } /* —— Popular circles —— */ .mm-circles { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1rem 0.75rem; } .mm-circle { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; text-decoration: none; color: #17255a; font-size: 0.78rem; font-weight: 700; text-align: center; } .mm-circle__img { width: 100%; aspect-ratio: 1; border-radius: 50%; background-size: cover; background-position: center; box-shadow: 0 8px 20px rgba(23, 37, 90, 0.12); border: 3px solid #fff; outline: 1px solid rgba(26, 26, 26, 0.08); transition: transform 0.2s ease; } .mm-circle:hover .mm-circle__img { transform: scale(1.04); } .mm-circle__img--wig { background-image: linear-gradient(145deg, rgba(58,29,58,.25), rgba(139,35,66,.3)), url("../media/img/merch/product-wig.jpg"); } .mm-circle__img--ext { background-image: linear-gradient(145deg, rgba(92,22,40,.25), rgba(217,160,96,.25)), url("../media/img/merch/product-hair-extensions.jpg"); } .mm-circle__img--men { background-image: linear-gradient(145deg, rgba(23,37,90,.25), rgba(74,93,115,.25)), url("../media/img/merch/product-blazer.jpg"); } .mm-circle__img--women { background-image: linear-gradient(145deg, rgba(122,31,53,.2), rgba(232,213,168,.2)), url("../media/img/merch/cat-womens-clothing.jpg"); } .mm-circle__img--shoes { background-image: linear-gradient(145deg, rgba(36,50,70,.2), rgba(138,90,18,.2)), url("../media/img/merch/product-sneakers.jpg"); } .mm-circle__img--skin { background-image: linear-gradient(145deg, rgba(243,230,200,.15), rgba(201,154,74,.2)), url("../media/img/merch/product-hair-oil.jpg"); } .mm-circle__img--jewel { background-image: linear-gradient(145deg, rgba(31,61,92,.4), rgba(240,193,75,.3)), url("../media/img/merch/spot-jewelry.jpg"); } .mm-circle__img--home { background-image: linear-gradient(145deg, rgba(47,107,79,.4), rgba(232,213,168,.3)), url("../media/img/merch/spot-candles.jpg"); } /* —— Product carousel —— */ .mm-carousel { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 0.5rem; align-items: center; } .mm-carousel__track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0.35rem 0.15rem 0.85rem; } .mm-carousel__track::-webkit-scrollbar { display: none; } .mm-carousel__btn { flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid rgba(26, 26, 26, 0.15); background: #fff; color: #17255a; font-size: 1.35rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 12px rgba(23, 37, 90, 0.08); } .mm-carousel__btn:hover { background: #17255a; color: #fff; } .mm-card { flex: 0 0 min(200px, 72vw); scroll-snap-align: start; background: #fff; border: 1px solid rgba(26, 26, 26, 0.08); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; } .mm-deals .mm-card { background: #fff; } .mm-card__media { position: relative; display: block; aspect-ratio: 1; background: #f0ebe3; overflow: hidden; } .mm-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .mm-card__ph { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; font-family: var(--font-serif); font-size: 2.5rem; font-weight: 700; } .mm-card__ph--navy { background: linear-gradient(160deg, #24316e, #121a3d); } .mm-card__ph--burgundy { background: linear-gradient(160deg, #8b2342, #4a1024); } .mm-card__ph--gold { background: linear-gradient(160deg, #d29228, #8a5a12); } .mm-card__ph--teal { background: linear-gradient(160deg, #2a7a7a, #134040); } .mm-card__ph--steel { background: linear-gradient(160deg, #4a5d73, #243246); } .mm-card__badge { position: absolute; top: 0.55rem; left: 0.55rem; z-index: 1; background: #7a1f35; color: #fff; font-size: 0.68rem; font-weight: 800; padding: 0.25rem 0.45rem; border-radius: 6px; } .mm-card__body { padding: 0.75rem 0.8rem 0.9rem; display: flex; flex-direction: column; gap: 0.25rem; flex: 1; } .mm-card__body h3 { margin: 0; font-size: 0.88rem; line-height: 1.3; font-weight: 700; color: #17255a; } .mm-card__body h3 a { color: inherit; text-decoration: none; } .mm-card__body h3 a:hover { text-decoration: underline; } .mm-card__stars { margin: 0; color: #c9a227; font-size: 0.78rem; letter-spacing: 0.04em; } .mm-card__price { margin: 0; font-weight: 800; font-size: 0.95rem; color: #1a1a1a; } .mm-card__compare { margin-left: 0.35rem; font-weight: 600; font-size: 0.78rem; color: rgba(26, 26, 26, 0.45); text-decoration: line-through; } .mm-card__timer { display: flex; align-items: center; gap: 0.2rem; margin: 0.25rem 0 0.15rem; font-size: 0.78rem; font-weight: 800; color: #7a1f35; font-variant-numeric: tabular-nums; } .mm-card__timer span { display: inline-block; min-width: 1.5rem; text-align: center; background: rgba(122, 31, 53, 0.1); border-radius: 4px; padding: 0.15rem 0.2rem; } .mm-card__cart { margin-top: auto; width: 100%; padding: 0.55rem 0.65rem; border-radius: 8px; border: 1.5px solid #121820; background: #fff; color: #121820; font-weight: 700; font-size: 0.8rem; cursor: pointer; } .mm-card__cart:hover { background: #121820; color: #fff; } /* —— Category tiles —— */ .mm-blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .mm-block { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 11.5rem; padding: 1.15rem 1.25rem; border-radius: 12px; overflow: hidden; text-decoration: none; color: #fff; background-size: cover; background-position: center; box-shadow: 0 10px 24px rgba(23, 37, 90, 0.12); } .mm-block::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 18, 40, 0.78) 0%, rgba(12, 18, 40, 0.35) 55%, rgba(12, 18, 40, 0.15) 100%); } .mm-block span, .mm-block em { position: relative; z-index: 1; } .mm-block span { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; line-height: 1.2; } .mm-block em { font-style: normal; font-size: 0.82rem; font-weight: 700; margin-top: 0.4rem; opacity: 0.92; } .mm-block:hover em { text-decoration: underline; } .mm-block--wig { background-image: url("../media/img/merch/product-wig.jpg"); } .mm-block--ext { background-image: url("../media/img/merch/product-hair-extensions.jpg"); } .mm-block--care { background-image: url("../media/img/merch/product-hair-oil.jpg"); } .mm-block--men { background-image: url("../media/img/merch/product-blazer.jpg"); } .mm-block--women { background-image: url("../media/img/merch/cat-womens-clothing.jpg"); } .mm-block--shoes { background-image: url("../media/img/merch/product-sneakers.jpg"); } .mm-block--jewel { background-image: url("../media/img/merch/spot-jewelry.jpg"); } .mm-block--frag { background-image: url("../media/img/merch/cat-fragrances.jpg"); } .mm-block--home { background-image: url("../media/img/merch/cat-home-kitchen.jpg"); } .mm-block--elec { background-image: url("../media/img/merch/cat-electronics.jpg"); } .mm-block--books { background-image: url("../media/img/merch/cat-books.jpg"); } .mm-block--health { background-image: url("../media/img/merch/cat-health.jpg"); } .mm-elec-links { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: -0.35rem 0 1.15rem; } .mm-elec-links a { display: inline-flex; padding: 0.35rem 0.7rem; border-radius: 999px; border: 1px solid rgba(26, 26, 26, 0.12); background: #f7f4ee; color: #17255a; text-decoration: none; font-size: 0.78rem; font-weight: 700; } .mm-elec-links a:hover { background: #17255a; color: #fff; border-color: #17255a; } /* —— Deals band —— */ .mm-deals { background: #6e1c2e; padding: clamp(2rem, 4.5vw, 3.25rem) 0; } .mm-deals .mm-carousel__btn { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.25); color: #fff; } .mm-deals .mm-carousel__btn:hover { background: #fff; color: #6e1c2e; } /* —— Brands —— */ .mm-brands { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; justify-content: space-between; } .mm-brands span { flex: 1 1 auto; min-width: 7rem; text-align: center; padding: 1rem 0.85rem; border: 1px solid rgba(26, 26, 26, 0.1); border-radius: 10px; background: #faf8f4; font-family: var(--font-serif); font-size: 1rem; font-weight: 700; color: #17255a; } /* —— Seller CTA —— */ .mm-cta { background: #f3ead7; padding: clamp(2rem, 4vw, 3rem) 0; } .mm-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; } .mm-cta__inner h2 { margin: 0 0 0.85rem; font-family: var(--font-serif); font-size: clamp(1.45rem, 2.8vw, 1.95rem); color: #17255a; } .mm-cta__perks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.55rem 1.25rem; } .mm-cta__perks li { position: relative; padding-left: 1.1rem; color: #17255a; font-size: 0.95rem; font-weight: 600; } .mm-cta__perks li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #b8860b; } @media (max-width: 1100px) { .mm-circles { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mm-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mm-top__search-row { grid-template-columns: 1fr; justify-items: stretch; } .mm-top__brand { justify-self: start; } .mm-search { max-width: none; } .mm-top__utils { justify-content: flex-start; } } @media (max-width: 900px) { .mm-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mm-carousel__btn { display: none; } .mm-carousel { grid-template-columns: 1fr; } } @media (max-width: 640px) { .mm-circles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mm-blocks { grid-template-columns: 1fr; } .mm-trust__grid { grid-template-columns: 1fr; } .mm-search { grid-template-columns: 1fr auto; } .mm-search__cat { grid-column: 1 / -1; border-right: none; border-bottom: 1px solid rgba(26, 26, 26, 0.12); max-width: none; } .mm-icon-nav__item { min-width: 4.2rem; } } /* ========================================================================== IC RESOURCE CENTER ========================================================================== */ .page-resource-center .page-skyline { opacity: 0.9; } .rc-hero { background: linear-gradient(135deg, #1c2a5d 0%, #24316e 48%, #5a2a3a 100%); color: #fff; } .rc-hero .breadcrumb a { color: rgba(255, 255, 255, 0.85); } .rc-hero .breadcrumb { color: rgba(255, 255, 255, 0.7); } .rc-hero h1 { color: #fff; } .rc-hero p { color: rgba(255, 255, 255, 0.9); max-width: 46rem; } .rc-hero--category { background: linear-gradient(135deg, #17255a 0%, #1f4a3d 100%); } .rc-search { display: grid; grid-template-columns: 1fr auto; max-width: 40rem; margin-top: 1.35rem; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); } .rc-search__input { border: none; padding: 0.95rem 1.15rem; font-size: 1.02rem; min-width: 0; outline: none; color: #1a1a1a; } .rc-search__input::placeholder { color: rgba(26, 26, 26, 0.45); } .rc-search__btn { border: none; background: #7a1f35; color: #fff; width: 3.4rem; display: grid; place-items: center; cursor: pointer; } .rc-search__btn:hover { background: #5c1628; } .rc-search__btn svg { width: 1.2rem; height: 1.2rem; } .rc-search__meta { margin: 0.65rem 0 0; font-size: 0.82rem; color: rgba(255, 255, 255, 0.72); } .rc-ai-section { padding-top: 0; } .rc-ai { background: var(--surface, #fff); border: 1px solid var(--border, rgba(26, 26, 26, 0.1)); border-radius: 18px; overflow: hidden; } .rc-ai__inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr); gap: 0; } .rc-ai__copy { padding: clamp(1.35rem, 3vw, 2rem); } .rc-ai__copy h2 { margin: 0.25rem 0 0.55rem; font-family: var(--font-serif); font-size: clamp(1.35rem, 2.5vw, 1.85rem); color: #17255a; } .rc-ai__copy p { margin: 0; color: var(--text-muted, rgba(26,26,26,0.7)); line-height: 1.55; } .rc-ai__chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1rem; } .rc-ai__chip { border: 1px solid rgba(26, 26, 26, 0.12); background: #f7f4ee; color: #17255a; border-radius: 999px; padding: 0.4rem 0.85rem; font-size: 0.8rem; font-weight: 700; cursor: pointer; } .rc-ai__chip:hover { background: #17255a; color: #fff; border-color: #17255a; } .rc-ai__panel { background: linear-gradient(160deg, #e8d5a8, #f4efe4 55%, #dfe8e4); display: grid; place-items: center; padding: 1.5rem; min-height: 100%; } .rc-ai__fake { width: min(100%, 18rem); background: rgba(255, 255, 255, 0.85); border: 1px dashed rgba(23, 37, 90, 0.25); border-radius: 14px; padding: 1.15rem 1rem; text-align: center; } .rc-ai__fake span { display: block; font-size: 0.88rem; color: rgba(26, 26, 26, 0.55); margin-bottom: 0.55rem; } .rc-ai__fake em { display: block; font-style: normal; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #7a1f35; } .rc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15rem; } .rc-card { display: flex; flex-direction: column; gap: 0.65rem; padding: 1.35rem 1.25rem 1.25rem; background: var(--surface, #fff); border: 1px solid var(--border, rgba(26, 26, 26, 0.1)); border-radius: 16px; box-shadow: 0 8px 22px rgba(23, 37, 90, 0.06); transition: transform 0.18s ease, box-shadow 0.18s ease; } .rc-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(23, 37, 90, 0.1); } .rc-card--featured { border-color: rgba(184, 134, 11, 0.45); background: linear-gradient(180deg, #fffdf7 0%, #fff 55%); } .rc-card__icon { width: 2.75rem; height: 2.75rem; border-radius: 12px; display: grid; place-items: center; color: #fff; } .rc-card__icon svg { width: 1.35rem; height: 1.35rem; } .rc-card--navy .rc-card__icon { background: #17255a; } .rc-card--wine .rc-card__icon { background: #7a1f35; } .rc-card--steel .rc-card__icon { background: #4a5d73; } .rc-card--teal .rc-card__icon { background: #2a7a7a; } .rc-card--gold .rc-card__icon { background: #b8860b; } .rc-card--leaf .rc-card__icon { background: #1f4a3d; } .rc-card--blue .rc-card__icon { background: #24316e; } .rc-card--terra .rc-card__icon { background: #c45a1a; } .rc-card h2 { margin: 0; font-family: var(--font-serif); font-size: 1.28rem; color: #17255a; line-height: 1.2; } .rc-card p { margin: 0; flex: 1; font-size: 0.94rem; line-height: 1.5; color: rgba(26, 26, 26, 0.72); } .rc-card__btn { align-self: flex-start; margin-top: 0.35rem; } .rc-empty { margin: 0; padding: 1.5rem; text-align: center; color: var(--text-muted); } .rc-empty--inline { padding: 0.85rem 0; text-align: left; } .rc-cta-band { background: #f3ead7; } .rc-cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; } .rc-cta-band h2 { margin: 0 0 0.35rem; font-family: var(--font-serif); color: #17255a; font-size: clamp(1.35rem, 2.5vw, 1.75rem); } .rc-cta-band p { margin: 0; color: rgba(26, 26, 26, 0.72); } .rc-topics { display: flex; flex-wrap: wrap; gap: 0.5rem; } .rc-topic-chip { display: inline-flex; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid rgba(26, 26, 26, 0.12); background: #fff; color: #17255a; text-decoration: none; font-size: 0.84rem; font-weight: 700; } .rc-topic-chip:hover, .rc-topic-chip.is-active { background: #17255a; color: #fff; border-color: #17255a; } .rc-topic-block { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); } .rc-topic-block__head h2 { margin: 0 0 0.85rem; font-family: var(--font-serif); font-size: clamp(1.25rem, 2.2vw, 1.55rem); color: #17255a; } .rc-topic-block__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .rc-resource { padding: 1.15rem 1.2rem 1.25rem; } .rc-resource__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.45rem; } .rc-resource__head h3 { margin: 0; font-family: var(--font-serif); font-size: 1.12rem; color: #17255a; } .rc-resource__badge { flex: 0 0 auto; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #7a1f35; background: rgba(122, 31, 53, 0.1); border-radius: 999px; padding: 0.28rem 0.55rem; } .rc-resource__desc { margin: 0 0 0.85rem; font-size: 0.92rem; line-height: 1.5; color: rgba(26, 26, 26, 0.75); } .rc-resource__meta { display: grid; gap: 0.55rem; margin: 0; } .rc-resource__field { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.5rem 0.75rem; } .rc-resource__field dt { margin: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(26, 26, 26, 0.5); } .rc-resource__field dd { margin: 0; font-size: 0.9rem; color: #1a1a1a; line-height: 1.4; } .rc-resource__field a { color: #7a1f35; font-weight: 700; } .rc-resource__links { margin-top: 0.85rem; } .rc-resource__links h4 { margin: 0 0 0.35rem; font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(26, 26, 26, 0.55); } .rc-resource__links ul { margin: 0; padding-left: 1.1rem; } .rc-resource__links a { color: #17255a; } .rc-money-ai { /* section uses id; inner styles below */ } #rc-money-ai:not([hidden]) { display: block; padding-bottom: 0; } .rc-money-ai__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.95fr); gap: 1.25rem; align-items: stretch; background: linear-gradient(120deg, #1f4a3d, #17255a 60%, #5c1628); color: #fff; border-radius: 18px; overflow: hidden; padding: clamp(1.35rem, 3vw, 2rem); } .rc-money-ai__copy h2 { margin: 0.25rem 0 0.55rem; font-family: var(--font-serif); font-size: clamp(1.4rem, 2.6vw, 1.95rem); color: #fff; } .rc-money-ai__copy .eyebrow { color: rgba(240, 193, 75, 0.95); } .rc-money-ai__copy p { margin: 0 0 1rem; color: rgba(255, 255, 255, 0.88); max-width: 36ch; } .rc-money-ai__copy .btn[disabled] { opacity: 0.85; cursor: default; } .rc-money-ai__stage { display: grid; place-items: center; text-align: center; border: 1px dashed rgba(255, 255, 255, 0.35); border-radius: 14px; background: rgba(255, 255, 255, 0.08); padding: 1.5rem 1rem; min-height: 10rem; } .rc-money-ai__stage span { display: block; font-family: var(--font-serif); font-size: 1.25rem; margin-bottom: 0.35rem; } .rc-money-ai__stage em { font-style: normal; font-size: 0.78rem; color: rgba(255, 255, 255, 0.7); } @media (max-width: 1000px) { .rc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rc-ai__inner, .rc-money-ai__inner { grid-template-columns: 1fr; } .rc-topic-block__grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .rc-grid { grid-template-columns: 1fr; } .rc-resource__field { grid-template-columns: 1fr; gap: 0.15rem; } } /* ========================================================================== IC RESOURCE CENTER — mockup v2 (photo hero + photo cards) ========================================================================== */ .page-resource-center.has-overlay-header main { padding-top: var(--site-header-offset, 190px); } .rc-hero-v2 { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: stretch; /* Desktop/laptop: fill the viewport under the header; cream content scrolls below */ min-height: calc(100svh - var(--site-header-offset, 190px)); background: #427979; overflow: hidden; } @media (max-width: 1000px) { .rc-hero-v2 { /* Mobile keeps a natural height; full-bleed viewport hero is desktop-only */ min-height: 0; } } .rc-hero-v2__blue { position: relative; z-index: 2; display: flex; align-items: center; padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 4rem); background: #427979; } .rc-hero-v2__copy { width: min(100%, 34rem); } .rc-hero-v2__crumb, .rc-hero-v2__crumb a { color: rgba(255, 255, 255, 0.78); } .rc-hero-v2 h1 { margin: 0.35rem 0 0.45rem; font-family: var(--font-serif); font-size: clamp(2.1rem, 4.5vw, 3.15rem); line-height: 1.1; color: #fff; } .rc-hero-v2__tagline { margin: 0 0 0.85rem; font-family: var(--font-serif); font-style: italic; font-size: clamp(1.15rem, 2.2vw, 1.45rem); color: #e7cc91; } .rc-hero-v2__lead { margin: 0 0 1.25rem; font-size: 1.02rem; line-height: 1.55; color: rgba(255, 255, 255, 0.9); max-width: 34rem; } .rc-hero-v2__media { position: relative; z-index: 1; min-height: 100%; background: #142042; } .rc-hero-v2__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .rc-hero-v2__glow { position: absolute; z-index: 2; left: -18%; top: -8%; bottom: -8%; width: 42%; background: radial-gradient( ellipse 70% 80% at 100% 45%, rgba(231, 204, 145, 0.95) 0%, rgba(201, 154, 74, 0.55) 38%, rgba(66, 121, 121, 0) 72% ); pointer-events: none; } /* Soft fade so copy never sits on the photo */ .rc-hero-v2__blue::after { content: ""; position: absolute; right: -4rem; top: 0; bottom: 0; width: 5rem; background: linear-gradient(90deg, #427979, rgba(66, 121, 121, 0)); pointer-events: none; } .rc-search--hero { max-width: 100%; margin-top: 0; border-radius: 10px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22); } .rc-popular { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.65rem; margin-top: 0.95rem; } .rc-popular__label { font-size: 0.82rem; font-weight: 600; color: rgba(255, 255, 255, 0.75); } .rc-popular__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } .rc-popular__chip { border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.08); color: #fff; border-radius: 999px; padding: 0.35rem 0.8rem; font-size: 0.78rem; font-weight: 700; cursor: pointer; } .rc-popular__chip:hover { background: rgba(255, 255, 255, 0.18); } .rc-assist { padding-top: clamp(1.5rem, 3vw, 2.25rem); padding-bottom: 0.5rem; background: #f7f4ee; } .rc-assist__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; } .rc-assist-card { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr); gap: 0; align-items: stretch; background: #fff; border: 1px solid rgba(26, 26, 26, 0.08); border-radius: 16px; overflow: hidden; min-height: 12rem; } .rc-assist-card--suggest { grid-template-columns: 1fr; padding: 1.5rem 1.4rem; background: #f3ead7; align-content: center; } .rc-assist-card__media { min-height: 100%; background: #e8e2d6; } .rc-assist-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .rc-assist-card__copy { padding: 1.35rem 1.25rem; display: flex; flex-direction: column; justify-content: center; gap: 0.45rem; } .rc-assist-card__eyebrow { margin: 0; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #17255a; } .rc-assist-card h2 { margin: 0; font-family: var(--font-serif); font-size: 1.35rem; color: #17255a; line-height: 1.2; } .rc-assist-card p { margin: 0; font-size: 0.92rem; line-height: 1.5; color: rgba(26, 26, 26, 0.72); } .rc-assist-card__icon { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; background: rgba(122, 31, 53, 0.12); color: #7a1f35; margin-bottom: 0.35rem; } .rc-assist-card__icon svg { width: 1.25rem; height: 1.25rem; } .rc-assist-card__btn { align-self: flex-start; margin-top: 0.45rem; border-radius: 999px; padding: 0.65rem 1.15rem; font-weight: 700; text-decoration: none; border: none; cursor: pointer; color: #fff; } .rc-assist-card__btn--navy { background: #17255a; } .rc-assist-card__btn--navy:hover { background: #24316e; color: #fff; } .rc-assist-card__btn--wine { background: #7a1f35; } .rc-assist-card__btn--wine:hover { background: #5c1628; color: #fff; } .rc-explore { background: #fff; } .rc-explore__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.75rem 1.5rem; margin-bottom: 1.5rem; } .rc-explore__title { margin: 0; font-family: var(--font-sans, system-ui, sans-serif); font-size: clamp(1.35rem, 2.4vw, 1.65rem); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #17255a; position: relative; padding-bottom: 0.45rem; } .rc-explore__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 3.2rem; height: 3px; background: #7a1f35; border-radius: 2px; } .rc-explore__sub { margin: 0; max-width: 28rem; font-size: 0.9rem; font-style: italic; color: rgba(26, 26, 26, 0.55); text-align: right; } .rc-grid--photo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } .rc-photo-card { background: #fff; border: 1px solid rgba(26, 26, 26, 0.08); border-radius: 16px; overflow: visible; display: flex; flex-direction: column; box-shadow: 0 10px 24px rgba(23, 37, 90, 0.06); transition: transform 0.18s ease, box-shadow 0.18s ease; } .rc-photo-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(23, 37, 90, 0.12); } .rc-photo-card__media { position: relative; margin: 0.85rem 0.85rem 0; aspect-ratio: 16 / 11; border-radius: 12px; overflow: hidden; background: #e8e2d6; } .rc-photo-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .rc-photo-card__badge { position: absolute; left: 0.75rem; bottom: -1.05rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; color: #fff; border: 3px solid #fff; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18); z-index: 1; } .rc-photo-card__badge svg { width: 1.15rem; height: 1.15rem; } .rc-photo-card--navy .rc-photo-card__badge, .rc-photo-card--navy .rc-photo-card__btn { background: #17255a; } .rc-photo-card--wine .rc-photo-card__badge, .rc-photo-card--wine .rc-photo-card__btn { background: #7a1f35; } .rc-photo-card--steel .rc-photo-card__badge, .rc-photo-card--steel .rc-photo-card__btn { background: #4a5d73; } .rc-photo-card--teal .rc-photo-card__badge, .rc-photo-card--teal .rc-photo-card__btn { background: #2a7a7a; } .rc-photo-card--gold .rc-photo-card__badge, .rc-photo-card--gold .rc-photo-card__btn { background: #b8860b; } .rc-photo-card--leaf .rc-photo-card__badge, .rc-photo-card--leaf .rc-photo-card__btn { background: #1f4a3d; } .rc-photo-card--blue .rc-photo-card__badge, .rc-photo-card--blue .rc-photo-card__btn { background: #4a3d7a; } .rc-photo-card--terra .rc-photo-card__badge, .rc-photo-card--terra .rc-photo-card__btn { background: #c45a1a; } .rc-photo-card__body { padding: 1.55rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.45rem; flex: 1; } .rc-photo-card__body h3 { margin: 0; font-family: var(--font-serif); font-size: 1.22rem; color: #17255a; line-height: 1.2; } .rc-photo-card__body p { margin: 0; flex: 1; font-size: 0.9rem; line-height: 1.5; color: rgba(26, 26, 26, 0.7); } .rc-photo-card__btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; margin-top: 0.45rem; align-self: flex-start; padding: 0.55rem 1rem; border-radius: 999px; color: #fff !important; text-decoration: none; font-size: 0.82rem; font-weight: 800; } .rc-photo-card__btn:hover { filter: brightness(1.08); color: #fff !important; } .rc-cta-band__icon { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; background: rgba(122, 31, 53, 0.12); color: #7a1f35; flex: 0 0 auto; } .rc-cta-band__icon svg { width: 1.25rem; height: 1.25rem; } .rc-cta-band__inner { align-items: center; } @media (max-width: 1000px) { .rc-hero-v2 { grid-template-columns: 1fr; min-height: 0; } .rc-hero-v2__media { min-height: 16rem; order: -1; } .rc-hero-v2__glow { left: 0; right: 0; top: auto; bottom: -20%; width: 100%; height: 45%; background: radial-gradient( ellipse 80% 70% at 50% 0%, rgba(231, 204, 145, 0.75), rgba(28, 42, 93, 0) 70% ); } .rc-hero-v2__blue::after { display: none; } .rc-assist__grid { grid-template-columns: 1fr; } .rc-assist-card--ai { grid-template-columns: 0.85fr 1.15fr; } .rc-grid--photo { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rc-explore__sub { text-align: left; max-width: none; } } @media (max-width: 640px) { .rc-assist-card--ai { grid-template-columns: 1fr; } .rc-assist-card__media { min-height: 10rem; } .rc-grid--photo { grid-template-columns: 1fr; } .rc-hero-v2__copy { width: 100%; } } /* ========================================================================== RC CATEGORY PAGES — Senior Resources design system (template for all centers) ========================================================================== */ .page-rc-category.has-overlay-header main.rc-cat { padding-top: 0; } .rc-cat { --rc-cat-accent: #1f4a3d; background: #f7f4ef; color: var(--text); } .rc-cat-loading { margin: 0; padding: calc(var(--site-header-offset, 190px) + 48px) var(--space-5) 64px; text-align: center; color: var(--text-muted); } /* --- Full-bleed photo hero (category accent from hub Explore button + soft fade) --- */ .rc-cat-hero { position: relative; min-height: clamp(28rem, 72vh, 40rem); display: flex; align-items: center; justify-content: center; text-align: center; padding: calc(var(--site-header-offset, 190px) + 28px) 0 clamp(2rem, 5vw, 3.25rem); background-color: var(--rc-cat-accent, #1f4a3d); background-image: radial-gradient( ellipse 72% 70% at 50% 42%, color-mix(in srgb, var(--rc-cat-accent, #1f4a3d) 38%, transparent) 0%, color-mix(in srgb, var(--rc-cat-accent, #1f4a3d) 68%, transparent) 52%, color-mix(in srgb, var(--rc-cat-accent, #1f4a3d) 88%, #0a1020) 100% ), linear-gradient( 180deg, color-mix(in srgb, var(--rc-cat-accent, #1f4a3d) 35%, transparent) 0%, color-mix(in srgb, var(--rc-cat-accent, #1f4a3d) 55%, transparent) 48%, color-mix(in srgb, var(--rc-cat-accent, #1f4a3d) 84%, #0a1020) 100% ), var(--rc-cat-hero-image); background-position: center, center, center; background-size: cover, cover, cover; background-repeat: no-repeat; color: #fff; overflow: hidden; } .rc-cat-hero__scrim { position: absolute; inset: 0; /* Soft limited fade toward the photo/model — edges deepen, center stays readable */ background: radial-gradient( ellipse 88% 78% at 50% 40%, color-mix(in srgb, var(--rc-cat-accent, #1f4a3d) 10%, transparent) 0%, color-mix(in srgb, var(--rc-cat-accent, #1f4a3d) 42%, transparent) 70%, color-mix(in srgb, var(--rc-cat-accent, #1f4a3d) 72%, #0a1020) 100% ); pointer-events: none; } .rc-cat-hero__inner { position: relative; z-index: 1; max-width: 46rem; margin-inline: auto; display: flex; flex-direction: column; align-items: center; } .rc-cat-crumb, .rc-cat-crumb a { color: rgba(255, 255, 255, 0.82); font-size: 0.88rem; } .rc-cat-hero h1 { margin: 0.45rem 0 0.55rem; font-family: var(--font-serif); font-size: clamp(2.4rem, 5.5vw, 3.6rem); line-height: 1.05; color: #fff; letter-spacing: -0.02em; } .rc-cat-hero__tagline { margin: 0 0 0.75rem; font-size: clamp(1.05rem, 2vw, 1.28rem); font-weight: 700; line-height: 1.35; color: #fff; max-width: 38rem; } .rc-cat-hero__lead { margin: 0 0 1.25rem; font-size: 1.02rem; line-height: 1.55; color: rgba(255, 255, 255, 0.92); max-width: 40rem; } .rc-cat-search { display: grid; grid-template-columns: 1fr auto; width: min(100%, 34rem); max-width: 34rem; margin-inline: auto; border-radius: 999px; overflow: hidden; background: #fff; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22); } .rc-cat-search__input { border: none; padding: 0.95rem 1.25rem; font-size: 1rem; min-width: 0; outline: none; color: #1a1a1a; background: transparent; } .rc-cat-search__input::placeholder { color: rgba(26, 26, 26, 0.45); } .rc-cat-search__btn { border: none; width: 3.35rem; background: var(--rc-cat-accent, #2f5d3a); color: #fff; display: grid; place-items: center; cursor: pointer; transition: filter 0.15s ease; } .rc-cat-search__btn:hover { filter: brightness(1.08); } .rc-cat-search__btn svg { width: 1.15rem; height: 1.15rem; } .rc-cat-popular { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; margin-top: 1rem; } .rc-cat-chip { border: 1.5px solid var(--rc-cat-accent, #1f4a3d); border-radius: 999px; padding: 0.42rem 0.9rem; background: #fff; color: #1a1a1a; font-size: 0.86rem; font-weight: 600; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; } .rc-cat-chip:hover { background: color-mix(in srgb, var(--rc-cat-accent, #1f4a3d) 10%, #fff); color: #111; transform: translateY(-1px); } /* --- Featured resource band --- */ .rc-cat-featured { padding: 0; background: #f7f4ef; } .rc-cat-featured__inner { display: grid; grid-template-columns: auto auto minmax(0, 1.4fr) auto; gap: 1.25rem 1.75rem; align-items: center; margin-top: -1.35rem; position: relative; z-index: 2; padding: 1.15rem 1.4rem; background: #f3ebdf; border: 1px solid rgba(23, 37, 90, 0.08); border-radius: 18px; box-shadow: 0 10px 28px rgba(23, 37, 90, 0.08); } .rc-cat-featured__label { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; font-family: var(--font-serif); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #24304a; text-align: center; max-width: 5.5rem; } .rc-cat-featured__mark { width: 2.35rem; height: 2.35rem; border-radius: 50%; display: grid; place-items: center; background: var(--rc-cat-accent, #2f5d3a); color: #fff; } .rc-cat-featured__mark svg { width: 1.05rem; height: 1.05rem; } .rc-cat-featured__partner { display: flex; align-items: center; gap: 0.65rem; min-width: 7.5rem; } .rc-cat-featured__partner-mark { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: #1b4f9c; color: #fff; font-family: var(--font-serif); font-weight: 700; font-size: 0.95rem; } .rc-cat-featured__partner strong { font-family: var(--font-serif); font-size: 1.05rem; color: #17255a; } .rc-cat-featured__copy h2 { margin: 0 0 0.35rem; font-family: var(--font-serif); font-size: clamp(1.15rem, 2vw, 1.45rem); color: #17255a; } .rc-cat-featured__copy p { margin: 0; font-size: 0.92rem; line-height: 1.45; color: var(--text-muted); max-width: 42ch; } .rc-cat-featured__action { text-align: center; min-width: 11rem; } .rc-cat-featured__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 2.6rem; padding: 0.55rem 1.15rem; border-radius: 999px; border: 1.5px solid var(--rc-cat-accent, #1f4a3d); background: #fff; color: #1a1a1a !important; font-weight: 700; font-size: 0.92rem; text-decoration: none; box-shadow: none; } .rc-cat-featured__cta:hover { background: color-mix(in srgb, var(--rc-cat-accent, #1f4a3d) 10%, #fff); filter: none; } .rc-cat-featured__note { margin: 0.45rem 0 0; font-size: 0.72rem; line-height: 1.35; color: var(--text-muted); } /* --- Visual topic cards --- */ .rc-cat-cards-section { padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(2rem, 4vw, 3rem); background: #f7f4ef; } .rc-cat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.15rem; } .rc-cat-card { --card-accent: var(--rc-cat-accent, #1f4a3d); display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 8px 24px rgba(23, 37, 90, 0.08); border: 1px solid rgba(23, 37, 90, 0.05); transition: transform 0.2s ease, box-shadow 0.2s ease; } .rc-cat-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(23, 37, 90, 0.12); } .rc-cat-card__media { position: relative; aspect-ratio: 16 / 11; background: #dfe3ec; overflow: hidden; } .rc-cat-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .rc-cat-card__icon { position: absolute; left: 14px; bottom: -18px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--card-accent); color: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); border: 3px solid #fff; z-index: 1; } .rc-cat-card__icon svg { width: 1.1rem; height: 1.1rem; } .rc-cat-card__body { display: flex; flex-direction: column; gap: 0.45rem; padding: 1.55rem 1.05rem 1.15rem; flex: 1; } .rc-cat-card__body h3 { margin: 0; font-family: var(--font-serif); font-size: 1.15rem; color: #17255a; } .rc-cat-card__body p { margin: 0; font-size: 0.88rem; line-height: 1.45; color: var(--text-muted); flex: 1; } .rc-cat-card__cta { align-self: flex-start; margin-top: 0.35rem; display: inline-flex; align-items: center; min-height: 2.15rem; padding: 0.4rem 0.85rem; border-radius: 999px; border: 1.5px solid var(--card-accent, var(--rc-cat-accent, #1f4a3d)); background: #fff; color: #1a1a1a !important; font-size: 0.8rem; font-weight: 700; text-decoration: none; } .rc-cat-card__cta:hover { background: color-mix(in srgb, var(--card-accent, var(--rc-cat-accent, #1f4a3d)) 10%, #fff); filter: none; } /* --- Today's tip --- */ .rc-cat-tip { padding: 0 0 clamp(1.5rem, 3vw, 2.25rem); background: #f7f4ef; } .rc-cat-tip__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(12rem, 0.55fr); gap: 1.15rem 1.5rem; align-items: center; padding: 1.2rem 1.4rem; border-radius: 18px; background: #e4ecdf; border: 1px solid rgba(47, 93, 58, 0.12); } .rc-cat-tip__icon { width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--rc-cat-accent, #2f5d3a); color: #fff; flex: none; } .rc-cat-tip__icon svg { width: 1.4rem; height: 1.4rem; } .rc-cat-tip__eyebrow { margin: 0 0 0.25rem; font-family: var(--font-serif); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #24304a; } .rc-cat-tip__copy p:last-child { margin: 0; font-size: 0.98rem; line-height: 1.5; color: #24304a; } .rc-cat-tip__aside { display: flex; align-items: flex-start; gap: 0.65rem; color: #3a4a3f; font-size: 0.84rem; line-height: 1.4; } .rc-cat-tip__aside p { margin: 0; } .rc-cat-tip__cal { width: 2rem; height: 2rem; flex: none; color: var(--rc-cat-accent, #2f5d3a); } .rc-cat-tip__cal svg { width: 100%; height: 100%; } /* --- Trusted organizations --- */ .rc-cat-partners { background: #f7f4ef; padding-top: 0.5rem; } .rc-cat-partners__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .rc-cat-partners__head h2 { margin: 0; font-family: var(--font-serif); font-size: clamp(1.45rem, 2.5vw, 1.85rem); color: #17255a; } .rc-cat-partners__all { font-size: 0.92rem; font-weight: 700; color: #17255a; text-decoration: none; white-space: nowrap; } .rc-cat-partners__all:hover { text-decoration: underline; } .rc-cat-partners__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.65rem; align-items: center; } .rc-cat-partners__nav { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid rgba(23, 37, 90, 0.18); background: #fff; color: #17255a; font-size: 1.35rem; line-height: 1; cursor: pointer; } .rc-cat-partners__nav:hover { background: #f0f2f8; } .rc-cat-partners__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(11.5rem, 1fr); gap: 0.85rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0.2rem 0.1rem 0.55rem; scrollbar-width: thin; } .rc-cat-partner { scroll-snap-align: start; background: #fff; border: 1px solid rgba(23, 37, 90, 0.1); border-radius: 14px; padding: 1rem 0.9rem; min-height: 8.5rem; display: flex; flex-direction: column; gap: 0.35rem; } .rc-cat-partner__logo { width: 2.4rem; height: 2.4rem; border-radius: 10px; display: grid; place-items: center; background: #eef1f8; color: #17255a; font-family: var(--font-serif); font-weight: 700; margin-bottom: 0.15rem; } .rc-cat-partner strong { font-size: 0.92rem; color: #17255a; } .rc-cat-partner p { margin: 0; font-size: 0.78rem; line-height: 1.4; color: var(--text-muted); } /* --- Listings band --- */ .rc-cat-listings { background: #fff; border-top: 1px solid rgba(23, 37, 90, 0.06); } .rc-cat-listings__head { margin-bottom: 1.15rem; max-width: 42rem; } .rc-cat-listings__head h2 { margin: 0 0 0.35rem; font-family: var(--font-serif); font-size: clamp(1.35rem, 2.2vw, 1.7rem); color: #17255a; } .rc-cat-listings__head p { margin: 0; color: var(--text-muted); } .rc-cat-listings__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .rc-cat-listing { background: #faf8f4; border: 1px solid rgba(23, 37, 90, 0.08); border-radius: 14px; padding: 1.1rem 1.15rem; } .rc-cat-listing h3 { margin: 0 0 0.35rem; font-family: var(--font-serif); font-size: 1.1rem; color: #17255a; } .rc-cat-listing p { margin: 0 0 0.65rem; font-size: 0.92rem; line-height: 1.45; color: var(--text-muted); } .rc-cat-listing__meta { display: flex; flex-wrap: wrap; gap: 0.55rem 1rem; font-size: 0.86rem; font-weight: 600; } @media (max-width: 1100px) { .rc-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rc-cat-featured__inner { grid-template-columns: 1fr 1fr; margin-top: 1rem; } } @media (max-width: 820px) { .rc-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rc-cat-featured__inner { grid-template-columns: 1fr; text-align: left; } .rc-cat-featured__label { flex-direction: row; max-width: none; justify-content: flex-start; } .rc-cat-featured__action { text-align: left; } .rc-cat-tip__inner { grid-template-columns: auto 1fr; } .rc-cat-tip__aside { grid-column: 1 / -1; } .rc-cat-listings__grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .rc-cat-grid { grid-template-columns: 1fr; } .rc-cat-search { border-radius: 14px; } .rc-cat-partners__head { flex-direction: column; align-items: flex-start; } } /* --- Senior Discounts topic page (rc-topic.html) --- */ .page-rc-topic.has-overlay-header main.rc-topic { padding-top: 0; } .rc-topic { --rc-topic-green: #1f4a3d; --rc-topic-green-soft: #e7efe6; --rc-topic-cream: #f6f1e8; --rc-topic-navy: #17255a; background: #fbfaf6; color: var(--text); } /* Single Parent Resources — wine accent (same layout system as Senior) */ .rc-topic.rc-topic--wine { --rc-topic-green: #7a1f35; --rc-topic-green-soft: #f3e6ea; } .rc-topic.rc-topic--wine .rc-topic-hero { background: linear-gradient( 90deg, #f7f4ee 0%, #f3ebe8 38%, #e8d5d8 58%, #dcc4c9 78%, #d0b3ba 100% ); } /* Veteran Resources — steel accent */ .rc-topic.rc-topic--steel { --rc-topic-green: #4a5d73; --rc-topic-green-soft: #e6ebf0; } .rc-topic.rc-topic--steel .rc-topic-hero { background: linear-gradient( 90deg, #f7f4ee 0%, #eef1f4 38%, #d9e0e7 58%, #c5d0da 78%, #b3c0cc 100% ); } /* Housing & Homeless Resources — teal accent */ .rc-topic.rc-topic--teal { --rc-topic-green: #0f6b6d; --rc-topic-green-soft: #e4f3f3; } .rc-topic.rc-topic--teal .rc-topic-hero { background: linear-gradient( 90deg, #f7f4ee 0%, #eef5f4 38%, #d5ebe9 58%, #b9ddd9 78%, #9ecfc9 100% ); } /* Jobs & Careers — gold accent */ .rc-topic.rc-topic--gold { --rc-topic-green: #9a7209; --rc-topic-green-soft: #f5edd8; } .rc-topic.rc-topic--gold .rc-topic-hero { background: linear-gradient( 90deg, #f7f4ee 0%, #f5efd8 38%, #ead9a0 58%, #dcc46e 78%, #c9a84a 100% ); } /* Senior Resources — larger type for easier reading (Senior topic pages only) */ .rc-topic.rc-topic--senior .rc-topic-hero__eyebrow { font-size: 0.98rem; letter-spacing: 0.1em; } .rc-topic.rc-topic--senior .rc-topic-hero h1 { font-size: clamp(2.45rem, 4.8vw, 3.65rem); line-height: 1.1; } .rc-topic.rc-topic--senior .rc-topic-hero__copy p:last-child { font-size: 1.28rem; line-height: 1.6; max-width: 42rem; } .rc-topic.rc-topic--senior .rc-topic-pill { min-height: 3.15rem; padding: 0.55rem 1.05rem 0.55rem 0.65rem; font-size: 1rem; gap: 0.55rem; } .rc-topic.rc-topic--senior .rc-topic-pill__icon { width: 2rem; height: 2rem; } .rc-topic.rc-topic--senior .rc-topic-pill__icon svg { width: 1.05rem; height: 1.05rem; } .rc-topic.rc-topic--senior .rc-topic-mission p { font-size: 1.12rem; line-height: 1.6; } .rc-topic.rc-topic--senior .rc-topic-side__label, .rc-topic.rc-topic--senior .rc-topic-side__group-label { font-size: 0.82rem; } .rc-topic.rc-topic--senior .rc-topic-side__link { padding: 0.62rem 0.8rem; font-size: 1.05rem; line-height: 1.35; } .rc-topic.rc-topic--senior .rc-topic-help p { font-size: 1.1rem; } .rc-topic.rc-topic--senior .rc-topic-help__cta { min-height: 2.75rem; padding: 0.5rem 1.1rem; font-size: 1.02rem; } .rc-topic.rc-topic--senior .rc-topic-help__note { font-size: 0.92rem; line-height: 1.45; } .rc-topic.rc-topic--senior .rc-topic-chapter__eyebrow { font-size: 0.92rem; } .rc-topic.rc-topic--senior .rc-topic-chapter h2 { font-size: clamp(2.1rem, 3.4vw, 2.75rem); } .rc-topic.rc-topic--senior .rc-topic-intro { font-size: 1.2rem; line-height: 1.65; max-width: 48rem; } .rc-topic.rc-topic--senior .rc-topic-tip p { font-size: 1.12rem; line-height: 1.6; } .rc-topic.rc-topic--senior .rc-topic-section__head h2 { font-size: 1.6rem; } .rc-topic.rc-topic--senior .rc-topic-section--major > .rc-topic-section__head h2 { font-size: clamp(1.8rem, 2.8vw, 2.15rem); } .rc-topic.rc-topic--senior .rc-topic-viewall { font-size: 1.05rem; } .rc-topic.rc-topic--senior .rc-topic-section__blurb { font-size: 1.12rem; line-height: 1.55; max-width: 48rem; } .rc-topic.rc-topic--senior .rc-topic-card h3, .rc-topic.rc-topic--senior .rc-topic-compact h3 { font-size: 1.28rem; } .rc-topic.rc-topic--senior .rc-topic-card p, .rc-topic.rc-topic--senior .rc-topic-compact p { font-size: 1.08rem; line-height: 1.55; } .rc-topic.rc-topic--senior .rc-topic-learn { font-size: 1.05rem; } .rc-topic.rc-topic--senior .rc-topic-card__mark { width: 2.7rem; height: 2.7rem; font-size: 1.1rem; } .rc-topic.rc-topic--senior .rc-topic-pop strong { font-size: 1.1rem; } .rc-topic.rc-topic--senior .rc-topic-pop span { font-size: 0.98rem; line-height: 1.45; } .rc-topic.rc-topic--senior .rc-topic-local__copy p { font-size: 1.12rem; line-height: 1.6; } .rc-topic.rc-topic--senior .rc-topic-disclaimer { font-size: 0.95rem; line-height: 1.55; } .rc-topic.rc-topic--senior .rc-topic-bottom p { font-size: 1.08rem; } .rc-topic.rc-topic--senior .rc-topic-back { min-height: 3rem; padding: 0.55rem 1.25rem; font-size: 1.05rem; } .rc-topic.rc-topic--senior .rc-topic-dialog { max-width: min(40rem, calc(100vw - 1.5rem)); } .rc-topic.rc-topic--senior .rc-topic-dialog__kicker { font-size: 0.88rem; } .rc-topic.rc-topic--senior .rc-topic-dialog h3 { font-size: 1.7rem; } .rc-topic.rc-topic--senior .rc-topic-dialog__where { font-size: 0.95rem; } .rc-topic.rc-topic--senior .rc-topic-dialog p { font-size: 1.12rem; line-height: 1.6; } .rc-topic.rc-topic--senior .rc-topic-dialog__close { font-size: 1.75rem; top: 0.45rem; right: 0.55rem; padding: 0.35rem; } .rc-topic.rc-topic--senior .rc-topic-local__places li { font-size: 1.05rem; } .rc-topic.rc-topic--senior .rc-topic-tips li { font-size: 1.15rem; line-height: 1.6; } .rc-topic.rc-topic--senior .rc-topic-jump strong { font-size: 1.2rem; } .rc-topic.rc-topic--senior .rc-topic-jump span, .rc-topic.rc-topic--senior .rc-topic-jump em { font-size: 1rem; } .rc-topic.rc-topic--senior .rc-topic-dialog__facts dt { font-size: 0.85rem; } .rc-topic.rc-topic--senior .rc-topic-dialog__facts dd { font-size: 1.08rem; line-height: 1.55; } .rc-topic.rc-topic--senior .rc-topic-dialog__cta { min-height: 2.85rem; padding: 0.5rem 1.1rem; font-size: 1.02rem; } .rc-topic.rc-topic--senior .rc-topic-dialog__item h4 { font-size: 1.2rem; } .rc-topic.rc-topic--senior .rc-topic-dialog__item p { font-size: 1.05rem; } .rc-topic-crisis { display: grid; gap: 0.55rem; margin: 0 0 1.25rem; padding: 1.1rem 1.2rem; border-radius: 14px; background: #1c2433; color: #f5f7fa; border: 1px solid color-mix(in srgb, #4a5d73 40%, #111); } .rc-topic-crisis h2 { margin: 0; font-size: 1.15rem; color: #fff; } .rc-topic-crisis p { margin: 0; line-height: 1.5; color: color-mix(in srgb, #fff 82%, #aab); } .rc-topic-crisis__cta { display: inline-flex; align-items: center; width: fit-content; margin-top: 0.15rem; padding: 0.55rem 1rem; border-radius: 999px; background: #c9a227; color: #1c2433 !important; font-weight: 700; text-decoration: none !important; } .rc-topic-crisis__cta:hover { filter: brightness(1.06); } .rc-topic-money { display: grid; gap: 0.65rem; margin: 1.75rem 0 0.5rem; padding: 1.15rem 1.25rem; border-radius: 14px; background: var(--rc-topic-green-soft); border: 1px solid color-mix(in srgb, var(--rc-topic-green) 22%, transparent); } .rc-topic-money h2 { margin: 0; font-size: 1.15rem; color: var(--rc-topic-navy); } .rc-topic-money p { margin: 0; line-height: 1.55; color: color-mix(in srgb, var(--rc-topic-navy) 78%, #444); } .rc-topic-money__cta { display: inline-flex; align-items: center; justify-content: center; width: fit-content; margin-top: 0.25rem; padding: 0.55rem 1rem; border-radius: 999px; background: var(--rc-topic-green); color: #fff !important; font-weight: 600; text-decoration: none !important; } .rc-topic-money__cta:hover { filter: brightness(1.08); } .rc-topic a:focus-visible, .rc-topic button:focus-visible { outline: 3px solid var(--rc-topic-green); outline-offset: 2px; } .rc-topic-fold { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: #fbfaf6; } .rc-topic-hero { flex: 1 1 auto; display: flex; align-items: stretch; padding: calc(var(--site-header-offset, 190px) + 8px) 0 1.25rem; background: linear-gradient( 90deg, #f7f4ee 0%, #eef3eb 38%, #d7e5d4 58%, #c5d6c2 78%, #b7cbb4 100% ); } .rc-topic-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 1.05fr); gap: 1.25rem 1.5rem; align-items: stretch; width: 100%; flex: 1 1 auto; } .rc-topic-hero__copy { display: flex; flex-direction: column; justify-content: center; } .rc-topic-hero__eyebrow { margin: 0 0 0.55rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(23, 37, 90, 0.55); } .rc-topic-hero h1 { margin: 0 0 0.75rem; font-family: var(--font-serif); font-size: clamp(2rem, 4.2vw, 3.15rem); line-height: 1.08; color: var(--rc-topic-navy); letter-spacing: -0.03em; } .rc-topic-hero__copy p:last-child { margin: 0; max-width: 38rem; font-size: 1.05rem; line-height: 1.55; color: var(--text-muted); } .rc-topic-hero__photo { position: relative; justify-self: stretch; align-self: stretch; width: calc(100% + 1.25rem); min-height: min(52vh, 34rem); height: 100%; aspect-ratio: 1; margin-right: -1.25rem; border-radius: 0; overflow: visible; background: linear-gradient(90deg, #c5d6c2 0%, #d5e4d2 50%, #b7cbb4 100%); box-shadow: none; } .rc-topic-hero__photo::before, .rc-topic-hero__photo::after { content: ""; position: absolute; top: 0; bottom: 0; width: 22%; z-index: 1; pointer-events: none; } .rc-topic-hero__photo::before { left: 0; background: linear-gradient(90deg, #c9d9c6 0%, rgba(201, 217, 198, 0) 100%); } .rc-topic-hero__photo::after { right: 0; background: linear-gradient(270deg, #b7cbb4 0%, rgba(183, 203, 180, 0) 100%); } .rc-topic-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; border-radius: 0; -webkit-mask-image: linear-gradient( 90deg, transparent 0%, #000 16%, #000 84%, transparent 100% ); mask-image: linear-gradient( 90deg, transparent 0%, #000 16%, #000 84%, transparent 100% ); } .rc-topic-pills { flex: 0 0 auto; padding: 0 0 1rem; } .rc-topic-mission { flex: 0 0 auto; width: 100%; background: var(--rc-topic-green-soft); padding: 1rem 0; } .rc-topic-pills__row { display: flex; gap: 0.65rem; overflow-x: auto; padding: 0.25rem 0 0.65rem; scrollbar-width: thin; } .rc-topic-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.7rem; padding: 0.45rem 0.9rem 0.45rem 0.55rem; border-radius: 14px; border: 1px solid rgba(23, 37, 90, 0.12); background: #fff; color: #1a1a1a !important; font-size: 0.82rem; font-weight: 700; text-decoration: none; white-space: nowrap; box-shadow: 0 4px 12px rgba(23, 37, 90, 0.04); } .rc-topic-pill__icon { width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; background: var(--rc-topic-green-soft); color: var(--rc-topic-green); } .rc-topic-pill__icon svg { width: 0.9rem; height: 0.9rem; } .rc-topic-pill.is-active { background: var(--rc-topic-green); border-color: var(--rc-topic-green); color: #fff !important; } .rc-topic-pill.is-active .rc-topic-pill__icon { background: rgba(255, 255, 255, 0.16); color: #fff; } .rc-topic-pill:hover:not(.is-active) { border-color: color-mix(in srgb, var(--rc-topic-green) 35%, #ccc); } .rc-topic-mission__inner { display: flex; align-items: center; gap: 0.85rem; } .rc-topic-mission__icon { flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; background: var(--rc-topic-green); color: #fff; } .rc-topic-mission__icon svg { width: 1rem; height: 1rem; } .rc-topic-mission p { margin: 0; font-size: 0.98rem; line-height: 1.5; color: #24304a; } .rc-topic-layout { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: 2rem; padding: 2rem 0 3.5rem; align-items: start; } .rc-topic-side { position: sticky; top: calc(var(--site-header-offset, 160px) + 12px); } .rc-topic-side__label { margin: 0 0 0.7rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(23, 37, 90, 0.5); } .rc-topic-side__nav { display: grid; gap: 0.15rem; margin-bottom: 1.25rem; } .rc-topic-side__group { display: grid; gap: 0.15rem; margin: 0 0 0.75rem; } .rc-topic-side__group:last-of-type { margin-bottom: 0.25rem; } .rc-topic-side__group-label { margin: 0 0 0.3rem; padding: 0.32rem 0.55rem; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rc-topic-green); background: var(--rc-topic-green-soft); border-radius: 8px; } .rc-topic-section--major > .rc-topic-section__head h2 { font-size: clamp(1.55rem, 2.4vw, 1.85rem); } .rc-topic-tip--section { margin: 0 0 1rem; } .rc-topic-side__link { display: block; padding: 0.48rem 0.7rem; border-radius: 8px; color: #24304a !important; font-size: 0.88rem; font-weight: 600; text-decoration: none; } .rc-topic-side__link.is-active, .rc-topic-side__link:hover { background: rgba(23, 37, 90, 0.06); } .rc-topic-side__link.is-active { font-weight: 800; } .rc-topic-help { padding: 1rem 0.95rem; background: #eef0f3; border-radius: 12px; } .rc-topic-help p { margin: 0 0 0.7rem; font-weight: 700; color: var(--rc-topic-navy); font-size: 0.92rem; } .rc-topic-help__cta { display: inline-flex; align-items: center; min-height: 2.35rem; padding: 0.4rem 0.9rem; border-radius: 999px; background: var(--rc-topic-green); color: #fff !important; font-weight: 700; font-size: 0.85rem; text-decoration: none; } .rc-topic-help__cta:hover { filter: brightness(1.08); } .rc-topic-help__note { display: block; margin-top: 0.55rem; font-size: 0.75rem; line-height: 1.4; color: var(--text-muted); } .rc-topic-chapter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(10rem, 16rem); gap: 1.25rem; align-items: end; margin-bottom: 1rem; } .rc-topic-chapter__eyebrow { margin: 0 0 0.3rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rc-topic-green); } .rc-topic-chapter h2 { margin: 0; font-family: var(--font-serif); font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--rc-topic-navy); } .rc-topic-chapter img { width: 100%; height: 11rem; object-fit: cover; border-radius: 12px; display: block; } .rc-topic-intro { margin: 0 0 1rem; max-width: 46rem; font-size: 1rem; line-height: 1.55; color: var(--text-muted); } .rc-topic-tip { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.95rem 1.05rem; margin-bottom: 1.75rem; background: var(--rc-topic-green-soft); border-radius: 12px; } .rc-topic-tip__icon { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--rc-topic-green); color: #fff; } .rc-topic-tip__icon svg { width: 1rem; height: 1rem; } .rc-topic-tip p { margin: 0; font-size: 0.94rem; line-height: 1.5; color: #24304a; } .rc-topic-section { scroll-margin-top: 7rem; margin-bottom: 1.85rem; } .rc-topic-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.35rem; } .rc-topic-section__head h2 { margin: 0; font-family: var(--font-serif); font-size: 1.35rem; color: var(--rc-topic-navy); } .rc-topic-viewall { border: none; background: none; padding: 0; color: var(--rc-topic-green); font-weight: 700; font-size: 0.88rem; cursor: pointer; text-decoration: none; } .rc-topic-viewall:hover { text-decoration: underline; } .rc-topic-section__blurb { margin: 0 0 0.9rem; font-size: 0.92rem; line-height: 1.45; color: var(--text-muted); max-width: 44rem; } .rc-topic-section__photo { margin: 0 0 1rem; border-radius: 14px; overflow: hidden; max-height: 13.5rem; } .rc-topic-section__photo img { display: block; width: 100%; height: 13.5rem; object-fit: cover; object-position: center 30%; } .rc-topic-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; } .rc-topic-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .rc-topic-card { background: #fff; border: 1px solid rgba(23, 37, 90, 0.08); border-radius: 14px; padding: 1.15rem 1.1rem 1.05rem; box-shadow: 0 6px 18px rgba(23, 37, 90, 0.05); } .rc-topic-card__mark { width: 2.35rem; height: 2.35rem; border-radius: 50%; display: grid; place-items: center; margin-bottom: 0.7rem; background: var(--rc-topic-green-soft); color: var(--rc-topic-green); font-family: var(--font-serif); font-weight: 700; } .rc-topic-card h3, .rc-topic-compact h3 { margin: 0 0 0.4rem; font-family: var(--font-serif); font-size: 1.08rem; color: var(--rc-topic-navy); } .rc-topic-card p, .rc-topic-compact p { margin: 0 0 0.85rem; font-size: 0.88rem; line-height: 1.45; color: var(--text-muted); } .rc-topic-learn { border: none; background: none; padding: 0; color: var(--rc-topic-green); font-weight: 700; font-size: 0.86rem; cursor: pointer; } .rc-topic-learn:hover { text-decoration: underline; } .rc-topic-compact-list { display: grid; gap: 0.7rem; } .rc-topic-compact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; align-items: start; background: #fff; border: 1px solid rgba(23, 37, 90, 0.08); border-radius: 12px; padding: 0.95rem 1.05rem; } .rc-topic-popular { margin: 0.5rem 0 2rem; } .rc-topic-popular__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; } .rc-topic-pop { display: grid; gap: 0.3rem; padding: 0.9rem 0.85rem; background: #fff; border: 1px solid rgba(23, 37, 90, 0.08); border-radius: 12px; text-decoration: none; color: inherit !important; } .rc-topic-pop strong { font-size: 0.92rem; color: var(--rc-topic-navy); } .rc-topic-pop span { font-size: 0.8rem; line-height: 1.4; color: var(--text-muted); } .rc-topic-pop:hover { border-color: color-mix(in srgb, var(--rc-topic-green) 40%, #ccc); } .rc-topic-local__banner { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr) auto; gap: 1rem; align-items: center; background: #fff; border: 1px solid rgba(23, 37, 90, 0.08); border-radius: 14px; overflow: hidden; margin-bottom: 0.85rem; } .rc-topic-local__banner img { width: 100%; height: 100%; min-height: 8.5rem; object-fit: cover; display: block; } .rc-topic-local__copy p { margin: 0; padding: 0.85rem 0.25rem; font-size: 0.92rem; line-height: 1.5; color: #24304a; } .rc-topic-local__places { list-style: none; margin: 0; padding: 0.9rem 1.1rem 0.9rem 0; display: grid; gap: 0.4rem; } .rc-topic-local__places li { display: flex; align-items: center; gap: 0.4rem; font-size: 0.86rem; font-weight: 700; color: var(--rc-topic-navy); white-space: nowrap; } .rc-topic-local__check { width: 1.15rem; height: 1.15rem; border-radius: 50%; display: grid; place-items: center; background: var(--rc-topic-green-soft); color: var(--rc-topic-green); } .rc-topic-local__check svg { width: 0.75rem; height: 0.75rem; } .rc-topic-tips { margin: 0; padding: 0.2rem 0 0 1.15rem; display: grid; gap: 0.45rem; } .rc-topic-tips li { font-size: 0.95rem; line-height: 1.5; color: #24304a; } .rc-topic-vfilters { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 1rem; } .rc-topic-vchip { border: 1px solid rgba(23, 37, 90, 0.12); background: #fff; color: #24304a; border-radius: 999px; padding: 0.42rem 0.9rem; font-size: 0.82rem; font-weight: 700; cursor: pointer; } .rc-topic-vchip.is-active { background: var(--rc-topic-green); border-color: var(--rc-topic-green); color: #fff; } .rc-topic-vchip:hover:not(.is-active) { border-color: color-mix(in srgb, var(--rc-topic-green) 40%, #ccc); } .rc-topic-vgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.85rem; } .rc-topic-vcard { display: grid; gap: 0.45rem; text-align: left; border: none; background: none; padding: 0; cursor: pointer; color: inherit; font: inherit; } .rc-topic-vcard[hidden] { display: none; } .rc-topic-vcard__thumb { position: relative; display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 10; background: #1a2438; } .rc-topic-vcard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .rc-topic-vcard__play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(10, 16, 32, 0.18); } .rc-topic-vcard__play svg { width: 2.4rem; height: 2.4rem; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35)); } .rc-topic-vcard__play svg path:last-child { fill: currentColor; stroke: none; } .rc-topic-vcard__time { position: absolute; right: 0.45rem; bottom: 0.45rem; padding: 0.12rem 0.4rem; border-radius: 6px; background: rgba(10, 16, 32, 0.72); color: #fff; font-size: 0.68rem; font-weight: 700; } .rc-topic-vcard__tag { position: absolute; left: 0.45rem; top: 0.45rem; padding: 0.18rem 0.5rem; border-radius: 999px; color: #fff; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.02em; max-width: calc(100% - 0.9rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rc-topic-vcard__tag--seated { background: #6b4ea0; } .rc-topic-vcard__tag--beginner { background: #2f7a4a; } .rc-topic-vcard__tag--stretching { background: #2a5f8f; } .rc-topic-vcard__tag--balance { background: #c46a1a; } .rc-topic-vcard__tag--active { background: #b3261e; } .rc-topic-vcard__title { font-family: var(--font-serif); font-size: 0.95rem; font-weight: 700; color: var(--rc-topic-navy); line-height: 1.25; } .rc-topic-vcard__meta { font-size: 0.75rem; color: var(--text-muted); line-height: 1.35; } .rc-topic-vcard:hover .rc-topic-vcard__thumb { outline: 2px solid var(--rc-topic-green); outline-offset: 1px; } .rc-topic-vlibrary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: 0.85rem 1.05rem; border-radius: 12px; background: var(--rc-topic-green); color: #fff; } .rc-topic-vlibrary p { margin: 0; font-size: 0.88rem; font-weight: 600; } .rc-topic-vlibrary__cta { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 2.35rem; padding: 0.35rem 0.95rem; border-radius: 999px; background: #fff; color: var(--rc-topic-green) !important; font-weight: 800; font-size: 0.82rem; text-decoration: none; white-space: nowrap; } .rc-topic-vlibrary__cta:hover { filter: brightness(0.97); } .rc-topic-jumps { margin: 0.35rem 0 1.75rem; } .rc-topic-jumps__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.85rem; } .rc-topic-jump { display: grid; gap: 0.35rem; padding: 1.05rem 1rem 0.95rem; background: #fff; border: 1px solid rgba(23, 37, 90, 0.08); border-radius: 14px; text-decoration: none; color: inherit !important; box-shadow: 0 6px 18px rgba(23, 37, 90, 0.04); } .rc-topic-jump__icon { width: 2.35rem; height: 2.35rem; border-radius: 50%; display: grid; place-items: center; background: var(--rc-topic-green-soft); color: var(--rc-topic-green); } .rc-topic-jump__icon svg { width: 1.05rem; height: 1.05rem; } .rc-topic-jump strong { font-family: var(--font-serif); font-size: 1.02rem; color: var(--rc-topic-navy); } .rc-topic-jump span { font-size: 0.82rem; line-height: 1.4; color: var(--text-muted); } .rc-topic-jump em { font-style: normal; font-size: 0.82rem; font-weight: 800; color: var(--rc-topic-green); } .rc-topic-jump:hover { border-color: color-mix(in srgb, var(--rc-topic-green) 40%, #ccc); } .rc-topic-dialog--video { max-width: min(52rem, calc(100vw - 1.5rem)); } .rc-topic-video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 0.9rem; border-radius: 12px; overflow: hidden; background: #111; } .rc-topic-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .rc-topic-disclaimer { margin: 0 0 1.15rem; font-size: 0.78rem; line-height: 1.45; color: rgba(23, 37, 90, 0.6); } .rc-topic-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; background: var(--rc-topic-cream); border-radius: 14px; } .rc-topic-bottom p { margin: 0; display: flex; align-items: center; gap: 0.55rem; font-size: 0.9rem; color: #24304a; } .rc-topic-bottom__icon { width: 1.85rem; height: 1.85rem; border-radius: 50%; display: grid; place-items: center; background: var(--rc-topic-green); color: #fff; flex: 0 0 auto; } .rc-topic-bottom__icon svg { width: 0.9rem; height: 0.9rem; } .rc-topic-back { display: inline-flex; align-items: center; min-height: 2.55rem; padding: 0.45rem 1.1rem; border-radius: 999px; background: var(--rc-topic-green); color: #fff !important; font-weight: 700; font-size: 0.88rem; text-decoration: none; white-space: nowrap; } .rc-topic-back:hover { filter: brightness(1.08); } .rc-topic-dialog { border: none; padding: 0; background: transparent; max-width: min(36rem, calc(100vw - 1.5rem)); } .rc-topic-dialog::backdrop { background: rgba(16, 22, 40, 0.45); } .rc-topic-dialog__panel { position: relative; background: #fff; border-radius: 16px; padding: 1.35rem 1.3rem 1.25rem; box-shadow: 0 20px 50px rgba(16, 22, 40, 0.22); } .rc-topic-dialog__close { position: absolute; top: 0.55rem; right: 0.65rem; border: none; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: #445; } .rc-topic-dialog__kicker { margin: 0 0 0.25rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rc-topic-green); } .rc-topic-dialog h3 { margin: 0 0 0.35rem; font-family: var(--font-serif); font-size: 1.45rem; color: var(--rc-topic-navy); padding-right: 1.5rem; } .rc-topic-dialog__where { margin: 0 0 0.7rem; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--rc-topic-green); } .rc-topic-dialog p { margin: 0 0 0.85rem; font-size: 0.94rem; line-height: 1.5; color: var(--text-muted); } .rc-topic-dialog__facts { margin: 0 0 1rem; display: grid; gap: 0.7rem; } .rc-topic-dialog__facts dt { margin: 0 0 0.15rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(23, 37, 90, 0.5); } .rc-topic-dialog__facts dd { margin: 0; font-size: 0.9rem; line-height: 1.45; color: #24304a; } .rc-topic-dialog__actions { display: flex; flex-wrap: wrap; gap: 0.55rem; } .rc-topic-dialog__cta { display: inline-flex; align-items: center; min-height: 2.35rem; padding: 0.4rem 0.9rem; border-radius: 999px; background: var(--rc-topic-green); color: #fff !important; font-weight: 700; font-size: 0.85rem; text-decoration: none; } .rc-topic-dialog__cta--ghost { background: #fff; color: var(--rc-topic-green) !important; border: 1.5px solid var(--rc-topic-green); } .rc-topic-dialog__list { display: grid; gap: 0.7rem; margin-top: 0.75rem; max-height: min(60vh, 28rem); overflow: auto; } .rc-topic-dialog__item { padding: 0.75rem 0.8rem; border: 1px solid rgba(23, 37, 90, 0.08); border-radius: 10px; } .rc-topic-dialog__item h4 { margin: 0 0 0.3rem; font-size: 1rem; color: var(--rc-topic-navy); } .rc-topic-dialog__item p { margin: 0 0 0.45rem; font-size: 0.86rem; } @media (max-width: 1200px) { .rc-topic .rc-topic-vgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 980px) { .rc-topic-hero__inner, .rc-topic-layout, .rc-topic-chapter, .rc-topic-local__banner { grid-template-columns: 1fr; } .rc-topic-cards, .rc-topic-cards--4, .rc-topic-vgrid, .rc-topic-jumps__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rc-topic-popular__row { grid-template-columns: 1fr 1fr; } .rc-topic-vlibrary { flex-direction: column; align-items: flex-start; } .rc-topic-hero__photo { justify-self: stretch; width: 100%; margin-right: 0; min-height: 16rem; aspect-ratio: 1; } .rc-topic-side { position: static; } .rc-topic-side__nav { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 0.35rem; padding-bottom: 0.35rem; align-items: stretch; } .rc-topic-side__group { display: contents; } .rc-topic-side__group-label { flex: 0 0 auto; align-self: center; white-space: nowrap; margin: 0; } .rc-topic-side__link { flex: 0 0 auto; white-space: nowrap; background: #fff; border: 1px solid rgba(23, 37, 90, 0.1); } .rc-topic-chapter img { height: 10rem; } .rc-topic-bottom { flex-direction: column; align-items: flex-start; } .rc-topic-local__places { padding: 0 1rem 1rem; } } @media (max-width: 640px) { .rc-topic-hero h1 { font-size: 1.85rem; } .rc-topic-compact { grid-template-columns: 1fr; } .rc-topic-cards, .rc-topic-cards--4, .rc-topic-popular__row, .rc-topic-vgrid, .rc-topic-jumps__row { grid-template-columns: 1fr; } } /* ============================================================================ Style Showcase — homepage banner + The IC Connect gallery ============================================================================ */ .style-ad { --style-navy: #0a1b33; --style-gold: #e0c078; --style-gold-deep: #c9a45a; overflow: hidden; background: #0a1b33; width: 100%; max-width: none; } .style-ad__hero { position: relative; display: block; /* Match original banner height — tall enough for faces, not so tall it shows empty ceiling */ min-height: clamp(600px, 62vw, 850px); overflow: hidden; background: #1a1008; } .style-ad__photo { position: absolute; inset: 0; width: 100%; height: 100%; /* contain = whole image, shift right so black gap is covered */ object-fit: contain; object-position: right 18%; display: block; margin: 0; border: 0; pointer-events: none; } .style-ad__copy { position: relative; z-index: 1; padding: 36px 28px 28px 48px; max-width: 560px; /* stretch panel all the way to the bottom of the hero so no black strip shows beneath it */ align-self: stretch; display: flex; flex-direction: column; justify-content: center; background: linear-gradient( 100deg, #f7f0e6 0%, #f0e6d8 58%, rgba(247, 240, 230, 0.82) 78%, rgba(247, 240, 230, 0) 100% ); } .style-ad__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .style-ad__mark { width: 36px; height: 36px; border-radius: 50%; background: #e8d9c4; display: grid; place-items: center; color: #1a1a1a; flex-shrink: 0; } .style-ad__brand-name { font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--style-gold-deep); } .style-ad__copy h2 { margin: 0 0 10px; font-family: "Playfair Display", Georgia, serif; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.08; color: var(--style-navy); font-weight: 800; } .style-ad__lead { margin: 0 0 18px; font-size: 16px; line-height: 1.45; color: #24304a; max-width: 36ch; } .style-ad__features { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; } .style-ad__features li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--style-navy); } .style-ad__ico { width: 28px; height: 28px; border-radius: 50%; background: var(--style-gold); color: var(--style-navy); display: grid; place-items: center; flex-shrink: 0; } .style-ad__cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 999px; background: var(--style-navy); color: var(--style-gold); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 13px; text-decoration: none; border: 0; } .style-ad__cta:visited { color: var(--style-gold); } .style-ad__cta:hover { background: #162848; color: #f3de9a; } .style-ad__tagline { margin: 10px 0 0; font-size: 14px; color: #24304a; } .style-ad__badge { position: static; display: block; width: fit-content; margin: 0 0 16px; background: var(--style-navy); color: var(--style-gold); border: 1px solid var(--style-gold-deep); border-radius: 16px; padding: 14px 18px 12px; text-align: center; min-width: 168px; box-shadow: 0 12px 28px rgba(10, 27, 51, 0.28); } .style-ad__badge-new { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; } .style-ad__badge-script { display: block; font-family: "Great Vibes", cursive; font-size: 30px; color: #fff; line-height: 1.1; margin: 4px 0 6px; } .style-ad__badge-sub { display: block; font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .style-ad__bar { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 18px 24px; background: var(--style-navy); color: #fff; padding: 18px 40px 20px; } .style-ad__bar > .style-ad__join-note { justify-self: end; text-align: right; max-width: 12rem; } .style-ad__bar > :first-child { justify-self: start; } .style-ad__bar-kicker { margin: 0 0 4px; color: var(--style-gold); font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .style-ad__bar-copy { margin: 0; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, 0.92); max-width: 34ch; } .style-ad__cats { display: flex; justify-content: center; justify-self: center; flex-wrap: wrap; gap: 8px 18px; list-style: none; margin: 0; padding: 0; } .style-ad__cats li { display: grid; justify-items: center; gap: 6px; text-align: center; color: var(--style-gold); font-size: 11px; font-weight: 700; max-width: 108px; } .style-ad__cats svg { width: 26px; height: 26px; } .style-ad__join { display: grid; justify-items: end; justify-self: end; gap: 6px; } .style-ad__join .btn { background: var(--style-gold); border-color: var(--style-gold); color: var(--style-navy); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 12px; border-radius: 10px; white-space: nowrap; } .style-ad__join .btn:hover { background: #f3de9a; border-color: #f3de9a; color: var(--style-navy); } .style-ad__join-note { margin: 0; font-size: 12px; color: var(--style-gold); } .page-style-showcase { background: #f7f4ef; min-height: 100vh; display: flex; flex-direction: column; } .page-style-showcase.has-overlay-header main { padding-top: var(--site-header-offset, 190px); flex: 1 1 auto; display: flex; flex-direction: column; } .page-style-showcase .style-ad { margin-bottom: 0; } .page-style-showcase .site-footer { margin-top: 0; border-top: 0; } .page-style-showcase .style-show-grid { padding-top: 8px; padding-bottom: 28px; } .style-show-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 28px 0 18px; } .style-show-head h1 { margin: 0 0 6px; font-family: "Playfair Display", Georgia, serif; font-size: clamp(26px, 3vw, 38px); color: var(--style-navy, #0a1b33); } .style-show-head p { margin: 0; color: #4a5568; font-size: 16px; } .style-show-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .style-show-tools select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230a1b33' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center; border: 1px solid rgba(10, 27, 51, 0.18); border-radius: 10px; padding: 10px 34px 10px 12px; font: inherit; font-size: 14px; color: #0a1b33; min-width: 140px; } .style-show-share { display: inline-flex; align-items: center; gap: 8px; background: #0a1b33; color: #e0c078; border: 0; border-radius: 10px; padding: 10px 16px; font-weight: 800; font-size: 14px; cursor: pointer; } .style-show-share:hover { background: #162848; } .style-show-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); /* Touching thumbnails: no spaces between images */ gap: 0 !important; padding-bottom: 18px; } .style-look { display: flex; flex-direction: column; background: #fff; /* Touching edges: avoid rounded-corner "gaps" */ border-radius: 0 !important; overflow: hidden; box-shadow: none !important; } .style-show-grid > .style-look { margin: 0 !important; } .style-look__media { border-radius: 0 !important; } .style-look__media img { border-radius: 0 !important; } .style-look__media { aspect-ratio: 3 / 4; background: #1a2248; overflow: hidden; } .style-look__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .style-look__bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; background: #fff; } .style-look__stat { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: #0a1b33; font-size: 13px; font-weight: 700; cursor: pointer; padding: 2px; } .style-look__stat.is-on { color: #b42318; } .style-look__stat svg { width: 16px; height: 16px; } .style-show-more { display: flex; justify-content: center; padding: 8px 0 40px; } .page-style-showcase .style-show-more { padding-bottom: 16px; } .style-did-that { flex: 1 1 auto; width: 100%; margin: 0; min-height: clamp(180px, 28vh, 340px); display: grid; place-items: center; background: #142867; color: #f4e6c3; } .style-did-that__text { margin: 0; padding: 28px 24px; font-family: Cinzel, "Playfair Display", Georgia, serif; font-weight: 700; font-size: clamp(28px, 5.4vw, 64px); letter-spacing: 0.18em; line-height: 1.15; text-align: center; text-transform: uppercase; color: #f4e6c3; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.28); } .style-show-more button { min-width: min(420px, 100%); background: #efe6d6; border: 1px solid rgba(10, 27, 51, 0.12); color: #0a1b33; border-radius: 12px; padding: 12px 18px; font-weight: 700; cursor: pointer; } .style-show-more button:hover { background: #e4d7c2; } .style-modal[hidden] { display: none !important; } .style-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; } .style-modal__veil { position: absolute; inset: 0; background: rgba(8, 14, 28, 0.55); } .style-modal__panel { position: relative; z-index: 1; width: min(480px, 100%); background: #fff; border-radius: 16px; padding: 22px; box-shadow: 0 24px 60px rgba(8, 12, 30, 0.28); } .style-modal__panel h2 { margin: 0 0 8px; font-family: "Playfair Display", Georgia, serif; color: #0a1b33; } .style-modal__panel label { display: grid; gap: 6px; margin: 12px 0; font-size: 13px; font-weight: 700; color: #0a1b33; } .style-modal__panel input, .style-modal__panel select, .style-modal__panel textarea { font: inherit; font-weight: 500; padding: 10px 12px; border: 1px solid rgba(10, 27, 51, 0.18); border-radius: 10px; } .style-modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; } .style-comments { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; max-height: 240px; overflow: auto; } .style-comments li { background: #f7f4ef; border-radius: 10px; padding: 8px 10px; font-size: 14px; } @media (max-width: 1100px) { .style-show-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .style-ad__hero { min-height: 0; } .style-ad__photo { object-fit: contain; object-position: center center; } .style-ad__copy { max-width: none; padding: 28px 24px; background: linear-gradient(180deg, #f7f0e6 70%, rgba(247, 240, 230, 0.92)); } } @media (max-width: 800px) { .style-show-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .style-ad__bar { grid-template-columns: 1fr; text-align: center; padding: 18px 20px; } .style-ad__bar > :first-child, .style-ad__cats, .style-ad__bar > .style-ad__join-note { justify-self: center; } .style-ad__bar > .style-ad__join-note { text-align: center; max-width: none; } .style-ad__bar-copy { max-width: none; margin-inline: auto; } } @media (max-width: 560px) { .style-show-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .style-ad__copy h2 { font-size: 30px; } } /* ============================================================================ WICN Media — homepage ad (news + radio) ============================================================================ */ .media-ad { --media-navy: #17255a; --media-gold: #c4a35a; --media-sky: #e8f1f8; position: relative; overflow: hidden; background: radial-gradient(ellipse 80% 60% at 50% 0%, #f7fbff 0%, transparent 55%), linear-gradient(180deg, #eef5fb 0%, #f8f4ec 58%, #ffffff 100%); padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2.25rem, 4vw, 3.25rem); } .media-ad__atmosphere { position: absolute; inset: 0 0 18%; pointer-events: none; background-image: radial-gradient(circle at 18% 30%, rgba(23, 37, 90, 0.06) 0 1.2px, transparent 1.35px), radial-gradient(circle at 82% 42%, rgba(196, 163, 90, 0.14) 0 1.2px, transparent 1.35px); background-size: 18px 18px, 22px 22px; opacity: 0.7; } .media-ad__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 0.9fr); gap: clamp(1rem, 2.5vw, 1.75rem); align-items: center; width: min(1120px, calc(100% - 2.5rem)); margin: 0 auto; } .media-ad__copy { text-align: center; display: flex; flex-direction: column; align-items: center; } .media-ad__eyebrow { margin: 0 0 0.75rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--media-navy); } .media-ad__copy h2 { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.02em; color: var(--media-navy); } .media-ad__title-main { font-family: "Playfair Display", var(--font-serif); font-weight: 800; font-size: clamp(2.05rem, 5vw, 3.45rem); line-height: 1.05; letter-spacing: -0.02em; } .media-ad__title-script { font-family: "Great Vibes", cursive; font-weight: 400; font-size: clamp(2.25rem, 5.6vw, 3.85rem); line-height: 1.05; color: var(--media-gold); margin-top: -0.08em; } .media-ad__lede { margin: 0.9rem 0 0; max-width: 34rem; font-size: clamp(0.98rem, 1.4vw, 1.1rem); line-height: 1.55; color: #2a3558; font-weight: 600; } .media-ad__features { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.55rem; text-align: left; width: min(100%, 28rem); } .media-ad__features li { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.92rem; line-height: 1.4; color: var(--media-navy); font-weight: 600; } .media-ad__ico { width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: color-mix(in srgb, var(--media-navy) 8%, #fff); color: var(--media-navy); margin-top: 0.05rem; } .media-ad__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; margin-top: 1.45rem; } .media-ad__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.7rem 1.35rem; border-radius: 999px; background: var(--media-navy); color: #fff; font-weight: 800; font-size: 0.92rem; letter-spacing: 0.02em; text-decoration: none; box-shadow: 0 12px 28px rgba(23, 37, 90, 0.18); transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .media-ad__cta:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(23, 37, 90, 0.24); background: #101b45; } .media-ad__cta--ghost { background: transparent; color: var(--media-navy); border: 1.5px solid color-mix(in srgb, var(--media-navy) 28%, #fff); box-shadow: none; } .media-ad__cta--ghost:hover { background: color-mix(in srgb, var(--media-gold) 18%, #fff); border-color: var(--media-gold); box-shadow: none; } .media-ad__panel { position: relative; min-height: 220px; display: grid; place-items: center; } .media-ad__screen, .media-ad__dial { width: min(100%, 220px); aspect-ratio: 4 / 5; border-radius: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem; padding: 1.25rem; text-align: center; box-shadow: 0 22px 48px rgba(23, 37, 90, 0.16); animation: media-ad-float 6.5s ease-in-out infinite; } .media-ad__screen { background: linear-gradient(165deg, rgba(255, 255, 255, 0.12), transparent 42%), linear-gradient(180deg, #1a274f 0%, #0f1733 100%); color: #fff; border: 1px solid rgba(255, 255, 255, 0.12); } .media-ad__dial { background: linear-gradient(165deg, rgba(255, 255, 255, 0.55), transparent 40%), linear-gradient(180deg, #fff8ec 0%, #f0e2c8 100%); color: var(--media-navy); border: 1px solid color-mix(in srgb, var(--media-gold) 35%, #fff); animation-delay: -2.2s; } .media-ad__live { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.28rem 0.65rem; border-radius: 999px; background: rgba(196, 40, 55, 0.18); color: #ffb4bc; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .media-ad__live-dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #ff4d5e; box-shadow: 0 0 0 0 rgba(255, 77, 94, 0.55); animation: media-ad-pulse 1.6s ease-out infinite; } .media-ad__wordmark { margin: 0.35rem 0 0; font-family: "Playfair Display", var(--font-serif); font-size: clamp(2rem, 3vw, 2.55rem); font-weight: 800; letter-spacing: 0.18em; color: #fff; } .media-ad__freq { font-family: "Playfair Display", var(--font-serif); font-size: clamp(2.2rem, 3.2vw, 2.8rem); font-weight: 800; letter-spacing: -0.03em; color: var(--media-navy); line-height: 1; } .media-ad__panel-label { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; max-width: 12ch; line-height: 1.35; } .media-ad__screen .media-ad__panel-label { color: rgba(255, 255, 255, 0.78); } .media-ad__bars { display: flex; align-items: flex-end; gap: 0.28rem; height: 2rem; margin-top: 0.35rem; } .media-ad__bars span { width: 0.32rem; border-radius: 999px; background: var(--media-gold); animation: media-ad-eq 1.1s ease-in-out infinite; } .media-ad__bars span:nth-child(1) { height: 35%; animation-delay: 0s; } .media-ad__bars span:nth-child(2) { height: 65%; animation-delay: 0.1s; } .media-ad__bars span:nth-child(3) { height: 45%; animation-delay: 0.2s; } .media-ad__bars span:nth-child(4) { height: 90%; animation-delay: 0.05s; } .media-ad__bars span:nth-child(5) { height: 55%; animation-delay: 0.18s; } .media-ad__bars span:nth-child(6) { height: 75%; animation-delay: 0.12s; } .media-ad__bars span:nth-child(7) { height: 40%; animation-delay: 0.22s; } .media-ad__float { position: absolute; width: 3.25rem; height: 3.25rem; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--media-navy); box-shadow: 0 12px 28px rgba(23, 37, 90, 0.14); } .media-ad__float svg { width: 1.45rem; height: 1.45rem; } .media-ad__float--mic { top: 8%; right: 4%; color: var(--media-navy); } .media-ad__float--wave { bottom: 10%; left: 2%; background: var(--media-navy); color: var(--media-gold); } .media-ad__footer { position: relative; margin-top: clamp(1.75rem, 4vw, 2.75rem); padding: 0 1.25rem 1.75rem; text-align: center; } .media-ad__wave { display: block; width: 100%; height: 56px; margin: 0 0 0.35rem; } .media-ad__seal { position: relative; z-index: 1; width: 7.5rem; height: 7.5rem; margin: -2.6rem auto 1rem; border-radius: 50%; display: grid; place-content: center; gap: 0.15rem; background: radial-gradient(circle at 35% 30%, #24346e 0%, var(--media-navy) 70%); color: var(--media-gold); box-shadow: 0 14px 34px rgba(23, 37, 90, 0.22); border: 2px solid color-mix(in srgb, var(--media-gold) 55%, #fff); } .media-ad__seal-icon { font-size: 0.95rem; line-height: 1; } .media-ad__seal-text { font-family: "Great Vibes", cursive; font-size: 1.15rem; line-height: 1.15; max-width: 6.2rem; color: #f0d9a0; } .media-ad__cats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem 0.85rem; } .media-ad__cats li { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--media-navy) 72%, #fff); } .media-ad__cats li:not(:last-child)::after { content: "·"; margin-left: 0.85rem; color: var(--media-gold); } @keyframes media-ad-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes media-ad-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 77, 94, 0.55); } 70% { box-shadow: 0 0 0 8px rgba(255, 77, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 77, 94, 0); } } @keyframes media-ad-eq { 0%, 100% { transform: scaleY(0.55); } 50% { transform: scaleY(1); } } @media (prefers-reduced-motion: reduce) { .media-ad__screen, .media-ad__dial, .media-ad__live-dot, .media-ad__bars span { animation: none; } } @media (max-width: 960px) { .media-ad__inner { grid-template-columns: 1fr; gap: 1.5rem; } .media-ad__panel { min-height: 0; } .media-ad__screen, .media-ad__dial { width: min(100%, 280px); aspect-ratio: 16 / 10; flex-direction: row; justify-content: flex-start; gap: 1rem; padding: 1rem 1.2rem; text-align: left; } .media-ad__panel-label { max-width: none; } .media-ad__float--mic { top: -0.5rem; right: 12%; } .media-ad__float--wave { bottom: -0.4rem; left: 12%; } .media-ad__features { width: min(100%, 32rem); } } @media (max-width: 560px) { .media-ad__actions { width: 100%; } .media-ad__cta { width: 100%; } .media-ad__seal { width: 6.5rem; height: 6.5rem; margin-top: -2.1rem; } .media-ad__seal-text { font-size: 1.02rem; } } /* IC Resource Center — homepage ad (same system as WICN media ad) */ .media-ad--resources { background: radial-gradient(ellipse 80% 60% at 50% 0%, #f3faf6 0%, transparent 55%), linear-gradient(180deg, #eef8f2 0%, #f8f4ec 58%, #ffffff 100%); } .media-ad--resources .media-ad__atmosphere { background-image: radial-gradient(circle at 18% 30%, rgba(23, 37, 90, 0.05) 0 1.2px, transparent 1.35px), radial-gradient(circle at 82% 42%, rgba(46, 125, 90, 0.14) 0 1.2px, transparent 1.35px); } .media-ad__screen--guide { background: linear-gradient(165deg, rgba(255, 255, 255, 0.14), transparent 42%), linear-gradient(180deg, #1f3d52 0%, #13283a 100%); } .media-ad__live--help { background: rgba(46, 125, 90, 0.22); color: #b7efd0; } .media-ad__live--help .media-ad__live-dot { background: #3dcf86; box-shadow: 0 0 0 0 rgba(61, 207, 134, 0.5); animation-name: media-ad-pulse-help; } @keyframes media-ad-pulse-help { 0% { box-shadow: 0 0 0 0 rgba(61, 207, 134, 0.5); } 70% { box-shadow: 0 0 0 8px rgba(61, 207, 134, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 207, 134, 0); } } .media-ad__dial--needs { background: linear-gradient(165deg, rgba(255, 255, 255, 0.6), transparent 40%), linear-gradient(180deg, #fffdf8 0%, #e7f2ea 100%); border-color: color-mix(in srgb, #2e7d5a 22%, #fff); } .media-ad__freq--sm { font-size: clamp(1.85rem, 2.8vw, 2.35rem); letter-spacing: -0.02em; } .media-ad__need-chips { list-style: none; margin: 0.45rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; } .media-ad__need-chips li { padding: 0.22rem 0.55rem; border-radius: 999px; background: color-mix(in srgb, var(--media-navy) 8%, #fff); color: var(--media-navy); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .media-ad--resources .media-ad__cta:hover { background: #13283a; } .media-ad--resources .media-ad__cta--ghost:hover { background: color-mix(in srgb, #2e7d5a 12%, #fff); border-color: #2e7d5a; } @media (max-width: 960px) { .media-ad__need-chips { justify-content: flex-start; } } /* Business & Church Directories — homepage ad */ .media-ad--directory { background: radial-gradient(ellipse 80% 60% at 50% 0%, #f7f1fb 0%, transparent 55%), linear-gradient(180deg, #f3eef8 0%, #f8f4ec 58%, #ffffff 100%); } .media-ad--directory .media-ad__atmosphere { background-image: radial-gradient(circle at 18% 30%, rgba(110, 20, 35, 0.1) 0 1.2px, transparent 1.35px), radial-gradient(circle at 82% 42%, rgba(23, 37, 90, 0.1) 0 1.2px, transparent 1.35px); } .media-ad__screen--church { background: linear-gradient(165deg, rgba(255, 255, 255, 0.14), transparent 42%), linear-gradient(180deg, #7a1c2e 0%, #4d101c 100%); } .media-ad__live--church { background: rgba(255, 255, 255, 0.14); color: #f4d7a8; } .media-ad__live--church .media-ad__live-dot { background: #f0c56a; box-shadow: 0 0 0 0 rgba(240, 197, 106, 0.5); animation-name: media-ad-pulse-gold; } @keyframes media-ad-pulse-gold { 0% { box-shadow: 0 0 0 0 rgba(240, 197, 106, 0.5); } 70% { box-shadow: 0 0 0 8px rgba(240, 197, 106, 0); } 100% { box-shadow: 0 0 0 0 rgba(240, 197, 106, 0); } } .media-ad__wordmark--sm { font-size: clamp(1.35rem, 2.2vw, 1.75rem); letter-spacing: 0.14em; } .media-ad__dial--biz { background: linear-gradient(165deg, rgba(255, 255, 255, 0.6), transparent 40%), linear-gradient(180deg, #ffffff 0%, #e8eefb 100%); border-color: color-mix(in srgb, var(--media-navy) 18%, #fff); } .media-ad--directory .media-ad__cta:hover { background: #101b45; } .media-ad--directory .media-ad__cta--ghost:hover { background: color-mix(in srgb, var(--media-gold) 18%, #fff); border-color: var(--media-gold); } /* ============================================================================ TERMS OF USE PAGE + CONTEXTUAL TERMS MODAL ========================================================================== */ .terms-page { padding: calc(var(--space-10) + 4rem) 0 var(--space-10); background: linear-gradient(180deg, #f7f9fb 0%, #ffffff 28%); } .terms-page__layout { display: grid; grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); gap: var(--space-8); align-items: start; } .terms-page__aside { position: sticky; top: 5.5rem; max-height: calc(100vh - 6.5rem); overflow: auto; padding: var(--space-4); border: 1px solid rgba(15, 40, 60, 0.08); border-radius: 12px; background: #fff; } .terms-page__aside-title { margin: 0 0 var(--space-3); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(15, 40, 60, 0.55); font-weight: 700; } .terms-page__toc { margin: 0; padding: 0 0 0 1.1rem; list-style: decimal; } .terms-page__toc a { color: rgba(15, 40, 60, 0.78); text-decoration: none; font-size: 0.82rem; line-height: 1.35; display: inline-block; padding: 0.2rem 0; } .terms-page__toc a:hover { color: var(--brand, #0b3d5c); text-decoration: underline; } .terms-doc { background: #fff; border: 1px solid rgba(15, 40, 60, 0.08); border-radius: 16px; padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: 0 10px 30px rgba(15, 40, 60, 0.04); } .terms-doc__eyebrow { margin: 0 0 0.5rem; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(15, 40, 60, 0.5); font-weight: 700; } .terms-doc__header h1 { margin: 0; font-family: "Playfair Display", Georgia, serif; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; color: #0f283c; } .terms-doc__doc-title { margin: 0.35rem 0 0.75rem; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.04em; color: rgba(15, 40, 60, 0.7); } .terms-doc__updated { margin: 0 0 1.25rem; font-size: 0.88rem; color: rgba(15, 40, 60, 0.55); } .terms-doc__lead { margin: 0 0 0.85rem; } .terms-doc__header p, .terms-doc__section p { margin: 0 0 0.85rem; color: rgba(15, 40, 60, 0.88); line-height: 1.65; font-size: 1rem; } .terms-doc__section { padding-top: 1.5rem; margin-top: 1.5rem; border-top: 1px solid rgba(15, 40, 60, 0.08); scroll-margin-top: 5.5rem; } .terms-doc__section h2 { margin: 0 0 0.85rem; font-size: 1.15rem; line-height: 1.35; color: #0f283c; } .terms-doc__num { color: rgba(15, 40, 60, 0.45); font-weight: 700; } .terms-doc__error { color: #8a2b2b; } @media (max-width: 900px) { .terms-page__layout { grid-template-columns: 1fr; } .terms-page__aside { position: static; max-height: none; } } /* Contextual Terms trigger — unobtrusive */ .ic-terms-trigger-wrap { margin: 0.75rem 0 1rem; } .ic-terms-trigger { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid rgba(15, 40, 60, 0.14); background: rgba(255, 255, 255, 0.92); color: rgba(15, 40, 60, 0.78); border-radius: 999px; padding: 0.4rem 0.85rem; font-size: 0.86rem; font-weight: 600; line-height: 1.2; cursor: pointer; box-shadow: 0 1px 2px rgba(15, 40, 60, 0.04); transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .ic-terms-trigger:hover, .ic-terms-trigger:focus-visible { border-color: rgba(15, 40, 60, 0.28); color: #0f283c; background: #fff; outline: none; } .ic-terms-trigger:focus-visible { box-shadow: 0 0 0 3px rgba(11, 61, 92, 0.18); } .ic-terms-trigger__icon { font-style: normal; opacity: 0.75; } body.ic-terms-modal-open { overflow: hidden; } .ic-terms-modal[hidden] { display: none !important; } .ic-terms-modal { position: fixed; inset: 0; z-index: 12000; display: flex; align-items: center; justify-content: center; padding: 1rem; } .ic-terms-modal__veil { position: absolute; inset: 0; border: 0; background: rgba(10, 22, 34, 0.45); cursor: pointer; } .ic-terms-modal__panel { position: relative; z-index: 1; width: min(640px, 100%); max-height: min(84vh, 760px); display: flex; flex-direction: column; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(10, 22, 34, 0.28); outline: none; } .ic-terms-modal__chrome { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.2rem 0.75rem; border-bottom: 1px solid rgba(15, 40, 60, 0.08); } .ic-terms-modal__title { margin: 0; font-size: 1.15rem; line-height: 1.3; color: #0f283c; } .ic-terms-modal__x { border: 0; background: transparent; font-size: 1.6rem; line-height: 1; color: rgba(15, 40, 60, 0.55); cursor: pointer; padding: 0.1rem 0.35rem; border-radius: 8px; } .ic-terms-modal__x:hover, .ic-terms-modal__x:focus-visible { color: #0f283c; background: rgba(15, 40, 60, 0.06); outline: none; } .ic-terms-modal__body { padding: 1rem 1.2rem; overflow: auto; -webkit-overflow-scrolling: touch; } .ic-terms-modal__section + .ic-terms-modal__section { margin-top: 1.15rem; padding-top: 1.15rem; border-top: 1px solid rgba(15, 40, 60, 0.08); } .ic-terms-modal__section h3 { margin: 0 0 0.55rem; font-size: 1rem; color: #0f283c; } .ic-terms-modal__section p { margin: 0 0 0.7rem; font-size: 0.94rem; line-height: 1.6; color: rgba(15, 40, 60, 0.86); } .ic-terms-modal__footer { padding: 0.85rem 1.2rem 1.15rem; border-top: 1px solid rgba(15, 40, 60, 0.08); background: #f8fafb; border-radius: 0 0 16px 16px; } .ic-terms-modal__note { margin: 0 0 0.7rem; font-size: 0.84rem; color: rgba(15, 40, 60, 0.65); } .ic-terms-modal__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; } .ic-terms-modal__link { color: var(--brand, #0b3d5c); font-weight: 650; font-size: 0.92rem; text-decoration: underline; text-underline-offset: 2px; } .ic-terms-modal__close-btn { min-width: 6.5rem; } .rc-terms-slot, .dir-terms-slot, .page-terms-slot { margin: 0.5rem 0 1rem; } /* Reusable contextual disclaimer (Jobs & Careers first; other sections later) */ .rc-cxd-slot { margin: 0.55rem 0 0.35rem; } .ic-cxd-trigger-wrap { margin: 0.35rem 0 0.65rem; } .ic-cxd-trigger { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid rgba(15, 40, 60, 0.14); background: rgba(255, 255, 255, 0.94); color: rgba(15, 40, 60, 0.8); border-radius: 999px; padding: 0.42rem 0.9rem; font-size: 0.86rem; font-weight: 600; line-height: 1.25; cursor: pointer; box-shadow: 0 1px 2px rgba(15, 40, 60, 0.04); transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .ic-cxd-trigger:hover, .ic-cxd-trigger:focus-visible { border-color: rgba(15, 40, 60, 0.28); color: #0f283c; background: #fff; outline: none; } .ic-cxd-trigger:focus-visible { box-shadow: 0 0 0 3px rgba(11, 61, 92, 0.18); } .ic-cxd-trigger__icon { font-style: normal; opacity: 0.75; } body.ic-cxd-modal-open { overflow: hidden; } .ic-cxd-modal[hidden] { display: none !important; } .ic-cxd-modal { position: fixed; inset: 0; z-index: 12100; display: flex; align-items: center; justify-content: center; padding: 1rem; } .ic-cxd-modal__veil { position: absolute; inset: 0; border: 0; background: rgba(10, 22, 34, 0.45); cursor: pointer; } .ic-cxd-modal__panel { position: relative; z-index: 1; width: min(680px, 100%); max-height: min(86vh, 800px); display: flex; flex-direction: column; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(10, 22, 34, 0.28); outline: none; } .ic-cxd-modal__chrome { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.25rem 0.8rem; border-bottom: 1px solid rgba(15, 40, 60, 0.08); flex: 0 0 auto; } .ic-cxd-modal__title { margin: 0; font-size: clamp(1.05rem, 2.4vw, 1.2rem); line-height: 1.35; color: #0f283c; padding-right: 0.25rem; } .ic-cxd-modal__x { border: 0; background: transparent; font-size: 1.65rem; line-height: 1; color: rgba(15, 40, 60, 0.55); cursor: pointer; padding: 0.15rem 0.4rem; border-radius: 8px; flex: 0 0 auto; } .ic-cxd-modal__x:hover, .ic-cxd-modal__x:focus-visible { color: #0f283c; background: rgba(15, 40, 60, 0.06); outline: none; } .ic-cxd-modal__body { padding: 1.1rem 1.25rem 1.25rem; overflow: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; } .ic-cxd-modal__section + .ic-cxd-modal__section { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(15, 40, 60, 0.08); } .ic-cxd-modal__section h3 { margin: 0 0 0.65rem; font-size: 0.98rem; letter-spacing: 0.01em; color: #0f283c; } .ic-cxd-modal__section p { margin: 0 0 0.75rem; font-size: 0.94rem; line-height: 1.65; color: rgba(15, 40, 60, 0.86); } .ic-cxd-modal__section p:last-child { margin-bottom: 0; } .ic-cxd-modal__list { margin: 0 0 0.85rem; padding: 0 0 0 1.2rem; display: grid; gap: 0.35rem; } .ic-cxd-modal__list li { font-size: 0.94rem; line-height: 1.55; color: rgba(15, 40, 60, 0.86); } .ic-cxd-modal__report { margin-top: 0.85rem !important; } .ic-cxd-modal__report-link { color: var(--brand, #0b3d5c); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; } .ic-cxd-modal__footer { padding: 0.9rem 1.25rem 1.2rem; border-top: 1px solid rgba(15, 40, 60, 0.08); background: #f8fafb; border-radius: 0 0 16px 16px; flex: 0 0 auto; } .ic-cxd-modal__note { margin: 0 0 0.75rem; font-size: 0.86rem; line-height: 1.5; color: rgba(15, 40, 60, 0.68); } .ic-cxd-modal__links { display: grid; gap: 0.45rem; margin: 0 0 0.9rem; } .ic-cxd-modal__link { color: var(--brand, #0b3d5c); font-weight: 650; font-size: 0.94rem; text-decoration: underline; text-underline-offset: 2px; width: fit-content; } .ic-cxd-modal__link--todo { color: rgba(15, 40, 60, 0.55); text-decoration: none; border-bottom: 1px dashed rgba(15, 40, 60, 0.35); cursor: default; font-weight: 600; } .ic-cxd-modal__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.75rem; } .ic-cxd-modal__close-btn { min-width: 6.5rem; } @media (max-width: 640px) { .ic-cxd-modal { padding: 0.65rem; align-items: flex-end; } .ic-cxd-modal__panel { max-height: min(92vh, 100%); border-radius: 14px 14px 10px 10px; } .ic-cxd-modal__footer { border-radius: 0 0 10px 10px; } }