/***********************/ /*** INTERFACE BASE STYLES ***/ /* Base styles for all public interface microsites */ /* Team-specific CSS overrides these variables */ :root { --color-body: #27282A; --color-primary: #00A1BE; --color-secondary: #646464; --color-tertiary: #FF4A11; --color-rfv: #FF4A11; --color-icons: #FF4A11; --color-links: #00A1BE; --color-links-hover: #0789A0; --font-primary: muli, sans-serif; --font-secondary: gotham, sans-serif; --font-headings: gotham, sans-serif; --font-subheadings: muli, sans-serif; --font-controls: normal 1em muli, sans-serif; --color-buttons: #00A1BE; --color-buttons-hover: #0789A0; --color-buttons-text: #FFFFFF; --color-buttons-text-hover: #FFFFFF; --font-buttons: muli, sans-serif; --shadow: 0 2px 12px 0 rgba(40,40,40,.09); } /* Layout */ .interface-layout {font-family: var(--font-primary); color: var(--color-body); min-height: 100vh; background-color: #F7F7F7} /* Header — fixed header, body-scrolling main (no overflow:auto so dropdowns aren't clipped) */ @media (max-width: 576px) { .interface-header {position: fixed; top: 0; left: 0; right: 0; height: 7em; background-color: #FFF; border: 0; box-shadow: none; display: flex; align-items: center; justify-content: center; padding: .5em; z-index: 7000} .interface-main {padding-top: 7em; width: 100%} .interface-main .container {width: 100% !important; max-width: 100% !important; padding: 2em !important; border: none !important; box-shadow: none; margin: 0 !important} } @media (min-width: 576.1px) and (max-width: 992px) { .interface-header {position: fixed; top: .1em; left: 1em; right: 1em; height: 12em; padding: .5em; background-color: #FFF; border: 1px solid #DEE2E6; border-radius: 0.375rem; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; z-index: 7000} .interface-header img {max-height: 9em !important; max-width: 100% !important; object-fit: contain !important; width: auto !important; height: auto !important} .interface-main {padding-top: 13em; padding-left: .25em; padding-right: .25em} .interface-main .container {width: 100% !important; max-width: 100% !important; border: 1px solid #DEE2E6; border-radius: 0.375rem; box-shadow: var(--shadow); padding: 2em; background-color: #FFF; margin: 0 !important} } @media (min-width: 992.1px) { .interface-header {position: fixed; top: .1em; left: 1em; right: 1em; height: 12em; padding: .5em; background-color: #FFF; border: 1px solid #DEE2E6; border-radius: 0.375rem; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; z-index: 7000} .interface-header img {max-height: 9em !important; max-width: 80% !important; object-fit: contain !important; width: auto !important; height: auto !important} .interface-main {padding-top: 13.5em; margin: .5em} .interface-main .container {border: 1px solid #DEE2E6; border-radius: 0.375rem; box-shadow: var(--shadow); padding: 2em; background-color: #FFF} } /* Logo sizing — header is 12em tall, so logo gets up to 9em of vertical room with ~1.5em padding above + below (1em CSS padding + .5em header padding) so it never touches the border. max-width and object-fit:contain protect against banner-style logos that are much wider than tall: they scale down to fit instead of overflowing. */ .interface-logo {padding: 1em; max-height: 9em; max-width: 80%; object-fit: contain; width: auto; height: auto} /* Typography */ h1 {font-family: var(--font-headings); font-size: 150%} h2 {font-family: var(--font-headings); font-size: 120%} a {font-family: var(--font-buttons); color: var(--color-links); text-decoration: none} a:hover {color: var(--color-links-hover); text-decoration: none} /* Form Controls */ .interface-layout .form-control {font-family: var(--font-primary) !important; font-weight: 700 !important; font-size: 1rem !important; color: #464646 !important} .interface-layout .form-control::placeholder {font-weight: 400 !important; color: #999 !important} /* All form-control elements share the same visible height - inputs, selects, date pickers, custom selects */ .interface-layout input.form-control, .interface-layout select.form-control {height: 48px !important; min-height: 48px !important} .interface-layout textarea.form-control {min-height: 48px !important} .interface-layout input.form-control:focus, .interface-layout select.form-control:focus, .interface-layout textarea.form-control:focus {box-shadow: none !important; border-color: #ccc !important} .interface-layout .form-title {font-size: 1.05rem; margin-bottom: .35rem} .interface-layout .ptb-input {height: 48px !important; min-height: 48px !important; font-size: 1rem !important} /* Custom Dropdown (interfaces only - grays only, no primary blue anywhere) */ .interface-layout .interface-select {position: relative; width: 100%} .interface-layout .interface-select-btn {display: flex; align-items: center; justify-content: space-between; width: 100%; height: 48px; padding: 0 .75rem; background: #FFF; border: 1px solid #ced4da; border-radius: .375rem; font-family: var(--font-primary); font-size: 1rem; font-weight: 700; color: #464646; cursor: pointer; text-align: left} .interface-layout .interface-select-btn:hover {border-color: #adb5bd} .interface-layout .interface-select-btn:focus {outline: none; border-color: #adb5bd; box-shadow: none} .interface-layout .interface-select-btn:disabled {background: #e9ecef; cursor: not-allowed} .interface-layout .interface-select-btn:disabled:hover {border-color: #ced4da} .interface-layout .interface-select-btn .interface-select-placeholder {color: #999; font-weight: 400; background: transparent; opacity: 1} .interface-layout .interface-select-btn i {color: #999; font-size: .8rem; margin-left: .5rem} .interface-layout .interface-select-panel {position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #FFF; border: 1px solid #ced4da; border-radius: .375rem; box-shadow: 0 4px 12px rgba(0,0,0,.12); max-height: 300px; overflow-y: auto; z-index: 9000; padding: .25rem 0; list-style: none; margin: 0} .interface-layout .interface-select-option {padding: .6rem .75rem; cursor: pointer; color: #464646; font-size: 1rem; font-weight: 700; background: #FFF} .interface-layout .interface-select-option:hover {background: #F1F1F1} .interface-layout .interface-select-option.selected {background: #646464; color: #FFFFFF} .interface-layout .interface-select-option.kbd-active {background: #646464; color: #FFF} .interface-layout .interface-select-backdrop {position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 8999; background: transparent} /* ========================================================================== FGC BAKE-REQUEST WIZARD — public-interface styling. The shared is styled with cp-* classes that live in customer-portal.css (scoped to .customer-portal-layout), so under the public InterfaceLayout the wizard rendered unstyled (broken cards, naked buttons). These rules restore the original FGC public-form look (pink cake-cards, FGC buttons, review card) scoped to .interface-layout so the portal is untouched. Added 2026-06-27 (Adam) after Christine caught the unstyled public form. ========================================================================== */ /* Dropdown option list must never be centered (it was inheriting text-align from a .text-center wrapper — Christine 2026-06-27). */ .interface-layout .interface-select-panel, .interface-layout .interface-select-option {text-align: left} /* The unselected gender/age pills (btn-special) must look distinct from the coral selected pill (btn-primary). app.css forces EVERY .btn coral with !important AND high specificity (~0,10,0): ":not(.notification-window-footer) > .btn:not(...)". To win we out-specify it with harmless :not() guards (each adds specificity but matches everything), giving unselected pills the original FGC selector-btn outline look (white bg, pink border, dark text). Selected pills (btn-primary) and the wizard Back/Cancel buttons stay coral — app.css already colors those. */ .interface-layout .bake-wizard .flex-wrap .btn {border-radius: 50px !important; padding: .4rem 1rem !important} .interface-layout .bake-wizard .flex-wrap .btn-special:not(._g1):not(._g2):not(._g3):not(._g4):not(._g5):not(._g6):not(._g7):not(._g8):not(._g9) {background-color: #FFF !important; border-color: var(--color-buttons-hover, #F5D6D5) !important; color: #333 !important} .interface-layout .bake-wizard .flex-wrap .btn-special:not(._g1):not(._g2):not(._g3):not(._g4):not(._g5):not(._g6):not(._g7):not(._g8):not(._g9):hover {background-color: #FFF !important; border-color: var(--color-buttons, #EE7779) !important; color: var(--color-buttons, #EE7779) !important} /* Choice cards (celebration / individual-vs-group / bake-type) — the original FGC pink "cake-card" look: big coral text labels, NO icons. */ .interface-layout .cp-choice-row {display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; margin: 1.5rem 0} .interface-layout .cp-choice-card {display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 340px; max-width: 100%; min-height: 220px; background: #F5D6D5; border-radius: 2rem; padding: 2em 1.5em; border: 0; cursor: pointer; text-decoration: none !important; color: #EE7771; font-weight: 700; font-size: 2.25rem; line-height: 1.1; transition: box-shadow 120ms ease} .interface-layout .cp-choice-card:hover {box-shadow: 0 0 0 3px #EE7771 inset; color: #EE7771} /* The original FGC form has NO Font Awesome icons on the choice cards. */ .interface-layout .cp-choice-card i {display: none} .interface-layout .cp-choice-card img {margin-bottom: .5rem} /* Subtitle line under the big label stays small (matches the WebForms form-text). */ .interface-layout .cp-choice-card span {display: block; font-size: 1rem; font-weight: 400; margin-top: .6rem; line-height: 1.35} /* Image celebration cards get the big lowercase label like the original. */ .interface-layout .cp-choice-card:has(img) {font-size: 3rem; text-transform: lowercase} /* Wizard nav button row (Back / Next). */ .interface-layout .cp-wizard-nav {display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem} /* Review card. */ .interface-layout .cp-card {border: 1px solid #e2e2e2; border-radius: .5rem; box-shadow: var(--shadow, 0 2px 12px 0 rgba(40,40,40,.09)); overflow: hidden; background: #fff} .interface-layout .cp-card-body {padding: 1rem} .interface-layout .cp-mini-label {font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #888; margin-bottom: .1rem; font-weight: 700} /* Checkboxes in the bake wizard render as coral toggle sliders — Christine's standard (no plain browser checkboxes); the original FGC form used .switch/.slider. */ .interface-layout .bake-wizard input.form-check-input[type=checkbox] {appearance: none; -webkit-appearance: none; position: relative; width: 2.6rem; height: 1.5rem; min-width: 2.6rem; border-radius: 1rem; background: #ccc; border: none; cursor: pointer; transition: background .2s; flex-shrink: 0; margin: 0; vertical-align: middle} .interface-layout .bake-wizard input.form-check-input[type=checkbox]::after {content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.5rem - 4px); height: calc(1.5rem - 4px); background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .2s} .interface-layout .bake-wizard input.form-check-input[type=checkbox]:checked {background: var(--color-primary, #EE7779)} .interface-layout .bake-wizard input.form-check-input[type=checkbox]:checked::after {transform: translateX(1.1rem)} .interface-layout .bake-wizard input.form-check-input[type=checkbox]:focus {outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #EE7779) 20%, transparent)} /* Every step header and subheader is CENTERED in the original FGC form (Christine 2026-06-27); several rebuilt form steps had drifted to left-aligned. */ .interface-layout .bake-wizard h1, .interface-layout .bake-wizard h3, .interface-layout .bake-wizard h4, .interface-layout .bake-wizard p, .interface-layout .bake-wizard .text-muted {text-align: center} /* Buttons */ .interface-layout .btn-primary {background: var(--color-buttons); color: var(--color-buttons-text); font-family: var(--font-buttons); outline: none; box-shadow: none; border: none} .interface-layout .btn-primary:hover {background: var(--color-buttons-hover); color: var(--color-buttons-text-hover)} .interface-layout .btn-primary:focus, .interface-layout .btn-primary:active {background: var(--color-buttons-hover); color: var(--color-buttons-text-hover); box-shadow: none; outline: none} /* Language toggle (public interface i18n switch) — prominent segmented control so the English/Español switch is obvious; both options read in the brand color (clearly clickable), active option is brand-color filled. */ .interface-layout .lang-toggle-row {display: flex; justify-content: flex-end; margin-bottom: 1.25rem} .interface-layout .lang-toggle {display: inline-flex; align-items: center; gap: .25rem; background: #FFF; border: 2px solid var(--color-buttons); border-radius: 2rem; padding: .3rem .4rem; box-shadow: 0 .125rem .35rem rgba(0,0,0,.08)} .interface-layout .lang-toggle-icon {color: var(--color-buttons); font-size: 1rem; margin: 0 .35rem 0 .45rem} .interface-layout .lang-opt {border: none; background: transparent; color: var(--color-buttons); font-family: var(--font-buttons); font-weight: 700; font-size: .95rem; line-height: 1; padding: .5rem 1.15rem; border-radius: 2rem; cursor: pointer; transition: all .2s} .interface-layout .lang-opt:hover {background: rgba(0,0,0,.05)} .interface-layout .lang-opt.active {background: var(--color-buttons); color: var(--color-buttons-text)} .interface-layout .lang-opt.active:hover {background: var(--color-buttons); color: var(--color-buttons-text)} /* Utility */ .interface-layout .form-title {font-family: var(--font-primary); font-size: 1.0rem; font-weight: bold} .interface-layout .form-field {font-family: var(--font-primary); font-weight: bold; margin-bottom: 1.25rem} .interface-layout .rfv {font-size: .5rem; margin-right: .25rem; vertical-align: text-top; margin-bottom: .25rem; padding-top: .30rem; color: var(--color-rfv)} .interface-layout .border-card {display: block; border: 1px solid #DEE2E6; border-radius: 0.375rem; box-shadow: var(--shadow); padding: 1rem; background-color: #FFF; overflow: visible} .interface-layout .error {color: #CC3333 !important; font-weight: bold} /* Session Cards */ .session-list {margin-top: 1rem} .date-group-header {font-family: var(--font-headings); font-size: 1.1rem; font-weight: 700; color: var(--color-primary); padding: .75rem 0 .25rem; border-bottom: 1px solid #eee; margin-bottom: .5rem; margin-top: 1rem} .date-group-header:first-child {margin-top: 0} .session-card {display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border: 2px solid #DEE2E6; border-radius: .5rem; margin-bottom: .5rem; cursor: pointer; transition: all .2s; background: #FFF} .session-card:hover {border-color: var(--color-buttons); background: rgba(0,0,0,.02)} .session-card.selected {border-color: var(--color-buttons); background: var(--color-buttons); color: #FFF} .session-card.selected .session-time {color: #FFF} .session-card.selected .session-name {color: rgba(255,255,255,.85)} .session-card.selected .session-location {color: rgba(255,255,255,.7)} .session-time {font-family: var(--font-primary); font-weight: 700; font-size: 1.05rem} .session-name {font-size: .9rem; color: #666; margin-top: .15rem} .session-location {font-size: .8rem; color: #999; margin-top: .15rem} .session-check {display: none; font-size: 1.5rem} .session-card.selected .session-check {display: block; color: #FFF} /* Selected Session Summary (Step 2) */ .selected-session-summary {display: flex; align-items: center; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid #f0f0f0} .selected-session-summary:last-child {border-bottom: none} .session-name-small {font-size: .85rem; color: #999; margin-left: .5rem} /* Confirmed Session (Step 3) */ .confirmed-session {display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid #f0f0f0} .confirmed-session:last-child {border-bottom: none} .confirmed-session i {font-size: 1.25rem; margin-top: .15rem} /* Wizard Progress Bar (matches WebForms .wizard-nav) */ .interface-layout .wizard-steps {display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; position: relative} .interface-layout .wizard-step {display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; flex: 1} .interface-layout .wizard-step-circle {width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .9rem; font-weight: 700; color: #FFF; background: #CCC; transition: background .3s} .interface-layout .wizard-step.active .wizard-step-circle {background: var(--color-buttons)} .interface-layout .wizard-step.completed .wizard-step-circle {background: var(--color-buttons)} .interface-layout .wizard-step-label {margin-top: .35rem; font-size: .75rem; color: #CCC; font-weight: 600; transition: color .3s; text-align: center} .interface-layout .wizard-step.active .wizard-step-label {color: var(--color-buttons); font-weight: 700} .interface-layout .wizard-step.completed .wizard-step-label {color: var(--color-buttons)} .interface-layout .wizard-line {position: absolute; top: 18px; left: 0; right: 0; height: 3px; background: #CCC; z-index: 0} .interface-layout .wizard-line-fill {height: 3px; background: var(--color-buttons); transition: width .4s} /* Inline checkbox grids (Volunteer Interest Form: areas of interest, skills) - 2 columns desktop, 1 on mobile */ .interface-layout .check-grid {display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .75rem} @media (max-width: 640px) {.interface-layout .check-grid {grid-template-columns: 1fr}} .interface-layout .check-grid label {display: flex; align-items: center; gap: .5rem; font-size: .95rem; cursor: pointer; margin: 0} .interface-layout .check-grid input[type="checkbox"] {accent-color: var(--color-primary); width: 18px; height: 18px; flex-shrink: 0} /* Checkbox groups (Accessibility, Communication, Sensory) */ .interface-layout .check-group {display: flex; flex-wrap: wrap; gap: .5rem .75rem} .interface-layout .check-group label {display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .75rem; border: 1px solid #DEE2E6; border-radius: .375rem; background: #FFF; cursor: pointer; font-weight: 600; font-size: .9rem; color: #464646; margin-bottom: 0} .interface-layout .check-group label:hover {border-color: #adb5bd; background: #F1F1F1} .interface-layout .check-group input[type="checkbox"] {accent-color: var(--color-buttons); width: 1rem; height: 1rem; cursor: pointer} .interface-layout .check-group label.checked {border-color: var(--color-buttons); background: var(--color-buttons); color: #FFF} .interface-layout .check-group label.checked input[type="checkbox"] {accent-color: #FFF} /* Radio group (Photo Release) */ .interface-layout .radio-group {display: flex; gap: .75rem} .interface-layout .radio-group label {flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem 1rem; border: 1px solid #DEE2E6; border-radius: .375rem; background: #FFF; cursor: pointer; font-weight: 600; color: #464646; margin-bottom: 0} .interface-layout .radio-group label:hover {border-color: #adb5bd; background: #F1F1F1} .interface-layout .radio-group label.checked {border-color: var(--color-buttons); background: var(--color-buttons); color: #FFF} .interface-layout .radio-group input[type="radio"] {accent-color: var(--color-buttons); cursor: pointer} .interface-layout .radio-group label.checked input[type="radio"] {accent-color: #FFF} /* Slider switch — works on EVERY interface page (ported from gnomesurf .booking-wrap, scoped to .interface-layout). Use for boolean toggles AND "check all that apply" multi-selects. */ .interface-layout .switch {position: relative; display: inline-block; width: 52px; height: 28px; flex-shrink: 0; margin: 0} .interface-layout .switch input {opacity: 0; width: 0; height: 0; position: absolute} .interface-layout .switch .slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #CCC; transition: .3s; border-radius: 28px} .interface-layout .switch .slider:before {position: absolute; content: ""; height: 22px; width: 22px; left: 3px; bottom: 3px; background-color: #FFF; transition: .3s; border-radius: 50%} .interface-layout .switch input:checked + .slider {background-color: var(--color-buttons)} .interface-layout .switch input:focus + .slider {box-shadow: none} .interface-layout .switch input:checked + .slider:before {transform: translateX(24px)} .interface-layout .slider-label {cursor: pointer; min-width: 0; overflow-wrap: break-word} /* On phones the 2-across switch grids are tight, so shrink the switch to give labels room. */ @media (max-width: 767.98px) { .interface-layout .switch {width: 34px; height: 20px} .interface-layout .switch .slider {border-radius: 20px} .interface-layout .switch .slider:before {height: 14px; width: 14px; left: 3px; bottom: 3px} .interface-layout .switch input:checked + .slider:before {transform: translateX(14px)} } /* Toggle inline */ .interface-layout .toggle-inline {display: inline-flex; align-items: center; gap: .5rem; font-weight: 600} .interface-layout .toggle-inline input[type="checkbox"] {accent-color: var(--color-buttons); width: 1.1rem; height: 1.1rem} /* Required Documents (open-to-unlock pattern from WebForms booking) */ .interface-layout .doc-card {border: 2px solid var(--color-icons); background: #FFF8F5; border-radius: .5rem; padding: 1rem; margin-bottom: 1.5rem} .interface-layout .doc-card.docs-complete {border-color: var(--color-secondary) !important; background: rgba(0,204,120,.04) !important; transition: all .3s} .interface-layout .doc-btn {display: flex; align-items: center; justify-content: space-between; padding: .85rem 1.25rem; border: 2px solid var(--color-buttons); border-radius: .5rem; margin-bottom: .75rem; cursor: pointer; transition: all .2s; background: #FFF} .interface-layout .doc-btn:hover {background: var(--color-buttons); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.1)} .interface-layout .doc-btn:hover .doc-btn-label, .interface-layout .doc-btn:hover .doc-btn-icon, .interface-layout .doc-btn:hover .doc-btn-arrow {color: #FFF} .interface-layout .doc-btn-opened {border-color: #00CC78 !important; background: rgba(0,204,120,.03) !important} .interface-layout .doc-btn-opened:hover {background: rgba(0,204,120,.08) !important} .interface-layout .doc-btn-opened:hover .doc-btn-label, .interface-layout .doc-btn-opened:hover .doc-btn-icon, .interface-layout .doc-btn-opened:hover .doc-btn-arrow {color: var(--color-body)} .interface-layout .doc-btn-left {display: flex; align-items: center; gap: .65rem} .interface-layout .doc-btn-icon {font-size: 1.3rem; color: var(--color-buttons); transition: color .2s} .interface-layout .doc-btn-opened .doc-btn-icon {color: var(--color-secondary)} .interface-layout .doc-btn-label {font-size: .95rem; font-weight: 700; color: var(--color-buttons); transition: color .2s} .interface-layout .doc-btn-opened .doc-btn-label {color: var(--color-body)} .interface-layout .doc-btn-arrow {font-size: .7rem; color: var(--color-buttons); opacity: .6; transition: color .2s} .interface-layout .doc-btn-opened .doc-btn-arrow {color: var(--color-secondary)} .interface-layout .doc-btn-right {flex-shrink: 0; margin-left: .75rem} .interface-layout .doc-badge {display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem; border-radius: 2rem; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase} .interface-layout .doc-badge-pending {background: #FEF2F2; color: #CC3333; border: 1px solid #FECACA} .interface-layout .doc-badge-opened {background: #F0FDF4; color: #16A34A; border: 1px solid #BBF7D0} /* Required-document modal — the waiver / photo release render HERE, on the page, never in a new tab. A new tab backgrounds the booking page, and on a phone the browser then discards and reloads it, which kills the Blazor circuit and dumps the family back at Step 1 with everything they typed gone. The body scrolls internally (dvh, so an iOS toolbar cannot swallow the footer button) and the footer stays put. */ .interface-layout .doc-modal-backdrop {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(39,40,42,.6); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 1rem} .interface-layout .doc-modal {display: flex; flex-direction: column; width: 100%; max-width: 820px; max-height: 90dvh; background: #FFF; border-radius: .5rem; box-shadow: 0 .5rem 2rem rgba(0,0,0,.3); overflow: hidden} .interface-layout .doc-modal-head {display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid #DEE2E6; flex-shrink: 0} .interface-layout .doc-modal-title {font-family: var(--font-headings); font-size: 1.05rem; font-weight: 700; color: var(--color-buttons); display: flex; align-items: center; gap: .5rem} .interface-layout .doc-modal-x {background: none; border: none; font-size: 1.35rem; line-height: 1; color: var(--color-body); opacity: .55; cursor: pointer; padding: .25rem .5rem} .interface-layout .doc-modal-x:hover {opacity: 1} .interface-layout .doc-modal-body {overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 1.25rem; font-size: .9rem; line-height: 1.6} .interface-layout .doc-modal-body h2 {font-size: 1.15rem} .interface-layout .doc-modal-body h3 {font-size: 1rem; margin-top: 1.25rem} .interface-layout .doc-modal-foot {padding: 1rem 1.25rem; border-top: 1px solid #DEE2E6; text-align: center; flex-shrink: 0} @media (max-width: 575.98px) { .interface-layout .doc-modal-backdrop {padding: .5rem} .interface-layout .doc-modal {max-height: 94dvh} .interface-layout .doc-modal-body {padding: 1rem; font-size: .85rem} .interface-layout .doc-modal-foot .btn {width: 100%} } /* Waiver/Photo agreement sections (locked until document opened) */ .interface-layout .waiver-section {position: relative; background: #F8F9FA; border: 1px solid #DEE2E6; border-radius: .5rem; padding: 1rem; margin-bottom: 1.5rem} .interface-layout .waiver-locked-overlay {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(248,249,250,.9); border-radius: .5rem; display: flex; align-items: center; justify-content: center; z-index: 10; font-size: .9rem; font-weight: 600; color: #999; gap: .5rem; cursor: not-allowed} .interface-layout .waiver-locked-overlay i {font-size: 1rem; color: #CCC} .interface-layout .waiver-section.waiver-unlocked .waiver-locked-overlay {display: none} .interface-layout .waiver-title {font-size: .9rem; font-weight: 700; color: var(--color-body); margin-bottom: .5rem} .interface-layout .waiver-text {font-size: .8rem; color: var(--color-secondary); line-height: 1.5; margin-bottom: .75rem} .interface-layout .waiver-check {display: flex; align-items: flex-start; gap: .5rem} .interface-layout .waiver-check input[type="checkbox"] {width: 18px; height: 18px; margin-top: 2px; accent-color: var(--color-buttons); cursor: pointer; flex-shrink: 0} .interface-layout .waiver-check input[type="checkbox"]:focus {outline: none; box-shadow: none} .interface-layout .waiver-check label {font-size: .85rem; color: var(--color-body); cursor: pointer} .interface-layout .radio-option {display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .5rem; padding: .6rem .75rem; border: 1px solid #DEE2E6; border-radius: .375rem; background: #FFF; transition: all .2s; cursor: pointer} .interface-layout .radio-option:hover {border-color: #CCC; background: #F1F1F1} .interface-layout .radio-option.checked {border-color: var(--color-buttons); background: rgba(0,161,190,.04)} .interface-layout .radio-option input[type="radio"] {-webkit-appearance: none; -moz-appearance: none; appearance: none; width: 18px; height: 18px; border: 2px solid #CCC; border-radius: 50%; margin: 0; margin-top: 2px; cursor: pointer; position: relative; transition: all .2s; flex-shrink: 0} .interface-layout .radio-option input[type="radio"]:checked {border-color: var(--color-buttons); border-width: 2px} .interface-layout .radio-option input[type="radio"]:checked::after {content: ''; position: absolute; top: 3px; left: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-buttons)} .interface-layout .radio-option input[type="radio"]:focus {outline: none; box-shadow: none} .interface-layout .radio-option label {font-size: .85rem; color: var(--color-body); cursor: pointer; margin-bottom: 0} /* Waiver/Photo document pages */ .interface-layout .waiver-doc {font-size: .9rem; line-height: 1.7} .interface-layout .waiver-doc h3 {font-family: var(--font-headings); font-size: 1rem; font-weight: 700; margin: 1.5rem 0 .5rem; text-transform: uppercase} .interface-layout .waiver-doc p {margin-bottom: 1rem} .interface-layout .waiver-doc ul, .interface-layout .waiver-doc ol {margin: 0 0 1rem 1.5rem; padding: 0} .interface-layout .waiver-doc ul li, .interface-layout .waiver-doc ol li {margin-bottom: .75rem; padding-left: .25rem} .interface-layout .photo-release-doc {font-size: .9rem; line-height: 1.7} .interface-layout .photo-release-doc p {margin-bottom: 1rem} /* Review summary rows */ .interface-layout .review-row {display: flex; gap: .75rem; padding: .4rem 0; border-bottom: 1px solid #F0F0F0} .interface-layout .review-row:last-child {border-bottom: none} .interface-layout .review-label {flex: 0 0 40%; font-weight: 700; color: #646464; font-size: .9rem} .interface-layout .review-value {flex: 1; color: #464646; font-size: .9rem} .interface-layout .review-section-heading {font-family: var(--font-headings); font-size: 1.05rem; font-weight: 700; color: var(--color-buttons); margin-top: 1rem; margin-bottom: .25rem} .interface-layout .review-edit-link {font-size: .85rem; font-weight: 600; color: var(--color-buttons); text-decoration: none; cursor: pointer; white-space: nowrap} .interface-layout .review-edit-link:hover {color: var(--color-buttons-hover); text-decoration: underline} .interface-layout .review-edit-link i {margin-right: .25rem} /* Age Gate — 18+ confirmation before the participant form is revealed */ .interface-layout .age-gate {background: #FFF; border: 1px solid #DEE2E6; border-radius: .75rem; box-shadow: var(--shadow); padding: 2.5rem 2rem; text-align: center; max-width: 640px; margin: 0 auto 1.5rem; animation: age-gate-in .35s ease-out both} .interface-layout .age-gate-icon {display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: color-mix(in srgb, var(--color-secondary) 28%, #FFF); color: var(--color-tertiary); font-size: 2rem; margin-bottom: 1.1rem} .interface-layout .age-gate-title {font-family: var(--font-headings); color: var(--color-primary); font-size: 1.75rem; font-weight: 700; margin: 0 0 .5rem; letter-spacing: .01em} .interface-layout .age-gate-question {font-family: var(--font-primary); font-size: 1.1rem; color: var(--color-body); margin: 0 0 .5rem; line-height: 1.45} .interface-layout .age-gate-question strong {color: var(--color-tertiary); font-weight: 700} .interface-layout .age-gate-sub {font-family: var(--font-primary); font-size: .9rem; color: #6B6B6B; margin: 0 auto 1.75rem; max-width: 460px; line-height: 1.55} .interface-layout .age-gate-actions {display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center} .interface-layout .age-gate-btn {min-width: 210px; padding: .85rem 1.5rem; font-family: var(--font-buttons); font-weight: 600; font-size: 1rem; letter-spacing: .01em; border-radius: .5rem; transition: all .2s ease} .interface-layout .age-gate-btn-yes {box-shadow: 0 2px 8px rgba(0,0,0,.08)} .interface-layout .age-gate-btn-yes:hover {transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.14)} .interface-layout .age-gate-btn-no {background: transparent; color: #6B6B6B; border: 1.5px solid #D9D9D9} .interface-layout .age-gate-btn-no:hover {background: #F5F5F5; color: #464646; border-color: #BFBFBF} .interface-layout .age-gate-confirmed {display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .65rem 1rem; background: rgba(0,204,120,.08); border: 1px solid rgba(0,204,120,.25); border-radius: .5rem; color: #1b8d54; font-family: var(--font-primary); font-size: .88rem; font-weight: 600; margin-bottom: 1rem; animation: age-gate-in .3s ease-out both} .interface-layout .age-gate-confirmed i {font-size: 1rem} @keyframes age-gate-in { from {opacity: 0; transform: translateY(8px)} to {opacity: 1; transform: translateY(0)} } /* Under-18 apology modal */ .age-modal-backdrop {position: fixed; inset: 0; z-index: 10000; background: rgba(32,32,36,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 1.5rem; animation: age-modal-fade .25s ease-out both} .age-modal {background: #FFF; border-radius: .85rem; box-shadow: 0 20px 60px rgba(0,0,0,.35); max-width: 480px; width: 100%; padding: 2.25rem 1.75rem 1.75rem; text-align: center; font-family: var(--font-primary, muli, sans-serif); color: var(--color-body, #27282A); animation: age-modal-pop .3s cubic-bezier(.2,.9,.3,1.15) both} .age-modal-icon {display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: color-mix(in srgb, var(--color-secondary, #F9CB9C) 40%, #FFF); color: var(--color-tertiary, #FF4A11); font-size: 1.75rem; margin-bottom: 1rem} .age-modal-title {font-family: var(--font-headings, optima-lt-pro, sans-serif); font-size: 1.65rem; font-weight: 700; color: var(--color-primary, #27282A); margin: 0 0 .85rem} .age-modal-body {font-size: .95rem; line-height: 1.6; margin: 0 auto .75rem; max-width: 420px; color: #464646} .age-modal-body strong {color: var(--color-tertiary, #FF4A11); font-weight: 700} .age-modal-body-soft {color: #6B6B6B; font-size: .9rem; margin-bottom: 1.5rem} .age-modal-btn {min-width: 180px; padding: .8rem 1.5rem; font-weight: 600; border-radius: .5rem} @keyframes age-modal-fade { from {opacity: 0} to {opacity: 1} } @keyframes age-modal-pop { from {opacity: 0; transform: scale(.92) translateY(6px)} to {opacity: 1; transform: scale(1) translateY(0)} } /* Responsive */ @media (max-width: 576px) { .session-card {flex-direction: column; align-items: flex-start; gap: .35rem} .selected-session-summary {flex-direction: column; gap: .25rem} .session-name-small {margin-left: 0} .interface-layout .wizard-step-label {display: none} .interface-layout .review-row {flex-direction: column; gap: .15rem} .interface-layout .review-label {flex: 0 0 auto} .interface-layout .age-gate {padding: 1.75rem 1.25rem} .interface-layout .age-gate-title {font-size: 1.4rem} .interface-layout .age-gate-btn {min-width: 100%; width: 100%} .age-modal {padding: 1.75rem 1.25rem 1.25rem} .age-modal-title {font-size: 1.35rem} } /* ============================================================ Argenta Branded Footer — used across interface pages. Clean, modern, centered. Subtle gradient separator above. ============================================================ */ .interface-argenta-footer { margin-top: 3rem; padding: 1.75rem 1rem 1.25rem; text-align: center; position: relative; } .interface-argenta-footer::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(320px, 80%); height: 1px; background: linear-gradient(to right, transparent, #D9DEE3 20%, #D9DEE3 80%, transparent); } .interface-argenta-footer-link { display: inline-flex; align-items: center; gap: .6rem; padding: .35rem .75rem; border-radius: 999px; text-decoration: none !important; color: #8A8F94 !important; font-family: var(--font-primary), muli, sans-serif; transition: transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease; } .interface-argenta-footer-link:hover, .interface-argenta-footer-link:focus-visible { background: #F5F7FA; color: #27282A !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(40, 40, 40, .07); outline: none; } .interface-argenta-footer-label { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #A8AEB5; transition: color .18s ease; } .interface-argenta-footer-link:hover .interface-argenta-footer-label { color: #6C737A; } .interface-argenta-footer-logo { width: 200px; height: auto; opacity: .85; transition: opacity .18s ease; } .interface-argenta-footer-link:hover .interface-argenta-footer-logo { opacity: 1; } @media (max-width: 480px) { .interface-argenta-footer {margin-top: 2rem; padding: 1.25rem .75rem 1rem} .interface-argenta-footer-logo {width: 160px} .interface-argenta-footer-label {font-size: .68rem} } /* ===== Honeypot bot trap field — invisible to real users ===== */ /* Off-screen positioning (NOT display:none — bots skip those). Scroll-anchored */ /* so it doesn't move the page if focus accidentally lands on it. */ .hp-trap {position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none} .hp-trap-input {width: 1px; height: 1px} /* ============================================================================ PUBLIC PAYMENT FORM — refined minimalism, team-brand-aware All colors driven by the team's CSS variables (--color-primary etc.). ============================================================================ */ /* Outer wrapper — gives the form a slight breathing room from the container */ .pf-shell {animation: pf-fade-in .5s ease both} /* Step indicator (Information → Payment → Confirmation) */ .pf-stepper {display: flex; align-items: center; justify-content: center; gap: 0; margin: .5rem 0 2.25rem; flex-wrap: nowrap} .pf-step {display: flex; flex-direction: column; align-items: center; gap: .55rem; min-width: 7rem; position: relative} .pf-step-dot {width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #FFF; border: 2px solid #E5E7EB; display: flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 600; color: #9CA3AF; transition: all .35s ease; box-shadow: 0 1px 2px rgba(0,0,0,.04)} .pf-step-dot i {font-size: .85rem} .pf-step-label {font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #9CA3AF; font-weight: 600; transition: color .35s ease; white-space: nowrap} .pf-step.active .pf-step-dot {background: var(--color-primary); border-color: var(--color-primary); color: #FFF; box-shadow: 0 6px 18px -8px var(--color-primary)} .pf-step.active .pf-step-label {color: var(--color-primary)} .pf-step.done .pf-step-dot {background: var(--color-secondary, #00CC78); border-color: var(--color-secondary, #00CC78); color: #FFF} .pf-step.done .pf-step-label {color: var(--color-secondary, #00CC78)} .pf-step-rail {flex: 1; height: 2px; background: #E5E7EB; margin: 0 .25rem; align-self: flex-start; margin-top: 1.0625rem; min-width: 1.5rem; max-width: 4rem; position: relative; overflow: hidden} .pf-step-rail.filled::after {content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: var(--color-secondary, #00CC78); animation: pf-rail-fill .5s ease both} /* Header text */ .pf-header {text-align: center; margin-bottom: 2rem} .pf-eyebrow {font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--color-primary); font-weight: 700; margin-bottom: .5rem} .pf-title {font-family: var(--font-headings); font-size: 2.25rem; font-weight: 700; color: var(--color-body); margin: 0 0 .55rem; letter-spacing: -.015em; line-height: 1.1} .pf-subtitle {color: #6B7280; font-size: 1.02rem; max-width: 38rem; margin: 0 auto; line-height: 1.5} /* Two-column layout */ .pf-grid {display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2rem; align-items: start} @media (max-width: 880px) { .pf-grid {grid-template-columns: 1fr} } /* Generic card */ .pf-card {background: #FFF; border: 1px solid #ECECEC; border-radius: 14px; padding: 1.75rem; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -16px rgba(15,23,42,.08); animation: pf-fade-in-up .55s ease both} .pf-card-head {display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid #F3F4F6} .pf-card-title {font-family: var(--font-headings); font-size: 1.05rem; font-weight: 700; color: var(--color-body); margin: 0; letter-spacing: -.005em} .pf-card-meta {font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: #9CA3AF; font-weight: 600} /* Inner section — used for the political block sub-cards */ .pf-section {padding: 1.25rem; background: #FAFAFA; border: 1px solid #F0F0F0; border-radius: 10px; margin-top: 1.25rem} .pf-section-title {font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: #6B7280; font-weight: 700; margin: 0 0 .85rem; display: flex; align-items: center; gap: .45rem} .pf-section-title i {color: var(--color-primary); font-size: .9rem} /* Field labels — uppercase, small, refined */ .pf-label {display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #6B7280; font-weight: 700; margin: 0 0 .5rem} .pf-label .rfv {color: var(--color-rfv); margin-right: .25rem; font-size: .55rem; vertical-align: middle} .pf-help {font-size: .78rem; color: #6B7280; margin: .35rem 0 0} .pf-error-inline {color: var(--color-rfv); font-size: .82rem; margin-top: .4rem; display: flex; align-items: center; gap: .35rem} /* Field row spacing */ .pf-row {display: grid; gap: 1rem; margin-bottom: 1rem} .pf-row-2 {grid-template-columns: 1fr 1fr} .pf-row-3 {grid-template-columns: 1fr 1fr 1fr} @media (max-width: 600px) { .pf-row-2, .pf-row-3 {grid-template-columns: 1fr} } /* Better inputs — refined neutral, brand-color focus */ .pf-input, .pf-textarea {width: 100%; height: 48px; padding: 0 .9rem; background: #FFF; border: 1px solid #E5E7EB; border-radius: 8px; font-size: .98rem; color: var(--color-body); font-family: var(--font-primary); transition: border-color .2s, box-shadow .2s, background .2s} .pf-textarea {height: auto; padding: .75rem .9rem; min-height: 96px; resize: vertical; line-height: 1.5} .pf-input:hover, .pf-textarea:hover {border-color: #D1D5DB} .pf-input:focus, .pf-textarea:focus {outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent); background: #FFF} .pf-input:disabled, .pf-textarea:disabled {background: #F9FAFB; color: #9CA3AF; cursor: not-allowed} .pf-input::placeholder, .pf-textarea::placeholder {color: #C2C7CF} /* Segmented control — for Individual/Organization, Yes/No invoice toggles, etc. */ .pf-segmented {display: inline-flex; padding: 4px; background: #F3F4F6; border-radius: 10px; gap: 2px} .pf-segmented-btn {flex: 1; min-width: 8.5rem; padding: .55rem 1.1rem; border: 0; background: transparent; color: #6B7280; font-size: .9rem; font-weight: 600; font-family: var(--font-primary); border-radius: 7px; cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; display: inline-flex; align-items: center; justify-content: center; gap: .45rem} .pf-segmented-btn i {font-size: .85rem} .pf-segmented-btn:hover:not(.active):not(:disabled) {color: var(--color-body)} .pf-segmented-btn.active {background: #FFF; color: var(--color-primary); box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 4px 10px -6px rgba(15,23,42,.12)} .pf-segmented-btn:disabled {cursor: not-allowed; opacity: .5} /* Funding source choice — stacked cards (richer than radios) */ .pf-choice-stack {display: grid; gap: .75rem} .pf-choice {display: flex; gap: .85rem; padding: 1rem 1.1rem; background: #FFF; border: 1.5px solid #E5E7EB; border-radius: 10px; cursor: pointer; transition: border-color .2s, background .2s, transform .15s} .pf-choice:hover {border-color: #C7CCD3} .pf-choice.selected {border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 4%, #FFF)} .pf-choice-radio {width: 18px; height: 18px; border-radius: 50%; border: 2px solid #C7CCD3; flex-shrink: 0; margin-top: .15rem; position: relative; transition: border-color .2s} .pf-choice.selected .pf-choice-radio {border-color: var(--color-primary)} .pf-choice.selected .pf-choice-radio::after {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary)} .pf-choice-body {flex: 1; line-height: 1.45} .pf-choice-title {display: block; font-size: .85rem; font-weight: 700; color: var(--color-body); margin-bottom: .25rem; letter-spacing: .015em} .pf-choice-text {font-size: .8rem; color: #6B7280} .pf-choice:has(input:disabled) {cursor: not-allowed; opacity: .6} /* Compliance card */ .pf-compliance {background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 4%, #FFF) 0%, #FFF 70%); border-color: color-mix(in srgb, var(--color-primary) 18%, #ECECEC)} /* Retired toggle — turns into a soft pill chip */ .pf-chip {display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; background: #FFF; border: 1.5px solid #E5E7EB; border-radius: 999px; cursor: pointer; transition: all .2s; font-size: .85rem; font-weight: 600; color: #6B7280; user-select: none} .pf-chip:hover {border-color: #C7CCD3} .pf-chip i {font-size: .8rem} .pf-chip.checked {background: color-mix(in srgb, var(--color-primary) 8%, #FFF); border-color: var(--color-primary); color: var(--color-primary)} /* Right-column Payment Summary card — the hero */ /* NOTE: overflow MUST stay visible so Stripe Elements popovers (autofill, errors) aren't clipped. */ .pf-summary {position: sticky; top: 11rem; background: #FFF; border: 1px solid #ECECEC; border-radius: 16px; padding: 1.75rem 1.6rem 1.5rem; box-shadow: 0 2px 4px rgba(15,23,42,.05), 0 12px 32px -16px rgba(15,23,42,.12); animation: pf-fade-in-up .55s ease .12s both} .pf-summary::before {content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--color-primary), var(--color-tertiary)); border-radius: 16px 16px 0 0} /* Pay state — collapse to centered single column so Stripe Elements has room. The Information card collapses to a thin "Paying as" summary inside the payment card. */ .pf-grid.pf-grid-paying {grid-template-columns: 1fr; max-width: 36rem; margin-left: auto; margin-right: auto} .pf-grid.pf-grid-paying > .pf-card {display: none} .pf-grid.pf-grid-paying .pf-summary {position: static} /* "Paying as" compact identity summary, shown only during pay state */ .pf-paying-as {display: flex; align-items: center; gap: .65rem; padding: .85rem 1rem; background: #FAFAFA; border: 1px solid #F0F0F0; border-radius: 10px; margin-bottom: 1.15rem; font-size: .85rem; color: var(--color-body); line-height: 1.3} .pf-paying-as i {color: var(--color-primary); font-size: 1.05rem; flex-shrink: 0} .pf-paying-as-name {font-weight: 600; display: block} .pf-paying-as-email {color: #6B7280; font-size: .78rem; display: block; margin-top: .15rem; word-break: break-word} .pf-summary-pay-to {font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: #9CA3AF; font-weight: 700; margin-bottom: .35rem} .pf-summary-org {font-family: var(--font-headings); font-size: 1.1rem; font-weight: 700; color: var(--color-body); margin-bottom: 1.5rem; line-height: 1.3} .pf-amount-display {display: flex; align-items: baseline; gap: .15rem; margin-bottom: .25rem; min-height: 3.5rem} .pf-amount-currency {font-size: 1.5rem; color: #9CA3AF; font-weight: 500; align-self: flex-start; margin-top: .85rem} .pf-amount-whole {font-family: var(--font-headings); font-size: 3.4rem; font-weight: 800; color: var(--color-body); line-height: 1; letter-spacing: -.025em; transition: color .25s} .pf-amount-decimal {font-family: var(--font-headings); font-size: 1.6rem; font-weight: 700; color: #9CA3AF; align-self: flex-start; margin-top: 1rem; letter-spacing: -.01em} .pf-amount-display.pf-amount-zero .pf-amount-whole {color: #D1D5DB} .pf-amount-display.pf-amount-zero .pf-amount-currency {color: #D1D5DB} .pf-summary-detail {font-size: .82rem; color: #6B7280; margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px dashed #E5E7EB; min-height: 1.2em} .pf-summary-detail strong {color: var(--color-body); font-weight: 600} /* Toggle group inside summary card */ /* Headline amount + org name + line items in the summary column. These six classes were used by all five membership forms and CampaignSalesForm but defined NOWHERE, so the "hero" amount was rendering as ordinary body text and the whitespace between the three spans showed as literal gaps ("$ 26 .30"). Added 2026-07-26; every form that already emits this markup picks it up. */ .pf-summary-name {font-family: var(--font-headings); font-size: 1.1rem; font-weight: 700; color: var(--color-body); margin-bottom: 1.25rem; line-height: 1.3} .pf-summary-amount {display: flex; align-items: baseline; gap: 0; font-family: var(--font-headings); font-weight: 700; color: var(--color-body); letter-spacing: -.02em; margin: .25rem 0 1rem; line-height: 1} .pf-summary-currency {font-size: 1.4rem; font-weight: 600; align-self: flex-start; margin-top: .2rem; margin-right: .1rem} .pf-summary-amount-whole {font-size: 2.75rem} .pf-summary-amount-decimal {font-size: 1.4rem; font-weight: 600} .pf-summary-row {display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: .85rem; color: #6B7280; padding: .4rem 0; border-bottom: 1px dashed #F1F1F1} .pf-summary-row:last-of-type {border-bottom: 0} .pf-summary-toggle-label {font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #6B7280; font-weight: 700; margin: 0 0 .55rem} .pf-summary-toggle-label.tight {margin-top: .1rem} .pf-summary .pf-segmented {width: 100%; display: flex; margin-bottom: 1.1rem} .pf-summary .pf-segmented-btn {flex: 1; min-width: 0} .pf-summary-input-wrap {margin-bottom: 1.1rem} /* Big amount input — sits below display, smaller (display IS the amount) */ .pf-amount-input-wrap {position: relative; margin-bottom: 1.25rem} .pf-amount-input-wrap .pf-amount-prefix {position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #9CA3AF; font-size: 1rem; font-weight: 600; pointer-events: none} .pf-amount-input-wrap input {padding-left: 2rem; font-size: 1.1rem; font-weight: 600; height: 52px; text-align: right; padding-right: 1rem} /* Submit / pay button — full-width, brand-color, premium */ .pf-button {display: flex; align-items: center; justify-content: center; gap: .55rem; width: 100%; height: 56px; padding: 0 1.5rem; border: 0; border-radius: 12px; background: var(--color-primary); color: #FFF; font-family: var(--font-buttons, var(--font-primary)); font-size: 1rem; font-weight: 700; letter-spacing: .015em; white-space: nowrap; cursor: pointer; transition: transform .15s, box-shadow .25s, background .25s; box-shadow: 0 6px 16px -8px var(--color-primary)} .pf-button:hover:not(:disabled) {background: var(--color-buttons-hover, var(--color-primary)); transform: translateY(-1px); box-shadow: 0 10px 22px -10px var(--color-primary)} .pf-button:active:not(:disabled) {transform: translateY(0)} .pf-button:disabled {opacity: .65; cursor: not-allowed; transform: none; box-shadow: none} .pf-button-secondary {background: transparent; color: #6B7280; border: 1.5px solid #E5E7EB; box-shadow: none; height: 44px; font-size: .9rem} .pf-button-secondary:hover:not(:disabled) {background: #F9FAFB; color: var(--color-body); border-color: #D1D5DB; transform: none; box-shadow: none} /* Trust strip below the button */ .pf-trust {display: flex; align-items: center; justify-content: center; gap: .55rem; margin-top: 1rem; padding-top: 1.1rem; border-top: 1px solid #F3F4F6; font-size: .76rem; color: #6B7280; font-weight: 500} .pf-trust i {color: var(--color-primary); font-size: .9rem} /* Stripe Elements container */ .pf-stripe-frame {margin: 1.25rem 0 .25rem; padding: 1.1rem; background: #FAFAFA; border: 1px solid #ECECEC; border-radius: 10px} .pf-stripe-frame:focus-within {border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent)} /* Pay-state action row */ .pf-pay-actions {display: flex; gap: .75rem; margin-top: 1rem} .pf-pay-actions .pf-button {flex: 1} .pf-pay-actions .pf-button-secondary {flex: 0 0 auto; width: auto; min-width: 7rem} /* Locked overlay on the info card while paying */ .pf-card.locked {position: relative; overflow: hidden} .pf-card.locked::after {content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.5); pointer-events: none; backdrop-filter: blur(.5px); -webkit-backdrop-filter: blur(.5px); transition: opacity .3s; border-radius: 14px} .pf-card.locked .pf-input, .pf-card.locked .pf-textarea {opacity: .6} /* Inline validation banner */ .pf-validation {background: color-mix(in srgb, var(--color-rfv) 5%, #FFF); border: 1px solid color-mix(in srgb, var(--color-rfv) 25%, #ECECEC); border-radius: 10px; padding: 1rem 1.15rem; margin-bottom: 1.25rem; animation: pf-shake .4s ease} .pf-validation-title {color: var(--color-rfv); font-weight: 700; font-size: .92rem; display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem} .pf-validation ul {margin: 0; padding-left: 1.4rem; color: #4B5563; font-size: .88rem; line-height: 1.55} /* Confirmation state */ .pf-confirm {text-align: center; max-width: 32rem; margin: 1rem auto 0; animation: pf-fade-in-up .55s ease both} .pf-confirm-checkring {width: 6.5rem; height: 6.5rem; border-radius: 50%; background: color-mix(in srgb, var(--color-secondary, #00CC78) 12%, #FFF); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; position: relative; animation: pf-pop .5s cubic-bezier(.18,.89,.32,1.28) both} .pf-confirm-checkring::before {content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--color-secondary, #00CC78) 30%, transparent); animation: pf-ripple 1.6s ease-out infinite} .pf-confirm-svg {width: 3rem; height: 3rem; stroke: var(--color-secondary, #00CC78); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; fill: none} .pf-confirm-svg path {stroke-dasharray: 60; stroke-dashoffset: 60; animation: pf-draw .55s ease .25s forwards} .pf-confirm-eyebrow {font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--color-secondary, #00CC78); font-weight: 700; margin-bottom: .55rem} .pf-confirm-title {font-family: var(--font-headings); font-size: 2rem; font-weight: 700; color: var(--color-body); margin: 0 0 .35rem; letter-spacing: -.01em} .pf-confirm-amount {font-family: var(--font-headings); font-size: 2.6rem; font-weight: 800; color: var(--color-body); margin: 1.25rem 0 .5rem; letter-spacing: -.02em} .pf-confirm-text {color: #6B7280; font-size: 1rem; line-height: 1.55; margin: 0 0 1.25rem} .pf-confirm-text strong {color: var(--color-body); font-weight: 600} .pf-confirm-receipt {display: inline-flex; align-items: center; gap: .55rem; padding: .65rem 1.1rem; background: #F9FAFB; border: 1px solid #ECECEC; border-radius: 999px; font-size: .82rem; color: #6B7280; font-weight: 500; margin-top: .25rem} .pf-confirm-receipt i {color: var(--color-primary)} /* Animations */ @keyframes pf-fade-in {from {opacity: 0} to {opacity: 1}} @keyframes pf-fade-in-up {from {opacity: 0; transform: translateY(8px)} to {opacity: 1; transform: translateY(0)}} @keyframes pf-rail-fill {from {width: 0} to {width: 100%}} @keyframes pf-pop {0% {transform: scale(.5); opacity: 0} 70% {transform: scale(1.05); opacity: 1} 100% {transform: scale(1); opacity: 1}} @keyframes pf-ripple {0% {transform: scale(.92); opacity: .55} 100% {transform: scale(1.18); opacity: 0}} @keyframes pf-draw {to {stroke-dashoffset: 0}} @keyframes pf-shake {0%,100% {transform: translateX(0)} 25% {transform: translateX(-3px)} 75% {transform: translateX(3px)}} /* Mobile tightening */ @media (max-width: 600px) { .pf-title {font-size: 1.75rem} .pf-amount-whole {font-size: 2.6rem} .pf-amount-decimal {font-size: 1.25rem} .pf-summary {position: static} .pf-step {min-width: 5rem} .pf-step-rail {min-width: .5rem} .pf-step-label {font-size: .6rem} .pf-card {padding: 1.4rem} /* Stack the Back + primary action so the primary (Donate/Pay) never gets crushed off-screen on phones */ .pf-pay-actions {flex-direction: column-reverse} .pf-pay-actions .pf-button, .pf-pay-actions .pf-button-secondary {width: 100%; flex: none} } /* Honor "prefers-reduced-motion" — keep transitions but kill the showy stuff */ @media (prefers-reduced-motion: reduce) { .pf-shell, .pf-card, .pf-summary, .pf-confirm {animation: none !important} .pf-confirm-checkring::before {animation: none} .pf-confirm-svg path {stroke-dashoffset: 0; animation: none} } /* ========================================================================== PUBLIC MEMBERSHIP FORM — level chooser cards Shared across MembershipForms/MembershipCSTONE.razor and future per-team membership pages. Uses the existing .pf-* tokens for fonts/colors so it inherits each team's runtime CSS (--color-primary etc.). ========================================================================== */ .mem-levels {display: flex; flex-direction: column; gap: .65rem; margin-bottom: 1rem} .mem-level {display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem; padding: .85rem 1rem; border: 1.5px solid #ECECEC; background: #FFF; border-radius: 12px; cursor: pointer; transition: border-color .18s, background .18s, transform .12s; text-align: left; font-family: inherit} .mem-level:hover:not(:disabled) {border-color: color-mix(in srgb, var(--color-primary) 35%, #ECECEC); background: color-mix(in srgb, var(--color-primary) 3%, #FFF)} .mem-level:disabled {cursor: not-allowed; opacity: .65} .mem-level.active {border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 7%, #FFF); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 12%, transparent)} .mem-level-icon {width: 2.4rem; height: 2.4rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--color-primary) 10%, #FFF); color: var(--color-primary); font-size: 1.05rem; flex-shrink: 0} .mem-level.active .mem-level-icon {background: var(--color-primary); color: #FFF} .mem-level-body {min-width: 0} .mem-level-name {font-family: var(--font-headings); font-weight: 700; font-size: .95rem; color: var(--color-body); line-height: 1.25} .mem-level-desc {font-size: .8rem; color: #6B7280; line-height: 1.35; margin-top: .2rem} .mem-level-amount {font-family: var(--font-headings); font-weight: 700; font-size: 1.1rem; color: var(--color-body); letter-spacing: -.005em; flex-shrink: 0} /* Giving-club tier cards — the full-width, side-by-side variant of .mem-level, for a membership whose printed collateral lists several benefits per tier. The sidebar selector cannot carry that without becoming a wall, so these sit in the wide column above the form and every benefit line from the customer's own material survives. Structural only: all colour comes from the team's tokens, so any team can use it. Team-neutral by design, per section 13 of the interfaces skill. */ .mem-tiers {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0 0 2rem} .mem-tier {display: flex; flex-direction: column; padding: 0; border: 1.5px solid #ECECEC; background: #FFF; border-radius: 12px; overflow: hidden; cursor: pointer; transition: border-color .18s, box-shadow .18s, transform .12s; text-align: left; font-family: inherit} .mem-tier:hover:not(:disabled) {border-color: color-mix(in srgb, var(--color-primary) 35%, #ECECEC); transform: translateY(-2px)} .mem-tier:disabled {cursor: not-allowed; opacity: .65} .mem-tier.active {border-color: var(--color-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 12%, transparent)} .mem-tier-top {display: flex; align-items: center; gap: .6rem; padding: .9rem 1rem .75rem; border-bottom: 1px solid #F1F1F1} .mem-tier-icon {width: 2.1rem; height: 2.1rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--color-primary) 10%, #FFF); color: var(--color-primary); font-size: .95rem; flex-shrink: 0} .mem-tier.active .mem-tier-icon {background: var(--color-primary); color: #FFF} .mem-tier-label {font-family: var(--font-headings); font-weight: 700; font-size: .9rem; color: var(--color-body); line-height: 1.2} /* Tier NAME, for clubs whose flyer names its tiers ("Community Pillar") rather than pricing them anonymously. Sits above the amount because the name is what the supporter is choosing. Tiers with no DisplayName never render this element, so priced-only clubs are unaffected. */ .mem-tier-name {font-family: var(--font-headings); font-weight: 700; font-size: .95rem; color: var(--color-primary); line-height: 1.2} .mem-tier-name + .mem-tier-label {font-size: .8rem; font-weight: 600; color: #6B7280} .mem-tier-top:has(.mem-tier-name) {flex-wrap: wrap} .mem-tier-top:has(.mem-tier-name) .mem-tier-name, .mem-tier-top:has(.mem-tier-name) .mem-tier-label {flex: 1 1 100%} .mem-tier-benefits {list-style: none; margin: 0; padding: .9rem 1rem 1rem; flex: 1 1 auto; display: flex; flex-direction: column; gap: .5rem} /* A flyer can name and price its tiers without listing benefits. The empty list still holds its flex space so every price bar lines up along the bottom, but drops the padding so the card does not show a mysterious gap. */ .mem-tier-benefits:empty {padding: .5rem} .mem-tier-benefits li {position: relative; padding-left: 1rem; font-size: .81rem; line-height: 1.35; color: #4B5563} .mem-tier-benefits li::before {content: ""; position: absolute; left: 0; top: .5em; width: .38rem; height: .38rem; border-radius: 50%; background: var(--color-primary)} .mem-tier-price {display: flex; align-items: baseline; justify-content: center; gap: .3rem; padding: .7rem 1rem; background: var(--color-primary); color: #FFF; font-family: var(--font-headings); font-weight: 700; font-size: 1.25rem; margin-top: auto} .mem-tier-price span {font-size: .78rem; font-weight: 600; opacity: .9} .mem-tier-selected {padding: .5rem 1rem; text-align: center; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, #FFF)} @media (max-width: 900px) { .mem-tiers {grid-template-columns: repeat(2, minmax(0, 1fr))} } @media (max-width: 560px) { .mem-tiers {grid-template-columns: 1fr} } /* Impact lines — the short "what your gift does" list a giving-club flyer runs under its intro. The flanking dashes are markers, not content, so the text stays copy-pasteable and screen readers do not announce them. */ .mem-impact {list-style: none; margin: 1.5rem auto 0; padding: 0; max-width: 44rem; display: flex; flex-direction: column; gap: .5rem} .mem-impact li {font-size: .96rem; line-height: 1.45; color: #6B7280; font-weight: 600; text-align: center} .mem-impact li::before {content: "- "; color: var(--color-primary)} .mem-impact li::after {content: " -"; color: var(--color-primary)} .pf-subtitle + .pf-subtitle {margin-top: 1rem} /* A tagline that sits OUTSIDE .pf-header does not inherit its text-align:center, so a .pf-subtitle used on its own centres its 38rem BOX while the text stays left inside it, which reads as off-centre to the left. This centres the text too. */ .mem-tagline {text-align: center; margin: 0 auto 2rem; font-weight: 600; letter-spacing: .08em} /* Funding-source choice (political teams) */ .mem-funding {display: flex; flex-direction: column; gap: .65rem; margin-bottom: 1rem} .mem-funding-opt {display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.15rem; border: 1.5px solid #ECECEC; background: #FFF; border-radius: 12px; cursor: pointer; transition: border-color .18s, background .18s; text-align: left; font-family: inherit} .mem-funding-opt:hover:not(:disabled) {border-color: color-mix(in srgb, var(--color-primary) 35%, #ECECEC); background: color-mix(in srgb, var(--color-primary) 3%, #FFF)} .mem-funding-opt:disabled {cursor: not-allowed; opacity: .65} .mem-funding-opt.active {border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 7%, #FFF); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 12%, transparent)} .mem-funding-opt strong {font-family: var(--font-headings); font-size: .85rem; color: var(--color-body); letter-spacing: .04em} .mem-funding-opt span {font-size: .82rem; color: #6B7280; line-height: 1.45} /* Pledge / acknowledgement card */ .mem-pledge {border: 1px solid #ECECEC; border-radius: 12px; padding: 1rem 1.15rem; background: #FAFAFA} .mem-pledge .pf-checkbox span {font-size: .82rem; color: #4B5563; line-height: 1.55} /* ========================================================================= Donation Form-specific styles (DonationForm.razor + InterfaceProgressGauge) ========================================================================= */ /* InterfaceProgressGauge - Bootstrap-based replacement for Telerik RadLinearGauge */ .progress-gauge{margin:1.25rem 0 1.5rem; padding:1.1rem 1.25rem; background:#FFFFFF; border:1px solid #E5E7EB; border-radius:.75rem; box-shadow:0 1px 3px rgba(15,23,42,.04)} .progress-gauge-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:.65rem} .progress-gauge-label{display:flex; align-items:center; gap:.5rem; color:#475569; font-size:.85rem; font-weight:600} .progress-gauge-label i{color:var(--color-primary)} .progress-gauge-percent{color:var(--color-primary); font-size:1.05rem; font-weight:700; letter-spacing:.02em} .progress-gauge-track{position:relative; height:14px; background:#F1F5F9; border-radius:999px; overflow:hidden} .progress-gauge-fill{position:absolute; left:0; top:0; bottom:0; background:linear-gradient(90deg, var(--color-primary), var(--color-secondary)); border-radius:999px; transition:width .8s cubic-bezier(.4,0,.2,1)} .progress-gauge-numbers{display:flex; align-items:baseline; justify-content:space-between; margin-top:.6rem; font-size:.78rem} .progress-gauge-raised{display:flex; flex-direction:column; align-items:flex-start} .progress-gauge-raised-amount{color:var(--color-body); font-size:1.05rem; font-weight:700} .progress-gauge-raised-label{color:#94A3B8; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; margin-top:-.1rem} .progress-gauge-goal{display:flex; flex-direction:column; align-items:flex-end} .progress-gauge-goal-amount{color:#64748B; font-size:1.05rem; font-weight:600} .progress-gauge-goal-label{color:#94A3B8; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; margin-top:-.1rem} /* DonationForm header block (campaign/team hero + headline + content) */ /* Header + content run the full container width so the editable content lines up with the donation form grid below (Christine 2026-07-13). */ .pf-donate-header{margin:0 auto 1.5rem; max-width:none; text-align:center} .pf-donate-hero{display:block; max-width:100%; height:auto; margin:0 auto 1.25rem; border-radius:.75rem; box-shadow:0 6px 24px rgba(15,23,42,.08)} .pf-donate-headline{font-size:1.85rem; line-height:1.2; font-weight:700; color:var(--color-primary); margin:.25rem 0 .75rem} .pf-donate-content{color:#475569; font-size:.98rem; line-height:1.55; max-width:none; margin:0 auto} .pf-donate-content p{margin:.5rem 0} /* Neutralize Content-Manager editor chrome that leaks onto the public form: the resize wrapper's dashed outline + handle box, AND editor.css's `.editor-table-responsive td/th` 1px gridline border (editor.css is loaded globally). Christine's rule: the public form NEVER shows a border around tables/content. The C# EditorContentSanitizer also strips the handle span + contenteditable from the saved HTML. */ .pf-donate-content .table-resize-wrapper{outline:none !important; display:block !important} .pf-donate-content .table-resize-handle{display:none !important} .pf-donate-content table, .pf-donate-content td, .pf-donate-content th{border:none !important} /* Bug 73453: the sanitizer now lets class="editor-table-responsive" reach the public form, which is what makes editor tables stack on a phone. It also lets editor.css's 1px #CCC gridline reach it, and the rule above only covered /donate. Campaign sales and waivers render the same sanitized content with no equivalent, so scope the border reset to the shared public layout rather than add a third per-page rule that the next public form would silently miss. */ .interface-layout .editor-table-responsive, .interface-layout .editor-table-responsive td, .interface-layout .editor-table-responsive th{border:none !important} /* Amount preset grid - 3 cols x 2 rows + Other button below */ .pf-amount-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:.55rem; margin-top:1rem} .pf-amount-btn{appearance:none; cursor:pointer; padding:.85rem 0; border:1.5px solid #E2E8F0; background:#FFFFFF; color:var(--color-primary); font-family:var(--font-primary); font-size:1.05rem; font-weight:600; border-radius:.5rem; transition:all .15s ease} .pf-amount-btn:hover:not(:disabled){border-color:var(--color-primary); transform:translateY(-1px); box-shadow:0 4px 12px rgba(15,23,42,.08)} .pf-amount-btn.selected{background:var(--color-primary) !important; color:#FFFFFF !important; border-color:var(--color-primary) !important; box-shadow:0 2px 8px rgba(15,23,42,.15)} .pf-amount-btn:disabled{opacity:.55; cursor:not-allowed} .pf-amount-btn-other{grid-column:1 / -1; padding:.75rem 0; font-size:.95rem; font-weight:500; color:#64748B} .pf-amount-btn-other.selected{font-weight:600} /* Recurrence toggle - 3 wide segments */ .pf-recurrence{display:flex; max-width:none} .pf-recurrence .pf-segmented-btn{flex:1 1 0; min-width:0} /* Fee + anonymous toggle rows */ .pf-fee-row{margin-bottom:.65rem} .pf-fee-label{display:flex; align-items:flex-start; gap:.6rem; cursor:pointer; padding:.55rem .7rem; border-radius:.5rem; transition:background .12s ease} .pf-fee-label:hover{background:#F8FAFC} .pf-fee-label input[type=checkbox]{margin-top:.18rem; accent-color:var(--color-primary); width:1.05rem; height:1.05rem; flex-shrink:0; cursor:pointer} .pf-fee-text{color:#475569; font-size:.85rem; line-height:1.4} /* Honor-of toggle inside the tribute card - tighter than the main segmented */ .pf-section .pf-segmented{max-width:14rem} @media (max-width:768px){ .pf-amount-grid{grid-template-columns:1fr 1fr} .pf-donate-headline{font-size:1.45rem} .progress-gauge-numbers{font-size:.72rem} } /* Demo banner — shown above the donation form when the team has no StripeClientID configured. Soft amber tone so it reads as a notice, not an error. */ .pf-demo-banner{max-width:64rem; margin:0 auto 1.25rem; padding:.85rem 1.1rem; background:#FFF7ED; border:1px solid #FBD38D; border-radius:.55rem; color:#7B341E; font-size:.92rem; line-height:1.5; display:flex; align-items:flex-start; gap:.7rem} .pf-demo-banner i{flex-shrink:0; margin-top:.18rem; color:#C05621; font-size:1.05rem} .pf-demo-banner strong{color:#7B341E} /* CSS mockup of Stripe Payment Element for demo-mode teams (no Stripe configured). Renders in place of the real Stripe iframe so prospects see what donors will see. Fields are disabled visually — no real input, no charge. */ .pf-stripe-mock{margin:0 -.25rem 1rem; padding:.85rem 1rem; background:#FFFFFF; border:1px solid #E5E7EB; border-radius:.5rem} .pf-stripe-mock-tabs{display:flex; gap:1.25rem; border-bottom:1px solid #E5E7EB; margin:-.85rem -1rem .85rem; padding:.7rem 1rem 0} .pf-stripe-mock-tab{padding:.5rem .25rem; font-size:.88rem; color:#6B7280; cursor:default} .pf-stripe-mock-tab.active{color:#0570DE; font-weight:600; border-bottom:2px solid #0570DE; margin-bottom:-1px} .pf-stripe-mock-body{display:flex; flex-direction:column; gap:.85rem} .pf-stripe-mock-row{display:grid; grid-template-columns:1fr 1fr; gap:.85rem} .pf-stripe-mock-field label{display:block; font-size:.78rem; color:#4B5563; margin-bottom:.3rem} .pf-stripe-mock-field input, .pf-stripe-mock-field select{width:100%; padding:.6rem .7rem; font-size:.95rem; line-height:1.4; color:#1F2937; background:#FAFAFA; border:1px solid #D1D5DB; border-radius:.35rem; box-shadow:inset 0 1px 2px rgba(0,0,0,.04); cursor:not-allowed} .pf-stripe-mock-field input:disabled, .pf-stripe-mock-field select:disabled{opacity:.85} .pf-stripe-mock-field input::placeholder{color:#9CA3AF} /* ========================================================================= PUBLIC AUCTION INTERFACE — landing, item grid, item details + bidding. Shared across ALL teams (AuctionHome / AuctionItems / AuctionItemDetails). Structural only; all colors come from the team's CSS variables. ========================================================================= */ /* NumericTextBox (bid amount) — match the shared 48px control height (mandatory rule) */ .interface-layout .ntb-wrapper {width: 100%} .interface-layout .ntb-input-group {position: relative; width: 100%} .interface-layout .ntb-input {height: 48px !important; min-height: 48px !important; width: 100%; padding: 0 .75rem; font-family: var(--font-primary) !important; font-weight: 700 !important; font-size: 1rem !important; color: #464646 !important; background: #FFF; border: 1px solid #ced4da; border-radius: .375rem} .interface-layout .ntb-input.has-prefix {padding-left: 1.6rem} .interface-layout .ntb-input:focus {outline: none; border-color: #adb5bd; box-shadow: none} .interface-layout .ntb-prefix {position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); color: #777; font-weight: 700; z-index: 2; pointer-events: none} /* Page titles */ .interface-layout .auction-title {font-family: var(--font-headings); color: var(--color-primary); font-size: 1.9rem; font-weight: 700; margin: 0 0 1.25rem; text-align: center} @media (min-width: 992px) {.interface-layout .auction-title {text-align: left}} /* Generic bordered box (replaces legacy .border-all .rounded) */ .interface-layout .auction-box {border: 1px solid #E5E7EB; border-radius: .75rem; background: #FFF; padding: 1.25rem; box-shadow: 0 1px 2px rgba(15,23,42,.04); margin-bottom: 1.25rem} /* ---- Landing (AuctionHome) ---- */ .interface-layout .auction-sidebar {position: sticky; top: 13.5rem} @media (max-width: 992px) {.interface-layout .auction-sidebar {position: static}} .interface-layout .auction-cta {width: 100%; padding: .85rem 1rem; font-weight: 700; font-size: 1.02rem; border-radius: .6rem; margin-bottom: 1.25rem} .interface-layout .auction-closed-badge {display: flex; align-items: center; justify-content: center; width: 100%; padding: .8rem 1rem; margin-bottom: 1.25rem; border-radius: .6rem; background: color-mix(in srgb, var(--color-tertiary) 10%, #FFF); border: 1px solid color-mix(in srgb, var(--color-tertiary) 30%, #FFF); color: var(--color-tertiary); font-weight: 700; font-size: 1.05rem; text-align: center} .interface-layout .auction-dt {text-align: center; padding: .75rem 0; border-bottom: 1px dashed #E5E7EB} .interface-layout .auction-dt:first-child {padding-top: 0} .interface-layout .auction-dt-label {font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #6B7280; font-weight: 700; margin-bottom: .25rem} .interface-layout .auction-dt-value {font-size: .98rem; color: var(--color-body); font-weight: 600} .interface-layout .auction-raised {text-align: center; padding-top: 1rem} .interface-layout .auction-raised-label {font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-secondary); font-weight: 700; margin-bottom: .15rem} .interface-layout .auction-raised-amount {font-family: var(--font-headings); font-size: 2.3rem; font-weight: 800; color: var(--color-primary); line-height: 1.1; letter-spacing: -.02em} .interface-layout .auction-banner {width: 100%; border-radius: .75rem; margin-bottom: 1.5rem; box-shadow: 0 6px 24px rgba(15,23,42,.08)} .interface-layout .auction-description {font-size: 1rem; line-height: 1.6; color: var(--color-body)} .interface-layout .auction-description img {max-width: 100%; height: auto} .interface-layout .auction-sponsors-heading {font-family: var(--font-headings); color: var(--color-primary); font-size: 1.4rem; font-weight: 700; text-align: center; margin: 2rem 0 1rem} .interface-layout .auction-sponsors-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 1rem} @media (max-width: 575px) {.interface-layout .auction-sponsors-grid {grid-template-columns: 1fr}} .interface-layout .auction-sponsor-card {border: 1px solid #E5E7EB; border-radius: .75rem; background: #FFF; padding: 1rem; text-align: center; box-shadow: 0 1px 2px rgba(15,23,42,.04)} .interface-layout .auction-sponsor-logo {max-height: 100px; max-width: 100%; object-fit: contain} .interface-layout .auction-sponsor-name {margin-top: .5rem; font-size: .95rem; font-weight: 600; color: var(--color-body)} /* ---- Empty / unavailable states ---- */ .interface-layout .auction-unavailable, .interface-layout .auction-empty {text-align: center; padding: 3rem 1rem; color: #6B7280} .interface-layout .auction-unavailable i, .interface-layout .auction-empty i {font-size: 2.75rem; color: var(--color-primary); margin-bottom: 1rem; opacity: .8} .interface-layout .auction-unavailable h2 {font-family: var(--font-headings); color: var(--color-primary); font-size: 1.4rem; font-weight: 700; margin-bottom: .5rem} /* ---- Items grid header / toolbar (AuctionItems + details header) ---- */ .interface-layout .auction-items-header {display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .75rem; border-bottom: 1px solid #E5E7EB; margin-bottom: 1.25rem} .interface-layout .auction-items-title {font-family: var(--font-headings); color: var(--color-primary); font-size: 1.5rem; font-weight: 700; margin: 0} .interface-layout .auction-nav-icons {display: flex; gap: .75rem; flex-shrink: 0} .interface-layout .auction-nav-icon {display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; color: var(--color-tertiary); font-size: 1.15rem; cursor: pointer; transition: background .15s} .interface-layout .auction-nav-icon:hover {background: #F1F1F1; color: var(--color-tertiary)} .interface-layout .auction-items-toolbar {display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem} .interface-layout .auction-items-count {font-weight: 600; color: #6B7280} .interface-layout .auction-search {display: flex; gap: .5rem; flex-wrap: nowrap} .interface-layout .auction-search .form-control {min-width: 12rem} @media (max-width: 575.98px) {.interface-layout .auction-search {flex-wrap: wrap; width: 100%} .interface-layout .auction-search .form-control {min-width: 0; flex: 1 1 100%}} .interface-layout .auction-btn-clear {background: #F3F4F6; color: #6B7280; border: 1px solid #E5E7EB; font-weight: 600} .interface-layout .auction-btn-clear:hover {background: #E5E7EB; color: var(--color-body)} /* ---- Items grid ---- */ .interface-layout .auction-items-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem} @media (max-width: 992px) {.interface-layout .auction-items-grid {grid-template-columns: repeat(2, 1fr)}} @media (max-width: 575px) {.interface-layout .auction-items-grid {grid-template-columns: 1fr}} .interface-layout .auction-item-card {border: 1px solid #E5E7EB; border-radius: .75rem; background: #FFF; padding: 1rem; cursor: pointer; transition: border-color .18s, box-shadow .18s, transform .12s; box-shadow: 0 1px 2px rgba(15,23,42,.04); display: flex; flex-direction: column} .interface-layout .auction-item-card:hover {border-color: color-mix(in srgb, var(--color-primary) 40%, #E5E7EB); box-shadow: 0 8px 24px -12px rgba(15,23,42,.18); transform: translateY(-2px)} .interface-layout .auction-item-photo {display: flex; align-items: center; justify-content: center; height: 200px; margin-bottom: .85rem; overflow: hidden; border-radius: .5rem; background: #FAFAFA} .interface-layout .auction-item-photo img {max-height: 200px; max-width: 100%; object-fit: contain} .interface-layout .auction-item-noimg {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #D1D5DB; font-size: 2.5rem} .interface-layout .auction-item-noimg-lg {height: 220px} .interface-layout .auction-item-name {font-family: var(--font-headings); font-weight: 700; font-size: 1.05rem; color: var(--color-primary); text-align: center; margin-bottom: .5rem} .interface-layout .auction-item-desc {font-size: .85rem; color: #6B7280; line-height: 1.45; margin-bottom: .75rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden} .interface-layout .auction-item-desc img {max-width: 100%; height: auto} .interface-layout .auction-item-meta {display: flex; align-items: center; justify-content: space-between; font-size: .82rem; padding: .15rem 0; margin-top: auto} .interface-layout .auction-meta-label {color: var(--color-secondary); font-weight: 700; text-transform: lowercase} .interface-layout .auction-meta-value {color: var(--color-body); font-weight: 600} /* ---- Item details ---- */ .interface-layout .auction-detail-side {position: sticky; top: 13.5rem} @media (max-width: 992px) {.interface-layout .auction-detail-side {position: static}} .interface-layout .auction-photo-box {border: 1px solid #E5E7EB; border-radius: .75rem; background: #FAFAFA; padding: 1rem; text-align: center; margin-bottom: 1rem} .interface-layout .auction-photo-box img {max-height: 320px; max-width: 100%; object-fit: contain; border-radius: .5rem} .interface-layout .auction-value-box {border: 1px solid #E5E7EB; border-radius: .75rem; background: #FFF; padding: 1rem; text-align: center; box-shadow: 0 1px 2px rgba(15,23,42,.04)} .interface-layout .auction-value-label {font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-secondary); font-weight: 700; margin-bottom: .15rem} .interface-layout .auction-value-amount {font-family: var(--font-headings); font-size: 1.8rem; font-weight: 800; color: var(--color-primary); line-height: 1.1} .interface-layout .auction-item-heading {font-family: var(--font-headings); color: var(--color-primary); font-size: 1.7rem; font-weight: 700; margin: 0 0 1rem; text-align: center} @media (min-width: 768px) {.interface-layout .auction-item-heading {text-align: left}} .interface-layout .auction-bid-info-grid {display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap} .interface-layout .auction-info-row {display: flex; align-items: center; gap: .75rem; padding: .25rem 0} .interface-layout .auction-info-label {font-weight: 700; color: var(--color-body); min-width: 9.5rem} .interface-layout .auction-info-value {color: var(--color-body)} .interface-layout .auction-bid-window {text-align: right; min-width: 12rem} @media (max-width: 575px) {.interface-layout .auction-bid-window {text-align: left}} .interface-layout .auction-bid-form {border-color: color-mix(in srgb, var(--color-primary) 35%, #E5E7EB)} .interface-layout .auction-bid-actions {display: flex; gap: .75rem; justify-content: flex-end; margin-top: .5rem} .interface-layout .auction-bid-actions .btn {min-width: 9rem; padding: .65rem 1.25rem; font-weight: 700} .interface-layout .auction-detail-block {margin-top: 1.5rem} .interface-layout .auction-detail-label {font-family: var(--font-headings); color: var(--color-primary); font-size: 1.1rem; font-weight: 700; margin-bottom: .35rem} .interface-layout .auction-detail-body {font-size: .95rem; line-height: 1.6; color: var(--color-body)} .interface-layout .auction-detail-body img {max-width: 100%; height: auto} /* ---- Bid confirmation ---- */ .interface-layout .auction-confirm {text-align: center; padding: 1.5rem 1rem; animation: pf-fade-in-up .5s ease both} .interface-layout .auction-confirm-icon {display: inline-flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; border-radius: 50%; background: color-mix(in srgb, var(--color-secondary) 14%, #FFF); color: var(--color-secondary); font-size: 2.25rem; margin-bottom: 1rem} .interface-layout .auction-confirm h2 {font-family: var(--font-headings); color: var(--color-secondary); font-size: 1.85rem; font-weight: 700; margin-bottom: .25rem} .interface-layout .auction-confirm-sub {color: #6B7280; font-size: 1.05rem; margin-bottom: 1.5rem} .interface-layout .auction-confirm-stats {display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap} .interface-layout .auction-confirm-stat {display: flex; flex-direction: column; gap: .15rem; min-width: 6rem} .interface-layout .auction-confirm-stat-label {font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-secondary); font-weight: 700} .interface-layout .auction-confirm-stat-value {font-family: var(--font-headings); font-size: 1.5rem; font-weight: 700; color: var(--color-body)} /* Bidder registration consent checkbox */ .interface-layout .auction-consent {display: flex; align-items: flex-start; gap: .6rem; margin: 1rem 0 1.25rem; padding: .85rem 1rem; background: #FAFAFA; border: 1px solid #F0F0F0; border-radius: 10px; font-size: .85rem; line-height: 1.45; color: #4B5563; cursor: pointer} .interface-layout .auction-consent input[type="checkbox"] {margin-top: .15rem; width: 1.05rem; height: 1.05rem; accent-color: var(--color-primary); flex-shrink: 0; cursor: pointer} .interface-layout .auction-consent strong {color: var(--color-body)} /* "Bidding as" summary on the gated bid form */ .interface-layout .auction-bidder-summary {display: flex; align-items: center; gap: .65rem; padding: .75rem 1rem; background: #FAFAFA; border: 1px solid #F0F0F0; border-radius: 10px; margin-bottom: 1rem; font-size: .9rem; color: var(--color-body)} .interface-layout .auction-bidder-summary i {color: var(--color-primary); font-size: 1.1rem; flex-shrink: 0} .interface-layout .auction-bidder-name {font-weight: 700; display: block} .interface-layout .auction-bidder-card {color: #6B7280; font-size: .82rem; display: block; margin-top: .1rem} /* Bid amount input — $ prefix, commits on every keystroke (no blur race) */ .interface-layout .auction-bid-amount-wrap {position: relative} .interface-layout .auction-bid-amount-prefix {position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: #777; font-weight: 700; pointer-events: none; z-index: 2} .interface-layout .auction-bid-amount-input {padding-left: 1.6rem !important} /***********************/ /*** VOLUNTEER TASK CALENDAR (vtc) ***/ /* Public Volunteer Task Calendar interface — structural only; all colors come from team tokens */ /* Task-group header (banner + title + description) */ .interface-layout .vtc-group-header {text-align: center; margin-bottom: 1.5rem} .interface-layout .vtc-group-banner {width: 100%; max-height: 320px; object-fit: cover; border-radius: 14px; margin-bottom: 1rem} .interface-layout .vtc-group-title {font-family: var(--font-headings); color: var(--color-primary); font-size: 1.6rem; font-weight: 700; margin-bottom: .5rem} .interface-layout .vtc-group-desc {color: #4B5563; font-size: 1rem; line-height: 1.5; max-width: 720px; margin: 0 auto} /* Hero */ .interface-layout .vtc-hero {text-align: center; margin: .5rem 0 1.75rem} .interface-layout .vtc-hero-title {font-family: var(--font-headings); color: var(--color-primary); font-size: 2rem; font-weight: 700; margin-bottom: .35rem} .interface-layout .vtc-hero-sub {color: #6B7280; font-size: 1.05rem; margin: 0} /* Filter bar */ .interface-layout .vtc-filters {display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.5rem} .interface-layout .vtc-filter-search {position: relative; flex: 1 1 240px; min-width: 200px} .interface-layout .vtc-filter-search i {position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: #9CA3AF; pointer-events: none; z-index: 2} .interface-layout .vtc-filter-search input.form-control {padding-left: 2.4rem} .interface-layout .vtc-filter-select {flex: 0 1 200px; min-width: 170px} .interface-layout .vtc-filter-category {flex: 2 1 300px; min-width: 240px} /* Count line */ .interface-layout .vtc-count {color: #6B7280; font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .75rem} /* Date heading */ .interface-layout .vtc-date-heading {font-family: var(--font-headings); color: var(--color-body); font-size: 1.05rem; font-weight: 700; margin: 1.5rem 0 .75rem; padding-bottom: .4rem; border-bottom: 2px solid #EEF0F2} /* Task card */ .interface-layout .vtc-card {display: flex; align-items: center; gap: 1rem; justify-content: space-between; padding: 1.1rem 1.25rem; margin-bottom: .85rem; background: #FFF; border: 1px solid #EBEDF0; border-radius: 14px; box-shadow: 0 1px 3px rgba(16,24,40,.04); transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease} .interface-layout .vtc-card:hover {box-shadow: 0 6px 20px rgba(16,24,40,.10); transform: translateY(-2px); border-color: #DDE1E6} .interface-layout .vtc-card-main {min-width: 0; flex: 1 1 auto} .interface-layout .vtc-card-title {font-weight: 700; font-size: 1.1rem; color: var(--color-body); margin-bottom: .4rem} .interface-layout .vtc-card-meta {display: flex; align-items: center; gap: .5rem; color: #5B6470; font-size: .92rem; margin-top: .2rem} .interface-layout .vtc-card-meta i {color: var(--color-primary); width: 1rem; text-align: center; flex-shrink: 0} .interface-layout .vtc-card-location {color: #5B6470; text-decoration: underline; text-underline-offset: 2px} .interface-layout .vtc-card-location:hover {color: var(--color-primary)} .interface-layout .vtc-card-action {flex-shrink: 0} .interface-layout .vtc-card-action .btn {min-width: 120px} /* Empty / no-match states */ .interface-layout .vtc-empty {text-align: center; padding: 3rem 1rem; color: #6B7280} .interface-layout .vtc-empty-icon {font-size: 3rem; color: var(--color-primary); opacity: .7; margin-bottom: 1rem; display: block} .interface-layout .vtc-empty h3 {color: var(--color-body); font-weight: 700; margin-bottom: .35rem} .interface-layout .vtc-empty p {margin-bottom: 1rem} /* Sign-up modal */ .interface-layout .vtc-modal-backdrop {position: fixed; inset: 0; background: rgba(16,24,40,.55); display: flex; align-items: flex-start; justify-content: center; padding: 2.5rem 1rem; z-index: 9500; overflow-y: auto} .interface-layout .vtc-modal {position: relative; background: #FFF; width: 100%; max-width: 640px; border-radius: 16px; box-shadow: 0 24px 60px rgba(16,24,40,.28); padding: 1.75rem; margin: auto} .interface-layout .vtc-modal-close {position: absolute; top: .85rem; right: 1rem; background: none; border: none; color: #9CA3AF; font-size: 1.3rem; cursor: pointer; line-height: 1; padding: .25rem} .interface-layout .vtc-modal-close:hover {color: var(--color-body)} .interface-layout .vtc-modal-title {font-family: var(--font-headings); color: var(--color-primary); font-size: 1.5rem; font-weight: 700; margin-bottom: .75rem} .interface-layout .vtc-modal-task {background: #F8F9FB; border: 1px solid #EEF0F2; border-radius: 12px; padding: 1rem 1.15rem; margin-bottom: 1.25rem} .interface-layout .vtc-modal-task-title {font-weight: 700; font-size: 1.1rem; color: var(--color-body); margin-bottom: .4rem} .interface-layout .vtc-modal-task-meta {display: flex; align-items: center; gap: .5rem; color: #5B6470; font-size: .9rem; margin-top: .25rem} .interface-layout .vtc-modal-task-meta i {color: var(--color-primary); width: 1rem; text-align: center; flex-shrink: 0} .interface-layout .vtc-modal-task-desc {margin-top: .65rem; padding-top: .65rem; border-top: 1px dashed #E2E5E9; color: #4B5563; font-size: .9rem; line-height: 1.5} .interface-layout .vtc-modal-task-contact {margin-top: .65rem; padding-top: .65rem; border-top: 1px dashed #E2E5E9; color: #5B6470; font-size: .85rem; display: flex; flex-wrap: wrap; gap: .35rem} .interface-layout .vtc-modal-contact-label {font-weight: 700; color: var(--color-body)} .interface-layout .vtc-modal-actions {display: flex; gap: .75rem; justify-content: flex-end; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #EEF0F2} .interface-layout .vtc-btn-cancel {background: #F1F3F5; color: #41464B; border: 1px solid #E2E5E9} .interface-layout .vtc-btn-cancel:hover {background: #E6E9EC; color: #41464B} /* Thank-you state */ .interface-layout .vtc-thankyou {text-align: center; padding: 1rem .5rem .5rem} .interface-layout .vtc-thankyou-icon {font-size: 3.25rem; color: var(--color-secondary); margin-bottom: .75rem; display: block} .interface-layout .vtc-thankyou h2 {font-family: var(--font-headings); color: var(--color-primary); font-size: 1.6rem; font-weight: 700; margin-bottom: .5rem} .interface-layout .vtc-thankyou p {color: #5B6470; max-width: 420px; margin: 0 auto 1.25rem} .interface-layout .vtc-thankyou-task {background: #F8F9FB; border: 1px solid #EEF0F2; border-radius: 12px; padding: 1rem 1.15rem; margin-bottom: 1.5rem; text-align: left} /* Mobile */ @media (max-width: 575.98px) { .interface-layout .vtc-card {flex-direction: column; align-items: stretch; gap: .75rem} .interface-layout .vtc-card-action .btn {width: 100%} .interface-layout .vtc-filter-select {flex: 1 1 100%} .interface-layout .vtc-modal {padding: 1.25rem} .interface-layout .vtc-modal-actions {flex-direction: column-reverse} .interface-layout .vtc-modal-actions .btn {width: 100%} } /* ===================================================================== */ /* EVENT SESSION SIGN UP (ess-*) — generic public event sign-up flow */ /* Structural only; colors/fonts come from the per-team brand tokens. */ /* ===================================================================== */ /* Event banner + hero (session-list screen) */ .interface-layout .ess-banner {width: 100%; max-height: 340px; object-fit: cover; border-radius: 14px; margin-bottom: 1.25rem; box-shadow: 0 1px 3px rgba(16,24,40,.06)} .interface-layout .ess-hero {margin: .25rem 0 1.5rem} .interface-layout .ess-event-title {font-family: var(--font-headings); color: var(--color-primary); font-size: 2rem; font-weight: 700; margin-bottom: .5rem} .interface-layout .ess-event-desc {color: #4B5563; font-size: 1rem; line-height: 1.55} .interface-layout .ess-event-desc img {max-width: 100%; height: auto} .interface-layout .ess-section-label {font-family: var(--font-headings); color: var(--color-body); font-size: 1.15rem; font-weight: 700; margin: 1.75rem 0 1rem} /* Search */ .interface-layout .ess-search {position: relative; margin-bottom: 1.25rem; max-width: 420px} .interface-layout .ess-search i {position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: #9CA3AF; pointer-events: none} .interface-layout .ess-search .form-control {padding-left: 2.4rem} /* Date grouping + session cards */ .interface-layout .ess-date-heading {font-family: var(--font-headings); color: var(--color-body); font-size: 1.05rem; font-weight: 700; margin: 1.5rem 0 .75rem; padding-bottom: .4rem; border-bottom: 2px solid #EEF0F2} .interface-layout .ess-card {display: flex; align-items: center; gap: 1rem; justify-content: space-between; padding: 1.1rem 1.25rem; margin-bottom: .85rem; background: #FFF; border: 1px solid #EBEDF0; border-radius: 14px; box-shadow: 0 1px 3px rgba(16,24,40,.04); transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease} .interface-layout .ess-card:hover {box-shadow: 0 6px 20px rgba(16,24,40,.10); transform: translateY(-2px); border-color: #DDE1E6} .interface-layout .ess-card-main {min-width: 0; flex: 1 1 auto} .interface-layout .ess-card-title {font-weight: 700; font-size: 1.1rem; color: var(--color-body); margin-bottom: .4rem} .interface-layout .ess-card-meta {display: flex; align-items: center; gap: .5rem; color: #5B6470; font-size: .92rem; margin-top: .2rem} .interface-layout .ess-card-meta i {color: var(--color-primary); width: 1rem; text-align: center; flex-shrink: 0} .interface-layout .ess-card-location {color: #5B6470; text-decoration: underline; text-underline-offset: 2px} .interface-layout .ess-card-location:hover {color: var(--color-primary)} .interface-layout .ess-card-spots {display: inline-block; margin-top: .5rem; font-size: .8rem; font-weight: 600; color: #5B6470; background: #F1F3F5; border-radius: 999px; padding: .15rem .65rem} .interface-layout .ess-card-spots-low {color: #FFF; background: var(--color-tertiary)} .interface-layout .ess-card-action {flex-shrink: 0} .interface-layout .ess-card-action .btn {min-width: 120px} /* Empty / notice states */ .interface-layout .ess-empty {text-align: center; padding: 3rem 1rem; color: #6B7280} .interface-layout .ess-empty-icon {font-size: 3rem; color: var(--color-primary); opacity: .7; margin-bottom: 1rem; display: block} .interface-layout .ess-empty h3 {color: var(--color-body); font-weight: 700; margin-bottom: .35rem} .interface-layout .ess-empty p {margin-bottom: 1rem} /* Sign-up screen */ .interface-layout .ess-back {display: inline-flex; align-items: center; gap: .45rem; color: var(--color-primary); font-weight: 600; text-decoration: none; margin-bottom: 1rem; cursor: pointer} .interface-layout .ess-back:hover {text-decoration: underline} .interface-layout .ess-signup-heading {font-family: var(--font-headings); color: var(--color-primary); font-size: 1.6rem; font-weight: 700; margin-bottom: 1rem} .interface-layout .ess-detail-card {background: #F8F9FB; border: 1px solid #EEF0F2; border-radius: 12px; padding: 1.1rem 1.25rem; margin-bottom: 1.5rem} .interface-layout .ess-detail-event {font-weight: 700; font-size: 1.05rem; color: var(--color-body); margin-bottom: .5rem} .interface-layout .ess-detail-meta {display: flex; align-items: center; gap: .5rem; color: #5B6470; font-size: .92rem; margin-top: .25rem} .interface-layout .ess-detail-meta i {color: var(--color-primary); width: 1rem; text-align: center; flex-shrink: 0} .interface-layout .ess-detail-meta a {color: #5B6470; text-decoration: underline; text-underline-offset: 2px} .interface-layout .ess-detail-meta a:hover {color: var(--color-primary)} .interface-layout .ess-detail-instructions {margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed #E2E5E9; color: #4B5563; font-size: .92rem; line-height: 1.55} .interface-layout .ess-detail-contact {margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed #E2E5E9; color: #5B6470; font-size: .88rem} .interface-layout .ess-detail-contact-label {font-weight: 700; color: var(--color-body); margin-right: .35rem} .interface-layout .ess-detail-contact a {color: var(--color-primary)} .interface-layout .ess-detail-spots {margin-top: .75rem; font-size: .9rem; font-weight: 600; color: var(--color-secondary); display: flex; align-items: center; gap: .45rem} .interface-layout .ess-detail-spots i {width: 1rem; text-align: center} /* Individual / Organization toggle */ .interface-layout .ess-toggle {display: inline-flex; border: 1px solid #D7DBE0; border-radius: 10px; overflow: hidden; margin-bottom: 1.25rem} .interface-layout .ess-toggle-btn {background: #FFF; border: none; padding: .6rem 1.4rem; font-size: 1rem; color: #5B6470; cursor: pointer; display: flex; align-items: center; gap: .5rem; transition: background .12s ease, color .12s ease} .interface-layout .ess-toggle-btn + .ess-toggle-btn {border-left: 1px solid #D7DBE0} .interface-layout .ess-toggle-btn.active {background: var(--color-primary); color: #FFF} .interface-layout .ess-toggle-btn:not(.active):hover {background: #F1F1F1} .interface-layout .ess-phone-field {max-width: 320px} /* Actions */ .interface-layout .ess-actions {display: flex; gap: .75rem; align-items: center; margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid #EEF0F2} .interface-layout .ess-actions .btn {min-width: 200px} /* Confirmation + notice panels */ .interface-layout .ess-confirm {text-align: center; padding: 2rem 1rem .5rem} .interface-layout .ess-confirm-icon {font-size: 3.25rem; color: var(--color-secondary); margin-bottom: .75rem; display: block} .interface-layout .ess-confirm h2 {font-family: var(--font-headings); color: var(--color-primary); font-size: 1.6rem; font-weight: 700; margin-bottom: .5rem} .interface-layout .ess-confirm p {color: #5B6470; max-width: 460px; margin: 0 auto 1.25rem} .interface-layout .ess-confirm-summary {background: #F8F9FB; border: 1px solid #EEF0F2; border-radius: 12px; padding: 1rem 1.15rem; margin: 0 auto 1.5rem; max-width: 460px; text-align: left} .interface-layout .ess-confirm-session {font-weight: 700; font-size: 1.05rem; color: var(--color-body); margin-bottom: .4rem} .interface-layout .ess-confirm-meta {display: flex; align-items: center; gap: .5rem; color: #5B6470; font-size: .9rem; margin-top: .25rem} .interface-layout .ess-confirm-meta i {color: var(--color-primary); width: 1rem; text-align: center; flex-shrink: 0} .interface-layout .ess-notice {text-align: center; padding: 2.5rem 1rem .5rem; color: #6B7280} .interface-layout .ess-notice-icon {font-size: 3rem; color: var(--color-tertiary); opacity: .85; margin-bottom: 1rem; display: block} .interface-layout .ess-notice h2 {font-family: var(--font-headings); color: var(--color-body); font-weight: 700; margin-bottom: .5rem} .interface-layout .ess-notice p {margin-bottom: 1.25rem} /* Mobile */ @media (max-width: 575.98px) { .interface-layout .ess-card {flex-direction: column; align-items: stretch; gap: .75rem} .interface-layout .ess-card-action .btn {width: 100%} .interface-layout .ess-actions {flex-direction: column-reverse} .interface-layout .ess-actions .btn {width: 100%} .interface-layout .ess-toggle {width: 100%} .interface-layout .ess-toggle-btn {flex: 1 1 50%; justify-content: center} .interface-layout .ess-phone-field {max-width: 100%} } /* SOAM (49620): the square-ish logo rendered small against the 9em cap + 1em internal padding. Fill the header's available height instead. Header itself stays 12em (size unchanged). */ @media (min-width: 576.1px) { .interface-layout[data-team="49620"] .interface-logo {padding: .25em; max-height: 11em !important} } /* Diocese of La Crosse (49870): same small-logo issue as SOAM — fill the header's available height like Fairfax's does naturally. Header itself stays 12em (size unchanged). */ @media (min-width: 576.1px) { .interface-layout[data-team="49870"] .interface-logo {padding: .25em; max-height: 11em !important} } @media (max-width: 576px) { .interface-layout[data-team="49870"] .interface-logo {padding: .25em; max-height: 6.5em !important} }