/* ================================================================= assets/css/style.css ----------------------------------------------------------------- Plain, framework-free CSS for the Golf Simulator Booking System. HOW TO INTEGRATE INTO YOUR EXISTING SITE: - Everything is namespaced under a small set of class names (.gb-*) and CSS custom properties (variables), so it shouldn't clash with your existing site's classes. - Just change the values in the :root block below to match your site's fonts / colours - the main accent colour requested is already set to #f6192b. - If your site already has its own font/background, feel free to delete those two rules and inherit from your theme. ================================================================= */ :root { /* ---- Brand colours ---- */ --gb-primary: #f6192b; /* main brand colour, as requested */ --gb-primary-dark: #c9101f; /* used for hover states */ --gb-primary-light: #fdeced; /* light tint, used for backgrounds/badges */ /* ---- Neutrals ---- */ --gb-text: #2b2b2b; --gb-text-muted: #6b6b6b; --gb-border: #e2e2e2; --gb-bg: #f7f7f8; --gb-white: #ffffff; /* ---- Status colours (for slot availability) ---- */ --gb-success: #1e8449; --gb-success-bg: #eafaf0; --gb-disabled-bg: #eeeeee; --gb-disabled-text: #a3a3a3; /* ---- Sizing ---- */ --gb-radius: 8px; --gb-radius-sm: 4px; --gb-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); } /* ----------------------------------------------------------- Base / layout ----------------------------------------------------------- */ .gb-wrapper { max-width: 720px; margin: 0 auto; padding: 24px 16px 64px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: var(--gb-text); } .gb-header { text-align: center; margin-bottom: 32px; } .gb-header h1 { font-size: 24px; margin: 0 0 4px; } .gb-header p { color: var(--gb-text-muted); margin: 0; } .gb-card { background: var(--gb-white); border: 1px solid var(--gb-border); border-radius: var(--gb-radius); box-shadow: var(--gb-shadow); padding: 24px; } /* ----------------------------------------------------------- Progress bar (3-step form) ----------------------------------------------------------- */ .gb-progressbar { display: flex; justify-content: space-between; margin-bottom: 32px; counter-reset: gb-step; } .gb-progressbar .gb-progress-step { flex: 1; text-align: center; position: relative; font-size: 13px; color: var(--gb-text-muted); } .gb-progressbar .gb-progress-step::before { counter-increment: gb-step; content: counter(gb-step); display: block; width: 32px; height: 32px; line-height: 32px; border-radius: 50%; background: var(--gb-disabled-bg); color: var(--gb-disabled-text); font-weight: 700; margin: 0 auto 6px; transition: background 0.2s ease, color 0.2s ease; } /* Connecting line between steps */ .gb-progressbar .gb-progress-step:not(:last-child)::after { content: ''; position: absolute; top: 16px; left: calc(50% + 20px); right: calc(-50% + 20px); height: 2px; background: var(--gb-disabled-bg); z-index: 0; } .gb-progressbar .gb-progress-step.active::before, .gb-progressbar .gb-progress-step.completed::before { background: var(--gb-primary); color: #fff; } .gb-progressbar .gb-progress-step.completed:not(:last-child)::after { background: var(--gb-primary); } .gb-progressbar .gb-progress-step.active { color: var(--gb-primary); font-weight: 700; } /* ----------------------------------------------------------- Form elements ----------------------------------------------------------- */ .gb-form-step { display: none; } .gb-form-step.active { display: block; animation: gb-fade-in 0.2s ease; } @keyframes gb-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .gb-form-group { margin-bottom: 18px; } .gb-form-group label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; } .gb-form-group .gb-required { color: var(--gb-primary); } .gb-form-row { display: flex; gap: 16px; } .gb-form-row .gb-form-group { flex: 1; } .gb-input, .gb-select { width: 100%; padding: 10px 12px; font-size: 14px; border: 1px solid var(--gb-border); border-radius: var(--gb-radius-sm); background: var(--gb-white); color: var(--gb-text); box-sizing: border-box; } .gb-input:focus, .gb-select:focus { outline: none; border-color: var(--gb-primary); box-shadow: 0 0 0 3px var(--gb-primary-light); } .gb-hint { font-size: 12px; color: var(--gb-text-muted); margin-top: 4px; } .gb-error-text { font-size: 12px; color: var(--gb-primary); margin-top: 4px; display: none; } .gb-form-group.gb-invalid .gb-input, .gb-form-group.gb-invalid .gb-select { border-color: var(--gb-primary); } .gb-form-group.gb-invalid .gb-error-text { display: block; } /* ----------------------------------------------------------- Client type / booth selection cards (radio-styled) ----------------------------------------------------------- */ .gb-option-group { display: flex; gap: 12px; flex-wrap: wrap; } .gb-option-card { flex: 1; min-width: 160px; border: 2px solid var(--gb-border); border-radius: var(--gb-radius); padding: 14px; cursor: pointer; position: relative; transition: border-color 0.15s ease, background 0.15s ease; } .gb-option-card:hover { border-color: var(--gb-primary-light); } .gb-option-card input[type="radio"] { position: absolute; top: 14px; right: 14px; accent-color: var(--gb-primary); } .gb-option-card.selected { border-color: var(--gb-primary); background: var(--gb-primary-light); } .gb-option-card .gb-option-title { font-weight: 700; margin-bottom: 4px; } .gb-option-card .gb-option-desc { font-size: 13px; color: var(--gb-text-muted); } .gb-option-card.gb-disabled { opacity: 0.5; cursor: not-allowed; } /* ----------------------------------------------------------- Time slot grid ----------------------------------------------------------- */ .gb-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 12px; } .gb-slot { border: 1px solid var(--gb-border); border-radius: var(--gb-radius-sm); padding: 10px 8px; text-align: center; font-size: 13px; cursor: pointer; background: var(--gb-white); transition: all 0.15s ease; } .gb-slot .gb-slot-time { font-weight: 600; display: block; } .gb-slot .gb-slot-price { font-size: 11px; color: var(--gb-text-muted); display: block; margin-top: 2px; } .gb-slot:hover:not(.gb-slot-unavailable) { border-color: var(--gb-primary); } .gb-slot.gb-slot-selected { background: var(--gb-primary); border-color: var(--gb-primary); color: #fff; } .gb-slot.gb-slot-selected .gb-slot-price { color: #ffe1e3; } .gb-slot.gb-slot-offpeak:not(.gb-slot-selected) .gb-slot-price { color: var(--gb-success); } .gb-slot.gb-slot-unavailable { background: var(--gb-disabled-bg); color: var(--gb-disabled-text); cursor: not-allowed; } .gb-slot-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--gb-text-muted); margin-top: 12px; } .gb-slot-legend span { display: inline-flex; align-items: center; gap: 6px; } .gb-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .gb-legend-dot.available { background: var(--gb-white); border: 1px solid var(--gb-border); } .gb-legend-dot.offpeak { background: var(--gb-success-bg); border: 1px solid var(--gb-success); } .gb-legend-dot.unavailable { background: var(--gb-disabled-bg); } .gb-legend-dot.selected { background: var(--gb-primary); } /* ----------------------------------------------------------- Review / summary (step 3) ----------------------------------------------------------- */ .gb-summary-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; } .gb-summary-table td { padding: 10px 0; border-bottom: 1px solid var(--gb-border); font-size: 14px; } .gb-summary-table td:first-child { color: var(--gb-text-muted); width: 40%; } .gb-summary-table td:last-child { font-weight: 600; text-align: right; } .gb-summary-price { font-size: 20px; color: var(--gb-primary); font-weight: 700; } /* ----------------------------------------------------------- Buttons ----------------------------------------------------------- */ .gb-btn { display: inline-block; padding: 12px 22px; border-radius: var(--gb-radius-sm); border: none; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s ease, opacity 0.15s ease; } .gb-btn-primary { background: var(--gb-primary); color: #fff; } .gb-btn-primary:hover { background: var(--gb-primary-dark); } .gb-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } .gb-btn-secondary { background: var(--gb-white); color: var(--gb-text); border: 1px solid var(--gb-border); } .gb-btn-secondary:hover { border-color: var(--gb-text-muted); } .gb-form-nav { display: flex; justify-content: space-between; margin-top: 24px; } /* ----------------------------------------------------------- Alerts / messages ----------------------------------------------------------- */ .gb-alert { padding: 12px 16px; border-radius: var(--gb-radius-sm); font-size: 14px; margin-bottom: 16px; } .gb-alert-error { background: var(--gb-primary-light); color: var(--gb-primary-dark); border: 1px solid var(--gb-primary); } .gb-alert-success { background: var(--gb-success-bg); color: var(--gb-success); border: 1px solid var(--gb-success); } .gb-confirmation { text-align: center; padding: 24px 0; } .gb-confirmation .gb-confirmation-icon { font-size: 48px; margin-bottom: 12px; } /* ----------------------------------------------------------- Small screens ----------------------------------------------------------- */ @media (max-width: 480px) { .gb-form-row { flex-direction: column; gap: 0; } .gb-progressbar .gb-progress-step { font-size: 11px; } } /* ================================================================= ADMIN AREA (re-uses the same variables/classes for consistency) ================================================================= */ .gb-admin-nav { display: flex; justify-content: space-between; align-items: center; background: var(--gb-white); border-bottom: 1px solid var(--gb-border); padding: 14px 24px; margin-bottom: 24px; } .gb-admin-nav .gb-brand { font-weight: 700; color: var(--gb-primary); } .gb-admin-nav a { color: var(--gb-text); text-decoration: none; margin-left: 16px; font-size: 14px; } .gb-admin-nav a:hover { color: var(--gb-primary); } .gb-admin-wrapper { max-width: 960px; margin: 0 auto; padding: 0 16px 48px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } .gb-table { width: 100%; border-collapse: collapse; background: var(--gb-white); border-radius: var(--gb-radius); overflow: hidden; box-shadow: var(--gb-shadow); } .gb-table th, .gb-table td { padding: 10px 14px; border-bottom: 1px solid var(--gb-border); font-size: 13px; text-align: left; } .gb-table th { background: var(--gb-bg); font-weight: 700; color: var(--gb-text-muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.03em; } .gb-table tr:last-child td { border-bottom: none; } .gb-badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; } .gb-badge-guest { background: #eef2ff; color: #3730a3; } .gb-badge-cohort { background: var(--gb-success-bg); color: var(--gb-success); } .gb-badge-confirmed { background: var(--gb-success-bg); color: var(--gb-success); } .gb-badge-cancelled { background: var(--gb-primary-light); color: var(--gb-primary-dark); } .gb-login-wrapper { max-width: 360px; margin: 80px auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }