/* * FCOS UI — Shared CSS Utility Library * Usage: * Brand: Override --brand in your :root to change accent color * Mode: Add class="light-mode" to for light theme * Version: 1.0.0 */ /* ========================================================================== 1. BRAND TOKENS ========================================================================== */ :root { --bg: #000; --surface: rgba(12,12,12,.95); --card: rgba(18,18,18,.95); --border: rgba(249,201,39,.18); --border-s: rgba(249,201,39,.35); --accent: var(--brand, #f9c927); --accent-glow: rgba(249,201,39,.08); --accent-light: rgba(249,201,39,.12); --text: #f5f0e8; --text-s: #c4b99a; --text-m: #8a7e65; --success: #7abd6a; --danger: #c45a5a; --warning: #e8a838; --info: #5b9bd5; --radius: 12px; --radius-sm: 8px; --radius-lg: 20px; --radius-pill: 999px; --font: Inter, -apple-system, system-ui, sans-serif; --mono: 'SF Mono', Consolas, 'Courier New', monospace; --shadow: 0 4px 24px rgba(0,0,0,.3); --shadow-lg: 0 8px 40px rgba(0,0,0,.4); --shadow-glow: 0 4px 20px rgba(249,201,39,.1); --transition: .15s ease; --brand: #f9c927; } /* ========================================================================== 2. RESET & BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font); font-weight: 420; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; } a { color: inherit; text-decoration: none; } img, video, svg { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; color: inherit; } ul, ol { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } /* ========================================================================== 3. TYPOGRAPHY ========================================================================== */ .h1 { font-size: 2.5rem; font-weight: 750; letter-spacing: -.03em; line-height: 1.15; color: var(--text); } .h2 { font-size: 1.875rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--text); } .h3 { font-size: 1.375rem; font-weight: 650; letter-spacing: -.015em; line-height: 1.3; color: var(--text); } .h4 { font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; color: var(--text); } .h5 { font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; line-height: 1.4; color: var(--text-s); } .h6 { font-size: 0.8125rem; font-weight: 600; letter-spacing: .01em; line-height: 1.4; color: var(--text-s); } .text-s { color: var(--text-s); } .text-m { color: var(--text-m); } .text-accent { color: var(--accent); } .text-success { color: var(--success); } .text-danger { color: var(--danger); } .text-warning { color: var(--warning); } .text-info { color: var(--info); } .text-center { text-align: center; } .text-right { text-align: right; } .font-mono { font-family: var(--mono); } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .label { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-m); } /* ========================================================================== 4. LAYOUT ========================================================================== */ .container { max-width: 1160px; margin-inline: auto; padding-inline: 24px; width: 100%; } .container-sm { max-width: 720px; margin-inline: auto; padding-inline: 24px; width: 100%; } .container-lg { max-width: 1400px; margin-inline: auto; padding-inline: 24px; width: 100%; } .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); } .gap-sm { gap: 8px; } .gap-md { gap: 16px; } .gap-lg { gap: 24px; } .gap-xl { gap: 32px; } .hidden { display: none !important; } .mobile-only { display: none; } .desktop-only { display: block; } /* ========================================================================== 5. CARDS ========================================================================== */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; transition: border-color var(--transition), box-shadow var(--transition); } .card:hover { border-color: var(--border-s); box-shadow: var(--shadow-glow); } .card-header { padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 16px; } .card-body { flex: 1; } .card-footer { padding-top: 16px; border-top: 1px solid var(--border); margin-top: 16px; } .card-featured { border-color: var(--border-s); box-shadow: var(--shadow-glow), inset 0 1px 0 var(--accent-light); } .card-compact { padding: 12px; } /* ========================================================================== 6. BUTTONS ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 22px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: transparent; font-size: 13px; font-weight: 550; cursor: pointer; transition: all var(--transition); white-space: nowrap; line-height: 1; } .btn:hover { border-color: var(--border-s); } .btn-primary { background: var(--accent-light); border-color: var(--accent); color: #fff; } .btn-primary:hover { background: rgba(249,201,39,.22); box-shadow: var(--shadow-glow); } .btn-secondary { background: transparent; border-color: var(--border); color: var(--text-s); } .btn-secondary:hover { border-color: var(--border-s); color: var(--text); } .btn-danger { border-color: var(--danger); color: var(--danger); } .btn-danger:hover { background: rgba(196,90,90,.12); } .btn-success { border-color: var(--success); color: var(--success); } .btn-success:hover { background: rgba(122,189,106,.12); } .btn-sm { padding: 6px 14px; font-size: 12px; } .btn-lg { padding: 14px 32px; font-size: 15px; } .btn-block { display: flex; width: 100%; } .btn-icon { padding: 10px; aspect-ratio: 1; } .btn:disabled, .btn[disabled] { opacity: .35; pointer-events: none; } .btn-group { display: inline-flex; } .btn-group .btn { border-radius: 0; margin-left: -1px; } .btn-group .btn:first-child { border-radius: var(--radius-pill) 0 0 var(--radius-pill); margin-left: 0; } .btn-group .btn:last-child { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; } /* ========================================================================== 7. FORMS ========================================================================== */ .input, .select, .textarea { width: 100%; padding: 10px 14px; background: rgba(0,0,0,.4); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 14px; transition: border-color var(--transition), box-shadow var(--transition); outline: none; } .input:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .input::placeholder, .textarea::placeholder { color: var(--text-m); } .textarea { resize: vertical; min-height: 80px; } .select { appearance: none; cursor: pointer; } .input-group { display: flex; gap: 0; } .input-group .input { border-radius: var(--radius-sm) 0 0 var(--radius-sm); } .input-group .btn { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .form-group { margin-bottom: 16px; } .form-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-m); margin-bottom: 6px; } .form-error .input, .form-error .textarea, .form-error .select { border-color: var(--danger); } .form-error-text { font-size: 12px; color: var(--danger); margin-top: 4px; } .form-hint { font-size: 12px; color: var(--text-m); margin-top: 4px; } /* Custom checkbox & radio */ .checkbox, .radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; } .checkbox input, .radio input { display: none; } .checkbox span, .radio span { width: 18px; height: 18px; border: 1px solid var(--border-s); background: rgba(0,0,0,.3); display: inline-flex; align-items: center; justify-content: center; transition: all var(--transition); } .checkbox span { border-radius: 4px; } .radio span { border-radius: 50%; } .checkbox input:checked + span, .radio input:checked + span { border-color: var(--accent); background: var(--accent-light); } .checkbox input:checked + span::after { content: ''; width: 10px; height: 10px; background: var(--accent); border-radius: 2px; } .radio input:checked + span::after { content: ''; width: 8px; height: 8px; background: var(--accent); border-radius: 50%; } /* Toggle switch */ .toggle { position: relative; display: inline-block; width: 40px; height: 22px; cursor: pointer; } .toggle input { display: none; } .toggle span { position: absolute; inset: 0; background: rgba(255,255,255,.08); border-radius: var(--radius-pill); transition: background var(--transition); } .toggle span::after { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: var(--text-m); border-radius: 50%; transition: transform var(--transition), background var(--transition); } .toggle input:checked + span { background: var(--accent-light); } .toggle input:checked + span::after { transform: translateX(18px); background: var(--accent); } /* ========================================================================== 8. TABLES ========================================================================== */ .table { width: 100%; } .table th { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-m); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-s); } .table td { padding: 12px; border-bottom: 1px solid var(--border); font-size: 14px; } .table-hover tr:hover td { background: var(--accent-glow); } .table-striped tr:nth-child(even) td { background: rgba(255,255,255,.02); } .table-sortable th { cursor: pointer; } .table-sortable th:hover { color: var(--text-s); } /* ========================================================================== 9. BADGES & TAGS ========================================================================== */ .badge { display: inline-flex; align-items: center; padding: 3px 10px; font-size: 11px; font-weight: 600; border-radius: var(--radius-pill); background: var(--accent-light); color: var(--accent); } .badge-success { background: rgba(122,189,106,.12); color: var(--success); } .badge-danger { background: rgba(196,90,90,.12); color: var(--danger); } .badge-warning { background: rgba(232,168,56,.12); color: var(--warning); } .badge-info { background: rgba(91,155,213,.12); color: var(--info); } .badge-outline { background: transparent; border: 1px solid currentColor; } .tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; font-size: 12px; font-weight: 550; border-radius: var(--radius-sm); background: var(--accent-light); color: var(--accent); } /* ========================================================================== 10. MODALS & OVERLAYS ========================================================================== */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; z-index: 100; } .modal-overlay.open { display: flex; } .modal { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; max-width: 420px; width: 90%; box-shadow: var(--shadow-lg); } .modal-title { font-size: 18px; font-weight: 650; color: var(--accent); margin-bottom: 12px; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; } /* ========================================================================== 11. TOASTS & NOTIFICATIONS ========================================================================== */ .toast-container { position: fixed; top: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 200; pointer-events: none; } .toast { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 18px; font-size: 13px; pointer-events: auto; animation: fcos-slide-in .25s ease forwards; box-shadow: var(--shadow); } .toast-success { border-color: var(--success); } .toast-error { border-color: var(--danger); } .toast-info { border-color: var(--info); } .toast-warning { border-color: var(--warning); } @keyframes fcos-slide-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } /* ========================================================================== 12. PROGRESS & LOADING ========================================================================== */ .progress-bar { width: 100%; height: 6px; background: var(--border); border-radius: var(--radius-pill); overflow: hidden; } .progress-fill { height: 100%; background: var(--accent); border-radius: var(--radius-pill); transition: width .4s ease; } .spinner { width: 24px; height: 24px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: fcos-spin .6s linear infinite; } @keyframes fcos-spin { to { transform: rotate(360deg); } } .skeleton { background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 75%); background-size: 200% 100%; animation: fcos-pulse 1.5s ease infinite; border-radius: var(--radius-sm); } .skeleton-text { height: 14px; width: 80%; margin-bottom: 8px; } .skeleton-card { height: 120px; width: 100%; } .skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; } @keyframes fcos-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ========================================================================== 13. NAVIGATION ========================================================================== */ .nav { position: sticky; top: 0; background: rgba(0,0,0,.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); z-index: 50; } .nav-inner { display: flex; align-items: center; justify-content: space-between; max-width: 1160px; margin-inline: auto; padding-inline: 24px; min-height: 64px; } .nav-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--accent); font-size: 16px; } .nav-links { display: flex; align-items: center; gap: 16px; font-size: 14px; } .nav-links a { color: var(--text-s); transition: color var(--transition); } .nav-links a:hover, .nav-links a.active { color: var(--accent); } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 260px; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 20px 12px; overflow-y: auto; z-index: 40; } .sidebar-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 14px; color: var(--text-s); transition: all var(--transition); cursor: pointer; } .sidebar-item:hover { background: rgba(255,255,255,.04); color: var(--text); } .sidebar-item.active { background: var(--accent-light); color: var(--accent); } /* ========================================================================== 14. UTILITY CLASSES ========================================================================== */ /* Margin */ .mt-0 { margin-top: 0; } .mt-sm { margin-top: 8px; } .mt-md { margin-top: 16px; } .mt-lg { margin-top: 24px; } .mt-xl { margin-top: 32px; } .mb-0 { margin-bottom: 0; } .mb-sm { margin-bottom: 8px; } .mb-md { margin-bottom: 16px; } .mb-lg { margin-bottom: 24px; } .mb-xl { margin-bottom: 32px; } /* Padding */ .p-sm { padding: 8px; } .p-md { padding: 16px; } .p-lg { padding: 24px; } /* Border radius */ .rounded { border-radius: var(--radius); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-pill { border-radius: var(--radius-pill); } /* Borders */ .border { border: 1px solid var(--border); } .border-accent { border: 1px solid var(--accent); } /* Backgrounds */ .bg-surface { background: var(--surface); } .bg-card { background: var(--card); } .bg-accent-light { background: var(--accent-light); } /* Sizing */ .w-full { width: 100%; } .h-full { height: 100%; } /* Overflow */ .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } /* Misc */ .cursor-pointer { cursor: pointer; } .no-select { user-select: none; -webkit-user-select: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ========================================================================== 15. LIGHT MODE ========================================================================== */ /* FCOS Light Mode: Gold background (#F9C927) with black text/detailing Matches the FCOS yellow brand variant logos */ .light-mode { --bg: #F9C927; --surface: rgba(0,0,0,.06); --card: rgba(0,0,0,.08); --border: rgba(0,0,0,.15); --border-s: rgba(0,0,0,.25); --accent: #000; --accent-glow: rgba(0,0,0,.08); --accent-light: rgba(0,0,0,.06); --text: #1a1a1a; --text-s: #333; --text-m: #555; --success: #2d7a1e; --danger: #a82020; --shadow: 0 4px 24px rgba(0,0,0,.1); --shadow-lg: 0 8px 40px rgba(0,0,0,.15); --shadow-glow: 0 4px 20px rgba(0,0,0,.08); } .dark-mode { --bg: #000; --surface: rgba(12,12,12,.95); --card: rgba(18,18,18,.95); --border: rgba(249,201,39,.18); --border-s: rgba(249,201,39,.35); --text: #f5f0e8; --text-s: #c4b99a; --text-m: #8a7e65; } /* ========================================================================== 16. PRINT STYLES ========================================================================== */ @media print { .nav, .sidebar, .toast-container, .modal-overlay, .btn, .no-print { display: none !important; } body { background: #fff; color: #000; font-size: 12pt; } .card, .table td, .table th { border-color: #ccc; box-shadow: none; background: #fff; } a { text-decoration: underline; } a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #666; } } /* ========================================================================== 17. RESPONSIVE ========================================================================== */ @media (max-width: 768px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .container, .container-sm, .container-lg { padding-inline: 16px; } .nav-inner { padding-inline: 16px; min-height: 56px; } .sidebar { display: none; } .desktop-only { display: none !important; } .mobile-only { display: block !important; } .h1 { font-size: 1.75rem; } .h2 { font-size: 1.375rem; } .modal { padding: 20px; } } @media (max-width: 480px) { .grid-2 { grid-template-columns: 1fr; } .container, .container-sm, .container-lg { padding-inline: 12px; } .card { padding: 14px; } .btn-lg { padding: 12px 24px; font-size: 14px; } .nav-links { gap: 10px; font-size: 13px; } .h1 { font-size: 1.5rem; } }