so it doesn't show up in the tab order and can't be activated. */ .programs-hero-logo { position: relative; width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%; } .programs-hero-logo img { position: relative; z-index: 2; width: 260px; height: 260px; filter: drop-shadow(0 14px 32px rgba(11,31,58,0.22)); animation: logoFloat 6.5s ease-in-out infinite; } @keyframes logoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* Rotating dashed bezel — 24s slow rotation, like a watch ring. Two rings (outer + inner) at different speeds gives a sense of mechanical depth without being busy. */ .programs-hero-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgba(201,162,79,0.55); animation: ringRotate 28s linear infinite; z-index: 1; } .programs-hero-ring--inner { inset: 18px; border: 1px solid rgba(11,31,58,0.10); border-style: dotted; animation: ringRotate 36s linear infinite reverse; } @keyframes ringRotate { to { transform: rotate(360deg); } } /* ── Staggered entry ─────────────────────────────────── */ .programs-hero-eyebrow, .programs-hero h1, .programs-hero-sub, .programs-hero-meta, .programs-hero-stage { animation-name: heroFadeUp; animation-duration: 700ms; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); animation-fill-mode: backwards; } .programs-hero-eyebrow { animation-delay: 0ms; } .programs-hero h1 { animation-delay: 90ms; } .programs-hero-sub { animation-delay: 180ms; } .programs-hero-meta { animation-delay: 360ms; } .programs-hero-stage { animation-delay: 240ms; animation-duration: 900ms; } @keyframes heroFadeUp { from { opacity: 0; transform: translateY(14px); } } /* Reduced-motion respect: kill every hero animation. The static composition still reads beautifully on its own. */ @media (prefers-reduced-motion: reduce) { .programs-hero-blob, .programs-hero-sparkle, .programs-hero-ring, .programs-hero-logo img, .programs-hero-eyebrow, .programs-hero h1, .programs-hero-sub, .programs-hero-meta, .programs-hero-stage, .programs-hero-eyebrow-dot { animation: none !important; transform: none !important; } } /* ── Mobile sizing ───────────────────────────────────── */ @media (max-width: 540px) { .programs-hero { padding: 36px 22px 36px; border-radius: 22px; margin-top: 16px; } .programs-hero-stage { width: 250px; height: 250px; } .programs-hero-logo img { width: 200px; height: 200px; } .programs-hero-eyebrow { font-size: 10.5px; letter-spacing: 0.18em; } .programs-hero-meta { font-size: 12.5px; padding: 6px 12px 6px 8px; } .programs-hero-sparkle { display: none; } /* declutter on small screens */ } /* ─── Program tile grid ──────────────────────────────── */ .programs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; } @media (max-width: 900px) { .programs-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .programs-grid { grid-template-columns: 1fr; } } .programs-tile { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: #FFFFFF; border: 1px solid var(--fpg-border); border-radius: 18px; text-decoration: none; color: inherit; transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease; position: relative; overflow: hidden; } .programs-tile::before { /* Diagonal accent ribbon at the top — picks up the program color */ content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--tile-accent, var(--prog-accent)) 0%, transparent 60%); } .programs-tile:hover { transform: translateY(-3px); border-color: var(--tile-accent, var(--prog-accent)); box-shadow: 0 12px 32px rgba(11,31,58,0.10); } .programs-tile-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--tile-accent-bg, var(--prog-accent-bg)); color: var(--tile-accent, var(--prog-accent)); margin-bottom: 6px; } .programs-tile-icon svg { width: 24px; height: 24px; } .programs-tile h3 { margin: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; font-weight: 800; color: var(--fpg-navy); letter-spacing: -0.01em; } .programs-tile-tagline { margin: 0; font-size: 14px; font-weight: 600; color: var(--tile-accent, var(--prog-accent)); } .programs-tile-desc { margin: 0; flex: 1; font-size: 13.5px; color: var(--fpg-text-mute); line-height: 1.55; } .programs-tile-cta { display: inline-flex; align-items: center; gap: 6px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 700; color: var(--tile-accent, var(--prog-accent)); margin-top: auto; } .programs-tile-cta::after { content: '→'; transition: transform 220ms ease; } .programs-tile:hover .programs-tile-cta::after { transform: translateX(3px); } /* "Coming soon" tile state — opacity + locked icon */ .programs-tile.is-disabled { pointer-events: none; opacity: 0.55; } .programs-tile.is-disabled::before { background: linear-gradient(90deg, #9CA3AF 0%, transparent 60%); } .programs-tile-soon { display: inline-block; padding: 2px 8px; background: rgba(11,31,58,0.06); border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fpg-text-mute); } /* ─── Stats strip (this-month numbers) ────────────────── */ .programs-stats { margin: 36px 0 0; padding: 16px 22px; background: #FFFFFF; border: 1px solid var(--fpg-border); border-radius: 14px; display: flex; flex-wrap: wrap; gap: 18px; align-items: baseline; font-size: 13.5px; color: var(--fpg-text-mute); } .programs-stats-label { font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #7C5E1F; } .programs-stats-num { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; font-weight: 800; color: var(--fpg-navy); font-variant-numeric: tabular-nums; } /* ════════════════════════════════════════════════════════════ PROGRAM FORM PAGES ════════════════════════════════════════════════════════════ */ .programs-form-shell { max-width: 720px; margin: 0 auto; padding: 24px 24px 80px; } .programs-form-hero { margin-top: 28px; padding: 44px 36px 36px; background: var(--prog-gradient, linear-gradient(135deg, var(--prog-accent-bg), #FFFFFF)); border: 1px solid color-mix(in srgb, var(--prog-accent) 20%, transparent); border-radius: 18px; text-align: center; } .programs-form-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--prog-accent-dark); margin: 0 0 10px; } .programs-form-hero-eyebrow-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--prog-accent); } .programs-form-hero h1 { margin: 0 0 10px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(26px, 4vw, 36px); font-weight: 800; letter-spacing: -0.018em; line-height: 1.15; color: var(--fpg-navy); } .programs-form-hero p { max-width: 540px; margin: 0 auto; color: var(--fpg-text-mid); font-size: 15.5px; line-height: 1.6; } .programs-form-card { margin-top: 22px; padding: 28px 32px 32px; background: #FFFFFF; border: 1px solid var(--fpg-border); border-radius: 18px; box-shadow: 0 4px 16px rgba(11,31,58,0.04); } /* Fieldset reset. The support style.css doesn't touch fieldsets, so the UA default (border, padding, margin, plus a `min-inline-size: -webkit-min-content` that prevents shrinking inside grid/flex) leaks through. Reset once here so we don't have to inline-style every

in the forms. `min-width: 0` is the load-bearing one — without it, a 2-col grid inside a fieldset can blow out its container on narrow screens. */ .programs-form-card fieldset { border: 0; padding: 0; margin: 0; min-width: 0; } /* Subsequent

s in a form get top spacing so each section reads as its own card. (First fieldset has no top margin since the form card itself has padding.) */ .programs-form-card fieldset.fieldset-spaced { margin-top: 24px; } /* Tighten the .form-row gap inside programs forms. The support default is 20px which feels chunky inside the rounded program card. The support stylesheet already collapses .form-row to 1 column at ≤640px — we get responsive behavior for free by NOT inline-styling grid-template-columns. margin-bottom matches our .form-group spacing (18px) so consecutive rows + single fields read at a consistent rhythm. The .form-group children inside the row don't double-up because grid lays them out with gap, not margin. */ .programs-form-card .form-row { gap: 14px; margin-bottom: 18px; } .programs-form-card .form-row .form-group { margin-bottom: 0; } /* Reuse existing form-group / form-input styles from the support stylesheet, but ensure inputs feel substantial here too. */ .programs-form-card .form-group { margin-bottom: 18px; } .programs-form-card .form-label { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 700; color: var(--fpg-navy); margin-bottom: 6px; } .programs-form-card .form-label .required { color: #B91C1C; margin-left: 2px; } .programs-form-card .form-label .optional { color: var(--fpg-text-light); font-weight: 500; font-size: 12px; margin-left: 4px; } .programs-form-card .form-input, .programs-form-card .form-select, .programs-form-card textarea.form-input { width: 100%; padding: 12px 14px; font-family: inherit; font-size: 16px; /* 16px floor — prevents iOS auto-zoom */ line-height: 1.5; color: var(--fpg-navy); background: #FFFFFF; border: 1.5px solid var(--fpg-border); border-radius: 10px; transition: border-color 160ms ease, box-shadow 160ms ease; } .programs-form-card .form-input:focus, .programs-form-card .form-select:focus, .programs-form-card textarea.form-input:focus { outline: none; border-color: var(--prog-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--prog-accent) 18%, transparent); } .programs-form-card textarea.form-input { min-height: 120px; resize: vertical; } .programs-form-card .form-hint { display: block; margin-top: 6px; font-size: 12.5px; color: var(--fpg-text-mute); line-height: 1.5; } /* Core-value chip multi-select */ .core-values-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .core-value-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: #FFFFFF; border: 1.5px solid var(--fpg-border); border-radius: 999px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 600; color: var(--fpg-text-mid); cursor: pointer; transition: all 180ms ease; } .core-value-chip input { position: absolute; opacity: 0; pointer-events: none; } .core-value-chip:hover { border-color: var(--prog-accent); } .core-value-chip:has(input:checked) { background: var(--prog-accent); border-color: var(--prog-accent); color: #FFFFFF; } .core-value-chip-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--cv-color, var(--prog-accent)); flex-shrink: 0; } .core-value-chip:has(input:checked) .core-value-chip-dot { background: #FFFFFF; } /* Checkbox-mini for opt-in fields */ .checkbox-mini { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; background: var(--prog-accent-bg); border: 1px solid color-mix(in srgb, var(--prog-accent) 30%, transparent); border-radius: 10px; font-size: 14px; color: var(--fpg-text-mid); cursor: pointer; } .checkbox-mini input { margin: 3px 0 0; flex-shrink: 0; width: 18px; height: 18px; } /* Submit button */ .programs-submit-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px 28px; background: var(--prog-accent); color: #FFFFFF; border: 0; border-radius: 12px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15.5px; font-weight: 800; letter-spacing: 0.01em; cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease; box-shadow: 0 6px 18px color-mix(in srgb, var(--prog-accent) 35%, transparent); } .programs-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px color-mix(in srgb, var(--prog-accent) 45%, transparent); } .programs-submit-btn:disabled { opacity: 0.6; cursor: progress; transform: none; } .programs-submit-foot { margin-top: 14px; font-size: 12.5px; color: var(--fpg-text-mute); text-align: center; } /* Rules block (used on Wellness, Tuition forms) */ .programs-rules { margin: 0 0 22px; padding: 14px 18px; background: var(--prog-accent-bg); border-left: 3px solid var(--prog-accent); border-radius: 8px; font-size: 13.5px; color: var(--prog-accent-dark); } .programs-rules ul { margin: 6px 0 0; padding-left: 22px; } .programs-rules li { margin-bottom: 3px; } /* ════════════════════════════════════════════════════════════ THANK-YOU + STATUS PAGES ════════════════════════════════════════════════════════════ */ .programs-thanks-card { margin-top: 40px; padding: 56px 40px 48px; background: #FFFFFF; border: 1px solid var(--fpg-border); border-radius: 22px; box-shadow: 0 8px 28px rgba(11,31,58,0.06); text-align: center; } .programs-thanks-icon { display: inline-flex; align-items: center; justify-content: center; width: 78px; height: 78px; border-radius: 50%; background: var(--prog-accent-bg); color: var(--prog-accent); margin-bottom: 18px; animation: thanksPop 700ms cubic-bezier(0.18, 0.89, 0.32, 1.28) backwards; } .programs-thanks-icon svg { width: 38px; height: 38px; } @keyframes thanksPop { from { transform: scale(0.6); opacity: 0; } } .programs-thanks-card h1 { margin: 0 0 10px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(26px, 4vw, 34px); font-weight: 800; color: var(--fpg-navy); letter-spacing: -0.015em; } .programs-thanks-card p { max-width: 480px; margin: 0 auto 18px; color: var(--fpg-text-mid); font-size: 15.5px; line-height: 1.6; } .programs-thanks-number { display: inline-flex; align-items: center; gap: 14px; padding: 12px 20px; background: var(--prog-accent-bg, var(--fpg-cream)); border: 1.5px dashed var(--prog-accent, var(--fpg-gold)); border-radius: 10px; font-family: inherit; color: var(--fpg-navy); margin: 6px 0 8px; cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; } .programs-thanks-number:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(11,31,58,0.08); border-style: solid; } .programs-thanks-number:focus-visible { outline: 2px solid var(--prog-accent); outline-offset: 3px; } .programs-thanks-number-label { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--prog-accent-dark, var(--fpg-text-light)); padding: 3px 9px; background: rgba(255,255,255,0.7); border-radius: 999px; white-space: nowrap; } /* The number + copy icon read as a single unit ("REF: SHO-XX 📋"), so we wrap them in inline-flex with a tighter 8px gap and let the 12px outer gap separate them from the label pill. */ .programs-thanks-number-body { display: inline-flex; align-items: center; gap: 8px; } .programs-thanks-number strong { font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 18px; font-weight: 700; letter-spacing: 0.08em; line-height: 1; } .programs-thanks-number-icon { width: 16px; height: 16px; color: var(--prog-accent-dark, var(--fpg-text-light)); opacity: 0.65; transition: opacity 160ms ease; } .programs-thanks-number:hover .programs-thanks-number-icon { opacity: 1; } .programs-thanks-number.is-copied { animation: thanksPop 350ms ease backwards; border-color: #16A34A; background: #ECFDF5; } .programs-thanks-number.is-copied .programs-thanks-number-icon { opacity: 0.3; } .programs-thanks-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .programs-thanks-link { display: inline-flex; align-items: center; padding: 10px 20px; background: #FFFFFF; color: var(--fpg-navy); border: 1.5px solid var(--fpg-border); border-radius: 999px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 700; text-decoration: none; transition: border-color 160ms ease, transform 160ms ease; } .programs-thanks-link:hover { border-color: var(--fpg-gold); transform: translateY(-1px); } .programs-thanks-link--primary { background: var(--fpg-navy); color: #FFFFFF; border-color: var(--fpg-navy); } .programs-thanks-link--primary:hover { background: var(--fpg-navy-mid); } /* ════════════════════════════════════════════════════════════ FIELD ERRORS + FORM SECTION HEADINGS ════════════════════════════════════════════════════════════ */ .field-error { display: block; margin-top: 6px; color: #B91C1C; font-size: 12.5px; font-weight: 600; min-height: 1em; } .form-error-banner, .programs-form-error { display: flex; flex-direction: column; gap: 4px; margin: 0 0 18px; padding: 14px 18px 14px 16px; background: #FEF2F2; border: 1px solid #FECACA; border-left: 4px solid #DC2626; /* accent stripe */ border-radius: 10px; color: #991B1B; font-size: 14px; line-height: 1.5; } .programs-form-error strong { font-weight: 700; font-size: 14px; } .programs-form-error span { color: #B91C1C; } /* Section headings inside a form. Same visual weight as a label but slightly larger + carrying the program accent so each section reads as its own block in a long form. */ .form-legend { display: block; font-family: 'Plus Jakarta Sans', -apple-system, sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--prog-accent-dark, #0B1F3A); margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1.5px dashed var(--fpg-border, #E5E9F0); } /* ════════════════════════════════════════════════════════════ PHASE 2: shared form components Stage toggle, anon badge, amount-with-calc, photo zone, rules, and segmented controls. Used across wellness / feedback / eom / volunteer / tuition forms. ════════════════════════════════════════════════════════════ */ /* ── Stage / segmented toggle ────────────────────────── Used by tuition.php (pre-approval vs completion) and any future form that needs a 2-3 way toggle. */ .programs-stage-toggle { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; padding: 6px; background: var(--prog-accent-bg); border: 1.5px solid var(--prog-accent); border-radius: 14px; margin-bottom: 22px; } @media (max-width: 540px) { /* Stack vertically on narrow screens — the two-line option labels cramped together at 50% width on a 320px iPhone. */ .programs-stage-toggle { grid-template-columns: 1fr; } } .programs-stage-option { position: relative; } .programs-stage-option input { position: absolute; opacity: 0; pointer-events: none; } .programs-stage-option label { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; background: transparent; border-radius: 10px; cursor: pointer; text-align: left; transition: background 160ms ease, color 160ms ease; } .programs-stage-option label strong { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 700; color: var(--prog-accent-dark); letter-spacing: -0.01em; } .programs-stage-option label span { font-size: 12.5px; color: var(--fpg-text-mid); line-height: 1.4; } .programs-stage-option input:checked + label { background: #FFFFFF; box-shadow: 0 2px 8px rgba(11,31,58,0.10); } .programs-stage-option input:checked + label strong { color: var(--prog-accent); } /* ── Anonymous mode badge (Feedback) ─────────────────── */ .programs-anon-badge { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; margin: 0 0 22px; background: linear-gradient(135deg, #13304F 0%, #0B1F3A 100%); color: #FFFFFF; border-radius: 14px; border: 1px solid rgba(201,162,79,0.35); position: relative; overflow: hidden; } .programs-anon-badge::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 0% 100%, rgba(201,162,79,0.16), transparent 55%); pointer-events: none; } .programs-anon-badge svg { flex-shrink: 0; width: 30px; height: 30px; color: #C9A24F; margin-top: 2px; } .programs-anon-badge strong { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15.5px; font-weight: 700; letter-spacing: -0.005em; margin-bottom: 4px; } .programs-anon-badge span { display: block; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,0.84); } .programs-anon-badge ul { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; } .programs-anon-badge li { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: rgba(255,255,255,0.78); padding-left: 16px; position: relative; } .programs-anon-badge li::before { content: '✓'; color: #C9A24F; position: absolute; left: 0; top: 0; font-weight: 800; } /* ── Amount input with live reimbursement calc ───────── */ .programs-amount-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; margin-bottom: 18px; } @media (max-width: 540px) { .programs-amount-grid { grid-template-columns: 1fr; } } /* The amount input is a real flex wrapper with a "$" prefix as a sibling span — NOT a ::before pseudo-element. Earlier the pseudo approach depended on the wrapper having `position: relative` AND a measurable height; in the wellness layout the wrapper sits inside a flex .form-group whose vertical-flow + gap pushed the pseudo-element below the input on some browsers. The flex-wrapper pattern is what every modern form library (Stripe, Shopify, Linear, Tailwind UI) uses because it has zero positional ambiguity. */ .programs-amount-input { display: flex; align-items: stretch; background: #FFFFFF; border: 1.5px solid var(--fpg-border); border-radius: 10px; overflow: hidden; transition: border-color 160ms ease, box-shadow 160ms ease; } .programs-amount-input:focus-within { border-color: var(--prog-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--prog-accent) 18%, transparent); } .programs-amount-input-prefix { display: flex; align-items: center; justify-content: center; padding: 0 16px; background: var(--prog-accent-bg); color: var(--prog-accent-dark); font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 17px; font-weight: 800; border-right: 1px solid var(--fpg-border); user-select: none; } .programs-amount-input input, .programs-amount-input .form-input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; padding: 12px 14px !important; font-family: 'SF Mono', Menlo, Consolas, monospace !important; font-size: 18px !important; font-weight: 600 !important; color: var(--fpg-navy); border-radius: 0 !important; } .programs-amount-input input:focus, .programs-amount-input .form-input:focus { outline: none !important; box-shadow: none !important; } .programs-amount-calc { display: flex; flex-direction: column; justify-content: center; padding: 14px 18px; background: var(--prog-accent-bg); border: 1.5px solid var(--prog-accent); border-radius: 12px; text-align: right; min-height: 56px; } @media (max-width: 540px) { /* When the grid stacks, right-aligning a full-width tile under a left-aligned input looks lopsided. Center it so the calc reads as its own card below the input. */ .programs-amount-calc { text-align: center; } } .programs-amount-calc-label { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--prog-accent-dark); opacity: 0.8; } .programs-amount-calc-num { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 22px; font-weight: 800; color: var(--prog-accent); letter-spacing: -0.02em; margin-top: 2px; } .programs-amount-calc-foot { font-size: 11.5px; color: var(--fpg-text-mid); margin-top: 2px; } .programs-amount-calc.is-capped .programs-amount-calc-num { color: var(--prog-accent-dark); } .programs-amount-calc.is-capped .programs-amount-calc-foot::before { content: '⚠'; margin-right: 4px; color: #B45309; } /* ── Photo / file drop zone (program-themed) ─────────── */ .programs-photos-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 28px 20px; background: var(--prog-accent-bg); border: 2px dashed var(--prog-accent); border-radius: 14px; cursor: pointer; transition: background 160ms ease, border-color 160ms ease; text-align: center; } .programs-photos-zone:hover { background: #FFFFFF; } .programs-photos-zone.is-drag { background: #FFFFFF; border-style: solid; box-shadow: 0 0 0 4px var(--prog-accent-bg); } .programs-photos-zone input { display: none; } .programs-photos-zone-icon { width: 44px; height: 44px; border-radius: 50%; background: #FFFFFF; color: var(--prog-accent); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(11,31,58,0.08); } .programs-photos-zone-icon svg { width: 22px; height: 22px; } .programs-photos-zone-text { font-size: 14.5px; font-weight: 600; color: var(--prog-accent-dark); } .programs-photos-zone-text small { display: block; font-size: 12.5px; font-weight: 500; color: var(--fpg-text-mid); margin-top: 2px; } .programs-photos-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .programs-photos-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; background: #FFFFFF; border: 1px solid var(--fpg-border); border-radius: 999px; font-size: 13px; color: var(--fpg-navy); max-width: 100%; } .programs-photos-pill-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--prog-accent); } .programs-photos-pill-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; } .programs-photos-pill-size { color: var(--fpg-text-light); font-size: 12px; } .programs-photos-pill button { border: 0; background: transparent; padding: 2px 4px; color: var(--fpg-text-light); font-size: 16px; line-height: 1; cursor: pointer; border-radius: 50%; transition: color 140ms ease, background 140ms ease; } .programs-photos-pill button:hover { color: #B91C1C; background: #FEF2F2; } /* ── Card-style rules block (replaces the older .programs-rules) ── */ .programs-rules-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; margin: 0 0 22px; background: var(--prog-accent-bg); border: 1px solid var(--prog-accent); border-radius: 12px; } .programs-rules-card-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--prog-accent); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; } .programs-rules-card h4 { margin: 0 0 6px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13.5px; font-weight: 800; letter-spacing: -0.005em; color: var(--prog-accent-dark); } .programs-rules-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; line-height: 1.5; color: var(--fpg-text-mid); } .programs-rules-card li::before { content: '·'; display: inline-block; margin-right: 6px; color: var(--prog-accent); font-weight: 800; } /* ── Topic chip group (Feedback) ─────────────────────── */ .programs-topic-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 14px; } @media (max-width: 540px) { /* On narrow phones, force a clean 2-up layout instead of letting auto-fill drop to 1 wide column or 2 cramped ones depending on the device's exact width. 9 topics → 5 rows of 2 reads cleanly. */ .programs-topic-chips { grid-template-columns: 1fr 1fr; } } .programs-topic-chip { cursor: pointer; position: relative; padding: 12px 14px; background: #FFFFFF; border: 1.5px solid var(--fpg-border); border-radius: 12px; font-size: 13.5px; font-weight: 600; color: var(--fpg-navy); text-align: center; transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; } .programs-topic-chip:hover { border-color: var(--prog-accent); transform: translateY(-1px); } .programs-topic-chip input { position: absolute; opacity: 0; pointer-events: none; } .programs-topic-chip:has(input:checked) { background: var(--prog-accent-bg); border-color: var(--prog-accent); box-shadow: 0 0 0 3px rgba(11,31,58,0.06); } /* ── Severity radio segmented control ────────────────── */ .programs-severity { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; } .programs-severity label { /* min-height keeps single-line and two-line versions visually aligned — "Just so you know" wraps on narrow phones, the others don't, and an even row reads better. */ display: flex; align-items: center; justify-content: center; min-height: 52px; position: relative; padding: 10px 12px; background: #FFFFFF; border: 1.5px solid var(--fpg-border); border-radius: 10px; font-size: 13px; font-weight: 600; text-align: center; cursor: pointer; line-height: 1.3; transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; } .programs-severity label:hover { border-color: var(--prog-accent); transform: translateY(-1px); } .programs-severity input { position: absolute; opacity: 0; pointer-events: none; } .programs-severity .programs-sev-low { color: #6B7280; } .programs-severity .programs-sev-normal { color: #1D4ED8; } .programs-severity .programs-sev-urgent { color: #B91C1C; } .programs-severity label:has(input:checked) { background: var(--prog-accent-bg); border-color: var(--prog-accent); box-shadow: 0 0 0 3px rgba(11,31,58,0.06); } .programs-severity label:has(input:checked) .programs-sev-low, .programs-severity label:has(input:checked) .programs-sev-normal, .programs-severity label:has(input:checked) .programs-sev-urgent { filter: brightness(0.9); } /* Keyboard focus ring — `:has(input:focus-visible)` lets the wrapper label glow when the hidden radio receives focus via Tab. */ .programs-severity label:has(input:focus-visible), .core-value-chip:has(input:focus-visible), .programs-topic-chip:has(input:focus-visible), .programs-stage-option label:has(input:focus-visible) { outline: 2px solid var(--prog-accent); outline-offset: 2px; } /* ── Form sub-hint (live status under fields) ────────── */ .programs-live-hint { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--fpg-text-mid); } .programs-live-hint strong { color: var(--prog-accent-dark); } /* ════════════════════════════════════════════════════════════ MOBILE / iOS POLISH (mirrors mobile rules from /support/assets/css/style.css) ════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .form-input, .form-select, textarea.form-input { font-size: 16px !important; } } @media (hover: none) and (pointer: coarse) { .programs-submit-btn, .programs-thanks-link, .core-value-chip { min-height: 44px; } } @media (max-width: 540px) { .programs-form-hero { padding: 36px 24px 28px; } .programs-form-card { padding: 22px 20px 24px; } /* .programs-hero + .programs-hero-logo img mobile sizing now lives in the hub-hero block at the top of this file (the new 2-column hero needs different paddings + a smaller stage). */ } a, button, [role="button"], input, label, summary { -webkit-tap-highlight-color: transparent; } /* Hide the native disclosure triangle on

. `list-style: none` covers Firefox/Chrome; the WebKit pseudo covers Safari (which shows a triangle even when list-style is unset). */ .programs-form-card details > summary { list-style: none; } .programs-form-card details > summary::-webkit-details-marker { display: none; } .programs-form-card details > summary::marker { display: none; } /* When the user starts typing into an .form-input that's been flagged :user-invalid by HTML5 validation, give them a soft red ring instead of the browser's default ugly. Only kicks in AFTER the user has interacted with the field, so empty required fields don't pre-redden. */ .programs-form-card .form-input:user-invalid, .programs-form-card .form-select:user-invalid, .programs-form-card textarea.form-input:user-invalid { border-color: #FCA5A5; box-shadow: 0 0 0 3px rgba(220,38,38,0.10); } /* ════════════════════════════════════════════════════════════ EMBED MODE — compact rendering for the slide-out drawer. Activated by ?embed=1 on shoutout.php + thank-you.php. The parent drawer is rendered by embed/v1/shoutout-button.js on the host page; this CSS makes the iframe contents fit a 420px-wide column gracefully. ════════════════════════════════════════════════════════════ */ .programs-body--embed { background: #FFFFFF; min-height: auto; } .programs-body--embed .programs-shell { max-width: none; margin: 0; padding: 18px 22px 28px; } .programs-form-shell--embed { padding-top: 6px; } .programs-embed-head { margin: 0 0 18px; } .programs-embed-head h1 { font-family: 'Plus Jakarta Sans', -apple-system, sans-serif; font-size: 22px; font-weight: 800; color: #0B1F3A; margin: 0 0 4px; line-height: 1.2; } .programs-embed-head p { margin: 0; font-size: 13.5px; color: #6B7280; line-height: 1.55; } .programs-form-card--embed { /* Drop the card chrome inside the drawer — the drawer itself is already a card. Doubled padding + border looked boxy at 420px. */ background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; } .programs-form-card--embed .form-legend { font-size: 11.5px; letter-spacing: 0.08em; } .programs-form-card--embed .form-row { grid-template-columns: 1fr; gap: 14px; } @media (min-width: 480px) { .programs-form-card--embed .form-row { grid-template-columns: 1fr 1fr; } } .programs-form-card--embed fieldset { margin-bottom: 14px; padding: 0; border: 0; } .programs-form-card--embed .form-group { margin-bottom: 14px; } .programs-form-card--embed .programs-submit-btn { width: 100%; padding: 14px 18px; font-size: 15px; } .programs-form-card--embed .programs-submit-foot { font-size: 12px; margin-top: 12px; } /* Thank-you inside the drawer */ .programs-body--embed .programs-thanks-card { padding: 28px 22px 32px; margin: 0; box-shadow: none; border: 0; } .programs-body--embed .programs-thanks-icon svg { width: 56px; height: 56px; } .programs-body--embed .programs-thanks-card h1 { font-size: 24px; margin: 16px 0 8px; } .programs-body--embed .programs-thanks-card p { font-size: 14px; line-height: 1.55; } .programs-body--embed .programs-thanks-actions { margin-top: 22px; justify-content: center; } .programs-body--embed .programs-thanks-actions .programs-thanks-link { font: inherit; cursor: pointer; border: 0; }