/* ============================================================ G100 Ltd — Shared Design System & Theme Tokens Canonical token and component foundation for public, portal, and admin interfaces. - Meets WCAG 2.1 AA contrast standards (>= 4.5:1 normal text, >= 3:1 UI). - Light mode (default) & Dark mode (). - Shared component classes prevent repetitive one-off CSS overrides. ============================================================ */ :root { color-scheme: light; /* Brand Colors */ --navy: #1a2a3a; --gold: #c9a14b; --gold-light: #e0c87a; --gold-dark: #b8923a; --gold-text: #855b00; /* WCAG 4.8:1 contrast on white */ /* Surfaces & Backgrounds */ --g100-bg: #f8fafc; --g100-surface: #ffffff; --g100-surface-2: #f1f5f9; --g100-surface-3: #e2e8f0; --g100-border: #cbd5e1; --g100-border-2: #e2e8f0; /* Text Colors (High Contrast) */ --g100-text: #0f172a; /* 15.2:1 contrast */ --g100-text-soft: #334155; /* 8.8:1 contrast */ --g100-text-muted: #475569; /* 6.2:1 contrast (WCAG AA compliant) */ /* Inputs & Forms */ --g100-input-bg: #ffffff; --g100-input-text: #0f172a; --g100-input-border: #94a3b8; --g100-input-focus-border: #c9a14b; --g100-input-placeholder: #64748b; /* Component Surfaces */ --g100-card-bg: #ffffff; --g100-card-border: #e2e8f0; --g100-section-bg: #f8fafc; --g100-summary-bg: #f1f5f9; --g100-upload-bg: #f8fafc; --g100-upload-hover: #fefaf0; /* Semantics */ --g100-success: #15803d; --g100-success-soft: #dcfce7; --g100-warning: #b45309; --g100-warning-soft: #fef3c7; --g100-danger: #b91c1c; --g100-danger-soft: #fee2e2; --g100-info: #1d4ed8; --g100-info-soft: #dbeafe; /* Layout, Shadows, Radius */ --light-bg: #f8fafc; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); --shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.12); --radius-sm: 8px; --radius: 14px; --radius-lg: 20px; --transition: all 0.25s ease; } :root[data-g100-theme-resolved="dark"] { color-scheme: dark; /* Brand Colors */ --gold-text: #f1cf7a; /* High contrast on dark surfaces */ /* Surfaces & Backgrounds */ --g100-bg: #0e1621; --g100-surface: #16202c; --g100-surface-2: #1c2836; --g100-surface-3: #22313f; --g100-border: #2b3b4b; --g100-border-2: #3a4c5f; /* Text Colors */ --g100-text: #f8fafc; /* 14.8:1 contrast */ --g100-text-soft: #cbd5e1; /* 9.8:1 contrast */ --g100-text-muted: #94a3b8; /* 5.9:1 contrast */ /* Inputs & Forms */ --g100-input-bg: #1c2836; --g100-input-text: #f8fafc; --g100-input-border: #3a4c5f; --g100-input-focus-border: #c9a14b; --g100-input-placeholder: #94a3b8; /* Component Surfaces */ --g100-card-bg: #16202c; --g100-card-border: #2b3b4b; --g100-section-bg: #1c2836; --g100-summary-bg: #1c2836; --g100-upload-bg: #1c2836; --g100-upload-hover: #223347; /* Semantics */ --g100-success: #4ade80; --g100-success-soft: #14532d; --g100-warning: #fbbf24; --g100-warning-soft: #78350f; --g100-danger: #f87171; --g100-danger-soft: #7f1d1d; --g100-info: #60a5fa; --g100-info-soft: #1e3a8a; /* Layout, Shadows, Radius */ --light-bg: #0e1621; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.55); } /* ============================================================ SHARED BASE STYLING ============================================================ */ body { color: var(--g100-text); background: var(--g100-bg); font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; } /* Typography Hierarchy */ h1, h2, h3, h4, h5, h6 { color: var(--g100-text); font-weight: 700; } p { color: var(--g100-text-soft); } /* Text links */ a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; transition: var(--transition); } a:hover, a:focus { color: var(--gold-dark); } .text-gold { color: var(--gold-text) !important; } .text-muted { color: var(--g100-text-muted) !important; } /* ============================================================ SHARED FORM COMPONENTS & ACCESSIBILITY ============================================================ */ /* Form Labels */ .form-label, label:not(.btn):not(.form-check-label) { color: var(--g100-text); font-weight: 600; font-size: 0.9rem; margin-bottom: 0.4rem; display: inline-block; } .form-check-label { color: var(--g100-text); font-weight: 500; font-size: 0.925rem; cursor: pointer; } /* Required field indicator */ .required-star { color: var(--g100-danger); font-weight: 700; margin-left: 3px; } /* Helper & Hint Text */ .form-text, .password-hint, .help-text, small.text-muted, .form-hint { color: var(--g100-text-muted) !important; font-size: 0.825rem !important; font-weight: 500; display: block; margin-top: 0.35rem; } /* Form Controls & Selects */ .form-control, .form-select, select { color: var(--g100-input-text); background-color: var(--g100-input-bg); border: 1.5px solid var(--g100-input-border); border-radius: 10px; padding: 0.65rem 1rem; font-size: 0.95rem; transition: var(--transition); } select option, select optgroup, .form-select option, .form-select optgroup { background-color: var(--g100-input-bg) !important; color: var(--g100-input-text) !important; } .form-control::placeholder { color: var(--g100-input-placeholder); opacity: 1; } .form-control:focus, .form-select:focus, select:focus { color: var(--g100-input-text); background-color: var(--g100-input-bg); border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 161, 75, 0.25); outline: none; } .form-control:disabled, .form-control[readonly] { background-color: var(--g100-surface-3); color: var(--g100-text-muted); border-color: var(--g100-border); opacity: 0.85; } /* Browser Autofill Consistency */ .form-control:-webkit-autofill, .form-control:-webkit-autofill:hover, .form-control:-webkit-autofill:focus { -webkit-text-fill-color: var(--g100-input-text) !important; -webkit-box-shadow: 0 0 0 1000px var(--g100-input-bg) inset !important; transition: background-color 5000s ease-in-out 0s; } /* Checkboxes */ .form-check-input { background-color: var(--g100-input-bg); border: 1.5px solid var(--g100-input-border); width: 1.15em; height: 1.15em; cursor: pointer; } .form-check-input:checked { background-color: var(--gold); border-color: var(--gold); } .form-check-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 161, 75, 0.25); } /* ============================================================ SHARED CARDS & CONTAINERS ============================================================ */ .card, .card-register, .card-reset, .card-forgot { background: var(--g100-card-bg); border: 1px solid var(--g100-card-border); border-radius: var(--radius); color: var(--g100-text); box-shadow: var(--shadow-md); } .register-section { background: var(--g100-section-bg); border: 1px solid var(--g100-card-border); border-left: 5px solid var(--gold); border-radius: var(--radius); padding: 1.5rem 2rem; margin-bottom: 1.5rem; transition: var(--transition); } .register-section h5 { color: var(--g100-text); font-weight: 700; margin-bottom: 1rem; } /* Summary Box (e.g. Registration confirmation details) */ .summary-box, .p-3.bg-white.rounded, .p-3.bg-light.rounded { background: var(--g100-summary-bg) !important; border: 1px solid var(--g100-border) !important; border-radius: var(--radius-sm); color: var(--g100-text) !important; } .summary-box p, .p-3.bg-white.rounded p, .p-3.bg-light.rounded p { color: var(--g100-text) !important; margin-bottom: 0.4rem; font-size: 0.95rem; } .summary-box strong, .p-3.bg-white.rounded strong, .p-3.bg-light.rounded strong { color: var(--g100-text); font-weight: 700; } /* ============================================================ DOCUMENT UPLOAD DROPZONE ============================================================ */ .upload-box { border: 2px dashed var(--g100-border); border-radius: 12px; padding: 2rem 1rem; text-align: center; background: var(--g100-upload-bg); color: var(--g100-text); transition: var(--transition); cursor: pointer; } .upload-box:hover, .upload-box.dragover { border-color: var(--gold); background: var(--g100-upload-hover); } .upload-box .upload-icon { font-size: 2.4rem; color: var(--gold); margin-bottom: 0.5rem; } .upload-box p { color: var(--g100-text); margin-bottom: 0.25rem; } .upload-box .file-name { margin-top: 0.5rem; font-size: 0.88rem; color: var(--g100-text-muted); font-weight: 500; } /* ============================================================ PROGRESS STEP INDICATORS ============================================================ */ .step-dot { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--g100-surface-3); color: var(--g100-text-soft); font-weight: 700; font-size: 1.1rem; transition: var(--transition); margin-right: 8px; border: 2px solid transparent; } .step-dot.active { background: var(--gold); color: #ffffff; border-color: var(--gold-dark); transform: scale(1.08); box-shadow: 0 4px 15px rgba(201, 161, 75, 0.35); } .step-dot.done { background: var(--g100-success); color: #ffffff; } .step-label { font-weight: 500; font-size: 0.85rem; color: var(--g100-text-muted); } .step-label.active-label { color: var(--g100-text); font-weight: 700; } /* ============================================================ BUTTONS ============================================================ */ .btn-gold { background: var(--gold); border: 1px solid var(--gold-dark); color: #ffffff; padding: 0.65rem 2.2rem; border-radius: 50px; font-weight: 600; font-size: 0.95rem; transition: var(--transition); display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; text-decoration: none; } .btn-gold:hover, .btn-gold:focus { background: var(--gold-dark); border-color: var(--gold-dark); color: #ffffff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(201, 161, 75, 0.3); } .btn-outline-gold { color: var(--gold-text); border: 2px solid var(--gold); background: transparent; border-radius: 50px; font-weight: 600; padding: 0.6rem 2.2rem; transition: var(--transition); text-decoration: none; } .btn-outline-gold:hover, .btn-outline-gold:focus { background: var(--gold); color: #ffffff; transform: translateY(-2px); } .btn-secondary { background: var(--g100-surface-3); color: var(--g100-text); border: 1px solid var(--g100-border); border-radius: 50px; padding: 0.6rem 2.2rem; font-weight: 600; transition: var(--transition); } .btn-secondary:hover, .btn-secondary:focus { background: var(--g100-border); color: var(--g100-text); transform: translateY(-2px); } /* ============================================================ THEME TOGGLE ============================================================ */ .g100-theme-toggle { border: 1px solid var(--g100-border-2); background: var(--g100-surface); color: var(--g100-text); border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 6px; transition: var(--transition); } .g100-theme-toggle:hover { border-color: var(--gold); }