/* assets/css/main.css */ @import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Rubik:wght@300;400;500;700&display=swap'); /* Link Bootstrap Icons in your HTML's if you use them: */ :root { --bcf-font-primary: 'Bree Serif', serif; --bcf-font-secondary: 'Rubik', sans-serif; --bcf-power-pink: #FF0080; --bcf-resilient-green: #06645F; --bcf-cool-gray-7c: #9a999a; --bcf-sturdy-grey-dark: #343a40; --bcf-white: #ffffff; --bcf-light-bg: #f8f9fa; --bcf-card-bg: var(--bcf-white); --bcf-border-color: #dee2e6; --bcf-light-green-tint: #e6f0ef; /* For info boxes */ --bcf-light-pink-tint: #fff0f7; /* For selected items */ } body { font-family: var(--bcf-font-secondary); color: var(--bcf-sturdy-grey-dark); background-color: var(--bcf-light-bg); font-size: 1rem; display: flex; flex-direction: column; min-height: 100vh; } main { flex-grow: 1; } /* --- Header --- */ .portal-header { background-color: var(--bcf-power-pink); color: var(--bcf-white); padding: 1rem 0; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .portal-header .navbar-brand img { max-height: 50px; } /* --- Step Indicator --- */ .step-indicator-wrapper { background-color: var(--bcf-white); padding: 1.25rem 0; border-bottom: 1px solid var(--bcf-border-color); position: sticky; top: 0; z-index: 1020; box-shadow: 0 1px 3px rgba(0,0,0,0.05); } .step-indicator { list-style: none; padding: 0; margin: 0 auto; display: flex; justify-content: space-between; max-width: 700px; position: relative; } .step-indicator li { flex: 1; text-align: center; font-family: var(--bcf-font-secondary); font-weight: 500; color: var(--bcf-cool-gray-7c); padding-bottom: 0.75rem; position: relative; cursor: default; font-size: 0.85rem; } .step-indicator li .step-number { display: block; font-weight: 700; font-size: 0.75rem; margin-bottom: 0.2rem; color: var(--bcf-cool-gray-7c); text-transform: uppercase; } .step-indicator li.active { color: var(--bcf-power-pink); font-weight: 700; } .step-indicator li.active .step-number { color: var(--bcf-power-pink); } .step-indicator li.completed { color: var(--bcf-resilient-green); } .step-indicator li.completed .step-number { color: var(--bcf-resilient-green); } .step-indicator li.completed:hover { cursor: pointer; color: #04534f; } .step-indicator li.completed:hover .step-number { color: #04534f; } .step-indicator li:after { content: ''; position: absolute; height: 4px; width: 100%; background-color: #e9ecef; bottom: 0; left: 0; z-index: 1; border-radius: 2px; } .step-indicator li.active:after { background-color: var(--bcf-power-pink); } .step-indicator li.completed:after { background-color: var(--bcf-resilient-green); } /* --- Registration Content --- */ .registration-container { max-width: 760px; margin: 0 auto; padding: 2rem 1rem; } .registration-step { display: none; } .registration-step.active { display: block; } .registration-card { background-color: var(--bcf-card-bg); border: 1px solid var(--bcf-border-color); box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-radius: 0.375rem; } .registration-card .card-body { padding: 2rem 2.5rem; } .registration-title { font-family: var(--bcf-font-primary); color: var(--bcf-resilient-green); margin-bottom: 1.5rem; font-size: 2rem; } .bcf-info-box { background-color: var(--bcf-light-green-tint); border-left: 4px solid var(--bcf-resilient-green); padding: 1rem 1.25rem; margin-bottom: 1.75rem; border-radius: 0.3rem; } .bcf-info-box h5 { font-family: var(--bcf-font-primary); color: var(--bcf-resilient-green); margin-top: 0; margin-bottom: 0.3rem; font-size: 1.1rem; } .bcf-info-box p { color: #04534f; margin-bottom: 0; font-size: 0.9rem; } /* Alert box with theme green */ .alert-bcf-green { color: var(--bcf-resilient-green); background-color: var(--bcf-light-green-tint); border: 1px solid var(--bcf-resilient-green); } /* Form Elements & Buttons */ .form-label { font-weight: 500; margin-bottom: 0.5rem; color: var(--bcf-sturdy-grey-dark); } .form-control, .form-select { border-radius: 0.3rem; padding: 0.6rem 0.9rem; font-size: 0.95rem; border: 1px solid #ced4da; } .form-control:focus, .form-select:focus { border-color: var(--bcf-power-pink); box-shadow: 0 0 0 0.2rem rgba(255, 0, 128, 0.2); } .form-check-input:checked { background-color: var(--bcf-power-pink); border-color: var(--bcf-power-pink); } .form-check-input:focus { border-color: var(--bcf-power-pink); box-shadow: 0 0 0 0.2rem rgba(255, 0, 128, 0.2); } .btn-bcf-primary { background-color: var(--bcf-power-pink); border-color: var(--bcf-power-pink); color: var(--bcf-white); font-weight: 500; padding: 0.65rem 1.5rem; font-size: 0.95rem; border-radius: 0.3rem; transition: all 0.2s ease; } .btn-bcf-primary:hover, .btn-bcf-primary:focus { background-color: #e00073; border-color: #d1006a; color: var(--bcf-white); box-shadow: 0 0 0 0.2rem rgba(255, 0, 128, 0.3); transform: translateY(-1px); } .btn-bcf-primary:active { transform: translateY(0px); } .btn-bcf-secondary { /* For Apply Promo button */ background-color: var(--bcf-resilient-green); border-color: var(--bcf-resilient-green); color: var(--bcf-white); font-weight: 500; padding: 0.65rem 1.25rem; /* Adjusted for "Apply" */ font-size: 0.95rem; border-radius: 0.3rem; transition: all 0.2s ease; } .btn-bcf-secondary:hover, .btn-bcf-secondary:focus { background-color: #044a46; border-color: #033b38; color: var(--bcf-white); box-shadow: 0 0 0 0.2rem rgba(6, 100, 95, 0.3); transform: translateY(-1px); } .btn-bcf-secondary:active { transform: translateY(0px); } .btn-outline-bcf { color: var(--bcf-cool-gray-7c); border: 1px solid #ced4da; font-weight: 500; padding: 0.65rem 1.5rem; font-size: 0.95rem; border-radius: 0.3rem; transition: all 0.2s ease; } .btn-outline-bcf:hover { color: var(--bcf-sturdy-grey-dark); background-color: #e9ecef; border-color: #adb5bd; transform: translateY(-1px); } .btn-outline-bcf:active { transform: translateY(0px); } /* Category Selection Cards (Step 1) */ #event-categories-list .form-check.border { transition: all 0.15s ease-in-out; border-radius: 0.3rem !important; } #event-categories-list .form-check.border:hover { border-color: var(--bcf-cool-gray-7c) !important; box-shadow: 0 2px 5px rgba(0,0,0,0.08); transform: translateY(-2px); } #event-categories-list .form-check-input[type="radio"]:checked + .form-check-label .badge { background-color: var(--bcf-power-pink) !important; color: var(--bcf-white) !important; } #event-categories-list .badge { font-size: 0.85em; padding: 0.45em 0.7em; } .border-bcf-power-pink-selected { /* For selected category card */ border-color: var(--bcf-power-pink) !important; border-width: 2px !important; background-color: var(--bcf-light-pink-tint) !important; } /* Participant Type Selection Cards (Step 2) */ .card-radio-select .form-check-input { display: none; } .card-radio-select .form-check-label.card { cursor: pointer; border: 2px solid var(--bcf-border-color); transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s; height: 100%; /* Make cards in a row same height */ display: flex; flex-direction: column; justify-content: center; /* Vertically center content */ } .card-radio-select .form-check-input:checked + .form-check-label.card { border-color: var(--bcf-power-pink); background-color: var(--bcf-light-pink-tint); box-shadow: 0 0 0 0.15rem rgba(255, 0, 128, 0.25); } .card-radio-select .form-check-label.card:hover { border-color: var(--bcf-cool-gray-7c); background-color: #f8f9fa; } .card-radio-select .form-check-label.card i { transition: color 0.2s; } .card-radio-select .form-check-input:checked + .form-check-label.card i { color: var(--bcf-power-pink) !important; } /* Group of 4 Options Box (Step 2) */ #group-of-4-options { background-color: #f8f9fa; } /* BCF Membership Button Group (Step 3) */ .btn-group > .btn-check:checked + .btn-outline-secondary { background-color: var(--bcf-resilient-green); color: var(--bcf-white); border-color: var(--bcf-resilient-green); z-index: 1; } /* T-Shirt sizes (Step 4) */ .tshirt-sizes { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-start; /* Flush to left */ } .tshirt-sizes .form-check { flex: 0 0 calc(25% - 0.5rem); max-width: calc(25% - 0.5rem); padding-left: 0; } .tshirt-sizes .form-check-input[type="radio"] { display: none; } .tshirt-sizes .form-check-label { border: 1px solid #ced4da; padding: 0.5rem 1rem; border-radius: 0.3rem; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s; font-size:0.85rem; display: block; text-align: center; } .tshirt-sizes .form-check-input[type="radio"]:checked + .form-check-label { background-color: var(--bcf-power-pink); border-color: var(--bcf-power-pink); color: var(--bcf-white); } .tshirt-sizes .form-check-input[type="radio"]:focus + .form-check-label { border-color: var(--bcf-power-pink); box-shadow: 0 0 0 0.2rem rgba(255, 0, 128, 0.2); } /* T-Shirt size chart image */ .tshirt-size-chart img { max-width: 100%; height: auto; } /* Jacket sizes (Step 5 Upsell) */ .jacket-sizes { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-start; } .jacket-sizes .form-check { flex: 0 0 calc(25% - 0.5rem); max-width: calc(25% - 0.5rem); padding-left: 0; } .jacket-sizes .form-check-input[type="radio"] { display: none; } .jacket-sizes .form-check-label { border: 1px solid #ced4da; padding: 0.5rem 1rem; border-radius: 0.3rem; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s; font-size: 0.85rem; display: block; text-align: center; } .jacket-sizes .form-check-input[type="radio"]:checked + .form-check-label { background-color: var(--bcf-power-pink); border-color: var(--bcf-power-pink); color: var(--bcf-white); } .jacket-sizes .form-check-input[type="radio"]:focus + .form-check-label { border-color: var(--bcf-power-pink); box-shadow: 0 0 0 0.2rem rgba(255, 0, 128, 0.2); } /* Jacket size chart image */ .jacket-size-chart img { max-width: 100%; height: auto; } /* Footer */ .portal-footer { background-color: #2c3034; color: #adb5bd; padding: 2rem 0; margin-top: auto; font-size: 0.875rem; } .portal-footer a { color: var(--bcf-white); text-decoration: none; } .portal-footer a:hover { color: var(--bcf-power-pink); text-decoration: underline; } /* Button group for navigation */ .step-navigation { display: flex; justify-content: space-between; margin-top: 2.5rem; } /* Participant Block Styling (Step 4) */ .participant-block { background-color: var(--bcf-light-bg) !important; /* Bootstrap class bg-light-subtle not always available */ } /* Spacing between participant info sections */ .personal-info-group, .address-info-group, .emergency-info-group { margin-bottom: 1.5rem; } #registration-summary .card { border: 1px solid var(--bcf-border-color); /* Consistent border */ margin-bottom: 1.25rem; /* Spacing between summary cards */ } #registration-summary .card .card-header { background-color: var(--bcf-light-green-tint); /* Light green tint for headers */ color: var(--bcf-resilient-green); /* Resilient green text for headers */ font-weight: 600; /* Slightly bolder headers */ padding: 0.75rem 1.25rem; /* Adjust padding */ border-bottom: 1px solid var(--bcf-border-color); } #registration-summary .card .card-body { padding: 1rem 1.25rem; /* Consistent padding in card bodies */ } #registration-summary .participant-summary-item p { font-size: 0.9rem; /* Slightly smaller text in participant list */ color: #495057; /* Softer black for participant details */ } #registration-summary .participant-summary-item strong { color: var(--bcf-sturdy-grey-dark); /* Darker color for labels */ } /* Order Total List Group */ #registration-summary .list-group-item { padding: 0.75rem 1.25rem; /* Adjust padding */ font-size: 0.9rem; border-color: var(--bcf-border-color); /* Ensure consistent border */ } #registration-summary .list-group-item strong { /* For "Total Amount Due" text */ color: var(--bcf-sturdy-grey-dark); } #registration-summary #summary-total-due { /* The actual amount */ font-weight: 700; /* Bolder total amount */ font-size: 1.2em; /* Make total amount slightly larger */ color: var(--bcf-power-pink); } #registration-summary #summary-discount-row { /* The discount row text */ color: var(--bcf-power-pink) !important; /* Ensure discount text is pink */ } #registration-summary #summary-discount-amount { /* The discount amount */ font-weight: 600; } /* Payment Method Section */ #registration-summary .card-payment-method .card-body { /* Specific styling for payment card if needed */ /* background-color: #fcfcfc; */ /* Example: very light off-white */ } #registration-summary #stripe-payment-element-placeholder { background-color: var(--bcf-white); /* White background for stripe placeholder */ border: 1px dashed var(--bcf-cool-gray-7c); /* Dashed border */ color: var(--bcf-cool-gray-7c); font-style: italic; } #registration-summary .form-check-label a { /* Terms and conditions links */ font-weight: 500; /* Make links slightly bolder */ }